@charset "UTF-8";
/* Design tokens: custom properties shared by every stylesheet. Add new tokens here; never hard-code a
   value that more than one section needs.

   Brand: "style A" (October 2026). White and ink, brand blue used sparingly (key numbers, links,
   active states, the one highlighted phrase), coral as the second accent and data colour, pale
   tints instead of solid fills, and green ONLY for success, live, published and claimed states.
   Primary buttons are ink with white text. See docs/HANDOFF.md › Brand. */
:root {
  --bg: #ffffff;
  --ink: #0b0d12;
  --muted: #6b7180;
  --faint: #9aa0ad;
  --line: #eceef2;
  --mint: #f4f6f9;
  --canvas: #f7f8fa;

  --brand: #004296;
  --sky: #3b78d8;
  --coral: #ec7d93;
  --coral-ink: #b4344f;
  --tint-blue: #e6eefa;
  --tint-pink: #fbe2e8;

  /* Success, live, published and claimed states only. --success-ink is AA on white and on
     --success-tint. */
  --success: #12a777;
  --success-ink: #0b7a55;
  --success-tint: #e7f6ef;

  /* Problems (a refused upload, a failed save) and things that need attention (an image
     without alt text). The -ink colours are AA on white and on their tints. */
  --negative: #c0392b;
  --negative-ink: #b42318;
  --negative-tint: #fdeef0;
  --negative-line: #f3c9cf;
  --attention-ink: #9a5200;
  --attention-tint: #fff7eb;
  --attention-line: #f0c48a;

  /* Legacy names: --green was the old brand accent, --deep the old button and link ink. */
  --green: var(--brand);
  --deep: var(--ink);

  --button-hover: #262a33;
  --card-shadow: 0 1px 2px rgba(11, 13, 18, .04), 0 24px 60px rgba(11, 13, 18, .07);
  --font-display: "Bricolage Grotesque", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius: 12px;

  /* Motion (used by motion.css; reuse them for section transitions). */
  --motion-ease-out: cubic-bezier(.16, 1, .3, 1);
  --motion-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --motion-duration: .8s;
  --motion-duration-draw: 1.6s;
  --motion-distance: 28px;
  --motion-step: 80ms;
}

/* Element resets, document defaults and layout utilities (.container, .visually-hidden). */

/* Leptos island wrappers must not affect layout. */
leptos-island,
leptos-children {
  display: contents;
}

:root {
  font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color: var(--ink);
  background: #fff;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

button,
a,
label,
summary,
input {
  -webkit-tap-highlight-color: transparent;
}

button,
input[type=checkbox],
input[type=radio],
input[type=range],
summary {
  cursor: pointer;
}

button {
  border: 0;
}

img,
svg {
  max-width: 100%;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3 {
  letter-spacing: -.045em;
}

h2 {
  font-size: clamp(26px,2.65vw,36px);
  line-height: 1.13;
  font-weight: 740;
}

h3 {
  font-size: 18px;
  line-height: 1.3;
}

p {
  line-height: 1.6;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

::selection {
  background: #c4d3ea;
  color: #061d3f;
}

:focus-visible {
  outline: 3px solid #124ea9;
  outline-offset: 5px;
  border-radius: 3px;
}

.container {
  width: min(1240px,calc(100% - 80px));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1150px) {
  .container {
    width: calc(100% - 56px);
  }
}

@media (max-width: 900px) {
  .container {
    width: calc(100% - 40px);
  }
}

@media (max-width: 700px) {
  :root {
    scroll-padding-top: 24px;
  }
  .container {
    width: calc(100% - 36px);
  }
}

@media (max-width: 370px) {
  .container {
    width: calc(100% - 28px);
  }
}

html {
  scroll-padding-top: 90px;
}

@media (max-width: 900px) {
  html {
    scroll-padding-top: 78px;
  }
}

@media (max-width: 700px) {
  html {
    scroll-padding-top: 74px;
  }
}

/* Shared components rendered by crates/web/src/components/ (icon, button, eyebrow, section
   heading, check list, preview card, wordmark). Section-specific variants belong in the section's file. */

.icon {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

.section {
  padding-block: 58px;
  scroll-margin-top: 24px;
}

.eyebrow {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .135em;
  color: #7d848a;
  line-height: 1.5;
  margin-bottom: 11px;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}

.section-description {
  color: var(--muted);
  font-size: 15px;
  max-width: 510px;
  margin-top: 13px;
  line-height: 1.65;
}

.section-note {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  padding-bottom: 4px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  min-height: 48px;
  padding: 12px 21px;
  border: 1px solid var(--deep);
  border-radius: 7px;
  background: var(--deep);
  color: #fff;
  font-size: 14px;
  font-weight: 650;
  box-shadow: 0 2px 3px #0e223f10;
  transition: background .2s,transform .2s,box-shadow .2s;
}

.button:hover {
  background: #083476;
  box-shadow: 0 4px 12px #162a4720;
  transform: translateY(-1px);
}

.button .icon {
  width: 16px;
  height: 16px;
}

.check-list {
  display: grid;
  gap: 10px;
  font-size: 13px;
  color: #666971;
}

.check-list li {
  display: flex;
  gap: 8px;
  align-items: start;
  line-height: 1.5;
}

.check-list .icon {
  color: #134898;
  width: 14px;
  height: 14px;
  margin-top: 2px;
}

.preview-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 3px 5px #101b2c03;
}

.card-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
}

.card-toolbar strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: -.02em;
}

.card-toolbar .icon {
  width: 15px;
  height: 15px;
  color: #354e74;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.wordmark span {
  font-size: 25px;
  font-weight: 780;
  letter-spacing: -1.3px;
}

.wordmark img {
  width: 32px;
  height: 32px;
}

.google-mark {
  font-family: Arial,sans-serif;
  font-weight: 800;
  font-size: 25px;
  line-height: 1;
  display: inline-block;
  background: conic-gradient(#4285f4 0deg 90deg,#3462a8 90deg 160deg,#fbbc05 160deg 215deg,#ea4335 215deg 285deg,#4285f4 285deg);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

@media (max-width: 900px) {
  .wordmark span {
    font-size: 23px;
  }
  .wordmark img {
    width: 29px;
    height: 29px;
  }
  .section {
    padding-block: 42px;
  }
  .section-heading {
    gap: 15px;
  }
  .section-note {
    font-size: 10px;
  }
  .section-description {
    font-size: 13px;
  }
  .card-toolbar {
    padding: 16px;
  }
  .card-toolbar strong {
    font-size: 11px;
  }
  .google-mark {
    font-size: 21px;
  }
}

@media (max-width: 700px) {
  .wordmark span {
    font-size: 24px;
  }
  .wordmark img {
    width: 30px;
    height: 30px;
  }
  .section {
    padding-block: 37px;
  }
  .section-heading {
    display: block;
    margin-bottom: 23px;
  }
  .section-note {
    display: block;
    font-size: 11px;
    margin-top: 13px;
  }
  .eyebrow {
    font-size: 10px;
    margin-bottom: 9px;
    letter-spacing: .11em;
  }
  .section-description {
    font-size: 13px;
    margin-top: 12px;
    max-width: 450px;
  }
  .card-toolbar {
    padding: 18px 17px;
  }
  .card-toolbar strong {
    font-size: 12px;
  }
  .google-mark {
    font-size: 24px;
  }
}

@media (max-width: 370px) {
  .wordmark span {
    font-size: 22px;
  }
  .wordmark img {
    width: 28px;
    height: 28px;
  }
}

.button {
  font-size: 14px;
}

.eyebrow {
  font-size: 11px;
}

.section-description {
  font-size: 16px;
  line-height: 1.65;
}

.section-note {
  font-size: 12px;
}

.card-toolbar strong {
  font-size: 13px;
}

.section-description,
.check-list,
.section-note {
  color: var(--muted);
}

.eyebrow {
  color: #777c87;
}

@media (max-width: 700px) {
  .section-description {
    font-size: 15px;
  }
  .section-note {
    white-space: normal;
    font-size: 11px;
  }
}

.section[id] {
  scroll-margin-top: 100px;
}

/* Sparkline (components/sparkline.rs): a 5:2 chart; callers set `color` and size. */
.sparkline {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 2;
  overflow: visible;
  color: var(--green);
}

.sparkline-area {
  fill: currentColor;
  opacity: .14;
}

.sparkline-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sparkline-dot {
  fill: #fff;
  stroke: currentColor;
  stroke-width: 2.2;
}

/* A region switching to another tab in place (public/controls.js, fix batch F): it dims
   while the new tab loads; the scroll and the page around it stay where they are. */
[data-swapping] {
  opacity: .55;
  transition: opacity .2s ease;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-swapping] {
    transition: none;
  }
}

/* The found facts' and the country picker's small extras (fix batch F). */
.qcard-unmatched {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--tint-pink);
}

/* "Sample data" (fix batch G): the one calm label for anything shown from recorded
   sample data while live search data is off. Never a provider or tool name. */
.sample-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--mint);
  color: var(--muted);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.6;
  vertical-align: middle;
  white-space: nowrap;
}

.sample-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13.5px;
}

.sample-line .sample-pill {
  margin-left: 0;
}

/* ---- An AI engine's answer, formatted (components::ai_answer, fix batch H) ------------------ */

.ai-answer {
  display: grid;
  gap: 10px;
  min-width: 0;
  color: #383c45;
  font-size: 14.5px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.ai-answer-named {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.ai-answer-named-label {
  color: var(--muted);
}

.ai-answer-named-name {
  color: var(--ink);
  font-weight: 640;
}

.ai-answer-named-sep {
  color: var(--faint);
}

.ai-answer-you strong {
  color: var(--coral-ink);
  font-weight: 680;
}

.ai-answer-you[data-mentioned="true"] strong {
  color: var(--success-ink);
}

.ai-answer-body {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.ai-answer-body p,
.ai-answer-rest p {
  margin: 0;
}

.ai-answer-heading {
  color: var(--ink);
}

.ai-answer-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 22px;
}

.ai-answer-list li::marker {
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.ai-answer strong {
  color: var(--ink);
  font-weight: 680;
}

.ai-answer-mention {
  padding: 0 3px;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.ai-answer-mention[data-kind="you"] {
  background: #c9d9f0;
  color: #00183b;
  font-weight: 700;
}

/* Another brand: set off quietly (a tint, no underline: it is not a link). */
.ai-answer-mention[data-kind="named"] {
  padding: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--ink);
  font-weight: 640;
}

.ai-answer-sources-inline {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: 6px;
  vertical-align: 1px;
}

.ai-answer-source {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 220px;
  padding: 1px 7px 1px 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 560;
  line-height: 18px;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease;
}

.ai-answer-source:hover,
.ai-answer-source:focus-visible {
  border-color: #c9d9f0;
  color: var(--brand);
}

.ai-answer-source-initial {
  display: inline-grid;
  flex: none;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 4px;
  background: var(--tint-blue);
  color: var(--brand);
  font-size: 10px;
  font-weight: 760;
  line-height: 1;
}

.ai-answer-source-host {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-answer-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
}

.ai-answer-sources .ai-answer-sources-inline {
  margin-left: 0;
}

.ai-answer-sources-label {
  font-weight: 640;
}

.ai-answer-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--brand);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 620;
  list-style: none;
}

.ai-answer-more > summary::-webkit-details-marker {
  display: none;
}

.ai-answer-more > summary .icon {
  width: 14px;
  height: 14px;
  transform: rotate(90deg);
}

/* Opened, the rest reads on from the preview; the button has done its job. */
.ai-answer-more[open] > summary {
  display: none;
}

.ai-answer-rest {
  display: grid;
  gap: 8px;
}

/* ---- The calm pass: "Show more" and "Why?" (components/calm.rs) ----------------------------
   A page leads with what matters now; the rest folds in place, one click away. Plain
   <details>, so it works without JavaScript; controls.js animates the height. */
.calm-more {
  margin-top: 20px;
}

.calm-more > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}

.calm-more > summary::-webkit-details-marker {
  display: none;
}

.calm-more > summary:hover {
  border-color: var(--tint-blue);
  background: var(--canvas);
}

.calm-more > summary:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}

.calm-more > summary small {
  flex: 1 1 14rem;
  color: var(--muted);
  font-size: 13px;
  font-weight: 450;
}

.calm-more > summary .icon {
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--muted);
  transform: rotate(90deg);
  transition: transform .25s var(--motion-ease-out);
}

.calm-more-close {
  display: none;
}

.calm-more[open] > summary {
  border-color: transparent;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
  color: var(--brand);
}

.calm-more[open] > summary .calm-more-open,
.calm-more[open] > summary small {
  display: none;
}

.calm-more[open] > summary .calm-more-close {
  display: inline;
}

.calm-more[open] > summary .icon {
  transform: rotate(-90deg);
}

.calm-more-body {
  padding-top: 8px;
}

.calm-why > summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  color: var(--brand);
  font-size: 13px;
  font-weight: 620;
  list-style: none;
  cursor: pointer;
}

.calm-why > summary::-webkit-details-marker {
  display: none;
}

.calm-why > summary:hover {
  color: var(--sky);
}

.calm-why > summary:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
  border-radius: 4px;
}

.calm-why > summary .icon {
  width: 13px;
  height: 13px;
  transform: rotate(90deg);
  transition: transform .2s var(--motion-ease-out);
}

.calm-why[open] > summary .icon {
  transform: rotate(-90deg);
}

.calm-why-body {
  display: grid;
  gap: 10px;
  padding-top: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .calm-more > summary .icon,
  .calm-why > summary .icon {
    transition: none;
  }
}

/* The muted "Example" tag on illustrative numbers (claims fix, November 7, 2026). */
.example-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
  white-space: nowrap;
  vertical-align: middle;
}

.example-tag i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--faint);
}

/* A line under a section heading saying its numbers are an example. */
.example-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* Section: header. Rendered by crates/web/src/sections/header.rs; only that section's styles live here.

   Sticky, translucent bar. A scroll-driven animation fades in its shadow after the first
   few pixels of scrolling (no script; browsers without scroll timelines keep the hairline).
   The language and mobile menus are native popovers. */

.button-small {
  min-height: 42px;
  padding: 10px 18px;
  font-size: 14px;
  gap: 10px;
  border-radius: 9px;
}

.skip-link {
  position: absolute;
  left: 20px;
  top: -60px;
  background: #fff;
  border: 2px solid var(--green);
  border-radius: 8px;
  padding: 12px 20px;
  z-index: 200;
}

.skip-link:focus {
  top: 10px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 76px;
  background: rgb(255 255 255 / .84);
  backdrop-filter: saturate(1.8) blur(16px);
  -webkit-backdrop-filter: saturate(1.8) blur(16px);
  border-bottom: 1px solid #eff0f2;
}

/* The scroll shadow: a separate layer so only its opacity animates. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  box-shadow: 0 12px 32px -20px rgb(13 27 48 / .35);
  opacity: 0;
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-header::before {
      animation: header-raise linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 96px;
    }
  }
}

@keyframes header-raise {
  to {
    opacity: 1;
  }
}

.nav-wrap {
  display: flex;
  align-items: center;
  gap: 40px;
  height: 100%;
}

.site-header .wordmark span {
  font-size: 26px;
}

.desktop-nav {
  display: flex;
  gap: 30px;
  align-items: center;
}

.desktop-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #61656f;
  transition: color .2s;
}

/* Underline that grows from the left on hover and keyboard focus. */
.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--motion-ease-out);
}

.desktop-nav a:hover,
.desktop-nav a:focus-visible {
  color: var(--ink);
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after {
  transform: scaleX(1);
}

.desktop-nav .icon {
  width: 15px;
  height: 15px;
  transition: transform .25s var(--motion-ease-out);
}

.desktop-nav a:hover .icon {
  transform: translateX(2px);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}

.language-toggle,
.nav-login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  background: none;
  color: #545861;
  font-size: 14px;
  font-weight: 550;
  border-radius: 8px;
  transition: color .2s;
}

.language-toggle:hover,
.nav-login:hover {
  color: var(--ink);
}

.language-toggle .icon:first-child {
  width: 19px;
  height: 19px;
}

.language-toggle .icon:last-child {
  width: 13px;
  height: 13px;
  transform: rotate(90deg);
  transition: transform .25s var(--motion-ease-out);
}

.nav-login .icon {
  width: 15px;
  height: 15px;
  transition: transform .25s var(--motion-ease-out);
}

.nav-login:hover .icon {
  transform: translateX(2px);
}

.nav-actions .button .icon,
.mobile-menu .button .icon {
  transition: transform .25s var(--motion-ease-out);
}

.nav-actions .button:hover .icon,
.mobile-menu .button:hover .icon {
  transform: translateX(3px);
}

/* Popover panels: fade and settle in; `allow-discrete` keeps them visible while closing. */
.language-menu,
.mobile-menu {
  opacity: 1;
  transform: none;
  transition:
    opacity .2s var(--motion-ease-out),
    transform .3s var(--motion-ease-out),
    overlay .3s allow-discrete,
    display .3s allow-discrete;
}

.language-menu:not(:popover-open),
.mobile-menu:not(:popover-open) {
  opacity: 0;
  transform: translate3d(0, -8px, 0);
}

@starting-style {
  .language-menu:popover-open,
  .mobile-menu:popover-open {
    opacity: 0;
    transform: translate3d(0, -8px, 0);
  }
}

.language-menu {
  width: 220px;
  margin: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 18px 48px -18px rgb(16 27 44 / .35);
}

/* Anchor the menu under its toggle where supported; elsewhere it opens centred. */
@supports (anchor-name: --a) {
  .language-toggle {
    anchor-name: --language-toggle;
  }
  .language-menu {
    position-anchor: --language-toggle;
    inset: auto;
    top: anchor(bottom);
    right: anchor(right);
    margin: 10px 0 0;
  }
}

.language-menu-title {
  padding: 8px 10px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8e9199;
}

.language-menu li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: #70747e;
}

.language-menu li.current {
  background: #f1f4f8;
  color: var(--ink);
  font-weight: 600;
}

.language-menu li .icon {
  width: 16px;
  height: 16px;
  color: var(--green);
}

.language-menu small {
  font-size: 11px;
  color: #9c9fa7;
}

.menu-toggle {
  display: none;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-right: -8px;
  border-radius: 10px;
  background: none;
  color: var(--ink);
}

.menu-toggle:hover {
  background: var(--mint);
}

.menu-toggle .icon {
  width: 24px;
  height: 24px;
}

/* Mobile menu: a sheet that drops from the top of the screen. */
.mobile-menu {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  max-width: none;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  border: 0;
  border-radius: 0 0 22px 22px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 24px 60px -24px rgb(13 24 40 / .45);
}

.mobile-menu::backdrop {
  background: rgb(16 19 24 / .32);
  backdrop-filter: blur(3px);
}

.mobile-menu .popover-content {
  padding: 0 18px 26px;
}

.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.menu-close {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-right: -8px;
  border-radius: 10px;
  background: var(--mint);
  color: var(--ink);
}

.menu-close .icon {
  width: 20px;
  height: 20px;
}

.mobile-menu-links {
  display: grid;
  margin-top: 6px;
}

.mobile-menu-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px;
  border-bottom: 1px solid #eff0f2;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em;
}

.mobile-menu-links .icon {
  width: 16px;
  height: 16px;
  color: #9ea1a9;
}

.mobile-menu-actions {
  display: grid;
  gap: 12px;
  margin-top: 22px;
  text-align: center;
}

.mobile-menu-actions .button {
  min-height: 52px;
  font-size: 16px;
}

.mobile-menu-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #545861;
}

.mobile-menu-login .icon {
  width: 15px;
  height: 15px;
}

.mobile-menu-actions p {
  font-size: 13px;
  color: var(--muted);
}

@media (prefers-reduced-motion: no-preference) {
  .mobile-menu:popover-open .mobile-menu-links a {
    animation: header-menu-item .45s var(--motion-ease-out) backwards;
  }
  .mobile-menu:popover-open .mobile-menu-links a:nth-child(2) { animation-delay: 40ms; }
  .mobile-menu:popover-open .mobile-menu-links a:nth-child(3) { animation-delay: 80ms; }
  .mobile-menu:popover-open .mobile-menu-links a:nth-child(4) { animation-delay: 120ms; }
  .mobile-menu:popover-open .mobile-menu-links a:nth-child(5) { animation-delay: 160ms; }
}

@keyframes header-menu-item {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
}

@media (max-width: 1180px) {
  .nav-wrap {
    gap: 28px;
  }
  .desktop-nav {
    gap: 22px;
  }
  .nav-actions {
    gap: 18px;
  }
}

/* Tablet and phone: the links, language and log-in move into the menu sheet. */
@media (max-width: 1040px) {
  .desktop-nav,
  .language-toggle,
  .nav-login {
    display: none;
  }
  .menu-toggle {
    display: grid;
  }
  .nav-actions {
    gap: 10px;
  }
  .nav-wrap {
    gap: 12px;
  }
}

@media (max-width: 700px) {
  .site-header {
    height: 66px;
  }
  .site-header .wordmark span {
    font-size: 23px;
  }
  .nav-actions .button {
    min-height: 38px;
    padding: 8px 13px;
    font-size: 13px;
    gap: 7px;
  }
  .nav-actions .button .icon {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 400px) {
  .nav-actions .button .icon {
    display: none;
  }
}

/* The smallest phones keep only the wordmark and the menu (which holds the call to action). */
@media (max-width: 359px) {
  .nav-actions .button {
    display: none;
  }
}

/* Section: hero. Rendered by crates/web/src/sections/hero/mod.rs (and hero/audit.rs); only that
   section's styles live here. The globe on the right is styled by globe.css; the "Watch Demo"
   dialog by demo.css.

   The free-audit form is one white "pill": the field and its green submit button. The hint and
   "Watch Demo" share the row beneath it. :user-invalid swaps the hint for an error message and
   tints the pill, so validation reads without WebAssembly. */

.button-white {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
}

.button-white:hover {
  background: #f7f7f8;
  border-color: #d8dadf;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  min-height: 600px;
  padding-block: 36px 40px;
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 610px;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  font-size: 12px;
  letter-spacing: .14em;
  color: #71757f;
}

.tiny-beacon {
  position: relative;
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #144ca0;
}

.tiny-beacon::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #144ca0;
  opacity: .22;
}

@media (prefers-reduced-motion: no-preference) {
  .tiny-beacon::after {
    animation: hero-beacon 2.4s var(--motion-ease-out) infinite;
  }
}

@keyframes hero-beacon {
  0% {
    transform: scale(.5);
    opacity: .45;
  }
  70%,
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.hero h1 {
  font-size: clamp(44px, 4.45vw, 66px);
  font-weight: 780;
  line-height: 1.03;
  letter-spacing: -.032em;
  color: #13161e;
}

.hero-line {
  display: block;
}

.hero-highlight {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  color: #0c3e8a;
  background: linear-gradient(100deg, #0a387d 10%, #144ea5 90%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* A hand-drawn stroke under the highlight that draws in after the headline lands. */
.hero-stroke {
  position: absolute;
  left: 1%;
  bottom: -.06em;
  width: 98%;
  height: .2em;
  overflow: visible;
  pointer-events: none;
}

.hero-stroke path {
  fill: none;
  stroke: #9fb9e0;
  stroke-width: 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-highlight .hero-stroke .draw-in {
    animation-duration: 1.1s;
    animation-delay: .75s;
  }
}

.hero-description {
  max-width: 572px;
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.62;
  color: var(--muted);
}

/* The "no black box" promise reads as the paragraph's conclusion. */
.hero-proof {
  color: #21252e;
  font-weight: 560;
}

/* ---------- Free-audit form ---------- */

.hero-actions {
  margin-top: 30px;
}

.hero-audit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "form form"
    "hint demo";
  align-items: center;
  gap: 12px 16px;
  max-width: 572px;
  /* A "Start Free Audit" link scrolls the field to the upper middle of the screen (on a
     desktop that is the top of the page), well clear of the sticky header. */
  scroll-margin-top: 40vh;
}

.hero-audit-form {
  position: relative;
  grid-area: form;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 66px;
  padding: 7px 7px 7px 16px;
  border: 1px solid #dcdde0;
  border-radius: 15px;
  background: #fff;
  box-shadow:
    0 1px 2px rgb(16 26 40 / .05),
    0 22px 44px -30px rgb(6 35 79 / .55);
  transition: border-color .2s, box-shadow .25s var(--motion-ease-out);
}

/* The highlight ring a "Start Free Audit" link replays (data-cue flips between a and b). */
.hero-audit-form::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 0 6px rgb(20 76 160 / .28);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-audit[data-cue="a"] .hero-audit-form::after {
    animation: hero-audit-cue-a 1.4s var(--motion-ease-out) .25s;
  }
  .hero-audit[data-cue="b"] .hero-audit-form::after {
    animation: hero-audit-cue-b 1.4s var(--motion-ease-out) .25s;
  }
}

@keyframes hero-audit-cue-a {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.04, 1.18);
  }
}

@keyframes hero-audit-cue-b {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.04, 1.18);
  }
}

.hero-audit-form:hover {
  border-color: #c9cbd1;
}

.hero-audit-form:focus-within {
  border-color: #3f6db3;
  box-shadow:
    0 0 0 4px #dfe7f3,
    0 22px 44px -30px rgb(6 35 79 / .6);
}

.hero-audit-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  color: #81858f;
  transition: color .2s;
}

.hero-audit-icon .icon {
  width: 21px;
  height: 21px;
  stroke-width: 1.7;
}

.hero-audit-form:focus-within .hero-audit-icon {
  color: #0b377a;
}

.hero-audit-form input {
  flex: 1;
  min-width: 0;
  height: 50px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  /* 16px or more keeps iOS from zooming into the field. */
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.hero-audit-form input::placeholder {
  color: #9ea1a9;
  font-weight: 450;
}

.hero-audit-form input:focus {
  outline: none;
}

.hero-audit-submit {
  flex: none;
  min-height: 52px;
  padding-inline: 22px;
  border-radius: 10px;
  font-size: 15px;
  gap: 12px;
  white-space: nowrap;
  background: linear-gradient(180deg, #0b316a, #06234f);
  border-color: #06234f;
  box-shadow: 0 1px 0 rgb(255 255 255 / .18) inset, 0 10px 24px -12px rgb(6 35 79 / .65);
}

.hero-audit-submit:hover {
  background: linear-gradient(180deg, #0c3676, #07285a);
  box-shadow: 0 1px 0 rgb(255 255 255 / .18) inset, 0 14px 30px -12px rgb(6 35 79 / .7);
}

.hero-audit-submit .icon {
  transition: transform .25s var(--motion-ease-out);
}

.hero-audit-submit:hover .icon,
.hero-audit-submit:focus-visible .icon {
  transform: translateX(4px);
}

/* Validation: only after the visitor has interacted (:user-invalid), never on load. */
.hero-audit:has(.hero-audit-form input:user-invalid) .hero-audit-form {
  border-color: #e07a72;
  box-shadow:
    0 0 0 4px #fdeceb,
    0 22px 44px -30px rgb(120 30 20 / .35);
}

.hero-audit:has(.hero-audit-form input:user-invalid) .hero-audit-icon {
  color: #c4473c;
}

.hero-audit-hint {
  grid-area: hint;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: #71757f;
}

.hero-audit-hint::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #144ca0;
  box-shadow: 0 0 0 3px #dee6f3;
}

.hint-invalid {
  display: none;
}

.hero-audit:has(.hero-audit-form input:user-invalid) .hint-default {
  display: none;
}

.hero-audit:has(.hero-audit-form input:user-invalid) .hint-invalid {
  display: inline;
  color: #b43c32;
  font-weight: 550;
}

.hero-audit:has(.hero-audit-form input:user-invalid) .hero-audit-hint::before {
  background: #d4574c;
  box-shadow: 0 0 0 3px #fbe3e1;
}

/* "Watch Demo" sits beside the hint as the quieter, secondary action. */
.hero-audit .demo-trigger {
  grid-area: demo;
  min-height: 44px;
  padding-inline: 14px 18px;
  border-radius: 10px;
  font-size: 14px;
  gap: 10px;
}

.hero-assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 38px;
  margin-top: 30px;
}

.hero-assurances li {
  display: flex;
  align-items: center;
  gap: 11px;
  line-height: 1.3;
  font-size: 13px;
  color: var(--muted);
}

.hero-assurances strong {
  display: block;
  font-weight: 650;
  color: #21252e;
}

.assurance-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #21252e;
}

.assurance-icon .icon {
  width: 26px;
  height: 26px;
  stroke-width: 1.6;
}

/* The guarantee is a badge that links to its terms. */
.assurance-badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: -6px -10px;
  padding: 6px 10px;
  border: 1px solid #cfd9e9;
  border-radius: 12px;
  background: linear-gradient(160deg, #f7f7f9, #eaeff7);
  color: inherit;
  text-decoration: none;
  transition: border-color .2s, box-shadow .25s var(--motion-ease-out), transform .25s var(--motion-ease-out);
}

.assurance-badge .assurance-icon {
  color: #0b316a;
}

.assurance-badge strong {
  color: #0b2b5a;
}

.assurance-badge > .icon {
  width: 14px;
  height: 14px;
  color: #0b377a;
  transition: transform .25s var(--motion-ease-out);
}

.assurance-badge:hover,
.assurance-badge:focus-visible {
  border-color: #9fb5d6;
  box-shadow: 0 10px 22px -16px rgb(6 35 79 / .55);
  transform: translateY(-1px);
}

.assurance-badge:hover > .icon,
.assurance-badge:focus-visible > .icon {
  transform: translateX(3px);
}

@media (min-width: 1600px) {
  .hero {
    min-height: 640px;
  }
}

@media (max-width: 1150px) {
  .hero h1 {
    font-size: clamp(40px, 5vw, 56px);
  }
  .hero-description {
    font-size: 16px;
  }
  .hero-assurances {
    gap: 14px 26px;
  }
  .hero-audit-submit {
    padding-inline: 16px;
    font-size: 14px;
    gap: 9px;
  }
  .hero-audit-form input {
    font-size: 16px;
  }
}

@media (max-width: 900px) {
  .hero {
    min-height: 0;
    gap: 12px;
  }
  .hero-assurances {
    gap: 12px 20px;
  }
}

/* Tablets and phones: one centred column, copy first, globe after (globe.css switches the
   visual to its stacked size at the same breakpoint). */
@media (max-width: 960px) {
  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-block: 34px 8px;
  }
  .hero-copy {
    max-width: 572px;
    margin-inline: auto;
    text-align: center;
  }
  .hero-eyebrow {
    justify-content: center;
    font-size: 11px;
    letter-spacing: .1em;
  }
  .hero h1 {
    font-size: clamp(40px, 11vw, 58px);
    line-height: 1.04;
  }
  .hero-description {
    margin: 18px auto 0;
    font-size: 16px;
  }
  .hero-actions {
    margin-top: 26px;
  }
  .hero-audit {
    margin-inline: auto;
    text-align: left;
    scroll-margin-top: 28vh;
  }
  .hero-assurances {
    justify-content: center;
    gap: 14px 22px;
    margin-top: 28px;
  }
  .hero-assurances li {
    text-align: left;
  }
}

/* Phones: the button drops under the field inside the pill; the hint and "Watch Demo"
   stack beneath it. */
@media (max-width: 560px) {
  .hero-audit {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "form"
      "hint"
      "demo";
    gap: 10px;
  }
  .hero-audit-form {
    flex-wrap: wrap;
    gap: 6px 2px;
    padding: 6px 6px 6px 14px;
  }
  .hero-audit-form input {
    height: 48px;
  }
  .hero-audit-submit {
    flex: 1 0 100%;
    min-height: 50px;
    font-size: 15px;
    margin-left: -8px;
  }
  .hero-audit-hint {
    justify-content: center;
    padding: 0;
    text-align: center;
  }
  .hero-audit .demo-trigger {
    justify-self: stretch;
    justify-content: center;
    min-height: 50px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .hero-eyebrow {
    font-size: 10px;
    letter-spacing: .08em;
  }
  .hero-description {
    font-size: 15px;
  }
  /* Three compact columns: icon above a two-line label. */
  .hero-assurances {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .hero-assurances li {
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    text-align: center;
    font-size: 12px;
  }
  .assurance-badge {
    flex-direction: column;
    gap: 6px;
    margin: -8px -4px;
    padding: 8px 4px;
  }
  .assurance-badge > .icon {
    display: none;
  }
}

@media (max-width: 359px) {
  .hero h1 {
    font-size: 36px;
  }
  .hero-eyebrow {
    flex-wrap: wrap;
    line-height: 1.6;
  }
  .hero-assurances li {
    font-size: 11px;
  }
  .hero-audit-hint {
    font-size: 12px;
  }
}

/* Section: hero demo ("Watch Demo"). Rendered by crates/web/src/sections/hero/demo/; only its styles live here.

   A native modal <dialog>. Native radios (#demo-<slug>) choose the visible scene; each
   scene animates itself when it becomes visible (animations restart whenever display
   changes). The active chapter's progress fill is the clock: its `demo-chapter-fill`
   animation lasts the chapter's running time, and its animationend advances the player.
   Pausing pauses every animation at once. Final states are the base styles, so reduced
   motion (no animations) shows each scene complete and nothing advances on its own. */

/* ---------- Trigger ---------- */

.demo-trigger {
  cursor: pointer;
}

.play-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #181c26;
  color: #fff;
  transition: transform .3s var(--motion-ease-out), background .3s;
}

.play-icon .icon {
  width: 10px;
  height: 10px;
  margin-left: 2px;
  fill: currentColor;
  stroke: none;
}

.demo-trigger:hover .play-icon {
  background: #0b316a;
  transform: scale(1.1);
}

/* ---------- Dialog ---------- */

:root:has(.demo-dialog[open]) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.demo-dialog {
  width: min(1080px, calc(100vw - 40px));
  max-width: none;
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 24px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  box-shadow: 0 50px 120px -30px rgb(9 11 17 / .65);
  opacity: 1;
  transform: none;
  transition:
    opacity .25s var(--motion-ease-out),
    transform .45s var(--motion-ease-out),
    overlay .45s allow-discrete,
    display .45s allow-discrete;
}

.demo-dialog:not([open]) {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(.98);
}

@starting-style {
  .demo-dialog[open] {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(.98);
  }
}

.demo-dialog::backdrop {
  background: rgb(10 12 16 / .62);
  backdrop-filter: blur(6px);
}

.demo-shell {
  display: grid;
  gap: 16px;
  padding: 22px 24px 20px;
}

.demo-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.demo-head .eyebrow {
  margin-bottom: 4px;
}

.demo-head h2 {
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -.028em;
}

.demo-close {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--ink);
  transition: background .2s, transform .3s var(--motion-ease-out);
}

.demo-close:hover {
  background: #e6e7eb;
  transform: rotate(90deg);
}

.demo-close .icon {
  width: 19px;
  height: 19px;
}

/* ---------- Screen ---------- */

.demo-screen {
  overflow: hidden;
  border: 1px solid #e4e5e7;
  border-radius: 18px;
  background:
    radial-gradient(90% 70% at 85% 100%, #e3eaf5 0%, transparent 60%),
    linear-gradient(180deg, #fbfcfd, #f3f5f8);
}

.demo-window-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 42px;
  padding-inline: 14px;
  border-bottom: 1px solid #e8e8ea;
  background: rgb(255 255 255 / .75);
}

.demo-dots {
  display: flex;
  gap: 7px;
}

.demo-dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #e5e6e7;
}

.demo-dots i:nth-child(1) { background: #f6a29b; }
.demo-dots i:nth-child(2) { background: #f7d58a; }
.demo-dots i:nth-child(3) { background: #9eb7dc; }

.demo-address {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border-radius: 999px;
  background: #eff0f1;
  color: #616266;
  font-size: 12px;
}

.demo-address .icon {
  width: 13px;
  height: 13px;
  color: #124693;
}

.demo-live {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--success-tint);
  color: var(--success-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}

.demo-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgb(18 167 119 / .5);
}

.demo-viewport {
  position: relative;
  height: 452px;
}

.demo-scene {
  display: none;
  position: absolute;
  inset: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  padding: 20px 24px 22px;
}

#demo-url:checked ~ .demo-screen .scene-url,
#demo-discover:checked ~ .demo-screen .scene-discover,
#demo-profile:checked ~ .demo-screen .scene-profile,
#demo-plan:checked ~ .demo-screen .scene-plan,
#demo-publish:checked ~ .demo-screen .scene-publish,
#demo-grow:checked ~ .demo-screen .scene-grow {
  display: grid;
}

.scene-caption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
}

.scene-caption b {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #181c26;
  color: #fff;
  font-size: 13px;
}

.scene-caption h3 {
  font-size: 15px;
  letter-spacing: -.02em;
}

.scene-caption p {
  grid-column: 2;
}

/* The muted "Example" tag on scenes with illustrative numbers (the video's "Demo data"). */
.demo-example {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fafbfc;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

.demo-example i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--faint);
}

/* Display type for the walkthrough's headings and big numbers, as in the app. */
.demo-dialog :is(.scene-caption h3, .url-title, .demo-figures dd, .grow-head strong,
  .discover-percent) {
  font-family: var(--font-display);
  font-weight: 800;
}

.scene-caption p {
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

.scene-body {
  position: relative;
  min-height: 0;
}

/* Shared pieces. */
.demo-figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.demo-figures > div {
  padding: 12px 14px;
  border: 1px solid #e5e6e9;
  border-radius: 12px;
  background: #fff;
}

.demo-figures dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.demo-figures dd {
  margin: 4px 0 0;
  font-size: 24px;
  font-weight: 760;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.chip {
  display: inline-flex;
  align-items: center;
  margin: 0 6px 6px 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef2f7;
  color: #0d2d5e;
  font-size: 12.5px;
  font-weight: 600;
}

.step-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--sky);
  border-right-color: transparent;
  border-radius: 50%;
}

/* ---------- 1. URL ---------- */

.scene-url .scene-body {
  display: grid;
  place-items: center;
}

.url-card {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(520px, 100%);
  padding: 28px 28px 22px;
  border: 1px solid #e4e5e8;
  border-radius: 20px;
  background: #fff;
  text-align: center;
  box-shadow: 0 30px 60px -42px rgb(10 30 60 / .55);
}

.url-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #eaeff6;
  color: #0b316a;
  font-size: 12px;
  font-weight: 700;
}

.url-kicker .icon {
  width: 14px;
  height: 14px;
}

.url-title {
  font-size: 24px;
  font-weight: 760;
  letter-spacing: -.035em;
}

.url-field {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  padding-inline: 16px;
  border: 1.5px solid #3f6db3;
  border-radius: 12px;
  box-shadow: 0 0 0 4px #e1e9f4;
  font-size: 17px;
  text-align: left;
}

.url-field > .icon {
  width: 20px;
  height: 20px;
  color: #7f8186;
}

.url-typed {
  display: inline-block;
  width: 19ch;
  overflow: hidden;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px;
}

.url-caret {
  width: 2px;
  height: 22px;
  margin-left: -8px;
  border-radius: 1px;
  background: #0e408a;
}

.url-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 650;
}

.url-button .icon {
  width: 16px;
  height: 16px;
}

.url-assure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.url-assure .icon {
  width: 13px;
  height: 13px;
  color: #124693;
}

.demo-pointer {
  position: absolute;
  left: calc(50% + 70px);
  top: calc(50% + 66px);
  width: 26px;
  height: 26px;
  fill: #181c26;
  stroke: #fff;
  stroke-width: 1.4;
  stroke-linejoin: round;
  filter: drop-shadow(0 4px 6px rgb(0 0 0 / .25));
}

/* ---------- 2. Discovery ---------- */

.scene-discover .scene-body {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 18px 30px;
}

.discover-progress {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
}

.discover-ring {
  width: 170px;
  height: 170px;
  transform: rotate(-90deg);
}

.discover-ring circle {
  fill: none;
  stroke-width: 9;
}

.ring-track {
  stroke: #e4e6e9;
}

.ring-fill {
  stroke: #144ca0;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.discover-percent {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% calc(-50% - 16px);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.discover-site {
  font-size: 13px;
  font-weight: 600;
  color: #535559;
}

.discover-steps {
  display: grid;
  align-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.discover-steps li {
  --start: .3s;
  --done: calc(var(--start) + 1s);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid #e5e6e9;
  border-radius: 13px;
  background: #fff;
}

.discover-steps li:nth-child(2) { --start: 1.45s; }
.discover-steps li:nth-child(3) { --start: 2.6s; }
.discover-steps li:nth-child(4) { --start: 3.75s; }

.discover-steps strong {
  display: block;
  font-size: 14.5px;
  letter-spacing: -.015em;
}

.discover-steps small {
  display: block;
  margin-top: 1px;
  font-size: 12.5px;
  color: var(--muted);
}

.step-state {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: #144ca0;
  color: #fff;
}

.step-state > * {
  grid-area: 1 / 1;
}

.step-state .icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.6;
}

.step-state .step-spinner {
  opacity: 0;
}

.scene-discover .demo-figures {
  grid-column: 1 / -1;
}

/* ---------- 3. Business profile ---------- */

.profile-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  height: 100%;
  padding: 18px 20px;
  border: 1px solid #e4e5e8;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 50px -40px rgb(10 30 60 / .5);
}

.profile-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.profile-logo {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #0e397a, #4c7cc5);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
}

.profile-head strong {
  display: block;
  font-size: 18px;
  letter-spacing: -.025em;
}

.profile-head small {
  display: block;
  font-size: 13px;
  color: var(--muted);
}

.profile-ready {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--success-tint);
  color: var(--success-ink);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.profile-ready .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.6;
}

.profile-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
  margin: 0;
}

.profile-fields > div {
  padding: 11px 13px 7px;
  border: 1px solid #eeeff0;
  border-radius: 12px;
  background: #fbfcfc;
}

.profile-fields > div:last-child {
  grid-column: 1 / -1;
  border-color: #cfdaea;
  background: #f3f6fb;
}

.profile-fields dt {
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.profile-fields dd {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 550;
}

/* "Your main keyword": the keyword, its volume and the "Outpost's pick" marker. */
.profile-keyword {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.profile-keyword strong {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.015em;
}

.profile-keyword strong::before { content: "“"; }
.profile-keyword strong::after { content: "”"; }

.profile-volume {
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.demo-pick {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 7px;
  background: var(--tint-blue);
  color: var(--brand);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.demo-pick .icon {
  width: 12px;
  height: 12px;
}

/* ---------- 4. Campaign plan ---------- */

.scene-plan .scene-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 236px;
  gap: 16px;
}

.plan-board {
  --plan-label: 220px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid #e4e5e8;
  border-radius: 18px;
  background: #fff;
}

.demo-dialog .plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.demo-dialog .plan-head strong {
  font-size: 16px;
  letter-spacing: -.02em;
}

.plan-goal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--tint-pink);
  color: var(--coral-ink);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.plan-goal .icon {
  width: 14px;
  height: 14px;
}

.plan-weeks {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin-left: calc(var(--plan-label) + 12px);
  font-size: 10px;
  font-weight: 600;
  color: #9a9ca0;
  text-align: center;
}

.plan-rows {
  display: grid;
  align-content: space-around;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-rows li {
  display: grid;
  grid-template-columns: var(--plan-label) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.plan-label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.plan-label > .icon {
  width: 32px;
  height: 32px;
  padding: 7px;
  flex: none;
  border-radius: 9px;
  background: #eef2f7;
  color: #0e397a;
}

.plan-label strong {
  display: block;
  overflow: hidden;
  font-size: 13.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-label small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
}

.plan-track {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  height: 30px;
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(100% / 12 - 1px), #eeeff1 calc(100% / 12 - 1px) calc(100% / 12)),
    #fbfbfb;
}

.plan-bar {
  grid-column: var(--start) / var(--end);
  height: 14px;
  margin-inline: 3px;
  border-radius: 7px;
  background: linear-gradient(90deg, #144ca0, #5c8acf);
  box-shadow: 0 4px 10px -4px rgb(20 76 160 / .6);
  transform-origin: left center;
}

/* Bars start at week N (grid line N) and end after week M (grid line M + 1). */
.plan-bar[data-start="1"] { --start: 1; }
.plan-bar[data-start="2"] { --start: 2; }
.plan-bar[data-start="3"] { --start: 3; }
.plan-bar[data-start="4"] { --start: 4; }
.plan-bar[data-start="5"] { --start: 5; }
.plan-bar[data-start="6"] { --start: 6; }
.plan-bar[data-start="7"] { --start: 7; }
.plan-bar[data-start="8"] { --start: 8; }
.plan-bar[data-start="9"] { --start: 9; }
.plan-bar[data-start="10"] { --start: 10; }
.plan-bar[data-start="11"] { --start: 11; }
.plan-bar[data-start="12"] { --start: 12; }
.plan-bar[data-end="1"] { --end: 2; }
.plan-bar[data-end="2"] { --end: 3; }
.plan-bar[data-end="3"] { --end: 4; }
.plan-bar[data-end="4"] { --end: 5; }
.plan-bar[data-end="5"] { --end: 6; }
.plan-bar[data-end="6"] { --end: 7; }
.plan-bar[data-end="7"] { --end: 8; }
.plan-bar[data-end="8"] { --end: 9; }
.plan-bar[data-end="9"] { --end: 10; }
.plan-bar[data-end="10"] { --end: 11; }
.plan-bar[data-end="11"] { --end: 12; }
.plan-bar[data-end="12"] { --end: 13; }

.plan-side {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
}

.plan-side .demo-figures,
.scene-publish .demo-figures,
.scene-grow .demo-figures {
  grid-template-columns: 1fr;
  align-content: start;
}

.plan-side .demo-figures > div {
  padding-block: 9px;
}

.plan-autopilot {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  background: #181c26;
  color: #fff;
}

.plan-autopilot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-inline: 2px;
}

/* The app's three-mode control (Settings › Mode), Autopilot selected. */
.plan-modes {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr;
  gap: 2px;
  margin: 0;
  padding: 3px;
  border-radius: 9px;
  background: rgb(255 255 255 / .09);
  list-style: none;
}

.plan-modes li {
  display: grid;
  place-items: center;
  min-height: 26px;
  padding: 3px 4px;
  border-radius: 6px;
  color: #adafb3;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
}

.plan-modes li[data-current="true"] {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 3px rgb(0 0 0 / .3);
}

.plan-autopilot strong {
  display: block;
  font-size: 14px;
}

.plan-autopilot small {
  display: block;
  font-size: 11.5px;
  color: #adafb3;
}

.plan-switch {
  position: relative;
  width: 44px;
  height: 26px;
  flex: none;
  border-radius: 999px;
  background: #1955b0;
}

.plan-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(18px);
  box-shadow: 0 2px 4px rgb(0 0 0 / .25);
}

/* ---------- 5. Publishing ---------- */

.scene-publish .scene-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 16px;
}

.publish-feed {
  display: grid;
  align-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.publish-feed li {
  --appear: .2s;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid #e4e5e8;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 26px -24px rgb(10 30 60 / .6);
}

.publish-feed li:nth-child(2) { --appear: 1.1s; }
.publish-feed li:nth-child(3) { --appear: 2s; }
.publish-feed li:nth-child(4) { --appear: 2.9s; }

.publish-thumb {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 11px;
  background: linear-gradient(135deg, #e6ecf6, #cdd9eb);
  color: #0e397a;
}

.publish-thumb .icon {
  width: 22px;
  height: 22px;
}

.publish-copy {
  min-width: 0;
  flex: 1;
}

.publish-copy strong {
  display: block;
  overflow: hidden;
  font-size: 14.5px;
  letter-spacing: -.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.publish-copy small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

.publish-side {
  display: grid;
  justify-items: end;
  gap: 5px;
}

.publish-status {
  display: grid;
  justify-items: end;
}

/* Every published article has a receipt. */
.publish-receipt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.publish-receipt .icon {
  width: 11px;
  height: 11px;
  stroke-width: 2.8;
  color: var(--success-ink);
}

.publish-status > * {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.status-writing {
  background: var(--tint-blue);
  color: var(--brand);
  opacity: 0;
}

.status-writing .step-spinner {
  width: 11px;
  height: 11px;
}

.status-live {
  background: var(--success-tint);
  color: var(--success-ink);
}

.status-live .icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.6;
}

/* ---------- 6. Growth ---------- */

.scene-grow .scene-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 16px;
}

.grow-chart {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
  padding: 16px 18px 12px;
  border: 1px solid #e4e5e8;
  border-radius: 18px;
  background: #fff;
}

.grow-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.grow-head small {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.grow-head strong {
  display: block;
  font-size: 38px;
  font-weight: 820;
  letter-spacing: -.045em;
  line-height: 1.1;
  color: #0c3e8a;
  font-variant-numeric: tabular-nums;
}

.grow-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #eff0f1;
  color: #535559;
  font-size: 12px;
  font-weight: 650;
}

.grow-badge .icon {
  width: 14px;
  height: 14px;
}

.grow-svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: visible;
}

.grow-grid line {
  stroke: #e9eaec;
  stroke-width: .5;
  stroke-dasharray: 2 2;
}

.grow-area {
  fill: url(#demo-grow-fill);
}

.grow-line {
  fill: none;
  stroke: #124ba0;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
}

.grow-dot {
  fill: #fff;
  stroke: #124ba0;
  stroke-width: 1.1;
}

.grow-pulse {
  fill: #124ba0;
  opacity: .15;
  transform-box: fill-box;
  transform-origin: center;
}

.grow-toast {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border: 1px solid #e8e9eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 30px -18px rgb(10 26 50 / .45);
}

.grow-toast > i {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: #144ca0;
  box-shadow: 0 0 0 4px #e3eaf5;
}

.grow-toast strong {
  display: block;
  font-size: 12px;
}

.grow-toast small {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

.toast-one {
  left: 10%;
  bottom: 22%;
  --toast-at: 1s;
}

.toast-two {
  left: 38%;
  top: 38%;
  --toast-at: 1.8s;
}

.toast-three {
  right: 6%;
  top: 18%;
  --toast-at: 2.6s;
}

/* ---------- Controls ---------- */

.demo-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}

.demo-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  transition: border-color .2s, background .2s;
}

.demo-toggle:hover {
  border-color: #cccfd6;
  background: #f7f7f8;
}

/* With reduced motion nothing plays, so there is nothing to pause. */
@media (prefers-reduced-motion: reduce) {
  .demo-toggle {
    visibility: hidden;
  }
}

.demo-toggle .icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}

.demo-dialog[data-playback="paused"] .demo-toggle .icon {
  margin-left: 2px;
  fill: currentColor;
  stroke: none;
}

.demo-chapters {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.demo-chapters label {
  --demo-duration: 5s;
  display: grid;
  gap: 8px;
  padding: 6px 2px;
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  transition: color .2s;
}

.demo-chapters label[for=demo-url] { --demo-duration: 4.4s; }
.demo-chapters label[for=demo-discover] { --demo-duration: 6.2s; }
.demo-chapters label[for=demo-profile] { --demo-duration: 5.6s; }
.demo-chapters label[for=demo-plan] { --demo-duration: 5.6s; }
.demo-chapters label[for=demo-publish] { --demo-duration: 6s; }
.demo-chapters label[for=demo-grow] { --demo-duration: 6.4s; }

.demo-chapters label:hover {
  color: var(--ink);
}

.demo-chapter-name {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.demo-chapter-name b {
  font-variant-numeric: tabular-nums;
  color: #b5b6b9;
}

.demo-chapter-track {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: #e7e7e9;
}

.demo-chapter-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0e408a, #2f69bf);
  transform: scaleX(0);
  transform-origin: left center;
}

.demo-chapters label.done .demo-chapter-fill {
  transform: none;
}

#demo-url:checked ~ .demo-controls label[for=demo-url],
#demo-discover:checked ~ .demo-controls label[for=demo-discover],
#demo-profile:checked ~ .demo-controls label[for=demo-profile],
#demo-plan:checked ~ .demo-controls label[for=demo-plan],
#demo-publish:checked ~ .demo-controls label[for=demo-publish],
#demo-grow:checked ~ .demo-controls label[for=demo-grow] {
  color: var(--ink);
}

#demo-url:checked ~ .demo-controls label[for=demo-url] b,
#demo-discover:checked ~ .demo-controls label[for=demo-discover] b,
#demo-profile:checked ~ .demo-controls label[for=demo-profile] b,
#demo-plan:checked ~ .demo-controls label[for=demo-plan] b,
#demo-publish:checked ~ .demo-controls label[for=demo-publish] b,
#demo-grow:checked ~ .demo-controls label[for=demo-grow] b {
  color: #0e408a;
}

/* The active chapter's fill is the walkthrough's clock (see the file comment). */
#demo-url:checked ~ .demo-controls label[for=demo-url] .demo-chapter-fill,
#demo-discover:checked ~ .demo-controls label[for=demo-discover] .demo-chapter-fill,
#demo-profile:checked ~ .demo-controls label[for=demo-profile] .demo-chapter-fill,
#demo-plan:checked ~ .demo-controls label[for=demo-plan] .demo-chapter-fill,
#demo-publish:checked ~ .demo-controls label[for=demo-publish] .demo-chapter-fill,
#demo-grow:checked ~ .demo-controls label[for=demo-grow] .demo-chapter-fill {
  transform: none;
  animation: demo-chapter-fill var(--demo-duration) linear backwards;
}

.demo-radio:focus-visible ~ .demo-controls .demo-chapters {
  outline: 3px solid #124ea9;
  outline-offset: 4px;
  border-radius: 6px;
}

.demo-cta {
  min-height: 46px;
  border-radius: 11px;
  white-space: nowrap;
}

.demo-cta .icon {
  transition: transform .25s var(--motion-ease-out);
}

.demo-cta:hover .icon {
  transform: translateX(3px);
}

/* ---------- Scene animations (final state = base style) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .demo-dialog[data-playback="paused"] *,
  .demo-dialog[data-playback="paused"] *::before,
  .demo-dialog[data-playback="paused"] *::after {
    animation-play-state: paused !important;
  }

  .demo-dialog[data-playback="finished"] .demo-cta {
    animation: demo-cta-glow 1.8s var(--motion-ease-out) infinite;
  }

  .demo-live i {
    animation: demo-live 1.8s var(--motion-ease-out) infinite;
  }

  .scene-caption {
    animation: demo-rise .5s var(--motion-ease-out) backwards;
  }

  .step-spinner {
    animation: demo-spin .7s linear infinite;
  }

  /* 1. URL: the field types itself, the pointer glides in and presses the button. */
  .scene-url .url-card {
    animation: demo-rise .6s var(--motion-ease-out) backwards;
  }
  .scene-url .url-typed {
    animation: demo-type 1.4s steps(19) .55s backwards;
  }
  .scene-url .url-caret {
    animation: demo-blink 1s steps(1) infinite;
  }
  .scene-url .url-field {
    animation: demo-field-focus .4s ease-out .35s backwards;
  }
  .scene-url .demo-pointer {
    animation: demo-pointer .75s var(--motion-ease-out) 2.1s backwards, demo-click .25s ease-in-out 3s;
  }
  .scene-url .url-button {
    animation: demo-press .3s ease-in-out 3.02s;
  }
  .scene-url .url-button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgb(11 13 18 / .4);
    animation: demo-ripple .9s var(--motion-ease-out) 3.05s backwards;
    opacity: 0;
  }

  /* 2. Discovery: the ring fills while each step spins, then checks off. */
  .scene-discover .ring-fill {
    animation: demo-ring 4.8s cubic-bezier(.33, 1, .68, 1) .2s backwards;
  }
  .scene-discover .discover-steps li {
    animation: demo-dim .35s ease-out var(--start) backwards;
  }
  .scene-discover .step-state {
    animation: demo-step-done .3s ease-out var(--done) backwards;
  }
  .scene-discover .step-state .icon {
    animation: demo-pop .4s var(--motion-ease-out) var(--done) backwards;
  }
  .scene-discover .step-state .step-spinner {
    animation: demo-spin .7s linear infinite, demo-window 1s linear var(--start);
  }
  .scene-discover .discover-steps small {
    animation: demo-rise .4s var(--motion-ease-out) var(--done) backwards;
  }
  .scene-discover .demo-figures > div {
    animation: demo-rise .5s var(--motion-ease-out) .3s backwards;
  }

  /* 3. Profile: fields assemble one by one, chips pop, then the profile is ready. */
  .scene-profile .profile-card {
    animation: demo-rise .55s var(--motion-ease-out) backwards;
  }
  .scene-profile .profile-fields > div {
    animation: demo-rise .5s var(--motion-ease-out) backwards;
  }
  .scene-profile .profile-fields > div:nth-child(1) { animation-delay: .35s; }
  .scene-profile .profile-fields > div:nth-child(2) { animation-delay: .9s; }
  .scene-profile .profile-fields > div:nth-child(3) { animation-delay: 1.45s; }
  .scene-profile .profile-fields > div:nth-child(4) { animation-delay: 2s; }
  .scene-profile .profile-fields > div:nth-child(5) { animation-delay: 2.55s; }
  .scene-profile .chip {
    animation: demo-pop .35s var(--motion-ease-out) backwards;
  }
  .scene-profile .profile-fields > div:nth-child(1) .chip { animation-delay: .55s; }
  .scene-profile .profile-fields > div:nth-child(2) .chip { animation-delay: 1.1s; }
  .scene-profile .profile-fields > div:nth-child(4) .chip { animation-delay: 2.2s; }
  .scene-profile .chip:nth-child(2) { animation-duration: .45s; }
  .scene-profile .chip:nth-child(3) { animation-duration: .55s; }
  .scene-profile .chip:nth-child(4) { animation-duration: .65s; }
  .scene-profile .profile-ready {
    animation: demo-pop .45s var(--motion-ease-out) 3.5s backwards;
  }

  /* 4. Plan: workstreams are scheduled, then autopilot switches on. */
  .scene-plan .plan-board {
    animation: demo-rise .55s var(--motion-ease-out) backwards;
  }
  .scene-plan .plan-rows li {
    animation: demo-rise .45s var(--motion-ease-out) backwards;
  }
  .scene-plan .plan-bar {
    animation: demo-bar .8s var(--motion-ease-out) backwards;
  }
  .scene-plan .plan-rows li:nth-child(1),
  .scene-plan .plan-rows li:nth-child(1) .plan-bar { animation-delay: .3s; }
  .scene-plan .plan-rows li:nth-child(2),
  .scene-plan .plan-rows li:nth-child(2) .plan-bar { animation-delay: .65s; }
  .scene-plan .plan-rows li:nth-child(3),
  .scene-plan .plan-rows li:nth-child(3) .plan-bar { animation-delay: 1s; }
  .scene-plan .plan-rows li:nth-child(4),
  .scene-plan .plan-rows li:nth-child(4) .plan-bar { animation-delay: 1.35s; }
  .scene-plan .plan-rows li:nth-child(5),
  .scene-plan .plan-rows li:nth-child(5) .plan-bar { animation-delay: 1.7s; }
  .scene-plan .plan-side > * {
    animation: demo-rise .5s var(--motion-ease-out) 1s backwards;
  }
  .scene-plan .plan-switch {
    animation: demo-switch-track .3s ease-out 3.3s backwards;
  }
  .scene-plan .plan-switch::after {
    animation: demo-switch-knob .35s var(--motion-ease-out) 3.3s backwards;
  }
  .scene-plan .plan-modes li[data-current="true"] {
    animation: demo-mode-pick .35s var(--motion-ease-out) 3.3s backwards;
  }

  /* 5. Publishing: each article slides in, is written, then goes live. */
  .scene-publish .publish-feed li {
    animation: demo-slide .5s var(--motion-ease-out) var(--appear) backwards;
  }
  .scene-publish .status-writing {
    animation: demo-window .9s linear var(--appear);
  }
  .scene-publish .status-live {
    animation: demo-pop .4s var(--motion-ease-out) calc(var(--appear) + .9s) backwards;
  }
  .scene-publish .publish-receipt {
    animation: demo-rise .4s var(--motion-ease-out) calc(var(--appear) + 1.15s) backwards;
  }
  .scene-publish .demo-figures > div {
    animation: demo-rise .5s var(--motion-ease-out) .5s backwards;
  }

  /* 6. Growth: the curve draws in, visitors arrive, the last point pulses. */
  .scene-grow .grow-chart {
    animation: demo-rise .55s var(--motion-ease-out) backwards;
  }
  .scene-grow .grow-line {
    animation: demo-draw 2.6s cubic-bezier(.33, 1, .68, 1) .3s backwards;
  }
  .scene-grow .grow-area {
    animation: demo-fade 1.2s ease-out 1s backwards;
  }
  .scene-grow .grow-dot {
    transform-box: fill-box;
    transform-origin: center;
    animation: demo-pop .4s var(--motion-ease-out) 2.7s backwards;
  }
  .scene-grow .grow-pulse {
    animation: demo-pulse 1.6s var(--motion-ease-out) 2.9s infinite backwards;
  }
  .scene-grow .grow-toast {
    animation: demo-toast .5s var(--motion-ease-out) var(--toast-at) backwards;
  }
  .scene-grow .demo-figures > div {
    animation: demo-rise .5s var(--motion-ease-out) .5s backwards;
  }
  .scene-grow .demo-figures > div:nth-child(2) { animation-delay: .65s; }
  .scene-grow .demo-figures > div:nth-child(3) { animation-delay: .8s; }
}

@keyframes demo-chapter-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes demo-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
}

@keyframes demo-fade {
  from {
    opacity: 0;
  }
}

@keyframes demo-slide {
  from {
    opacity: 0;
    transform: translate3d(24px, 0, 0);
  }
}

@keyframes demo-pop {
  from {
    opacity: 0;
    transform: scale(.4);
  }
  70% {
    transform: scale(1.08);
  }
}

@keyframes demo-toast {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(.9);
  }
}

@keyframes demo-type {
  from {
    width: 0;
  }
}

@keyframes demo-blink {
  50% {
    opacity: 0;
  }
}

@keyframes demo-field-focus {
  from {
    border-color: #e1e2e5;
    box-shadow: 0 0 0 0 #e1e9f4;
  }
}

@keyframes demo-pointer {
  from {
    opacity: 0;
    transform: translate3d(140px, 90px, 0);
  }
}

@keyframes demo-click {
  50% {
    transform: scale(.82);
  }
}

@keyframes demo-press {
  50% {
    transform: scale(.97);
    filter: brightness(1.12);
  }
}

@keyframes demo-ripple {
  from {
    opacity: 1;
    box-shadow: 0 0 0 0 rgb(11 13 18 / .4);
  }
  to {
    opacity: 0;
    box-shadow: 0 0 0 16px rgb(11 13 18 / 0);
  }
}

@keyframes demo-ring {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes demo-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes demo-dim {
  from {
    opacity: .4;
  }
}

@keyframes demo-step-done {
  from {
    background: #eff0f2;
  }
}

/* Visible for the animation's duration only (base opacity is 0). */
@keyframes demo-window {
  0%,
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes demo-spin {
  to {
    rotate: 360deg;
  }
}

@keyframes demo-bar {
  from {
    transform: scaleX(0);
  }
}

@keyframes demo-switch-track {
  from {
    background: #4f535d;
  }
}

@keyframes demo-mode-pick {
  from {
    background: transparent;
    color: #adafb3;
    box-shadow: none;
  }
}

@keyframes demo-switch-knob {
  from {
    transform: none;
  }
}

@keyframes demo-pulse {
  from {
    opacity: .35;
    transform: scale(.6);
  }
  to {
    opacity: 0;
    transform: scale(2.4);
  }
}

@keyframes demo-live {
  0% {
    box-shadow: 0 0 0 0 rgb(18 167 119 / .5);
  }
  70%,
  100% {
    box-shadow: 0 0 0 7px rgb(18 167 119 / 0);
  }
}

@keyframes demo-cta-glow {
  0% {
    box-shadow: 0 0 0 0 rgb(11 13 18 / .35);
  }
  70%,
  100% {
    box-shadow: 0 0 0 12px rgb(11 13 18 / 0);
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .scene-publish .scene-body,
  .scene-grow .scene-body {
    grid-template-columns: minmax(0, 1fr) 180px;
  }
  .scene-plan .scene-body {
    grid-template-columns: minmax(0, 1fr) 216px;
  }
  .plan-board {
    --plan-label: 180px;
  }
}

/* Phones and small tablets: a full-screen sheet; scenes flow at their natural height. */
@media (max-width: 760px) {
  .demo-dialog {
    width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }
  .demo-shell {
    min-height: 100%;
    grid-template-rows: auto 1fr auto;
    gap: 14px;
    padding: 14px 14px 18px;
  }
  .demo-head h2 {
    font-size: 19px;
  }
  .demo-window-bar {
    grid-template-columns: auto 1fr;
    gap: 10px;
  }
  .demo-address {
    display: none;
  }
  /* The screen fills the sheet and the active scene fills the screen. */
  .demo-screen {
    display: flex;
    flex-direction: column;
  }
  .demo-viewport {
    flex: 1;
    display: grid;
    height: auto;
  }
  .demo-scene {
    position: static;
    min-height: 420px;
    padding: 16px 14px 18px;
  }
  .scene-discover .scene-body {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .discover-progress {
    grid-template-columns: auto 1fr;
    justify-items: start;
  }
  .discover-ring {
    width: 96px;
    height: 96px;
  }
  .discover-percent {
    top: 48px;
    left: 48px;
    translate: -50% -50%;
    font-size: 22px;
  }
  .scene-plan .scene-body,
  .scene-publish .scene-body,
  .scene-grow .scene-body {
    grid-template-columns: 1fr;
  }
  .plan-side .demo-figures,
  .scene-publish .demo-figures,
  .scene-grow .demo-figures {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .plan-board {
    --plan-label: 150px;
  }
  .plan-weeks span:nth-child(even) {
    visibility: hidden;
  }
  .profile-fields {
    grid-template-columns: 1fr;
  }
  .profile-ready {
    display: none;
  }
  .grow-chart {
    min-height: 280px;
  }
  .toast-two {
    display: none;
  }
  .demo-controls {
    grid-template-columns: auto 1fr;
    gap: 12px;
  }
  .demo-chapters {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .demo-chapter-name {
    justify-content: center;
  }
  .demo-chapter-name span {
    display: none;
  }
  .demo-cta {
    justify-self: end;
  }
}

@media (max-width: 420px) {
  .demo-figures dd {
    font-size: 19px;
  }
  .demo-figures > div {
    padding: 10px;
  }
  .demo-figures dt {
    font-size: 10px;
  }
  .url-card {
    padding: 22px 16px 18px;
  }
  .url-title {
    font-size: 20px;
  }
  .url-typed {
    font-size: 14px;
  }
  .demo-pointer {
    left: calc(50% + 40px);
  }
  .plan-rows li {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .plan-weeks {
    margin-left: 0;
  }
  .publish-feed li {
    flex-wrap: wrap;
  }
  .publish-thumb {
    display: none;
  }
  .publish-status {
    justify-items: start;
  }
  .publish-side {
    grid-auto-flow: column;
    justify-items: start;
    align-items: center;
    gap: 8px;
  }
  .scene-caption {
    grid-template-columns: auto minmax(0, 1fr);
  }
  /* The tag moves under the title on narrow phones, beside the caption line. */
  .demo-example {
    grid-column: 2;
    grid-row: auto;
    justify-self: start;
    margin-top: 4px;
  }
  .demo-cta {
    padding-inline: 14px;
  }
}

/* Section: globe. Rendered by crates/web/src/sections/globe; only that section's styles live here.

   .hero-visual[data-globe] is "static" (server render, no JS or WebGL 2), "loading", "live" or
   "paused", or "still" under reduced motion (set by public/globe/globe.js). The static scene is
   complete on its own: the SVG still frame, six pinned cards and the caption. Live, a WebGL
   canvas fades in over the identical still frame and turns to the viewer's region; then
   [data-globe-feed] is set and anchored cards (.globe-pin, positioned with transforms only)
   replace the pinned ones. Still, the canvas shows one frame facing the region at once, with
   its cards already placed. */

.hero-visual {
  /* The square box the globe renders into; the sphere spans 80% of it (cargo xtask globe).
     Beside the copy the box is centred in the right half of the container, so it stays inside
     the viewport while it is at most 50vw plus the container's side margin (≥ 20px). */
  --globe-size: min(664px, calc(50vw + 16px));
  --globe-top: 48.5%;
  /* Distance from a visitor's pin to its card; read by globe.js. */
  --globe-pin-gap: 18px;
  --globe-ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  position: relative;
  height: 560px;
  align-self: center;
  isolation: isolate;
}

.globe-mount {
  position: absolute;
  left: 50%;
  top: var(--globe-top);
  width: var(--globe-size);
  height: var(--globe-size);
  transform: translate(-50%, -50%);
  z-index: -1;
}

.globe-mount .globe,
.globe-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

.globe-canvas {
  display: block;
  opacity: 0;
  cursor: grab;
  /* Horizontal drags turn the globe; vertical ones still scroll the page. */
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  transition: opacity .7s var(--motion-ease-out);
}

.hero-visual:is([data-globe="live"], [data-globe="paused"], [data-globe="still"]) .globe-canvas {
  opacity: 1;
}

.hero-visual[data-globe-dragging] .globe-canvas {
  cursor: grabbing;
}

/* The reduced-motion still frame is a picture, not a control. */
.hero-visual[data-globe="still"] .globe-canvas {
  cursor: default;
}

/* The still frame stays underneath until the canvas has fully faded in. */
.hero-visual:is([data-globe="live"], [data-globe="paused"], [data-globe="still"]) .globe {
  opacity: 0;
  transition: opacity .2s linear .8s;
}

/* Visitor cards (pinned and live share the look). */

.visitor {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 176px;
  padding: 10px 14px 10px 10px;
  background: #fffffffa;
  border: 1px solid #e5e6e8;
  border-radius: 12px;
  box-shadow: 0 1px 2px #101a280a, 0 12px 28px -12px #101a282e;
  white-space: nowrap;
}

.visitor-flag {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 6px -1px #0000002e;
}

.visitor-flag::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px #00000017;
}

.visitor-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}

.visitor-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.32;
}

.visitor strong {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--ink);
}

.visitor-location {
  font-size: 11px;
  color: #5a5e66;
}

.visitor small {
  font-size: 11px;
  color: #8d9096;
}

/* The "live" dot: on the first pinned card (as in the concept art) and on every live card. */
.visitor-live {
  display: none;
  align-self: flex-start;
  width: 6px;
  height: 6px;
  margin: 3px 0 0 4px;
  border-radius: 50%;
  background: #16af7e;
}

.visitor-at-top-left .visitor-live,
.globe-pin .visitor-live {
  display: block;
}

/* Pinned cards around the still globe. */

.visitor-static {
  position: absolute;
  transition: opacity .4s var(--motion-ease-out), transform .5s var(--motion-ease-out), visibility 0s .5s;
}

.visitor-at-top-left {
  top: 12%;
  left: 1%;
}

.visitor-at-top-right {
  top: 13.5%;
  right: 0;
}

.visitor-at-middle-left {
  top: 35%;
  left: 8%;
}

.visitor-at-middle-right {
  top: 42%;
  right: 0;
}

.visitor-at-bottom-left {
  top: 58%;
  left: 11%;
}

.visitor-at-bottom-right {
  top: 63%;
  right: 3%;
}

.hero-visual[data-globe-feed] .visitor-static {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(.97);
  /* If the globe goes live mid-entrance, fade out from wherever the entrance got to. */
  animation: none;
}

.hero-visual[data-globe-feed] :is(.visitor-at-top-right, .visitor-at-middle-right) {
  transition-delay: .06s, .06s, .56s;
}

.hero-visual[data-globe-feed] :is(.visitor-at-bottom-left, .visitor-at-bottom-right) {
  transition-delay: .12s, .12s, .62s;
}

/* Live cards: a pin on the city, a short leader, and the card. */

.globe-feed {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Cards are placed inside the stage; this only catches the frame between a resize and the
     next layout, so it can never widen the page. The margin keeps card shadows intact. */
  overflow: clip;
  overflow-clip-margin: 12px;
}

.globe-pin {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}

.globe-pin[data-phase="measure"] {
  visibility: hidden;
}

/* data-side says where the card sits relative to its pin. --globe-place is the card's resting
   offset; --globe-enter is where it slides in from. */
.globe-pin .visitor {
  position: absolute;
  opacity: 0;
  transform: var(--globe-enter) scale(.94);
  transition: opacity .45s var(--motion-ease-out) .12s, transform .6s var(--motion-ease-out) .12s;
}

.globe-pin:is([data-side="right"], [data-side="left"]) .visitor {
  top: 0;
  --globe-place: translate3d(0, -50%, 0);
}

.globe-pin[data-side="right"] .visitor {
  left: var(--globe-pin-gap);
  transform-origin: left center;
  --globe-enter: translate3d(-8px, -50%, 0);
}

.globe-pin[data-side="left"] .visitor {
  right: var(--globe-pin-gap);
  transform-origin: right center;
  --globe-enter: translate3d(8px, -50%, 0);
}

.globe-pin:is([data-side="above"], [data-side="below"]) .visitor {
  left: 0;
  --globe-place: translate3d(-50%, 0, 0);
}

.globe-pin[data-side="above"] .visitor {
  bottom: var(--globe-pin-gap);
  transform-origin: center bottom;
  --globe-enter: translate3d(-50%, 8px, 0);
}

.globe-pin[data-side="below"] .visitor {
  top: var(--globe-pin-gap);
  transform-origin: center top;
  --globe-enter: translate3d(-50%, -8px, 0);
}

.globe-pin[data-phase="in"] .visitor {
  opacity: 1;
  transform: var(--globe-place) scale(1);
}

.globe-pin[data-phase="out"] .visitor {
  opacity: 0;
  transform: var(--globe-place) scale(.96);
  transition-duration: .3s, .35s;
  transition-delay: 0s;
}

.globe-pin-dot {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 2px #fff, 0 2px 8px #00286359;
  transform: scale(0);
  transition: transform .45s var(--globe-ease-pop);
}

.globe-pin-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1.5px solid var(--green);
  border-radius: 50%;
  opacity: 0;
}

.globe-pin[data-phase="in"] .globe-pin-dot {
  transform: scale(1);
}

.globe-pin[data-phase="in"] .globe-pin-dot::after {
  animation: globe-ping 1.6s var(--motion-ease-out) 2;
}

.globe-pin[data-phase="out"] .globe-pin-dot {
  transform: scale(0);
  transition: transform .3s var(--motion-ease-in-out);
}

/* The leader from the pin to the card, drawn out from the pin. */
.globe-pin-line {
  position: absolute;
  transition: transform .35s var(--motion-ease-out) .05s;
}

.globe-pin:is([data-side="right"], [data-side="left"]) .globe-pin-line {
  top: -.5px;
  width: calc(var(--globe-pin-gap) - 4px);
  height: 1px;
  transform: scaleX(0);
}

.globe-pin:is([data-side="above"], [data-side="below"]) .globe-pin-line {
  left: -.5px;
  width: 1px;
  height: calc(var(--globe-pin-gap) - 4px);
  transform: scaleY(0);
}

.globe-pin[data-side="right"] .globe-pin-line {
  left: 4px;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--green), #00368740);
}

.globe-pin[data-side="left"] .globe-pin-line {
  right: 4px;
  transform-origin: right center;
  background: linear-gradient(270deg, var(--green), #00368740);
}

.globe-pin[data-side="above"] .globe-pin-line {
  bottom: 4px;
  transform-origin: center bottom;
  background: linear-gradient(0deg, var(--green), #00368740);
}

.globe-pin[data-side="below"] .globe-pin-line {
  top: 4px;
  transform-origin: center top;
  background: linear-gradient(180deg, var(--green), #00368740);
}

.globe-pin[data-phase="in"] .globe-pin-line {
  transform: none;
}

.globe-pin[data-phase="out"] .globe-pin-line {
  transition-delay: 0s;
}

.globe-pin[data-phase="out"]:is([data-side="right"], [data-side="left"]) .globe-pin-line {
  transform: scaleX(0);
}

.globe-pin[data-phase="out"]:is([data-side="above"], [data-side="below"]) .globe-pin-line {
  transform: scaleY(0);
}


/* The caption: the live counter pill and, under it, the quiet "verified" note. */

.globe-caption {
  position: absolute;
  bottom: 4px;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: max-content;
  max-width: 100%;
  transform: translateX(-50%);
}

.globe-live {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 14px 7px 11px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink);
  background: #ffffffe0;
  border: 1px solid #e4e5e7;
  border-radius: 999px;
  box-shadow: 0 8px 20px -12px #10281e40;
}

.globe-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 2px 9px 2px 3px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.003em;
  color: #61646c;
  text-align: center;
  white-space: nowrap;
  background: #ffffffc7;
  border-radius: 999px;
}

.globe-note-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 15px;
  height: 15px;
  color: var(--green);
  background: #e3eaf4;
  border-radius: 50%;
}

.globe-note-mark .icon {
  width: 10px;
  height: 10px;
  stroke-width: 2.6;
}

.status-dot {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  background: #0d4ba9;
  border-radius: 50%;
}

.status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  opacity: 0;
}

.globe-count {
  display: inline-flex;
  font-variant-numeric: tabular-nums;
}

.globe-digit {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.globe-digit-old {
  position: absolute;
  inset: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .status-dot::after {
    animation: globe-pulse 2.2s var(--motion-ease-out) infinite;
  }

  .globe-digit[data-rolling] > span:first-child {
    animation: globe-digit-in .45s var(--motion-ease-out);
  }

  .globe-digit[data-rolling] > .globe-digit-old {
    animation: globe-digit-out .45s var(--motion-ease-out) forwards;
  }

  .globe-count[data-direction="down"] .globe-digit[data-rolling] > span:first-child {
    animation-name: globe-digit-in-down;
  }

  .globe-count[data-direction="down"] .globe-digit[data-rolling] > .globe-digit-old {
    animation-name: globe-digit-out-down;
  }
}

@keyframes globe-ping {
  0% {
    opacity: .7;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(3.2);
  }
}

@keyframes globe-pulse {
  0% {
    opacity: .55;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(2.8);
  }
}

@keyframes globe-digit-in {
  from {
    opacity: 0;
    transform: translateY(70%);
  }
}

@keyframes globe-digit-out {
  to {
    opacity: 0;
    transform: translateY(-70%);
  }
}

@keyframes globe-digit-in-down {
  from {
    opacity: 0;
    transform: translateY(-70%);
  }
}

@keyframes globe-digit-out-down {
  to {
    opacity: 0;
    transform: translateY(70%);
  }
}

/* Breakpoints (match hero.css). */

@media (min-width: 1600px) {
  .hero-visual {
    --globe-size: 720px;
    height: 590px;
  }
}

@media (max-width: 1150px) {
  .hero-visual {
    --globe-size: min(580px, calc(50vw + 16px));
    --globe-pin-gap: 14px;
    height: 510px;
  }
  .visitor {
    min-width: 0;
    gap: 8px;
    padding: 8px 12px 8px 8px;
  }
  .visitor-flag {
    width: 26px;
    height: 26px;
  }
  .visitor strong {
    font-size: 11px;
  }
  .visitor-location,
  .visitor small {
    font-size: 10px;
  }
}

/* Tablets and phones: the hero stacks (hero.css) and the globe sits under the copy. */
@media (max-width: 960px) {
  .hero-visual {
    --globe-size: min(100vw, 500px);
    --globe-top: 46%;
    --globe-pin-gap: 12px;
    width: 100%;
    max-width: 520px;
    height: calc(var(--globe-size) * .92);
    margin-top: 18px;
    /* The globe box may be as wide as the viewport; never let it scroll the page sideways. */
    overflow-x: clip;
  }
  .visitor {
    gap: 7px;
    padding: 7px 10px 7px 7px;
    border-radius: 10px;
  }
  .visitor-flag {
    width: 24px;
    height: 24px;
  }
  .visitor strong {
    font-size: 10.5px;
  }
  .visitor-location,
  .visitor small {
    font-size: 10px;
  }
  .visitor-at-middle-left,
  .visitor-at-bottom-right {
    display: none;
  }
  .visitor-at-top-left {
    top: 9%;
    left: 0;
  }
  .visitor-at-top-right {
    top: 24%;
    right: 0;
  }
  .visitor-at-middle-right {
    top: 52%;
    right: 2%;
  }
  .visitor-at-bottom-left {
    top: 62%;
    left: 0;
  }
  .globe-caption {
    bottom: 2px;
    gap: 6px;
  }
  .globe-live {
    padding: 6px 12px 6px 10px;
    font-size: 11px;
  }
  .globe-note {
    font-size: 10.5px;
  }
}

@media (max-width: 370px) {
  .visitor strong {
    font-size: 10px;
  }
  .visitor-location,
  .visitor small {
    font-size: 9.5px;
  }
  .globe-live {
    gap: 6px;
    font-size: 10.5px;
  }
  .globe-note {
    gap: 5px;
    font-size: 9.5px;
    letter-spacing: -.01em;
  }
}

/* Section: integrations. Rendered by crates/web/src/sections/integrations.rs; only that section's styles live here.

   Wide screens: two labelled, evenly spaced rows (websites, then app and game stores) and the
   AI-engine line. Narrow screens: each row is a seamless marquee (the list is rendered twice
   and the track moves by one copy); the two run in opposite directions. Reduced motion:
   wrapped static lists. */

.integration-band {
  width: 100%;
  padding: 22px 0 20px;
  background: linear-gradient(180deg, #fbfcfc, #fff);
  border-block: 1px solid #eeeff0;
}

.integration-inner > .eyebrow {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: .14em;
}

.integration-lanes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}

.integration-lane {
  display: grid;
  grid-template-columns: 158px minmax(0, 1fr);
  align-items: center;
  min-height: 44px;
}

.integration-lane + .integration-lane {
  border-top: 1px dashed #e8e9ec;
}

.lane-label {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8e929a;
  white-space: nowrap;
}

.integration-logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* The duplicate exists only for the marquee. */
.integration-copy {
  display: none;
}

.integration-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  color: #2f323a;
  opacity: .82;
  transition: opacity .25s, transform .25s var(--motion-ease-out);
}

.integration-logo:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.integration-logo img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.lettering-plain span {
  font-size: 15px;
  font-weight: 560;
  letter-spacing: -.01em;
}

.lettering-lowercase span {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.03em;
  text-transform: lowercase;
}

.lettering-italic span {
  font-size: 18px;
  font-weight: 850;
  font-style: italic;
  letter-spacing: -.05em;
  text-transform: lowercase;
}

.lettering-heavy span {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -.07em;
  text-transform: uppercase;
}

.lettering-spaced span {
  font-size: 13px;
  font-weight: 450;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.lettering-caps span {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.integration-more {
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: #60646c;
}

/* ---------- AI engines ---------- */

.integration-band .ai-engines {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #eff0f2;
  text-align: center;
}

.ai-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border: 1px solid #d5deec;
  border-radius: 999px;
  background: #f1f5fa;
  color: #0b316a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ai-tag .icon {
  width: 14px;
  height: 14px;
}

.integration-band .ai-engines p {
  font-size: 15px;
  color: #5a5e68;
}

.ai-lead {
  font-weight: 500;
}

.ai-names {
  white-space: nowrap;
}

.ai-engine {
  display: inline-block;
  color: #1f232c;
}

.ai-separator {
  padding-inline: 6px;
  color: #b6b9bf;
  font-weight: 400;
}

/* Neutral letterings, not the engines' own logos. */
.engine-chatgpt {
  font-weight: 650;
  letter-spacing: -.02em;
}

.engine-perplexity {
  font-weight: 500;
  letter-spacing: .01em;
}

.engine-gemini {
  font-weight: 600;
  letter-spacing: .02em;
}

.engine-claude {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 16px;
  font-weight: 500;
}

/* A slow shimmer across the engine names once the line is on screen. */
@media (prefers-reduced-motion: no-preference) {
  .ai-tag .icon {
    animation: integrations-spark 3.2s var(--motion-ease-in-out) 1s 3;
  }
}

@keyframes integrations-spark {
  0%,
  70%,
  100% {
    transform: rotate(0) scale(1);
  }
  82% {
    transform: rotate(20deg) scale(1.2);
  }
}

/* Narrow screens: slow, seamless marquees that pause under the pointer. */
@media (max-width: 1100px) {
  .integration-inner > .eyebrow {
    text-align: center;
  }
  .integration-lanes {
    gap: 10px;
  }
  /* min-width: 0 keeps the marquee track (max-content wide) from widening the grid. */
  .integration-lane {
    display: block;
    min-width: 0;
    min-height: 0;
  }
  .integration-lane + .integration-lane {
    border-top: 0;
  }
  .lane-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .integration-marquee {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }
  .integration-track {
    display: flex;
    width: max-content;
  }
  .integration-logos {
    flex: none;
    justify-content: flex-start;
    gap: 40px;
    padding-right: 40px;
  }
  .integration-copy {
    display: flex;
  }
  /* Marquee items are always on screen together, so skip the per-item scroll reveal. */
  .integration-marquee .integration-logos > [data-reveal] {
    opacity: 1;
    animation: none;
  }
}

@media (max-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .integration-track {
    animation: integrations-marquee 34s linear infinite;
  }
  .lane-stores .integration-track {
    animation-duration: 30s;
    animation-direction: reverse;
  }
  .integration-marquee:hover .integration-track {
    animation-play-state: paused;
  }
}

@media (max-width: 1100px) and (prefers-reduced-motion: reduce) {
  .integration-marquee {
    mask-image: none;
  }
  .integration-track {
    width: auto;
  }
  .integration-logos {
    flex: 1;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 26px;
    padding: 0;
  }
  .integration-copy {
    display: none;
  }
}

@keyframes integrations-marquee {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (max-width: 700px) {
  .integration-band {
    padding: 20px 0 18px;
  }
  .integration-inner > .eyebrow {
    font-size: 10px;
    letter-spacing: .1em;
  }
  .integration-logos {
    gap: 32px;
    padding-right: 32px;
  }
  .integration-band .ai-engines {
    gap: 8px;
  }
  .integration-band .ai-engines p {
    font-size: 14px;
  }
}

/* The smallest phones: the lead-in and the names take a line each. */
@media (max-width: 420px) {
  .ai-lead {
    display: block;
    margin-bottom: 2px;
  }
}

/* Section: ai_visibility. Rendered by crates/web/src/sections/ai_visibility/; only that section's styles live here.

   The chat window is driven by native radios: `.ai-demo:has([name=ai-engine][value=…]:checked)`
   shows that engine's panel and `[name=ai-stage]` picks its "Today" or "After Outpost"
   answer, so it works without WebAssembly. The island's autoplay only toggles
   `data-pending` (not yet streamed: hidden by opacity, so nothing reflows), `data-active`
   (typing indicator), `data-on` (meter steps) and `data-playing` on the window (gates the
   looping animations to while it is on screen). Showing is animated; hiding is instant, so
   a rewind never flickers. */

.ai-visibility-section {
  --ai-rival: #fff0d4;
  --ai-rival-ink: #77470a;
  --ai-you: #d3dff2;
  --ai-you-ink: #002255;
  --ai-you-ring: #9bb4d9;
  --ai-miss: #fdeeec;
  --ai-miss-ink: #b42318;
  --ai-miss-line: #f6d0cb;
  --ai-pop: cubic-bezier(.34, 1.56, .64, 1);
  position: relative;
  padding-block: 84px 88px;
  background:
    radial-gradient(48% 62% at 76% 50%, #e4ebf5 0%, rgb(228 235 245 / 0) 72%),
    linear-gradient(180deg, #fff 0%, #f8f9fa 100%);
  border-bottom: 1px solid #eeeff0;
}

.ai-visibility-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 64px;
  align-items: center;
}

/* Copy column. */

.ai-copy > .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--deep);
}

.ai-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgb(0 54 135 / .14);
}

.ai-copy h2 {
  font-size: clamp(32px, 3.3vw, 46px);
  line-height: 1.06;
  letter-spacing: -.038em;
  max-width: 560px;
}

.ai-accent {
  color: var(--green);
}

.ai-copy > .section-description {
  max-width: 520px;
  margin-top: 16px;
}

.ai-points {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}

.ai-point {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.ai-point-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #dce2eb;
  color: var(--deep);
  box-shadow: 0 6px 14px -10px rgb(13 31 59 / .5);
}

.ai-point-icon .icon {
  width: 18px;
  height: 18px;
}

.ai-point strong {
  display: block;
  font-size: 15px;
  letter-spacing: -.015em;
  line-height: 1.35;
}

.ai-point strong + span {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.ai-check {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 540px;
  margin-top: 32px;
  padding: 6px;
  border: 1px solid #dcdde0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(16 26 40 / .04), 0 18px 36px -28px rgb(13 31 59 / .45);
  transition: border-color .2s, box-shadow .2s;
}

.ai-check:focus-within {
  border-color: #8fa9d0;
  box-shadow: 0 0 0 4px rgb(18 78 169 / .12), 0 18px 36px -28px rgb(13 31 59 / .45);
}

.ai-check-field {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
  padding-left: 11px;
  color: #8e9199;
}

.ai-check-field .icon {
  width: 17px;
  height: 17px;
}

.ai-check input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
}

.ai-check input::placeholder {
  color: #9da0a8;
}

.ai-check .button {
  flex: none;
  gap: 10px;
  min-height: 44px;
  padding-inline: 18px;
  white-space: nowrap;
}

.ai-small-print {
  max-width: 520px;
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #7e8189;
}

/* The demo: a status bar above the chat window. */

.ai-demo {
  position: relative;
  margin: 0;
  min-width: 0;
}

.ai-demo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.ai-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #5a5e68;
}

.ai-live-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #12a979;
}

.ai-live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  opacity: 0;
}

.ai-demo[data-playing] .ai-live-dot::after {
  animation: ai-ping 1.8s var(--motion-ease-out) infinite;
}

.ai-stage-switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-width: 0;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #eff0f1;
}

.ai-stage-option {
  position: relative;
  z-index: 1;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 650;
  text-align: center;
  white-space: nowrap;
  color: #60646c;
  cursor: pointer;
  transition: color .3s;
}

.ai-stage-option:has(input:checked) {
  color: var(--ink);
}

.ai-stage-option[data-stage="after"]:has(input:checked) {
  color: #fff;
}

.ai-stage-option:has(input:focus-visible) {
  outline: 3px solid #124ea9;
  outline-offset: 2px;
}

.ai-stage-thumb {
  position: absolute;
  inset: 3px auto 3px 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgb(16 26 40 / .14);
  transition: transform .55s var(--motion-ease-out);
}

.ai-stage-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, #0a3d8a, var(--deep));
  opacity: 0;
  transition: opacity .4s;
}

.ai-stage-switch:has([value="after"]:checked) .ai-stage-thumb {
  transform: translate3d(100%, 0, 0);
}

.ai-stage-switch:has([value="after"]:checked) .ai-stage-thumb::after {
  opacity: 1;
}

/* The chat window, in a frame whose green halo lights up "After Outpost". */

.ai-frame {
  position: relative;
}

.ai-frame::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 19px;
  box-shadow: 0 0 0 1px #a6bcdc, 0 34px 80px -34px rgb(0 54 135 / .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .9s var(--motion-ease-out);
}

.ai-demo:has([name="ai-stage"][value="after"]:checked) .ai-frame::before {
  opacity: 1;
}

.ai-window {
  position: relative;
  overflow: hidden;
  border: 1px solid #e1e2e4;
  border-radius: 18px;
  background: #fff;
  box-shadow:
    0 1px 2px rgb(16 26 40 / .05),
    0 30px 60px -36px rgb(13 31 59 / .38),
    0 60px 110px -70px rgb(13 31 59 / .35);
}

.ai-visibility-section .ai-engines {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 7px;
  border: 0;
  border-bottom: 1px solid #eeeff0;
  background: #f9f9f9;
}

.ai-engine-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 9px 8px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 620;
  color: #6a6e77;
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
}

.ai-engine-tab span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-engine-tab:hover {
  color: var(--ink);
  background: #eff0f1;
}

.ai-engine-tab:has(input:checked) {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 0 0 1px #e3e4e6, 0 2px 6px -2px rgb(16 26 40 / .12);
}

.ai-engine-tab:has(input:focus-visible) {
  outline: 3px solid #124ea9;
  outline-offset: 1px;
}

/* Autoplay progress through the playing engine's story (transform set by the ticker). */
.ai-tab-progress {
  position: absolute;
  inset: auto 10px 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--engine);
  opacity: .55;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.ai-mark {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Muted, neutral tints per engine (not brand colours or logos). */
.ai-visibility-section [data-engine="chatgpt"] { --engine: #2f4e7d; }
.ai-visibility-section [data-engine="perplexity"] { --engine: #2d6f86; }
.ai-visibility-section [data-engine="gemini"] { --engine: #5a62b8; }
.ai-visibility-section [data-engine="claude"] { --engine: #a8613a; }

.ai-engine-tab:has(input:checked) .ai-mark {
  color: var(--engine);
}

.ai-panels {
  display: grid;
}

.ai-panel {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px 24px 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--motion-ease-out), visibility 0s .45s;
}

.ai-demo:has([name="ai-engine"][value="chatgpt"]:checked) .ai-panel[data-engine="chatgpt"],
.ai-demo:has([name="ai-engine"][value="perplexity"]:checked) .ai-panel[data-engine="perplexity"],
.ai-demo:has([name="ai-engine"][value="gemini"]:checked) .ai-panel[data-engine="gemini"],
.ai-demo:has([name="ai-engine"][value="claude"]:checked) .ai-panel[data-engine="claude"] {
  opacity: 1;
  visibility: visible;
  transition: opacity .45s var(--motion-ease-out), visibility 0s;
}

.ai-prompt {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 18px;
  transition: opacity .4s var(--motion-ease-out), transform .5s var(--motion-ease-out);
}

.ai-prompt span {
  max-width: 85%;
  padding: 10px 15px;
  border-radius: 18px 18px 5px 18px;
  background: #f0f1f2;
  font-size: 14.5px;
  font-weight: 560;
  line-height: 1.45;
  color: #282c36;
}

.ai-prompt[data-pending] {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: none;
}

.ai-replies {
  display: grid;
  flex: 1;
}

.ai-reply {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--motion-ease-out), visibility 0s .5s;
}

.ai-demo:has([name="ai-stage"][value="before"]:checked) .ai-reply[data-stage="before"],
.ai-demo:has([name="ai-stage"][value="after"]:checked) .ai-reply[data-stage="after"] {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s var(--motion-ease-out), visibility 0s;
}

.ai-reply-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ai-reply-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f2f3f4;
  color: var(--engine);
}

.ai-reply-mark .ai-mark {
  width: 15px;
  height: 15px;
}

.ai-reply-head strong {
  font-size: 13.5px;
  letter-spacing: -.01em;
}

.ai-reply-tag {
  padding: 3px 9px;
  border-radius: 999px;
  background: #f2f2f3;
  font-size: 11px;
  font-weight: 650;
  color: #6f737c;
  white-space: nowrap;
}

.ai-reply[data-stage="after"] .ai-reply-tag {
  background: #e3eaf5;
  color: var(--deep);
}

.ai-answer {
  position: relative;
  isolation: isolate;
  margin: 12px 0 18px;
  padding-left: 34px;
  font-size: 14.5px;
  line-height: 1.68;
  color: #2e323a;
}

.ai-answer ol {
  display: grid;
  gap: 3px;
  margin: 8px 0;
  padding: 0;
  list-style: none;
  counter-reset: ai-pick;
}

.ai-answer li {
  position: relative;
  padding-left: 1.5em;
  counter-increment: ai-pick;
}

.ai-answer li::before {
  content: counter(ai-pick) ".";
  position: absolute;
  left: 0;
  font-weight: 650;
  color: #8e9198;
  transition: opacity .28s ease-out;
}

.ai-answer li:has(> .ai-token:first-child[data-pending])::before {
  opacity: 0;
  transition: none;
}

.ai-token {
  transition: opacity .3s ease-out;
}

.ai-token[data-pending] {
  opacity: 0;
  transition: none;
}

/* The streaming caret rides just after the newest token, out of the text flow. */
.ai-token[data-caret] {
  position: relative;
}

.ai-token[data-caret]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -.75em;
  width: .5em;
  height: .5em;
  margin-top: -.25em;
  border-radius: 50%;
  background: #2e323a;
}

.ai-demo[data-playing] .ai-token[data-caret]::after {
  animation: ai-caret .9s ease-in-out infinite;
}

.ai-mention {
  position: relative;
  margin: 0 -.05em;
  padding: .04em .22em;
  border-radius: 5px;
  background: none;
  font-weight: 700;
  white-space: nowrap;
}

.ai-mention::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  transform-origin: left center;
  transition: transform .55s var(--motion-ease-out) .06s;
}

.ai-mention-rival {
  color: var(--ai-rival-ink);
}

.ai-mention-rival::before {
  background: var(--ai-rival);
}

.ai-mention-you {
  color: var(--ai-you-ink);
}

.ai-mention-you::before {
  background: var(--ai-you);
  box-shadow: inset 0 0 0 1px var(--ai-you-ring);
}

.ai-token[data-pending] .ai-mention::before {
  transform: scaleX(0);
  transition: none;
}

/* Typing indicator, laid over the (still empty) answer. */
.ai-thinking {
  position: absolute;
  top: 3px;
  left: 34px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-style: italic;
  color: #80838b;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

.ai-thinking[data-active] {
  opacity: 1;
  transition: opacity .3s .05s;
}

.ai-thinking i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9ea1a8;
}

.ai-thinking span {
  margin-left: 5px;
}

.ai-demo[data-playing] .ai-thinking[data-active] i {
  animation: ai-typing 1s ease-in-out infinite;
}

.ai-demo[data-playing] .ai-thinking[data-active] i:nth-child(2) {
  animation-delay: .15s;
}

.ai-demo[data-playing] .ai-thinking[data-active] i:nth-child(3) {
  animation-delay: .3s;
}

/* Verdict: the placement chip and the share-of-voice meter, pinned to the bottom so both
   answers' meters sit in exactly the same place. */
.ai-verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed #e3e4e6;
}

.ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: opacity .35s ease-out, transform .6s var(--ai-pop);
}

.ai-chip .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}

.ai-chip-missing {
  border-color: var(--ai-miss-line);
  background: var(--ai-miss);
  color: var(--ai-miss-ink);
}

.ai-chip-cited {
  border-color: #bfcfe6;
  background: #e3ebf6;
  color: var(--deep);
}

.ai-chip[data-pending] {
  opacity: 0;
  transform: scale(.86);
  transition: none;
}

.ai-meter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: opacity .4s ease-out;
}

.ai-meter[data-pending] {
  opacity: 0;
  transition: none;
}

.ai-meter-label {
  font-size: 12px;
  font-weight: 650;
  color: #6f737c;
  white-space: nowrap;
}

.ai-meter-pips {
  display: flex;
  gap: 3px;
}

.ai-pip {
  position: relative;
  width: 8px;
  height: 18px;
  border-radius: 3px;
  background: #e9e9eb;
}

.ai-pip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, #1956b2, var(--green));
  opacity: 0;
  transform: scaleY(.35);
  transform-origin: bottom;
  transition: opacity .25s ease-out, transform .5s var(--ai-pop);
}

.ai-pip[data-on]::after {
  opacity: 1;
  transform: none;
}

.ai-meter-value {
  min-width: 44px;
  font-size: 13px;
  font-weight: 600;
  color: #6f737c;
  font-variant-numeric: tabular-nums;
}

.ai-meter-value strong {
  font-size: 19px;
  font-weight: 780;
  letter-spacing: -.02em;
  color: var(--ink);
}

.ai-reply[data-stage="after"] .ai-meter-value strong {
  color: var(--deep);
}

@keyframes ai-ping {
  0% {
    opacity: .55;
    transform: scale(1);
  }
  80%,
  100% {
    opacity: 0;
    transform: scale(2.6);
  }
}

@keyframes ai-caret {
  50% {
    opacity: .35;
    transform: scale(.8);
  }
}

@keyframes ai-typing {
  0%,
  60%,
  100% {
    transform: translate3d(0, 0, 0);
    opacity: .55;
  }
  30% {
    transform: translate3d(0, -4px, 0);
    opacity: 1;
  }
}

/* Mid widths: a tighter pair of columns. */
@media (max-width: 1150px) {
  .ai-visibility-grid {
    gap: 40px;
  }
  .ai-check {
    flex-direction: column;
    align-items: stretch;
  }
  .ai-check .button {
    width: 100%;
  }
  .ai-panel {
    padding: 20px 20px 18px;
  }
  .ai-answer {
    padding-left: 0;
  }
  .ai-thinking {
    left: 0;
  }
}

/* One column: the chat sits under the pitch. */
@media (max-width: 900px) {
  .ai-visibility-section {
    padding-block: 56px 60px;
    background:
      radial-gradient(90% 40% at 50% 78%, #e4ebf5 0%, rgb(228 235 245 / 0) 72%),
      linear-gradient(180deg, #fff 0%, #f8f9fa 100%);
  }
  .ai-visibility-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .ai-copy h2 {
    max-width: 640px;
  }
}

@media (max-width: 560px) {
  .ai-visibility-section {
    padding-block: 44px 48px;
  }
  .ai-copy h2 {
    font-size: clamp(29px, 8.6vw, 36px);
  }
  .ai-points {
    gap: 14px;
    margin-top: 24px;
  }
  .ai-check {
    flex-direction: column;
    align-items: stretch;
    margin-top: 26px;
  }
  .ai-check .button {
    width: 100%;
  }
  .ai-demo-bar {
    flex-wrap: wrap;
  }
  .ai-stage-switch {
    flex: 1 1 100%;
    order: -1;
  }
  .ai-visibility-section .ai-engines {
    padding: 5px;
    gap: 2px;
  }
  .ai-engine-tab {
    flex-direction: column;
    gap: 4px;
    padding: 8px 2px 7px;
    font-size: 11.5px;
  }
  .ai-panel {
    padding: 18px 16px 16px;
  }
  .ai-prompt span {
    font-size: 14px;
  }
  .ai-answer {
    font-size: 14px;
    line-height: 1.62;
  }
  .ai-verdict {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 360px) {
  .ai-engine-tab {
    font-size: 10.5px;
  }
  .ai-reply-tag {
    font-size: 10px;
    padding-inline: 7px;
  }
  .ai-meter {
    gap: 8px;
  }
  .ai-pip {
    width: 7px;
  }
}

/* Section: industries. Rendered by crates/web/src/sections/industries.rs; only that section's styles live here.

   Five image cards (a swipeable, snapping row below 1100px), each linking to its segment's
   playbook hub, and the "View all industries" link to /industries. */

.industries {
  padding-block: 56px 52px;
}

.industries-heading {
  margin-bottom: 24px;
}

.industries-heading h2 {
  font-size: clamp(24px, 2.35vw, 32px);
  font-weight: 820;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.industries-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 8px 2px;
  background: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
}

.industries-more .icon {
  width: 16px;
  height: 16px;
  transition: transform .25s var(--motion-ease-out);
}

.industries-more:hover {
  color: var(--green);
}

.industries-more:hover .icon {
  transform: translateX(3px);
}

.industry-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.industry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(16 26 40 / .04);
  transition: transform .35s var(--motion-ease-out), box-shadow .35s var(--motion-ease-out), border-color .35s;
}

.industry-card:hover {
  transform: translate3d(0, -4px, 0);
  border-color: #dadbdf;
  box-shadow: 0 22px 40px -26px rgb(13 31 59 / .45);
}

.industry-art {
  position: relative;
  aspect-ratio: 2 / 1.02;
  overflow: hidden;
  background: #ebecef;
}

.industry-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgb(12 14 18 / .28));
  opacity: 0;
  transition: opacity .4s;
}

.industry-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--motion-ease-out);
}

.industry-card:hover .industry-art img {
  transform: scale(1.07);
}

.industry-card:hover .industry-art::after {
  opacity: 1;
}

.industry-content {
  padding: 16px 16px 18px;
}

.industry-card h3 {
  margin-bottom: 11px;
  font-size: 16px;
  letter-spacing: -.025em;
}

.industry-card .check-list {
  gap: 7px;
  font-size: 13px;
  color: #636771;
}

/* The headline outcome leads the list. */
.industry-card .check-list li:first-child {
  color: var(--ink);
  font-weight: 600;
}

.industry-card .check-list .icon {
  width: 13px;
  height: 13px;
  margin-top: 3px;
  color: #124693;
  stroke-width: 2.2;
}

/* Below 1100px the cards become a horizontal row that snaps card by card. */
@media (max-width: 1100px) {
  .industry-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .industry-grid::-webkit-scrollbar {
    display: none;
  }
  .industry-card {
    flex: 0 0 min(270px, 44%);
    scroll-snap-align: start;
  }
  .industry-card:hover {
    transform: none;
  }
}

@media (max-width: 700px) {
  .industries {
    padding-block: 40px;
  }
  .industries-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .industry-card {
    flex-basis: 76%;
  }
}

@media (max-width: 359px) {
  .industry-card {
    flex-basis: 84%;
  }
}

/* The title's link covers the whole card. */
.industry-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.industry-link:focus-visible {
  outline: none;
}

.industry-card:has(.industry-link:focus-visible) {
  outline: 3px solid #124ea9;
  outline-offset: 3px;
}

.industry-card:hover .industry-link {
  color: var(--deep);
}

/* Section: how_it_works. Rendered by crates/web/src/sections/how_it_works.rs; only that section's styles live here.

   Four numbered steps in a row with drawn arrows between them; a vertical timeline on
   narrow screens. Steps reveal in sequence (data-reveal-stagger="slow"), each arrow
   draws in after its step (.draw-in), and a "verified" stamp is pressed onto each step
   once it has landed (.step-stamp). */

.workflow-section {
  padding-block: 40px 56px;
  scroll-margin-top: 90px;
}

.workflow-section h2 {
  font-size: clamp(26px, 2.5vw, 34px);
  letter-spacing: -.028em;
}

.workflow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 56px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.workflow-step {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-areas:
    "number icon"
    ". title"
    ". body";
  column-gap: 16px;
  align-content: start;
}

.step-number {
  grid-area: number;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #181c26;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 0 0 5px #fff, 0 0 0 6px #e9eaed;
  transition: background .3s, box-shadow .3s;
}

.step-icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  justify-self: start;
  width: 46px;
  height: 46px;
  margin: -8px 0 0 -8px;
  border-radius: 12px;
  color: #21252e;
  transition: background .3s, color .3s, transform .3s var(--motion-ease-out);
}

.step-icon .icon {
  width: 30px;
  height: 30px;
  stroke-width: 1.6;
}

.workflow-step h3 {
  grid-area: title;
  margin: 14px 0 8px;
  font-size: 17px;
}

.workflow-step p {
  grid-area: body;
  max-width: 250px;
  font-size: 14px;
  line-height: 1.62;
  color: var(--muted);
}

.workflow-step:hover .step-icon {
  background: #eaeff6;
  color: #0b377a;
  transform: translateY(-2px);
}

.workflow-step:hover .step-number {
  background: #0b316a;
  box-shadow: 0 0 0 5px #fff, 0 0 0 6px #bfcde3;
}

/* The "verified" stamp, pressed onto the top right of each step. Absolutely placed, so it
   never moves the step's content. */
.step-stamp {
  position: absolute;
  top: -2px;
  right: 2px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px 4px 9px;
  border: 1.5px solid #3464ad;
  border-radius: 7px;
  background: rgb(241 245 250 / .94);
  color: #0b377a;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .13em;
  text-transform: uppercase;
  transform: rotate(-7deg);
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px rgb(52 100 173 / .3);
  pointer-events: none;
}

.step-stamp .icon {
  width: 12px;
  height: 12px;
  stroke-width: 3;
}

/* The ink ring that spreads as the stamp lands. */
.step-stamp::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px solid rgb(52 100 173 / .45);
  border-radius: 11px;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  /* Pressed on once its step has risen into place (the step's stagger slot sets the delay). */
  .workflow-step[data-reveal-state="visible"] .step-stamp {
    animation: step-stamp .6s cubic-bezier(.2, 1.5, .45, 1) backwards;
    animation-delay: calc(var(--motion-slot, 0) * var(--motion-step) + .7s);
  }
  .workflow-step[data-reveal-state="visible"] .step-stamp::after {
    animation: step-stamp-ink .8s var(--motion-ease-out);
    animation-delay: calc(var(--motion-slot, 0) * var(--motion-step) + .82s);
  }
}

@keyframes step-stamp {
  0% {
    opacity: 0;
    transform: rotate(-16deg) scale(2.1);
  }
  55% {
    opacity: 1;
    transform: rotate(-6deg) scale(.9);
  }
  100% {
    opacity: 1;
    transform: rotate(-7deg) scale(1);
  }
}

@keyframes step-stamp-ink {
  from {
    opacity: 1;
    transform: scale(.85);
  }
  to {
    opacity: 0;
    transform: scale(1.35);
  }
}

/* The arrow sits in the gap after the step, level with the step title. */
.step-arrow {
  position: absolute;
  top: 62px;
  right: -48px;
  width: 40px;
  height: 12px;
  overflow: visible;
}

.step-arrow path {
  fill: none;
  stroke: #8f929a;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: no-preference) {
  /* Draw the arrow once its own step has landed. */
  .workflow-section .step-arrow .draw-in {
    animation-duration: .7s;
    animation-delay: calc(var(--motion-slot, 0) * var(--motion-step) + .45s);
  }
  .workflow-section .step-arrow path + path.draw-in {
    animation-delay: calc(var(--motion-slot, 0) * var(--motion-step) + .9s);
  }
}

@media (max-width: 1100px) {
  .workflow-grid {
    gap: 40px;
  }
  .step-arrow {
    right: -36px;
    width: 30px;
  }
}

/* Narrow screens: a vertical timeline joined by a line through the numbers. */
@media (max-width: 860px) {
  .workflow-grid {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 24px;
  }
  .workflow-step {
    grid-template-columns: 30px 46px minmax(0, 1fr);
    grid-template-areas:
      "number icon title"
      ". . body";
    column-gap: 14px;
    padding-bottom: 26px;
  }
  .workflow-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 14.5px;
    top: 38px;
    bottom: 6px;
    width: 1.5px;
    border-radius: 2px;
    background: linear-gradient(#d2d5db, #eaebee);
  }
  .step-icon {
    margin: -8px 0 0;
  }
  .workflow-step h3 {
    align-self: center;
    margin: 0;
  }
  .workflow-step p {
    grid-column: 2 / -1;
    max-width: 520px;
    margin-top: 6px;
  }
  .step-arrow {
    display: none;
  }
  .step-stamp {
    top: 4px;
    right: 0;
  }
}

@media (max-width: 400px) {
  .workflow-step {
    grid-template-columns: 30px 40px minmax(0, 1fr);
    column-gap: 10px;
  }
  .step-icon {
    width: 40px;
    height: 40px;
  }
  .step-icon .icon {
    width: 26px;
    height: 26px;
  }
}

/* Section: stages. Rendered by crates/web/src/sections/stages/ (mod.rs, runway.rs); only that
   section's styles live here.

   Native radios drive everything: `#stage-<slug>:checked ~ …` selects the card and shows
   its detail. Every detail sits in the same grid cell (hidden ones are `visibility: hidden`),
   so the panel always has the tallest detail's height and switching never moves the page.
   Entrance animations are declared only on the shown detail, so they restart each time a
   detail is shown. The Pre-launch detail is the Launch Runway pitch with its countdown card
   (`.runway-*`). */

.stages-section {
  padding-block: 56px 64px;
}

.stage-picker {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

.stage-copy h2 {
  max-width: 600px;
  font-size: clamp(28px, 2.6vw, 36px);
  letter-spacing: -.028em;
}

.stage-copy > .section-description {
  margin-top: 12px;
  max-width: none;
  font-size: 16px;
}

.stage-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 26px;
}

.stage-options label {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 108px;
  padding: 16px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(16 26 40 / .04);
  cursor: pointer;
  transition: border-color .25s, background .25s, box-shadow .25s, transform .3s var(--motion-ease-out);
}

.stage-options label:hover {
  border-color: #cfd0d4;
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 14px 28px -22px rgb(13 31 59 / .45);
}

.stage-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 11px;
  background: #f4f5f7;
  color: #21252e;
  transition: background .25s, color .25s;
}

.stage-icon .icon {
  width: 25px;
  height: 25px;
  stroke-width: 1.6;
}

.stage-options strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  letter-spacing: -.02em;
}

.stage-options small {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

#stage-idea:checked ~ .stage-copy label[for=stage-idea],
#stage-prelaunch:checked ~ .stage-copy label[for=stage-prelaunch],
#stage-live:checked ~ .stage-copy label[for=stage-live],
#stage-scale:checked ~ .stage-copy label[for=stage-scale] {
  border-color: #6cc79d;
  background: linear-gradient(160deg, #f8f8fa, #edf8f2);
  box-shadow: 0 0 0 3px #e2f4ea, 0 14px 28px -24px rgb(13 89 58 / .6);
}

#stage-idea:checked ~ .stage-copy label[for=stage-idea] .stage-icon,
#stage-prelaunch:checked ~ .stage-copy label[for=stage-prelaunch] .stage-icon,
#stage-live:checked ~ .stage-copy label[for=stage-live] .stage-icon,
#stage-scale:checked ~ .stage-copy label[for=stage-scale] .stage-icon {
  background: #d8f1e3;
  color: #0b6a48;
}

#stage-idea:focus-visible ~ .stage-copy label[for=stage-idea],
#stage-prelaunch:focus-visible ~ .stage-copy label[for=stage-prelaunch],
#stage-live:focus-visible ~ .stage-copy label[for=stage-live],
#stage-scale:focus-visible ~ .stage-copy label[for=stage-scale] {
  outline: 3px solid #12a979;
  outline-offset: 3px;
}

/* The preview panel. */
.stage-preview {
  position: relative;
  container: stage-preview / inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 18px;
  min-height: 420px;
  padding: 26px 24px 22px;
  overflow: hidden;
  border: 1px solid #e0e6ee;
  border-radius: 20px;
  background:
    radial-gradient(120% 80% at 100% 100%, #dce4f1 0%, transparent 60%),
    linear-gradient(165deg, #f9fafb, #eef2f8);
  box-shadow: 0 30px 60px -48px rgb(13 36 70 / .55);
}

.stage-detail {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-areas:
    "headline visual"
    "steps visual";
  grid-template-rows: auto 1fr;
  column-gap: 12px;
  visibility: hidden;
}

#stage-idea:checked ~ .stage-preview .detail-idea,
#stage-prelaunch:checked ~ .stage-preview .detail-prelaunch,
#stage-live:checked ~ .stage-preview .detail-live,
#stage-scale:checked ~ .stage-preview .detail-scale {
  visibility: visible;
}

.stage-heading {
  grid-area: headline;
  margin-bottom: 16px;
}

.stage-detail h3 {
  font-size: 17px;
  letter-spacing: -.025em;
}

.stage-subhead {
  margin-top: 5px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--muted);
}

.stage-detail .check-list {
  grid-area: steps;
  /* The panel is as tall as the tallest detail; shorter lists stay packed at the top. */
  align-content: start;
  gap: 11px;
  font-size: 14px;
  color: #424650;
}

.stage-detail .check-list .icon {
  width: 14px;
  height: 14px;
  margin-top: 3px;
  color: #124693;
  stroke-width: 2.3;
}

.stage-visual {
  grid-area: visual;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 210px;
}

/* The note and its arrow share one in-flow column, so the arrow always starts under the
   note's last line however far the note wraps. */
.stage-annotation {
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  max-width: 170px;
  margin-top: -6px;
}

.stage-note {
  font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
  font-size: 18px;
  line-height: 1.22;
  color: #4c505a;
  transform: rotate(-7deg);
}

.stage-arrow {
  display: block;
  flex: none;
  width: 50px;
  height: 44px;
  /* Clear the rotated note's lower-left corner, then let the head reach toward the trend. */
  margin: 10px 0 -18px;
  overflow: visible;
}

.stage-arrow path {
  fill: none;
  stroke: #efa62a;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stage-trend {
  width: 100%;
  margin-top: 18px;
  color: #1a52a5;
}

.stage-trend .sparkline-area {
  opacity: .16;
}

/* ---------- Launch Runway (the Pre-launch detail) ---------- */

.stage-detail-runway {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  grid-template-areas:
    "headline headline"
    "steps visual"
    "plan visual";
  grid-template-rows: auto auto 1fr;
  column-gap: 18px;
}

.stage-detail-runway .stage-heading {
  margin-bottom: 14px;
}

.stage-detail-runway h3 {
  font-size: 23px;
  letter-spacing: -.032em;
}

.stage-detail-runway .check-list {
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.45;
}

.runway-visual {
  min-height: 0;
  justify-content: flex-start;
}

.runway-card {
  margin: 0;
  padding: 13px 14px 12px;
  border: 1px solid #e3e5e8;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 18px 36px -28px rgb(14 29 52 / .55);
}

.runway-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 8px;
  margin-bottom: 10px;
}

.runway-title {
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #565a65;
}

.runway-tags {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.runway-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #ecf1f8;
  color: #0b316a;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.runway-pulse {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #144ca0;
}

.runway-pulse::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: #144ca0;
  opacity: 0;
}

.runway-body {
  display: flex;
  align-items: center;
  gap: 12px;
}

.runway-ring {
  position: relative;
  flex: none;
  width: 76px;
  height: 76px;
}

.runway-ring svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}

.runway-ring circle {
  fill: none;
  stroke-width: 8;
}

.runway-ring-track {
  stroke: #e7ecf3;
}

.runway-ring-value {
  stroke: #154da0;
  stroke-linecap: round;
}

.runway-ring-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  line-height: 1.05;
}

.runway-ring-label strong {
  font-size: 18px;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.runway-ring-label small {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
}

.runway-launch {
  min-width: 0;
}

.runway-days {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 5px;
  line-height: 1;
}

.runway-days small {
  grid-column: 1 / -1;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

.runway-days strong {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.045em;
  color: #13161e;
  font-variant-numeric: tabular-nums;
}

.runway-days span {
  font-size: 14px;
  font-weight: 650;
  color: #31353e;
}

/* The ticking clock: each moving digit is a strip of digits seen through a one-digit window. */
.runway-clock {
  display: inline-flex;
  align-items: flex-start;
  height: 1.3em;
  margin-top: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  background: #f3f4f5;
  color: #484c57;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3em;
  box-sizing: content-box;
  font-variant-numeric: tabular-nums;
}

.clock-colon {
  color: #9ea0a4;
}

.digit-window {
  display: inline-block;
  height: 1.3em;
  overflow: hidden;
}

.digit-strip {
  display: flex;
  flex-direction: column;
}

.runway-stats {
  display: grid;
  gap: 6px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid #eeeff1;
}

.runway-stats li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--muted);
}

.runway-stats .icon {
  flex: none;
  width: 15px;
  height: 15px;
  color: #124693;
  stroke-width: 2;
}

.runway-stats strong {
  color: var(--ink);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.runway-plan {
  grid-area: plan;
  align-self: end;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  padding: 7px 12px 7px 13px;
  border: 1px solid #cfd9e7;
  border-radius: 999px;
  background: #fff;
  color: #31353e;
  font-size: 13px;
  text-decoration: none;
  transition: border-color .2s, box-shadow .25s var(--motion-ease-out), transform .25s var(--motion-ease-out);
}

.runway-plan strong {
  color: #0b316a;
}

.runway-plan .icon {
  width: 13px;
  height: 13px;
  margin-left: 3px;
  color: #0b377a;
  transition: transform .25s var(--motion-ease-out);
}

.runway-plan:hover,
.runway-plan:focus-visible {
  border-color: #8fa9d0;
  box-shadow: 0 10px 20px -16px rgb(6 35 79 / .6);
  transform: translateY(-1px);
}

.runway-plan:hover .icon,
.runway-plan:focus-visible .icon {
  transform: translateX(3px);
}

/* A narrower panel (tablets between the two-column and stacked layouts, and phones): the
   card goes full width under the checklist, laid out in a row. */
@container stage-preview (max-width: 470px) {
  .stage-detail.stage-detail-runway {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "headline"
      "steps"
      "visual"
      "plan";
    grid-template-rows: auto;
  }
  .stage-detail-runway .stage-visual.runway-visual {
    display: block;
    margin-top: 16px;
  }
  .stage-detail-runway h3 {
    font-size: 21px;
  }
  .runway-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "head head"
      "body stats";
    column-gap: 14px;
  }
  .runway-head {
    grid-area: head;
  }
  .runway-body {
    grid-area: body;
  }
  .runway-stats {
    grid-area: stats;
    align-content: center;
    margin: 0;
    padding: 0 0 0 14px;
    border-top: 0;
    border-left: 1px solid #eeeff1;
  }
}

@container stage-preview (max-width: 340px) {
  .runway-body {
    justify-content: center;
    gap: 18px;
  }
  .runway-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "body"
      "stats";
  }
  .runway-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 11px;
    padding: 10px 0 0;
    border-top: 1px solid #eeeff1;
    border-left: 0;
  }
  .runway-stats li {
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: 5px;
    row-gap: 0;
  }
}

/* Inline waitlist form, shared by every stage. */
.stage-waitlist {
  position: relative;
  grid-row: 2;
  z-index: 1;
  padding: 16px 18px 14px;
  border: 1px solid #e5e7ea;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 34px -26px rgb(14 29 52 / .5);
}

.stage-waitlist-title {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.015em;
}

.stage-waitlist-row {
  display: flex;
  gap: 8px;
}

.stage-waitlist input[type=email] {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid #e1e2e4;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  transition: border-color .2s, box-shadow .2s;
}

.stage-waitlist input[type=email]::placeholder {
  color: #a0aaa5;
}

.stage-waitlist input[type=email]:focus {
  outline: none;
  border-color: #3f6db3;
  box-shadow: 0 0 0 4px #dfe7f3;
}

.stage-waitlist .button {
  min-height: 46px;
  padding-inline: 20px;
  border-radius: 10px;
  background: linear-gradient(180deg, #114188, #0a326e);
  border-color: #0a326e;
  white-space: nowrap;
}

.stage-waitlist-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.stage-waitlist-consent input {
  width: 15px;
  height: 15px;
  margin: 1px 0 0;
  flex: none;
  accent-color: #0b377a;
}

.stage-waitlist-consent a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#stages .honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Detail entrance, replayed whenever a detail is shown: the animations are declared only on
   the shown detail (the :is() list), so they start afresh each time a radio selects one.
   Gated on the panel having been revealed, so the first play happens when the panel scrolls
   into view. */
@media (prefers-reduced-motion: no-preference) {
  .stage-preview:not([data-reveal-state="pending"]) :is(#stage-idea:checked ~ .stage-preview .detail-idea, #stage-prelaunch:checked ~ .stage-preview .detail-prelaunch, #stage-live:checked ~ .stage-preview .detail-live, #stage-scale:checked ~ .stage-preview .detail-scale) {
    animation: stage-in .5s var(--motion-ease-out) backwards;
  }
  .stage-preview:not([data-reveal-state="pending"]) :is(#stage-idea:checked ~ .stage-preview .detail-idea, #stage-prelaunch:checked ~ .stage-preview .detail-prelaunch, #stage-live:checked ~ .stage-preview .detail-live, #stage-scale:checked ~ .stage-preview .detail-scale) .check-list li {
    animation: stage-item .5s var(--motion-ease-out) backwards;
  }
  .stage-preview:not([data-reveal-state="pending"]) :is(#stage-idea:checked ~ .stage-preview .detail-idea, #stage-prelaunch:checked ~ .stage-preview .detail-prelaunch, #stage-live:checked ~ .stage-preview .detail-live, #stage-scale:checked ~ .stage-preview .detail-scale) .check-list li:nth-child(1) { animation-delay: .08s; }
  .stage-preview:not([data-reveal-state="pending"]) :is(#stage-idea:checked ~ .stage-preview .detail-idea, #stage-prelaunch:checked ~ .stage-preview .detail-prelaunch, #stage-live:checked ~ .stage-preview .detail-live, #stage-scale:checked ~ .stage-preview .detail-scale) .check-list li:nth-child(2) { animation-delay: .14s; }
  .stage-preview:not([data-reveal-state="pending"]) :is(#stage-idea:checked ~ .stage-preview .detail-idea, #stage-prelaunch:checked ~ .stage-preview .detail-prelaunch, #stage-live:checked ~ .stage-preview .detail-live, #stage-scale:checked ~ .stage-preview .detail-scale) .check-list li:nth-child(3) { animation-delay: .2s; }
  .stage-preview:not([data-reveal-state="pending"]) :is(#stage-idea:checked ~ .stage-preview .detail-idea, #stage-prelaunch:checked ~ .stage-preview .detail-prelaunch, #stage-live:checked ~ .stage-preview .detail-live, #stage-scale:checked ~ .stage-preview .detail-scale) .check-list li:nth-child(4) { animation-delay: .26s; }
  .stage-preview:not([data-reveal-state="pending"]) :is(#stage-idea:checked ~ .stage-preview .detail-idea, #stage-prelaunch:checked ~ .stage-preview .detail-prelaunch, #stage-live:checked ~ .stage-preview .detail-live, #stage-scale:checked ~ .stage-preview .detail-scale) .check-list li:nth-child(5) { animation-delay: .32s; }
  .stage-preview:not([data-reveal-state="pending"]) :is(#stage-idea:checked ~ .stage-preview .detail-idea, #stage-prelaunch:checked ~ .stage-preview .detail-prelaunch, #stage-live:checked ~ .stage-preview .detail-live, #stage-scale:checked ~ .stage-preview .detail-scale) .stage-note {
    animation: stage-note .7s var(--motion-ease-out) .3s backwards;
  }
  .stage-preview:not([data-reveal-state="pending"]) :is(#stage-idea:checked ~ .stage-preview .detail-idea, #stage-prelaunch:checked ~ .stage-preview .detail-prelaunch, #stage-live:checked ~ .stage-preview .detail-live, #stage-scale:checked ~ .stage-preview .detail-scale) .stage-arrow path {
    stroke-dasharray: 1;
    animation: stage-draw .5s var(--motion-ease-in-out) .7s backwards;
  }
  .stage-preview:not([data-reveal-state="pending"]) :is(#stage-idea:checked ~ .stage-preview .detail-idea, #stage-prelaunch:checked ~ .stage-preview .detail-prelaunch, #stage-live:checked ~ .stage-preview .detail-live, #stage-scale:checked ~ .stage-preview .detail-scale) .stage-arrow path + path {
    animation-delay: 1.1s;
    animation-duration: .25s;
  }
  .stage-preview:not([data-reveal-state="pending"]) :is(#stage-idea:checked ~ .stage-preview .detail-idea, #stage-prelaunch:checked ~ .stage-preview .detail-prelaunch, #stage-live:checked ~ .stage-preview .detail-live, #stage-scale:checked ~ .stage-preview .detail-scale) .stage-trend .sparkline-line {
    stroke-dasharray: 1;
    animation: stage-draw 1.3s var(--motion-ease-in-out) .35s backwards;
  }
  .stage-preview:not([data-reveal-state="pending"]) :is(#stage-idea:checked ~ .stage-preview .detail-idea, #stage-prelaunch:checked ~ .stage-preview .detail-prelaunch, #stage-live:checked ~ .stage-preview .detail-live, #stage-scale:checked ~ .stage-preview .detail-scale) .stage-trend .sparkline-area {
    animation: stage-fade .9s ease-out .9s backwards;
  }
  .stage-preview:not([data-reveal-state="pending"]) :is(#stage-idea:checked ~ .stage-preview .detail-idea, #stage-prelaunch:checked ~ .stage-preview .detail-prelaunch, #stage-live:checked ~ .stage-preview .detail-live, #stage-scale:checked ~ .stage-preview .detail-scale) .stage-trend .sparkline-dot {
    transform-box: fill-box;
    transform-origin: center;
    animation: stage-pop .45s var(--motion-ease-out) 1.55s backwards;
  }

  /* Launch Runway: the card rises in, the ring fills to its value, the plan link follows,
     and the clock ticks down while the detail is shown. */
  .stage-preview:not([data-reveal-state="pending"]) :is(#stage-idea:checked ~ .stage-preview .detail-idea, #stage-prelaunch:checked ~ .stage-preview .detail-prelaunch, #stage-live:checked ~ .stage-preview .detail-live, #stage-scale:checked ~ .stage-preview .detail-scale) .runway-card {
    animation: stage-in .6s var(--motion-ease-out) .18s backwards;
  }
  .stage-preview:not([data-reveal-state="pending"]) :is(#stage-idea:checked ~ .stage-preview .detail-idea, #stage-prelaunch:checked ~ .stage-preview .detail-prelaunch, #stage-live:checked ~ .stage-preview .detail-live, #stage-scale:checked ~ .stage-preview .detail-scale) .runway-ring-value {
    animation: runway-fill 1.5s var(--motion-ease-out) .45s backwards;
  }
  .stage-preview:not([data-reveal-state="pending"]) :is(#stage-idea:checked ~ .stage-preview .detail-idea, #stage-prelaunch:checked ~ .stage-preview .detail-prelaunch, #stage-live:checked ~ .stage-preview .detail-live, #stage-scale:checked ~ .stage-preview .detail-scale) .runway-plan {
    animation: stage-in .5s var(--motion-ease-out) .5s backwards;
  }
  .stage-preview:not([data-reveal-state="pending"]) :is(#stage-idea:checked ~ .stage-preview .detail-idea, #stage-prelaunch:checked ~ .stage-preview .detail-prelaunch, #stage-live:checked ~ .stage-preview .detail-live, #stage-scale:checked ~ .stage-preview .detail-scale) .runway-pulse::after {
    animation: runway-pulse 2.2s var(--motion-ease-out) infinite;
  }
  .stage-preview:not([data-reveal-state="pending"]) :is(#stage-idea:checked ~ .stage-preview .detail-idea, #stage-prelaunch:checked ~ .stage-preview .detail-prelaunch, #stage-live:checked ~ .stage-preview .detail-live, #stage-scale:checked ~ .stage-preview .detail-scale) .strip-ones {
    animation: runway-tick 10s steps(10) infinite;
  }
  .stage-preview:not([data-reveal-state="pending"]) :is(#stage-idea:checked ~ .stage-preview .detail-idea, #stage-prelaunch:checked ~ .stage-preview .detail-prelaunch, #stage-live:checked ~ .stage-preview .detail-live, #stage-scale:checked ~ .stage-preview .detail-scale) .strip-tens {
    animation: runway-tick 60s steps(6) infinite;
  }
  .stage-preview:not([data-reveal-state="pending"]) :is(#stage-idea:checked ~ .stage-preview .detail-idea, #stage-prelaunch:checked ~ .stage-preview .detail-prelaunch, #stage-live:checked ~ .stage-preview .detail-live, #stage-scale:checked ~ .stage-preview .detail-scale) .strip-minutes {
    animation: runway-tick 600s steps(10) infinite;
  }
}

@keyframes runway-fill {
  from {
    stroke-dashoffset: 100;
  }
}

@keyframes runway-tick {
  to {
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes runway-pulse {
  0% {
    opacity: .5;
    transform: scale(.6);
  }
  80%,
  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}

@keyframes stage-in {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
}

@keyframes stage-item {
  from {
    opacity: 0;
    transform: translate3d(-6px, 0, 0);
  }
}

@keyframes stage-note {
  from {
    opacity: 0;
    transform: rotate(-12deg) translate3d(6px, 4px, 0);
  }
}

@keyframes stage-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes stage-fade {
  from {
    opacity: 0;
  }
}

@keyframes stage-pop {
  from {
    opacity: 0;
    transform: scale(.2);
  }
}

@media (max-width: 1150px) {
  .stage-picker {
    gap: 30px;
  }
  .stage-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .stage-picker {
    grid-template-columns: 1fr;
  }
  .stage-options {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .stage-options label {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 700px) {
  .stages-section {
    padding-block: 40px 48px;
  }
  .stage-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px;
  }
  .stage-options label {
    min-height: 0;
    gap: 10px;
    padding: 14px 13px;
  }
  .stage-options strong {
    font-size: 14px;
  }
  .stage-options small {
    font-size: 12px;
  }
  .stage-preview {
    min-height: 0;
    padding: 22px 18px 18px;
  }
}

@media (max-width: 520px) {
  .stage-detail {
    grid-template-columns: 1fr;
    grid-template-areas:
      "headline"
      "steps"
      "visual";
  }
  .stage-visual {
    min-height: 0;
    margin-top: 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 14px;
  }
  .stage-annotation {
    align-self: center;
    margin: 0;
  }
  .stage-note {
    font-size: 17px;
    transform: rotate(-5deg);
  }
  .stage-arrow {
    display: none;
  }
  .stage-trend {
    margin: 0;
  }
  .stage-waitlist-row {
    flex-direction: column;
  }
}

@media (max-width: 359px) {
  .stage-options label {
    padding: 12px 10px;
  }
  .stage-icon {
    width: 36px;
    height: 36px;
  }
  .stage-icon .icon {
    width: 21px;
    height: 21px;
  }
}

/* Section: brand_studio. Rendered by crates/web/src/sections/brand_studio/; only that section's
   styles live here.

   Tabs, colours, voices, languages and content rules are native radios and checkboxes; this file
   reads them with :has(:checked), so the studio works without WebAssembly. The island adds the
   retyped headline and the data-morph attribute that replays the preview's re-render animation. */

.product-section {
  --studio-line: #e5e6ea;
  --studio-soft: #f7f7f8;
  --studio-focus: #dfe7f3;
  --studio-shadow: 0 1px 2px #101a280a, 0 22px 46px -30px #101a2840;
  /* The preview's accent follows the checked brand colour (Signal green by default). */
  --brand-accent: #1f4a8a;
  --brand-on-accent: #fff;
  --brand-tint: #e5ebf4;
  background:
    radial-gradient(900px 340px at 82% 0%, #eef2f7 0%, transparent 70%),
    linear-gradient(180deg, #f8f8f9, #fbfcfd);
  border-block: 1px solid #e9eaed;
  padding-block: 64px 76px;
}

.product-section:has(#brand-color-navy:checked) {
  --brand-accent: #2f4b7c;
  --brand-on-accent: #fff;
  --brand-tint: #e7edf7;
}

.product-section:has(#brand-color-caramel:checked) {
  --brand-accent: #d79a5b;
  --brand-on-accent: #3b2410;
  --brand-tint: #fbefe2;
}

.product-section:has(#brand-color-sand:checked) {
  --brand-accent: #f0d2a4;
  --brand-on-accent: #57391a;
  --brand-tint: #fcf4e8;
}

.product-section:has(#brand-color-mist:checked) {
  --brand-accent: #dfe3e8;
  --brand-on-accent: #292d37;
  --brand-tint: #f2f3f4;
}

.product-section [hidden] {
  display: none !important;
}

/* Heading row: copy on the left, the handwritten note on the right. */
.product-section .brand-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 24px;
  margin-bottom: 26px;
}

.product-section .brand-heading .section-heading {
  margin-bottom: 0;
}

.product-section .brand-heading .section-description {
  max-width: 560px;
}

.product-section .brand-note {
  position: relative;
  width: 290px;
  margin: 18px 5% 0 0;
  transform: rotate(-4deg);
  font-family: "Bradley Hand", "Segoe Print", "Ink Free", "Noteworthy", cursive;
  font-size: 23px;
  line-height: 1.32;
  color: #34445a;
  text-align: center;
}

.product-section .brand-note span {
  display: block;
}

.product-section .brand-note-arrow {
  position: absolute;
  left: -78px;
  top: 26px;
  width: 78px;
  height: 70px;
  fill: none;
  stroke: #e4a62d;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Workspace: studio card and live preview. */
.product-section .studio-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.product-section .brand-studio {
  display: grid;
  grid-template-columns: 204px minmax(0, 1fr);
  min-width: 0;
  min-height: 480px;
  background: #fff;
  border: 1px solid var(--studio-line);
  border-radius: 14px;
  box-shadow: var(--studio-shadow);
  overflow: hidden;
}

/* Tab rail. */
.product-section .studio-rail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  min-width: 0;
  padding: 18px 12px 14px;
  border-right: 1px solid var(--studio-line);
  background: linear-gradient(180deg, #fbfcfd, #f7f7f8);
}

.product-section .studio-tabs {
  display: grid;
  gap: 4px;
}

.product-section .studio-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 12px;
  border-radius: 9px;
  color: #646871;
  font-size: 14px;
  font-weight: 550;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}

.product-section .studio-tab .icon {
  width: 18px;
  height: 18px;
  color: #8f939c;
  transition: color .2s, transform .35s var(--motion-ease-out);
}

.product-section .studio-tab::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--green);
  transform: scaleY(0);
  transition: transform .35s var(--motion-ease-out);
}

.product-section .studio-tab:hover {
  background: #eff0f3;
  color: var(--ink);
}

.product-section .studio-tab:hover .icon {
  transform: scale(1.1);
}

.product-section .studio-tab:has(:checked) {
  background: #eaeef3;
  color: #12233d;
  font-weight: 650;
}

.product-section .studio-tab:has(:checked) .icon {
  color: var(--green);
}

.product-section .studio-tab:has(:checked)::before {
  transform: scaleY(1);
}

.product-section .studio-tab:has(:focus-visible),
.product-section .swatch:has(:focus-visible),
.product-section .chip:has(:focus-visible),
.product-section .switch-row:has(:focus-visible),
.product-section .rule-row:has(:focus-visible) {
  outline: 3px solid #124ea9;
  outline-offset: 2px;
}

.product-section .studio-workspace-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--studio-line);
  border-radius: 10px;
  background: #fff;
}

.product-section .workspace-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--brand-accent);
  color: var(--brand-on-accent);
  font-size: 13px;
  font-weight: 760;
  transition: background-color .45s, color .45s;
}

.product-section .studio-workspace-badge strong {
  display: block;
  font-size: 12.5px;
  letter-spacing: -.01em;
}

.product-section .studio-workspace-badge small {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
}

.product-section .studio-workspace-badge small i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #225bb0;
  box-shadow: 0 0 0 3px #225bb024;
}

/* Panels: only the checked tab's panel shows. */
.product-section .studio-panels {
  min-width: 0;
  padding: 22px 24px 24px;
}

.product-section .studio-panel {
  display: none;
  gap: 20px;
}

.product-section .brand-studio:has(#studio-tab-identity:checked) .panel-identity,
.product-section .brand-studio:has(#studio-tab-style:checked) .panel-style,
.product-section .brand-studio:has(#studio-tab-business:checked) .panel-business,
.product-section .brand-studio:has(#studio-tab-rules:checked) .panel-rules,
.product-section .brand-studio:has(#studio-tab-languages:checked) .panel-languages {
  display: grid;
}

.product-section .panel-intro h3 {
  font-size: 17px;
  letter-spacing: -.025em;
}

.product-section .panel-intro p {
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

.product-section .studio-field {
  min-width: 0;
}

.product-section .field-label {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* Brand colours. */
.product-section .swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.product-section .swatch {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px #0000001a;
  cursor: pointer;
  transition: transform .25s var(--motion-ease-out), box-shadow .25s;
}

.product-section .swatch .icon {
  width: 18px;
  height: 18px;
  color: #fff;
  stroke-width: 2.6;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .2s, transform .35s var(--motion-ease-out);
}

.product-section .swatch:hover {
  transform: translateY(-2px);
}

.product-section .swatch:has(:checked) {
  box-shadow: inset 0 0 0 1px #0000001a, 0 0 0 2px #fff, 0 0 0 4px #303540;
}

.product-section .swatch:has(:checked) .icon {
  opacity: 1;
  transform: none;
}

.product-section .swatch-navy { background: #2f4b7c; }
.product-section .swatch-caramel { background: linear-gradient(135deg, #e3ad74, #d39352); }
.product-section .swatch-sand { background: linear-gradient(135deg, #f6dcb4, #efcd9b); }
.product-section .swatch-mist { background: #e2e5e9; }
.product-section .swatch-green { background: linear-gradient(135deg, #4771b1, #2b5595); }

.product-section .swatch-caramel .icon,
.product-section .swatch-sand .icon,
.product-section .swatch-mist .icon {
  color: #303540;
}

.product-section .swatch-empty {
  background: #fff;
  box-shadow: none;
  border: 1.5px dashed #d8dbe0;
  cursor: default;
}

.product-section .swatch-empty:hover {
  transform: none;
}

/* Chips: writing voice and publishing languages. */
.product-section .voice-chips,
.product-section .language-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-section .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid #e1e2e6;
  border-radius: 9px;
  background: #fff;
  color: #4f535d;
  font-size: 13.5px;
  font-weight: 550;
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s, box-shadow .2s, transform .25s var(--motion-ease-out);
}

.product-section .chip:hover {
  border-color: #c6c9d0;
  transform: translateY(-1px);
}

.product-section .voice-chip:has(:checked) {
  border-color: #6f90c1;
  background: #eff3fa;
  color: #0f274a;
  font-weight: 650;
  box-shadow: 0 0 0 3px #e2e9f4;
}

.product-section .language-chip,
.product-section .language-add {
  gap: 7px;
  min-height: 36px;
  padding: 6px 11px 6px 9px;
  font-size: 13px;
}

.product-section .language-chips {
  gap: 6px;
}

.product-section .language-chip:not(:has(:checked)) {
  background: #f8f8f9;
  color: #9ea1a9;
  border-style: dashed;
}

.product-section .language-chip:not(:has(:checked)) .flag {
  filter: grayscale(1);
  opacity: .45;
}

.product-section .language-chip:has(:disabled) {
  cursor: default;
}

.product-section .flag {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  clip-path: circle(50%);
  transition: filter .25s, opacity .25s;
}

.product-section .language-add {
  border-style: dashed;
  color: #2557d6;
  font-weight: 650;
}

.product-section .language-add span {
  font-size: 17px;
  line-height: 1;
}

/* Text inputs share one look. */
.product-section .instructions,
.product-section .business-field input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e1e2e6;
  border-radius: 10px;
  background: #fbfcfd;
  color: #41454f;
  font: inherit;
  font-size: 14px;
  line-height: 1.6;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.product-section .instructions {
  display: block;
  min-height: 78px;
  resize: vertical;
  field-sizing: content;
}

.product-section .instructions:hover,
.product-section .business-field input:hover {
  border-color: #cccfd5;
}

.product-section .instructions:focus-visible,
.product-section .business-field input:focus-visible {
  outline: none;
  border-color: #6f90c1;
  background: #fff;
  box-shadow: 0 0 0 4px var(--studio-focus);
}

/* Switches: checkboxes and role="switch" buttons. */
.product-section .switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #d6d8dd;
  cursor: pointer;
  transition: background-color .25s;
}

.product-section .switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px #10121833;
  transition: transform .3s var(--motion-ease-out);
}

.product-section .switch:checked,
.product-section .switch[aria-checked="true"] {
  background: var(--green);
}

.product-section .switch:checked::before,
.product-section .switch[aria-checked="true"]::before {
  transform: translateX(16px);
}

.product-section .switch:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.product-section .switch:focus-visible {
  outline-offset: 3px;
}

/* Writing Style. */
.product-section .tone-scales {
  display: grid;
  gap: 12px;
}

.product-section .tone-scale {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 86px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #646871;
}

.product-section .tone-scale span:last-child {
  text-align: right;
}

.product-section .tone-scale input {
  width: 100%;
  accent-color: var(--green);
}

.product-section .switch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.product-section .switch-row,
.product-section .rule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--studio-line);
  border-radius: 10px;
  font-size: 13.5px;
  color: #41454f;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}

.product-section .switch-row:hover,
.product-section .rule-row:hover {
  border-color: #cccfd5;
  background: #fbfcfd;
}

.product-section .word-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.product-section .word-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.product-section .word-chips li {
  padding: 5px 10px;
  border-radius: 999px;
  background: #ecf0f6;
  color: #1d355a;
  font-size: 12.5px;
  font-weight: 600;
}

.product-section .word-chips-avoid li {
  background: #fbefef;
  color: #9b3a3a;
  text-decoration: line-through;
  text-decoration-color: #d58b8b;
}

/* Business Info. */
.product-section .source-badge {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  background: #ecf0f6;
  color: #1d355a;
  font-size: 12.5px;
  font-weight: 600;
}

.product-section .source-badge .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
}

.product-section .business-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

.product-section .business-field .field-label {
  margin-bottom: 6px;
  font-size: 12.5px;
  color: #646871;
}

.product-section .business-field input {
  padding-block: 9px;
}

/* Content Rules. */
.product-section .rule-list {
  display: grid;
  gap: 8px;
}

.product-section .rule-row strong {
  display: block;
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
}

.product-section .rule-row small {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--muted);
}

/* Publishing Languages. */
.product-section .language-rows {
  display: grid;
  border: 1px solid var(--studio-line);
  border-radius: 12px;
  overflow: hidden;
}

.product-section .language-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-top: 1px solid var(--studio-line);
  transition: background-color .25s;
}

.product-section .language-row:first-child {
  border-top: 0;
}

.product-section .language-row .flag {
  width: 22px;
  height: 22px;
}

.product-section .language-row[data-enabled="false"] {
  background: #fafbfc;
}

.product-section .language-row[data-enabled="false"] .flag {
  filter: grayscale(1);
  opacity: .45;
}

.product-section .language-row-name {
  min-width: 0;
}

.product-section .language-row-name strong {
  display: block;
  font-size: 14px;
}

.product-section .language-row-name small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--muted);
}

.product-section .language-status {
  font-size: 12px;
  font-weight: 650;
  color: #1d3c6b;
}

.product-section .language-row[data-enabled="false"] .language-status {
  color: #9ea1a9;
}

.product-section .language-preview {
  padding: 5px 10px;
  border: 1px solid #e1e2e6;
  border-radius: 7px;
  background: #fff;
  color: #4f535d;
  font-size: 12px;
  font-weight: 650;
  transition: border-color .2s, background-color .2s, color .2s;
}

.product-section .language-preview:hover:not(:disabled) {
  border-color: #bcbfc7;
}

.product-section .language-preview[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.product-section .language-preview:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.product-section .language-add-row {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px dashed #cccfd5;
  border-radius: 9px;
  background: #fff;
  color: #2557d6;
  font-size: 13.5px;
  font-weight: 650;
}

/* Live preview. */
.product-section .studio-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-top: -44px;
  background: #fff;
  border: 1px solid var(--studio-line);
  border-radius: 14px;
  box-shadow: 0 1px 2px #101a280a, 0 30px 60px -34px #101a284d;
  overflow: hidden;
}

.product-section .preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 14px;
}

.product-section .preview-head strong {
  font-size: 16px;
  letter-spacing: -.025em;
}

.product-section .preview-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eff2f6;
  color: #1d3c6b;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color .3s, color .3s;
}

.product-section .preview-status i {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #225bb0;
}

.product-section .preview-status[data-busy="true"] {
  background: #fff5df;
  color: #8a5a00;
}

.product-section .preview-status[data-busy="true"] i {
  background: #e7a31a;
}

.product-section .preview-browser {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  margin: 0 14px 14px;
  border: 1px solid var(--studio-line);
  border-radius: 11px;
  background: #fff;
  overflow: hidden;
}

.product-section .browser-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--studio-line);
  background: var(--studio-soft);
}

.product-section .browser-dots {
  display: flex;
  gap: 5px;
}

.product-section .browser-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #eea39c;
}

.product-section .browser-dots i:nth-child(2) {
  background: #f1cd7b;
}

.product-section .browser-dots i:nth-child(3) {
  background: #8ca7cf;
}

.product-section .browser-url {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  padding: 5px 10px;
  border: 1px solid #e7e9ec;
  border-radius: 7px;
  background: #fff;
  font-size: 12px;
  color: #7f838d;
  white-space: nowrap;
}

.product-section .browser-url .icon {
  width: 12px;
  height: 12px;
  margin-right: 6px;
  color: #2254a0;
}

.product-section .browser-path {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #41454f;
}

.product-section .preview-languages {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  padding: 10px 14px 0;
}

.product-section .preview-languages button {
  min-width: 34px;
  padding: 4px 8px;
  border: 1px solid #e5e6ea;
  border-radius: 6px;
  background: #fff;
  color: #70747d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  transition: background-color .2s, color .2s, border-color .2s;
}

.product-section .preview-languages button:hover {
  border-color: #bcbfc7;
  color: var(--ink);
}

.product-section .preview-languages button[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.product-section .preview-article {
  position: relative;
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) 36%;
  align-items: center;
  gap: 18px;
  padding: 12px 0 18px 20px;
  overflow: hidden;
}

.product-section .article-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.product-section .article-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}

.product-section .article-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--brand-tint);
  color: #41454f;
  font-weight: 650;
  transition: background-color .45s;
}

.product-section .article-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-accent);
  box-shadow: 0 0 0 1px #0000001a;
  transition: background-color .45s;
}

.product-section .article-title {
  display: grid;
  font-size: 21px;
  line-height: 1.24;
  font-weight: 760;
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
}

/* The invisible full title reserves the final height, so typing never shifts the layout. */
.product-section .title-ghost,
.product-section .title-typed {
  grid-area: 1 / 1;
}

.product-section .title-ghost {
  visibility: hidden;
}

.product-section .type-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -.14em;
  background: var(--brand-accent);
  opacity: 0;
}

.product-section .type-caret[data-active="true"] {
  opacity: 1;
}

.product-section .article-summary {
  font-size: 14px;
  line-height: 1.6;
  color: #5a5e68;
}

.product-section .article-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: 9px;
  background: var(--brand-accent);
  color: var(--brand-on-accent);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 10px 20px -12px var(--brand-accent);
  transition: background-color .45s, color .45s, box-shadow .45s;
}

.product-section .article-cta .icon {
  width: 16px;
  height: 16px;
  transition: transform .25s var(--motion-ease-out);
}

.product-section .article-cta:hover .icon {
  transform: translateX(3px);
}

.product-section .article-pricing {
  margin-top: -4px;
  font-size: 12px;
  color: #70747d;
}

.product-section .article-media {
  align-self: stretch;
  min-height: 230px;
  margin: 0;
  border-radius: 12px 0 0 12px;
  overflow: hidden;
  background: #ebecef;
}

.product-section .article-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 44% 50%;
}

.product-section .preview-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(100deg, transparent 25%, color-mix(in srgb, var(--brand-accent) 22%, transparent) 50%, transparent 75%);
}

/* Rules decide what the article contains. */
.product-section:has(#rule-cta:not(:checked)) .article-cta,
.product-section:has(#rule-cta:not(:checked)) .check-cta,
.product-section:has(#rule-pricing:not(:checked)) .article-pricing,
.product-section:has(#rule-pricing:not(:checked)) .check-pricing,
.product-section:has(#rule-claims:not(:checked)) .check-claims,
.product-section:has(#rule-competitors:not(:checked)) .check-competitors {
  display: none;
}

.product-section .brand-check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 11px 16px;
  border-top: 1px solid var(--studio-line);
  background: #fbfcfd;
  font-size: 12px;
}

.product-section .brand-check p {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #13366b;
  font-weight: 700;
}

.product-section .brand-check p .icon {
  width: 15px;
  height: 15px;
}

.product-section .brand-check ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: #636771;
}

.product-section .brand-check li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.product-section .brand-check li .icon {
  width: 13px;
  height: 13px;
  color: #2254a0;
  stroke-width: 2.4;
}

/* Motion: panel entrances, typing caret, and the re-render morph. Transform and opacity only. */
@media (prefers-reduced-motion: no-preference) {
  /* A panel's fields cascade in whenever its tab is chosen (display: none → grid restarts it). */
  .product-section .studio-panel > * {
    animation: studio-panel-in .5s var(--motion-ease-out) backwards;
  }
  .product-section .studio-panel > :nth-child(2) { animation-delay: 40ms; }
  .product-section .studio-panel > :nth-child(3) { animation-delay: 80ms; }
  .product-section .studio-panel > :nth-child(n+4) { animation-delay: 120ms; }

  .product-section .type-caret[data-active="true"] {
    animation: studio-caret .8s steps(1) infinite;
  }

  .product-section .preview-status[data-busy="true"] i {
    animation: studio-pulse 1s ease-in-out infinite;
  }

  .product-section .preview-article[data-morph="a"] .preview-sweep {
    animation: studio-sweep-a .9s var(--motion-ease-in-out);
  }
  .product-section .preview-article[data-morph="b"] .preview-sweep {
    animation: studio-sweep-b .9s var(--motion-ease-in-out);
  }

  .product-section .preview-article[data-morph="a"] :is(.article-meta, .article-summary, .article-cta, .article-pricing) {
    animation: studio-morph-a .6s var(--motion-ease-out) backwards;
  }
  .product-section .preview-article[data-morph="b"] :is(.article-meta, .article-summary, .article-cta, .article-pricing) {
    animation: studio-morph-b .6s var(--motion-ease-out) backwards;
  }
  .product-section .preview-article[data-morph] .article-summary { animation-delay: .12s; }
  .product-section .preview-article[data-morph] .article-cta { animation-delay: .22s; }
  .product-section .preview-article[data-morph] .article-pricing { animation-delay: .28s; }

  .product-section .preview-article[data-morph="a"] .article-media img {
    animation: studio-media-a .9s var(--motion-ease-out);
  }
  .product-section .preview-article[data-morph="b"] .article-media img {
    animation: studio-media-b .9s var(--motion-ease-out);
  }

  /* The studio's controls cascade in when the section scrolls into view. */
  .product-section .brand-studio[data-reveal-state="visible"] .studio-tab,
  .product-section .brand-studio[data-reveal-state="visible"] .panel-identity .swatch,
  .product-section .brand-studio[data-reveal-state="visible"] .panel-identity .chip {
    animation: studio-panel-in .6s var(--motion-ease-out) backwards;
  }
  .product-section .brand-studio[data-reveal-state="visible"] .studio-tab:nth-child(2) { animation-delay: .06s; }
  .product-section .brand-studio[data-reveal-state="visible"] .studio-tab:nth-child(3) { animation-delay: .12s; }
  .product-section .brand-studio[data-reveal-state="visible"] .studio-tab:nth-child(4) { animation-delay: .18s; }
  .product-section .brand-studio[data-reveal-state="visible"] .studio-tab:nth-child(5) { animation-delay: .24s; }
  .product-section .brand-studio[data-reveal-state="visible"] .swatch { animation-delay: .2s; }
  .product-section .brand-studio[data-reveal-state="visible"] .swatch:nth-child(2) { animation-delay: .24s; }
  .product-section .brand-studio[data-reveal-state="visible"] .swatch:nth-child(3) { animation-delay: .28s; }
  .product-section .brand-studio[data-reveal-state="visible"] .swatch:nth-child(4) { animation-delay: .32s; }
  .product-section .brand-studio[data-reveal-state="visible"] .swatch:nth-child(5) { animation-delay: .36s; }
  .product-section .brand-studio[data-reveal-state="visible"] .swatch:nth-child(n+6) { animation-delay: .4s; }
  .product-section .brand-studio[data-reveal-state="visible"] .chip { animation-delay: .34s; }
  .product-section .brand-studio[data-reveal-state="visible"] .chip:nth-child(2) { animation-delay: .38s; }
  .product-section .brand-studio[data-reveal-state="visible"] .chip:nth-child(3) { animation-delay: .42s; }
  .product-section .brand-studio[data-reveal-state="visible"] .chip:nth-child(n+4) { animation-delay: .46s; }

  .product-section .studio-preview[data-reveal-state="visible"] .article-media img {
    animation: studio-media-a 1.4s var(--motion-ease-out) .2s backwards;
  }
}

@keyframes studio-panel-in {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
}

@keyframes studio-caret {
  50% {
    opacity: 0;
  }
}

@keyframes studio-pulse {
  50% {
    opacity: .35;
    transform: scale(.75);
  }
}

/* Paired keyframes: switching between the a/b names restarts the animation. */
@keyframes studio-sweep-a {
  0% { opacity: 1; transform: translate3d(-100%, 0, 0); }
  100% { opacity: 1; transform: translate3d(100%, 0, 0); }
}
@keyframes studio-sweep-b {
  0% { opacity: 1; transform: translate3d(-100%, 0, 0); }
  100% { opacity: 1; transform: translate3d(100%, 0, 0); }
}
@keyframes studio-morph-a {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
}
@keyframes studio-morph-b {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
}
@keyframes studio-media-a {
  from { opacity: .55; transform: scale(1.06); }
}
@keyframes studio-media-b {
  from { opacity: .55; transform: scale(1.06); }
}

/* Responsive. */
@media (max-width: 1180px) {
  /* Stack the workspace; the note moves between the studio and the preview it points at. */
  .product-section .container {
    display: grid;
    gap: 22px;
  }
  .product-section .brand-heading,
  .product-section .studio-workspace {
    display: contents;
  }
  .product-section .brand-heading > :first-child {
    order: 1;
  }
  .product-section .brand-studio {
    order: 2;
  }
  .product-section .brand-note {
    order: 3;
    justify-self: end;
    margin: 4px 8% -6px 0;
  }
  .product-section .studio-preview {
    order: 4;
    margin-top: 0;
  }
  .product-section .preview-article {
    grid-template-columns: minmax(0, 1fr) 40%;
  }
}

@media (max-width: 900px) {
  .product-section {
    padding-block: 48px 56px;
  }
  .product-section .brand-studio {
    grid-template-columns: 190px minmax(0, 1fr);
  }
  .product-section .studio-tab {
    font-size: 13px;
    padding: 11px 10px;
  }
}

@media (max-width: 700px) {
  .product-section {
    padding-block: 40px 48px;
  }
  .product-section .container {
    gap: 18px;
  }
  .product-section .brand-studio {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .product-section .studio-rail {
    padding: 10px;
    border-right: 0;
    border-bottom: 1px solid var(--studio-line);
  }
  .product-section .studio-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin: -2px;
    padding: 2px;
  }
  .product-section .studio-tabs::-webkit-scrollbar {
    display: none;
  }
  .product-section .studio-tab {
    flex-shrink: 0;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid transparent;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  .product-section .studio-tab .icon {
    width: 16px;
    height: 16px;
  }
  .product-section .studio-tab::before {
    display: none;
  }
  .product-section .studio-tab:has(:checked) {
    border-color: #bfcde2;
  }
  .product-section .studio-workspace-badge {
    display: none;
  }
  .product-section .studio-panels {
    padding: 18px 16px 20px;
  }
  .product-section .swatches {
    gap: 8px;
  }
  .product-section .swatch-empty:last-child {
    display: none;
  }
  .product-section .section-heading h2 br {
    display: none;
  }
  .product-section .swatch {
    width: 40px;
    height: 40px;
  }
  .product-section .chip {
    min-height: 38px;
    padding: 7px 12px;
    font-size: 13.5px;
  }
  .product-section .switch-grid,
  .product-section .word-lists,
  .product-section .business-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .product-section .tone-scale {
    grid-template-columns: 64px minmax(0, 1fr) 76px;
    gap: 8px;
    font-size: 12px;
  }
  .product-section .language-row {
    grid-template-columns: 22px minmax(0, 1fr) auto auto;
    gap: 10px;
    padding: 10px 12px;
  }
  .product-section .language-status {
    display: none;
  }
  .product-section .brand-note {
    width: auto;
    margin: 0 0 -4px;
    justify-self: center;
    font-size: 20px;
    transform: rotate(-3deg);
  }
  .product-section .brand-note-arrow {
    left: auto;
    right: -46px;
    top: 30px;
    width: 52px;
    height: 48px;
    transform: scaleX(-1);
  }
  .product-section .preview-head {
    padding: 14px 14px 12px;
  }
  .product-section .preview-browser {
    margin: 0 10px 10px;
  }
  .product-section .preview-article {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 12px 14px 16px;
  }
  .product-section .article-media {
    order: -1;
    min-height: 0;
    aspect-ratio: 2 / 1;
    border-radius: 10px;
  }
  .product-section .article-title {
    font-size: 19px;
  }
}

@media (max-width: 370px) {
  .product-section .swatch-empty {
    display: none;
  }
  .product-section .brand-note {
    font-size: 18px;
  }
  .product-section .brand-note-arrow {
    display: none;
  }
  .product-section .swatch {
    width: 36px;
    height: 36px;
  }
  .product-section .browser-dots {
    display: none;
  }
  .product-section .preview-status {
    font-size: 11px;
  }
}

/* Section: keyword_explorer. Rendered by crates/web/src/sections/keyword_explorer/; only that
   section's styles live here. The column sits in the planning row (public/css/pages/home.css). */

.keyword-explorer {
  /* Layout follows the column's width (container queries below), not the viewport. */
  container: keywords / inline-size;
  --kw-line: #eeeff1;
  --kw-border: #e1e2e6;
  --kw-focus: #dfe7f3;
  --kw-easy: #134795;
  --kw-medium: #c08408;
  --kw-hard: #e0701c;
  min-width: 0;
  scroll-margin-top: 100px;
}

.keyword-explorer [hidden] {
  display: none !important;
}

.keyword-explorer .keyword-card {
  padding: 16px 16px 12px;
  border-radius: 14px;
  box-shadow: 0 1px 2px #101a280a, 0 22px 46px -30px #101a2840;
}

/* Search and filters. */
.keyword-explorer .keyword-controls {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 6px;
}

.keyword-explorer .keyword-search {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  height: 42px;
  padding: 0 8px 0 12px;
  border: 1px solid var(--kw-border);
  border-radius: 9px;
  background: #fff;
  cursor: text;
  transition: border-color .2s, box-shadow .2s;
}

.keyword-explorer .keyword-search:hover {
  border-color: #cccfd5;
}

.keyword-explorer .keyword-search:focus-within {
  border-color: #6f90c1;
  box-shadow: 0 0 0 4px var(--kw-focus);
}

.keyword-explorer .keyword-search .icon {
  width: 16px;
  height: 16px;
  color: #8e929c;
}

.keyword-explorer .keyword-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
}

.keyword-explorer .keyword-search input::placeholder {
  color: #9b9ea6;
}

.keyword-explorer .keyword-search input:focus-visible {
  outline: none;
}

.keyword-explorer .keyword-add-hint {
  flex-shrink: 0;
  padding: 4px 7px;
  border: 1px solid #cfd9e9;
  border-radius: 6px;
  background: #eef2f8;
  color: #1d3c6b;
  font: 650 11px/1 inherit;
  white-space: nowrap;
}

.keyword-explorer .keyword-filter {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.keyword-explorer .keyword-filter select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 32px 0 13px;
  border: 1px solid var(--kw-border);
  border-radius: 9px;
  background: #fff;
  color: #41454f;
  font: inherit;
  font-size: 13.5px;
  font-weight: 550;
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}

.keyword-explorer .keyword-filter select:hover {
  border-color: #cccfd5;
}

.keyword-explorer .keyword-filter .icon {
  position: absolute;
  right: 11px;
  width: 13px;
  height: 13px;
  color: #8e929c;
  transform: rotate(90deg);
  pointer-events: none;
}

.keyword-explorer .keyword-filter[data-active="true"] select {
  border-color: #6f90c1;
  background: #eff3fa;
  color: #0f274a;
}

/* Table. */
.keyword-explorer .keyword-table-wrap {
  margin-inline: -4px;
}

.keyword-explorer .keyword-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.keyword-explorer .keyword-table th,
.keyword-explorer .keyword-table td {
  padding: 10px 4px;
  border-bottom: 1px solid var(--kw-line);
  text-align: left;
  white-space: nowrap;
}

.keyword-explorer .keyword-table thead th {
  padding-block: 10px 9px;
  font-size: 12px;
  font-weight: 650;
  color: #41454f;
}

.keyword-explorer .keyword-table thead th:not(.col-keyword):not(.keyword-select),
.keyword-explorer .keyword-table td.kw-metric,
.keyword-explorer .keyword-table td[data-label="Intent"] {
  text-align: center;
}

.keyword-explorer .sort-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  white-space: nowrap;
  transition: color .2s;
}

.keyword-explorer .sort-button:hover {
  color: var(--ink);
}

.keyword-explorer .sort-arrows {
  width: 7px;
  height: 11px;
  fill: none;
  stroke: #b9bcc3;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.keyword-explorer .sort-button[data-direction="ascending"] .sort-up,
.keyword-explorer .sort-button[data-direction="descending"] .sort-down {
  stroke: var(--green);
  stroke-width: 2;
}

.keyword-explorer .keyword-select {
  width: 32px;
  padding-left: 8px !important;
}

.keyword-explorer .keyword-table input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid #c9ccd2;
  border-radius: 5px;
  background: #fff;
  transition: background-color .15s, border-color .15s, transform .2s var(--motion-ease-out);
}

.keyword-explorer .keyword-table input[type="checkbox"]:hover {
  border-color: #959aa6;
}

.keyword-explorer .keyword-table input[type="checkbox"]::after {
  content: "";
  width: 5px;
  height: 9px;
  margin-top: -2px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .2s var(--motion-ease-out);
}

.keyword-explorer .keyword-table input[type="checkbox"]:checked,
.keyword-explorer .keyword-table input[type="checkbox"]:indeterminate {
  border-color: var(--green);
  background: var(--green);
}

.keyword-explorer .keyword-table input[type="checkbox"]:checked::after {
  transform: rotate(45deg) scale(1);
}

.keyword-explorer .keyword-table input[type="checkbox"]:indeterminate::after {
  width: 8px;
  height: 0;
  margin-top: 0;
  border-width: 0 0 2px;
  transform: none;
}

.keyword-explorer .keyword-table input[type="checkbox"]:active {
  transform: scale(.9);
}

.keyword-explorer .keyword-table tbody tr {
  transition: background-color .2s;
}

.keyword-explorer .keyword-table tbody tr:hover {
  background: #f9f9f9;
}

.keyword-explorer .keyword-table tbody tr[data-selected="true"] {
  background: #f0f3f8;
}

.keyword-explorer .keyword-term {
  font-weight: 600;
  white-space: normal !important;
  line-height: 1.3;
}

.keyword-explorer .keyword-term label {
  cursor: pointer;
  color: var(--ink);
}

.keyword-explorer .keyword-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 7px;
  padding: 2px 6px;
  border-radius: 5px;
  background: #fff3d6;
  color: #8a5a00;
  font-size: 10.5px;
  font-weight: 700;
  vertical-align: 1px;
}

.keyword-explorer .keyword-planned {
  background: #e7edf5;
  color: #13366b;
}

.keyword-explorer .keyword-planned .icon {
  width: 11px;
  height: 11px;
}

.keyword-explorer .intent-pill {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.keyword-explorer .intent-pill[data-intent="commercial"] {
  background: #e9f0ff;
  color: #2357c9;
}

.keyword-explorer .intent-pill[data-intent="informational"] {
  background: #efecff;
  color: #5b45c8;
}

/* Difficulty: the score in a tinted pill with a meter along its foot. */
.keyword-explorer .difficulty {
  position: relative;
  display: inline-grid;
  min-width: 42px;
  padding: 3px 8px 6px;
  border-radius: 6px;
  text-align: center;
}

.keyword-explorer .difficulty b {
  font-weight: 700;
}

.keyword-explorer .difficulty[data-band="easy"] {
  background: #e8eef6;
  color: var(--kw-easy);
}

.keyword-explorer .difficulty[data-band="medium"] {
  background: #fdf3dc;
  color: var(--kw-medium);
}

.keyword-explorer .difficulty[data-band="hard"] {
  background: #fff0e4;
  color: var(--kw-hard);
}

.keyword-explorer .difficulty > i {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, currentColor 18%, transparent);
  overflow: hidden;
}

.keyword-explorer .difficulty > i > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  transform: scaleX(var(--meter, 0));
  transform-origin: left;
}

.keyword-explorer .difficulty[data-meter="1"] { --meter: .05; }
.keyword-explorer .difficulty[data-meter="2"] { --meter: .1; }
.keyword-explorer .difficulty[data-meter="3"] { --meter: .15; }
.keyword-explorer .difficulty[data-meter="4"] { --meter: .2; }
.keyword-explorer .difficulty[data-meter="5"] { --meter: .25; }
.keyword-explorer .difficulty[data-meter="6"] { --meter: .3; }
.keyword-explorer .difficulty[data-meter="7"] { --meter: .35; }
.keyword-explorer .difficulty[data-meter="8"] { --meter: .4; }
.keyword-explorer .difficulty[data-meter="9"] { --meter: .45; }
.keyword-explorer .difficulty[data-meter="10"] { --meter: .5; }
.keyword-explorer .difficulty[data-meter="11"] { --meter: .55; }
.keyword-explorer .difficulty[data-meter="12"] { --meter: .6; }
.keyword-explorer .difficulty[data-meter="13"] { --meter: .65; }
.keyword-explorer .difficulty[data-meter="14"] { --meter: .7; }
.keyword-explorer .difficulty[data-meter="15"] { --meter: .75; }
.keyword-explorer .difficulty[data-meter="16"] { --meter: .8; }
.keyword-explorer .difficulty[data-meter="17"] { --meter: .85; }
.keyword-explorer .difficulty[data-meter="18"] { --meter: .9; }
.keyword-explorer .difficulty[data-meter="19"] { --meter: .95; }
.keyword-explorer .difficulty[data-meter="20"] { --meter: 1; }

.keyword-explorer .keyword-rank {
  font-weight: 700;
  color: var(--ink);
}

.keyword-explorer .keyword-rank[data-ranked="false"] {
  color: #abaeb5;
  font-weight: 500;
}

.keyword-explorer .opportunity-pill {
  display: inline-block;
  min-width: 62px;
  padding: 4px 8px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.keyword-explorer .opportunity-pill[data-opportunity="high"] {
  background: #e4ebf5;
  color: #12428a;
}

.keyword-explorer .opportunity-pill[data-opportunity="medium"] {
  background: #fff1cf;
  color: #a06a00;
}

.keyword-explorer .opportunity-pill[data-opportunity="low"] {
  background: #f1f2f3;
  color: #6d7078;
}

/* A keyword the visitor added shows a skeleton while it is "analyzed". */
.keyword-explorer .keyword-table tr[data-analyzing="true"] :is(.kw-metric, td[data-label="Intent"]) > * {
  visibility: hidden;
}

.keyword-explorer .keyword-table tr[data-analyzing="true"] :is(.kw-metric, td[data-label="Intent"]) {
  position: relative;
}

.keyword-explorer .keyword-table tr[data-analyzing="true"] :is(.kw-metric, td[data-label="Intent"])::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60%;
  max-width: 64px;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, #e1e3e7 0%, #f2f3f5 50%, #e1e3e7 100%) 0 0 / 200% 100%;
  transform: translate(-50%, -50%);
}

.keyword-explorer .keyword-empty td {
  padding: 26px 10px;
  text-align: center;
  white-space: normal;
}

.keyword-explorer .keyword-empty p {
  font-size: 13.5px;
  color: var(--muted);
}

.keyword-explorer .keyword-empty-action {
  margin-top: 10px;
  padding: 8px 14px;
  border: 1px solid #cfd9e9;
  border-radius: 8px;
  background: #eef2f8;
  color: #13366b;
  font-weight: 700;
  font-size: 13px;
}

/* Footer: selection status, plan action, expand. */
.keyword-explorer .keyword-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 2px 2px;
}

.keyword-explorer .keyword-status {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 6px;
  min-width: 170px;
  font-size: 13px;
  color: var(--muted);
}

.keyword-explorer .keyword-status .icon {
  display: none;
  width: 15px;
  height: 15px;
  stroke-width: 2.4;
}

.keyword-explorer .keyword-status[data-notice="true"] {
  color: #13366b;
  font-weight: 650;
}

.keyword-explorer .keyword-status[data-notice="true"] .icon {
  display: block;
}

.keyword-explorer .keyword-plan {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 13px;
  border-radius: 8px;
  background: var(--deep);
  color: #fff;
  font-size: 13px;
  font-weight: 650;
  box-shadow: 0 8px 16px -10px #002863;
  transition: background-color .2s, color .2s, box-shadow .2s, transform .2s;
}

.keyword-explorer .keyword-plan .icon {
  width: 15px;
  height: 15px;
}

.keyword-explorer .keyword-plan:hover:not(:disabled) {
  background: #083476;
  transform: translateY(-1px);
}

.keyword-explorer .keyword-plan:disabled {
  background: #eff0f2;
  color: #9ea1a9;
  box-shadow: none;
  cursor: not-allowed;
}

.keyword-explorer .keyword-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 2px;
  background: none;
  color: var(--green);
  font-size: 13.5px;
  font-weight: 700;
}

.keyword-explorer .keyword-more .icon {
  width: 15px;
  height: 15px;
  transition: transform .25s var(--motion-ease-out);
}

.keyword-explorer .keyword-more:hover .icon {
  transform: translateX(3px);
}

.keyword-explorer .keyword-more[aria-expanded="true"] .icon {
  transform: rotate(-90deg);
}

/* Motion: rows cascade in on reveal and after every sort or filter; meters fill on reveal. */
.keyword-explorer .keyword-table tbody tr:nth-child(2) { --kw-row: 1; }
.keyword-explorer .keyword-table tbody tr:nth-child(3) { --kw-row: 2; }
.keyword-explorer .keyword-table tbody tr:nth-child(4) { --kw-row: 3; }
.keyword-explorer .keyword-table tbody tr:nth-child(5) { --kw-row: 4; }
.keyword-explorer .keyword-table tbody tr:nth-child(6) { --kw-row: 5; }
.keyword-explorer .keyword-table tbody tr:nth-child(7) { --kw-row: 6; }
.keyword-explorer .keyword-table tbody tr:nth-child(n+8) { --kw-row: 7; }

@media (prefers-reduced-motion: no-preference) {
  .keyword-explorer .keyword-card[data-reveal-state="visible"] tbody tr {
    animation: kw-row-a .6s var(--motion-ease-out) backwards;
    animation-delay: calc(.15s + var(--kw-row, 0) * 60ms);
  }

  .keyword-explorer .keyword-card[data-reveal-state="visible"] .difficulty > i > i {
    animation: kw-meter 1.2s var(--motion-ease-out) backwards;
    animation-delay: calc(.45s + var(--kw-row, 0) * 70ms);
  }

  .keyword-explorer .keyword-table tbody[data-shuffle="a"] tr {
    animation: kw-row-a .4s var(--motion-ease-out) backwards;
    animation-delay: calc(var(--kw-row, 0) * 30ms);
  }
  .keyword-explorer .keyword-table tbody[data-shuffle="b"] tr {
    animation: kw-row-b .4s var(--motion-ease-out) backwards;
    animation-delay: calc(var(--kw-row, 0) * 30ms);
  }
  .keyword-explorer .keyword-table tbody[data-shuffle] .difficulty > i > i {
    animation: kw-meter .8s var(--motion-ease-out) backwards;
    animation-delay: calc(.1s + var(--kw-row, 0) * 30ms);
  }

  .keyword-explorer .keyword-table tr[data-analyzing="true"] :is(.kw-metric, td[data-label="Intent"])::after {
    animation: kw-shimmer 1s linear infinite;
  }

  .keyword-explorer .keyword-table tr[data-origin="visitor"][data-analyzing="false"] :is(.kw-metric, td[data-label="Intent"]) > * {
    animation: kw-row-a .45s var(--motion-ease-out) backwards;
  }

  .keyword-explorer .keyword-status[data-notice="true"] .icon {
    animation: kw-pop .5s var(--motion-ease-out);
  }
}

@keyframes kw-row-a {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
}
@keyframes kw-row-b {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
}
@keyframes kw-meter {
  from { transform: scaleX(0); }
}
@keyframes kw-shimmer {
  to { background-position: -200% 0; }
}
@keyframes kw-pop {
  0% { transform: scale(.4); opacity: 0; }
  60% { transform: scale(1.2); opacity: 1; }
}

/* Responsive, by column width. */
@container keywords (max-width: 640px) {
  .keyword-explorer .keyword-filter select {
    padding-inline: 11px 28px;
    font-size: 13px;
  }
  .keyword-explorer .keyword-filter .icon {
    right: 9px;
  }
  .keyword-explorer .keyword-table {
    font-size: 13px;
  }
  .keyword-explorer .keyword-table th,
  .keyword-explorer .keyword-table td {
    padding-inline: 4px;
  }
  .keyword-explorer .opportunity-pill {
    min-width: 0;
  }
}

/* Narrow columns: rows become two-line cards (term and opportunity, then the metrics). */
@container keywords (max-width: 560px) {
  .keyword-explorer .keyword-card {
    padding: 12px 12px 10px;
  }
  .keyword-explorer .keyword-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .keyword-explorer .keyword-search {
    grid-column: 1 / -1;
  }
  .keyword-explorer .keyword-filter select {
    width: 100%;
  }
  .keyword-explorer .keyword-table-wrap {
    margin-inline: 0;
  }
  .keyword-explorer .keyword-table,
  .keyword-explorer .keyword-table tbody {
    display: block;
  }
  .keyword-explorer .keyword-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .keyword-explorer .keyword-table tbody tr {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 50px 46px 40px;
    align-items: center;
    gap: 9px 8px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--kw-line);
  }
  .keyword-explorer .keyword-table tbody :is(td, th) {
    padding: 0 !important;
    border: 0;
  }
  .keyword-explorer .keyword-table tbody .keyword-select {
    grid-area: 1 / 1;
    width: auto;
  }
  .keyword-explorer .keyword-table tbody .keyword-term {
    grid-area: 1 / 2 / 2 / 5;
    min-width: 0;
    white-space: normal;
  }
  .keyword-explorer .keyword-table tbody td[data-label="Opportunity"] {
    grid-area: 1 / 5;
    justify-self: end;
  }
  .keyword-explorer .keyword-table tbody td[data-label="Intent"] {
    grid-area: 2 / 2;
    min-width: 0;
    text-align: left;
  }
  .keyword-explorer .keyword-table tbody td[data-label="Volume/mo"] { grid-area: 2 / 3; }
  .keyword-explorer .keyword-table tbody td[data-label="Difficulty"] { grid-area: 2 / 4; }
  .keyword-explorer .keyword-table tbody td[data-label="Your Rank"] { grid-area: 2 / 5; }
  .keyword-explorer .keyword-table tbody td.kw-metric::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 10px;
    font-weight: 600;
    color: #8e929c;
  }
  .keyword-explorer .keyword-table tbody td.kw-metric[data-label="Opportunity"]::before {
    content: none;
  }
  .keyword-explorer .keyword-table tbody td.kw-metric[data-label="Volume/mo"]::before {
    content: "Volume";
  }
  .keyword-explorer .keyword-table tbody td.kw-metric[data-label="Difficulty"]::before {
    content: "Diff.";
  }
  .keyword-explorer .keyword-table tbody td.kw-metric[data-label="Your Rank"]::before {
    content: "Rank";
  }
  .keyword-explorer .keyword-table tbody .kw-metric {
    text-align: center;
  }
  .keyword-explorer .intent-pill {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    font-size: 11.5px;
    padding-inline: 6px;
  }
  .keyword-explorer .difficulty {
    min-width: 0;
    width: 100%;
    padding-inline: 4px;
  }
  .keyword-explorer .opportunity-pill {
    padding: 3px 9px;
    font-size: 12px;
  }
  .keyword-explorer .keyword-empty {
    display: block !important;
  }
  .keyword-explorer .keyword-empty[hidden] {
    display: none !important;
  }
  .keyword-explorer .keyword-empty td {
    display: block;
  }
  .keyword-explorer .keyword-footer {
    gap: 8px;
  }
  .keyword-explorer .keyword-status {
    flex-basis: 100%;
  }
}

@container keywords (max-width: 330px) {
  .keyword-explorer .keyword-table tbody tr {
    grid-template-columns: 22px minmax(0, 1fr) 42px 42px 32px;
    column-gap: 6px;
  }
  .keyword-explorer .keyword-filter select {
    padding-inline: 9px 24px;
    font-size: 12.5px;
  }
  .keyword-explorer .keyword-filter .icon {
    right: 7px;
  }
}

/* Section: calendar. Rendered by crates/web/src/sections/calendar/; only that section's styles live
   here. The column sits in the planning row (public/css/pages/home.css). */

.publishing-calendar {
  /* Layout follows the column's width (container queries below), not the viewport. */
  container: calendar / inline-size;
  --status-published: #17a36b;
  --status-writing: #e6a01a;
  --status-scheduled: #3d7fe6;
  --status-idea: #9296a1;
  --cal-line: #eeeff1;
  min-width: 0;
  scroll-margin-top: 100px;
}

.publishing-calendar [hidden] {
  display: none !important;
}

.publishing-calendar [data-status="published"] { --status: var(--status-published); --status-tint: #e3f5ec; --status-ink: #0f7a4d; }
.publishing-calendar [data-status="writing"] { --status: var(--status-writing); --status-tint: #fdf2d9; --status-ink: #8f5f00; }
.publishing-calendar [data-status="scheduled"] { --status: var(--status-scheduled); --status-tint: #e7effd; --status-ink: #2459b8; }
.publishing-calendar [data-status="idea"] { --status: var(--status-idea); --status-tint: #f0f1f2; --status-ink: #5a5e67; }

.publishing-calendar .calendar-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 176px;
  grid-template-areas:
    "card side"
    "detail detail";
  align-items: start;
  gap: 12px;
}

.publishing-calendar .calendar-card,
.publishing-calendar .calendar-tools,
.publishing-calendar .calendar-detail {
  border-radius: 14px;
  box-shadow: 0 1px 2px #101a280a, 0 22px 46px -30px #101a2840;
}

.publishing-calendar .calendar-card {
  grid-area: card;
  min-width: 0;
  padding: 12px 14px 34px;
}

.publishing-calendar .calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0 10px;
}

.publishing-calendar .calendar-head strong {
  font-size: 15px;
  letter-spacing: -.02em;
}

.publishing-calendar .calendar-nav {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: none;
  color: #5b5f69;
  transition: background-color .2s, color .2s;
}

.publishing-calendar .calendar-nav:first-child .icon {
  transform: rotate(180deg);
}

.publishing-calendar .calendar-nav .icon {
  width: 17px;
  height: 17px;
}

.publishing-calendar .calendar-nav:hover:not(:disabled) {
  background: #f2f3f5;
  color: var(--ink);
}

.publishing-calendar .calendar-nav:disabled {
  opacity: .3;
  cursor: default;
}

.publishing-calendar .calendar-weekdays,
.publishing-calendar .calendar-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.publishing-calendar .calendar-weekdays {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--cal-line);
  margin-bottom: 4px;
  font-size: 11.5px;
  font-weight: 550;
  color: #8e929c;
  text-align: center;
}

.publishing-calendar .calendar-grid {
  overflow: hidden;
}

.publishing-calendar .calendar-month {
  display: grid;
  gap: 2px;
}

.publishing-calendar .calendar-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 46px;
  padding: 0;
  border-radius: 9px;
  background: none;
  color: #303540;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color .2s, color .2s, box-shadow .2s;
}

.publishing-calendar .calendar-day i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  transition: background-color .45s, transform .45s var(--motion-ease-out);
}

.publishing-calendar .calendar-day[data-status] i {
  background: var(--status);
}

.publishing-calendar .calendar-day[data-status] span {
  color: var(--status-ink);
}

.publishing-calendar button.calendar-day:hover {
  background: #f4f5f7;
}

.publishing-calendar .calendar-day[aria-pressed="true"] {
  background: var(--status-tint, #eef1f6);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--status, #6f90c1) 55%, #fff);
}

.publishing-calendar .calendar-day[data-featured="true"] i {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status) 22%, transparent);
}

.publishing-calendar .calendar-day-outside {
  color: #cacdd2;
  font-weight: 500;
}

/* Side column: tools and legend, then the selected day. */
.publishing-calendar .calendar-side {
  grid-area: side;
  display: grid;
  gap: 12px;
  min-width: 0;
}

.publishing-calendar .calendar-tools {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.publishing-calendar .calendar-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  border-radius: 9px;
  background: var(--deep);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 10px 20px -12px #002863;
  transition: background-color .2s, transform .2s, box-shadow .2s;
}

.publishing-calendar .calendar-add span {
  font-size: 18px;
  line-height: 1;
}

.publishing-calendar .calendar-add:hover:not(:disabled) {
  background: #083476;
  transform: translateY(-1px);
}

.publishing-calendar .calendar-add:disabled {
  background: #eff0f2;
  color: #9ea1a9;
  box-shadow: none;
  cursor: not-allowed;
}

.publishing-calendar .calendar-autopilot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid #e5e6ea;
  border-radius: 9px;
  background: #fff;
  color: #41454f;
  font-size: 12.5px;
  font-weight: 650;
  transition: border-color .2s, background-color .2s;
}

.publishing-calendar .calendar-autopilot:hover {
  border-color: #cccfd5;
}

.publishing-calendar .calendar-autopilot i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b9bcc3;
}

.publishing-calendar .calendar-autopilot small {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  color: #8e929c;
}

.publishing-calendar .calendar-autopilot[aria-pressed="true"] {
  border-color: #bfcde2;
  background: #f1f4f9;
}

.publishing-calendar .calendar-autopilot[aria-pressed="true"] i {
  background: #174fa3;
  box-shadow: 0 0 0 3px #174fa326;
}

.publishing-calendar .calendar-autopilot[aria-pressed="true"] small {
  color: #13366b;
}

.publishing-calendar .calendar-legend {
  display: grid;
  gap: 9px;
  padding: 2px 2px 2px 4px;
  font-size: 13px;
  color: #4f535d;
}

.publishing-calendar .calendar-legend li {
  display: flex;
  align-items: center;
  gap: 9px;
}

.publishing-calendar .calendar-legend i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--status);
}

.publishing-calendar .calendar-legend b {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: #8e929c;
  font-variant-numeric: tabular-nums;
}

/* The selected day's article: a popover overlapping the foot of the calendar. */
.publishing-calendar .calendar-detail {
  grid-area: detail;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 16px;
  margin: -40px 0 0 12%;
  padding: 14px 16px;
  box-shadow: 0 1px 2px #101a280a, 0 26px 48px -22px #101a2859;
}

.publishing-calendar .calendar-detail::before {
  content: "";
  position: absolute;
  left: 34px;
  top: -7px;
  width: 12px;
  height: 12px;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  background: #fff;
  transform: rotate(45deg);
}

.publishing-calendar .calendar-detail-main,
.publishing-calendar .calendar-detail-progress {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.publishing-calendar .calendar-detail-progress {
  padding-left: 14px;
  border-left: 1px solid var(--cal-line);
}

.publishing-calendar .calendar-detail-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.publishing-calendar .calendar-detail-title {
  font-size: 14.5px;
  line-height: 1.35;
  letter-spacing: -.015em;
}

.publishing-calendar .status-pill {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--status-tint);
  color: var(--status-ink);
  font-size: 12px;
  font-weight: 700;
  transition: background-color .4s, color .4s;
}

.publishing-calendar .status-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--status);
  transition: background-color .4s;
}

.publishing-calendar .calendar-detail-target {
  font-size: 12px;
  line-height: 1.45;
  color: #70747d;
}

.publishing-calendar .calendar-detail-target span {
  font-weight: 600;
  color: var(--ink);
}

.publishing-calendar .pipeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 4px -4px 0;
  --fill: 0;
}

.publishing-calendar .pipeline[data-step="2"] { --fill: .3333; }
.publishing-calendar .pipeline[data-step="3"] { --fill: .6667; }
.publishing-calendar .pipeline[data-step="4"] { --fill: 1; }

.publishing-calendar .pipeline::before,
.publishing-calendar .pipeline::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  border-radius: 2px;
  background: #e6e8eb;
}

.publishing-calendar .pipeline::after {
  background: var(--status, #e6e8eb);
  transform: scaleX(var(--fill));
  transform-origin: left;
  transition: transform .6s var(--motion-ease-out), background-color .4s;
}

.publishing-calendar .pipeline li {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #a7aab1;
  text-align: center;
}

.publishing-calendar .pipeline li i {
  width: 12px;
  height: 12px;
  border: 2px solid #d7dadf;
  border-radius: 50%;
  background: #fff;
  transition: border-color .4s, background-color .4s, transform .4s var(--motion-ease-out);
}

.publishing-calendar .pipeline li[data-done="true"] i {
  border-color: var(--status);
  background: var(--status);
}

.publishing-calendar .pipeline li[data-done="true"] span {
  color: #41454f;
}

.publishing-calendar .calendar-detail-note {
  font-size: 11.5px;
  line-height: 1.45;
  color: #70747d;
}

.publishing-calendar .calendar-plan-here {
  justify-self: start;
  padding: 6px 10px;
  border: 1px solid #cfd9e9;
  border-radius: 7px;
  background: #eef2f8;
  color: #13366b;
  font-size: 12.5px;
  font-weight: 700;
}

/* Motion. */
.publishing-calendar .calendar-week:nth-child(2) { --cal-week: 1; }
.publishing-calendar .calendar-week:nth-child(3) { --cal-week: 2; }
.publishing-calendar .calendar-week:nth-child(4) { --cal-week: 3; }
.publishing-calendar .calendar-week:nth-child(5) { --cal-week: 4; }
.publishing-calendar .calendar-week:nth-child(6) { --cal-week: 5; }
.publishing-calendar .calendar-day:nth-child(2) { --cal-col: 1; }
.publishing-calendar .calendar-day:nth-child(3) { --cal-col: 2; }
.publishing-calendar .calendar-day:nth-child(4) { --cal-col: 3; }
.publishing-calendar .calendar-day:nth-child(5) { --cal-col: 4; }
.publishing-calendar .calendar-day:nth-child(6) { --cal-col: 5; }
.publishing-calendar .calendar-day:nth-child(7) { --cal-col: 6; }

@media (prefers-reduced-motion: no-preference) {
  /* Status dots ripple in diagonally when the calendar scrolls into view. */
  .publishing-calendar .calendar-showcase[data-reveal-state="visible"] .calendar-day i {
    animation: cal-dot .55s var(--motion-ease-out) backwards;
    animation-delay: calc(.35s + (var(--cal-week, 0) + var(--cal-col, 0)) * 45ms);
  }

  /* Each autopilot step restarts the featured dot's pop (one keyframe name per status). */
  .publishing-calendar .calendar-day[data-featured="true"][data-status="idea"] i { animation: cal-step-1 .7s var(--motion-ease-out); }
  .publishing-calendar .calendar-day[data-featured="true"][data-status="writing"] i { animation: cal-step-2 .7s var(--motion-ease-out); }
  .publishing-calendar .calendar-day[data-featured="true"][data-status="scheduled"] i { animation: cal-step-3 .7s var(--motion-ease-out); }
  .publishing-calendar .calendar-day[data-featured="true"][data-status="published"] i { animation: cal-step-4 .7s var(--motion-ease-out); }

  .publishing-calendar .calendar-day[data-fresh="true"] {
    animation: cal-land .9s var(--motion-ease-out);
  }
  .publishing-calendar .calendar-day[data-fresh="true"] i {
    animation: cal-step-1 .8s var(--motion-ease-out) .1s backwards;
  }

  .publishing-calendar .calendar-grid[data-slide="next"] .calendar-month {
    animation: cal-from-right .45s var(--motion-ease-out) backwards;
  }
  .publishing-calendar .calendar-grid[data-slide="previous"] .calendar-month {
    animation: cal-from-left .45s var(--motion-ease-out) backwards;
  }

  .publishing-calendar .calendar-detail[data-morph="a"] > * {
    animation: cal-detail-a .45s var(--motion-ease-out) backwards;
  }
  .publishing-calendar .calendar-detail[data-morph="b"] > * {
    animation: cal-detail-b .45s var(--motion-ease-out) backwards;
  }
  .publishing-calendar .calendar-detail[data-morph] > :nth-child(2) { animation-delay: .08s; }

  .publishing-calendar .calendar-autopilot[aria-pressed="true"] i {
    animation: cal-live 1.8s ease-in-out infinite;
  }

  .publishing-calendar .calendar-detail[data-status] .pipeline li[data-done="true"]:has(+ li[data-done="false"]) i,
  .publishing-calendar .calendar-detail[data-status="published"] .pipeline li:last-child i {
    animation: cal-current 1.6s ease-in-out infinite;
  }
}

@keyframes cal-dot {
  from { opacity: 0; transform: scale(0); }
}
@keyframes cal-step-1 {
  0% { transform: scale(.3); }
  55% { transform: scale(1.8); }
}
@keyframes cal-step-2 {
  0% { transform: scale(.3); }
  55% { transform: scale(1.8); }
}
@keyframes cal-step-3 {
  0% { transform: scale(.3); }
  55% { transform: scale(1.8); }
}
@keyframes cal-step-4 {
  0% { transform: scale(.3); }
  55% { transform: scale(1.8); }
}
@keyframes cal-land {
  0% { transform: scale(.85); }
  50% { transform: scale(1.06); }
}
@keyframes cal-from-right {
  from { opacity: 0; transform: translate3d(24px, 0, 0); }
}
@keyframes cal-from-left {
  from { opacity: 0; transform: translate3d(-24px, 0, 0); }
}
@keyframes cal-detail-a {
  from { opacity: 0; transform: translate3d(0, 5px, 0); }
}
@keyframes cal-detail-b {
  from { opacity: 0; transform: translate3d(0, 5px, 0); }
}
@keyframes cal-live {
  50% { box-shadow: 0 0 0 6px #17a36b00; }
}
@keyframes cal-current {
  50% { transform: scale(1.25); }
}

/* Responsive, by column width. */
@container calendar (max-width: 560px) {
  .publishing-calendar .calendar-showcase {
    grid-template-columns: minmax(0, 1fr) 162px;
  }
  .publishing-calendar .calendar-detail {
    margin-left: 6%;
  }
  .publishing-calendar .calendar-card {
    padding-inline: 10px;
  }
  .publishing-calendar .calendar-day {
    height: 42px;
    font-size: 12.5px;
  }
}

@container calendar (min-width: 640px) {
  .publishing-calendar .calendar-showcase {
    grid-template-columns: minmax(0, 1fr) 220px;
  }
  .publishing-calendar .calendar-detail {
    margin-left: 22%;
  }
}

@container calendar (max-width: 500px) {
  .publishing-calendar .calendar-showcase {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "card"
      "detail"
      "side";
  }
  .publishing-calendar .calendar-card {
    padding-bottom: 30px;
  }
  .publishing-calendar .calendar-detail {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin: -34px 8px 0;
  }
  .publishing-calendar .calendar-detail-progress {
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid var(--cal-line);
  }
  .publishing-calendar .calendar-day {
    height: 44px;
  }
  .publishing-calendar .calendar-tools {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .publishing-calendar .calendar-legend {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
  }
}

@container calendar (max-width: 330px) {
  .publishing-calendar .calendar-card {
    padding-inline: 6px;
  }
  .publishing-calendar .calendar-day {
    height: 40px;
    font-size: 12px;
  }
  .publishing-calendar .calendar-weekdays {
    font-size: 10.5px;
  }
  .publishing-calendar .calendar-tools {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Section: experiments. Rendered by crates/web/src/sections/experiments/; only that section's styles live here.

   The live experiment card is the ExperimentFlow island. Two native radios
   (#experiment-source-organic / -meta) pick the traffic source: every scenario's copy is
   rendered, stacked in one grid cell (.experiment-swap), and `:checked ~` rules show the
   chosen one. The player sets `data-phase` (collecting / leaning / promoted / resetting)
   on the card, moves the particles and meter fills, and toggles `data-pulse` (a/b) on a
   variant when a conversion lands. Everything below reads as a complete still frame
   without WebAssembly or under reduced motion. */

.experiments-section {
  --exp-a: #2b7bd6;
  --exp-a-soft: #e9f2fd;
  --exp-a-stream: #a9cbf2;
  --exp-b: #0c4294;
  --exp-b-soft: #e2eaf5;
  --exp-b-stream: #93afd8;
  --exp-lit: #f4a51c;
  --exp-lit-soft: #fff3d9;
  --exp-source: #d6d8de;
  --exp-stream: 16px;
  --exp-stream-wide: 32px;
  padding-block: 64px 60px;
}

.experiments-section [hidden] {
  display: none !important;
}

/* Desktop: the pitch and the rules share the left column, centred beside the card. Narrow:
   pitch, card, rules (document order). */
.experiments-layout {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: 56px;
}

.experiments-intro {
  grid-column: 1;
  grid-row: 2;
}

.experiments-rules {
  grid-column: 1;
  grid-row: 3;
}

.experiments-visual {
  grid-column: 2;
  grid-row: 1 / -1;
  min-width: 0;
}

.experiments-intro h2 {
  max-width: 470px;
  font-size: clamp(28px, 2.6vw, 36px);
  letter-spacing: -.028em;
}

.experiments-intro .section-description {
  max-width: 450px;
  font-size: 16px;
}

.experiments-principles {
  display: grid;
  gap: 18px;
  margin-top: 30px;
}

.experiments-principles li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.experiments-principle-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--exp-b-soft);
  color: var(--exp-b);
}

.experiments-principle-icon .icon {
  width: 19px;
  height: 19px;
  stroke-width: 1.8;
}

.experiments-principles strong {
  display: block;
  margin: 1px 0 3px;
  font-size: 15px;
  letter-spacing: -.015em;
}

.experiments-principles small {
  display: block;
  max-width: 400px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

.experiments-plan {
  display: inline-flex;
  margin-top: 28px;
  font-size: 14px;
  font-weight: 650;
  color: var(--deep);
  transition: color .2s;
}

.experiments-plan:hover {
  color: var(--green);
}

/* The live experiment card. */
.experiment-card {
  container: experiment / inline-size;
  position: relative;
  padding: 18px 20px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px #101a280a, 0 34px 64px -40px #101a2855;
}

/* Scenario copy: both rendered in one cell; the unchosen one fades out of view and out of
   the accessibility tree. */
.experiment-card .experiment-swap {
  display: grid;
}

.experiment-card span.experiment-swap {
  display: inline-grid;
}

.experiment-card .experiment-swap > [data-scenario] {
  grid-area: 1 / 1;
  min-width: 0;
  transition: opacity .35s ease, visibility 0s;
}

#experiment-source-organic:checked ~ * [data-scenario="meta"],
#experiment-source-meta:checked ~ * [data-scenario="organic"],
#experiment-source-organic:checked ~ [data-scenario="meta"],
#experiment-source-meta:checked ~ [data-scenario="organic"] {
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s ease, visibility 0s .2s;
}

/* Header: status and the source toggle. */
.experiment-head {
  display: grid;
  gap: 12px;
}

.experiment-status {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-size: 13px;
  color: var(--muted);
}

.experiment-live {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--exp-b);
}

.experiment-live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--exp-b);
  opacity: 0;
}

/* Status chip: every label stacked in one cell (fixed width); the current one shows. */
.experiment-state {
  display: inline-grid;
  flex: none;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--exp-b-soft);
  color: var(--deep);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .01em;
  text-align: center;
  transition: background .4s, color .4s;
}

.experiment-state > span {
  grid-area: 1 / 1;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s ease;
}

.experiment-state > [data-current] {
  opacity: 1;
}

.experiment-subject {
  overflow: hidden;
  font-weight: 600;
  color: #494e58;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.experiment-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border-radius: 11px;
  background: #f1f2f4;
  box-shadow: inset 0 0 0 1px #e8e9ec;
}

.experiment-toggle label {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: #636771;
  cursor: pointer;
  transition: background .25s, color .25s, box-shadow .25s;
}

.experiment-toggle-detail {
  font-weight: 500;
}

.experiment-toggle label:hover {
  color: var(--ink);
}

#experiment-source-organic:checked ~ .experiment-head label[data-source="organic"],
#experiment-source-meta:checked ~ .experiment-head label[data-source="meta"] {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px #101a2814, 0 4px 10px -6px #101a2840;
}

#experiment-source-organic:focus-visible ~ .experiment-head label[data-source="organic"],
#experiment-source-meta:focus-visible ~ .experiment-head label[data-source="meta"] {
  outline: 3px solid #124ea9;
  outline-offset: 2px;
}

/* The flow diagram: source → streams → variants, on a faint lab grid. */
.experiment-diagram {
  position: relative;
  margin: 18px -20px 0;
  padding: 16px 20px 0;
  background-image: radial-gradient(#e5e7eb 1px, transparent 1.2px);
  background-size: 18px 18px;
  background-position: center top;
}

.experiment-source {
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.experiment-source-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 1px 2px #101a280a, 0 12px 26px -20px #101a2859;
}

.experiment-marks {
  display: flex;
  flex: none;
}

.experiment-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e5e6ea;
  box-shadow: 0 2px 6px -3px #101a2840;
}

.experiment-mark + .experiment-mark {
  margin-left: -9px;
}

.experiment-mark img {
  display: block;
  width: 16px;
  height: 16px;
}

.experiment-mark-icon {
  background: var(--exp-a-soft);
  border-color: #d5e5f8;
  color: var(--exp-a);
}

.experiment-mark-icon .icon {
  width: 17px;
  height: 17px;
}

.experiment-source-card strong {
  display: block;
  font-size: 14px;
  letter-spacing: -.015em;
}

.experiment-source-card small {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  color: var(--muted);
}

.experiment-source-card em {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 650;
  color: var(--deep);
}

.experiment-streams {
  display: block;
  width: 100%;
  height: 132px;
  overflow: visible;
}

.experiment-stop-source {
  stop-color: var(--exp-source);
}

.experiment-stop-a {
  stop-color: var(--exp-a-stream);
}

.experiment-stop-b {
  stop-color: var(--exp-b-stream);
}

.experiment-stream {
  fill: none;
  stroke-width: var(--exp-stream);
  vector-effect: non-scaling-stroke;
  transition: opacity .9s var(--motion-ease-out);
}

.experiment-stream[data-branch="a"] {
  stroke: url(#experiment-gradient-a);
}

.experiment-stream[data-branch="b"] {
  stroke: url(#experiment-gradient-b);
}

.experiment-stream-wide {
  stroke-width: var(--exp-stream-wide);
  opacity: 0;
}

.experiment-particle {
  fill: none;
  stroke: var(--exp-a);
  stroke-width: 7px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.experiment-particle[data-branch="b"] {
  stroke: var(--exp-b);
}

.experiment-particle[data-lit] {
  stroke: var(--exp-lit);
  stroke-width: 10px;
}

/* Variant nodes. */
.experiment-variants {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.experiment-variant {
  --accent: var(--exp-a);
  --accent-soft: var(--exp-a-soft);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px 14px 12px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px #101a280a, 0 14px 28px -24px #101a2859;
  transition: opacity .8s var(--motion-ease-out), box-shadow .6s, border-color .6s;
}

.experiment-variant[data-branch="b"] {
  --accent: var(--exp-b);
  --accent-soft: var(--exp-b-soft);
}

/* Ring that flashes when a conversion lands. */
.experiment-variant::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 15px;
  border: 2px solid var(--exp-lit);
  opacity: 0;
  pointer-events: none;
}

.experiment-variant-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
}

.experiment-letter {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 750;
}

.experiment-variant-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #81848b;
  white-space: nowrap;
}

.experiment-winner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 3px 8px 3px 6px;
  border-radius: 99px;
  background: var(--exp-b);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .3s ease, transform .5s var(--motion-ease-out);
}

.experiment-winner .icon {
  width: 12px;
  height: 12px;
  stroke-width: 3;
}

.experiment-variant .experiment-swap {
  flex: 1;
  margin-top: 9px;
}

.experiment-idea {
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -.012em;
  color: var(--ink);
}

.experiment-rate {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 7px;
  margin-top: 8px;
  line-height: 1.2;
}

.experiment-rate strong {
  font-size: 22px;
  letter-spacing: -.03em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.experiment-rate span {
  font-size: 12px;
  color: var(--muted);
}

.experiment-share {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed #e6e7ea;
  font-size: 12px;
  color: var(--muted);
}

.experiment-share-value {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.experiment-pop {
  position: absolute;
  top: -12px;
  right: 12px;
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--exp-lit-soft);
  box-shadow: 0 0 0 1px #f8dc9e, 0 6px 14px -8px #b3720a80;
  color: #9a5a05;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

/* The winner is promoted: A's stream and node fade, B's stream widens. */
.experiment-card[data-phase="promoted"] .experiment-stream[data-branch="a"] {
  opacity: .12;
}

.experiment-card[data-phase="promoted"] .experiment-stream-wide {
  opacity: 1;
}

.experiment-card[data-phase="promoted"] .experiment-variant[data-branch="a"] {
  opacity: .42;
}

.experiment-card[data-phase="promoted"] .experiment-variant[data-branch="b"] {
  border-color: #a7bddf;
  border-top-color: var(--exp-b);
  box-shadow: 0 0 0 4px var(--exp-b-soft), 0 18px 34px -24px #0c429480;
}

.experiment-card[data-phase="promoted"] .experiment-winner {
  opacity: 1;
  transform: none;
}

.experiment-card[data-phase="promoted"] .experiment-state {
  background: var(--exp-b);
  color: #fff;
}

.experiment-card[data-phase="resetting"] .experiment-state {
  background: #eff0f2;
  color: var(--muted);
}

/* Confidence meter. */
.experiment-meters {
  margin-top: 16px;
}

.experiment-meter {
  padding: 13px 15px 12px;
  border: 1px solid #ebecef;
  border-radius: 12px;
  background: #f8f8f9;
}

.experiment-meter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

.experiment-meter-head strong {
  font-size: 20px;
  letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.experiment-meter-track {
  position: relative;
  height: 10px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: #e4e6ea;
}

.experiment-meter-track svg {
  display: block;
  width: 100%;
  height: 100%;
}

.experiment-meter-fill {
  fill: var(--exp-b);
  transition: fill .6s ease;
}

.experiment-card[data-phase="collecting"] .experiment-meter-fill,
.experiment-card[data-phase="resetting"] .experiment-meter-fill {
  fill: #a7abb4;
}

/* The stopping rule (95%), fixed before the test starts. */
.experiment-meter-rule {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 95%;
  width: 2px;
  background: #fff;
}

/* Every phase's caption is stacked in one cell; the current one shows. */
.experiment-meter-caption {
  display: grid;
  margin-top: 9px;
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--ink);
}

.experiment-meter-caption > span {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity .3s ease;
}

.experiment-meter-caption > [data-current] {
  opacity: 1;
}

.experiment-card[data-phase="collecting"] .experiment-meter-caption,
.experiment-card[data-phase="resetting"] .experiment-meter-caption {
  color: var(--muted);
}

.experiment-card[data-phase="promoted"] .experiment-meter-caption {
  color: var(--deep);
}

.experiment-rules {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.experiment-rules .icon {
  width: 14px;
  height: 14px;
  color: var(--exp-b);
}

/* Lab notebook. */
.lab-notebook {
  margin-top: 60px;
}

.lab-notebook-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 32px;
  margin-bottom: 16px;
}

.lab-notebook-head h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 19px;
  letter-spacing: -.025em;
}

.lab-notebook-head h3 .icon {
  width: 19px;
  height: 19px;
  color: var(--exp-b);
}

.lab-notebook-head p {
  max-width: 560px;
  font-size: 14px;
  color: var(--muted);
}

.lab-entries {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.lab-entry {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 15px 18px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 1px 2px #101a280a, 0 16px 32px -28px #101a2859;
}

.lab-entry-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #8b8f97;
  font-variant-numeric: tabular-nums;
}

.lab-outcome {
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--exp-b-soft);
  color: var(--deep);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.lab-entry[data-outcome="inconclusive"] .lab-outcome {
  background: #eff0f2;
  color: #5b5f68;
}

.lab-entry h4 {
  margin: 11px 0 0;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: -.018em;
}

.lab-source {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.lab-result {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin-top: auto;
  padding-top: 14px;
  line-height: 1.2;
}

.lab-result strong {
  font-size: 26px;
  letter-spacing: -.035em;
  color: var(--exp-b);
  font-variant-numeric: tabular-nums;
}

.lab-entry[data-outcome="inconclusive"] .lab-result strong {
  color: var(--ink);
}

.lab-result span {
  font-size: 13px;
  color: var(--muted);
}

.lab-evidence {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed #e6e7ea;
  font-size: 12px;
  color: #7f838d;
}

/* Motion (the player only runs when motion is allowed; these are its CSS halves). */
@media (prefers-reduced-motion: no-preference) {
  .experiment-live::after {
    animation: experiment-live 1.8s var(--motion-ease-out) infinite;
  }
  .experiment-variant[data-pulse="a"]::after {
    animation: experiment-ring-a .9s var(--motion-ease-out);
  }
  .experiment-variant[data-pulse="b"]::after {
    animation: experiment-ring-b .9s var(--motion-ease-out);
  }
  .experiment-variant[data-pulse="a"] .experiment-pop {
    animation: experiment-pop-a 1.2s var(--motion-ease-out);
  }
  .experiment-variant[data-pulse="b"] .experiment-pop {
    animation: experiment-pop-b 1.2s var(--motion-ease-out);
  }
}

@keyframes experiment-live {
  from {
    opacity: .6;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(2.8);
  }
}

@keyframes experiment-ring-a {
  0% {
    opacity: .9;
    transform: scale(.98);
  }
  100% {
    opacity: 0;
    transform: scale(1.03);
  }
}

@keyframes experiment-ring-b {
  0% {
    opacity: .9;
    transform: scale(.98);
  }
  100% {
    opacity: 0;
    transform: scale(1.03);
  }
}

@keyframes experiment-pop-a {
  0% {
    opacity: 0;
    transform: translate3d(0, 6px, 0) scale(.9);
  }
  18% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
  }
}

@keyframes experiment-pop-b {
  0% {
    opacity: 0;
    transform: translate3d(0, 6px, 0) scale(.9);
  }
  18% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
  }
}

/* A narrow card (stacked page or phone): tighter nodes and thinner streams. */
@container experiment (max-width: 560px) {
  /* Source on one line, its detail under it. */
  .experiment-toggle label {
    padding: 7px 8px;
  }
  .experiment-toggle-main,
  .experiment-toggle-detail {
    display: block;
  }
  .experiment-toggle-detail {
    margin-top: 1px;
    font-size: 11.5px;
  }
  .experiment-toggle-punct {
    display: none;
  }
  .experiment-variants {
    gap: 10px;
  }
  .experiment-variant {
    padding: 10px 11px 10px;
  }
  .experiment-variant-name {
    display: none;
  }
  .experiment-idea {
    font-size: 13px;
  }
  .experiment-rate strong {
    font-size: 19px;
  }
  .experiment-rate span,
  .experiment-share {
    font-size: 11.5px;
  }
  .experiment-streams {
    height: 104px;
  }
  .experiment-meter-caption {
    font-size: 13px;
  }
}

@container experiment (max-width: 360px) {
  .experiment-toggle label {
    padding: 7px 6px;
    font-size: 12.5px;
  }
  .experiment-winner {
    padding: 3px 6px 3px 5px;
    font-size: 10.5px;
  }
  .experiment-number {
    display: none;
  }
  .experiment-rules {
    align-items: flex-start;
    font-size: 11.5px;
  }
  .experiment-rules .icon {
    margin-top: 1px;
  }
}

@media (max-width: 960px) {
  .experiments-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 30px;
  }
  .experiments-intro,
  .experiments-rules,
  .experiments-visual {
    grid-column: 1;
    grid-row: auto;
  }
  .experiments-intro h2 {
    max-width: 640px;
  }
  .experiments-intro .section-description {
    max-width: 560px;
  }
  .experiments-principles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 6px;
  }
  .experiments-principles li {
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 760px) {
  .experiments-section {
    --exp-stream: 11px;
    --exp-stream-wide: 22px;
    padding-block: 44px 48px;
  }
  .experiments-layout {
    row-gap: 26px;
  }
  .experiments-principles {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 4px;
  }
  .experiments-plan {
    margin-top: 22px;
  }
  .experiments-principles li {
    flex-direction: row;
    gap: 13px;
  }
  .experiment-card {
    padding: 14px 14px 13px;
    border-radius: 14px;
  }
  .experiment-diagram {
    margin-inline: -14px;
    padding-inline: 14px;
  }
  .experiment-particle {
    stroke-width: 6px;
  }
  .experiment-particle[data-lit] {
    stroke-width: 8px;
  }
  .lab-notebook {
    margin-top: 44px;
  }
  .lab-notebook-head {
    display: block;
  }
  .lab-notebook-head p {
    margin-top: 6px;
    font-size: 13.5px;
  }
  .lab-entries {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

/* Section: intelligence. Rendered by crates/web/src/sections/intelligence/; only that section's styles live here.
   Live feeds: every alert is rendered; `data-state` (current / previous / upcoming) stacks them in one grid
   cell and slides them in and out. `data-live` on a card appears once its first live alert arrives. */

.intel-column {
  display: flex;
  flex-direction: column;
}

.intel-column .intel-cards {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.intel-column .intel-card {
  --accent: #124592;
  --accent-soft: #e4ebf5;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 2px #101a290a, 0 10px 26px -18px #101a2933;
}

.intel-column .intel-card.signal-demand {
  --accent: #2b7bd6;
  --accent-soft: #e7f1fc;
}

.intel-column .intel-card.signal-launch {
  --accent: #e08912;
  --accent-soft: #fff1dc;
}

.intel-column .intel-summary {
  display: flex;
  flex: 1;
  gap: 12px;
  padding: 18px 16px 16px;
}

.intel-column .intel-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}

.intel-column .intel-icon .icon {
  width: 19px;
  height: 19px;
}

.intel-column .intel-summary h3 {
  font-size: 14.5px;
  letter-spacing: -.02em;
  margin: 1px 0 6px;
}

.intel-column .intel-summary p {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

.intel-column .signal-feed {
  position: relative;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: 15px 16px 17px;
  border-top: 1px solid #eeeff2;
  background: linear-gradient(180deg, #fbfcfc, #f7f7f8);
}

.intel-column .signal-alert {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  transition:
    transform .75s var(--motion-ease-out),
    opacity .5s ease,
    visibility 0s;
}

.intel-column .signal-alert[data-state="previous"],
.intel-column .signal-alert[data-state="upcoming"] {
  visibility: hidden;
  opacity: 0;
  transition:
    transform .75s var(--motion-ease-out),
    opacity .35s ease,
    visibility 0s .75s;
}

.intel-column .signal-alert[data-state="previous"] {
  transform: translate3d(0, 85%, 0);
}

.intel-column .signal-alert[data-state="upcoming"] {
  transform: translate3d(0, -85%, 0);
}

.intel-column .alert-badge {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e8e9ec;
  box-shadow: 0 2px 6px -2px #101a2926;
  color: var(--accent);
}

.intel-column .alert-badge .icon {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

.intel-column .alert-badge img {
  display: block;
  width: 15px;
  height: 15px;
}

/* Ring that pings when a new alert lands. */
.intel-column .alert-badge::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}

.intel-column .signal-alert strong {
  display: block;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.38;
  letter-spacing: -.012em;
  color: var(--ink);
}

.intel-column .signal-alert small {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: #7f838d;
}

/* Wash of the card's accent behind a newly arrived alert; it spans the whole feed (the feed's
   padding is mirrored by the negative inset and clipped by its overflow). */
.intel-column .signal-alert::before {
  content: "";
  position: absolute;
  inset: -15px -16px -17px;
  background: linear-gradient(100deg, var(--accent-soft), transparent 80%);
  opacity: 0;
  pointer-events: none;
}

.intel-column .signal-alert > * {
  position: relative;
}

@media (prefers-reduced-motion: no-preference) {
  .intel-column .intel-card[data-live] .signal-alert[data-state="current"] .alert-badge::after {
    animation: intel-ping 1.3s var(--motion-ease-out) .3s;
  }
  .intel-column .intel-card[data-live] .signal-alert[data-state="current"]::before {
    animation: intel-wash 2.4s ease-out .1s;
  }
}

@keyframes intel-ping {
  from {
    opacity: .7;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.9);
  }
}

@keyframes intel-wash {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Desktop columns are narrow: icon above the title. */
@media (min-width: 1101px) {
  .intel-column .intel-summary {
    flex-direction: column;
    gap: 12px;
  }
}

@media (max-width: 700px) {
  .intel-column .intel-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .intel-column .intel-summary {
    padding: 16px 16px 14px;
  }
  .intel-column .intel-summary h3 {
    font-size: 15px;
  }
  .intel-column .intel-summary p {
    font-size: 13px;
  }
  .intel-column .signal-feed {
    padding: 13px 16px 15px;
  }
}

/* Section: channels. Rendered by crates/web/src/sections/channels.rs; only that section's styles live here.
   A board: a 3×3 grid of channels and, under it, the optional ads boost (switched off). Cells are
   separated by borders (not grid gaps) so cells that are still fading in never expose a coloured
   background. `--tint` per channel colours the hover glow. */

.distribution {
  display: flex;
  flex-direction: column;
}

/* Fills the column so the board ends level with the intelligence cards beside it. */
.distribution .channel-board {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 2px #101a290a, 0 10px 26px -18px #101a2933;
}

.distribution .channel-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

.distribution .channel {
  --tint: #1858b814;
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 76px;
  padding: 16px 13px;
  border-color: #eeeff2;
  border-style: solid;
  border-width: 0;
}

.distribution .channel:not(:nth-child(3n)) {
  border-right-width: 1px;
}

.distribution .channel:nth-child(-n+6) {
  border-bottom-width: 1px;
}

/* Hover glow, drawn behind the content. */
.distribution .channel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 150% at 0% 50%, var(--tint), transparent 72%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}

.distribution .channel:hover::before {
  opacity: 1;
}

.distribution .channel-mark {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f8f8f9;
  border: 1px solid #eeeff2;
  transition:
    transform .45s var(--motion-ease-out),
    box-shadow .45s var(--motion-ease-out),
    background-color .35s ease;
}

.distribution .channel-mark img {
  display: block;
  width: 21px;
  height: 21px;
}

.distribution .channel:hover .channel-mark {
  transform: translate3d(0, -2px, 0) scale(1.08) rotate(-5deg);
  background-color: #fff;
  box-shadow: 0 8px 18px -10px #101a294d;
}

.distribution .channel-text {
  position: relative;
  min-width: 0;
}

.distribution .channel-text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 680;
  letter-spacing: -.015em;
  line-height: 1.3;
}

.distribution .channel-text small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  font-size: 11.5px;
  line-height: 1.35;
  color: #797d86;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.distribution .channel-google { --tint: #4285f41f; }
.distribution .channel-ai { --tint: #104ba31f; }
.distribution .channel-reddit { --tint: #ff45001c; }
.distribution .channel-apps { --tint: #1b8cf41f; }
.distribution .channel-steam { --tint: #1b28381a; }
.distribution .channel-directories { --tint: #f6b40e24; }
.distribution .channel-partners { --tint: #f2a90024; }
.distribution .channel-press { --tint: #f973161f; }
.distribution .channel-social { --tint: #0a66c21f; }

/* Optional ads boost ------------------------------------------------------------------------- */

.distribution .channel-boost {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 11px 14px 11px 13px;
  border-top: 1px dashed #e1e3e8;
  background: linear-gradient(180deg, #fbfbfb, #f7f7f8);
}

.distribution .boost-mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px dashed #d2d5db;
  color: #8e929c;
  transition: color .3s ease, border-color .3s ease, transform .45s var(--motion-ease-out);
}

.distribution .boost-mark .icon {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

.distribution .channel-boost:hover .boost-mark {
  color: #e8a40c;
  border-color: #f2cf7a;
  transform: rotate(-8deg) scale(1.06);
}

.distribution .boost-text {
  flex: 1;
  min-width: 0;
}

.distribution .boost-text strong {
  display: block;
  font-size: 12.5px;
  font-weight: 680;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: #31343c;
}

.distribution .boost-text small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.35;
  color: #727680;
}

/* A switch drawn in its off position: ads stay off unless the customer turns them on. */
.distribution .boost-switch {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 7px;
  padding: 4px 9px 4px 5px;
  border: 1px solid #e5e6ea;
  border-radius: 99px;
  background: #fff;
  font-size: 11px;
  font-weight: 650;
  color: #727680;
}

.distribution .boost-switch i {
  position: relative;
  width: 24px;
  height: 14px;
  border-radius: 99px;
  background: #e1e3e7;
}

.distribution .boost-switch i::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px #101a2940;
}

@media (max-width: 1240px) and (min-width: 1101px) {
  .distribution .channel {
    gap: 10px;
    padding-inline: 12px;
  }
  .distribution .channel-mark {
    width: 34px;
    height: 34px;
  }
}

/* Narrow screens: icon above the label so three columns still fit. */
@media (max-width: 560px) {
  .distribution .channel {
    flex-direction: column;
    justify-content: flex-start;
    gap: 9px;
    min-height: 0;
    padding: 16px 6px 15px;
    text-align: center;
  }
  .distribution .channel::before {
    background: radial-gradient(120% 110% at 50% 0%, var(--tint), transparent 75%);
  }
  .distribution .channel-text strong {
    font-size: 12.5px;
  }
  .distribution .channel-text small {
    font-size: 11px;
    white-space: normal;
  }
}

/* Very narrow: the boost text gets the room its icon took. */
@media (max-width: 400px) {
  .distribution .channel-boost {
    gap: 10px;
    padding-inline: 12px;
  }
  .distribution .boost-mark {
    display: none;
  }
}

/* Section: receipts ("No black box"). Rendered by crates/web/src/sections/receipts/; only that section's
   styles live here.
   Feed: every receipt is rendered; `data-slot` (queued / 0-3 / gone) places it with a transform inside a
   fixed-height list, so cards slide in and out without layout shift. `data-live` on the panel appears once
   the first live receipt lands and enables the arrival highlights. Thumbnails are inline SVG (.thumb-*). */

.receipts-section {
  position: relative;
  padding-block: 40px 40px;
  background:
    radial-gradient(48% 62% at 22% 66%, #ecf1f8 0%, transparent 72%),
    radial-gradient(40% 50% at 86% 40%, #f3f8fb 0%, transparent 70%);
}

.receipts-section .receipts-heading {
  max-width: 720px;
  margin-bottom: 34px;
}

.receipts-section h2 {
  font-size: clamp(30px, 3vw, 40px);
}

.receipts-section .section-description {
  max-width: 660px;
  font-size: 16px;
}

.receipts-section .receipts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
}

/* Feed panel ------------------------------------------------------------------------------------ */

.receipts-section .receipt-panel {
  --card-h: 98px;
  --card-gap: 10px;
  --list-pad: 14px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 2px #101a290a, 0 22px 48px -30px #101a294d;
}

.receipts-section .receipt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid #eeeff2;
}

.receipts-section .receipt-toolbar strong {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  letter-spacing: -.02em;
}

.receipts-section .receipt-glyph {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--green);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.receipts-section .receipt-site {
  overflow: hidden;
  padding-left: 9px;
  border-left: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.receipts-section .receipt-status {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 7px;
  padding: 5px 10px 5px 9px;
  border-radius: 999px;
  background: #ebf0f7;
  color: #0b377a;
  font-size: 12px;
  font-weight: 700;
}

.receipts-section .receipt-pulse {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #124ea7;
}

.receipts-section .receipt-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #124ea7;
  opacity: 0;
}

.receipts-section .receipt-tally {
  display: inline-block;
  padding-left: 7px;
  border-left: 1px solid #c9d5e8;
  color: #3f526f;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.receipts-section .receipt-list {
  position: relative;
  flex: 1;
  min-height: calc(4 * var(--card-h) + 3 * var(--card-gap) + 2 * var(--list-pad));
  margin: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #fbfbfb, #f6f6f7);
}

/* Cards ----------------------------------------------------------------------------------------- */

.receipts-section .receipt {
  --slot: 0;
  position: absolute;
  top: var(--list-pad);
  inset-inline: var(--list-pad);
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  height: var(--card-h);
  padding: 10px 14px 10px 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e6e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 2px #101a2908, 0 8px 18px -14px #101a2938;
  transform: translate3d(0, calc(var(--slot) * (var(--card-h) + var(--card-gap))), 0);
  transition:
    transform .8s var(--motion-ease-out),
    opacity .5s ease,
    visibility 0s;
}

.receipts-section .receipt[data-slot="0"] { --slot: 0; }
.receipts-section .receipt[data-slot="1"] { --slot: 1; }
.receipts-section .receipt[data-slot="2"] { --slot: 2; }
.receipts-section .receipt[data-slot="3"] { --slot: 3; }

.receipts-section .receipt[data-slot="gone"] {
  --slot: 4;
  visibility: hidden;
  opacity: 0;
  transition:
    transform .8s var(--motion-ease-out),
    opacity .4s ease,
    visibility 0s .8s;
}

/* Waiting above the list; it snaps there (no transition) and slides down from there on arrival. */
.receipts-section .receipt[data-slot="queued"] {
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, -42%, 0) scale(.97);
  transition: none;
}

.receipts-section .receipt-rejected {
  border-color: #f2d6d6;
  background: linear-gradient(90deg, #fff7f7, #fff 46%);
  box-shadow: inset 3px 0 0 #e5484d, 0 1px 2px #101a2908, 0 8px 18px -14px #5a1c1c38;
}

/* Highlight wash over a newly arrived card. */
.receipts-section .receipt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #dee7f5, transparent 75%);
  opacity: 0;
  pointer-events: none;
}

.receipts-section .receipt-rejected::after {
  background: linear-gradient(100deg, #fde3e3, transparent 75%);
}

.receipts-section .receipt > * {
  position: relative;
  z-index: 1;
}

.receipts-section .receipt-thumb {
  display: block;
  line-height: 0;
}

.receipts-section .receipt-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 4px 10px -6px #101a2940;
}

.receipts-section .receipt-body {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.receipts-section .receipt-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.receipts-section .receipt-action {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 680;
  letter-spacing: -.015em;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.receipts-section .receipt-time {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 550;
  color: #898d96;
  font-variant-numeric: tabular-nums;
}

.receipts-section .receipt-url {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: #5e6575;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.receipts-section .receipt-url svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  fill: none;
  stroke: #838b9c;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.receipts-section .receipt-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  min-width: 0;
  margin-top: 2px;
}

.receipts-section .receipt-chips {
  display: flex;
  flex-shrink: 0;
  gap: 5px;
}

.receipts-section .receipt-chip {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 680;
  line-height: 1.35;
  white-space: nowrap;
}

.receipts-section .chip-verified {
  background: #e3f5ec;
  color: #0a7652;
}

.receipts-section .chip-neutral {
  background: #eff0f3;
  color: #60646d;
}

.receipts-section .chip-pending {
  background: #fff2dc;
  color: #9a5d06;
}

.receipts-section .chip-rejected {
  background: #fde8e8;
  color: #c03636;
}

.receipts-section .receipt-result {
  min-width: 0;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.receipts-section .result-waiting {
  font-weight: 600;
  color: #8e9199;
}

.receipts-section .result-rejected {
  font-weight: 600;
  color: #9d3a3a;
}

.receipts-section .receipt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 12px 18px 13px;
  border-top: 1px solid #eeeff2;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.receipts-section .receipt-legend span:first-child {
  font-weight: 700;
  color: var(--ink);
}

.receipts-section .receipt-legend span + span::before {
  content: "✓";
  margin-right: 5px;
  font-weight: 800;
  color: #124ea7;
}

/* Thumbnails ------------------------------------------------------------------------------------ */

.receipts-section .thumb-frame { fill: #fff; stroke: #dde0e5; }
.receipts-section .thumb-chrome { fill: #f0f1f4; }
.receipts-section .thumb-dot { fill: #d0d2d8; }
.receipts-section .thumb-address { fill: #fff; }
.receipts-section .thumb-ink { fill: #393e49; }
.receipts-section .thumb-line { fill: #dfe1e6; }
.receipts-section .thumb-tile { fill: #f2f3f5; stroke: #e4e5e9; stroke-width: .6; }
.receipts-section .thumb-tile.is-ours { fill: #e6ecf6; stroke: #86a5d3; stroke-width: 1; }
.receipts-section .thumb-accent { fill: #124ea7; }
.receipts-section .thumb-accent-soft { fill: #a5bbdc; }
.receipts-section .thumb-reply { fill: #e9eff7; stroke: #bfcfe6; stroke-width: .6; }
.receipts-section .thumb-chip { fill: #c5d4ea; }
.receipts-section .thumb-photo { fill: #e0e3eb; }
.receipts-section .thumb-photo-ink { fill: none; stroke: #a3a9b6; stroke-width: 1.4; stroke-linecap: round; }
.receipts-section .thumb-rule,
.receipts-section .thumb-thread { fill: none; stroke: #e3e4e8; stroke-width: 1; }
.receipts-section .thumb-quote { fill: none; stroke: #124ea7; stroke-width: 1.6; stroke-linecap: round; }
.receipts-section .thumb-check { fill: none; stroke: #124ea7; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.receipts-section .thumb-check-muted { fill: none; stroke: #bcbfc6; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.receipts-section .thumb-cross { fill: none; stroke: #e28b8b; stroke-width: 1.5; stroke-linecap: round; }
.receipts-section .thumb-star { fill: #f2b233; }
.receipts-section .thumb-ink-stroke { fill: none; stroke: #393e49; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.receipts-section .thumb-stamp rect { fill: #fff3f3; stroke: #e5484d; stroke-width: 1.2; }
.receipts-section .thumb-stamp path { fill: none; stroke: #e5484d; stroke-width: 1.6; stroke-linecap: round; }
.receipts-section .receipt-rejected .thumb-line,
.receipts-section .receipt-rejected .thumb-tile { fill: #edeef0; }

/* Comparison ------------------------------------------------------------------------------------ */

.receipts-section .receipts-compare {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.receipts-section .compare-card {
  flex: 1;
  padding: 19px 22px 20px;
  border-radius: 16px;
}

.receipts-section .compare-card h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.receipts-section .compare-logo {
  width: 18px;
  height: 18px;
}

.receipts-section .compare-card ul {
  display: grid;
  gap: 11px;
}

.receipts-section .compare-card li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.receipts-section .compare-mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
}

.receipts-section .compare-mark .icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.6;
}

.receipts-section .compare-card strong {
  display: block;
  font-size: 14.5px;
  font-weight: 680;
  letter-spacing: -.015em;
  line-height: 1.35;
}

.receipts-section .compare-card small {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.45;
}

.receipts-section .compare-usual {
  background: #f5f5f6;
  border: 1px solid #e7e9ec;
  color: #6f727a;
}

.receipts-section .compare-usual h3 {
  color: #84878f;
}

.receipts-section .compare-usual strong {
  color: #5d6169;
  text-decoration: line-through;
  text-decoration-color: #c7c9ce;
  text-decoration-thickness: 1.5px;
}

.receipts-section .compare-usual small {
  color: #8e9199;
}

.receipts-section .compare-usual .compare-mark {
  background: #e8e9eb;
  color: #92959b;
}

.receipts-section .compare-outpost {
  position: relative;
  background: #fff;
  border: 1.5px solid #9fb7dc;
  box-shadow: 0 0 0 5px #e9eff7, 0 26px 50px -30px #0b2d5f66;
}

.receipts-section .compare-outpost h3 {
  color: var(--deep);
}

.receipts-section .compare-outpost strong {
  color: var(--ink);
}

.receipts-section .compare-outpost small {
  color: var(--muted);
}

.receipts-section .compare-outpost .compare-mark {
  background: linear-gradient(150deg, #1959b8, #0b3e8a);
  color: #fff;
  box-shadow: 0 5px 12px -6px #0b3e8a;
}

.receipts-section .compare-versus {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  align-self: center;
  width: 38px;
  height: 38px;
  margin-block: -12px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 6px 14px -8px #101a2940;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #7e8189;
}

/* Motion ---------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .receipts-section .receipt-pulse::after {
    animation: receipt-pulse 2s var(--motion-ease-out) infinite;
  }
  .receipts-section .receipt-panel[data-live] .receipt[data-slot="0"]::after {
    animation: receipt-wash 2.2s ease-out .25s backwards;
  }
  .receipts-section .receipt-panel[data-live] .receipt[data-slot="0"] .receipt-chip {
    animation: receipt-pop .5s var(--motion-ease-out) .55s backwards;
  }
  .receipts-section .receipt-panel[data-live] .receipt[data-slot="0"] .receipt-chip + .receipt-chip {
    animation-delay: .7s;
  }
  .receipts-section .receipt-panel[data-live] .receipt[data-slot="0"] .receipt-result {
    animation: outpost-fade .6s ease .85s backwards;
  }
  .receipts-section .receipt-panel[data-live] .receipt-tally[data-tick="a"] {
    animation: receipt-bump-a .6s var(--motion-ease-out);
  }
  .receipts-section .receipt-panel[data-live] .receipt-tally[data-tick="b"] {
    animation: receipt-bump-b .6s var(--motion-ease-out);
  }
  .receipts-section .receipt-shot {
    transition: transform .35s var(--motion-ease-out);
  }
  .receipts-section .receipt:hover .receipt-shot {
    transform: scale(1.04);
  }
}

@keyframes receipt-pulse {
  from {
    opacity: .6;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(2.8);
  }
}

@keyframes receipt-wash {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes receipt-pop {
  from {
    opacity: 0;
    transform: scale(.6);
  }
}

/* Two identical keyframes: switching between them restarts the bump on every arrival. */
@keyframes receipt-bump-a {
  35% { transform: translate3d(0, -2px, 0) scale(1.08); }
}

@keyframes receipt-bump-b {
  35% { transform: translate3d(0, -2px, 0) scale(1.08); }
}

/* Layout ---------------------------------------------------------------------------------------- */

/* Two columns but a narrower feed: smaller thumbnails keep each result on one line. */
@media (min-width: 1001px) and (max-width: 1200px) {
  .receipts-section .receipts-grid {
    gap: 22px;
  }
  .receipts-section .receipt {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
  }
  .receipts-section .receipt-result {
    font-size: 12px;
  }
}

@media (max-width: 1000px) {
  .receipts-section .receipts-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .receipts-section .receipts-compare {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
  }
  .receipts-section .compare-versus {
    margin-block: 0;
    margin-inline: -12px;
  }
}

@media (max-width: 700px) {
  .receipts-section {
    padding-block: 52px 28px;
  }
  .receipts-section .receipts-heading {
    margin-bottom: 24px;
  }
  .receipts-section h2 {
    font-size: 29px;
  }
  .receipts-section .section-description {
    font-size: 15px;
  }
  .receipts-section .receipt-panel {
    --card-h: 120px;
    --card-gap: 8px;
    --list-pad: 10px;
  }
  .receipts-section .receipt-toolbar {
    padding: 13px 14px;
  }
  .receipts-section .receipt {
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    padding: 11px 12px 11px 10px;
  }
  .receipts-section .receipt-thumb {
    margin-top: 2px;
  }
  .receipts-section .receipt-body {
    gap: 4px;
  }
  /* Narrow cards: titles and results may take two lines instead of an ellipsis. */
  .receipts-section .receipt-action,
  .receipts-section .receipt-result {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
  }
  .receipts-section .receipt-action {
    font-size: 13px;
    line-height: 1.3;
  }
  .receipts-section .receipt-foot {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 5px 10px;
  }
  .receipts-section .receipt-chip {
    font-size: 10.5px;
    padding: 2px 7px;
  }
  .receipts-section .receipt-result {
    flex-basis: 100%;
    font-size: 12px;
    line-height: 1.35;
  }
  .receipts-section .receipt-legend {
    padding: 11px 14px 12px;
    font-size: 11.5px;
  }
  .receipts-section .receipts-compare {
    display: flex;
    flex-direction: column;
  }
  .receipts-section .compare-versus {
    margin-inline: 0;
    margin-block: -12px;
  }
  .receipts-section .compare-card {
    padding: 20px 18px 22px;
  }
}

@media (max-width: 400px) {
  .receipts-section .receipt-site {
    display: none;
  }
  .receipts-section .receipt-panel {
    --card-h: 128px;
  }
  .receipts-section .receipt {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
  }
  .receipts-section .receipt-action {
    font-size: 12.5px;
  }
  .receipts-section .receipt-result {
    font-size: 11.5px;
  }
}

/* Section: links ("Links strip"). Rendered by crates/web/src/sections/links.rs; only that section's styles
   live here. The breakdown bar is an SVG (segment widths come from the data); its segments grow in when the
   board's reveal runs. Each source tile carries its accent (`.link-<source>`), shared with its bar segment. */

.links-section {
  padding-block: 36px 76px;
}

.links-section .links-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 56px;
  margin-bottom: 26px;
}

.links-section h2 {
  font-size: clamp(28px, 2.6vw, 34px);
}

.links-section .links-heading .section-description {
  max-width: 470px;
  margin: 0;
  padding-bottom: 3px;
}

.links-section .links-board {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 2px #101a290a, 0 22px 48px -32px #101a294d;
}

/* Accents -------------------------------------------------------------------------------------- */

.links-section .link-launches {
  --accent: #124ba0;
  --accent-soft: #e4ebf5;
}

.links-section .link-directories {
  --accent: #2b7bd6;
  --accent-soft: #e7f1fc;
}

.links-section .link-communities {
  --accent: #6d5ce8;
  --accent-soft: #eeebfd;
}

.links-section .link-research {
  --accent: #e08912;
  --accent-soft: #fff1dc;
}

.links-section .link-mentions {
  --accent: #1b1f27;
  --accent-soft: #eaecef;
}

/* Counter -------------------------------------------------------------------------------------- */

.links-section .links-counter {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px 44px;
  padding: 24px 28px 26px;
  border-bottom: 1px solid #eeeff2;
  background:
    radial-gradient(60% 140% at 0% 0%, #eef2f9 0%, transparent 60%),
    #fff;
}

.links-section .links-total {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  justify-content: start;
  gap: 2px 14px;
}

.links-section .links-label {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #71747c;
}

.links-section .links-pulse {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #124ea7;
}

.links-section .links-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #124ea7;
  opacity: 0;
}

.links-section .links-total strong {
  font-size: 48px;
  font-weight: 790;
  letter-spacing: -.055em;
  line-height: 1.05;
  color: var(--ink);
}

.links-section .links-trend {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f479a;
  white-space: nowrap;
}

.links-section .links-bar {
  display: block;
  width: 100%;
  height: 14px;
  overflow: hidden;
  clip-path: inset(0 round 7px);
  background: #eff0f3;
}

.links-section .links-breakdown {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.links-section .links-caption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.links-section .links-caption span:last-child {
  font-weight: 650;
  color: #0b377a;
}

.links-section .links-segment {
  fill: var(--accent);
  transform-box: fill-box;
  transform-origin: left center;
}

/* Sources -------------------------------------------------------------------------------------- */

.links-section .links-sources {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.links-section .links-source {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 22px 22px 24px;
  border-left: 1px solid #eeeff2;
  transition: background-color .25s ease;
}

.links-section .links-source:first-child {
  border-left: 0;
}

.links-section .links-source:hover {
  background: color-mix(in srgb, var(--accent-soft) 45%, #fff);
}

.links-section .links-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
}

/* The source's bar colour, as a dot on its icon. */
.links-section .links-icon::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
}

.links-section .link-mentions .links-icon::after {
  content: none;
}

.links-section .links-icon .icon {
  width: 19px;
  height: 19px;
  stroke-width: 1.9;
}

.links-section .links-text {
  display: grid;
  align-content: start;
  gap: 4px;
  flex: 1;
}

.links-section .links-name {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--ink);
}

.links-section .links-text small {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.links-section .links-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
}

.links-section .links-count {
  font-size: 26px;
  font-weight: 780;
  letter-spacing: -.045em;
  line-height: 1.1;
  color: var(--ink);
}

.links-section .links-count::after {
  content: " links";
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
}

.links-section .link-mentions {
  background: linear-gradient(165deg, #f6f7f9, #fff 70%);
}

.links-section .links-founding {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

.links-section .links-founding::before {
  content: "★";
  margin-right: 6px;
  color: #8daee0;
}

.links-section .links-join {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--green);
  white-space: nowrap;
  transition: color .2s ease;
}

.links-section .links-join:hover {
  color: var(--deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Motion --------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .links-section .links-pulse::after {
    animation: links-pulse 2s var(--motion-ease-out) infinite;
  }
  .links-section .links-board[data-reveal-state="visible"] .links-segment {
    animation: links-grow 1.2s var(--motion-ease-out) .35s backwards;
  }
  .links-section .links-board[data-reveal-state="visible"] .links-segment:nth-of-type(2) {
    animation-delay: .5s;
  }
  .links-section .links-board[data-reveal-state="visible"] .links-segment:nth-of-type(3) {
    animation-delay: .65s;
  }
  .links-section .links-board[data-reveal-state="visible"] .links-segment:nth-of-type(4) {
    animation-delay: .8s;
  }
}

@keyframes links-grow {
  from {
    transform: scaleX(0);
  }
}

@keyframes links-pulse {
  from {
    opacity: .6;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(2.8);
  }
}

/* Layout --------------------------------------------------------------------------------------- */

@media (max-width: 1150px) {
  .links-section .links-source {
    padding: 20px 18px 22px;
  }
  .links-section .links-join {
    white-space: normal;
  }
}

@media (max-width: 1000px) {
  .links-section .links-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .links-section .links-heading .section-description {
    margin-top: 13px;
  }
  .links-section .links-sources {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .links-section .links-source {
    border-left: 0;
    border-top: 1px solid #eeeff2;
  }
  .links-section .links-source:nth-child(even) {
    border-left: 1px solid #eeeff2;
  }
  .links-section .links-source:nth-child(-n+2) {
    border-top: 0;
  }
  .links-section .link-mentions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    border-left: 0;
    border-top: 1px solid #eeeff2;
  }
  .links-section .link-mentions .links-figure {
    justify-content: flex-end;
  }
}

@media (max-width: 700px) {
  .links-section {
    padding-block: 28px 52px;
  }
  .links-section h2 {
    font-size: 27px;
  }
  .links-section .links-counter {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px 18px 22px;
  }
  .links-section .links-total strong {
    font-size: 42px;
  }
  .links-section .links-sources {
    grid-template-columns: minmax(0, 1fr);
  }
  .links-section .links-source,
  .links-section .link-mentions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 6px 14px;
    padding: 16px 18px;
    border-left: 0;
    border-top: 1px solid #eeeff2;
  }
  .links-section .links-source:nth-child(even) {
    border-left: 0;
  }
  .links-section .links-source:first-child {
    border-top: 0;
  }
  .links-section .links-source:nth-child(2) {
    border-top: 1px solid #eeeff2;
  }
  .links-section .links-figure {
    align-self: center;
    justify-content: flex-end;
  }
  .links-section .link-mentions .links-figure {
    grid-column: 2 / -1;
    justify-content: flex-start;
  }
  .links-section .links-count {
    font-size: 22px;
  }
}

/* Section: analytics. Rendered by crates/web/src/sections/analytics/; only that section's styles live here.
   Chart layers inside .chart-plot: .chart-grid (gridlines), .chart-curve (area + line, stretched viewBox),
   .chart-markers (dots and guide in % coordinates), then the HTML callout and tooltip, positioned by
   --callout-x/y and --tip-x/y. The island rewrites those through the CSSOM; the defaults below are the
   initial range's milestone (kept in sync by a unit test in chart.rs).
   Two grids of three cards: .analytics-grid (metrics, traffic, rankings: the concept image's row) and
   .insights-grid (visibility score dial, AI share of voice, Monday briefing). */

.analytics-section {
  background:
    radial-gradient(60% 80% at 50% 0%, #eef2f8 0%, transparent 70%),
    linear-gradient(180deg, #f9f9f9, #f5f5f6);
  border-block: 1px solid #e7e8ea;
  padding-block: 64px 72px;
}

.analytics-section .section-heading {
  margin-bottom: 28px;
}

.analytics-section h2 {
  font-size: clamp(28px, 2.6vw, 34px);
}

.analytics-section .section-description {
  max-width: 760px;
  font-size: 16px;
}

.analytics-section .section-note {
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  transition: color .2s ease;
}

.analytics-section .section-note:hover {
  color: var(--green);
}

.analytics-section .analytics-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.analytics-section .preview-card {
  border-radius: 14px;
  box-shadow: 0 1px 2px #101a290a, 0 14px 34px -22px #101a2940;
}

/* Metrics ------------------------------------------------------------------------------------- */

.analytics-section .metrics-card {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 20px;
  margin: 0;
  padding: 26px 24px;
  list-style: none;
}

.analytics-section .metric {
  display: flex;
  align-items: center;
  gap: 16px;
}

.analytics-section .metric-icon {
  --tone: #124ba0;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--tone) 82%, #fff), var(--tone));
  color: #fff;
  box-shadow: 0 8px 18px -10px var(--tone);
}

.analytics-section .metric-purple .metric-icon {
  --tone: #6d5ce8;
}

.analytics-section .metric-coral .metric-icon {
  --tone: #ec4d57;
}

.analytics-section .metric-icon .icon {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

.analytics-section .metric strong {
  display: block;
  font-size: 28px;
  font-weight: 760;
  letter-spacing: -.045em;
  line-height: 1.1;
}

.analytics-section .metric div > span {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: #687570;
}

.analytics-section .metric-growth {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #0f479a;
}

/* Traffic chart ------------------------------------------------------------------------------- */

.analytics-section .traffic-chart {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-bottom: 18px;
}

.analytics-section .traffic-chart .card-toolbar {
  padding: 18px 20px 12px;
}

.analytics-section .traffic-chart .card-toolbar strong,
.analytics-section .rankings-card .card-toolbar strong {
  font-size: 15px;
}

.analytics-section .range-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.analytics-section .range-picker select {
  appearance: none;
  padding: 7px 30px 7px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 550;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.analytics-section .range-picker select:hover {
  border-color: #cccfd5;
  box-shadow: 0 2px 6px -3px #101a2933;
}

.analytics-section .range-picker select:disabled {
  cursor: default;
  opacity: 1;
}

.analytics-section .range-picker .icon {
  position: absolute;
  right: 9px;
  width: 13px;
  height: 13px;
  stroke-width: 2.2;
  color: #5f636c;
  transform: rotate(90deg);
  pointer-events: none;
}

.analytics-section .chart-body {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 22px 0 14px;
}

.analytics-section .chart-y,
.analytics-section .chart-x {
  display: block;
  overflow: visible;
  font-size: 11px;
  fill: #8f939b;
}

.analytics-section .chart-y {
  width: 100%;
  height: 210px;
}

.analytics-section .chart-area {
  min-width: 0;
}

.analytics-section .chart-plot {
  --callout-x: 50.00%;
  --callout-y: 59.50%;
  --tip-x: 50%;
  --tip-y: 50%;
  position: relative;
  height: 210px;
  cursor: crosshair;
  touch-action: pan-y;
  border-radius: 4px;
}

.analytics-section .chart-plot:focus-visible {
  outline-offset: 8px;
}

.analytics-section .chart-grid,
.analytics-section .chart-curve,
.analytics-section .chart-markers {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.analytics-section .chart-grid line {
  stroke: #eaeaec;
  stroke-dasharray: 3 5;
}

.analytics-section .chart-grid line:last-child {
  stroke: #e1e2e5;
  stroke-dasharray: none;
}

.analytics-section .chart-line {
  fill: none;
  stroke: #1250ad;
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.analytics-section .chart-dots circle {
  fill: #1250ad;
  stroke: #fff;
  stroke-width: 1.5;
}

.analytics-section .milestone-dot {
  fill: #0c459a;
  stroke: #fff;
  stroke-width: 3;
  filter: drop-shadow(0 2px 4px #0c326a66);
}

.analytics-section .milestone-pulse {
  fill: #1250ad;
  opacity: .14;
}

.analytics-section .chart-guide {
  stroke: #0c459a;
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0;
  transition: opacity .2s ease;
}

.analytics-section .chart-active {
  fill: #fff;
  stroke: #0c459a;
  stroke-width: 3;
  opacity: 0;
  transition: opacity .2s ease;
}

.analytics-section .chart-plot[data-active] .chart-guide {
  opacity: .55;
}

.analytics-section .chart-plot[data-active] .chart-active {
  opacity: 1;
}

.analytics-section .chart-callout {
  position: absolute;
  left: var(--callout-x);
  top: var(--callout-y);
  translate: -50% calc(-100% - 20px);
  transform-origin: 50% 100%;
  display: flex;
  /* Absolutely positioned at 50%: without this the box shrinks to the space on its right. */
  width: max-content;
  align-items: center;
  gap: 11px;
  padding: 11px 15px 11px 12px;
  border: 1px solid #e8e9eb;
  border-radius: 11px;
  background: #fffffff7;
  box-shadow: 0 12px 28px -14px #101a294d, 0 2px 4px #101a290d;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .25s ease;
}

/* Pointer towards the milestone. */
.analytics-section .chart-callout::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 11px;
  height: 11px;
  translate: -50% 0;
  rotate: 45deg;
  background: #fff;
  border-right: 1px solid #e8e9eb;
  border-bottom: 1px solid #e8e9eb;
}

.analytics-section .chart-callout img {
  display: block;
  width: 28px;
  height: 28px;
}

.analytics-section .chart-callout strong {
  display: block;
  font-size: 13.5px;
  letter-spacing: -.015em;
}

.analytics-section .chart-callout small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: #6b6d72;
}

.analytics-section .chart-plot[data-active] .chart-callout {
  opacity: 0;
}

.analytics-section .chart-tooltip {
  position: absolute;
  left: clamp(66px, var(--tip-x), calc(100% - 66px));
  top: var(--tip-y);
  translate: -50% calc(-100% - 16px);
  display: grid;
  gap: 1px;
  width: max-content;
  min-width: 124px;
  padding: 8px 11px 9px;
  border-radius: 9px;
  background: #111823f2;
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: 0 12px 26px -12px #0b131f4d;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.analytics-section .chart-plot[data-tip-side="below"] .chart-tooltip {
  translate: -50% 16px;
}

.analytics-section .chart-plot[data-active] .chart-tooltip {
  opacity: 1;
}

.analytics-section .chart-tooltip span {
  font-size: 11px;
  color: #adb0b6;
}

.analytics-section .chart-tooltip strong {
  font-size: 13px;
}

.analytics-section .chart-tooltip small {
  font-size: 11px;
  font-weight: 650;
  color: #6b9be3;
}

.analytics-section .chart-x {
  width: 100%;
  height: 20px;
  margin-top: 8px;
}

/* Traffic sources ----------------------------------------------------------------------------- */

.analytics-section .source-breakdown {
  display: grid;
  gap: 10px;
  margin: 14px 22px 0;
  padding-top: 14px;
  border-top: 1px solid #eff0f1;
}

.analytics-section .source-bar {
  display: block;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: #eff0f1;
}

.analytics-section .source-bar rect {
  stroke: #fff;
  stroke-width: 2;
}

.analytics-section .source-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: #6b6d72;
}

.analytics-section .source-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.analytics-section .source-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.analytics-section .source-legend b {
  color: var(--ink);
  font-weight: 650;
}

.analytics-section .source-bar .source-google { fill: #2f7cf6; }
.analytics-section .source-bar .source-ai { fill: #1250ad; }
.analytics-section .source-bar .source-reddit { fill: #ff5b24; }
.analytics-section .source-bar .source-referrals { fill: #f2b230; }
.analytics-section .source-legend .source-google i { background: #2f7cf6; }
.analytics-section .source-legend .source-ai i { background: #1250ad; }
.analytics-section .source-legend .source-reddit i { background: #ff5b24; }
.analytics-section .source-legend .source-referrals i { background: #f2b230; }

/* Rankings ------------------------------------------------------------------------------------ */

.analytics-section .rankings-card {
  min-width: 0;
  overflow: hidden;
  padding-bottom: 8px;
}

.analytics-section .rankings-card .card-toolbar {
  padding: 18px 20px 10px;
}

.analytics-section .rankings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.analytics-section .rankings-table thead th {
  padding: 8px 20px 10px;
  border-bottom: 1px solid #eaebed;
  color: #7d8a84;
  font-size: 12px;
  font-weight: 550;
  text-align: left;
}

.analytics-section .rankings-table thead th:not(:first-child),
.analytics-section .rankings-table td {
  text-align: center;
}

.analytics-section .rankings-table tbody th {
  padding: 14px 8px 14px 20px;
  font-weight: 450;
  text-align: left;
  color: #37393e;
}

.analytics-section .rankings-table td {
  padding: 14px 8px;
}

.analytics-section .rankings-table td:last-child,
.analytics-section .rankings-table thead th:last-child {
  padding-right: 18px;
}

.analytics-section .rankings-table tbody tr:not(:last-child) {
  border-bottom: 1px solid #f1f1f2;
}

.analytics-section .rankings-table tbody tr {
  transition: background-color .2s ease;
}

.analytics-section .rankings-table tbody tr:hover {
  background: #f8f8f9;
}

.analytics-section .rank-before {
  color: #8a9690;
}

.analytics-section .rank-now {
  white-space: nowrap;
}

/* The old and new positions share one cell; the old one waits above, clipped. */
.analytics-section .rank-roll {
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  vertical-align: middle;
  min-width: 28px;
  height: 24px;
  padding-inline: 6px;
  border-radius: 7px;
  background: #e5ecf6;
  color: #0b397d;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.analytics-section .rank-roll > * {
  grid-area: 1 / 1;
}

.analytics-section .rank-old {
  color: #8a9690;
  transform: translate3d(0, -130%, 0);
}

.analytics-section .rank-gain {
  display: inline-block;
  min-width: 28px;
  margin-left: 6px;
  vertical-align: middle;
  font-size: 11px;
  font-weight: 700;
  color: #0f479a;
  text-align: left;
}

/* Visibility row -------------------------------------------------------------------------------- */

.analytics-section .insights-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  margin-top: 18px;
}

.analytics-section .insights-grid .card-toolbar {
  padding: 18px 20px 8px;
}

.analytics-section .insights-grid .card-toolbar strong {
  font-size: 15px;
}

/* Visibility score dial ------------------------------------------------------------------------- */

.analytics-section .score-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-bottom: 16px;
}

.analytics-section .score-chip {
  flex-shrink: 0;
  padding: 4px 9px;
  border-radius: 99px;
  background: #e5ecf6;
  color: #0b397d;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.analytics-section .score-dial {
  position: relative;
  width: min(100%, 214px);
  margin: 2px auto 0;
}

.analytics-section .score-gauge {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.analytics-section .score-segment {
  cursor: pointer;
  transition: opacity .25s ease;
}

.analytics-section .score-segment path {
  fill: none;
  stroke-width: 13;
}

.analytics-section .score-track {
  stroke: #eeeff1;
}

.analytics-section .score-fill {
  stroke: #1250ad;
}

.analytics-section .score-segment:hover .score-fill {
  stroke: #0c459a;
}

.analytics-section .score-readout {
  position: absolute;
  left: 50%;
  top: 58%;
  display: grid;
  justify-items: center;
  width: 64%;
  translate: -50% -50%;
  text-align: center;
  pointer-events: none;
}

.analytics-section .score-label {
  max-width: 100%;
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 600;
  color: #6e7074;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.analytics-section .score-value {
  font-size: 46px;
  font-weight: 780;
  letter-spacing: -.05em;
  line-height: 1.02;
  font-variant-numeric: tabular-nums;
}

.analytics-section .score-value small {
  margin-left: 2px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0;
  color: #8a9690;
}

.analytics-section .score-delta {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: #0f479a;
  white-space: nowrap;
}

.analytics-section .score-caption {
  margin: 4px 18px 12px;
  overflow: hidden;
  font-size: 12px;
  color: #6b6d72;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.analytics-section .score-key {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0 16px;
  list-style: none;
}

.analytics-section .score-key-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 6px;
  width: 100%;
  padding: 7px 9px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: #f7f7f8;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: opacity .25s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.analytics-section .score-key-item:hover,
.analytics-section .score-key-item[aria-pressed="true"] {
  border-color: #cfd9e9;
  background: #fff;
  box-shadow: 0 6px 14px -10px #0c326a66;
}

.analytics-section .score-key-name {
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.analytics-section .score-key-value {
  font-size: 12px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


.analytics-section .score-key-bar {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: 4px;
}

.analytics-section .score-key-track { fill: #e8e9ec; }
.analytics-section .score-key-fill { fill: #1250ad; }

/* Inspecting one area dims the others, on the dial and in the key. */
.analytics-section .score-card[data-inspecting] .score-segment,
.analytics-section .score-card[data-inspecting] .score-key-item {
  opacity: .42;
}

.analytics-section .score-card[data-inspecting="technical"] [data-area="technical"],
.analytics-section .score-card[data-inspecting="content"] [data-area="content"],
.analytics-section .score-card[data-inspecting="presence"] [data-area="presence"],
.analytics-section .score-card[data-inspecting="authority"] [data-area="authority"],
.analytics-section .score-card[data-inspecting="conversion"] [data-area="conversion"],
.analytics-section .score-card[data-inspecting="ai"] [data-area="ai"] {
  opacity: 1;
}

/* AI share of voice ----------------------------------------------------------------------------- */

.analytics-section .voice-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-bottom: 16px;
}

.analytics-section .voice-week {
  flex-shrink: 0;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  color: #484c56;
  white-space: nowrap;
}

.analytics-section .voice-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 9px;
  margin: 0;
  padding: 2px 20px 8px;
}

.analytics-section .voice-summary strong {
  font-size: 30px;
  font-weight: 760;
  letter-spacing: -.045em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.analytics-section .voice-summary span {
  font-size: 13px;
  color: #6b6d72;
}

.analytics-section .voice-summary small {
  font-size: 12.5px;
  font-weight: 700;
  color: #0f479a;
}

.analytics-section .voice-chart {
  --voice-x: 100.00%;
  --voice-name: 104px;
  --voice-value: 40px;
  --voice-delta: 34px;
  --voice-gap: 14px;
  position: relative;
  flex: 1;
  margin: 0 20px;
}

/* Rows share the card's height, so the plots grow with it. */
.analytics-section .voice-rows {
  display: grid;
  grid-auto-rows: minmax(52px, 1fr);
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.analytics-section .voice-row {
  display: grid;
  grid-template-columns: var(--voice-name) minmax(0, 1fr) var(--voice-value) var(--voice-delta);
  align-items: center;
  column-gap: var(--voice-gap);
  border-bottom: 1px solid #f1f1f2;
}

.analytics-section .voice-row:last-child {
  border-bottom: 0;
}

.analytics-section .voice-engine {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  font-weight: 620;
  white-space: nowrap;
}

/* Neutral engine marks: a tinted ring, not a logo. */
.analytics-section .voice-engine i {
  --mark: #104ba3;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border: 2.5px solid var(--mark);
  border-radius: 50%;
}

.analytics-section .voice-row[data-engine="chatgpt"] i { --mark: #104ba3; }
.analytics-section .voice-row[data-engine="perplexity"] i { --mark: #1f8a9e; }
.analytics-section .voice-row[data-engine="gemini"] i { --mark: #5b6ee1; }
.analytics-section .voice-row[data-engine="claude"] i { --mark: #d97757; }

.analytics-section .voice-plot {
  position: relative;
  height: 40px;
}

.analytics-section .voice-curve,
.analytics-section .voice-dot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.analytics-section .voice-line {
  fill: none;
  stroke: #1250ad;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.analytics-section .voice-dot circle {
  fill: #fff;
  stroke: #0c459a;
  stroke-width: 2.5;
}

.analytics-section .voice-value {
  font-size: 14px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.analytics-section .voice-delta {
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #0f479a;
}

.analytics-section .voice-hit {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--voice-name) + var(--voice-gap));
  right: calc(var(--voice-value) + var(--voice-delta) + 2 * var(--voice-gap));
  border-radius: 4px;
  cursor: crosshair;
  touch-action: pan-y;
}

.analytics-section .voice-hit:focus-visible {
  outline-offset: 4px;
}

.analytics-section .voice-guide {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: var(--voice-x);
  border-left: 1px dashed #0c459a;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.analytics-section .voice-card[data-active] .voice-guide {
  opacity: .55;
}

.analytics-section .voice-footnote {
  margin: 10px 20px 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: #7d8a84;
}

/* Monday briefing ------------------------------------------------------------------------------- */

.analytics-section .briefing-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 18px 20px 16px;
}

.analytics-section .briefing-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.analytics-section .briefing-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(150deg, #2363c4, #0b3e8a);
  box-shadow: 0 6px 14px -8px #0b3e8a;
}

.analytics-section .briefing-avatar .icon {
  width: 16px;
  height: 16px;
  color: #fff;
  stroke-width: 2;
}

.analytics-section .briefing-from {
  flex: 1;
  min-width: 0;
}

.analytics-section .briefing-from strong {
  display: block;
  font-size: 13.5px;
  letter-spacing: -.01em;
}

.analytics-section .briefing-from span {
  display: block;
  font-size: 11.5px;
  color: #7d8a84;
}

.analytics-section .briefing-unread {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 7px;
  border-radius: 99px;
  background: #e5ecf6;
  color: #0b397d;
  font-size: 11px;
  font-weight: 700;
}

.analytics-section .briefing-unread i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1250ad;
}

.analytics-section .briefing-subject {
  margin: 14px 0 12px;
}

.analytics-section .briefing-subject h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 720;
  letter-spacing: -.02em;
}

.analytics-section .briefing-subject span {
  font-size: 12px;
  color: #7d8a84;
}

.analytics-section .briefing-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.analytics-section .briefing-kpis li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0 7px;
  padding: 9px 11px;
  border-radius: 10px;
  background: #f4f6fa;
}

.analytics-section .briefing-kpis span {
  grid-column: 1 / -1;
  font-size: 11px;
  color: #6e7074;
}

.analytics-section .briefing-kpis strong {
  font-size: 20px;
  font-weight: 760;
  letter-spacing: -.04em;
  line-height: 1.2;
}

.analytics-section .briefing-kpis small {
  font-size: 11.5px;
  font-weight: 700;
  color: #0f479a;
  white-space: nowrap;
}

.analytics-section .briefing-lines {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.analytics-section .briefing-line {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f1f1f2;
}

.analytics-section .briefing-kind {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #7d8a84;
  white-space: nowrap;
}

.analytics-section .briefing-kind::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kind, #1250ad);
}

.analytics-section .briefing-line[data-kind="tested"] { --kind: #6d5ce8; }
.analytics-section .briefing-line[data-kind="paused"] { --kind: #e2a325; }
.analytics-section .briefing-line[data-kind="next"] { --kind: #2f7cf6; }
.analytics-section .briefing-line[data-kind="needs-you"] { --kind: #1250ad; }

.analytics-section .briefing-line p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: #37393e;
}

.analytics-section .briefing-line b {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  font-weight: 700;
  color: #0f479a;
}

.analytics-section .briefing-line[data-kind="needs-you"] {
  margin-top: 6px;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(90deg, #e9eff8, #f3f6fb);
}

.analytics-section .briefing-line[data-kind="needs-you"] .briefing-kind {
  color: #0b397d;
}

.analytics-section .briefing-line[data-kind="needs-you"] p {
  font-weight: 700;
  color: #0b2d5f;
}

.analytics-section .briefing-line[data-kind="needs-you"] b {
  display: inline;
  margin-left: 4px;
  font-weight: 550;
  color: #3f577a;
}

.analytics-section .briefing-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin-top: auto;
  padding-top: 12px;
  color: var(--green);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}

.analytics-section .briefing-cta .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
  transition: transform .25s var(--motion-ease-out);
}

.analytics-section .briefing-cta:hover .icon {
  transform: translate3d(3px, 0, 0);
}

/* Motion (reveal and redraw) ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  .analytics-section [data-reveal-state="visible"] .chart-fill,
  .analytics-section .traffic-chart[data-redrawn] .chart-fill {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: chart-fill-in 1s var(--motion-ease-out) 1.05s backwards;
  }
  .analytics-section .traffic-chart[data-redrawn] .chart-line {
    stroke-dasharray: 1;
    animation: outpost-draw 1.1s var(--motion-ease-in-out) backwards;
  }
  .analytics-section [data-reveal-state="visible"] .chart-dots circle,
  .analytics-section .traffic-chart[data-redrawn] .chart-dots circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: chart-pop .45s var(--motion-ease-out) backwards;
    animation-delay: calc(.2s + var(--dot, 0) * 95ms);
  }
  .analytics-section .chart-dots circle:nth-child(2) { --dot: 1; }
  .analytics-section .chart-dots circle:nth-child(3) { --dot: 2; }
  .analytics-section .chart-dots circle:nth-child(4) { --dot: 3; }
  .analytics-section .chart-dots circle:nth-child(5) { --dot: 4; }
  .analytics-section .chart-dots circle:nth-child(6) { --dot: 5; }
  .analytics-section .chart-dots circle:nth-child(7) { --dot: 6; }
  .analytics-section .chart-dots circle:nth-child(8) { --dot: 7; }
  .analytics-section .chart-dots circle:nth-child(9) { --dot: 8; }
  .analytics-section .chart-dots circle:nth-child(10) { --dot: 9; }
  .analytics-section .chart-dots circle:nth-child(11) { --dot: 10; }
  .analytics-section .chart-dots circle:nth-child(12) { --dot: 11; }
  .analytics-section .chart-dots circle:nth-child(13) { --dot: 12; }
  .analytics-section .chart-dots circle:nth-child(14) { --dot: 13; }
  .analytics-section .chart-dots circle:nth-child(15) { --dot: 14; }
  .analytics-section .chart-dots circle:nth-child(n+16) { --dot: 15; }

  .analytics-section [data-reveal-state="visible"] .milestone-dot,
  .analytics-section .traffic-chart[data-redrawn] .milestone-dot {
    transform-box: fill-box;
    transform-origin: center;
    animation: chart-pop .6s var(--motion-ease-out) 1s backwards;
  }
  .analytics-section [data-reveal-state="visible"] .milestone-pulse,
  .analytics-section .traffic-chart[data-redrawn] .milestone-pulse {
    transform-box: fill-box;
    transform-origin: center;
    animation: chart-pulse 2.2s ease-out 1.4s 4 backwards;
  }
  .analytics-section [data-reveal-state="visible"] .chart-callout,
  .analytics-section .traffic-chart[data-redrawn] .chart-callout {
    animation: chart-callout-in .7s var(--motion-ease-out) 1.15s backwards;
  }

  .analytics-section .source-bar rect {
    transform-box: fill-box;
    transform-origin: 0 50%;
  }
  .analytics-section [data-reveal-state="visible"] .source-bar rect,
  .analytics-section .traffic-chart[data-redrawn] .source-bar rect {
    animation: chart-grow .9s var(--motion-ease-out) backwards;
    animation-delay: calc(.6s + var(--segment, 0) * 120ms);
  }
  .analytics-section .source-bar rect:nth-child(2) { --segment: 1; }
  .analytics-section .source-bar rect:nth-child(3) { --segment: 2; }
  .analytics-section .source-bar rect:nth-child(4) { --segment: 3; }

  .analytics-section .rankings-card[data-reveal-state="visible"] .rank-old {
    animation: rank-old-out .6s var(--motion-ease-in-out) backwards;
    animation-delay: calc(.45s + var(--row, 0) * 140ms);
  }
  .analytics-section .rankings-card[data-reveal-state="visible"] .rank-roll strong {
    animation: rank-new-in .6s var(--motion-ease-out) backwards;
    animation-delay: calc(.5s + var(--row, 0) * 140ms);
  }
  .analytics-section .rankings-card[data-reveal-state="visible"] .rank-roll {
    animation: rank-pill .7s var(--motion-ease-out) backwards;
    animation-delay: calc(.5s + var(--row, 0) * 140ms);
  }
  .analytics-section .rankings-card[data-reveal-state="visible"] .rank-gain {
    animation: rank-gain-in .5s var(--motion-ease-out) backwards;
    animation-delay: calc(.85s + var(--row, 0) * 140ms);
  }
  .analytics-section .rankings-table tbody tr:nth-child(2) { --row: 1; }
  .analytics-section .rankings-table tbody tr:nth-child(3) { --row: 2; }
  .analytics-section .rankings-table tbody tr:nth-child(4) { --row: 3; }
  .analytics-section .rankings-table tbody tr:nth-child(5) { --row: 4; }

  /* Visibility score: the delta lands once the sweep finishes; hidden only while sweeping. */
  .analytics-section .score-card[data-sweep="pending"] .score-delta,
  .analytics-section .score-card[data-sweep="running"] .score-delta {
    opacity: 0;
  }
  .analytics-section .score-card[data-sweep="done"] .score-delta {
    animation: score-delta-in .55s var(--motion-ease-out) backwards;
  }
  .analytics-section .score-card[data-sweep="done"] .score-chip {
    animation: rank-pill .7s var(--motion-ease-out) .1s backwards;
  }

  /* Share of voice: the areas rise and the dots pop in after the lines draw. */
  .analytics-section .voice-card[data-reveal-state="visible"] .voice-area {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: chart-fill-in .9s var(--motion-ease-out) backwards;
    animation-delay: calc(.9s + var(--row, 0) * 110ms);
  }
  .analytics-section .voice-card[data-reveal-state="visible"] .voice-dot circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: chart-pop .45s var(--motion-ease-out) backwards;
    animation-delay: calc(1.3s + var(--row, 0) * 110ms);
  }
  .analytics-section .voice-row:nth-child(2) { --row: 1; }
  .analytics-section .voice-row:nth-child(3) { --row: 2; }
  .analytics-section .voice-row:nth-child(4) { --row: 3; }

  /* Monday briefing: the email's lines arrive one by one; "needs you" lands last. */
  .analytics-section .briefing-card[data-reveal-state="visible"] .briefing-kpis li,
  .analytics-section .briefing-card[data-reveal-state="visible"] .briefing-line {
    animation: briefing-line-in .6s var(--motion-ease-out) backwards;
    animation-delay: calc(.35s + var(--line, 0) * 120ms);
  }
  .analytics-section .briefing-kpis li:nth-child(2) { --line: 1; }
  .analytics-section .briefing-line:nth-child(1) { --line: 2; }
  .analytics-section .briefing-line:nth-child(2) { --line: 3; }
  .analytics-section .briefing-line:nth-child(3) { --line: 4; }
  .analytics-section .briefing-line:nth-child(4) { --line: 6; }
  .analytics-section .briefing-card[data-reveal-state="visible"] .briefing-unread i {
    animation: briefing-unread 1.8s ease-out 1.2s 3 backwards;
  }
}

@keyframes score-delta-in {
  from {
    opacity: 0;
    transform: translate3d(0, 6px, 0) scale(.9);
  }
}

@keyframes briefing-line-in {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
}

/* A ring that grows and fades around the unread dot (transform and opacity only). */
@keyframes briefing-unread {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: .35;
    transform: scale(1.6);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes chart-fill-in {
  from {
    opacity: 0;
    transform: scaleY(.55);
  }
}

@keyframes chart-pop {
  from {
    opacity: 0;
    transform: scale(0);
  }
}

@keyframes chart-pulse {
  0% {
    opacity: 0;
    transform: scale(.5);
  }
  15% {
    opacity: .45;
  }
  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}

@keyframes chart-callout-in {
  from {
    opacity: 0;
    scale: .82;
  }
}

@keyframes chart-grow {
  from {
    transform: scaleX(0);
  }
}

@keyframes rank-old-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes rank-new-in {
  from {
    opacity: 0;
    transform: translate3d(0, 120%, 0);
  }
}

@keyframes rank-pill {
  0% {
    transform: scale(1);
  }
  55% {
    transform: scale(1.14);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes rank-gain-in {
  from {
    opacity: 0;
    transform: translate3d(-6px, 0, 0);
  }
}

/* Responsive ---------------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .analytics-section .analytics-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  }
  .analytics-section .metrics-card {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    padding: 22px 26px;
  }
  .analytics-section .metric {
    flex: 1;
  }
}

@media (max-width: 860px) {
  .analytics-section .analytics-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .analytics-section {
    padding-block: 44px 52px;
  }
  .analytics-section .section-description {
    font-size: 15px;
  }
  .analytics-section .metrics-card {
    gap: 10px;
    padding: 18px 14px;
  }
  .analytics-section .metric {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .analytics-section .metric-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }
  .analytics-section .metric-icon .icon {
    width: 19px;
    height: 19px;
  }
  .analytics-section .metric strong {
    font-size: 23px;
  }
  .analytics-section .metric div > span {
    font-size: 12px;
  }
  .analytics-section .metric-growth {
    font-size: 12px;
  }
  .analytics-section .traffic-chart .card-toolbar {
    padding: 16px 16px 8px;
  }
  .analytics-section .chart-body {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 8px;
    padding: 14px 16px 0 10px;
  }
  .analytics-section .chart-y,
  .analytics-section .chart-plot {
    height: 190px;
  }
  .analytics-section .chart-y,
  .analytics-section .chart-x {
    font-size: 10.5px;
  }
  .analytics-section .chart-callout {
    gap: 8px;
    padding: 8px 11px 8px 9px;
  }
  .analytics-section .chart-callout img {
    width: 22px;
    height: 22px;
  }
  .analytics-section .chart-callout strong {
    font-size: 12.5px;
  }
  .analytics-section .chart-callout small {
    font-size: 11px;
  }
  .analytics-section .source-breakdown {
    margin-inline: 16px;
  }
  .analytics-section .source-legend {
    gap: 6px 12px;
    font-size: 11.5px;
  }
  .analytics-section .rankings-table tbody th {
    padding-left: 16px;
  }
  .analytics-section .rankings-table thead th:first-child {
    padding-left: 16px;
  }
}

@media (max-width: 400px) {
  .analytics-section .chart-callout {
    gap: 7px;
    padding: 7px 9px 7px 8px;
    translate: -50% calc(-100% - 16px);
  }
  .analytics-section .chart-callout img {
    width: 18px;
    height: 18px;
  }
  .analytics-section .chart-callout strong {
    font-size: 11.5px;
  }
  .analytics-section .chart-callout small {
    font-size: 10px;
  }
}

@media (max-width: 370px) {
  .analytics-section .metric strong {
    font-size: 20px;
  }
  .analytics-section .rankings-table {
    font-size: 12px;
  }
  .analytics-section .rank-gain {
    display: none;
  }
}

/* Visibility row, responsive. Between 621px and 1180px the dial card becomes a full-width strip
   (dial on the left, breakdown on the right) above share of voice and the briefing. */
@media (max-width: 1180px) {
  .analytics-section .insights-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  }
  .analytics-section .score-card {
    grid-column: 1 / -1;
  }
}

@media (min-width: 621px) and (max-width: 1180px) {
  .analytics-section .score-card {
    display: grid;
    grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
    grid-template-rows: auto 1fr 1fr;
    column-gap: 28px;
    padding: 0 24px 20px 4px;
  }
  .analytics-section .score-card .card-toolbar {
    grid-column: 1 / -1;
    padding-left: 20px;
    padding-right: 0;
  }
  .analytics-section .score-dial {
    grid-row: 2 / 4;
    align-self: center;
    margin: 0 0 0 20px;
  }
  /* Caption and key sit as one block, centred on the dial. */
  .analytics-section .score-caption {
    grid-column: 2;
    align-self: end;
    margin: 0 0 10px;
    text-align: left;
  }
  .analytics-section .score-key {
    grid-column: 2;
    align-self: start;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: 8px;
    padding: 0;
  }
}

@media (max-width: 860px) {
  .analytics-section .insights-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .analytics-section .insights-grid .card-toolbar {
    padding: 16px 16px 8px;
  }
  .analytics-section .voice-summary {
    padding-inline: 16px;
  }
  .analytics-section .voice-chart {
    margin-inline: 16px;
  }
  .analytics-section .voice-footnote {
    margin-inline: 16px;
  }
  .analytics-section .briefing-card {
    padding: 16px 16px 14px;
  }
}

@media (max-width: 480px) {
  .analytics-section .score-key {
    padding-inline: 12px;
  }
  .analytics-section .voice-chart {
    --voice-name: 82px;
    --voice-value: 34px;
    --voice-delta: 26px;
    --voice-gap: 9px;
  }
  .analytics-section .voice-engine {
    gap: 6px;
    font-size: 12px;
  }
  .analytics-section .voice-engine i {
    width: 8px;
    height: 8px;
    border-width: 2px;
  }
  .analytics-section .voice-value {
    font-size: 13px;
  }
  .analytics-section .voice-delta {
    font-size: 11px;
  }
  .analytics-section .voice-summary strong {
    font-size: 26px;
  }
  .analytics-section .voice-summary span {
    font-size: 12px;
  }
}

@media (max-width: 370px) {
  .analytics-section .score-key {
    gap: 5px;
    padding-inline: 10px;
  }
  .analytics-section .score-key-item {
    padding: 6px 7px 7px;
  }
  .analytics-section .score-key-name,
  .analytics-section .score-key-value {
    font-size: 11.5px;
  }
  .analytics-section .briefing-line {
    grid-template-columns: 84px minmax(0, 1fr);
  }
}

/* While a week is inspected, the "from" note would compare the week with itself. */
.analytics-section .voice-card[data-active] .voice-summary small {
  opacity: 0;
}

/* Section: pricing. Rendered by crates/web/src/sections/pricing/; only that section's styles live here.
   The enquiry form inside the Agency dialog is styled by sections/agency.css. */

.pricing-section {
  --plan-fresh: #0a3d8a;
  --plan-fresh-hover: #083579;
  --plan-deep: #0a2b5c;
  --plan-deep-hover: #07224a;
  --plan-ring: var(--brand);
  --plan-card-shadow: 0 1px 2px #0f1a2a0a, 0 8px 24px -16px #0f1a2a33;
  --agency-ink: #eaeff6;
  --agency-muted: #b2b6c0;
  position: relative;
  padding-block: 64px 40px;
  scroll-margin-top: 100px;
}

.pricing-section [hidden] {
  display: none !important;
}

/* A soft green wash behind the cards, so the section reads as one stage. */
.pricing-section::before {
  content: "";
  position: absolute;
  inset: 120px 0 auto;
  height: 620px;
  z-index: -1;
  background: radial-gradient(60% 55% at 40% 45%, #e7edf6 0%, #f3f6fa 45%, transparent 75%);
  pointer-events: none;
}

.pricing-section .section-heading {
  margin-bottom: 34px;
}

.pricing-section .section-description {
  max-width: none;
  margin-top: 10px;
}

.plan-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Plan card ------------------------------------------------------------------------------ */

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 26px 22px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--plan-card-shadow);
  cursor: pointer;
  transition: border-color .25s var(--motion-ease-out), box-shadow .3s var(--motion-ease-out), transform .3s var(--motion-ease-out);
}

.price-card:hover {
  border-color: #cdced2;
  box-shadow: 0 1px 2px #0f1a2a0a, 0 18px 36px -20px #0f1a2a4d;
  transform: translate3d(0, -3px, 0);
}

.price-card[data-featured] {
  border-color: #8fa9d0;
  background: linear-gradient(180deg, #eff3fa 0, #fff 170px);
  box-shadow: 0 1px 2px #0f1a2a0a, 0 18px 40px -22px #0a2b5c66;
}

.price-card[data-selected="true"] {
  border-color: var(--plan-ring);
  box-shadow: 0 0 0 3px #124da626, 0 18px 40px -22px #0a2b5c66;
}

/* The card is one large target for its radio. The label's own box is dissolved so its
   name and tagline can sit in the heading grid beside the icon. */
.plan-choice {
  display: contents;
  cursor: pointer;
}

.plan-choice::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}

.price-card:has(.plan-radio:focus-visible) {
  outline: 3px solid var(--plan-ring);
  outline-offset: 4px;
}

.price-badge {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  padding: 6px 13px;
  border-radius: 999px;
  background: linear-gradient(180deg, #0c408f, #0a326f);
  box-shadow: 0 6px 14px -6px #0a2b5ca6, inset 0 1px 0 #ffffff33;
  color: #fff;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .08em;
  white-space: nowrap;
}

.plan-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 12px;
}

/* The icon spans both lines; the name and tagline (the radio's dissolved label, or the
   Agency card's wrapper) sit beside it. */
.plan-head .plan-icon {
  grid-row: 1 / span 2;
}

.plan-head .plan-name,
.plan-head .plan-tagline,
.plan-head > div {
  grid-column: 2;
  text-align: left;
}

.plan-head > div {
  grid-row: 1 / span 2;
}

.plan-head .plan-name {
  align-self: end;
}

.plan-head .plan-tagline {
  align-self: start;
}

.plan-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(160deg, #104aa0, #0a326f);
  box-shadow: inset 0 1px 0 #ffffff40, 0 4px 10px -4px #0a2b5c80;
  color: #fff;
}

.plan-icon .icon {
  width: 20px;
  height: 20px;
}

.price-card[data-tone="deep"] .plan-icon {
  background: linear-gradient(160deg, #0d397a, #061d3f);
}

.price-card[data-tone="plain"] .plan-icon {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 2px 6px -3px #0f1a2a33;
  color: #272b35;
}

.plan-name {
  display: block;
  font-size: 17px;
  font-weight: 720;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.plan-tagline {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-top: 20px;
  white-space: nowrap;
  line-height: 1;
}

.plan-price strong {
  font-size: 40px;
  font-weight: 780;
  letter-spacing: -.05em;
}

.plan-price span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 560;
}

/* The guarantee badge (Growth, Autopilot) links to the terms, above the card's label. */
.plan-guarantee {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin-top: 14px;
  padding: 5px 10px 5px 8px;
  border: 1px solid #b9c9e2;
  border-radius: 999px;
  background: #ecf1f8;
  color: var(--deep);
  font-size: 12px;
  font-weight: 680;
  transition: border-color .2s, background-color .2s;
}

.plan-guarantee .icon {
  width: 14px;
  height: 14px;
  color: var(--plan-fresh);
}

.plan-guarantee:hover {
  border-color: #8fa9d0;
  background: #e1e9f4;
}

.plan-guarantee:focus-visible {
  outline: 2px solid var(--plan-ring);
  outline-offset: 2px;
}

.price-card .plan-features {
  gap: 11px;
  margin: 18px 0 22px;
  padding-top: 18px;
  border-top: 1px solid #eeeff0;
  font-size: 13.5px;
  color: #4a4e58;
}

.price-card .plan-features .icon {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  stroke-width: 2.2;
}

.price-card .plan-allowance {
  color: var(--ink);
  font-weight: 650;
}

/* The plan priced at the chosen volume. */
.plan-at-volume {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: auto 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f5f5f6;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}

.plan-at-volume strong {
  color: var(--ink);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.price-card[data-selected="true"] .plan-at-volume {
  background: #e9eef6;
  color: #2f425f;
}

.plan-cta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 11px 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--plan-fresh);
  color: #fff;
  font-size: 14px;
  font-weight: 680;
  box-shadow: inset 0 1px 0 #ffffff26, 0 6px 14px -8px #0a2b5cb3;
  overflow: hidden;
  transition: background .2s, box-shadow .25s var(--motion-ease-out), transform .25s var(--motion-ease-out);
}

.plan-cta .icon {
  width: 16px;
  height: 16px;
  transition: transform .25s var(--motion-ease-out);
}

.plan-cta:hover {
  background: var(--plan-fresh-hover);
  box-shadow: inset 0 1px 0 #ffffff26, 0 10px 20px -10px #0a2b5ccc;
}

.plan-cta:hover .icon,
.plan-cta:focus-visible .icon {
  transform: translateX(4px);
}

.plan-cta:active {
  transform: translateY(1px);
}

.price-card[data-tone="deep"] .plan-cta {
  background: var(--plan-deep);
}

.price-card[data-tone="deep"] .plan-cta:hover {
  background: var(--plan-deep-hover);
}

.price-card[data-tone="plain"] .plan-cta {
  border-color: #dcdee3;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2px 6px -3px #0f1a2a26;
}

.price-card[data-tone="plain"] .plan-cta .icon {
  color: var(--plan-fresh);
}

.price-card[data-tone="plain"] .plan-cta:hover {
  border-color: #bdbfc4;
  background: #f7f8f9;
}

/* A sheen sweeps across a call to action on hover. */
.plan-cta::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, #ffffff40, transparent);
  transform: skewX(-18deg) translateX(0);
  pointer-events: none;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .plan-cta:hover::before {
    opacity: 1;
    transform: skewX(-18deg) translateX(420%);
    transition: transform .8s var(--motion-ease-out), opacity .2s;
  }
}

/* Agency & Concierge: a dark card with no radio and no slider. ----------------------------- */

.agency-card {
  isolation: isolate;
  overflow: hidden;
  border-color: #0d254a;
  background:
    radial-gradient(120% 70% at 100% 0%, #1a407a66 0%, transparent 60%),
    linear-gradient(165deg, #0b1f3d 0%, #061224 100%);
  box-shadow: 0 1px 2px #0f1a2a14, 0 24px 48px -26px #0a0c12cc;
  color: var(--agency-ink);
  cursor: default;
}

/* A faint dot grid and ring, echoing the globe. */
.agency-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(#ffffff12 1px, transparent 1.2px);
  background-size: 18px 18px;
  mask-image: linear-gradient(200deg, #000 0%, transparent 55%);
  pointer-events: none;
}

.agency-card:hover {
  border-color: #133466;
  box-shadow: 0 1px 2px #0f1a2a14, 0 30px 56px -26px #0a0c12e6;
}

.agency-card .plan-icon {
  border: 1px solid #ffffff24;
  background: #ffffff14;
  box-shadow: inset 0 1px 0 #ffffff1f;
  color: #7facf0;
}

.agency-card .plan-name {
  color: #fff;
}

.agency-card .plan-tagline,
.agency-card .plan-price span {
  color: var(--agency-muted);
}

.agency-card .plan-price strong {
  color: #fff;
  font-size: 34px;
}

.agency-card .plan-features {
  border-top-color: #ffffff1f;
  color: #d3dbe7;
}

.agency-card .plan-features .icon {
  color: #6fa3f0;
}

.agency-card .plan-allowance {
  color: #fff;
}

/* A miniature client portal: white-label reports going out to client sites. */
.agency-portal {
  margin: auto 0 0;
  padding: 12px 12px 10px;
  border: 1px solid #ffffff1a;
  border-radius: 12px;
  background: #ffffff0a;
}

.agency-portal p {
  color: var(--agency-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.agency-portal ul {
  display: grid;
  gap: 7px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
}

.agency-portal li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #eaeff6;
  font-size: 12.5px;
}

.agency-portal i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3f7fe0;
  box-shadow: 0 0 0 3px #3f7fe026;
}

.agency-portal span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agency-portal em {
  margin-left: auto;
  color: #7facf0;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 650;
  white-space: nowrap;
}

.agency-card .plan-at-volume {
  margin-top: 12px;
  background: #ffffff0f;
  color: var(--agency-muted);
  white-space: nowrap;
}

.agency-card .plan-at-volume strong {
  color: #fff;
  font-size: 12.5px;
  font-weight: 650;
}

.agency-card .plan-cta {
  background: #fff;
  color: #061224;
  box-shadow: 0 10px 22px -12px #000c;
}

.agency-card .plan-cta .icon {
  color: var(--plan-fresh);
}

.agency-card .plan-cta:hover {
  background: #e9eff7;
}

.agency-card .plan-cta:focus-visible {
  outline: 3px solid #6fa3f0;
  outline-offset: 3px;
}

/* Works at $0 ---------------------------------------------------------------------------- */

.pricing-zero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 26px auto 0;
  padding: 12px 20px 12px 12px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid #cfd9e9;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 26px -18px #0a2b5c66;
}

.pricing-zero-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(160deg, #104aa0, #0a2b5c);
  box-shadow: inset 0 1px 0 #ffffff40, 0 6px 14px -6px #0a2b5cb3;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.03em;
}

.pricing-zero p {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.pricing-zero strong {
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 720;
  letter-spacing: -.015em;
}

.pricing-zero p span {
  color: var(--muted);
  font-size: 13px;
}

/* Volume strip --------------------------------------------------------------------------- */

.volume-card {
  display: grid;
  grid-template-columns: minmax(200px, .9fr) minmax(0, 1.5fr) minmax(220px, .9fr);
  grid-template-areas:
    "heading control total"
    "note note total";
  align-items: center;
  gap: 14px 32px;
  min-width: 0;
  margin-top: 22px;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--plan-card-shadow);
}

.volume-heading {
  grid-area: heading;
}

.volume-control {
  grid-area: control;
}

.volume-note {
  grid-area: note;
}

.volume-total {
  grid-area: total;
}

.volume-heading h3 {
  font-size: 17px;
  font-weight: 720;
  letter-spacing: -.02em;
}

.volume-heading p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13.5px;
}

.volume-heading .volume-plan {
  display: inline-flex;
  gap: 5px;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ecf1f8;
  color: #2f425f;
  font-size: 12px;
}

.volume-plan strong {
  color: var(--deep);
}

.volume-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
}

.volume-slider {
  --thumb: 22px;
  padding-top: 9px;
}

.volume-slider input {
  --fill: 0%;
  display: block;
  width: 100%;
  height: var(--thumb);
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.volume-slider input:disabled {
  cursor: default;
}

.volume-slider input::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--plan-fresh) 0 var(--fill), #e9eaec var(--fill) 100%);
}

.volume-slider input::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: #e9eaec;
}

.volume-slider input::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--plan-fresh);
}

.volume-slider input::-webkit-slider-thumb {
  width: var(--thumb);
  height: var(--thumb);
  margin-top: calc((8px - var(--thumb)) / 2);
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--plan-deep);
  box-shadow: 0 0 0 1px #0a2b5c26, 0 3px 8px #0a2b5c59;
  -webkit-appearance: none;
  transition: transform .2s var(--motion-ease-out), box-shadow .2s;
}

.volume-slider input::-moz-range-thumb {
  width: var(--thumb);
  height: var(--thumb);
  box-sizing: border-box;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--plan-deep);
  box-shadow: 0 0 0 1px #0a2b5c26, 0 3px 8px #0a2b5c59;
}

.volume-slider input:not(:disabled):hover::-webkit-slider-thumb,
.volume-slider input:not(:disabled):active::-webkit-slider-thumb {
  transform: scale(1.12);
  box-shadow: 0 0 0 6px #124da626, 0 3px 8px #0a2b5c59;
}

.volume-slider input:focus-visible {
  outline: none;
}

.volume-slider input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px #124da659, 0 3px 8px #0a2b5c59;
}

.volume-slider input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px #124da659, 0 3px 8px #0a2b5c59;
}

/* The ends of the range: the plan's allowance and the maximum. */
.range-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: #81858f;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.volume-count {
  display: grid;
  justify-items: center;
  gap: 5px;
}

.volume-count strong {
  display: grid;
  place-items: center;
  min-width: 66px;
  height: 42px;
  padding-inline: 10px;
  border: 1px solid #dddee1;
  border-radius: 10px;
  background: #fbfcfc;
  box-shadow: inset 0 1px 2px #0f1a2a0d;
  font-size: 18px;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
}

.volume-count span {
  color: #81858f;
  font-size: 11px;
  white-space: nowrap;
}

.volume-note {
  color: #81858f;
  font-size: 12.5px;
  line-height: 1.5;
}

.volume-more {
  white-space: nowrap;
}

.volume-more a {
  color: var(--deep);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: #0a2b5c40;
  text-underline-offset: 3px;
}

.volume-total {
  display: grid;
  gap: 2px;
  align-self: stretch;
  align-content: center;
  padding-left: 28px;
  border-left: 1px solid #eeeff0;
}

.volume-total > span {
  color: #585c66;
  font-size: 13px;
  font-weight: 560;
}

.volume-total > strong {
  font-size: 36px;
  font-weight: 780;
  letter-spacing: -.045em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.volume-total > small {
  color: #81858f;
  font-size: 12px;
}

.volume-total .volume-zero {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  color: var(--deep);
  font-weight: 650;
}

.volume-zero .icon {
  width: 14px;
  height: 14px;
}

/* Assurances ----------------------------------------------------------------------------- */

.pricing-assurances {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 32px;
  margin-top: 28px;
  color: #4a4e58;
  font-size: 13.5px;
  font-weight: 560;
}

.pricing-assurances li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pricing-assurances .icon {
  width: 17px;
  height: 17px;
  color: var(--plan-fresh);
}

/* "Talk to us" dialog -------------------------------------------------------------------- */

:root:has(.agency-dialog[open]) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.agency-dialog {
  width: min(680px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 22px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  box-shadow: 0 50px 120px -30px rgb(9 11 17 / .65);
  opacity: 1;
  transform: none;
  transition:
    opacity .25s var(--motion-ease-out),
    transform .45s var(--motion-ease-out),
    overlay .45s allow-discrete,
    display .45s allow-discrete;
}

.agency-dialog:not([open]) {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(.98);
}

@starting-style {
  .agency-dialog[open] {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(.98);
  }
}

.agency-dialog::backdrop {
  background: rgb(10 12 16 / .62);
  backdrop-filter: blur(6px);
}

.agency-dialog-shell {
  padding: 26px 28px 26px;
}

.agency-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid #eeeff0;
}

.agency-dialog-head .eyebrow {
  margin-bottom: 6px;
}

.agency-dialog-head h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.15;
  letter-spacing: -.03em;
}

.agency-dialog-head h2 + p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
}

.agency-dialog-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--ink);
  transition: background .2s, transform .3s var(--motion-ease-out);
}

.agency-dialog-close:hover {
  background: #e6e7eb;
  transform: rotate(90deg);
}

.agency-dialog-close .icon {
  width: 18px;
  height: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .agency-dialog,
  .agency-dialog-close {
    transition: none;
  }
}

/* Responsive ----------------------------------------------------------------------------- */

/* Four columns: taglines reserve two lines so every price sits on one baseline. */
@media (min-width: 1181px) {
  .plan-head .plan-tagline {
    min-height: calc(2 * 1.35em);
  }
}

@media (max-width: 1180px) {
  .plan-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 16px;
  }
  .volume-card {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-areas:
      "heading total"
      "control total"
      "note note";
  }
}

@media (max-width: 700px) {
  .pricing-section {
    padding-block: 38px 28px;
  }
  .plan-options {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .price-card {
    padding: 24px 20px 20px;
  }
  .plan-price {
    margin-top: 16px;
  }
  .plan-price strong {
    font-size: 36px;
  }
  .pricing-zero {
    align-items: flex-start;
    border-radius: 18px;
    padding: 14px 16px 14px 14px;
  }
  .pricing-zero-mark {
    width: 40px;
    height: 40px;
    font-size: 13.5px;
  }
  .volume-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "heading" "control" "note" "total";
    gap: 16px;
    padding: 22px 18px 20px;
  }
  .volume-total {
    padding: 16px 0 0;
    border-top: 1px solid #eeeff0;
    border-left: 0;
  }
  .volume-total > strong {
    font-size: 34px;
  }
  .pricing-assurances {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
    justify-content: stretch;
    font-size: 13px;
  }
  .pricing-assurances li {
    align-items: flex-start;
  }
  .agency-dialog-shell {
    padding: 22px 18px 20px;
  }
}

@media (max-width: 370px) {
  .price-card {
    padding-inline: 16px;
  }
  .plan-head {
    gap: 4px 10px;
  }
  .plan-icon {
    width: 36px;
    height: 36px;
  }
  .plan-name {
    font-size: 16px;
  }
  .plan-price strong {
    font-size: 32px;
  }
  .agency-card .plan-price strong {
    font-size: 30px;
  }
  .volume-control {
    gap: 12px;
  }
  .volume-count strong {
    min-width: 56px;
  }
  .volume-more {
    white-space: normal;
  }
  .pricing-assurances {
    grid-template-columns: 1fr;
  }
}

/* Section: agency enquiry form. Rendered by crates/web/src/sections/agency/ (in the pricing dialog and on /agency). */

.agency-form {
  display: grid;
  gap: 16px;
}

.agency-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 14px;
}

.agency-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.agency-field-wide {
  grid-column: 1 / -1;
}

.agency-field label {
  color: #40444e;
  font-size: 13px;
  font-weight: 650;
}

.agency-optional {
  margin-left: 4px;
  color: #8f939c;
  font-size: 12px;
  font-weight: 500;
}

.agency-field input,
.agency-field select,
.agency-field textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid #d6d8de;
  border-radius: 12px;
  background: #fafbfc;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  box-shadow: inset 0 1px 2px #0f1a2a0a;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.agency-field textarea {
  min-height: 108px;
  resize: vertical;
  line-height: 1.5;
}

.agency-field select {
  appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, #6b707a 50%),
    linear-gradient(135deg, #6b707a 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.agency-field input::placeholder,
.agency-field textarea::placeholder {
  color: #989ca6;
}

.agency-field input:hover,
.agency-field select:hover,
.agency-field textarea:hover {
  border-color: #bdc1c9;
}

.agency-field input:focus,
.agency-field select:focus,
.agency-field textarea:focus {
  outline: none;
  border-color: var(--green);
  background-color: #fff;
  box-shadow: 0 0 0 4px #124da626;
}

.agency-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  cursor: pointer;
}

.agency-consent input {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--green);
}

.agency-consent a {
  color: #40444e;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.agency-submit {
  width: 100%;
  min-height: 52px;
  border-radius: 12px;
  background: linear-gradient(180deg, #0b244a, #06142a);
  border-color: #06142a;
  font-size: 15px;
  box-shadow: inset 0 1px 0 #ffffff26, 0 12px 24px -14px #0a0c12e6;
}

.agency-submit:hover {
  background: linear-gradient(180deg, #0d2c5a, #081a36);
}

.agency-submit .icon {
  transition: transform .25s var(--motion-ease-out);
}

.agency-submit:hover .icon,
.agency-submit:focus-visible .icon {
  transform: translateX(4px);
}

/* The honeypot: off-screen, never seen or focused. */
.agency-form .honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.agency-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid #f2cdbb;
  border-radius: 10px;
  background: #fff5ef;
  color: #94391f;
  font-size: 14px;
  line-height: 1.55;
}

.agency-alert:focus {
  outline: none;
}

.agency-alert .icon {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 2px;
}

/* Confirmation --------------------------------------------------------------------------- */

.agency-sent {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 10px 0 4px;
  text-align: center;
}

.agency-sent:focus {
  outline: none;
}

.agency-sent-check {
  width: 64px;
  height: 64px;
  margin-bottom: 4px;
  fill: none;
  stroke: var(--green);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.agency-sent-check circle {
  fill: #e9eff7;
  stroke-width: 2.5;
}

.agency-sent h2 {
  font-size: 28px;
  letter-spacing: -.03em;
}

.agency-sent p {
  max-width: 400px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.agency-sent .agency-sent-contact {
  font-size: 13.5px;
}

.agency-sent-contact a {
  color: var(--deep);
  font-weight: 650;
}

.agency-back {
  margin-top: 8px;
  min-height: 46px;
  border-radius: 12px;
}

@media (max-width: 560px) {
  .agency-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Section: faq. Rendered by crates/web/src/sections/faq.rs; only that section's styles live here. */

.faq-section {
  /* Lets the answer's height animate between 0 and auto. */
  interpolate-size: allow-keywords;
  padding-block: 28px 64px;
  scroll-margin-top: 100px;
}

.faq-intro h2 {
  max-width: 720px;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
  margin-top: 24px;
  align-items: start;
}

.faq-column {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px #0f1a2a08;
  transition: border-color .25s var(--motion-ease-out), box-shadow .3s var(--motion-ease-out), background-color .25s;
}

.faq-item:hover {
  border-color: #d0d2d5;
  box-shadow: 0 10px 24px -18px #0f1a2a40;
}

.faq-item[open] {
  border-color: #a9bcd9;
  background: linear-gradient(180deg, #f7f7f9, #fff 70%);
  box-shadow: 0 14px 30px -22px #0a2b5c66;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  border-radius: inherit;
  color: #30343e;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.45;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:focus-visible {
  outline-offset: 2px;
}

/* A plus that turns into a minus. */
.faq-toggle {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f1f2f3;
  transition: background-color .25s, transform .35s var(--motion-ease-out);
}

.faq-toggle::before,
.faq-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 2px;
  margin: -1px 0 0 -5.5px;
  border-radius: 2px;
  background: #383c46;
  transition: transform .35s var(--motion-ease-out), background-color .25s;
}

.faq-toggle::after {
  transform: rotate(90deg);
}

.faq-item summary:hover .faq-toggle {
  background: #e3e8ef;
}

.faq-item[open] .faq-toggle {
  background: var(--green);
  transform: rotate(180deg);
}

.faq-item[open] .faq-toggle::before,
.faq-item[open] .faq-toggle::after {
  background: #fff;
}

.faq-item[open] .faq-toggle::after {
  transform: rotate(180deg);
}

.faq-answer {
  display: grid;
  gap: 12px;
  padding: 0 20px 19px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.7;
}

/* "How long until I see results?": a compact vertical timeline. */
.faq-timeline {
  display: grid;
  gap: 0;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.faq-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  padding: 0 0 12px 20px;
  line-height: 1.55;
}

.faq-timeline li::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 9px;
  height: 9px;
  border: 2px solid var(--green);
  border-radius: 50%;
  background: #fff;
}

.faq-timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 19px;
  bottom: 1px;
  left: 4.5px;
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(#a9bcd9, #e3e8ef);
}

.faq-timeline li:last-child {
  padding-bottom: 0;
}

.faq-timeline li:last-child::before {
  background: var(--green);
}

.faq-timeline strong {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}

.faq-note {
  color: #4f535d;
}

.faq-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  color: var(--deep);
  font-weight: 650;
}

.faq-link .icon {
  width: 15px;
  height: 15px;
  transition: transform .25s var(--motion-ease-out);
}

.faq-link:hover .icon {
  transform: translateX(3px);
}

/* Smooth open and close where the browser can animate the disclosure's content box. */
@supports selector(::details-content) {
  .faq-item::details-content {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    transition: block-size .4s var(--motion-ease-out), opacity .3s, content-visibility .4s allow-discrete;
  }
  .faq-item[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

/* motion.css's reduced-motion reset only reaches ::before and ::after, not ::details-content. */
@media (prefers-reduced-motion: reduce) {
  @supports selector(::details-content) {
    .faq-item::details-content {
      transition: none;
    }
  }
}

.faq-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  margin-top: 26px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.faq-contact strong {
  color: var(--ink);
}

.faq-contact a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--deep);
  font-weight: 650;
}

.faq-contact a .icon {
  width: 15px;
  height: 15px;
  transition: transform .25s var(--motion-ease-out);
}

.faq-contact a:hover .icon {
  transform: translateX(3px);
}

@media (max-width: 900px) {
  .faq-section {
    padding-block: 20px 48px;
  }
  .faq-item summary {
    padding: 15px 16px;
    font-size: 14.5px;
  }
  .faq-answer {
    padding: 0 16px 16px;
    font-size: 14px;
  }
}

@media (max-width: 700px) {
  .faq-section {
    padding-block: 12px 40px;
  }
  .faq-grid {
    grid-template-columns: 1fr;
    margin-top: 20px;
  }
}

@media (max-width: 420px) {
  .faq-timeline li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* Section: waitlist. Rendered by crates/web/src/sections/waitlist/; only that section's styles live here. */

.waitlist-section {
  --wl-mint: #bfcfe6;
  --wl-soft: #d7e1ef;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
  margin-block: 24px 72px;
  padding: 64px 60px;
  overflow: hidden;
  border-radius: 24px;
  background: radial-gradient(120% 140% at 0% 0%, #0d326a 0%, #08224a 45%, #05152e 100%);
  box-shadow: 0 40px 80px -40px #05152e99;
  color: #fff;
  scroll-margin-top: 100px;
}

.waitlist-section:focus {
  outline: none;
}

/* Backdrop: glow, a faint dot grid and concentric rings echoing the hero globe. */
.waitlist-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(#ffffff14 1px, transparent 1.2px);
  background-size: 22px 22px;
  mask-image: linear-gradient(115deg, #000 0%, transparent 60%);
}

.waitlist-glow {
  position: absolute;
  right: -10%;
  bottom: -40%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, #1958b759, transparent);
}

.waitlist-ring {
  position: absolute;
  top: 50%;
  right: 22%;
  width: 520px;
  aspect-ratio: 1;
  border: 1px solid #ffffff12;
  border-radius: 50%;
  transform: translate(50%, -50%);
}

.waitlist-ring:nth-child(3) {
  width: 760px;
  border-color: #ffffff0d;
}

.waitlist-ring:nth-child(4) {
  width: 1000px;
  border-color: #ffffff0a;
}

/* Pitch ---------------------------------------------------------------------------------- */

.waitlist-pitch .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 6px 12px 6px 10px;
  border: 1px solid #ffffff1f;
  border-radius: 999px;
  background: #ffffff0d;
  color: var(--wl-mint);
  font-size: 11px;
  letter-spacing: .12em;
}

.pulse-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3f7fe0;
}

@media (prefers-reduced-motion: no-preference) {
  .pulse-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #3f7fe0;
    animation: waitlist-pulse 2.4s var(--motion-ease-out) infinite;
  }
}

@keyframes waitlist-pulse {
  from {
    opacity: .7;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(3);
  }
}

.waitlist-pitch h2 {
  color: #fff;
  font-size: clamp(34px, 3.6vw, 50px);
  line-height: 1.06;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.waitlist-intro {
  max-width: 470px;
  margin-top: 18px;
  color: var(--wl-soft);
  font-size: 16.5px;
  line-height: 1.65;
}

.waitlist-perks {
  display: grid;
  gap: 13px;
  margin-top: 26px;
  color: #f1f5fa;
  font-size: 15px;
  font-weight: 560;
}

.waitlist-perks li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.perk-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid #ffffff24;
  border-radius: 9px;
  background: #ffffff12;
  color: #6fa3f0;
}

.perk-icon .icon {
  width: 17px;
  height: 17px;
}

.waitlist-proof {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid #ffffff1a;
}

.avatar-stack {
  display: flex;
  flex: none;
}

.avatar-stack span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-left: -7px;
  border: 2px solid #071d3d;
  border-radius: 50%;
  background: linear-gradient(140deg, #f6d38a, #e49a5b);
  color: #3b2410;
  font-size: 11px;
  font-weight: 750;
}

.avatar-stack span:first-child {
  margin-left: 0;
}

.avatar-stack span:nth-child(2) {
  background: linear-gradient(140deg, #9fd8ff, #5b9ee4);
  color: #0f2c4a;
}

.avatar-stack span:nth-child(3) {
  background: linear-gradient(140deg, #b9cff0, #4c7bc2);
  color: #0b1e3a;
}

.avatar-stack span:nth-child(4) {
  background: linear-gradient(140deg, #e7c7ff, #a77de6);
  color: #2d1650;
}

.waitlist-proof p {
  color: var(--wl-soft);
  font-size: 14px;
  line-height: 1.5;
}

/* Card ----------------------------------------------------------------------------------- */

.waitlist-card {
  position: relative;
  padding: 32px 32px 26px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 60px -30px #090c13b3, 0 0 0 1px #ffffff1a;
  color: var(--ink);
}

.form-kicker {
  color: var(--green);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .12em;
}

.waitlist-card h3 {
  margin-top: 8px;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -.035em;
}

.form-intro {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14.5px;
}

.waitlist-card form {
  margin-top: 22px;
}

.email-label {
  display: block;
  margin-bottom: 7px;
  color: #40444e;
  font-size: 13px;
  font-weight: 650;
}

.email-field {
  position: relative;
}

.email-field > .icon {
  position: absolute;
  top: 50%;
  left: 15px;
  width: 18px;
  height: 18px;
  color: #8f939c;
  transform: translateY(-50%);
  pointer-events: none;
  transition: color .2s;
}

.email-field input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 12px 14px 12px 44px;
  border: 1px solid #d6d8de;
  border-radius: 12px;
  background: #fafbfc;
  color: var(--ink);
  font-size: 16px;
  box-shadow: inset 0 1px 2px #0f1a2a0a;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.email-field input::placeholder {
  color: #989ca6;
}

.email-field input:hover {
  border-color: #bdc1c9;
}

.email-field input:focus {
  outline: none;
  border-color: var(--green);
  background: #fff;
  box-shadow: 0 0 0 4px #124da626;
}

.email-field:focus-within > .icon {
  color: var(--green);
}

/* The optional website, pre-filled from the hero's ?website= form. */
.website-label {
  margin-top: 14px;
}

.website-label span {
  margin-left: 6px;
  color: #8f939c;
  font-size: 12px;
  font-weight: 500;
}

.email-field input[aria-invalid="true"] {
  border-color: #e3a98e;
  background: #fffaf7;
}

.website-check {
  margin-top: 7px;
  color: #94391f;
  font-size: 12.5px;
}

.waitlist-reserved {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  padding: 10px 12px;
  border: 1px solid #a9bcd9;
  border-radius: 10px;
  background: #f0f4f9;
  color: #363a43;
  font-size: 13.5px;
  line-height: 1.45;
}

.waitlist-reserved .icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--green);
}

.waitlist-reserved strong {
  color: var(--deep);
  overflow-wrap: anywhere;
}

/* "Founding spots" meter: the fill grows in once, with the card's reveal. */
.founding-spots {
  margin-top: 16px;
}

.founding-spots p {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.founding-spots strong {
  color: var(--deep);
}

.founding-meter {
  display: block;
  height: 6px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #eaebed;
}

.founding-meter i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #124da6, #0a2b5c);
  transform: scaleX(.68);
  transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
  .founding-spots[data-reveal-state="visible"] .founding-meter i {
    animation: waitlist-meter 1.4s var(--motion-ease-out) .25s backwards;
  }
}

@keyframes waitlist-meter {
  from {
    transform: scaleX(0);
  }
}

/* The optional plan preference, fed by the pricing explorer. */
.waitlist-plan {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px dashed #d6d8de;
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.waitlist-plan > .icon {
  width: 16px;
  height: 16px;
  color: #8f939c;
}

.waitlist-plan a {
  color: var(--deep);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: #0a2b5c40;
  text-underline-offset: 3px;
}

.waitlist-plan[data-state="chosen"] {
  border-style: solid;
  border-color: #a9bcd9;
  background: #f0f4f9;
  color: #363a43;
}

.waitlist-plan[data-state="chosen"] > .icon {
  color: var(--green);
}

.waitlist-plan strong {
  color: var(--deep);
}

#clear-plan-interest {
  margin-left: auto;
  padding: 5px 10px;
  border: 1px solid #cdd0d6;
  border-radius: 8px;
  background: #fff;
  color: #40444e;
  font-size: 12px;
  font-weight: 650;
  transition: border-color .2s, background-color .2s;
}

#clear-plan-interest:hover {
  border-color: #a8acb6;
  background: #f8f8f9;
}

.consent-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  cursor: pointer;
}

.consent-label input {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--green);
}

.consent-label a {
  color: #40444e;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.waitlist-submit {
  position: relative;
  width: 100%;
  min-height: 52px;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(180deg, #0c408f, #0a316c);
  border-color: #0a316c;
  font-size: 15px;
  box-shadow: inset 0 1px 0 #ffffff2e, 0 12px 24px -14px #0a2b5ce6;
}

.waitlist-submit:hover {
  background: linear-gradient(180deg, #0a3a82, #082a5e);
}

.waitlist-submit .icon {
  transition: transform .25s var(--motion-ease-out);
}

.waitlist-submit:hover .icon,
.waitlist-submit:focus-visible .icon {
  transform: translateX(4px);
}

.waitlist-submit::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, #ffffff40, transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .waitlist-submit:hover::before {
    opacity: 1;
    transform: skewX(-18deg) translateX(480%);
    transition: transform .9s var(--motion-ease-out), opacity .2s;
  }
}

.waitlist-card form > small {
  display: block;
  margin-top: 12px;
  color: #81858f;
  font-size: 12.5px;
  text-align: center;
}

.honeypot {
  position: absolute;
  top: auto;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.55;
}

.form-notice .icon {
  width: 17px;
  height: 17px;
  margin-top: 2px;
}

.error-notice {
  border: 1px solid #f2cdbb;
  background: #fff5ef;
  color: #94391f;
}

.error-notice:focus {
  outline: none;
}

/* Success -------------------------------------------------------------------------------- */

.waitlist-success {
  position: relative;
  text-align: center;
}

.waitlist-success:focus {
  outline: none;
}

.success-check {
  display: block;
  width: 64px;
  height: 64px;
  margin: 4px auto 14px;
  fill: none;
  stroke: var(--success);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.success-check circle {
  fill: #e9f7f0;
  stroke-width: 2.5;
}

.waitlist-success h3 {
  margin-top: 0;
  font-size: 28px;
}

.success-message {
  max-width: 400px;
  margin: 10px auto 0;
  color: var(--muted);
  font-size: 15px;
}

.success-next {
  margin-top: 22px;
  padding: 18px 18px 6px;
  border: 1px solid #e5e7ea;
  border-radius: 14px;
  background: #f8f9fa;
  text-align: left;
}

.success-next > p {
  color: var(--success);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.success-next ol {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: next-step;
}

.success-next li {
  position: relative;
  padding: 0 0 14px 36px;
  color: #40444e;
  font-size: 14px;
  line-height: 1.5;
  counter-increment: next-step;
}

.success-next li::before {
  content: counter(next-step);
  position: absolute;
  top: -1px;
  left: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  font-size: 12px;
  font-weight: 750;
}

.success-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
  margin-top: 20px;
}

.success-actions .button {
  min-height: 46px;
  border-radius: 12px;
}

.success-another {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A one-off confetti burst from behind the check mark. Invisible unless it animates. */
.confetti {
  position: absolute;
  top: 36px;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.confetti i {
  position: absolute;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  background: #124da6;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .confetti i {
    animation: waitlist-confetti 1.3s var(--motion-ease-out) .35s both;
  }
}

.confetti i:nth-child(3n + 1) { background: #f6c453; }
.confetti i:nth-child(3n + 2) { background: #5fb4f0; }
.confetti i:nth-child(4n) { width: 7px; height: 7px; border-radius: 50%; }
.confetti i:nth-child(1) { --x: -150px; --y: -40px; --r: -200deg; }
.confetti i:nth-child(2) { --x: -110px; --y: -95px; --r: 160deg; }
.confetti i:nth-child(3) { --x: -60px; --y: -120px; --r: -120deg; }
.confetti i:nth-child(4) { --x: -10px; --y: -135px; --r: 240deg; }
.confetti i:nth-child(5) { --x: 45px; --y: -125px; --r: -260deg; }
.confetti i:nth-child(6) { --x: 100px; --y: -100px; --r: 180deg; }
.confetti i:nth-child(7) { --x: 150px; --y: -50px; --r: -150deg; }
.confetti i:nth-child(8) { --x: 165px; --y: 10px; --r: 210deg; }
.confetti i:nth-child(9) { --x: -165px; --y: 15px; --r: -230deg; }
.confetti i:nth-child(10) { --x: -85px; --y: -60px; --r: 140deg; }
.confetti i:nth-child(11) { --x: 80px; --y: -55px; --r: -170deg; }
.confetti i:nth-child(12) { --x: 20px; --y: -80px; --r: 300deg; }

@keyframes waitlist-confetti {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0) scale(.6);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--x), calc(var(--y) + 60px), 0) rotate(var(--r)) scale(1);
  }
}

/* Responsive ----------------------------------------------------------------------------- */

@media (max-width: 1150px) {
  .waitlist-section {
    gap: 40px;
    padding: 52px 44px;
  }
}

@media (max-width: 900px) {
  .waitlist-section {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 46px 36px;
  }
  .waitlist-intro {
    max-width: 560px;
  }
}

@media (max-width: 700px) {
  .waitlist-section {
    margin-block: 12px 44px;
    padding: 36px 20px 22px;
    border-radius: 20px;
  }
  .waitlist-pitch .eyebrow {
    font-size: 10px;
    letter-spacing: .1em;
  }
  .waitlist-intro {
    font-size: 15.5px;
  }
  .waitlist-perks {
    font-size: 14.5px;
  }
  .waitlist-card {
    padding: 26px 20px 22px;
    border-radius: 16px;
  }
  .waitlist-card h3 {
    font-size: 23px;
  }
  .waitlist-success h3 {
    font-size: 24px;
  }
  .waitlist-plan[data-state="chosen"] {
    flex-wrap: wrap;
  }
}

@media (max-width: 370px) {
  .waitlist-section {
    padding: 30px 14px 14px;
  }
  .waitlist-card {
    padding: 22px 16px 18px;
  }
  .waitlist-proof {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Section: footer. Rendered by crates/web/src/sections/footer.rs; only that section's styles live here. */

.site-footer {
  border-top: 1px solid #e7e8eb;
  background: linear-gradient(180deg, #f9f9f9, #f4f4f5);
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(220px, 1.25fr) minmax(0, 2.2fr) auto;
  align-items: start;
  gap: 40px 56px;
  padding-block: 44px 40px;
}

.footer-brand .wordmark span {
  font-size: 26px;
}

.footer-brand .wordmark img {
  width: 32px;
  height: 32px;
}

.footer-tagline {
  margin-top: 14px;
  color: #4f535d;
  font-size: 15px;
}

.footer-copyright {
  margin-top: 6px;
  color: #81858f;
  font-size: 13px;
}

.footer-links {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 32px;
}

.footer-column h2 {
  margin-bottom: 12px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.4;
}

.footer-column ul {
  display: grid;
  gap: 8px;
}

.footer-column-wide ul {
  grid-template-columns: repeat(2, max-content);
  gap: 8px 18px;
}

.footer-column a {
  color: var(--muted);
  font-size: 13.5px;
  transition: color .2s;
}

.footer-column a:hover {
  color: var(--deep);
}

.footer-column .footer-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--ink);
  font-weight: 650;
}

.footer-more .icon {
  width: 15px;
  height: 15px;
  transition: transform .25s var(--motion-ease-out);
}

.footer-more:hover .icon {
  transform: translateX(3px);
}

.footer-meta {
  display: grid;
  justify-items: end;
  gap: 18px;
}

/* Language disclosure. */
.footer-language {
  position: relative;
}

.footer-language summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #e1e2e4;
  border-radius: 999px;
  background: #fff;
  color: #40444e;
  font-size: 13px;
  font-weight: 650;
  list-style: none;
  transition: border-color .2s;
}

.footer-language summary::-webkit-details-marker {
  display: none;
}

.footer-language summary:hover {
  border-color: #bdbfc4;
}

.footer-language summary .icon {
  width: 16px;
  height: 16px;
}

.footer-language summary .icon:last-child {
  width: 13px;
  height: 13px;
  transform: rotate(90deg);
  transition: transform .25s var(--motion-ease-out);
}

.footer-language[open] summary .icon:last-child {
  transform: rotate(-90deg);
}

.footer-language ul {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 5;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 40px -20px #0f1a2a59;
}

.footer-language li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13.5px;
}

.footer-language li[aria-current] {
  background: #f0f4f9;
  color: var(--deep);
  font-weight: 650;
}

.footer-language li .icon {
  width: 15px;
  height: 15px;
}

.footer-language-soon {
  color: #81858f;
  font-size: 12.5px;
}

.footer-social {
  display: flex;
  gap: 8px;
}

.social-link {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #e3e3e5;
  border-radius: 10px;
  background: #fff;
  color: #20242c;
  transition: border-color .2s, color .2s, transform .25s var(--motion-ease-out), box-shadow .25s;
}

.social-icon {
  width: 18px;
  height: 18px;
}

a.social-link:hover {
  border-color: #bdbfc4;
  color: var(--deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 18px -12px #0f1a2a59;
}

/* Profiles that are not public yet show a hint instead of linking nowhere. */
.social-link[data-soon] {
  cursor: default;
}

.social-link[data-soon]::after {
  content: "Soon";
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 650;
  opacity: 0;
  transform: translate(-50%, 4px);
  pointer-events: none;
  transition: opacity .2s, transform .2s var(--motion-ease-out);
}

.social-link[data-soon]:hover::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.footer-legal {
  display: flex;
  gap: 22px;
}

.footer-legal a {
  color: #81858f;
  font-size: 13px;
  transition: color .2s;
}

.footer-legal a:hover {
  color: var(--deep);
}

@media (max-width: 1150px) {
  .footer-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 34px 40px;
  }
  .footer-links {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .footer-meta {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 700px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-block: 36px 30px;
  }
  .footer-links {
    grid-row: auto;
    grid-template-columns: 1fr 1fr;
    gap: 26px 18px;
  }
  .footer-column-wide {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .footer-meta {
    grid-column: auto;
    grid-row: auto;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
    gap: 18px 14px;
    padding-top: 22px;
    border-top: 1px solid #e3e3e5;
  }
  .footer-social {
    justify-self: end;
  }
  .footer-legal {
    grid-column: 1 / -1;
  }
  .footer-language ul {
    right: auto;
    left: 0;
  }
}

@media (max-width: 370px) {
  .footer-column-wide ul {
    gap: 8px 14px;
  }
  .footer-social {
    gap: 6px;
  }
  .social-link {
    width: 34px;
    height: 34px;
  }
}

/* Home page layout: wrappers that pair two sections side by side (planning and intelligence rows).
   Rendered by crates/web/src/pages/home.rs. */

.planning-section {
  padding-block: 58px 35px;
}

.planning-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.planning-grid h2 {
  font-size: 30px;
}

.planning-grid .section-description {
  max-width: 450px;
  min-height: 47px;
  margin-bottom: 24px;
}

@media (max-width: 900px) {
  /* Mirrors the shared `.section` rule at this breakpoint, which originally won the cascade. */
  .planning-section {
    padding-block: 42px;
  }
  .planning-grid {
    gap: 20px;
  }
  .planning-grid h2 {
    font-size: 26px;
  }
  .planning-grid .section-description {
    font-size: 12px;
    min-height: 55px;
    margin-bottom: 20px;
  }
}

@media (max-width: 700px) {
  /* Mirrors the shared `.section` rule at this breakpoint, which originally won the cascade. */
  .planning-section {
    padding-block: 37px;
  }
  .planning-grid {
    grid-template-columns: 1fr;
    gap: 33px;
  }
  .planning-grid h2 {
    font-size: 29px;
  }
  .planning-grid .section-description {
    font-size: 13px;
    min-height: 0;
    margin-bottom: 21px;
    max-width: 450px;
  }
}

.planning-grid > * {
  min-width: 0;
}

@media (min-width: 701px) and (max-width: 900px) {
  .planning-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 901px) {
  .planning-grid > div > h2 {
    min-height: 2.25em;
  }
}

/* Intelligence row: market intelligence (left) and channels (right). */
.intelligence-section {
  padding-block: 44px 72px;
}

.intelligence-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr);
  gap: 40px;
}

.intelligence-grid h2 {
  font-size: clamp(26px, 2.25vw, 31px);
}

/* Two lines tall on desktop so both columns' cards start on the same line. */
.intelligence-grid .section-description {
  max-width: 540px;
  min-height: 3.3em;
  margin-bottom: 22px;
  font-size: 15.5px;
}

@media (max-width: 1100px) {
  .intelligence-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
  .intelligence-grid .section-description {
    min-height: 0;
  }
}

@media (max-width: 700px) {
  .intelligence-section {
    padding-block: 36px 48px;
  }
  .intelligence-grid {
    gap: 44px;
  }
  .intelligence-grid h2 {
    font-size: 27px;
  }
  .intelligence-grid .section-description {
    font-size: 15px;
    margin-bottom: 18px;
  }
}

/* Policy pages (privacy, terms, guarantee, security). Rendered by crates/web/src/pages/legal.rs. */

.legal-page {
  max-width: 1080px;
  padding-block: 44px 80px;
}

.back-link {
  display: inline-flex;
  margin-bottom: 36px;
  color: var(--muted);
  font-size: 13.5px;
  transition: color .2s;
}

.back-link:hover {
  color: var(--deep);
}

.legal-header {
  max-width: 720px;
}

.legal-header h1 {
  margin-bottom: 14px;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.08;
}

.legal-intro {
  color: #5b5f69;
  font-size: 17px;
  line-height: 1.65;
}

.legal-date {
  margin-top: 14px;
  color: #81858f;
  font-size: 13px;
}

/* Status note under the title (the guarantee's "Draft for counsel review"). */
.legal-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
  padding: 14px 18px;
  border: 1px solid #f0dfb4;
  border-radius: 12px;
  background: #fffaf0;
}

.legal-notice > .icon {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: #a46b00;
}

.legal-notice strong {
  color: #6b4700;
  font-size: 14.5px;
}

.legal-notice p {
  margin-top: 3px;
  color: #6f5a2e;
  font-size: 14px;
  line-height: 1.6;
}

.legal-tabs {
  display: inline-flex;
  gap: 4px;
  margin-top: 30px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f6f6f7;
}

.legal-tabs a {
  padding: 8px 16px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
  transition: color .2s, background-color .2s;
}

.legal-tabs a:hover {
  color: var(--ink);
}

.legal-tabs a[aria-current="page"] {
  background: #fff;
  box-shadow: 0 1px 2px #0f1a2a14, 0 4px 10px -6px #0f1a2a33;
  color: var(--deep);
}

.legal-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 56px;
  margin-top: 40px;
}

.legal-index {
  position: sticky;
  top: 100px;
  align-self: start;
  /* A long policy's index scrolls on its own instead of running off the screen. */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.legal-index p {
  margin-bottom: 10px;
  color: #81858f;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.legal-index ol {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--line);
}

.legal-index a {
  display: block;
  margin-left: -1px;
  padding: 6px 0 6px 14px;
  border-left: 2px solid transparent;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.4;
  transition: color .2s, border-color .2s;
}

.legal-index a:hover {
  border-left-color: var(--green);
  color: var(--ink);
}

.legal-body {
  max-width: 720px;
}

.legal-body section {
  padding-bottom: 30px;
  scroll-margin-top: 100px;
}

.legal-body section + section {
  padding-top: 30px;
  border-top: 1px solid #eeeff0;
}

.legal-body h2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 23px;
}

.legal-number {
  color: var(--green);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.legal-body section p {
  margin-top: 10px;
  color: #5b5f69;
  font-size: 15.5px;
  line-height: 1.8;
}

/* Rich blocks (legal.rs `Block`): links, sub-headings, lists, tables, a quoted disclosure. */
.legal-body section a {
  color: var(--deep);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #9fb2cf;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.legal-body section a:hover {
  text-decoration-color: currentColor;
}

.legal-body section strong {
  color: var(--ink);
  font-weight: 650;
}

.legal-body h3 {
  margin-top: 24px;
  color: var(--ink);
  font-size: 16.5px;
}

.legal-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0 0 0 20px;
  list-style: disc;
  color: #5b5f69;
  font-size: 15.5px;
  line-height: 1.7;
}

.legal-list li::marker {
  color: var(--green);
}

.legal-callout {
  margin: 18px 0 4px;
  padding: 16px 20px;
  border-left: 3px solid var(--green);
  border-radius: 0 12px 12px 0;
  background: #f2f5fa;
}

.legal-body .legal-callout p {
  margin: 0;
  color: var(--ink);
  font-weight: 550;
}

.legal-table {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.legal-table table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.6;
}

.legal-table th {
  padding: 10px 14px;
  background: #f6f6f7;
  color: #81858f;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .1em;
  text-align: left;
  text-transform: uppercase;
}

.legal-table td {
  padding: 12px 14px;
  border-top: 1px solid #eeeff0;
  color: #5b5f69;
  vertical-align: top;
}

.legal-table td:first-child {
  width: 34%;
  color: var(--ink);
  font-weight: 650;
  overflow-wrap: anywhere;
}

.legal-contact {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 10px;
  padding: 20px 22px;
  border: 1px solid #d6deeb;
  border-radius: 14px;
  background: #f2f5fa;
}

.legal-contact > .icon {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--green);
}

.legal-contact strong {
  font-size: 15.5px;
}

.legal-contact p {
  margin-top: 4px;
  color: #5b5f69;
  font-size: 14.5px;
}

.legal-contact a {
  color: var(--deep);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.legal-return {
  margin-top: 30px;
}

@media (max-width: 900px) {
  .legal-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .legal-index {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 700px) {
  .legal-page {
    padding-block: 30px 56px;
  }
  .back-link {
    margin-bottom: 26px;
  }
  .legal-intro {
    font-size: 16px;
  }
  .legal-tabs {
    display: flex;
  }
  .legal-tabs a {
    flex: 1 1 auto;
    padding-inline: 6px;
    text-align: center;
  }
  .legal-body h2 {
    font-size: 21px;
  }
  .legal-body section p,
  .legal-list {
    font-size: 15px;
  }
  /* Each table row becomes a small card, every cell under its column's name. */
  .legal-table {
    border: 0;
    border-radius: 0;
  }
  .legal-table thead {
    display: none;
  }
  .legal-table table,
  .legal-table tbody,
  .legal-table tr,
  .legal-table td {
    display: block;
  }
  .legal-table tr {
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
  }
  .legal-table td {
    padding: 4px 0;
    border: 0;
  }
  .legal-table td:first-child {
    width: auto;
  }
  .legal-table td + td::before {
    content: attr(data-label);
    display: block;
    color: #81858f;
    font-size: 10.5px;
    font-weight: 750;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
}

@media (max-width: 370px) {
  .legal-tabs a {
    padding-inline: 4px;
    font-size: 13px;
  }
}

/* The /agency page. Rendered by crates/web/src/pages/agency.rs. The form itself is styled by sections/agency.css. */

.agency-page {
  position: relative;
  padding-block: 44px 88px;
}

.agency-page::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 560px;
  z-index: -1;
  background: radial-gradient(55% 60% at 70% 30%, #e7edf6 0%, #f3f6fa 45%, transparent 75%);
  pointer-events: none;
}

.agency-page .back-link {
  display: inline-flex;
  margin-bottom: 32px;
  color: var(--muted);
  font-size: 13.5px;
  transition: color .2s;
}

.agency-page .back-link:hover {
  color: var(--deep);
}

.agency-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: start;
}

.agency-pitch h1 {
  margin-top: 6px;
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1.06;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.agency-intro {
  max-width: 520px;
  margin-top: 16px;
  color: #5b5f69;
  font-size: 16.5px;
  line-height: 1.65;
}

/* The plan summary: a dark card matching the pricing section's Agency card. */
.agency-summary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 28px;
  padding: 24px 24px 22px;
  border-radius: 18px;
  background:
    radial-gradient(120% 70% at 100% 0%, #1a407a66 0%, transparent 60%),
    linear-gradient(165deg, #0b1f3d 0%, #061224 100%);
  box-shadow: 0 24px 48px -26px #0a0c12cc;
  color: #d3dbe7;
}

.agency-summary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(#ffffff12 1px, transparent 1.2px);
  background-size: 18px 18px;
  mask-image: linear-gradient(200deg, #000 0%, transparent 55%);
}

.agency-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
}

.agency-price strong {
  color: #fff;
  font-size: 36px;
  font-weight: 780;
  letter-spacing: -.05em;
}

.agency-price span {
  color: #b2b6c0;
  font-size: 14px;
}

.agency-summary .check-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #ffffff1f;
  font-size: 13.5px;
}

.agency-summary .check-list li {
  color: #e2e8f1;
}

.agency-summary .check-list .icon {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: #6fa3f0;
}

.agency-next {
  margin-top: 26px;
}

.agency-next > p {
  color: var(--green);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.agency-next ol {
  display: grid;
  gap: 12px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: agency-step;
}

.agency-next li {
  position: relative;
  padding-left: 36px;
  color: #40444e;
  font-size: 14.5px;
  line-height: 1.5;
  counter-increment: agency-step;
}

.agency-next li::before {
  content: counter(agency-step);
  position: absolute;
  top: -1px;
  left: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 12px;
  font-weight: 750;
}

.agency-form-card {
  position: relative;
  padding: 30px 30px 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px #0f1a2a0a, 0 30px 60px -34px #0f1a2a59;
  scroll-margin-top: 100px;
}

.agency-form-card:focus {
  outline: none;
}

.agency-form-title {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.03em;
}

.agency-form-intro {
  margin: 6px 0 20px;
  color: var(--muted);
  font-size: 14.5px;
}

@media (max-width: 960px) {
  .agency-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

@media (max-width: 560px) {
  .agency-page {
    padding-block: 28px 56px;
  }
  .agency-summary {
    padding: 20px 18px;
  }
  .agency-summary .check-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .agency-form-card {
    padding: 22px 18px 20px;
    border-radius: 16px;
  }
}

/* Coming-soon pages (growth log, comparisons). Rendered by
   crates/web/src/pages/coming_soon/. Motion is CSS-only (no islands on these pages): the shared
   data-enter entrances plus a few small loops below, all transform/opacity and off under reduced
   motion (motion.css). */

.soon-page {
  position: relative;
  overflow: clip;
  padding-block: 28px 88px;
  background:
    radial-gradient(ellipse 60% 55% at 85% 18%, #e2e9f3 0, #f2f5f9 45%, transparent 75%),
    linear-gradient(180deg, #fff, var(--canvas));
}

/* Breadcrumb. */
.soon-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 13.5px;
}

.soon-crumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: #b8bbc2;
}

.soon-crumbs a {
  transition: color .2s;
}

.soon-crumbs a:hover {
  color: var(--deep);
}

.soon-crumbs [aria-current] {
  color: var(--ink);
  font-weight: 650;
}

/* Hero: copy beside the preview card. */
.soon-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  align-items: center;
  gap: 64px;
  margin-top: 40px;
}

.soon-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  padding: 6px 13px 6px 11px;
  border: 1px solid #cfd9e8;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 16px -12px #0a2b5c66;
  color: var(--deep);
  font-size: 13px;
  font-weight: 700;
}

.soon-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0041a2;
}

.soon-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #0041a2;
  opacity: 0;
}

.soon-copy h1 {
  max-width: 640px;
  font-size: clamp(38px, 4.7vw, 62px);
  font-weight: 760;
  line-height: 1.03;
}

.soon-accent {
  display: block;
  color: var(--green);
}

.soon-lede {
  max-width: 560px;
  margin-top: 20px;
  color: #545862;
  font-size: 18px;
  line-height: 1.65;
}

.soon-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.soon-actions .button .icon {
  width: 17px;
  height: 17px;
}

.soon-visual {
  position: relative;
}

/* A soft halo behind every preview card. */
.soon-visual::before {
  content: "";
  position: absolute;
  inset: -40px -30px;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, #d3deeecc, #e8eef666 60%, transparent);
  pointer-events: none;
}

.soon-visual > * {
  position: relative;
  z-index: 1;
}

/* Shared card chrome for the three previews. */
.log-card,
.cmp-card {
  padding: 22px;
  border: 1px solid #e3e4e7;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px #0f1a2a0a, 0 30px 60px -36px #0d1f3b59;
}

/* Highlights. */
.soon-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 72px 0 0;
  padding: 0;
  list-style: none;
}

.soon-highlight {
  padding: 22px 22px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffffd9;
}

.soon-highlight-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border-radius: 11px;
  background: linear-gradient(145deg, #e7edf6, #d5dfee);
  color: var(--deep);
}

.soon-highlight-icon .icon {
  width: 21px;
  height: 21px;
}

.soon-highlight h2 {
  font-size: 18px;
  font-weight: 720;
  letter-spacing: -.02em;
  line-height: 1.3;
}

.soon-highlight p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

/* Growth log preview. */
.log-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eeeff0;
}

.log-site {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

.log-label {
  color: var(--muted);
  font-size: 13.5px;
}

.log-day {
  margin-left: auto;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--deep);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}

.log-entries {
  display: grid;
  margin: 0;
  padding: 6px 0 0;
  list-style: none;
}

.log-entry {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 14px 0;
}

.log-entry + .log-entry {
  border-top: 1px dashed #e6e7e9;
}

.log-marker {
  position: relative;
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border: 2px solid #d0d2d5;
  border-radius: 50%;
  background: #fff;
}

.log-entry[data-state="receipt"] .log-marker {
  border: 0;
  background: var(--green);
  box-shadow: 0 0 0 4px #00368724;
}

.log-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.log-when {
  color: #81858f;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .02em;
}

.log-text strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 680;
  letter-spacing: -.01em;
}

.log-detail {
  color: var(--muted);
  font-size: 13px;
}

.log-entry:not([data-state="receipt"]) .log-text {
  opacity: .72;
}

.log-chip {
  padding: 4px 9px;
  border: 1px solid #e3e3e5;
  border-radius: 999px;
  background: #f7f7f7;
  color: #62666f;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.log-entry[data-state="receipt"] .log-chip {
  border-color: #bfcde3;
  background: #ebf0f7;
  color: var(--deep);
}

.log-entry[data-state="scheduled"] .log-chip {
  border-style: dashed;
  background: #fff;
}

.log-foot {
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 11px;
  background: #f5f6f7;
  color: #545862;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
}

/* Comparison preview. */
.cmp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eeeff0;
}

.cmp-us {
  padding: 6px 12px;
  border-radius: 9px;
  background: var(--deep);
  color: #fff;
  font-size: 14px;
  font-weight: 720;
}

.cmp-vs {
  color: #81858f;
  font-size: 13px;
  font-weight: 650;
}

/* The name stays redacted until the page is researched. */
.cmp-them {
  position: relative;
  overflow: hidden;
  width: 112px;
  height: 30px;
  border-radius: 9px;
  background: #eaebed;
}

.cmp-them::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, #ffffffb3 50%, transparent 80%);
  transform: translateX(-100%);
}

.cmp-checked {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid #e3e3e5;
  border-radius: 999px;
  color: #62666f;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.cmp-rows {
  display: grid;
  margin: 0;
  padding: 4px 0 0;
  list-style: none;
}

.cmp-rows li {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 128px;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
}

.cmp-rows li + li {
  border-top: 1px solid #f1f1f2;
}

.cmp-label {
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 650;
}

.cmp-bars {
  display: grid;
  gap: 5px;
}

.cmp-bars span {
  height: 6px;
  border-radius: 3px;
  background: #e8e8ea;
  transform-origin: left center;
}

.cmp-bars span:first-child {
  background: linear-gradient(90deg, var(--green), #5c86c4);
}

.cmp-rows li:nth-child(1) .cmp-bars span:last-child { width: 72%; }
.cmp-rows li:nth-child(2) .cmp-bars span:first-child { width: 88%; }
.cmp-rows li:nth-child(2) .cmp-bars span:last-child { width: 64%; }
.cmp-rows li:nth-child(3) .cmp-bars span:last-child { width: 38%; }
.cmp-rows li:nth-child(4) .cmp-bars span:first-child { width: 80%; }
.cmp-rows li:nth-child(4) .cmp-bars span:last-child { width: 80%; }

.cmp-proof {
  display: inline-flex;
  justify-self: end;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  background: #ebf0f7;
  color: var(--deep);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.cmp-proof .icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.6;
}

.cmp-foot {
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 11px;
  background: #f5f6f7;
  color: #545862;
  font-size: 12.5px;
  font-weight: 600;
}

/* Small loops and staggered details, only when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .soon-dot::after {
    animation: soon-ping 2.4s var(--motion-ease-out) infinite;
  }
  .log-entry[data-state="receipt"] .log-marker {
    animation: soon-glow 2.8s ease-in-out infinite;
  }
  .log-entry {
    animation: outpost-rise .7s var(--motion-ease-out) backwards;
  }
  .log-entry:nth-child(1) { animation-delay: .38s; }
  .log-entry:nth-child(2) { animation-delay: .46s; }
  .log-entry:nth-child(3) { animation-delay: .54s; }
  .log-entry:nth-child(4) { animation-delay: .62s; }
  .cmp-bars span {
    animation: soon-grow 1s var(--motion-ease-out) backwards;
  }
  .cmp-rows li:nth-child(1) .cmp-bars span { animation-delay: .45s; }
  .cmp-rows li:nth-child(2) .cmp-bars span { animation-delay: .55s; }
  .cmp-rows li:nth-child(3) .cmp-bars span { animation-delay: .65s; }
  .cmp-rows li:nth-child(4) .cmp-bars span { animation-delay: .75s; }
  .cmp-them::after {
    animation: soon-sweep 2.6s var(--motion-ease-in-out) 1s infinite;
  }
}

@keyframes soon-ping {
  0% { opacity: .5; transform: scale(.6); }
  80%, 100% { opacity: 0; transform: scale(2.2); }
}

@keyframes soon-glow {
  0%, 100% { box-shadow: 0 0 0 4px #00368724; }
  50% { box-shadow: 0 0 0 7px #00368712; }
}

@keyframes soon-grow {
  from { transform: scaleX(0); }
}

@keyframes soon-sweep {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

@media (max-width: 1150px) {
  .soon-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    gap: 40px;
  }
}

@media (max-width: 960px) {
  .soon-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    margin-top: 30px;
  }
  .soon-visual {
    max-width: 560px;
  }
  .soon-highlights {
    margin-top: 56px;
  }
}

@media (max-width: 700px) {
  .soon-page {
    padding-block: 20px 60px;
  }
  .soon-status {
    margin-bottom: 18px;
  }
  .soon-lede {
    font-size: 16.5px;
  }
  .soon-actions .button {
    flex: 1 1 auto;
  }
  .soon-highlights {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 44px;
  }
  .log-card,
  .cmp-card {
    padding: 18px 16px;
  }
}

@media (max-width: 420px) {
  .log-label {
    display: none;
  }
  .log-entry {
    grid-template-columns: 14px minmax(0, 1fr);
  }
  .log-chip {
    grid-column: 2;
    justify-self: start;
  }
  .cmp-rows li {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .cmp-bars {
    display: none;
  }
  .cmp-checked {
    margin-left: 0;
  }
}

/* Account pages: sign in, password recovery, email verification and error pages.
   Rendered by crates/web/src/pages/account/. A form column beside a dark "showcase" panel
   (data-layout="split"), or the form column alone (data-layout="single"). */

.account-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  background: #fff;
}

.account-page[data-layout="split"] {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
}

/* Form column */

.account-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 26px clamp(24px, 5vw, 72px) 22px;
}

.account-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.account-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--muted);
  transition: color .2s;
}

.account-back .icon {
  width: 14px;
  height: 14px;
  transition: transform .25s var(--motion-ease-out);
}

.account-back:hover {
  color: var(--deep);
}

.account-back:hover .icon {
  transform: translateX(3px);
}

.account-card {
  width: min(100%, 410px);
  margin: auto;
  padding-block: 56px;
}

.account-page[data-layout="single"] .account-card {
  width: min(100%, 470px);
}

/* The deletion receipt (pages/app/data_rights.css styles its inside): room for its steps. */
.account-page[data-layout="single"] .account-card:has(.dr-receipt) {
  width: min(100%, 620px);
}

/* Your account outside a workspace: room for its cards. */
.account-page[data-layout="single"] .account-card:has(.dr-standalone) {
  width: min(100%, 760px);
}

.account-kicker {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .135em;
  color: var(--green);
  margin-bottom: 14px;
}

.account-card h1 {
  font-size: clamp(30px, 3.1vw, 38px);
  line-height: 1.08;
  font-weight: 760;
  letter-spacing: -.045em;
}

.account-lede {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.account-identity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin-top: 18px;
  padding: 7px 12px 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--canvas);
  font-size: 13px;
  font-weight: 600;
  color: #31353f;
  overflow-wrap: anywhere;
}

.account-identity .icon {
  width: 15px;
  height: 15px;
  color: var(--green);
}

.account-form {
  display: grid;
  gap: 18px;
  margin-top: 30px;
}

.account-confirmation .account-form {
  margin-top: 28px;
}

.account-page .field {
  display: grid;
  gap: 8px;
}

.account-page .field label {
  font-size: 13px;
  font-weight: 650;
  color: #31353f;
}

.account-page .field-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.account-page .field-label-row a {
  font-size: 13px;
  font-weight: 600;
  color: var(--deep);
}

.account-page .field-label-row a:hover,
.account-alt a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.account-page .field input {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 12px 15px;
  border: 1px solid #d6d9df;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  box-shadow: 0 1px 2px #121b280a;
  transition: border-color .2s, box-shadow .2s;
}

.account-page .field input::placeholder {
  color: #9ea2ab;
}

.account-page .field input:hover {
  border-color: #bbbfc8;
}

.account-page .field input:focus-visible {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 4px #00368724;
}

.account-page .field-hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.account-submit {
  width: 100%;
  min-height: 52px;
  margin-top: 6px;
  font-size: 15px;
  border-radius: 10px;
}

.account-submit .icon {
  transition: transform .25s var(--motion-ease-out);
}

.account-submit:hover .icon {
  transform: translateX(3px);
}

.account-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 24px;
  padding: 13px 15px;
  border: 1px solid;
  border-radius: 11px;
  font-size: 14px;
  line-height: 1.5;
}

.account-notice .icon {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.account-notice[data-tone="success"] {
  background: #eef9f4;
  border-color: #c3e8d6;
  color: #0b5a40;
}

.account-notice[data-tone="error"] {
  background: #fff5f3;
  border-color: #f2d0c9;
  color: #8c2c1c;
}

.account-alt {
  margin-top: 26px;
  font-size: 14px;
  text-align: center;
  color: var(--muted);
}

.account-alt a {
  font-weight: 650;
  color: var(--deep);
}

.account-page .confirmation-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 24px;
  border-radius: 15px;
  background: #e6ecf5;
  color: var(--deep);
  box-shadow: inset 0 0 0 1px #cfd9e9;
}

.account-page .confirmation-icon .icon {
  width: 24px;
  height: 24px;
}

.account-page .confirmation-icon[data-tone="warning"] {
  background: #fff4e5;
  color: #9a5800;
  box-shadow: inset 0 0 0 1px #f5dfbd;
}

.account-confirmation > .account-submit {
  margin-top: 30px;
}

.account-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  font-size: 12px;
  color: #8f939c;
}

.account-legal {
  display: flex;
  gap: 14px;
}

.account-footer a:hover {
  color: var(--deep);
}

/* Showcase panel */

.account-showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  margin: 12px 12px 12px 0;
  padding: 64px clamp(40px, 5.5vw, 88px);
  border-radius: 24px;
  background:
    radial-gradient(90% 70% at 85% 8%, #133f80 0%, #0c2b5a 38%, transparent 72%),
    radial-gradient(70% 60% at 0% 100%, #0a2144 0%, transparent 70%),
    #0b2750;
  color: #fff;
}

/* A faint dotted texture over the gradient. */
.account-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(#ffffff1c 1px, transparent 1.2px);
  background-size: 22px 22px;
  mask-image: linear-gradient(160deg, #000 0%, transparent 55%);
}

.showcase-globe {
  position: absolute;
  right: -240px;
  bottom: -280px;
  z-index: -1;
  width: 760px;
  height: 760px;
  max-width: none;
  opacity: .16;
  mix-blend-mode: screen;
  pointer-events: none;
}

.showcase-copy .eyebrow {
  color: #8facd8;
  letter-spacing: .14em;
}

.showcase-copy h2 {
  font-size: clamp(38px, 3.9vw, 56px);
  line-height: 1.02;
  letter-spacing: -.055em;
  color: #f4f5f6;
}

.showcase-copy h2 span {
  display: block;
  background: linear-gradient(100deg, #7fa7e3 0%, #c9dbf5 45%, #7fa7e3 90%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.showcase-copy p {
  max-width: 450px;
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.65;
  color: #bac5d6;
}

.showcase-feed {
  display: grid;
  gap: 12px;
  max-width: 500px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.showcase-feed li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #ffffff1f;
  border-radius: 15px;
  background: #ffffff0f;
  box-shadow: 0 12px 32px -12px #06080e66;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .3s var(--motion-ease-out), background-color .3s, border-color .3s;
}

.showcase-feed li:hover {
  transform: translateX(4px);
  background: #ffffff17;
  border-color: #ffffff2e;
}

.account-page .feed-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: #7fa7e31f;
  color: #8fb2e6;
}

.account-page .feed-icon .icon {
  width: 18px;
  height: 18px;
}

.showcase-feed li[data-tone="active"] .feed-icon {
  background: #8cc4ff1f;
  color: #a7d1ff;
}

.showcase-feed li[data-tone="waiting"] .feed-icon {
  background: #ffcf861f;
  color: #ffd497;
}

.showcase-feed li[data-tone="report"] .feed-icon {
  background: #c9b6ff1f;
  color: #d8caff;
}

.account-page .feed-text strong {
  display: block;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: #f4f5f6;
}

.account-page .feed-text span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.45;
  color: #b9bdc6;
}

.account-page .feed-time {
  align-self: start;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: #9197a3;
}

@media (prefers-reduced-motion: no-preference) {
  .showcase-globe {
    animation: account-globe-turn 140s linear infinite;
  }

  .showcase-copy h2 span {
    animation: account-shimmer 7s ease-in-out infinite alternate;
  }

  /* The in-progress item breathes, like a live job. */
  .showcase-feed li[data-tone="active"] .feed-icon::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    box-shadow: 0 0 0 0 #a7d1ff55;
    animation: account-ping 2.4s var(--motion-ease-out) infinite;
  }
}

@keyframes account-globe-turn {
  to {
    transform: rotate(360deg);
  }
}

@keyframes account-shimmer {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

@keyframes account-ping {
  0% {
    box-shadow: 0 0 0 0 #a7d1ff55;
  }
  70%,
  100% {
    box-shadow: 0 0 0 9px #a7d1ff00;
  }
}

@media (max-width: 1080px) {
  .account-page[data-layout="split"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  }
  .account-showcase {
    padding: 48px 40px;
  }
  .account-page .feed-time {
    display: none;
  }
}

@media (max-width: 860px) {
  .account-page[data-layout="split"] {
    grid-template-columns: minmax(0, 1fr);
  }
  .account-main {
    min-height: 100vh;
    min-height: 100svh;
  }
  .account-showcase {
    margin: 0 12px 12px;
    padding: 44px 28px;
    gap: 30px;
  }
  .showcase-globe {
    width: 560px;
    height: 560px;
    right: -200px;
    bottom: -220px;
  }
  .account-page .feed-time {
    display: block;
  }
}

@media (max-width: 520px) {
  .account-main {
    padding: 20px 18px 18px;
  }
  .account-back {
    font-size: 12px;
  }
  .account-card {
    padding-block: 40px;
  }
  .account-card h1 {
    font-size: 30px;
  }
  .account-showcase {
    margin: 0 8px 8px;
    padding: 36px 20px;
    border-radius: 20px;
  }
  .showcase-copy h2 {
    font-size: 36px;
  }
  .showcase-feed li {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 12px 14px;
  }
  .account-page .feed-time {
    display: none;
  }
}

@media (max-width: 370px) {
  .account-main {
    padding-inline: 14px;
  }
  .account-back {
    display: none;
  }
}

/* Audit pages. Owner: audit-funnel.
   Rendered by crates/web/src/pages/audit/ (start, progress, report, claimed) and the live
   board island crates/web/src/audit_live/. Everything is scoped under .audit-page. Motion
   follows motion.css: transform/opacity/stroke-dashoffset only, first-paint entrances, and
   nothing animates under prefers-reduced-motion (motion.css switches animations off). */

.audit-page {
  --audit-technical: #0b408f;
  --audit-content: #1f529e;
  --audit-presence: #3b7fd6;
  --audit-authority: #7766dc;
  --audit-conversion: #e09a22;
  --audit-ai: #db5577;
  --audit-search: #5e6e95;
  --audit-soft: #f3f6fa;
  --audit-mint: #e7edf6;
  --audit-amber: #b26a00;
  --audit-amber-soft: #fff5e3;
  --audit-red: #b42318;
  --audit-red-soft: #fdeceb;
  position: relative;
  isolation: isolate;
  padding-block: 40px 96px;
}

.audit-page::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 620px;
  z-index: -1;
  background: radial-gradient(60% 65% at 72% 18%, #e2eaf5 0%, #f2f5fa 46%, transparent 78%);
  pointer-events: none;
}

.audit-page [hidden] {
  display: none !important;
}

.audit-page svg {
  padding-bottom: 0;
}

.audit-page h1 {
  margin: 10px 0 0;
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.05;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.audit-page h2 {
  margin: 0;
  letter-spacing: -.03em;
}

.audit-page .audit-accent {
  color: var(--green);
}

.audit-page .audit-lede {
  max-width: 620px;
  margin: 16px 0 0;
  color: #575b65;
  font-size: 17px;
  line-height: 1.65;
}

.audit-page a:where(:not(.button, .audit-badge)) {
  color: var(--deep);
  text-decoration: underline;
  text-decoration-color: #00286340;
  text-underline-offset: 3px;
  transition: text-decoration-color .2s;
}

.audit-page a:where(:not(.button, .audit-badge)):hover {
  text-decoration-color: currentColor;
}

.audit-page .audit-button-quiet {
  background: #fff;
  color: var(--deep);
  border-color: #bfc9d9;
  box-shadow: none;
}

.audit-page .audit-button-quiet:hover {
  background: var(--audit-soft);
}

/* Notices: status (neutral/positive) or alert (needs a fix). */
.audit-page .audit-notice {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--audit-mint);
  color: #162c4c;
  font-size: 14.5px;
  line-height: 1.5;
}

.audit-page .audit-notice[data-tone="alert"] {
  background: var(--audit-red-soft);
  color: var(--audit-red);
}

.audit-page .audit-small-print {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

/* ---------- The website field (start page, email form) ---------- */

.audit-page .audit-field-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 650;
}

.audit-page .audit-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 14px;
  border: 1px solid #d3d4d8;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 30px -22px #0d1f3b55;
  transition: border-color .2s, box-shadow .2s;
}

.audit-page .audit-field:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 4px #00368722, 0 10px 30px -22px #0d1f3b55;
}

.audit-page .audit-field-icon {
  display: inline-flex;
  color: #747882;
}

.audit-page .audit-field input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
}

.audit-page .audit-field input[aria-invalid="true"] {
  color: var(--audit-red);
}

.audit-page .audit-field .button {
  flex-shrink: 0;
}

/* ---------- /audit ---------- */

.audit-start {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  padding-top: 24px;
}

.audit-start-form {
  max-width: 620px;
  margin-top: 30px;
}

.audit-start .audit-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.audit-start .audit-dev-hint {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

.audit-start .audit-promises {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  color: #545861;
  font-size: 13.5px;
}

.audit-start .audit-promises li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.audit-start .audit-promises .icon {
  width: 15px;
  height: 15px;
  color: var(--green);
}

.audit-start-steps {
  padding: 26px 26px 22px;
  border-radius: 18px;
  box-shadow: 0 24px 60px -40px #0d1f3b55;
}

.audit-start-steps h2 {
  font-size: 15px;
  letter-spacing: -.01em;
}

.audit-start-steps ol {
  display: grid;
  gap: 18px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.audit-start-steps li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.audit-start-steps li > span:last-child {
  display: grid;
  gap: 4px;
}

.audit-start-steps strong {
  font-size: 14.5px;
}

.audit-start-steps li span span {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.audit-start .audit-step-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--audit-mint);
  color: var(--deep);
}

.audit-start .audit-step-icon .icon {
  width: 18px;
  height: 18px;
}

.audit-start .audit-steps-foot {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

/* ---------- /audit/{id} while running ---------- */

.audit-progress-head {
  max-width: 820px;
}

.audit-progress .audit-keep {
  color: var(--muted);
}

.audit-progress .audit-noscript {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13.5px;
}

.audit-live {
  margin-top: 26px;
}

.audit-live-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 14px 9px 12px;
  border: 1px solid #cfe6db;
  border-radius: 999px;
  background: #fff;
  color: #1d4d3c;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 22px -18px #0d3b2a66;
}

.audit-live-pulse {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--success);
}

.audit-live[data-phase="queued"] .audit-live-pulse {
  background: #a2a5ac;
}

.audit-live[data-phase="failed"] .audit-live-pulse {
  background: var(--audit-red);
}

.audit-live-lost {
  margin: 10px 0 0;
  color: var(--audit-amber);
  font-size: 13.5px;
}

.audit-live-grid {
  display: grid;
  grid-template-columns: minmax(270px, 340px) minmax(0, 1fr);
  gap: 28px;
  margin-top: 22px;
  align-items: start;
}

.audit-live-heading {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #70747f;
}

.audit-stages {
  position: sticky;
  top: 96px;
  padding: 22px 22px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px -44px #0d1f3b66;
}

/* Progress bars (fix batch F): style A pills, the same as the app's. Each is an SVG with
   no viewBox, so the rects are measured in pixels: the track and the fill are 8px tall
   with `rx="4"`, and both ends stay round at any width (a stretched viewBox turned the
   ends into wedges). */
.audit-stages-meter {
  display: block;
  width: 100%;
  height: 8px;
  margin: 14px 0 6px;
  overflow: hidden;
  border-radius: 999px;
}

.audit-stages-meter-track,
.audit-pages-meter-track,
.audit-breakdown-track {
  fill: var(--line);
}

.audit-stages-meter-fill,
.audit-pages-meter-fill {
  fill: var(--brand);
  transition: width .6s var(--motion-ease-out);
}

.audit-stage-list,
.audit-then-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.audit-stage {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eff0f1;
}

.audit-stage-mark {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid #d9dbdf;
  border-radius: 50%;
  background: #fff;
  color: #8e9196;
  font-size: 13px;
  font-weight: 700;
  transition: background .3s, border-color .3s, color .3s;
}

.audit-stage-mark .icon {
  position: absolute;
  width: 16px;
  height: 16px;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .3s, transform .4s var(--motion-ease-out);
}

.audit-stage-number {
  transition: opacity .2s;
}

.audit-stage-text {
  display: grid;
  gap: 2px;
}

.audit-stage-text strong {
  font-size: 14.5px;
  letter-spacing: -.01em;
  color: #8e929b;
  transition: color .3s;
}

.audit-stage-summary {
  color: #9ea1a9;
  font-size: 12.5px;
}

.audit-stage[data-state="active"] .audit-stage-mark {
  border-color: var(--green);
  color: var(--green);
}

.audit-stage[data-state="active"] .audit-stage-mark::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px solid transparent;
  border-top-color: var(--green);
  border-radius: 50%;
}

.audit-stage[data-state="active"] strong,
.audit-stage[data-state="done"] strong {
  color: var(--ink);
}

.audit-stage[data-state="active"] .audit-stage-summary {
  color: var(--green);
}

.audit-stage[data-state="done"] .audit-stage-mark {
  border-color: var(--success);
  background: var(--success);
  color: #fff;
}

.audit-stage[data-state="done"] .audit-stage-number {
  opacity: 0;
}

.audit-stage[data-state="done"] .audit-stage-mark .icon {
  opacity: 1;
  transform: none;
}

.audit-stage[data-state="done"] .audit-stage-summary {
  color: #545861;
}

.audit-stage[data-state="stopped"] .audit-stage-mark {
  border-color: var(--audit-red);
  color: var(--audit-red);
}

.audit-stage[data-state="stopped"] .audit-stage-summary {
  color: var(--audit-red);
}

.audit-then-title {
  margin: 16px 0 8px;
  color: #70747f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.audit-then {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  color: #9c9fa7;
  font-size: 13px;
  transition: color .3s;
}

.audit-then-dot {
  width: 8px;
  height: 8px;
  border: 1.5px solid #d0d2d6;
  border-radius: 50%;
  transition: background .3s, border-color .3s;
}

.audit-then[data-state="active"] {
  color: var(--green);
  font-weight: 600;
}

.audit-then[data-state="active"] .audit-then-dot {
  border-color: var(--green);
}

.audit-then[data-state="done"] {
  color: #42464f;
}

.audit-then[data-state="done"] .audit-then-dot {
  border-color: var(--success);
  background: var(--success);
}

.audit-then[data-state="stopped"] {
  color: var(--audit-red);
}

/* The board of artefacts. */
.audit-found-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 14px;
}

.audit-card {
  min-height: 128px;
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 40px -36px #0d1f3b66;
  transition: border-color .4s, box-shadow .4s;
}

.audit-card[data-ready] {
  border-color: #cfe6db;
  box-shadow: 0 18px 44px -34px #0d3b2a77;
}

.audit-card-pages {
  grid-row: span 3;
}

.audit-card-score {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  min-height: 0;
}

.audit-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.audit-card-head h3 {
  margin: 0;
  font-size: 14px;
  letter-spacing: -.01em;
}

.audit-card-head .icon {
  width: 17px;
  height: 17px;
  color: #3f587d;
}

.audit-card-waiting {
  position: relative;
  margin: 14px 0 0;
  color: #979ba3;
  font-size: 13px;
}

.audit-card-score .audit-card-waiting {
  margin: 0;
}

.audit-pages-count {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13.5px;
}

.audit-pages-count strong {
  color: var(--ink);
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.audit-pages-meter {
  display: block;
  width: 100%;
  height: 8px;
  margin: 12px 0 4px;
  overflow: hidden;
  border-radius: 999px;
}

.audit-page-list {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.audit-page-row {
  display: grid;
  gap: 2px;
  min-height: 46px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f7f7f8;
}

.audit-page-row:not([data-filled]) {
  background: #f6f6f7;
}

.audit-page-row[data-filled] {
  animation: audit-arrive .6s var(--motion-ease-out) backwards;
}

.audit-page-title {
  overflow: hidden;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.audit-page-path {
  overflow: hidden;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.audit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.audit-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--audit-mint);
  color: #162c4c;
  font-size: 13px;
  font-weight: 600;
  animation: audit-arrive .5s var(--motion-ease-out) backwards;
}

.audit-card-chips[data-kind="competitors"] .audit-chip {
  background: #eef2fb;
  color: #253f72;
}

.audit-chip small {
  color: inherit;
  font-size: 11.5px;
  font-weight: 500;
  opacity: .75;
}

.audit-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 600;
}

.audit-logo-link .icon {
  width: 16px;
  height: 16px;
}

.audit-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.audit-swatch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  animation: audit-arrive .5s var(--motion-ease-out) backwards;
}

.audit-swatch svg {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 2px 3px #0002);
}

.audit-swatch code {
  color: #5f636c;
  font-size: 11.5px;
}

.audit-score-preview {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0 0 0 auto;
  color: var(--muted);
  font-size: 14px;
}

.audit-score-preview strong {
  color: var(--ink);
  font-size: 30px;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.audit-card-score[data-ready] .audit-score-preview strong {
  color: var(--success);
}

/* Failure and recovery. */
.audit-failure {
  display: flex;
  gap: 16px;
  max-width: 820px;
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid #f3c8c4;
  border-radius: 16px;
  background: #fff;
}

.audit-failure h2 {
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -.02em;
}

.audit-failure-icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--audit-red-soft);
  color: var(--audit-red);
}

.audit-failure-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
}

/* "Still waiting to start…" (development servers, after a real wait with no progress). */
.audit-dev {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  max-width: 640px;
  margin-top: 28px;
  padding: 14px 18px;
  border: 1px solid var(--line, #eceef2);
  border-radius: 14px;
  background: #fff;
}

.audit-dev[hidden] {
  display: none;
}

.audit-dev p {
  margin: 0;
  color: var(--muted, #6b7180);
  font-size: 14px;
  line-height: 1.5;
}

.audit-dev form {
  margin: 0;
}

/* ---------- The report ---------- */

.audit-report .eyebrow {
  overflow-wrap: anywhere;
}

.audit-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
  padding-top: 8px;
}

.audit-meta {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.audit-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.audit-hero-breakdown {
  padding: 22px 22px 18px;
  border-radius: 18px;
  box-shadow: 0 30px 70px -48px #0d1f3b77;
}

.audit-hero-breakdown h2 {
  font-size: 15px;
  letter-spacing: -.01em;
}

.audit-more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 600;
}

.audit-more-link .icon {
  width: 14px;
  height: 14px;
}

/* The dial, its odometer and the headline numbers beside it. */
.audit-hero-figure {
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

.audit-hero-stats {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.audit-page .audit-hero-stats a {
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffffc0;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .2s, background .2s;
}

.audit-page .audit-hero-stats a:hover {
  border-color: #bfc9d9;
  background: #fff;
}

.audit-hero-stats strong {
  font-size: 22px;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.audit-hero-stats span {
  color: var(--muted);
  font-size: 12.5px;
}

.audit-dial {
  position: relative;
  width: min(330px, 100%);
  aspect-ratio: 1;
  margin: 18px 0 6px;
}

.audit-dial-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.audit-dial-ring,
.audit-dial-score,
.audit-dial-track,
.audit-dial-fill {
  fill: none;
  stroke-linecap: round;
}

.audit-dial-ring,
.audit-dial-score {
  stroke-width: 13;
}

.audit-dial-ring {
  stroke: #eaebed;
}

.audit-dial-track,
.audit-dial-fill {
  stroke-width: 6;
}

.audit-dial-track {
  stroke: #eff0f2;
}

/* A component that was not measured: a dotted track, no fill. */
.audit-dial-track:not(:has(+ .audit-dial-fill)) {
  stroke: #d7d8db;
  stroke-dasharray: 1.5 5;
  stroke-linecap: butt;
}

.audit-dial-fill[data-component="technical"] { stroke: var(--audit-technical); }
.audit-dial-fill[data-component="content"] { stroke: var(--audit-content); }
.audit-dial-fill[data-component="presence"] { stroke: var(--audit-presence); }
.audit-dial-fill[data-component="authority"] { stroke: var(--audit-authority); }
.audit-dial-fill[data-component="conversion"] { stroke: var(--audit-conversion); }
.audit-dial-fill[data-component="ai"] { stroke: var(--audit-ai); }
.audit-dial-fill[data-component="search"] { stroke: var(--audit-search); }

.audit-dial-readout {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
}

.audit-odometer {
  display: flex;
  align-items: flex-end;
  margin: 0;
  line-height: 1;
}

.audit-odometer-digits {
  display: inline-flex;
  font-size: 96px;
  font-weight: 750;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}

.audit-digit {
  position: relative;
  display: inline-block;
  width: .6em;
  height: 1em;
  overflow: hidden;
}

.audit-digit-strip {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.audit-digit-strip span {
  display: block;
  height: 1em;
  line-height: 1;
}

.audit-odometer-max {
  margin: 0 0 12px 4px;
  color: #93979f;
  font-size: 20px;
  font-weight: 600;
}

.audit-dial-verdict {
  margin: 8px 0 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--audit-mint);
  color: var(--deep);
  font-size: 13px;
  font-weight: 650;
}

.audit-dial[data-score-band="Hard to find"] .audit-dial-verdict {
  background: var(--audit-red-soft);
  color: var(--audit-red);
}

.audit-dial[data-score-band="Room to grow"] .audit-dial-verdict {
  background: var(--audit-amber-soft);
  color: var(--audit-amber);
}

/* The component breakdown. */
.audit-breakdown {
  display: grid;
  gap: 4px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.audit-breakdown-row a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: center;
  padding: 10px 10px;
  border-radius: 10px;
  color: var(--ink) !important;
  text-decoration: none !important;
  transition: background .2s;
}

.audit-breakdown-row a:hover {
  background: #f5f6f7;
}

.audit-breakdown-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
}

.audit-page .audit-breakdown-key {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 3px;
  background: #d1d3d6;
}

.audit-page [data-component="technical"] .audit-breakdown-key { background: var(--audit-technical); }
.audit-page [data-component="content"] .audit-breakdown-key { background: var(--audit-content); }
.audit-page [data-component="presence"] .audit-breakdown-key { background: var(--audit-presence); }
.audit-page [data-component="authority"] .audit-breakdown-key { background: var(--audit-authority); }
.audit-page [data-component="conversion"] .audit-breakdown-key { background: var(--audit-conversion); }
.audit-page [data-component="ai"] .audit-breakdown-key { background: var(--audit-ai); }
.audit-page [data-component="search"] .audit-breakdown-key { background: var(--audit-search); }

.audit-breakdown-value {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.audit-breakdown-value small {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
}

.audit-breakdown-row:not([data-measured]) .audit-breakdown-value {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.audit-breakdown-bar {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
}

.audit-breakdown-fill {
  fill: #bdbec2;
}

.audit-breakdown-row[data-component="technical"] .audit-breakdown-fill { fill: var(--audit-technical); }
.audit-breakdown-row[data-component="content"] .audit-breakdown-fill { fill: var(--audit-content); }
.audit-breakdown-row[data-component="presence"] .audit-breakdown-fill { fill: var(--audit-presence); }
.audit-breakdown-row[data-component="authority"] .audit-breakdown-fill { fill: var(--audit-authority); }
.audit-breakdown-row[data-component="conversion"] .audit-breakdown-fill { fill: var(--audit-conversion); }
.audit-breakdown-row[data-component="ai"] .audit-breakdown-fill { fill: var(--audit-ai); }
.audit-breakdown-row[data-component="search"] .audit-breakdown-fill { fill: var(--audit-search); }

/* The two numbers' group headings: "Visibility 12/100 · 2 of 4 sources measured". */
.audit-breakdown-group {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .6rem;
  align-items: baseline;
  margin: 1rem 0 .35rem;
}
.audit-breakdown-group:first-of-type { margin-top: 0; }
.audit-breakdown-group span { color: var(--muted); font-size: .85rem; }

.audit-breakdown-weight {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

/* Notes, jump links. */
.audit-notices {
  display: grid;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.audit-notices li {
  padding: 11px 14px;
  border-left: 3px solid #e0a12f;
  border-radius: 8px;
  background: var(--audit-amber-soft);
  color: #6a4b00;
  font-size: 14px;
  line-height: 1.5;
}

.audit-jump {
  position: sticky;
  top: 76px;
  z-index: 2;
  display: flex;
  gap: 6px;
  margin: 30px 0 0;
  padding: 6px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffffe8;
  backdrop-filter: blur(10px);
  scrollbar-width: none;
}

.audit-page .audit-jump a {
  flex-shrink: 0;
  padding: 7px 13px;
  border-radius: 999px;
  color: #42464f;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, color .2s;
}

.audit-page .audit-jump a:hover {
  background: var(--audit-mint);
  color: var(--deep);
}

/* Sections. */
.audit-section {
  margin-top: 64px;
  scroll-margin-top: 140px;
}

.audit-section-head {
  max-width: 720px;
  margin-bottom: 22px;
}

.audit-section-head h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
}

.audit-section-head p {
  margin: 10px 0 0;
  color: #5b5f69;
  font-size: 15.5px;
  line-height: 1.6;
}

.audit-page .audit-tally {
  color: var(--deep);
  font-size: 13.5px;
  font-weight: 650;
}

.audit-empty {
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  color: var(--muted);
}

.audit-page .audit-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eff0f1;
  color: #484c55;
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
  text-decoration: none;
}

.audit-page .audit-badge[data-tone="quoted"],
.audit-page .audit-badge[data-tone="markup"],
.audit-page .audit-badge[data-tone="mentioned"],
.audit-page .audit-badge[data-tone="direct"] {
  background: var(--audit-mint);
  color: #122d55;
}

.audit-page .audit-badge[data-tone="unverified"],
.audit-page .audit-badge[data-tone="medium"],
.audit-page .audit-badge[data-tone="missing"] {
  background: var(--audit-amber-soft);
  color: var(--audit-amber);
}

.audit-page .audit-badge[data-tone="high"] {
  background: var(--audit-red-soft);
  color: var(--audit-red);
}

.audit-page .audit-badge[data-tone="customer"],
.audit-page .audit-badge[data-tone="indirect"] {
  background: #eef2fb;
  color: #2b4c86;
}

.audit-page .audit-badge[data-tone="component"]:hover {
  background: #e6e7e9;
}

/* The profile card. */
.audit-facts {
  margin: 0;
  padding: 6px 22px;
  border-radius: 18px;
}

.audit-fact {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid #eff0f1;
}

.audit-fact:last-child {
  border-bottom: 0;
}

.audit-fact dt {
  padding-top: 1px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
}

.audit-fact dd {
  display: grid;
  gap: 7px;
  margin: 0;
}

.audit-fact-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.audit-fact-swatch {
  width: 18px;
  height: 18px;
}

.audit-fact-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.audit-fact-source {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.audit-fact-source q {
  margin-left: 6px;
  font-style: italic;
}

.audit-fact[data-state="unknown"] .audit-fact-value {
  color: #8f929a;
}

.audit-fact[data-state="unknown"] .audit-fact-value .icon {
  width: 16px;
  height: 16px;
}

/* Findings. */
.audit-findings {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.audit-finding {
  padding: 22px 24px;
  border-radius: 18px;
  border-left: 4px solid #d1d3d6;
}

.audit-finding[data-severity="high"] { border-left-color: #e0574d; }
.audit-finding[data-severity="medium"] { border-left-color: #e3a02b; }
.audit-finding[data-severity="low"] { border-left-color: #999ea9; }

.audit-finding-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.audit-finding-number {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-weight: 750;
}

.audit-finding h3 {
  margin: 4px 0 0;
  font-size: 18.5px;
  letter-spacing: -.02em;
}

.audit-finding-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
}

.audit-finding-detail {
  margin: 14px 0 0;
  color: #434751;
  font-size: 15px;
  line-height: 1.6;
}

.audit-finding-fix {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--audit-soft);
}

.audit-finding-fix .icon {
  color: var(--green);
}

.audit-finding-fix strong {
  font-size: 13.5px;
}

.audit-finding-fix p {
  margin: 4px 0 0;
  color: #363a43;
  font-size: 14.5px;
  line-height: 1.55;
}

.audit-evidence {
  margin-top: 12px;
  font-size: 13px;
}

.audit-evidence strong {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.audit-evidence ul,
.audit-check-evidence,
.audit-competitor-evidence {
  margin: 6px 0 0;
  padding-left: 18px;
  color: #545861;
  line-height: 1.55;
}

/* AI visibility. */
.audit-ai-summary {
  padding: 24px;
  border-radius: 18px;
  background: linear-gradient(135deg, #0f1a2a 0%, #12223b 100%);
  color: #e9eef6;
}

.audit-ai-asked {
  margin: 0;
  color: #b2b7c2;
  font-size: 15px;
}

.audit-ai-asked q {
  color: #fff;
  font-weight: 650;
}

.audit-ai-verdict {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 750;
  letter-spacing: -.03em;
}

.audit-ai-verdict .icon {
  width: 26px;
  height: 26px;
  padding: 4px;
  border-radius: 50%;
  background: #1250ad;
  color: #fff;
}

.audit-ai-verdict[data-tone="missing"] .icon {
  background: #e0a12f;
}

.audit-ai-verdict[data-tone="unmeasured"] .icon {
  background: #656972;
}

.audit-ai-note {
  margin: 8px 0 0;
  color: #c3c7cf;
}

.audit-ai-others {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 16px;
  color: #b2b7c2;
  font-size: 13.5px;
}

.audit-ai-others ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.audit-ai-others li {
  padding: 5px 11px;
  border: 1px solid #ffffff2b;
  border-radius: 999px;
  background: #ffffff12;
  color: #fff;
  font-weight: 600;
}

.audit-answers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.audit-answer {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 18px 20px;
  border-radius: 16px;
}

.audit-answer header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.audit-answer-position {
  color: var(--muted);
  font-size: 12px;
}

/* The engine's answer, formatted (components::ai_answer, fix batch H), set as a quote. */
.audit-answer .ai-answer-body {
  padding-left: 14px;
  border-left: 2px solid #e1e3e6;
}

.audit-answer .ai-answer-mention[data-kind="you"] {
  padding: 1px 4px;
  border-radius: 5px;
  background: #c9d9f0;
  color: #0b254d;
  font-weight: 700;
}

.audit-answer footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--muted);
  font-size: 12px;
}

.audit-answer-source[data-source="fixture"] {
  color: var(--audit-amber);
  font-weight: 600;
}

/* Competitors. */
.audit-competitors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.audit-competitor {
  padding: 18px 20px;
  border-radius: 16px;
}

.audit-competitor header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.audit-competitor h3 {
  margin: 0;
  font-size: 16px;
}

.audit-competitor header .audit-external {
  font-size: 13px;
}

.audit-competitor-mark {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #eef2fb;
  color: #2b4c86;
  font-size: 18px;
  font-weight: 750;
}

.audit-competitor-tags {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.audit-competitor-evidence li {
  display: grid;
  gap: 2px;
  margin-top: 6px;
  font-size: 13.5px;
}

.audit-competitor-evidence strong {
  font-size: 12px;
  color: #42464f;
}

/* The locked part and the paywall. */
.audit-locked {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  min-height: 420px;
  display: grid;
  place-items: center;
}

.audit-locked-skeleton {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  filter: blur(5px);
  opacity: .9;
  pointer-events: none;
  user-select: none;
}

.audit-skeleton-card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.audit-skeleton-card span {
  height: 12px;
  border-radius: 6px;
  background: #e1e3e6;
}

.audit-skeleton-card span:nth-child(2) {
  height: 44px;
  border-radius: 10px;
  background: #f0f0f2;
}

.audit-skeleton-card span:first-child {
  width: 60%;
  height: 16px;
  background: #cfd7e3;
}

.audit-skeleton-card span:last-child {
  width: 80%;
}

.audit-locked-panel {
  position: relative;
  max-width: 560px;
  margin: 24px;
  padding: 30px 30px 24px;
  border-radius: 22px;
  text-align: center;
  box-shadow: 0 40px 90px -40px #0d1f3b80;
}

.audit-locked-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--deep);
  color: #fff;
}

.audit-locked-panel h2 {
  margin-top: 14px;
  font-size: clamp(24px, 2.6vw, 30px);
}

/* "What happens next" (signup/next.rs, `.wn-`) under the paywall: below the button, ruled off. */
.audit-locked-panel .wn-panel {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.audit-locked-panel .wn-panel h2 {
  margin-top: 0;
  font-size: 19px;
}

.audit-locked-lede {
  margin: 10px auto 0;
  max-width: 440px;
  color: #5b5f69;
  line-height: 1.6;
}

.audit-locked-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.audit-locked-counts li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--audit-soft);
  font-size: 14px;
  font-weight: 650;
}

.audit-locked-counts .icon {
  width: 18px;
  height: 18px;
  color: var(--green);
}

.audit-page .audit-unlock {
  min-height: 52px;
  padding-inline: 24px;
  font-size: 15px;
}

/* Email me this report. */
.audit-email {
  padding: 24px;
  border-radius: 18px;
}

.audit-email-copy {
  display: flex;
  gap: 14px;
}

.audit-email-copy h2 {
  font-size: 20px;
}

.audit-email-copy p {
  margin: 6px 0 0;
  color: #5b5f69;
  line-height: 1.55;
}

.audit-email-icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--audit-mint);
  color: var(--deep);
}

.audit-email-form {
  max-width: 620px;
  margin-top: 18px;
}

.audit-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  color: #545861;
  font-size: 13.5px;
  line-height: 1.5;
}

.audit-consent input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--deep);
}

.audit-email-requests {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.audit-email-requests li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #545861;
  font-size: 14px;
}

.audit-email-requests .icon {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.audit-email-requests li[data-sent] .icon {
  color: var(--green);
}

/* Every check. */
.audit-components {
  display: grid;
  gap: 12px;
}

.audit-component {
  border-radius: 16px;
}

.audit-component summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto 20px;
  gap: 12px;
  align-items: center;
  padding: 16px 20px;
  list-style: none;
  border-radius: 16px;
}

.audit-component summary::-webkit-details-marker {
  display: none;
}

.audit-component summary:hover {
  background: #f9f9fa;
}

.audit-component summary .icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
  transition: transform .25s var(--motion-ease-out);
}

.audit-component[open] summary .icon {
  transform: rotate(90deg);
}

.audit-component-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.audit-component-weight {
  color: var(--muted);
  font-size: 12.5px;
}

.audit-component-body {
  padding: 0 20px 16px;
}

.audit-component-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.audit-checks {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.audit-check {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #eff0f1;
  font-size: 14px;
}

.audit-check-outcome {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: start;
  font-size: 12.5px;
  font-weight: 700;
}

.audit-check-outcome .icon {
  width: 15px;
  height: 15px;
}

.audit-check[data-outcome="pass"] .audit-check-outcome { color: var(--success); }
.audit-check[data-outcome="partial"] .audit-check-outcome { color: var(--audit-amber); }
.audit-check[data-outcome="fail"] .audit-check-outcome { color: var(--audit-red); }

.audit-check-evidence {
  font-size: 13px;
}

.audit-check-fix {
  margin: 8px 0 0;
  color: #363a43;
  font-size: 13.5px;
}

.audit-check-fix[data-locked] {
  color: var(--muted);
  font-style: italic;
}

.audit-pages-read {
  margin-top: 16px;
  padding: 18px 20px;
  border-radius: 16px;
}

.audit-pages-read h3 {
  margin: 0;
  font-size: 15px;
}

.audit-pages-read p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

.audit-pages-read ol {
  display: grid;
  /* Long page titles and URLs wrap instead of widening the page on phones. */
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 12px 0 0;
  padding-left: 20px;
  font-size: 14px;
}

.audit-pages-read li {
  min-width: 0;
  overflow-wrap: anywhere;
}

.audit-pages-read li span {
  margin-right: 8px;
}

/* The claimed report. */
.audit-claimed {
  display: grid;
  place-items: center;
  padding-top: 40px;
}

.audit-claimed-card {
  max-width: 520px;
  padding: 32px;
  border-radius: 20px;
  text-align: center;
}

.audit-claimed-card h1 {
  font-size: clamp(26px, 3vw, 34px);
}

.audit-claimed-card p {
  color: #5b5f69;
  line-height: 1.6;
}

.audit-claimed-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--audit-mint);
  color: var(--success-ink);
}

.audit-page .audit-claimed-alt {
  font-size: 13.5px;
}

/* ---------- Motion (first paint and arrivals) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .audit-live-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    animation: audit-pulse 1.6s var(--motion-ease-out) infinite;
  }

  .audit-live[data-phase="completed"] .audit-live-pulse::after,
  .audit-live[data-phase="failed"] .audit-live-pulse::after {
    animation: none;
  }

  .audit-stage[data-state="active"] .audit-stage-mark::after {
    animation: audit-spin 1.1s linear infinite;
  }

  .audit-card:not([data-ready]) .audit-card-waiting::after {
    content: "";
    position: absolute;
    inset: auto auto -6px 0;
    width: 64px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #9cc9b5, transparent);
    animation: audit-scan 1.6s var(--motion-ease-in-out) infinite;
  }

  .audit-digit-strip {
    animation: audit-roll 1.9s var(--motion-ease-out) .35s backwards;
  }

  .audit-digit[data-place="2"] .audit-digit-strip {
    animation-duration: 1.55s;
  }

  .audit-digit[data-place="3"] .audit-digit-strip {
    animation-duration: 1.2s;
  }

  .audit-dial-score {
    animation: audit-dial 1.9s var(--motion-ease-out) .35s backwards;
  }

  .audit-dial-fill {
    animation: audit-dial 1.5s var(--motion-ease-out) backwards;
    animation-delay: calc(.35s + var(--audit-slot, 0) * 90ms);
  }

  .audit-page [data-slot="1"] { --audit-slot: 1; }
  .audit-page [data-slot="2"] { --audit-slot: 2; }
  .audit-page [data-slot="3"] { --audit-slot: 3; }
  .audit-page [data-slot="4"] { --audit-slot: 4; }
  .audit-page [data-slot="5"] { --audit-slot: 5; }

  .audit-breakdown-fill {
    animation: audit-bar 1.2s var(--motion-ease-out) backwards;
    animation-delay: calc(.5s + var(--audit-slot, 0) * 90ms);
  }

  .audit-dial-verdict {
    animation: outpost-rise .7s var(--motion-ease-out) 1.6s backwards;
  }
}

@keyframes audit-roll {
  from {
    transform: translateY(calc(100% - 1em));
  }
}

@keyframes audit-dial {
  from {
    stroke-dashoffset: 1;
  }
}

/* The bar is revealed from the left rather than scaled, so its round ends never squash. */
@keyframes audit-bar {
  from {
    clip-path: inset(0 100% 0 0 round 4px);
  }
  to {
    clip-path: inset(0 0 0 0 round 4px);
  }
}

@keyframes audit-arrive {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
}

@keyframes audit-pulse {
  from {
    opacity: .6;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(2.6);
  }
}

@keyframes audit-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes audit-scan {
  from {
    transform: translateX(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    transform: translateX(160px);
    opacity: 0;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .audit-start,
  .audit-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .audit-live-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .audit-stages {
    position: static;
  }

  .audit-dial {
    margin-inline: auto;
  }

  .audit-hero-score {
    text-align: center;
  }

  .audit-hero-actions {
    justify-content: center;
  }

  .audit-hero-figure {
    grid-template-columns: minmax(0, 330px) minmax(0, 280px);
    justify-content: center;
    gap: 40px;
  }

  .audit-hero-stats {
    text-align: left;
  }

  .audit-hero-score .audit-meta,
  .audit-hero-score h1 {
    margin-inline: auto;
  }
}

@media (max-width: 720px) {
  .audit-page {
    padding-block: 24px 72px;
  }

  .audit-found-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .audit-card-pages {
    grid-row: auto;
  }

  .audit-page .audit-field {
    flex-wrap: wrap;
    padding: 6px;
  }

  .audit-page .audit-field-icon {
    padding-left: 8px;
  }

  .audit-page .audit-field input {
    flex-basis: calc(100% - 40px);
  }

  .audit-page .audit-field .button {
    flex: 1 1 100%;
  }

  .audit-fact {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .audit-locked-skeleton {
    grid-template-columns: minmax(0, 1fr);
  }

  .audit-hero-figure {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .audit-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    text-align: left;
  }

  .audit-jump {
    mask-image: linear-gradient(90deg, #000 80%, transparent);
  }

  .audit-locked-counts {
    grid-template-columns: minmax(0, 1fr);
  }

  .audit-locked-panel {
    margin: 12px 0;
    padding: 24px 18px 20px;
  }

  .audit-competitors,
  .audit-answers {
    grid-template-columns: minmax(0, 1fr);
  }

  .audit-component summary {
    grid-template-columns: auto minmax(0, 1fr) auto 18px;
    padding: 14px 16px;
  }

  .audit-component-weight {
    display: none;
  }

  .audit-component-body {
    padding: 0 16px 14px;
  }

  .audit-check {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .audit-odometer-digits {
    font-size: 78px;
  }

  .audit-finding,
  .audit-email,
  .audit-ai-summary {
    padding: 18px;
  }

  .audit-failure {
    flex-direction: column;
  }
}

@media (max-width: 380px) {
  .audit-odometer-digits {
    font-size: 66px;
  }

  .audit-page h1 {
    font-size: 30px;
  }
}

/* The calm pass: the score, the top three findings and the way on lead; the rest of the
   report opens in place under "Show the full report" (components/calm.rs). */
.audit-headline {
  max-width: 560px;
  margin: 16px 0 0;
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 560;
  line-height: 1.5;
}

.audit-more {
  margin-top: 56px;
}

.audit-more > summary {
  padding: 18px 22px;
  font-size: 15.5px;
}

.audit-more > .calm-more-body > .audit-section:first-of-type {
  margin-top: 40px;
}

.audit-more .audit-jump {
  margin-top: 8px;
}

.audit-more > .calm-more-body > .audit-hero-stats {
  margin-top: 24px;
}

.audit-finding-why {
  margin-top: 10px;
}

.audit-finding-why > .calm-why-body {
  display: block;
  padding-top: 0;
}

.audit-finding-why .audit-finding-detail {
  margin-top: 6px;
}

#audit-findings-more {
  margin-top: 16px;
}

/* Signup and the paywall funnel frame (shared with the billing pages).
   Rendered by crates/web/src/pages/signup/ (layout.rs: .funnel-*; signup.rs: .signup-*;
   verify.rs: .verify-*). Owner: accounts-billing. */

.funnel-page {
  --funnel-width: 1080px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(60% 50% at 100% 0%, #e7edf6 0%, transparent 70%),
    radial-gradient(40% 40% at 0% 100%, #eef5f9 0%, transparent 70%),
    var(--canvas);
}

.funnel-page[data-width="wide"] {
  --funnel-width: 1240px;
}

.funnel-page [hidden] {
  display: none !important;
}

.funnel-page ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Header and progress rail */

.funnel-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: #ffffffe6;
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
}

.funnel-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(var(--funnel-width), calc(100% - 48px));
  min-height: 64px;
  margin-inline: auto;
}

.funnel-header .wordmark span {
  font-size: 22px;
}

.funnel-header .wordmark img {
  width: 28px;
  height: 28px;
}

.funnel-account {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-size: 13.5px;
  color: var(--muted);
}

.funnel-account a {
  font-weight: 650;
  color: var(--deep);
}

.funnel-account a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.funnel-user {
  overflow: hidden;
  max-width: 260px;
  color: #494d57;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.funnel-signout {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: #31353f;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color .2s, background-color .2s;
}

.funnel-signout:hover {
  border-color: #cccfd6;
  background: var(--canvas);
}

.funnel-progress {
  position: relative;
  width: min(var(--funnel-width), calc(100% - 48px));
  margin-inline: auto;
  padding-bottom: 14px;
}

.funnel-progress-compact,
.funnel-progress-track {
  display: none;
}

.funnel-steps {
  display: flex;
  align-items: center;
  gap: 8px;
}

.funnel-steps li {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: #8f939c;
}

.funnel-steps li:not(:last-child)::after {
  content: "";
  flex: 1 1 auto;
  height: 2px;
  min-width: 12px;
  border-radius: 2px;
  background: var(--line);
}

.funnel-steps li[data-state="done"]::after {
  background: linear-gradient(90deg, var(--success), #6fcfa6);
}

.funnel-step-dot {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 1.5px solid #d6d9df;
  border-radius: 50%;
  background: #fff;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.funnel-step-dot .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
}

.funnel-step-label {
  white-space: nowrap;
}

.funnel-steps li[data-state="done"] {
  color: var(--success-ink);
}

.funnel-steps li[data-state="done"] .funnel-step-dot {
  border-color: var(--success);
  background: var(--success);
  color: #fff;
}

.funnel-steps li[data-state="current"] {
  color: var(--ink);
}

.funnel-steps li[data-state="current"] .funnel-step-dot {
  border-color: var(--deep);
  background: var(--deep);
  color: #fff;
  box-shadow: 0 0 0 4px #00368720;
}

/* Content */

.funnel-main {
  flex: 1 0 auto;
  width: min(var(--funnel-width), calc(100% - 48px));
  margin-inline: auto;
  padding-block: 48px 72px;
}

.funnel-kicker {
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .135em;
  color: var(--green);
}

.funnel-main h1 {
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 770;
  line-height: 1.07;
  letter-spacing: -.05em;
}

.funnel-lede {
  max-width: 620px;
  margin-top: 12px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
}

.funnel-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 22px;
  padding: 13px 15px;
  border: 1px solid;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
}

.funnel-notice .icon {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.funnel-notice[data-tone="success"] {
  border-color: #c3e8d6;
  background: #eef9f4;
  color: #0b5a40;
}

.funnel-notice[data-tone="error"] {
  border-color: #f2d0c9;
  background: #fff5f3;
  color: #8c2c1c;
}

.funnel-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  width: min(var(--funnel-width), calc(100% - 48px));
  margin-inline: auto;
  padding-block: 18px 22px;
  font-size: 12px;
  color: #8f939c;
}

.funnel-legal {
  display: flex;
  gap: 14px;
}

.funnel-footer a:hover {
  color: var(--deep);
}

/* The visitor's audit, beside signup and above the plans */

.funnel-audit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
  padding: 16px 18px;
  border: 1px solid #cfd9e9;
  border-radius: 16px;
  background: linear-gradient(135deg, #f3f6fb, #fff 70%);
  box-shadow: 0 16px 34px -26px #0d1f3b59;
}

.funnel-audit-ring {
  width: 54px;
  height: 54px;
}

.funnel-audit-ring circle {
  fill: none;
  stroke-width: 5;
}

.funnel-audit-ring .ring-track {
  stroke: #dce3ee;
}

.funnel-audit-ring .ring-value {
  stroke: var(--green);
  stroke-linecap: round;
}

.funnel-audit-kicker {
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .14em;
  color: var(--green);
}

.funnel-audit-host {
  overflow: hidden;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.funnel-audit-note {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

.funnel-audit-note strong {
  color: var(--ink);
}

.funnel-audit-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 650;
  color: var(--deep);
}

.funnel-audit-link .icon {
  width: 14px;
  height: 14px;
  transition: transform .25s var(--motion-ease-out);
}

.funnel-audit-link:hover .icon {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: no-preference) {
  .funnel-audit-ring .ring-value {
    animation: funnel-ring 1.4s var(--motion-ease-out) .25s backwards;
  }
}

@keyframes funnel-ring {
  from {
    stroke-dashoffset: 125.66;
  }
}

/* Signup */

.signup-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: start;
  gap: 40px;
}

.signup-card,
.verify-card {
  padding: 40px 42px 34px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 60px -44px #0d1f3b66, 0 2px 6px #101a2908;
}

.signup-plan-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 7px 12px 7px 10px;
  border: 1px solid #cfd9e9;
  border-radius: 999px;
  background: #eef2f9;
  font-size: 13px;
  font-weight: 650;
  color: var(--deep);
}

.signup-plan-chip .icon {
  width: 15px;
  height: 15px;
}

.signup-form {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}

.signup-field {
  display: grid;
  gap: 7px;
}

.signup-field label {
  font-size: 13px;
  font-weight: 650;
  color: #31353f;
}

.signup-field input {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 12px 15px;
  border: 1px solid #d6d9df;
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  box-shadow: 0 1px 2px #121b280a;
  transition: border-color .2s, box-shadow .2s;
}

.signup-field input::placeholder {
  color: #9ea2ab;
}

.signup-field input:hover {
  border-color: #bbbfc8;
}

.signup-field input:focus-visible {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 4px #00368724;
}

.signup-field input[aria-invalid="true"] {
  border-color: #d36b56;
  box-shadow: 0 0 0 4px #d36b561f;
}

.signup-hint {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.signup-field-error {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: #a33a24;
}

.signup-terms {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 4px 11px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #494d57;
}

.signup-terms input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--deep);
}

.signup-terms a {
  font-weight: 650;
  color: var(--deep);
  text-decoration: underline;
  text-decoration-color: #00286355;
  text-underline-offset: 3px;
}

.signup-terms .signup-field-error {
  grid-column: 2;
}

.signup-submit {
  width: 100%;
  min-height: 52px;
  margin-top: 4px;
  border-radius: 11px;
  font-size: 15px;
}

.signup-submit .icon,
.verify-resend .icon {
  transition: transform .25s var(--motion-ease-out);
}

.signup-submit:hover .icon {
  transform: translateX(3px);
}

.signup-alt {
  margin-top: 22px;
  font-size: 14px;
  text-align: center;
  color: var(--muted);
}

.signup-alt a {
  font-weight: 650;
  color: var(--deep);
}

/* The honeypot: out of sight and out of the tab order, but still in the form. */
.signup-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.signup-aside {
  padding: 8px 4px 0;
}

.signup-aside h2,
.wn-panel h2 {
  font-size: 20px;
  font-weight: 730;
  letter-spacing: -.035em;
}

.wn-steps {
  display: grid;
  gap: 4px;
  margin-top: 18px;
  counter-reset: step;
}

.wn-steps li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 14px 0 18px;
}

.wn-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 46px;
  bottom: -4px;
  left: 15px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(#cfd9e9, #e5e6ea);
}

.wn-number {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #cfd9e9, 0 6px 14px -10px #0d1f3b66;
  font-size: 13px;
  font-weight: 750;
  color: var(--deep);
}

.wn-steps strong {
  display: block;
  font-size: 15px;
  font-weight: 680;
  letter-spacing: -.015em;
}

.wn-steps span span {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.signup-receipt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px dashed #cfd2d9;
  border-radius: 14px;
  background: #ffffffa6;
  font-size: 13.5px;
  line-height: 1.5;
  color: #494d57;
}

.signup-receipt .icon {
  width: 18px;
  height: 18px;
  color: var(--green);
}

/* Check your inbox */

.verify-card {
  position: relative;
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}

.verify-card .funnel-lede {
  margin-inline: auto;
}

.verify-email {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.verify-illustration {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin: 0 auto 22px;
}

.verify-envelope {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: linear-gradient(140deg, #0b316b, #144fa8);
  color: #fff;
  box-shadow: 0 22px 40px -22px #0b316b, inset 0 0 0 1px #ffffff26;
}

.verify-envelope .icon {
  width: 32px;
  height: 32px;
  stroke-width: 1.6;
}

.verify-spark {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #7fa7e3;
}

.verify-spark-a {
  top: 6px;
  right: 2px;
}

.verify-spark-b {
  bottom: 10px;
  left: 0;
  width: 7px;
  height: 7px;
  background: #b9cbe6;
}

@media (prefers-reduced-motion: no-preference) {
  .verify-envelope {
    animation: verify-float 4.5s ease-in-out infinite;
  }
  .verify-spark {
    animation: verify-twinkle 3s ease-in-out infinite;
  }
  .verify-spark-b {
    animation-delay: 1.2s;
  }
}

@keyframes verify-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes verify-twinkle {
  0%,
  100% {
    opacity: .35;
    transform: scale(.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

.verify-dev {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 18px 20px;
  border: 1px solid #f5dfbd;
  border-radius: 16px;
  background: #fffaf2;
  font-size: 14px;
  line-height: 1.5;
  color: #6b4a14;
}

.verify-dev-badge,
.test-mode-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: #9a5800;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  white-space: nowrap;
  flex-shrink: 0;
}

.verify-dev-link {
  min-height: 42px;
  padding: 9px 16px;
  font-size: 13.5px;
}

.verify-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 20px;
  margin-top: 28px;
}

.verify-resend {
  min-height: 48px;
  gap: 10px;
  border-radius: 11px;
}

.verify-resend:hover .icon {
  transform: rotate(-35deg);
}

.verify-signin {
  padding: 0;
  background: none;
  font-size: 14px;
  font-weight: 650;
  color: var(--deep);
}

.verify-signin:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.verify-tips {
  display: grid;
  gap: 6px;
  max-width: 460px;
  margin: 26px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* Responsive */

@media (max-width: 1000px) {
  .funnel-step-label {
    display: none;
  }
  .funnel-steps li[data-state="current"] .funnel-step-label {
    display: inline;
  }
  .signup-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    max-width: 620px;
    margin-inline: auto;
  }
}

@media (max-width: 640px) {
  .funnel-header-bar,
  .funnel-progress,
  .funnel-main,
  .funnel-footer {
    width: calc(100% - 32px);
  }
  .funnel-header-bar {
    min-height: 58px;
  }
  .funnel-header .wordmark span {
    font-size: 20px;
  }
  .funnel-account-prompt,
  .funnel-user {
    display: none;
  }
  .funnel-steps {
    display: none;
  }
  .funnel-progress-compact {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 12.5px;
    color: var(--muted);
  }
  .funnel-progress-compact strong {
    color: var(--ink);
  }
  .funnel-progress-track {
    display: block;
    height: 4px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--line);
  }
  .funnel-progress-fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--green), #6f95cf);
    transform-origin: left center;
    transform: scaleX(.2);
  }
  .funnel-progress-fill[data-percent="40"] {
    transform: scaleX(.4);
  }
  .funnel-progress-fill[data-percent="60"] {
    transform: scaleX(.6);
  }
  .funnel-progress-fill[data-percent="80"] {
    transform: scaleX(.8);
  }
  .funnel-progress-fill[data-percent="100"] {
    transform: scaleX(1);
  }
  .funnel-main {
    padding-block: 28px 48px;
  }
  .signup-card,
  .verify-card {
    padding: 28px 20px 24px;
    border-radius: 18px;
  }
  .funnel-audit {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px 14px;
    padding: 14px;
  }
  .funnel-audit-link {
    grid-column: 2;
  }
}

@media (max-width: 370px) {
  .funnel-header-bar,
  .funnel-progress,
  .funnel-main,
  .funnel-footer {
    width: calc(100% - 24px);
  }
  .signup-card,
  .verify-card {
    padding-inline: 16px;
  }
  .funnel-audit-ring {
    width: 44px;
    height: 44px;
  }
}

/* "What happens next" (pages/signup/next.rs, the calm pass): on the signup page and under
   the free audit's paywall. */
.wn-panel {
  text-align: left;
}

.wn-steps {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.wn-week,
.wn-approval {
  margin-top: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--canvas);
}

.wn-week strong {
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand);
}

.wn-week p {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

.wn-approval {
  margin-top: 10px;
  background: var(--tint-blue);
}

.wn-approval > p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

.wn-approval > p .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--brand);
}

.wn-approval .calm-why {
  margin: 6px 0 0 28px;
}

.wn-approval .calm-why-body p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.wn-modes {
  display: grid;
  gap: 8px;
  margin: 0;
}

.wn-modes dt {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.wn-modes dd {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.wn-guarantee {
  margin-top: 12px;
  font-size: 13.5px;
}

.wn-guarantee a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand);
  font-weight: 650;
}

.wn-guarantee a:hover {
  color: var(--sky);
}

.wn-guarantee .icon {
  width: 14px;
  height: 14px;
}

/* Billing pages. Owner: accounts-billing.
   Rendered by crates/web/src/pages/billing/: plans.rs (.plans, .plans-card-*),
   checkout_status.rs (.checkout-status), test_checkout.rs and test_portal.rs (.test-*,
   .portal-*: the simulator, TEST MODE throughout), overview.rs (.billing-*, inside the
   app shell). The funnel frame is in signup.css. */

/* Plan choice */

.plans-head {
  display: grid;
  justify-items: center;
  text-align: center;
}

.plans-head .funnel-lede {
  margin-inline: auto;
}

.plans-head .funnel-audit {
  width: min(560px, 100%);
  margin: 22px 0 0;
  text-align: left;
}

.plans .funnel-notice {
  max-width: 720px;
  margin-inline: auto;
}

.plans-test-mode {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 22px auto 0;
  padding: 8px 14px;
  border: 1px solid #f5dfbd;
  border-radius: 999px;
  background: #fffaf2;
  font-size: 13px;
  color: #6b4a14;
}

.plans-unavailable {
  display: flex;
  gap: 14px;
  max-width: 720px;
  margin: 24px auto 0;
  padding: 18px 20px;
  border: 1px solid #f5dfbd;
  border-radius: 16px;
  background: #fffaf2;
  font-size: 14px;
  line-height: 1.55;
  color: #6b4a14;
}

.plans-unavailable > .icon {
  width: 22px;
  height: 22px;
  margin-top: 2px;
}

.plans-unavailable a {
  display: inline-block;
  margin-top: 6px;
  font-weight: 700;
  color: #7a4500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 34px;
}

.plans-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 22px 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 40px -34px #0d1f3b59;
}

.plans-card[data-selected="true"] {
  border-color: var(--green);
  box-shadow: 0 0 0 3px #0036871f, 0 26px 50px -34px #0d1f3b80;
}

.plans-card[data-plan="agency"] {
  border-style: dashed;
  background: #fbfcfd;
}

.plans-card-badge {
  position: absolute;
  top: -11px;
  left: 22px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--deep);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
}

.plans-card-head h2 {
  margin-top: 12px;
  font-size: 21px;
  font-weight: 750;
  letter-spacing: -.035em;
}

.plans-card-tagline {
  min-height: 2.9em;
  margin-top: 2px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}

.plans-card-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #e6ecf5;
  color: var(--deep);
}

.plans-card-icon[data-tone="deep"] {
  background: linear-gradient(140deg, #0b316b, #144fa8);
  color: #fff;
}

.plans-card-icon[data-tone="plain"] {
  background: #eff1f4;
  color: var(--ink);
}

.plans-card-icon .icon {
  width: 20px;
  height: 20px;
}

.plans-card-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 14px;
  color: var(--muted);
}

.plans-card-price strong {
  font-size: 36px;
  font-weight: 780;
  letter-spacing: -.05em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.plans-card-from {
  align-self: center;
  margin-right: 2px;
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.plans-card-features {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #494d57;
}

.plans-card-features li {
  position: relative;
  padding-left: 22px;
}

.plans-card-features li::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 2px;
  width: 9px;
  height: 5px;
  border-bottom: 2px solid var(--green);
  border-left: 2px solid var(--green);
  transform: rotate(-45deg);
}

.plans-card-features strong {
  color: var(--ink);
}

.plans-card-guarantee {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #eef2f9;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--deep);
}

.plans-card-guarantee .icon {
  width: 15px;
  height: 15px;
}

.plans-card-cta {
  width: 100%;
  min-height: 46px;
  gap: 10px;
  border-radius: 11px;
}

.plans-card-cta .icon {
  transition: transform .25s var(--motion-ease-out);
}

.plans-card-cta:hover .icon {
  transform: translateX(3px);
}

.plans-card-cta[disabled] {
  cursor: not-allowed;
  opacity: .55;
  transform: none;
}

.plans-footnotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 28px;
  margin-top: 30px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #ffffffb3;
  font-size: 13px;
  line-height: 1.5;
  color: #494d57;
}

.plans-footnotes p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.plans-footnotes .icon {
  width: 17px;
  height: 17px;
  color: var(--green);
}

.plans-footnotes a {
  font-weight: 650;
  color: var(--deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Confirming a payment */

.checkout-status {
  display: grid;
  justify-items: center;
  max-width: 560px;
  margin: 40px auto 0;
  padding: 44px 36px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  text-align: center;
}

.checkout-status .funnel-lede {
  margin-inline: auto;
}

.checkout-status-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin-bottom: 22px;
}

.orbit-ring {
  position: absolute;
  inset: 0;
  border: 3px solid #dce3ee;
  border-top-color: var(--green);
  border-radius: 50%;
}

.orbit-core {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: #e6ecf5;
  color: var(--deep);
}

.orbit-core .icon {
  width: 24px;
  height: 24px;
}

@media (prefers-reduced-motion: no-preference) {
  .orbit-ring {
    animation: billing-spin 1.1s linear infinite;
  }
}

@keyframes billing-spin {
  to {
    transform: rotate(360deg);
  }
}

.checkout-status-long {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fffaf2;
  font-size: 13.5px;
  line-height: 1.5;
  color: #6b4a14;
}

.checkout-status-long a {
  font-weight: 700;
  text-decoration: underline;
}

/* The simulator: checkout and portal */

.test-checkout {
  min-height: 100vh;
  min-height: 100dvh;
  background: linear-gradient(90deg, #fff 0 50%, #f7f8f9 50% 100%);
}

.test-mode-ribbon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  padding: 10px 16px;
  background: repeating-linear-gradient(-45deg, #fff4e5 0 14px, #ffefd8 14px 28px);
  border-bottom: 1px solid #f5dfbd;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: #6b4a14;
}

.test-checkout-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: min(980px, calc(100% - 48px));
  margin-inline: auto;
}

.test-summary,
.test-pay {
  padding: 56px 48px;
}

.test-summary {
  padding-left: 0;
}

.test-pay {
  padding-right: 0;
}

.test-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}

.test-back .icon {
  width: 15px;
  height: 15px;
  transform: rotate(180deg);
}

.test-back:hover {
  color: var(--deep);
}

.test-merchant {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 28px;
  font-size: 15px;
  font-weight: 700;
}

.test-summary-label {
  margin-top: 28px;
  font-size: 15px;
  color: var(--muted);
}

.test-summary-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}

.test-summary-price strong {
  font-size: 40px;
  font-weight: 760;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}

.test-summary-price span {
  font-size: 14px;
  color: var(--muted);
}

.test-summary-lines {
  display: grid;
  gap: 12px;
  margin-top: 30px;
  font-size: 14px;
  color: #494d57;
}

.test-summary-lines li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.test-summary-lines li:nth-child(2) {
  font-size: 13px;
  color: var(--muted);
}

.test-summary-total {
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-weight: 650;
  color: var(--ink);
}

.test-pay h1 {
  font-size: 22px;
  font-weight: 720;
  letter-spacing: -.03em;
}

.test-declined {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid #f2d0c9;
  border-radius: 12px;
  background: #fff5f3;
  font-size: 13.5px;
  line-height: 1.5;
  color: #8c2c1c;
}

.test-declined .icon {
  width: 18px;
  height: 18px;
}

.test-pay-form {
  display: grid;
  gap: 18px;
  margin-top: 22px;
}

.test-field {
  display: grid;
  gap: 6px;
  font-size: 14px;
}

.test-field-label,
.test-card legend {
  font-size: 13px;
  font-weight: 650;
  color: #494d57;
}

.test-field-value {
  padding: 12px 14px;
  border: 1px solid #d6d9df;
  border-radius: 10px;
  background: #f9f9fa;
  overflow-wrap: anywhere;
}

.test-card {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.test-card legend {
  margin-bottom: 6px;
}

.test-card-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "radio number result"
    "radio meta result";
  align-items: center;
  gap: 2px 12px;
  padding: 13px 14px;
  border: 1px solid #d6d9df;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}

.test-card-option:has(input:checked) {
  border-color: var(--green);
  box-shadow: 0 0 0 3px #0036871f;
}

.test-card-option input {
  grid-area: radio;
  width: 17px;
  height: 17px;
  accent-color: var(--deep);
}

.test-card-number {
  grid-area: number;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 15px;
  letter-spacing: .04em;
}

.test-card-meta {
  grid-area: meta;
  font-size: 12px;
  color: var(--muted);
}

.test-card-result {
  grid-area: result;
  font-size: 12.5px;
  font-weight: 650;
  color: #494d57;
}

.test-pay-button {
  width: 100%;
  min-height: 50px;
  border-radius: 11px;
  font-size: 15px;
}

.test-pay-note {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

.test-portal {
  background: #f7f8f9;
}

.portal-body {
  display: grid;
  gap: 18px;
  width: min(680px, calc(100% - 48px));
  margin-inline: auto;
  padding-block: 44px 64px;
}

.portal-body .test-merchant {
  margin-top: 4px;
}

.portal-notice {
  padding: 11px 14px;
  border: 1px solid;
  border-radius: 12px;
  font-size: 13.5px;
}

.portal-notice[data-tone="success"] {
  border-color: #c3e8d6;
  background: #eef9f4;
  color: #0b5a40;
}

.portal-notice[data-tone="error"] {
  border-color: #f2d0c9;
  background: #fff5f3;
  color: #8c2c1c;
}

.portal-card {
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.portal-label {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .13em;
  color: #7d848a;
}

.portal-card h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 24px;
  font-weight: 740;
  letter-spacing: -.035em;
}

.portal-status,
.billing-status {
  padding: 3px 10px;
  border-radius: 999px;
  background: #e6ecf5;
  color: var(--deep);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.portal-status[data-status="past_due"],
.billing-status[data-status="past_due"] {
  background: #fff1df;
  color: #9a5800;
}

.portal-status[data-status="canceled"],
.billing-status[data-status="canceled"] {
  background: #eff0f1;
  color: #5f636c;
}

.portal-price {
  margin-top: 6px;
  font-size: 14px;
  color: var(--muted);
}

.portal-help {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.portal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.portal-action .button {
  min-height: 42px;
  padding: 9px 15px;
  font-size: 13.5px;
  border-radius: 10px;
}

.portal-danger {
  color: #a33a24;
}

/* The billing page, inside the app shell */

.billing-overview {
  display: grid;
  gap: 16px;
}

.billing-head {
  padding: 34px 38px 32px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(50% 120% at 100% 0%, #e7edf6 0%, transparent 70%),
    #fff;
}

.billing-head h1 {
  margin-top: 4px;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 770;
  line-height: 1.07;
  letter-spacing: -.05em;
}

.billing-lede {
  max-width: 620px;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.billing-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid #f5dfbd;
  border-radius: 14px;
  background: #fffaf2;
  font-size: 14px;
  color: #6b4a14;
}

.billing-notice .icon {
  width: 18px;
  height: 18px;
}

.billing-plan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  padding: 26px 30px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}

.billing-empty {
  border-style: dashed;
  background: #ffffffb3;
}

.billing-label {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .13em;
  color: #7d848a;
}

.billing-plan h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 26px;
  font-weight: 750;
  letter-spacing: -.04em;
}

.billing-price {
  margin-top: 6px;
  font-size: 14.5px;
  color: var(--muted);
}

.billing-price strong {
  color: var(--ink);
}

.billing-warning {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff6ea;
  font-size: 13.5px;
  line-height: 1.5;
  color: #6b4a14;
}

.billing-help {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.billing-plan-actions .button {
  gap: 10px;
  border-radius: 11px;
}

.billing-usage,
.billing-history {
  padding: 26px 30px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}

.billing-usage header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
}

.billing-usage h2,
.billing-history h2 {
  font-size: 18px;
  font-weight: 720;
  letter-spacing: -.025em;
}

.billing-usage header p {
  font-size: 13.5px;
  color: var(--muted);
}

.billing-meters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.billing-meter {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color .2s, box-shadow .2s;
}

.billing-meter:hover {
  border-color: #cccfd6;
  box-shadow: 0 10px 24px -18px #101a2955;
}

.billing-meter-label {
  font-size: 13px;
  font-weight: 650;
  color: #494d57;
}

.billing-meter-value {
  font-size: 13.5px;
  color: var(--muted);
}

.billing-meter-value strong {
  font-size: 26px;
  font-weight: 760;
  letter-spacing: -.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.billing-meter-track svg {
  display: block;
  width: 100%;
  height: 6px;
}

.billing-meter .meter-track {
  fill: #eaebef;
}

.billing-meter .meter-fill {
  fill: var(--green);
}

.billing-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
}

.billing-features div {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--canvas);
}

.billing-features dt {
  font-size: 12.5px;
  color: var(--muted);
}

.billing-features dd {
  margin: 4px 0 0;
  font-size: 14.5px;
  font-weight: 650;
}

.billing-features dd[data-on="false"] {
  color: #8f939c;
  font-weight: 550;
}

.billing-channels {
  grid-column: 1 / -1;
}

.billing-channels ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.billing-channels li {
  padding: 4px 10px;
  border: 1px solid #cfd9e9;
  border-radius: 999px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--deep);
}

.billing-events {
  padding: 0;
  list-style: none;
  display: grid;
  margin-top: 12px;
}

.billing-events li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.billing-event-outcome {
  padding: 2px 9px;
  border-radius: 999px;
  background: #e6ecf5;
  color: var(--deep);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: capitalize;
}

.billing-event-outcome[data-outcome="ignored"],
.billing-event-outcome[data-outcome="pending"] {
  background: #eff0f1;
  color: #5f636c;
}

.billing-event-outcome[data-outcome="failed"] {
  background: #fff5f3;
  color: #a33a24;
}

.billing-events time {
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Responsive */

@media (max-width: 1150px) {
  .plans-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 16px;
  }
}

@media (max-width: 860px) {
  .test-checkout {
    background: #fff;
  }
  .test-checkout-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .test-summary,
  .test-pay {
    padding: 32px 0;
  }
  .test-pay {
    border-top: 1px solid var(--line);
  }
  .plans-footnotes {
    grid-template-columns: minmax(0, 1fr);
  }
  .billing-features {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .plans-grid,
  .billing-meters {
    grid-template-columns: minmax(0, 1fr);
  }
  .plans-grid {
    margin-top: 28px;
  }
  .plans-test-mode {
    border-radius: 14px;
    text-align: left;
  }
  .test-checkout-body,
  .portal-body {
    width: calc(100% - 32px);
  }
  .test-summary-price strong {
    font-size: 34px;
  }
  .checkout-status {
    margin-top: 12px;
    padding: 32px 20px;
  }
  .billing-head,
  .billing-plan,
  .billing-usage,
  .billing-history {
    padding: 22px 18px;
    border-radius: 18px;
  }
  .billing-features {
    grid-template-columns: minmax(0, 1fr);
  }
  .billing-events li {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .billing-events time {
    grid-column: 1 / -1;
  }
}

@media (max-width: 370px) {
  .test-checkout-body,
  .portal-body {
    width: calc(100% - 24px);
  }
  .plans-card {
    padding-inline: 16px;
  }
  .portal-card {
    padding: 20px 16px;
  }
}

/* The onboarding wizard. Owner: accounts-billing.
   Rendered by crates/web/src/pages/onboarding/ inside .app-shell[data-surface="onboarding"]
   (the app header from shell.css, without the navigation). Every rule is scoped by the
   surface attribute. */

[data-surface="onboarding"] .onboarding {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 32px;
  width: min(1180px, calc(100% - 64px));
  margin-inline: auto;
  padding-block: 36px 80px;
}

[data-surface="onboarding"] [hidden] {
  display: none !important;
}

/* Step rail */

[data-surface="onboarding"] .onboarding-rail {
  position: sticky;
  top: calc(var(--app-header-height) + 24px);
  align-self: start;
  padding: 22px 18px 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}

[data-surface="onboarding"] .onboarding-rail-title {
  font-size: 16px;
  font-weight: 740;
  letter-spacing: -.02em;
}

[data-surface="onboarding"] .onboarding-rail-time {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}

[data-surface="onboarding"] .onboarding-rail-time .icon {
  width: 15px;
  height: 15px;
}

[data-surface="onboarding"] ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="onboarding"] .onboarding-steps {
  display: grid;
  gap: 2px;
  margin-top: 18px;
}

[data-surface="onboarding"] .onboarding-steps li {
  position: relative;
}

[data-surface="onboarding"] .onboarding-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 36px;
  bottom: -6px;
  left: 22px;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
}

[data-surface="onboarding"] .onboarding-steps li[data-state="done"]::after {
  background: #9fdcc0;
}

[data-surface="onboarding"] .onboarding-steps a,
[data-surface="onboarding"] .onboarding-step-static {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 600;
  color: #8f939c;
}

[data-surface="onboarding"] .onboarding-steps a {
  color: #494d57;
  transition: background-color .15s;
}

[data-surface="onboarding"] .onboarding-steps a:hover {
  background: var(--canvas);
}

[data-surface="onboarding"] .onboarding-steps li[aria-current="step"] .onboarding-step-static {
  background: #eef2f8;
  color: var(--ink);
}

[data-surface="onboarding"] .onboarding-step-dot {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 1.5px solid #d6d9df;
  border-radius: 50%;
  background: #fff;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

[data-surface="onboarding"] .onboarding-step-dot .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
}

[data-surface="onboarding"] li[data-state="done"] .onboarding-step-dot {
  border-color: var(--success);
  background: var(--success);
  color: #fff;
}

[data-surface="onboarding"] li[data-state="current"] .onboarding-step-dot {
  border-color: var(--deep);
  background: var(--deep);
  color: #fff;
  box-shadow: 0 0 0 4px #00368720;
}

[data-surface="onboarding"] .onboarding-skip {
  display: inline-block;
  margin: 16px 10px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

[data-surface="onboarding"] .onboarding-skip:hover {
  color: var(--deep);
}

[data-surface="onboarding"] .onboarding-progress-compact,
[data-surface="onboarding"] .onboarding-progress-track {
  display: none;
}

/* The step card */

[data-surface="onboarding"] .onboarding-main {
  min-width: 0;
}

[data-surface="onboarding"] .onboarding-card {
  padding: 36px 40px 32px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 60px -48px #0d1f3b66;
}

[data-surface="onboarding"] .onboarding-head h1 {
  max-width: 720px;
  margin-top: 2px;
  font-size: clamp(26px, 2.9vw, 36px);
  font-weight: 770;
  line-height: 1.1;
  letter-spacing: -.045em;
}

[data-surface="onboarding"] .onboarding-lede {
  max-width: 680px;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

[data-surface="onboarding"] .onboarding-form {
  display: grid;
  gap: 26px;
  margin-top: 28px;
}

[data-surface="onboarding"] .onboarding-problem {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #f2d0c9;
  border-radius: 12px;
  background: #fff5f3;
  font-size: 14px;
  line-height: 1.5;
  color: #8c2c1c;
}

[data-surface="onboarding"] .onboarding-problem .icon {
  width: 18px;
  height: 18px;
}

[data-surface="onboarding"] fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

[data-surface="onboarding"] legend {
  margin-bottom: 12px;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.015em;
}

[data-surface="onboarding"] .onboarding-hint {
  margin: -4px 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

[data-surface="onboarding"] .onboarding-hint a {
  font-weight: 650;
  color: var(--deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

[data-surface="onboarding"] .onboarding-field {
  display: grid;
  gap: 7px;
}

[data-surface="onboarding"] .onboarding-field label {
  font-size: 13.5px;
  font-weight: 650;
  color: #31353f;
}

[data-surface="onboarding"] .onboarding-field label span {
  font-weight: 500;
  color: var(--muted);
}

[data-surface="onboarding"] .onboarding-field-inline {
  max-width: 320px;
}

[data-surface="onboarding"] input[type="text"],
[data-surface="onboarding"] input[type="url"],
[data-surface="onboarding"] input[type="date"] {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid #d6d9df;
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  transition: border-color .2s, box-shadow .2s;
}

[data-surface="onboarding"] input[type="text"]:focus-visible,
[data-surface="onboarding"] input[type="url"]:focus-visible,
[data-surface="onboarding"] input[type="date"]:focus-visible {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 4px #00368724;
}

[data-surface="onboarding"] input::placeholder {
  color: #9ea2ab;
}

[data-surface="onboarding"] .onboarding-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 14px 20px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

[data-surface="onboarding"] .onboarding-back {
  margin-right: auto;
  font-size: 14px;
  font-weight: 650;
  color: var(--muted);
}

[data-surface="onboarding"] .onboarding-back:hover {
  color: var(--deep);
}

[data-surface="onboarding"] .onboarding-continue {
  min-height: 48px;
  gap: 10px;
  border-radius: 11px;
}

[data-surface="onboarding"] .onboarding-continue .icon {
  transition: transform .25s var(--motion-ease-out);
}

[data-surface="onboarding"] .onboarding-continue:hover .icon {
  transform: translateX(3px);
}

[data-surface="onboarding"] .onboarding-assurance {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: #494d57;
}

[data-surface="onboarding"] .onboarding-assurance .icon {
  width: 17px;
  height: 17px;
  color: var(--green);
}

/* Choice cards and chips */

[data-surface="onboarding"] .choice-grid {
  display: grid;
  gap: 10px;
}

[data-surface="onboarding"] .choice-grid[data-columns="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

[data-surface="onboarding"] .choice-grid[data-columns="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

[data-surface="onboarding"] .choice-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 100%;
  padding: 15px 16px;
  border: 1px solid #dcdee4;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}

[data-surface="onboarding"] .choice-card:hover {
  border-color: #bbbfc8;
}

[data-surface="onboarding"] .choice-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

[data-surface="onboarding"] .choice-card:has(input:focus-visible) {
  outline: 3px solid #124ea9;
  outline-offset: 2px;
}

[data-surface="onboarding"] .choice-card:has(input:checked) {
  border-color: var(--green);
  background: #f3f6fb;
  box-shadow: 0 0 0 3px #0036871c;
}

[data-surface="onboarding"] .choice-card-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

[data-surface="onboarding"] .choice-card-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.01em;
}

[data-surface="onboarding"] .choice-card-detail {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

[data-surface="onboarding"] .choice-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: #e6ecf5;
  color: var(--deep);
  font-size: 11px;
  font-weight: 700;
}

[data-surface="onboarding"] .choice-card-check {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-left: auto;
  border: 1.5px solid #d6d9df;
  border-radius: 50%;
  color: transparent;
  transition: background-color .2s, border-color .2s, color .2s, transform .25s var(--motion-ease-out);
}

[data-surface="onboarding"] .choice-card-check .icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.6;
}

[data-surface="onboarding"] .choice-card:has(input:checked) .choice-card-check {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
  transform: scale(1.06);
}

[data-surface="onboarding"] .chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

[data-surface="onboarding"] .choice-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 9px 15px;
  border: 1px solid #dcdee4;
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}

[data-surface="onboarding"] .choice-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

[data-surface="onboarding"] .choice-chip:has(input:checked) {
  border-color: var(--green);
  background: #eef2f9;
  color: var(--deep);
}

[data-surface="onboarding"] .choice-chip:has(input:focus-visible) {
  outline: 3px solid #124ea9;
  outline-offset: 2px;
}

/* Step 1: what are you growing? Business types with their NAICS 2022 codes (fix batch F).
   The chosen type shows its codes; "Other" asks for a sentence; a type that isn't
   software hides "Where does it run?". All in place, with CSS alone. */

[data-surface="onboarding"] .business-picker-lede {
  margin: -4px 0 12px;
  font-size: 13.5px;
  color: var(--muted);
}

[data-surface="onboarding"] .business-other,
[data-surface="onboarding"] .naics-codes {
  display: none;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line, #eceef2);
  border-radius: 14px;
  background: #fafbfc;
  animation: business-reveal .28s var(--motion-ease-out, ease-out);
}

@keyframes business-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-surface="onboarding"] .business-other,
  [data-surface="onboarding"] .naics-codes {
    animation: none;
  }
}

[data-surface="onboarding"] .profile-form:has(#business_type-other:checked) .business-other,
[data-surface="onboarding"] .profile-form:has(#business_type-saas:checked) .naics-codes[data-for="saas"],
[data-surface="onboarding"] .profile-form:has(#business_type-mobile_app:checked) .naics-codes[data-for="mobile_app"],
[data-surface="onboarding"] .profile-form:has(#business_type-game:checked) .naics-codes[data-for="game"],
[data-surface="onboarding"] .profile-form:has(#business_type-ecommerce:checked) .naics-codes[data-for="ecommerce"],
[data-surface="onboarding"] .profile-form:has(#business_type-marketplace:checked) .naics-codes[data-for="marketplace"],
[data-surface="onboarding"] .profile-form:has(#business_type-software_agency:checked) .naics-codes[data-for="software_agency"],
[data-surface="onboarding"] .profile-form:has(#business_type-it_consulting:checked) .naics-codes[data-for="it_consulting"],
[data-surface="onboarding"] .profile-form:has(#business_type-management_consulting:checked) .naics-codes[data-for="management_consulting"],
[data-surface="onboarding"] .profile-form:has(#business_type-marketing_agency:checked) .naics-codes[data-for="marketing_agency"],
[data-surface="onboarding"] .profile-form:has(#business_type-professional_services:checked) .naics-codes[data-for="professional_services"],
[data-surface="onboarding"] .profile-form:has(#business_type-local_business:checked) .naics-codes[data-for="local_business"],
[data-surface="onboarding"] .profile-form:has(#business_type-media_creator:checked) .naics-codes[data-for="media_creator"],
[data-surface="onboarding"] .profile-form:has(#business_type-nonprofit:checked) .naics-codes[data-for="nonprofit"],
[data-surface="onboarding"] .profile-form:has(#business_type-other:checked) .naics-codes[data-for="other"] {
  display: block;
}

[data-surface="onboarding"] .profile-form:has(input[name="business_type"][data-software="false"]:checked) .platform-choices {
  display: none;
}

[data-surface="onboarding"] .business-other-label,
[data-surface="onboarding"] .naics-codes-title {
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #0b0d12);
}

[data-surface="onboarding"] .business-other-input {
  box-sizing: border-box;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #dcdee4;
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 14.5px;
}

[data-surface="onboarding"] .business-other-input:focus-visible {
  outline: 3px solid #124ea9;
  outline-offset: 1px;
}

[data-surface="onboarding"] .naics-suggestion {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--brand-tint, #e6eefa);
  color: var(--brand, #004296);
  font-size: 13.5px;
  line-height: 1.45;
}

[data-surface="onboarding"] .naics-suggestion .icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

[data-surface="onboarding"] .naics-chip {
  gap: 8px;
  max-width: 100%;
  font-weight: 500;
  text-align: left;
}

[data-surface="onboarding"] .naics-chip-code {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--brand, #004296);
}

@media (max-width: 760px) {
  [data-surface="onboarding"] .business-picker .choice-grid[data-columns="3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  [data-surface="onboarding"] .business-picker .choice-card {
    padding: 12px;
  }
}

@media (max-width: 360px) {
  [data-surface="onboarding"] .business-picker .choice-grid[data-columns="3"] {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Step 1: the profile */

/* The site card (fix batch F): its stored logo, or the name's initial, and the
   platforms and integrations the audit saw, as white logo chips. */
[data-surface="onboarding"] .profile-site {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--canvas);
}

[data-surface="onboarding"] .profile-site-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(11, 13, 18, .05);
}

[data-surface="onboarding"] .profile-site-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
}

/* Fix batch G: a square icon fills its tile; a wide logo is fitted inside the square
   with padding on a neutral tile, never stretched or cropped. */
[data-surface="onboarding"] .profile-site-mark[data-fit="square"] img {
  padding: 0;
  object-fit: cover;
}

[data-surface="onboarding"] .profile-site-mark[data-fit="fitted"] {
  background: var(--canvas);
}

[data-surface="onboarding"] .profile-site-mark[data-fit="fitted"] img {
  padding: 6px;
  object-fit: contain;
}

[data-surface="onboarding"] .profile-site-mark[data-kind="initial"] {
  border-color: transparent;
  background: var(--tint-blue);
  color: var(--brand);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.03em;
}

[data-surface="onboarding"] .profile-site-text {
  display: grid;
  flex: 1 1 180px;
  min-width: 0;
}

[data-surface="onboarding"] .profile-site strong {
  font-size: 15px;
}

[data-surface="onboarding"] .profile-site a {
  overflow: hidden;
  font-size: 13px;
  color: var(--deep);
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-surface="onboarding"] .profile-detected {
  display: grid;
  flex: 1 1 100%;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

[data-surface="onboarding"] .profile-detected-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

[data-surface="onboarding"] .logo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="onboarding"] .logo-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 5px 12px 5px 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(11, 13, 18, .04);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

[data-surface="onboarding"] .logo-chip img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

[data-surface="onboarding"] .logo-chip .icon {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

/* Remove a found fact: a quiet trash button at the end of its head row. */
[data-surface="onboarding"] .profile-remove {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -6px -8px -6px 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  transition: background-color .18s, color .18s;
}

[data-surface="onboarding"] .profile-remove .icon {
  width: 17px;
  height: 17px;
}

[data-surface="onboarding"] .profile-remove:hover,
[data-surface="onboarding"] .profile-remove:focus-visible {
  background: #fbe2e8;
  color: #b23a55;
}

[data-surface="onboarding"] .profile-remove:focus-visible,
[data-surface="onboarding"] .profile-unsure button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* "Is this right?" on Outpost's unsure facts: quiet, two small text buttons. */
[data-surface="onboarding"] .profile-unsure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font-size: 12.5px;
  color: var(--muted);
}

[data-surface="onboarding"] .profile-unsure button {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--brand);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

[data-surface="onboarding"] .profile-unsure .profile-unsure-no {
  color: #b23a55;
}

[data-surface="onboarding"] .profile-unsure button:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

[data-surface="onboarding"] .profile-found {
  display: grid;
  gap: 22px;
}

[data-surface="onboarding"] .profile-facts ul,
[data-surface="onboarding"] .profile-unknowns ul {
  display: grid;
  gap: 10px;
}

[data-surface="onboarding"] .profile-fact {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

[data-surface="onboarding"] .profile-fact[data-basis="customer"] {
  border-color: #cfd9e9;
  background: #f9fafb;
}

[data-surface="onboarding"] .profile-fact-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

[data-surface="onboarding"] .profile-fact-head label,
[data-surface="onboarding"] .profile-unknown label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #31353f;
}

[data-surface="onboarding"] .profile-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: #e6ecf5;
  color: var(--deep);
  font-size: 11px;
  font-weight: 700;
}

[data-surface="onboarding"] .profile-badge[data-basis="markup"] {
  background: #e9f1fb;
  color: #2a5b8f;
}

[data-surface="onboarding"] .profile-badge[data-basis="unverified"] {
  background: #fff1df;
  color: #9a5800;
}

[data-surface="onboarding"] .profile-badge[data-basis="customer"] {
  background: #ede9fb;
  color: #5b3fa8;
}

[data-surface="onboarding"] .profile-badge[data-basis="unknown"] {
  background: #eff0f1;
  color: #5f636c;
}

[data-surface="onboarding"] .profile-confidence {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
}

[data-surface="onboarding"] .profile-fact-static {
  overflow-wrap: anywhere;
  font-size: 14px;
  color: #494d57;
}

[data-surface="onboarding"] .profile-source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 12.5px;
  color: var(--muted);
}

[data-surface="onboarding"] .profile-source .icon {
  width: 14px;
  height: 14px;
}

[data-surface="onboarding"] .profile-source a {
  overflow: hidden;
  max-width: 100%;
  color: var(--deep);
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-surface="onboarding"] .profile-source q {
  flex-basis: 100%;
  font-style: italic;
}

[data-surface="onboarding"] .profile-unknown {
  display: grid;
  gap: 7px;
}

[data-surface="onboarding"] .profile-reading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid #cfd9e9;
  border-radius: 14px;
  background: #f3f6fb;
  font-size: 14px;
  line-height: 1.5;
}

[data-surface="onboarding"] .profile-reading p {
  margin-top: 2px;
  color: var(--muted);
}

[data-surface="onboarding"] .profile-reading-watch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--deep);
  font-weight: 650;
}

[data-surface="onboarding"] .profile-reading-watch .icon {
  width: 14px;
  height: 14px;
}

[data-surface="onboarding"] .profile-failed {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 22px 0 18px;
  padding: 16px 18px;
  border: 1px solid #f1d2c2;
  border-radius: 14px;
  background: #fdf6f2;
  font-size: 14px;
  line-height: 1.5;
}

[data-surface="onboarding"] .profile-failed > .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: #b4532a;
}

[data-surface="onboarding"] .profile-failed p {
  margin-top: 2px;
  color: #5a4a42;
}

[data-surface="onboarding"] .profile-retry {
  margin: 12px 0 4px;
}

[data-surface="onboarding"] .profile-reading-pulse {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--green);
}

@media (prefers-reduced-motion: no-preference) {
  [data-surface="onboarding"] .profile-reading-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--green);
    animation: onboarding-ping 1.8s var(--motion-ease-out) infinite;
  }
}

@keyframes onboarding-ping {
  from {
    opacity: .5;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(2.6);
  }
}

[data-surface="onboarding"] .profile-history {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

[data-surface="onboarding"] .profile-history summary {
  font-size: 14px;
  font-weight: 650;
  color: #494d57;
}

[data-surface="onboarding"] .profile-history ol {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

[data-surface="onboarding"] .profile-history li {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

[data-surface="onboarding"] .profile-history-change {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

[data-surface="onboarding"] .profile-history del {
  color: #8f939c;
}

[data-surface="onboarding"] .profile-history ins {
  text-decoration: none;
  font-weight: 650;
}

[data-surface="onboarding"] .profile-history .icon {
  width: 13px;
  height: 13px;
  color: var(--muted);
}

[data-surface="onboarding"] .profile-history time {
  font-size: 12px;
  color: var(--muted);
}

/* Step 4: connections */

[data-surface="onboarding"] .connection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

[data-surface="onboarding"] .connection-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

[data-surface="onboarding"] .connection-card[data-state="ready"] {
  grid-column: 1 / -1;
  border-color: #b8e2cd;
  background:
    radial-gradient(60% 140% at 100% 0%, #e2f5ec 0%, transparent 70%),
    #fbfefc;
}

[data-surface="onboarding"] .connection-card[data-state="soon"] {
  background: #fbfcfd;
}

[data-surface="onboarding"] .connection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

[data-surface="onboarding"] .connection-head h2 {
  font-size: 16px;
  font-weight: 720;
  letter-spacing: -.02em;
}

[data-surface="onboarding"] .connection-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eff0f1;
  color: #5f636c;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

[data-surface="onboarding"] .connection-state[data-state="ready"] {
  background: var(--success);
  color: #fff;
}

[data-surface="onboarding"] .connection-state .icon {
  width: 13px;
  height: 13px;
}

[data-surface="onboarding"] .connection-detail {
  font-size: 13.5px;
  line-height: 1.5;
  color: #494d57;
}

[data-surface="onboarding"] .connection-note {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--deep);
}

[data-surface="onboarding"] .connection-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--deep);
}

[data-surface="onboarding"] .connection-action .icon {
  width: 14px;
  height: 14px;
}

/* Step 5: mode */

[data-surface="onboarding"] .mode-always {
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--canvas);
}

[data-surface="onboarding"] .mode-always p {
  font-size: 13px;
  font-weight: 700;
  color: #494d57;
}

[data-surface="onboarding"] .mode-always ul {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

[data-surface="onboarding"] .mode-always li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #494d57;
}

[data-surface="onboarding"] .mode-always .icon {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: var(--green);
}

/* Step 6: the campaign */

[data-surface="onboarding"] .campaign-proposal {
  display: grid;
  gap: 18px;
  margin-top: 26px;
}

[data-surface="onboarding"] .campaign-summary {
  padding: 22px 24px;
  border-radius: 18px;
  background:
    radial-gradient(70% 140% at 100% 0%, #133f80 0%, #0b2750 70%);
  color: #fff;
}

[data-surface="onboarding"] .campaign-summary h2 {
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -.035em;
}

[data-surface="onboarding"] .campaign-summary > p {
  max-width: 640px;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.55;
  color: #cfd9e7;
}

[data-surface="onboarding"] .campaign-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
}

[data-surface="onboarding"] .campaign-stats div {
  padding: 10px 12px;
  border: 1px solid #ffffff26;
  border-radius: 12px;
  background: #ffffff12;
}

[data-surface="onboarding"] .campaign-stats dt {
  font-size: 12px;
  color: #b9bdc6;
}

[data-surface="onboarding"] .campaign-stats dd {
  margin: 2px 0 0;
  font-size: 22px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

[data-surface="onboarding"] .campaign-mode {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #cfd9e7;
}

[data-surface="onboarding"] .campaign-mode .icon {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: #8fb2e6;
}

[data-surface="onboarding"] .campaign-tasks {
  display: grid;
  gap: 10px;
}

[data-surface="onboarding"] .campaign-task {
  position: relative;
  padding: 16px 18px 16px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

[data-surface="onboarding"] .campaign-task::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--green);
}

[data-surface="onboarding"] .campaign-task[data-method="founder_only"]::before,
[data-surface="onboarding"] .campaign-task[data-method="manual"]::before {
  background: #e3a54a;
}

[data-surface="onboarding"] .campaign-task-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

[data-surface="onboarding"] .campaign-task-kind {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7d848a;
}

[data-surface="onboarding"] .campaign-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: #eff0f1;
  color: #5f636c;
  font-size: 11px;
  font-weight: 700;
}

[data-surface="onboarding"] .campaign-tag[data-tag="approval"] {
  background: #ede9fb;
  color: #5b3fa8;
}

[data-surface="onboarding"] .campaign-tag[data-tag="paid"] {
  background: #fff1df;
  color: #9a5800;
}

[data-surface="onboarding"] .campaign-task h3 {
  margin-top: 6px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.015em;
}

[data-surface="onboarding"] .campaign-task-why {
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #494d57;
}

[data-surface="onboarding"] .campaign-task-method {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--deep);
}

[data-surface="onboarding"] .campaign-retry,
[data-surface="onboarding"] .campaign-active {
  display: grid;
  justify-items: start;
  gap: 10px;
  margin-top: 26px;
  padding: 24px;
  border: 1px dashed #cfd2d9;
  border-radius: 18px;
  background: #fbfcfd;
}

[data-surface="onboarding"] .campaign-retry h2,
[data-surface="onboarding"] .campaign-active h2 {
  font-size: 19px;
  font-weight: 720;
  letter-spacing: -.025em;
}

[data-surface="onboarding"] .campaign-retry p,
[data-surface="onboarding"] .campaign-active p {
  max-width: 600px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

[data-surface="onboarding"] .campaign-retry .onboarding-actions {
  width: 100%;
  margin-top: 6px;
}

[data-surface="onboarding"] .campaign-retry-icon,
[data-surface="onboarding"] .campaign-active-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #e6ecf5;
  color: var(--deep);
}

[data-surface="onboarding"] .campaign-active-icon {
  background: linear-gradient(140deg, #0b316b, #144fa8);
  color: #fff;
}

[data-surface="onboarding"] .campaign-retry-icon .icon,
[data-surface="onboarding"] .campaign-active-icon .icon {
  width: 22px;
  height: 22px;
}

/* Responsive */

@media (max-width: 1100px) {
  [data-surface="onboarding"] .onboarding {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    width: min(820px, calc(100% - 48px));
    padding-top: 24px;
  }
  [data-surface="onboarding"] .onboarding-rail {
    display: none;
  }
  [data-surface="onboarding"] .onboarding-progress-compact {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--muted);
  }
  [data-surface="onboarding"] .onboarding-progress-compact strong {
    color: var(--ink);
  }
  [data-surface="onboarding"] .onboarding-progress-track {
    display: block;
    height: 4px;
    margin-bottom: 18px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--line);
  }
  [data-surface="onboarding"] .onboarding-progress-fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--green), #6f95cf);
    transform-origin: left center;
    transform: scaleX(.1667);
  }
  [data-surface="onboarding"] .onboarding-progress-fill[data-step="2"] {
    transform: scaleX(.3333);
  }
  [data-surface="onboarding"] .onboarding-progress-fill[data-step="3"] {
    transform: scaleX(.5);
  }
  [data-surface="onboarding"] .onboarding-progress-fill[data-step="4"] {
    transform: scaleX(.6667);
  }
  [data-surface="onboarding"] .onboarding-progress-fill[data-step="5"] {
    transform: scaleX(.8333);
  }
  [data-surface="onboarding"] .onboarding-progress-fill[data-step="6"] {
    transform: scaleX(1);
  }
}

@media (max-width: 760px) {
  [data-surface="onboarding"] .choice-grid[data-columns="3"],
  [data-surface="onboarding"] .choice-grid[data-columns="2"],
  [data-surface="onboarding"] .connection-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-surface="onboarding"] .campaign-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  [data-surface="onboarding"] .onboarding {
    width: calc(100% - 32px);
    padding-block: 18px 56px;
  }
  [data-surface="onboarding"] .onboarding-card {
    padding: 24px 18px 22px;
    border-radius: 18px;
  }
  [data-surface="onboarding"] .onboarding-actions {
    justify-content: stretch;
  }
  [data-surface="onboarding"] .onboarding-continue {
    flex: 1 1 auto;
  }
  [data-surface="onboarding"] .profile-history li {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  [data-surface="onboarding"] .campaign-summary {
    padding: 20px 18px;
  }
}

@media (max-width: 370px) {
  [data-surface="onboarding"] .onboarding {
    width: calc(100% - 24px);
  }
  [data-surface="onboarding"] .onboarding-card {
    padding-inline: 14px;
  }
}

/* Step 4: "Where should your articles live?" (pages, Part 2). Three homes, each with its
   trade-offs; the ones that are not built yet are shown, disabled, as coming soon. */

[data-surface="onboarding"] .article-homes {
  display: grid;
  gap: 14px;
  min-width: 0;
  margin: 0 0 26px;
  padding: 0;
  border: 0;
}

[data-surface="onboarding"] .article-homes legend {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  padding: 0;
}

[data-surface="onboarding"] .article-homes-title {
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -.02em;
}

[data-surface="onboarding"] .article-homes-why {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--muted);
}

[data-surface="onboarding"] .article-home-grid {
  display: grid;
  gap: 10px;
}

[data-surface="onboarding"] .article-home {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fbfcfd;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}

[data-surface="onboarding"] .article-home[data-state="soon"] {
  cursor: default;
}

[data-surface="onboarding"] .article-home[data-state="ready"] {
  background: #fff;
}

[data-surface="onboarding"] .article-home:has(input:checked) {
  border-color: var(--green);
  background:
    radial-gradient(60% 140% at 100% 0%, #e2eaf5 0%, transparent 70%),
    #fbfefc;
  box-shadow: 0 0 0 1px var(--green);
}

[data-surface="onboarding"] .article-home:has(input:focus-visible) {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

[data-surface="onboarding"] .article-home-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

[data-surface="onboarding"] .article-home-head input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--green);
}

[data-surface="onboarding"] .article-home-name {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

[data-surface="onboarding"] .article-home-name strong {
  font-size: 15.5px;
  font-weight: 720;
  overflow-wrap: anywhere;
}

[data-surface="onboarding"] .article-home-name span {
  font-size: 13.5px;
  color: #494d57;
  overflow-wrap: anywhere;
}

[data-surface="onboarding"] .article-home[data-state="ready"] .article-home-name span {
  font-weight: 650;
  color: var(--success-ink);
}

[data-surface="onboarding"] .article-home-note {
  font-size: 13px;
  line-height: 1.5;
  color: #5f636c;
}

[data-surface="onboarding"] .article-home-tradeoffs {
  display: grid;
  gap: 6px;
}

[data-surface="onboarding"] .article-home-pro,
[data-surface="onboarding"] .article-home-con {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #393d48;
}

[data-surface="onboarding"] .article-home-pro .icon,
[data-surface="onboarding"] .article-home-con .icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 3px;
}

[data-surface="onboarding"] .article-home-pro .icon {
  color: var(--green);
}

[data-surface="onboarding"] .article-home-con .icon {
  color: #b0742a;
}

[data-surface="onboarding"] .connection-heading {
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -.02em;
}

@media (max-width: 600px) {
  [data-surface="onboarding"] .article-home-head {
    flex-wrap: wrap;
  }

  [data-surface="onboarding"] .article-home-head .connection-state {
    margin-left: 30px;
  }
}

/* Step 6: the main keyword, chosen before the plan starts (migration 0231). The chooser
   itself is styled by pages/app/keyword.css (kw-). */

[data-surface="onboarding"] .onboarding-keyword {
  display: grid;
  gap: 10px;
  margin: 8px 0 28px;
  padding: 20px;
  border: 1px solid #cfd9e9;
  border-radius: 16px;
  background: linear-gradient(180deg, #f3f6fb 0%, #fff 70%);
}

[data-surface="onboarding"] .onboarding-keyword h2 {
  margin: 0;
  font-size: 20px;
}

[data-surface="onboarding"] .onboarding-keyword-lede {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

[data-surface="onboarding"] .onboarding-keyword-chosen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 4px 0 20px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--dash-positive-bg);
  color: var(--dash-positive-ink);
  font-weight: 600;
}

[data-surface="onboarding"] .onboarding-keyword-chosen .icon {
  width: 16px;
  height: 16px;
}

/* A competitor opens its own site in a new tab (fix batch H). */
[data-surface="onboarding"] .profile-fact-site {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

[data-surface="onboarding"] .profile-fact-site:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

[data-surface="onboarding"] .profile-fact-site .icon {
  width: 13px;
  height: 13px;
  color: var(--muted);
}

/* The question engine's views. Owner: questions.
   Rendered by crates/web/src/pages/questions/ (one question: .qcard-*, used on the product
   page and in onboarding's question steps) and crates/web/src/pages/app/product.rs (the
   product page: .pp-*). Every class is prefixed; nothing styles another owner's classes. */

/* One question */

.qcard {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.qcard-title {
  float: left;
  width: 100%;
  padding: 0;
  font-size: 17px;
  font-weight: 720;
  line-height: 1.4;
  letter-spacing: -.015em;
  color: var(--ink);
}

.qcard-title + * {
  clear: both;
}

.qcard-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.qcard-tags:not(:empty) {
  padding-top: 8px;
}

.qcard-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eff0f3;
  font-size: 12px;
  font-weight: 680;
  line-height: 1.3;
  white-space: nowrap;
  color: #545964;
}

.qcard-tag[data-tone="decisive"] {
  background: #e9eff7;
  color: #0b316b;
}

.qcard-tag .icon {
  width: 13px;
  height: 13px;
}

.qcard-why {
  max-width: 680px;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

/* What Outpost believes now */

.qcard-belief {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #d5deec;
  border-radius: 14px;
  background: #f6f7f9;
}

.qcard-belief[data-source="answered"],
.qcard-belief[data-source="confirmed"],
.qcard-belief[data-source="setup"] {
  border-color: var(--line);
  background: var(--canvas);
}

.qcard-belief > p {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-size: 14px;
  line-height: 1.5;
}

.qcard-belief-label {
  font-size: 12px;
  font-weight: 720;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--deep);
}

.qcard-belief strong {
  font-weight: 700;
  color: var(--ink);
}

.qcard-belief-source {
  font-size: 13px;
  color: var(--muted);
}

.qcard-evidence {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.qcard-evidence li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  min-width: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #494d57;
}

.qcard-evidence q {
  overflow-wrap: anywhere;
  font-style: italic;
  color: var(--ink);
}

.qcard-evidence small {
  font-size: 12px;
  color: var(--muted);
}

.qcard-source-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-weight: 620;
  color: var(--deep);
}

.qcard-source-link:hover {
  text-decoration: underline;
}

.qcard-source-link .icon {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  transform: rotate(-45deg);
}

/* Controls */

.qcard-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.qcard-options[data-columns="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.qcard-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: 13px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}

.qcard-option:hover {
  border-color: #bdc1ca;
}

.qcard-option input,
.qcard-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.qcard-option-dot {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1.5px solid #bcc0c8;
  border-radius: 50%;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}

.qcard-option-label {
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: #2b2f38;
}

.qcard-option:has(input:checked) {
  border-color: var(--green);
  background: #f1f5fa;
  box-shadow: 0 0 0 3px #00368714;
}

.qcard-option:has(input:checked) .qcard-option-dot {
  border-color: var(--green);
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 10px var(--green);
}

.qcard-option:has(input:focus-visible),
.qcard-chip:has(input:focus-visible) span {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.qcard-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.qcard-chip {
  position: relative;
  cursor: pointer;
}

.qcard-chip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: #2b2f38;
  transition: border-color .15s, background-color .15s;
}

.qcard-chip span .icon {
  display: none;
  width: 13px;
  height: 13px;
  color: var(--green);
}

.qcard-chip:hover span {
  border-color: #bdc1ca;
}

.qcard-chip:has(input:checked) span {
  border-color: var(--green);
  background: #f1f5fa;
  color: #0b2c5e;
}

.qcard-chip:has(input:checked) span .icon {
  display: inline-block;
}

.qcard-hint {
  flex-basis: 100%;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.qcard-lines {
  margin-top: 4px;
}

.qcard-lines .qcard-chips {
  margin-bottom: 12px;
}

.qcard-text-label {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 650;
  color: #393d47;
}

.qcard-lines textarea {
  display: block;
  width: 100%;
  max-width: 560px;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  resize: vertical;
}

.qcard-lines textarea:focus {
  border-color: var(--green);
  outline: none;
  box-shadow: 0 0 0 3px #00368722;
}

.qcard-launch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 620;
  color: #393d47;
}

.qcard-launch span {
  font-weight: 500;
  color: var(--muted);
}

.qcard-launch input {
  padding: 8px 10px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
}

.qcard-default {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* Why it matters */

.qcard-more {
  margin-top: 12px;
}

.qcard-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 650;
  color: var(--deep);
  cursor: pointer;
  list-style: none;
}

.qcard-more > summary::-webkit-details-marker {
  display: none;
}

.qcard-more > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s;
}

.qcard-more[open] > summary::after {
  transform: translateY(1px) rotate(-135deg);
}

.qcard-matters {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.qcard-matters h4 {
  font-size: 12px;
  font-weight: 720;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.qcard-unlocks ul,
.qcard-claims ul {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.qcard-unlocks li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 4px 12px;
  font-size: 13.5px;
  line-height: 1.5;
}

.qcard-unlocks strong {
  font-weight: 680;
  color: var(--ink);
}

.qcard-unlocks span {
  color: #494d57;
}

.qcard-claims li {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--canvas);
}

.qcard-claim-kind {
  display: inline-block;
  margin-bottom: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff;
  font-size: 11.5px;
  font-weight: 700;
  color: #545964;
}

.qcard-claims p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
}

.qcard-claims small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.qcard-claims code {
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
}

/* Onboarding's question steps (inside the wizard's card) */

.qcard-step .qcard-step-item + .qcard-step-item {
  margin-top: 4px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.qcard-step .qcard-step-item {
  padding-bottom: 20px;
}

.qcard-step-later {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--canvas);
  font-size: 13.5px;
  line-height: 1.5;
  color: #494d57;
}

.qcard-step-later .icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--deep);
}

.qcard-known {
  margin: 4px 0 22px;
  padding: 16px 18px;
  border: 1px solid #d5deec;
  border-radius: 16px;
  background: #f7f8fa;
}

.qcard-known-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 720;
  color: var(--deep);
}

.qcard-known-title .icon {
  width: 16px;
  height: 16px;
}

.qcard-known ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.qcard-known li {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.qcard-known li span {
  font-size: 12px;
  font-weight: 620;
  color: var(--muted);
}

.qcard-known li strong {
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.qcard-known li small {
  font-size: 12px;
  color: #1d5fb8;
}

.qcard-known-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--deep);
}

.qcard-known-link .icon {
  width: 14px;
  height: 14px;
}

.qcard-known-link:hover {
  text-decoration: underline;
}

/* The product page */

.pp-page {
  display: grid;
  gap: 22px;
}

.pp-tally {
  display: flex;
  gap: 8px;
  margin: 0;
}

.pp-tally div {
  min-width: 92px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.pp-tally dt {
  font-size: 12px;
  font-weight: 620;
  color: var(--muted);
}

.pp-tally dd {
  margin: 2px 0 0;
  font-size: 24px;
  font-weight: 760;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.pp-tally a {
  color: var(--ink);
}

.pp-tally a:hover {
  color: var(--deep);
}

.pp-how {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, #fbfdfc, #f5f6f7);
  list-style: none;
}

.pp-how li {
  display: flex;
  gap: 10px;
  min-width: 0;
}

.pp-how-step {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--deep);
  font-size: 12.5px;
  font-weight: 760;
  color: #fff;
}

.pp-how strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.pp-how p {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.pp-how-action form {
  margin: 0;
}

.pp-how-action .dash-button {
  white-space: nowrap;
}

.pp-section {
  scroll-margin-top: 90px;
  padding: 22px 24px 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
}

.pp-quiet {
  background: var(--canvas);
  box-shadow: none;
}

.pp-section-head {
  max-width: 760px;
  margin-bottom: 18px;
}

.pp-section-head h2 {
  font-size: 19px;
  font-weight: 740;
  letter-spacing: -.025em;
}

.pp-section-head p {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.pp-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--canvas);
  font-size: 14px;
  color: #494d57;
}

.pp-empty .icon {
  width: 18px;
  height: 18px;
  color: var(--green);
}

.pp-questions,
.pp-confirm,
.pp-facts,
.pp-research,
.pp-not-asked {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pp-question {
  scroll-margin-top: 90px;
  padding: 18px 20px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}

.pp-question:target,
.pp-question:has(.qcard:target) {
  border-color: var(--green);
  box-shadow: 0 0 0 4px #0036871a;
}

.pp-question[data-problem] {
  border-color: #f2b8b5;
}

.pp-raised {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 12.5px;
  font-weight: 640;
  color: var(--deep);
}

.pp-raised .icon {
  width: 14px;
  height: 14px;
}

.pp-problem {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--dash-negative-bg);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--dash-negative-ink);
}

.pp-problem .icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.pp-question-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.pp-time {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--muted);
}

.pp-more {
  margin-top: 12px;
}

.pp-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 13.5px;
  font-weight: 650;
  color: #393d47;
  cursor: pointer;
  list-style: none;
}

.pp-more > summary::-webkit-details-marker {
  display: none;
}

.pp-more > summary:hover {
  border-color: #c6c9d0;
}

.pp-more[open] > summary {
  margin-bottom: 12px;
}

/* Confirm in one tap */

.pp-confirm-card {
  scroll-margin-top: 90px;
  padding: 16px 18px;
  border: 1px solid #d5deec;
  border-radius: 18px;
  background: #f8f9fb;
}

.pp-confirm-card:target {
  box-shadow: 0 0 0 4px #0036871a;
}

.pp-confirm-question {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

.pp-confirm-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 6px;
}

.pp-confirm-value span {
  font-size: 12px;
  font-weight: 720;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--deep);
}

.pp-confirm-value strong {
  font-size: 18px;
  font-weight: 740;
  letter-spacing: -.02em;
  color: var(--ink);
}

.pp-confirm-source {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: #494d57;
}

.pp-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
}

.pp-confirm-actions > form {
  margin: 0;
}

.pp-change {
  flex: 1 1 260px;
}

.pp-change > summary {
  list-style: none;
  cursor: pointer;
}

.pp-change > summary::-webkit-details-marker {
  display: none;
}

.pp-change[open] > summary {
  margin-bottom: 12px;
}

.pp-change-form {
  display: grid;
  gap: 14px;
  justify-items: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.pp-change-form .qcard {
  justify-self: stretch;
}

/* Facts */

.pp-fact-group + .pp-fact-group {
  margin-top: 20px;
}

.pp-fact-group h4 {
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 720;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

.pp-facts {
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.pp-facts li + li {
  border-top: 1px solid var(--line);
}

.pp-fact {
  scroll-margin-top: 90px;
}

.pp-fact > summary {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) minmax(0, 310px) 16px;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
  transition: background-color .15s;
}

.pp-fact > summary::-webkit-details-marker {
  display: none;
}

.pp-fact > summary:hover {
  background: var(--canvas);
}

.pp-fact > summary .icon {
  width: 14px;
  height: 14px;
  color: #8f939c;
  transform: rotate(90deg);
  transition: transform .15s;
}

.pp-fact[open] > summary .icon {
  transform: rotate(-90deg);
}

.pp-fact-label {
  font-size: 13.5px;
  font-weight: 620;
  color: var(--muted);
}

.pp-fact-value {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14.5px;
  font-weight: 680;
  color: var(--ink);
}

.pp-fact-source {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-self: end;
  gap: 2px 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eff0f3;
  font-size: 12px;
  font-weight: 660;
  color: #545964;
}

.pp-fact-source[data-source="inferred"] {
  background: #e8f1fe;
  color: #1d5fb8;
}

.pp-fact-source[data-source="answered"],
.pp-fact-source[data-source="confirmed"] {
  background: #e9eff7;
  color: #0b377a;
}

.pp-fact-source small {
  font-size: 11px;
  font-weight: 600;
  opacity: .8;
}

.pp-fact-body {
  display: grid;
  gap: 12px;
  padding: 2px 16px 16px;
  background: var(--canvas);
}

.pp-fact-updated {
  padding-top: 12px;
  font-size: 13px;
  color: var(--muted);
}

/* Research and questions not asked */

.pp-research li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 2px 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.pp-research .icon {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--deep);
}

.pp-research p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

.pp-research small {
  grid-column: 2;
  font-size: 12.5px;
  color: var(--muted);
}

.pp-not-asked {
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.pp-not-asked li {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 4px 16px;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.5;
}

.pp-not-asked li + li {
  border-top: 1px solid var(--line);
}

.pp-not-asked small {
  font-size: 12.5px;
  color: var(--muted);
}

/* Narrow screens */

@media (max-width: 1100px) {
  .pp-how {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .qcard-options,
  .qcard-options[data-columns="2"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .qcard-unlocks li {
    grid-template-columns: minmax(0, 1fr);
  }

  .pp-section {
    padding: 18px 16px 18px;
    border-radius: 18px;
  }

  .pp-question {
    padding: 16px 14px;
  }

  .pp-tally {
    flex-wrap: wrap;
  }

  .pp-tally div {
    flex: 1 1 0;
    min-width: 0;
  }

  .pp-fact > summary {
    grid-template-columns: minmax(0, 1fr) 16px;
    gap: 4px 10px;
  }

  .pp-fact-label,
  .pp-fact-value,
  .pp-fact-source {
    grid-column: 1;
    justify-self: start;
  }

  .pp-fact > summary .icon {
    grid-row: 1 / span 3;
    grid-column: 2;
  }

  .pp-not-asked li {
    grid-template-columns: minmax(0, 1fr);
  }

  .pp-time {
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* Plain question cards (fix batch 2026-10-21 §7), rendered by
   crates/web/src/pages/questions/plain.rs on the product page, the Command Center and
   Decisions: the question with the guess in it, "Why we think so", "Why it matters", and
   one-tap answers with the guess marked. */

.qplain {
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px #101a290a, 0 18px 40px -32px #101a2940;
}

.qplain-head {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12.5px;
}

.qplain-head .dash-when {
  margin-left: auto;
}

.qplain-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: #fff4e5;
  color: #b25e00;
}

.qplain-icon .icon {
  width: 15px;
  height: 15px;
}

.qplain-kicker {
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 11.5px;
}

.qplain-title {
  font-size: 19px;
  font-weight: 760;
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--ink);
}

.qplain-line {
  max-width: 68ch;
  color: #40444e;
  font-size: 14px;
  line-height: 1.55;
}

.qplain-line strong {
  color: var(--ink);
  font-weight: 700;
}

.qplain-line a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--deep);
  font-weight: 650;
  text-underline-offset: 3px;
}

.qplain-line a:hover {
  text-decoration: underline;
}

.qplain-line a .icon {
  width: 12px;
  height: 12px;
}

.qplain-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.qplain-choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid #d2d5db;
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, box-shadow .15s, transform .15s;
}

.qplain-choice:hover {
  border-color: var(--green);
  background: #f3f6fb;
}

.qplain-choice:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.qplain-choice:active {
  transform: translateY(1px);
}

.qplain-choice[data-guess] {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
  box-shadow: 0 8px 20px -12px #00286399;
}

.qplain-choice[data-guess]:hover {
  background: var(--deep);
}

.qplain-choice small {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 700;
  opacity: .9;
}

.qplain-choice small .icon {
  width: 11px;
  height: 11px;
  stroke-width: 3;
}

.qplain-save {
  justify-self: start;
}

/* The card's title already asks the question: its fieldset keeps the legend for screen
   readers only. */
.qplain .qcard {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.qplain .qcard-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.qplain .qcard-why:empty,
.qplain .qcard-tags:empty {
  display: none;
}

.qplain-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px 16px;
}

.qplain-else > summary,
.qplain-later {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
  text-decoration: underline;
  text-decoration-color: #cccfd6;
  text-underline-offset: 4px;
}

.qplain-else > summary::-webkit-details-marker {
  display: none;
}

.qplain-else > summary:hover,
.qplain-later:hover {
  color: var(--ink);
}

.qplain-else[open] {
  flex-basis: 100%;
}

.qplain-else-body {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  padding: 12px;
  border-radius: 12px;
  background: var(--canvas);
}

.qplain-else-body .qcard {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.qplain-else-body .dash-button {
  justify-self: start;
}

/* The product page: only what needs the founder (fix batch §9). */

.pp-asking {
  display: grid;
  gap: 14px;
}

.pp-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--muted);
  font-size: 14.5px;
}

.pp-summary strong {
  color: var(--ink);
  font-weight: 700;
}

.pp-summary a {
  color: var(--deep);
  font-weight: 700;
  text-underline-offset: 3px;
}

.pp-summary a:hover {
  text-decoration: underline;
}

.pp-everything {
  margin-top: 16px;
  border-top: 1px solid var(--line);
}

.pp-everything > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 4px;
  color: var(--deep);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.pp-everything > summary::-webkit-details-marker {
  display: none;
}

.pp-everything > summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.pp-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--canvas);
  color: #40444e;
  font-size: 12px;
}

.pp-everything-note {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13.5px;
}

.pp-everything form {
  margin-top: 14px;
}

@media (max-width: 560px) {
  .qplain {
    padding: 16px;
  }
  .qplain-title {
    font-size: 17px;
  }
  .qplain-choice {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* One place for what Outpost knows (fix batch 2026-10-21 §26): the business facts and
   the typed answers, in the same rows. Edits are sent in place by
   public/product-facts.js; without it every form posts and the page comes back. */

.pp-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pp-known {
  scroll-margin-top: 90px;
  margin-top: 22px;
}

.pp-known + .pp-known {
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.pp-known-head {
  max-width: 720px;
  margin-bottom: 12px;
}

.pp-known-head h3 {
  font-size: 16px;
  font-weight: 740;
  letter-spacing: -.015em;
  color: var(--ink);
}

.pp-known-head p {
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

.pp-known .pp-empty {
  margin-bottom: 12px;
}

.pp-fact-source[data-source="guess"] {
  background: #fdf3df;
  color: #8a5a00;
}

/* A row that just changed glows once; a removed one folds away first. */
.pp-facts > li[data-saved] {
  animation: pp-saved 1.6s ease-out;
}

@keyframes pp-saved {
  0% {
    background-color: #e3ebf6;
    box-shadow: inset 3px 0 0 var(--green);
  }
  70% {
    background-color: #eef2f9;
    box-shadow: inset 3px 0 0 var(--green);
  }
  100% {
    background-color: transparent;
    box-shadow: inset 3px 0 0 transparent;
  }
}

.pp-facts > li[data-leaving] {
  overflow: hidden;
  opacity: 0;
  transition: height .2s ease, opacity .18s ease;
}

.pp-fact[open] .pp-fact-body {
  animation: pp-open .18s ease-out;
}

@keyframes pp-open {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.pp-fact-history h5 {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 720;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

.pp-history {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pp-history li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #393d47;
}

.pp-history time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.pp-history span {
  overflow-wrap: anywhere;
}

.pp-fact-input {
  display: block;
  width: 100%;
  max-width: 560px;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

textarea.pp-fact-input {
  resize: vertical;
}

.pp-fact-input:focus {
  border-color: var(--green);
  outline: none;
  box-shadow: 0 0 0 3px #00368722;
}

.pp-fact-form {
  justify-items: stretch;
}

.pp-fact-form .qcard-text-label {
  margin-top: 0;
}

.pp-fact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.pp-fact-actions .pp-remove {
  margin-left: auto;
}

.pp-fact-problem {
  padding: 8px 12px;
  border-radius: 10px;
  background: #fdecea;
  color: #9b2c1f;
  font-size: 13.5px;
  font-weight: 600;
}

.pp-fact-problem[hidden] {
  display: none;
}

form[data-busy] {
  opacity: .7;
  transition: opacity .15s;
}

.pp-add,
.pp-changes {
  margin-top: 12px;
}

.pp-add > summary,
.pp-changes > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px;
  color: var(--deep);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.pp-add > summary::-webkit-details-marker,
.pp-changes > summary::-webkit-details-marker {
  display: none;
}

.pp-add > summary .icon {
  width: 15px;
  height: 15px;
  color: var(--green);
}

.pp-add > summary:focus-visible,
.pp-changes > summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 6px;
}

.pp-add[open] > summary {
  margin-bottom: 8px;
}

.pp-add-form .qcard {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.pp-add[open] .pp-add-form,
.pp-changes[open] .pp-history {
  animation: pp-open .18s ease-out;
}

.pp-changes .pp-history {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--canvas);
}

@media (max-width: 560px) {
  .pp-history li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .pp-fact-actions .pp-remove {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pp-facts > li[data-saved],
  .pp-fact[open] .pp-fact-body,
  .pp-add[open] .pp-add-form,
  .pp-changes[open] .pp-history {
    animation: none;
  }

  .pp-facts > li[data-saved] {
    background-color: #eef2f9;
  }
}

/* A competitor's own site, in a new tab (fix batch H). */
.pp-fact-site {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pp-fact-site .icon {
  width: 12px;
  height: 12px;
}

/* Dev tools pages (/dev/mail). Owner: accounts-billing.
   Rendered by crates/web/src/pages/dev_tools/. Development only. */

.devmail-page {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--canvas);
}

.devmail-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 16px max(24px, calc((100% - 1040px) / 2));
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.devmail-header .wordmark span {
  font-size: 21px;
}

.devmail-header .wordmark img {
  width: 26px;
  height: 26px;
}

.devmail-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff4e5;
  color: #7a4500;
  font-size: 12.5px;
  font-weight: 650;
}

.devmail-badge .icon {
  width: 15px;
  height: 15px;
}

.devmail-main {
  width: min(1040px, calc(100% - 48px));
  margin-inline: auto;
  padding-block: 32px 64px;
}

.devmail-head h1,
.devmail-message h1 {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 760;
  letter-spacing: -.045em;
}

.devmail-head > p {
  max-width: 620px;
  margin-top: 8px;
  font-size: 15px;
  color: var(--muted);
}

.devmail-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-size: 13.5px;
}

.devmail-filter label {
  font-weight: 650;
}

.devmail-filter input {
  width: min(320px, 100%);
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid #d6d9df;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
}

.devmail-filter .button {
  min-height: 42px;
  padding: 9px 16px;
}

.devmail-filter a {
  font-weight: 650;
  color: var(--deep);
}

.devmail-list {
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  margin-top: 24px;
}

.devmail-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  font-size: 14px;
  transition: border-color .2s, box-shadow .2s;
}

.devmail-row:hover {
  border-color: #cccfd6;
  box-shadow: 0 10px 24px -18px #101a2955;
}

.devmail-subject {
  overflow: hidden;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.devmail-to {
  overflow: hidden;
  color: #494d57;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.devmail-template {
  padding: 2px 9px;
  border-radius: 999px;
  background: #e6ecf5;
  color: var(--deep);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
}

.devmail-template[data-stream="broadcast"] {
  background: #ede9fb;
  color: #5b3fa8;
}

.devmail-row time {
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.devmail-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: 28px;
  padding: 40px 24px;
  border: 1px dashed #cfd2d9;
  border-radius: 18px;
  background: #ffffffb3;
  text-align: center;
}

.devmail-empty .icon {
  width: 28px;
  height: 28px;
  color: var(--green);
}

.devmail-empty h2 {
  font-size: 19px;
  font-weight: 720;
  letter-spacing: -.02em;
}

.devmail-empty p {
  max-width: 480px;
  font-size: 14px;
  color: var(--muted);
}

.devmail-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--muted);
}

.devmail-back .icon {
  width: 15px;
  height: 15px;
  transform: rotate(180deg);
}

.devmail-back:hover {
  color: var(--deep);
}

.devmail-message {
  display: grid;
  gap: 18px;
  margin-top: 18px;
  padding: 28px 30px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}

.devmail-message dl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 14px 0 0;
  font-size: 13.5px;
}

.devmail-message dt {
  font-size: 12px;
  color: var(--muted);
}

.devmail-message dd {
  margin: 2px 0 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.devmail-body h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 720;
  letter-spacing: 0;
}

.devmail-body h2 a {
  font-size: 13px;
  font-weight: 600;
  color: var(--deep);
}

.devmail-text {
  margin: 0;
  display: grid;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--canvas);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.devmail-line {
  min-height: 1.65em;
}

.devmail-link {
  color: var(--deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.devmail-frame {
  display: block;
  width: 100%;
  height: 640px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

@media (max-width: 760px) {
  .devmail-main {
    width: calc(100% - 32px);
  }
  .devmail-header {
    padding-inline: 16px;
  }
  .devmail-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
  }
  .devmail-to {
    grid-column: 1;
  }
  .devmail-template {
    grid-row: 1;
    grid-column: 2;
  }
  .devmail-row time {
    grid-column: 2;
  }
  .devmail-message {
    padding: 22px 18px;
  }
}

/* The founder-step card contact sheet (/dev/cards, fix batch 2026-10-21 §16). */
.devcards {
  display: grid;
  gap: 14px;
}

.devcards h1 {
  font-size: 26px;
  letter-spacing: -.02em;
}

.devcards > p {
  max-width: 760px;
  color: var(--muted);
}

.devcards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr));
  align-items: start;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.devcards-label {
  margin: 0 0 6px;
  font-size: 12px;
}

/* Knowledge freshness for Outpost staff (/admin/freshness). Owner: freshness.
   Rendered by crates/web/src/pages/freshness_admin.rs. Every class is prefixed `fresh-`. */

.fresh-page {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--canvas);
}

.fresh-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding: 14px max(16px, calc((100% - 1180px) / 2));
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.fresh-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.fresh-brand .wordmark span {
  font-size: 20px;
}

.fresh-brand .wordmark img {
  width: 26px;
  height: 26px;
}

.fresh-brand > span {
  padding: 3px 9px;
  border-radius: 999px;
  background: #1b1f27;
  color: #fff;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.fresh-top nav a {
  font-size: 14px;
  font-weight: 650;
  color: var(--deep);
}

.fresh-main {
  display: grid;
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 16px 64px;
}

@media (min-width: 640px) {
  .fresh-main {
    padding-inline: 24px;
  }
}

.fresh-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: #7f838c;
}

.fresh-crumbs a {
  font-weight: 650;
  color: var(--deep);
}

.fresh-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.fresh-head > div:first-child {
  flex: 1 1 520px;
  min-width: 0;
}

.fresh-eyebrow {
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7f838c;
}

.fresh-head h1 {
  margin-top: 4px;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.1;
  font-weight: 770;
  letter-spacing: -.045em;
}

.fresh-change-title {
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.3;
  letter-spacing: -.02em;
}

.fresh-head h1.fresh-change-title {
  font-size: clamp(20px, 2.2vw, 26px);
}

.fresh-url-title a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(17px, 2vw, 22px);
  letter-spacing: -.02em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.fresh-url-title .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.fresh-lede {
  margin-top: 8px;
  max-width: 720px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.fresh-mode {
  display: grid;
  gap: 8px;
  max-width: 380px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  font-size: 13.5px;
  line-height: 1.5;
  color: #4b4f59;
}

.fresh-mode .fresh-chip {
  justify-self: start;
}

.fresh-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fresh-button {
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--green);
  color: #fff;
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
}

.fresh-button:hover {
  background: var(--deep);
}

.fresh-button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.fresh-button[data-quiet="true"] {
  min-height: 30px;
  padding: 4px 10px;
  border-color: #d6d8de;
  background: #fff;
  color: var(--ink);
  font-size: 12.5px;
}

.fresh-button[data-quiet="true"]:hover {
  border-color: #9ea2ac;
}

.fresh-flash {
  padding: 12px 16px;
  border: 1px solid #b7c8e1;
  border-radius: 12px;
  background: #e9eff7;
  color: #0b377a;
  font-size: 14px;
}

.fresh-flash[data-mark="bad"] {
  border-color: #f3c3bf;
  background: #fdeeee;
  color: #b42318;
}

.fresh-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 12px;
}

.fresh-tile {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: inherit;
}

a.fresh-tile:hover {
  border-color: #c6c9d0;
}

.fresh-tile strong {
  font-size: 30px;
  font-weight: 770;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.fresh-tile-label {
  font-size: 13px;
  font-weight: 650;
  color: #50545f;
}

.fresh-tile-caption {
  font-size: 12.5px;
  color: var(--muted);
}

.fresh-section {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.fresh-section h2 {
  font-size: 18px;
  letter-spacing: -.02em;
}

.fresh-empty {
  padding: 18px;
  border: 1px dashed #d2d5db;
  border-radius: 14px;
  background: #fff;
  font-size: 14px;
  color: var(--muted);
}

.fresh-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fresh-filters a[aria-current="page"] .fresh-chip {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

.fresh-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: #eff0f3;
  color: #545964;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.fresh-chip[data-mark="good"] {
  background: #e9f7f0;
  color: #0b7a55;
}

.fresh-chip[data-mark="busy"] {
  background: #e8f1fe;
  color: #1d5fb8;
}

.fresh-chip[data-mark="warn"] {
  background: #fff3e2;
  color: #9a5200;
}

.fresh-chip[data-mark="bad"] {
  background: #fdeeee;
  color: #b42318;
}

.fresh-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.fresh-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.fresh-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.fresh-table th {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
  color: #7f838c;
}

.fresh-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #eff0f3;
  vertical-align: top;
  line-height: 1.5;
}

.fresh-table tr:last-child td {
  border-bottom: 0;
}

.fresh-table td a {
  font-weight: 650;
  color: var(--deep);
}

.fresh-table td a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fresh-url {
  max-width: 420px;
  overflow-wrap: anywhere;
}

.fresh-detail {
  display: grid;
  gap: 4px;
  min-width: 220px;
}

.fresh-table td.fresh-detail {
  display: table-cell;
}

.fresh-table td.fresh-detail > * + * {
  margin-top: 4px;
}

.fresh-sub {
  display: block;
  font-size: 12px;
  color: #7f838c;
}

.fresh-chips .fresh-sub {
  display: inline;
}

a.fresh-sub {
  color: var(--deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fresh-when {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.fresh-number {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.fresh-claims,
.fresh-routes,
.fresh-items {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fresh-claims li,
.fresh-routes li,
.fresh-items li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-size: 13.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.fresh-routes li {
  display: grid;
}

.fresh-claims code,
.fresh-routes code,
.fresh-table code {
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.fresh-post {
  display: inline-flex;
}

.fresh-pre {
  max-height: 420px;
  overflow: auto;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.fresh-diff-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 12px;
}

.fresh-diff h3 {
  margin-bottom: 6px;
  font-size: 13px;
  color: #50545f;
}

.fresh-diff ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fresh-diff li {
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.fresh-diff li[data-side="removed"] {
  background: #fdeeee;
  color: #8a1c13;
}

.fresh-diff li[data-side="added"] {
  background: #e9eff7;
  color: #0b2b5c;
}

/* Narrow screens: each table row becomes a card. */
@media (max-width: 760px) {
  .fresh-table-wrap {
    overflow-x: visible;
    border: 0;
    background: transparent;
  }

  .fresh-table,
  .fresh-table tbody,
  .fresh-table tr,
  .fresh-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .fresh-table thead {
    display: none;
  }

  .fresh-table tr {
    margin-bottom: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
  }

  .fresh-table td {
    padding: 3px 0;
    border-bottom: 0;
  }

  .fresh-table td.fresh-detail {
    display: block;
    min-width: 0;
  }

  .fresh-number {
    text-align: left;
  }

  .fresh-number::before {
    content: "Claims: ";
    color: #7f838c;
  }

  .fresh-url {
    max-width: none;
  }

  .fresh-when {
    white-space: normal;
  }
}

/* Industry pages: the hub, segment hubs, playbooks and the 404. Owner: industries.
   Rendered by crates/web/src/pages/industries/ and crates/web/src/industry_finder.rs; every rule is
   scoped under .ind-page (the <main>). Motion is the shared system (data-enter, data-reveal,
   count-ups, draw-ins) plus a few transform/opacity details below, all off under reduced motion. */

.ind-page {
  --ind-seg: var(--green);
  --ind-seg-soft: #e6ecf5;
  --ind-card-shadow: 0 1px 2px #0f1a2a0a, 0 18px 40px -30px #0d1f3b59;
  interpolate-size: allow-keywords;
  background: #fff;
}

.ind-page [hidden] {
  display: none !important;
}

/* Segment colours: one hue per segment, used by chips, icons and the hub headers. */
.ind-page [data-segment="saas"] { --ind-seg: #003380; --ind-seg-soft: #e3eaf4; }
.ind-page [data-segment="apps"] { --ind-seg: #2563c9; --ind-seg-soft: #e7effc; }
.ind-page [data-segment="games"] { --ind-seg: #7a3fd0; --ind-seg-soft: #f0e9fb; }
.ind-page [data-segment="desktop"] { --ind-seg: #454d5f; --ind-seg-soft: #ebecf0; }
.ind-page [data-segment="creators"] { --ind-seg: #c2540a; --ind-seg-soft: #fcefe4; }
.ind-page [data-segment="ecommerce"] { --ind-seg: #c0336b; --ind-seg-soft: #fbe8f0; }
.ind-page [data-segment="local"] { --ind-seg: #a16207; --ind-seg-soft: #fbf1dc; }

.ind-page .ind-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: var(--ind-seg-soft);
  color: var(--ind-seg);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.3;
  white-space: nowrap;
}

.ind-page .ind-chip .icon {
  width: 14px;
  height: 14px;
}

.ind-page .ind-accent {
  display: block;
  color: var(--green);
}

.ind-page .ind-lede {
  max-width: 620px;
  margin-top: 20px;
  color: #545862;
  font-size: 18px;
  line-height: 1.65;
}

/* Breadcrumbs. */
.ind-page .ind-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 13.5px;
}

.ind-page .ind-crumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: #b8bbc2;
}

.ind-page .ind-crumbs a {
  transition: color .2s;
}

.ind-page .ind-crumbs a:hover {
  color: var(--deep);
}

.ind-page .ind-crumbs [aria-current] {
  color: var(--ink);
  font-weight: 650;
}

/* ------------------------------------------------------------------ Hubs */

.ind-page .ind-hub-hero {
  position: relative;
  overflow: clip;
  padding-block: 28px 40px;
  background:
    radial-gradient(ellipse 55% 60% at 88% 10%, #dfe7f2 0, #eff3f8 45%, transparent 75%),
    radial-gradient(ellipse 40% 50% at 5% 100%, #f1f6fb 0, transparent 70%),
    linear-gradient(180deg, #fff, var(--canvas));
  border-bottom: 1px solid #eeeff2;
}

.ind-page .ind-hub-hero[data-segment] {
  background:
    radial-gradient(ellipse 55% 60% at 88% 10%, var(--ind-seg-soft) 0, #f8f8f9 50%, transparent 78%),
    linear-gradient(180deg, #fff, var(--canvas));
}

.ind-page .ind-hub-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  align-items: center;
  gap: 56px;
  margin-top: 36px;
}

.ind-page .ind-hub-copy h1,
.ind-page .ind-missing h1 {
  max-width: 720px;
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 760;
  line-height: 1.04;
  text-wrap: balance;
}

.ind-page .ind-eyebrow-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ind-seg);
}

.ind-page .ind-eyebrow-icon .icon {
  width: 16px;
  height: 16px;
}

.ind-page .ind-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.ind-page .ind-stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 4px;
  padding: 18px 18px 16px;
  border: 1px solid #e5e6e9;
  border-radius: 14px;
  background: #ffffffe0;
  box-shadow: var(--ind-card-shadow);
}

.ind-page .ind-stat dd {
  margin: 0;
  color: var(--ink);
  font-size: 32px;
  font-weight: 760;
  letter-spacing: -.04em;
  line-height: 1;
}

.ind-page .ind-stat dt {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.ind-page .ind-hub-tools {
  display: grid;
  gap: 18px;
  margin-top: 36px;
}

/* The finder. */
.ind-page .ind-finder {
  display: grid;
  gap: 10px;
}

.ind-page .ind-finder-form {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 760px;
  padding: 7px 7px 7px 18px;
  border: 1px solid #dadcdf;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px #0f1a2a0d, 0 20px 40px -32px #0d1f3b80;
  transition: border-color .2s, box-shadow .25s var(--motion-ease-out);
}

.ind-page .ind-finder-form:focus-within {
  border-color: #6c8fc3;
  box-shadow: 0 0 0 4px #00368718, 0 20px 40px -32px #0d1f3b80;
}

.ind-page .ind-finder-icon {
  display: grid;
  color: #6e7176;
}

.ind-page .ind-finder-form input {
  flex: 1;
  min-width: 0;
  height: 46px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
}

.ind-page .ind-finder-form input::placeholder {
  color: #8f939b;
}

.ind-page .ind-finder-form input::-webkit-search-cancel-button {
  cursor: pointer;
}

.ind-page .ind-finder-submit {
  min-height: 46px;
  padding-inline: 20px;
}

.ind-page .ind-finder-status {
  min-height: 1.6em;
  color: var(--muted);
  font-size: 13.5px;
}

.ind-page .ind-finder-empty {
  display: flex;
  gap: 18px;
  max-width: 760px;
  margin-top: 6px;
  padding: 22px;
  border: 1px dashed #cacdd2;
  border-radius: 16px;
  background: #fbfdfc;
}

.ind-page .ind-finder-empty-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #e6ecf5;
  color: var(--deep);
}

.ind-page .ind-finder-empty h2 {
  font-size: 19px;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

.ind-page .ind-finder-empty p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14.5px;
}

.ind-page .ind-finder-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* Segment links. */
.ind-page .ind-segnav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ind-page .ind-segnav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 6px 8px 6px 13px;
  border: 1px solid #e1e2e5;
  border-radius: 999px;
  background: #fff;
  color: #393d47;
  font-size: 13.5px;
  font-weight: 650;
  transition: border-color .2s, color .2s, background-color .2s, transform .25s var(--motion-ease-out);
}

.ind-page .ind-segnav a .icon {
  width: 15px;
  height: 15px;
  color: var(--ind-seg);
}

.ind-page .ind-segnav a:hover {
  border-color: #bec1c9;
  color: var(--ink);
  transform: translate3d(0, -1px, 0);
}

.ind-page .ind-segnav-count {
  min-width: 26px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #f1f2f3;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.ind-page .ind-segnav a[aria-current="page"] {
  border-color: var(--deep);
  background: var(--deep);
  color: #fff;
}

.ind-page .ind-segnav a[aria-current="page"] .icon {
  color: #bfd2ee;
}

.ind-page .ind-segnav a[aria-current="page"] .ind-segnav-count {
  background: #ffffff26;
  color: #fff;
}

/* Groups of cards. */
.ind-page .ind-groups {
  padding-block: 24px 88px;
}

.ind-page .ind-group {
  margin-top: 56px;
}

.ind-page .ind-group-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eeeff2;
}

.ind-page .ind-group-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--ind-seg-soft);
  color: var(--ind-seg);
}

.ind-page .ind-group-head h2 {
  font-size: clamp(22px, 2.2vw, 28px);
}

.ind-page .ind-group-head p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 14.5px;
}

.ind-page .ind-group-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--deep);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
}

.ind-page .ind-group-link .icon {
  width: 16px;
  height: 16px;
  transition: transform .25s var(--motion-ease-out);
}

.ind-page .ind-group-link:hover .icon {
  transform: translate3d(3px, 0, 0);
}

.ind-page .ind-grid,
.ind-page .ind-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
  gap: 16px;
}

/* The playbook card. */
.ind-page .ind-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 18px 18px 16px;
  border: 1px solid #e5e6ea;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px #0f1a2a08;
  transition: border-color .25s, transform .25s var(--motion-ease-out), box-shadow .25s var(--motion-ease-out);
}

.ind-page .ind-card:hover,
.ind-page .ind-card:focus-visible {
  border-color: #b5c2d6;
}

.ind-page .ind-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ind-page .ind-card-arrow {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f3f3f4;
  color: #60646d;
  transition: background-color .25s, color .25s, transform .3s var(--motion-ease-out);
}

.ind-page .ind-card-arrow .icon {
  width: 15px;
  height: 15px;
}

.ind-page .ind-card:hover .ind-card-arrow {
  background: var(--deep);
  color: #fff;
  transform: rotate(-45deg);
}

.ind-page .ind-card-title {
  margin-top: 4px;
  font-size: 17.5px;
  font-weight: 720;
  letter-spacing: -.025em;
  line-height: 1.3;
}

.ind-page .ind-card-headline {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: #61656e;
  font-size: 14px;
  line-height: 1.5;
}

.ind-page .ind-card-keyword {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f6f6f7;
  color: #40444d;
  font-size: 12.5px;
}

.ind-page .ind-card-keyword .icon {
  width: 13px;
  height: 13px;
  color: #6e7176;
}

.ind-page .ind-card-term {
  overflow: hidden;
  flex: 1;
  min-width: 0;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ind-page .ind-card-volume {
  flex: none;
  color: var(--deep);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ind-page .ind-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: #7e828a;
  font-size: 12px;
}

.ind-page .ind-card-meta span {
  white-space: nowrap;
}

/* Segment hub: most recommended destinations. */
.ind-page .ind-top,
.ind-page .ind-others {
  margin-top: 80px;
}

.ind-page .ind-top-head h2,
.ind-page .ind-others h2 {
  font-size: clamp(24px, 2.4vw, 32px);
}

.ind-page .ind-top-head p:not(.eyebrow) {
  max-width: 620px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 15px;
}

.ind-page .ind-top-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: ind-top;
}

.ind-page .ind-top-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  grid-template-areas: "rank name cost" "rank host uses";
  align-items: center;
  gap: 2px 12px;
  padding: 14px 16px;
  border: 1px solid #e8e9ed;
  border-radius: 14px;
  background: #fff;
  counter-increment: ind-top;
}

.ind-page .ind-top-list li::before {
  content: counter(ind-top);
  grid-area: rank;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #f2f3f4;
  color: var(--deep);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.ind-page .ind-top-name {
  grid-area: name;
  overflow: hidden;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ind-page .ind-top-name:hover {
  color: var(--deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ind-page .ind-top-host {
  grid-area: host;
  overflow: hidden;
  color: var(--muted);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ind-page .ind-top-list .ind-cost {
  grid-area: cost;
  justify-self: end;
}

.ind-page .ind-top-uses {
  grid-area: uses;
  justify-self: end;
  color: var(--muted);
  font-size: 12.5px;
  white-space: nowrap;
}

.ind-page .ind-others-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.ind-page .ind-other {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 18px;
  border: 1px solid #e5e6ea;
  border-radius: 16px;
  background: #fff;
}

.ind-page .ind-other .ind-chip {
  align-self: flex-start;
}

.ind-page .ind-other-tagline {
  color: #61656e;
  font-size: 14px;
  line-height: 1.5;
}

.ind-page .ind-other-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  color: var(--deep);
  font-size: 13.5px;
  font-weight: 650;
}

.ind-page .ind-other-count .icon {
  width: 15px;
  height: 15px;
}

/* ------------------------------------------------------------- Cost chips */

.ind-page .ind-cost {
  --ind-cost: #51555f;
  --ind-cost-bg: #eff0f3;
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ind-cost-bg);
  color: var(--ind-cost);
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: .01em;
  white-space: nowrap;
}

.ind-page [data-cost="free"] { --ind-cost: #002b6b; --ind-cost-bg: #dfe7f3; }
.ind-page [data-cost="free-tier"] { --ind-cost: #0b3573; --ind-cost-bg: #dce5f2; }
.ind-page [data-cost="included"] { --ind-cost: #2556a8; --ind-cost-bg: #e5edfb; }
.ind-page [data-cost="revenue-share"] { --ind-cost: #6b3fb5; --ind-cost-bg: #efe8fa; }
.ind-page [data-cost="paid"] { --ind-cost: #9a4b00; --ind-cost-bg: #fdeedb; }

/* ---------------------------------------------------------------- Playbook */

.ind-page .ind-hero {
  position: relative;
  overflow: clip;
  padding-block: 28px 64px;
  background:
    radial-gradient(ellipse 50% 60% at 92% 0%, #dce4f1 0, #eef2f8 45%, transparent 75%),
    linear-gradient(180deg, #fff, var(--canvas));
  border-bottom: 1px solid #eeeff2;
}

.ind-page .ind-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  align-items: start;
  gap: 56px;
  margin-top: 34px;
}

.ind-page .ind-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
}

.ind-page .ind-hero h1 {
  max-width: 760px;
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 760;
  line-height: 1.06;
  text-wrap: balance;
}

.ind-page .ind-hero .ind-lede {
  max-width: 640px;
  text-wrap: pretty;
}

.ind-page .ind-hero-audit {
  max-width: 640px;
  margin-top: 30px;
}

/* The audit form (hero and closing band). */
.ind-page .ind-audit-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 7px 7px 16px;
  border: 1px solid #d6d8dc;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px #0f1a2a0d, 0 24px 48px -34px #0d1f3b99;
  transition: border-color .2s, box-shadow .25s var(--motion-ease-out);
}

.ind-page .ind-audit-field:focus-within {
  border-color: #6c8fc3;
  box-shadow: 0 0 0 4px #00368718, 0 24px 48px -34px #0d1f3b99;
}

.ind-page .ind-audit-icon {
  display: grid;
  color: #63656b;
}

.ind-page .ind-audit-field input:not([type="hidden"]) {
  flex: 1;
  min-width: 0;
  height: 48px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
}

.ind-page .ind-audit-field input::placeholder {
  color: #8f939b;
}

.ind-page .ind-audit-submit {
  flex: none;
  gap: 12px;
  min-height: 48px;
}

.ind-page .ind-audit-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.ind-page .ind-audit-hint .icon {
  width: 15px;
  height: 15px;
  color: var(--green);
}

/* At a glance. */
.ind-page .ind-glance {
  display: grid;
  overflow: hidden;
  border: 1px solid #e3e4e7;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px #0f1a2a0a, 0 34px 70px -40px #0d1f3b66;
}

.ind-page .ind-glance-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px 12px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .02em;
}

.ind-page .ind-glance-title .icon {
  width: 16px;
  height: 16px;
  color: var(--green);
}

.ind-page .ind-glance-keyword,
.ind-page .ind-glance-block,
.ind-page .ind-glance-facts a {
  display: grid;
  gap: 4px;
  padding: 14px 20px;
  border-top: 1px solid #eff0f1;
  transition: background-color .2s;
}

.ind-page .ind-glance-keyword:hover,
.ind-page .ind-glance-block:hover,
.ind-page .ind-glance-facts a:hover {
  background: #f7f8f9;
}

.ind-page .ind-glance-keyword {
  background: linear-gradient(135deg, #f1f5fa, #fff 70%);
}

.ind-page .ind-glance-label {
  color: #7e828a;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ind-page .ind-glance-term {
  color: var(--ink);
  font-size: 18px;
  font-weight: 720;
  letter-spacing: -.02em;
  line-height: 1.3;
}

.ind-page .ind-glance-volume {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.45;
}

.ind-page .ind-glance-volume strong {
  margin-right: 5px;
  color: var(--deep);
  font-size: 22px;
  font-weight: 760;
  letter-spacing: -.03em;
}

.ind-page .ind-glance-quiet {
  font-size: 12.5px;
}

.ind-page .ind-glance-channels {
  display: grid;
  gap: 8px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.ind-page .ind-glance-channels li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #393d47;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
}

.ind-page .ind-glance-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ind-page .ind-glance-facts li + li a {
  border-left: 1px solid #eff0f1;
}

.ind-page .ind-glance-facts a {
  align-content: start;
  height: 100%;
  padding-inline: 16px;
}

.ind-page .ind-glance-facts li:first-child a {
  padding-left: 20px;
}

.ind-page .ind-glance-facts strong {
  margin-top: 2px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 760;
  letter-spacing: -.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.ind-page .ind-glance-facts small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.ind-page .ind-glance-reviewed {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 20px 14px;
  border-top: 1px solid #eff0f1;
  background: #fbfbfb;
  color: var(--muted);
  font-size: 12.5px;
}

.ind-page .ind-glance-reviewed .icon {
  width: 14px;
  height: 14px;
  color: var(--green);
}

/* Priority pips. */
.ind-page .ind-pips {
  display: inline-flex;
  flex: none;
  gap: 3px;
}

.ind-page .ind-pips i {
  width: 12px;
  height: 6px;
  border-radius: 3px;
  background: #e4e5e7;
}

.ind-page .ind-pips i[data-pip="on"] {
  background: linear-gradient(90deg, #0041a2, var(--green));
}

/* Layout: the "On this page" rail beside the article. */
.ind-page .ind-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 64px;
  padding-block: 8px 96px;
}

.ind-page .ind-toc-rail nav {
  position: sticky;
  top: 104px;
  padding-top: 72px;
}

.ind-page .ind-toc-title {
  margin-bottom: 12px;
  color: #7e828a;
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ind-page .ind-toc-rail ol,
.ind-page .ind-toc-menu ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ind-page .ind-toc-rail ol {
  border-left: 1px solid #e5e6ea;
}

.ind-page .ind-toc-rail a {
  display: block;
  margin-left: -1px;
  padding: 7px 0 7px 14px;
  border-left: 2px solid transparent;
  color: #61656e;
  font-size: 13.5px;
  line-height: 1.4;
  transition: color .2s, border-color .2s;
}

.ind-page .ind-toc-rail a:hover {
  border-left-color: var(--green);
  color: var(--ink);
}

.ind-page .ind-toc-menu {
  display: none;
}

.ind-page .ind-article {
  min-width: 0;
  max-width: 880px;
}

/* Sections. */
.ind-page .ind-section {
  padding-top: 72px;
  scroll-margin-top: 84px;
}

.ind-page .ind-section-head {
  margin-bottom: 26px;
}

.ind-page .ind-section-head .eyebrow {
  color: var(--green);
}

.ind-page h2 {
  text-wrap: balance;
}

.ind-page .ind-section-head h2 {
  font-size: clamp(26px, 2.6vw, 34px);
}

.ind-page .ind-section-note {
  max-width: 640px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 14.5px;
}

.ind-page .ind-section h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* 2 · Discovery. */
.ind-page .ind-discovery-lead {
  color: #30343e;
  font-size: 19px;
  line-height: 1.7;
  text-wrap: pretty;
}

.ind-page .ind-discovery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.ind-page .ind-panel {
  padding: 22px;
  border: 1px solid #e8e9ed;
  border-radius: 16px;
  background: var(--canvas);
}

.ind-page .ind-panel h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.ind-page .ind-panel h3 .icon {
  width: 18px;
  height: 18px;
  color: var(--green);
}

.ind-page .ind-panel p {
  color: #545862;
  font-size: 15px;
}

.ind-page .ind-checks {
  display: grid;
  gap: 10px;
}

.ind-page .ind-checks li {
  display: flex;
  gap: 10px;
  color: #434750;
  font-size: 14.5px;
  line-height: 1.5;
}

.ind-page .ind-checks .icon {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--green);
}

.ind-page .ind-season {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  padding: 20px 22px;
  border: 1px solid #d8e0eb;
  border-radius: 16px;
  background: linear-gradient(120deg, #eff3f9, #fff 75%);
}

.ind-page .ind-season-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 16px -10px #0a2b5c66;
  color: var(--deep);
}

.ind-page .ind-season p {
  margin-top: 6px;
  color: #545862;
  font-size: 15px;
}

/* 3 · Channels. */
.ind-page .ind-channels {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ind-page .ind-channel {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 20px 18px 16px;
  border: 1px solid #e8e9ed;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px #0f1a2a06;
}

.ind-page .ind-channel:first-child {
  border-color: #c6d2e5;
  background: linear-gradient(120deg, #f2f5fa, #fff 60%);
}

.ind-page .ind-channel-rank {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #f2f3f4;
  color: var(--deep);
  font-size: 19px;
  font-weight: 780;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.ind-page .ind-channel:first-child .ind-channel-rank {
  background: var(--deep);
  color: #fff;
}

.ind-page .ind-channel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
}

.ind-page .ind-channel-priority {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 650;
}

.ind-page .ind-channel p {
  margin-top: 6px;
  color: #545862;
  font-size: 15px;
}

/* 4 · The 30-day timeline. */
.ind-page .ind-timeline {
  position: relative;
}

.ind-page .ind-timeline-line {
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 23px;
  width: 2px;
  height: calc(100% - 48px);
  overflow: visible;
}

.ind-page .ind-timeline-line line {
  stroke: #9fb5d6;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.ind-page .ind-weeks {
  position: relative;
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ind-page .ind-week {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 20px;
}

.ind-page .ind-week-marker {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--green);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 6px #fff;
  color: var(--deep);
  font-size: 14px;
  font-weight: 780;
}

.ind-page .ind-week:last-child .ind-week-marker {
  border-color: var(--deep);
  background: var(--deep);
  color: #fff;
}

.ind-page .ind-week-card {
  padding: 18px 20px 20px;
  border: 1px solid #e8e9ed;
  border-radius: 16px;
  background: #fff;
}

.ind-page .ind-week-days {
  margin-bottom: 4px;
  color: var(--green);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ind-page .ind-week-actions {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.ind-page .ind-week-actions li {
  display: flex;
  gap: 10px;
  color: #434750;
  font-size: 14.5px;
  line-height: 1.5;
}

.ind-page .ind-week-actions .icon {
  width: 15px;
  height: 15px;
  margin-top: 3px;
  color: var(--green);
}

/* 5 · Directories. */
.ind-page .ind-tally {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.ind-page .ind-tally li {
  padding: 7px 13px;
  border: 1px solid #e5e6ea;
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 13.5px;
}

.ind-page .ind-tally strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.ind-page .ind-tally li[data-cost="free"] strong {
  color: var(--deep);
}

.ind-page .ind-directories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ind-page .ind-directory {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid #e8e9ed;
  border-radius: 16px;
  background: #fff;
  transition: border-color .25s;
}

.ind-page .ind-directory:hover {
  border-color: #ced1d7;
}

.ind-page .ind-directory-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ind-page .ind-directory-name {
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.35;
}

.ind-page .ind-directory-name:hover {
  color: var(--deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ind-page .ind-directory-host {
  color: #7e828a;
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.ind-page .ind-directory-why {
  margin-top: 4px;
  color: #545862;
  font-size: 14.5px;
  line-height: 1.55;
}

.ind-page .ind-directory-cost {
  padding: 8px 10px;
  border-radius: 9px;
  background: #f7f7f8;
  color: #5b5f68;
  font-size: 12.5px;
  line-height: 1.45;
}

.ind-page .ind-directory-registry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed #e3e4e6;
  font-size: 12.5px;
}

.ind-page .ind-registry-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--deep);
  font-weight: 700;
}

.ind-page .ind-registry-badge .icon {
  width: 14px;
  height: 14px;
}

.ind-page .ind-registry-method {
  color: var(--muted);
}

.ind-page .ind-registry-method[data-method="founder"] {
  color: #9a4b00;
}

.ind-page .ind-directory-submit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  color: var(--deep);
  font-weight: 650;
}

.ind-page .ind-directory-submit .icon {
  width: 13px;
  height: 13px;
  transform: rotate(-45deg);
}

.ind-page .ind-directory-submit:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 6 · Keywords. */
.ind-page .ind-demand {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  overflow: hidden;
  margin-bottom: 18px;
  border: 1px solid #0b2b5b;
  border-radius: 20px;
  background: #fff;
}

.ind-page .ind-demand-primary {
  position: relative;
  padding: 24px 26px;
  background:
    radial-gradient(ellipse 80% 90% at 100% 0%, #12428b 0, transparent 70%),
    linear-gradient(140deg, #06234f, #002863);
  color: #fff;
}

.ind-page .ind-demand-label {
  color: #a9c0e3;
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ind-page .ind-demand-term {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 8px;
  font-size: 22px;
  font-weight: 740;
  letter-spacing: -.025em;
  line-height: 1.3;
}

.ind-page .ind-demand-term .icon {
  margin-top: 4px;
  color: #a9c0e3;
}

.ind-page .ind-demand-volume {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-top: 14px;
  color: #d5e0f1;
  font-size: 14px;
}

.ind-page .ind-demand-volume strong {
  color: #fff;
  font-size: 44px;
  font-weight: 780;
  letter-spacing: -.045em;
  line-height: 1;
}

.ind-page .ind-demand-quiet {
  max-width: 340px;
  font-size: 14.5px;
  line-height: 1.5;
}

.ind-page .ind-demand-source {
  margin-top: 12px;
  color: #9fb3d2;
  font-size: 12px;
  line-height: 1.5;
}

.ind-page .ind-demand-secondary {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 8px;
  padding: 22px 24px;
}

.ind-page .ind-demand-secondary li {
  padding: 7px 12px;
  border: 1px solid #e1e3e6;
  border-radius: 999px;
  background: #f8f8f9;
  color: #393d47;
  font-size: 13.5px;
  font-weight: 600;
}

.ind-page .ind-themes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ind-page .ind-theme {
  padding: 18px 20px 20px;
  border: 1px solid #e8e9ed;
  border-radius: 16px;
  background: #fff;
}

.ind-page .ind-theme-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ind-page .ind-intent {
  --ind-intent: #51555f;
  --ind-intent-bg: #eff0f3;
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ind-intent-bg);
  color: var(--ind-intent);
  font-size: 11.5px;
  font-weight: 750;
}

.ind-page [data-intent="informational"] { --ind-intent: #2556a8; --ind-intent-bg: #e5edfb; }
.ind-page [data-intent="commercial"] { --ind-intent: #6b3fb5; --ind-intent-bg: #efe8fa; }
.ind-page [data-intent="transactional"] { --ind-intent: #002b6b; --ind-intent-bg: #dfe7f3; }
.ind-page [data-intent="navigational"] { --ind-intent: #9a4b00; --ind-intent-bg: #fdeedb; }

.ind-page .ind-theme-meaning {
  margin-top: 4px;
  color: #7e828a;
  font-size: 12.5px;
}

.ind-page .ind-queries {
  display: grid;
  gap: 6px;
  margin-top: 14px;
}

.ind-page .ind-queries li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border-radius: 9px;
  background: #f6f6f7;
  color: #393d47;
  font-size: 13.5px;
  line-height: 1.4;
}

.ind-page .ind-queries .icon {
  width: 13px;
  height: 13px;
  color: #7e8186;
}

/* 7 · Mistakes. */
.ind-page .ind-mistakes {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ind-page .ind-mistake {
  display: flex;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid #f0e3dd;
  border-radius: 16px;
  background: linear-gradient(120deg, #fffaf8, #fff 70%);
}

.ind-page .ind-mistake-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fdebe5;
  color: #b4441f;
}

.ind-page .ind-mistake-icon .icon {
  width: 17px;
  height: 17px;
}

.ind-page .ind-mistake p {
  margin-top: 4px;
  color: #545862;
  font-size: 15px;
}

/* 8 · How Outpost helps. */
.ind-page .ind-helps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ind-page .ind-help {
  display: flex;
  gap: 14px;
  padding: 18px;
  border: 1px solid #dce2eb;
  border-radius: 16px;
  background: #f8f9fa;
}

.ind-page .ind-help-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
}

.ind-page .ind-help-icon .icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.4;
}

.ind-page .ind-help p {
  color: #393d47;
  font-size: 14.5px;
  line-height: 1.55;
}

.ind-page .ind-receipt-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 16px;
  padding: 14px 18px;
  border: 1px solid #e5e6ea;
  border-radius: 14px;
  background: #fff;
  color: #545862;
  font-size: 14px;
}

.ind-page .ind-receipt-note > span {
  flex: 1 1 320px;
}

.ind-page .ind-receipt-note > .icon {
  color: var(--green);
}

.ind-page .ind-receipt-note a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--deep);
  font-weight: 650;
  white-space: nowrap;
}

.ind-page .ind-receipt-note a .icon {
  width: 15px;
  height: 15px;
}

/* 9 · FAQ. */
.ind-page .ind-faqs {
  display: grid;
  gap: 10px;
}

.ind-page .ind-faq {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  transition: border-color .25s var(--motion-ease-out), box-shadow .3s var(--motion-ease-out), background-color .25s;
}

.ind-page .ind-faq:hover {
  border-color: #d0d2d5;
}

.ind-page .ind-faq[open] {
  border-color: #a9bcd9;
  background: linear-gradient(180deg, #f7f7f9, #fff 70%);
  box-shadow: 0 14px 30px -22px #0a2b5c66;
}

.ind-page .ind-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  border-radius: inherit;
  color: #30343e;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.45;
  list-style: none;
}

.ind-page .ind-faq summary::-webkit-details-marker {
  display: none;
}

.ind-page .ind-faq summary .icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: #6e7176;
  transform: rotate(90deg);
  transition: transform .3s var(--motion-ease-out);
}

.ind-page .ind-faq[open] summary .icon {
  transform: rotate(-90deg);
  color: var(--deep);
}

.ind-page .ind-faq p {
  padding: 0 20px 18px;
  color: #545862;
  font-size: 15px;
}

/* 10 · Related. */
.ind-page .ind-related-more {
  margin: 30px 0 14px;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: .02em;
}

.ind-page .ind-related-compact .ind-card-headline {
  -webkit-line-clamp: 2;
}

.ind-page .ind-related-hubs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 22px;
}

.ind-page .ind-related-hubs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--deep);
  font-size: 14.5px;
  font-weight: 650;
}

.ind-page .ind-related-hubs .icon {
  width: 16px;
  height: 16px;
  transition: transform .25s var(--motion-ease-out);
}

.ind-page .ind-related-hubs a:hover .icon {
  transform: translate3d(3px, 0, 0);
}

/* 11 · Sources. */
.ind-page .ind-sources {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #e8e9ed;
  border-radius: 16px;
  background: #fff;
  counter-reset: ind-source;
}

.ind-page .ind-source {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 16px;
  padding: 14px 20px 14px 58px;
  counter-increment: ind-source;
}

.ind-page .ind-source + .ind-source {
  border-top: 1px solid #eff0f1;
}

.ind-page .ind-source::before {
  content: counter(ind-source);
  position: absolute;
  top: 14px;
  left: 18px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #f2f3f4;
  color: var(--deep);
  font-size: 12.5px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.ind-page .ind-source a {
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.45;
  text-decoration: underline;
  text-decoration-color: #cacdd2;
  text-underline-offset: 3px;
  transition: text-decoration-color .2s, color .2s;
}

.ind-page .ind-source a:hover {
  color: var(--deep);
  text-decoration-color: currentColor;
}

.ind-page .ind-source-host {
  color: #7e828a;
  font-size: 12.5px;
  line-height: 1.9;
  white-space: nowrap;
}

.ind-page .ind-source p {
  grid-column: 1 / -1;
  color: #61656e;
  font-size: 13.5px;
  line-height: 1.55;
}

.ind-page .ind-reviewed {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.ind-page .ind-reviewed .icon {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--green);
}

/* 12 · The closing band. */
.ind-page .ind-cta {
  position: relative;
  overflow: clip;
  padding-block: 72px;
  background:
    radial-gradient(ellipse 50% 80% at 85% 20%, #104390 0, transparent 70%),
    radial-gradient(ellipse 40% 60% at 0% 100%, #0b316a 0, transparent 70%),
    linear-gradient(135deg, #051c3f, #002863);
  color: #fff;
}

.ind-page .ind-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  align-items: center;
  gap: 56px;
}

.ind-page .ind-cta .eyebrow {
  color: #a9c0e3;
}

.ind-page .ind-cta h2 {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.1;
}

.ind-page .ind-cta-copy > p:not(.eyebrow) {
  max-width: 560px;
  margin-top: 14px;
  color: #d5e0f1;
  font-size: 16.5px;
}

.ind-page .ind-cta-pricing {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  color: #fff;
  font-size: 14.5px;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: #ffffff59;
  text-underline-offset: 4px;
}

.ind-page .ind-cta-pricing .icon {
  width: 16px;
  height: 16px;
}

.ind-page .ind-cta .ind-audit-field {
  border-color: transparent;
  box-shadow: 0 30px 60px -30px #06080e;
}

.ind-page .ind-cta .ind-audit-hint {
  color: #c4d3e9;
}

.ind-page .ind-cta .ind-audit-hint .icon {
  color: #a9c0e3;
}

/* 404. */
.ind-page .ind-missing {
  padding-bottom: 96px;
}

.ind-page .ind-missing-body {
  max-width: 760px;
  margin-top: 48px;
}

.ind-page .ind-missing-tools,
.ind-page .ind-missing-audit {
  margin-top: 28px;
}

.ind-page .ind-missing-segments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.ind-page .ind-missing-segments .ind-chip {
  padding: 7px 13px 7px 11px;
  font-size: 13px;
  transition: transform .25s var(--motion-ease-out);
}

.ind-page .ind-missing-segments a:hover .ind-chip {
  transform: translate3d(0, -2px, 0);
}

/* --------------------------------------------------------------- Motion */

@media (prefers-reduced-motion: no-preference) {
  /* Pips fill in turn when their channel is revealed. */
  .ind-page [data-reveal-state="visible"] .ind-pips i[data-pip="on"] {
    animation: ind-pip .45s var(--motion-ease-out) backwards;
    animation-delay: calc(.25s + var(--ind-pip, 0) * 70ms);
  }
  .ind-page .ind-pips i:nth-child(2) { --ind-pip: 1; }
  .ind-page .ind-pips i:nth-child(3) { --ind-pip: 2; }
  .ind-page .ind-pips i:nth-child(4) { --ind-pip: 3; }
  .ind-page .ind-pips i:nth-child(5) { --ind-pip: 4; }

  /* The glance card's pips run with its entrance. */
  .ind-page .ind-glance .ind-pips i[data-pip="on"] {
    animation: ind-pip .45s var(--motion-ease-out) backwards;
    animation-delay: calc(.6s + var(--ind-pip, 0) * 70ms);
  }

  /* Week markers pop as the timeline draws. */
  .ind-page .ind-timeline[data-reveal-state="visible"] .ind-week-marker {
    animation: ind-marker .5s var(--motion-ease-out) backwards;
  }
  .ind-page .ind-timeline[data-reveal-state="visible"] .ind-week:nth-child(2) .ind-week-marker { animation-delay: .35s; }
  .ind-page .ind-timeline[data-reveal-state="visible"] .ind-week:nth-child(3) .ind-week-marker { animation-delay: .7s; }
  .ind-page .ind-timeline[data-reveal-state="visible"] .ind-week:nth-child(4) .ind-week-marker { animation-delay: 1.05s; }

  /* Cards the finder brings back replay a short entrance (two identical keyframes, so
     flipping the attribute restarts it). */
  .ind-page [data-finder-pop="a"] {
    animation: ind-pop-a .4s var(--motion-ease-out) backwards;
  }
  .ind-page [data-finder-pop="b"] {
    animation: ind-pop-b .4s var(--motion-ease-out) backwards;
  }

  /* The current segment's chip breathes once on arrival. */
  .ind-page .ind-segnav a[aria-current="page"] {
    animation: ind-pop-a .6s var(--motion-ease-out) .3s backwards;
  }
}

@keyframes ind-pip {
  from {
    opacity: 0;
    transform: scaleX(.2);
  }
}

@keyframes ind-marker {
  from {
    opacity: 0;
    transform: scale(.6);
  }
}

@keyframes ind-pop-a {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(.97);
  }
}

@keyframes ind-pop-b {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(.97);
  }
}

/* ----------------------------------------------------------- Responsive */

@media (max-width: 1100px) {
  .ind-page .ind-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .ind-page .ind-toc-rail {
    display: none;
  }
  .ind-page .ind-toc-menu {
    display: block;
    margin-top: 28px;
    border: 1px solid #e5e6ea;
    border-radius: 14px;
    background: #fff;
  }
  .ind-page .ind-toc-menu summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 650;
    list-style: none;
  }
  .ind-page .ind-toc-menu summary::-webkit-details-marker {
    display: none;
  }
  .ind-page .ind-toc-menu summary .icon {
    width: 17px;
    height: 17px;
    color: var(--green);
  }
  .ind-page .ind-toc-menu summary .icon:last-child {
    margin-left: auto;
    color: #6e7176;
    transform: rotate(90deg);
    transition: transform .3s var(--motion-ease-out);
  }
  .ind-page .ind-toc-menu[open] summary .icon:last-child {
    transform: rotate(-90deg);
  }
  .ind-page .ind-toc-menu ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 16px;
    padding: 0 16px 14px;
  }
  .ind-page .ind-toc-menu a {
    display: block;
    padding: 8px 0;
    color: #545862;
    font-size: 14px;
  }
  .ind-page .ind-section {
    padding-top: 60px;
  }
  .ind-page .ind-hub-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    gap: 40px;
  }
}

@media (max-width: 960px) {
  .ind-page .ind-hub-head,
  .ind-page .ind-hero-grid,
  .ind-page .ind-cta-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .ind-page .ind-hub-head {
    align-items: start;
  }
  .ind-page .ind-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ind-page .ind-glance {
    max-width: 560px;
  }
  .ind-page .ind-top-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .ind-page .ind-discovery-grid,
  .ind-page .ind-directories,
  .ind-page .ind-themes,
  .ind-page .ind-helps,
  .ind-page .ind-demand {
    grid-template-columns: minmax(0, 1fr);
  }
  .ind-page .ind-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ind-page .ind-group-head {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .ind-page .ind-group-link {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .ind-page .ind-hub-hero,
  .ind-page .ind-hero {
    padding-block: 20px 36px;
  }
  .ind-page .ind-hub-head,
  .ind-page .ind-hero-grid {
    margin-top: 24px;
  }
  .ind-page .ind-lede {
    margin-top: 16px;
    font-size: 16.5px;
  }
  .ind-page .ind-discovery-lead {
    font-size: 17px;
  }
  .ind-page .ind-stat {
    padding: 14px;
  }
  .ind-page .ind-stat dd {
    font-size: 26px;
  }
  .ind-page .ind-groups {
    padding-bottom: 64px;
  }
  .ind-page .ind-group {
    margin-top: 44px;
  }
  .ind-page .ind-grid,
  .ind-page .ind-related-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .ind-page .ind-section {
    padding-top: 52px;
  }
  .ind-page .ind-toc-menu ol {
    grid-template-columns: minmax(0, 1fr);
  }
  .ind-page .ind-channel {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }
  .ind-page .ind-channel-rank {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    font-size: 16px;
  }
  .ind-page .ind-week {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
  }
  .ind-page .ind-week-marker {
    width: 40px;
    height: 40px;
    font-size: 13px;
  }
  .ind-page .ind-timeline-line {
    top: 20px;
    left: 19px;
    height: calc(100% - 40px);
  }
  .ind-page .ind-week-card {
    padding: 16px;
  }
  .ind-page .ind-demand-primary,
  .ind-page .ind-demand-secondary {
    padding: 20px;
  }
  .ind-page .ind-demand-volume strong {
    font-size: 36px;
  }
  .ind-page .ind-source {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px 16px 14px 52px;
  }
  .ind-page .ind-source::before {
    left: 14px;
  }
  .ind-page .ind-source-host {
    line-height: 1.5;
  }
  .ind-page .ind-cta {
    padding-block: 52px;
  }
  .ind-page .ind-glance-facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .ind-page .ind-glance-facts li + li a {
    border-left: 0;
  }
  .ind-page .ind-glance-facts a,
  .ind-page .ind-glance-facts li:first-child a {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label value" "caption value";
    align-items: center;
    gap: 2px 12px;
    padding: 12px 20px;
  }
  .ind-page .ind-glance-facts .ind-glance-label {
    grid-area: label;
  }
  .ind-page .ind-glance-facts strong {
    grid-area: value;
    margin: 0;
  }
  .ind-page .ind-glance-facts small {
    grid-area: caption;
  }
}

/* The forms stack their button under the field when a row cannot hold both. */
@media (max-width: 560px) {
  .ind-page .ind-audit-field {
    flex-wrap: wrap;
    padding: 6px;
  }
  .ind-page .ind-audit-icon {
    margin-left: 8px;
  }
  .ind-page .ind-audit-field input:not([type="hidden"]) {
    flex: 1 1 calc(100% - 40px);
  }
  .ind-page .ind-audit-submit {
    flex: 1 1 100%;
  }
  .ind-page .ind-finder-submit {
    padding-inline: 14px;
  }
  .ind-page .ind-finder-empty {
    flex-direction: column;
    gap: 12px;
    padding: 18px;
  }
  .ind-page .ind-top-list li {
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-areas: "rank name" "rank host" "rank cost" "rank uses";
  }
  .ind-page .ind-top-list li::before {
    width: 30px;
    height: 30px;
  }
  .ind-page .ind-top-list .ind-cost,
  .ind-page .ind-top-uses {
    justify-self: start;
  }
}

@media (max-width: 380px) {
  .ind-page .ind-finder-form {
    padding-left: 12px;
  }
  .ind-page .ind-finder-icon {
    display: none;
  }
  .ind-page .ind-segnav a {
    padding-left: 11px;
    font-size: 13px;
  }
  .ind-page .ind-directory,
  .ind-page .ind-theme,
  .ind-page .ind-mistake,
  .ind-page .ind-help,
  .ind-page .ind-panel {
    padding: 16px;
  }
  .ind-page .ind-mistake {
    gap: 12px;
  }
  .ind-page .ind-directory-head {
    flex-direction: column;
    gap: 6px;
  }
}

/* Live sections (wave 3, W2-e): business model, upcoming deadlines and the second PC
   store, read from the knowledge base at request time (playbook/live.rs). */
.ind-page .ind-live-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ind-page .ind-live-random,
.ind-page .ind-live-tech {
  margin-top: 16px;
}

.ind-page .ind-live-list {
  display: grid;
  gap: 14px;
}

.ind-page .ind-live-item {
  display: grid;
  gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px dashed #e1e3e8;
}

.ind-page .ind-live-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.ind-page .ind-live-item p {
  color: #434750;
  font-size: 14.5px;
  line-height: 1.55;
}

.ind-page .ind-live-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ind-page .ind-live-rating,
.ind-page .ind-live-channel,
.ind-page .ind-live-flag,
.ind-page .ind-live-expected {
  padding: 2px 8px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #e3e4e6;
  color: #5b5f68;
  font-size: 12px;
  font-weight: 700;
}

.ind-page .ind-live-rating[data-rating="strong"] {
  border-color: #b8dccd;
  background: #eef8f3;
  color: var(--success-ink);
}

.ind-page .ind-live-rating[data-rating="poor"],
.ind-page .ind-live-rating[data-rating="blocked"] {
  border-color: #f2cfb4;
  background: #fff4ea;
  color: #9a4b00;
}

.ind-page .ind-live-expected {
  border-color: #f2d7a6;
  background: #fff6e6;
  color: #8a5200;
}

.ind-page .ind-live-sources {
  display: grid;
  gap: 3px;
}

.ind-page .ind-live-sources li {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  font-size: 12.5px;
}

.ind-page .ind-live-sources a {
  color: var(--success-ink);
  font-weight: 650;
  overflow-wrap: anywhere;
}

.ind-page .ind-live-sources a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ind-page .ind-live-sources small {
  color: #7e828a;
}

.ind-page .ind-live-checked {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: #6f737c;
  font-size: 13px;
}

.ind-page .ind-live-checked .icon {
  width: 14px;
  height: 14px;
  color: var(--success);
}

.ind-page .ind-live-deadlines {
  display: grid;
  gap: 10px;
}

.ind-page .ind-live-deadline {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px 16px;
  padding: 14px 18px;
  border: 1px solid #e8e9ed;
  border-radius: 14px;
  background: #fff;
}

.ind-page .ind-live-deadline time {
  color: var(--ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ind-page .ind-live-deadline > div {
  display: grid;
  gap: 2px;
}

.ind-page .ind-live-deadline strong {
  color: var(--ink);
}

.ind-page .ind-live-deadline span,
.ind-page .ind-live-deadline small {
  color: #5b5f68;
  font-size: 14px;
}

.ind-page .ind-live-deadline .ind-live-sources,
.ind-page .ind-live-deadline .ind-live-official {
  grid-column: 2 / -1;
}

.ind-page .ind-live-official {
  color: var(--success-ink);
  font-size: 13px;
  font-weight: 650;
}

.ind-page .ind-live-epic {
  padding: 22px;
  border: 1px solid #e8e9ed;
  border-radius: 16px;
  background: var(--canvas);
}

.ind-page .ind-live-faq-link {
  margin-top: 14px;
}

.ind-page .ind-live-faq-link a {
  color: var(--success-ink);
  font-weight: 700;
}

.ind-page .ind-faq-live .ind-live-sources {
  padding: 0 22px 18px;
}

@media (max-width: 760px) {
  .ind-page .ind-live-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ind-page .ind-live-deadline {
    grid-template-columns: minmax(0, 1fr);
  }

  .ind-page .ind-live-deadline .ind-live-sources,
  .ind-page .ind-live-deadline .ind-live-official {
    grid-column: auto;
  }
}

/* Hosted blog. Owner: publishing.
   The blog itself is served on customers' domains with its own stylesheet,
   public/blog/blog.css (a few kilobytes, themed per blog), not this bundle. This file stays
   reserved for in-app previews of the blog; scope selectors by the page's root class. */

/* Outpost staff pages (/admin/*): the knowledge review console.
   Rendered by crates/web/src/pages/admin/. Owner: compendium.
   Every rule is scoped under .admin-page; classes are prefixed kn-. */

.admin-page {
  --kn-ink: var(--ink);
  --kn-muted: var(--muted);
  --kn-line: var(--line);
  --kn-soft: #f4f5f7;
  --kn-high: #b4232f;
  --kn-high-bg: #fdecee;
  --kn-medium: #a35a00;
  --kn-medium-bg: #fff4e2;
  --kn-low: #2f496f;
  --kn-low-bg: #e8edf5;
  --kn-add: #0d336b;
  --kn-add-bg: #dce5f3;
  --kn-del: #a1202c;
  --kn-del-bg: #fbe3e5;
  --kn-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--canvas);
  color: var(--kn-ink);
}

.admin-page [hidden] {
  display: none !important;
}

.admin-page .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Header and tabs */

.admin-page .kn-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #ffffffef;
  border-bottom: 1px solid var(--kn-line);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
}

.admin-page .kn-header-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1240px;
  min-height: 62px;
  margin: 0 auto;
  padding: 0 28px;
}

.admin-page .kn-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.admin-page .kn-brand-name {
  font-size: 21px;
  font-weight: 780;
  letter-spacing: -.035em;
}

.admin-page .kn-brand-area {
  padding-left: 11px;
  border-left: 1px solid var(--kn-line);
  color: var(--kn-muted);
  font-size: 15px;
  font-weight: 600;
}

.admin-page .kn-staff {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #1a202d;
  color: #e9edf3;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .02em;
  white-space: nowrap;
}

.admin-page .kn-staff .icon {
  width: 13px;
  height: 13px;
}

.admin-page .kn-account {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-left: auto;
}

.admin-page .kn-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(140deg, #0b316b, #144fa8);
  color: #fff;
  font-size: 13px;
  font-weight: 750;
}

.admin-page .kn-email {
  overflow: hidden;
  max-width: 260px;
  color: #414650;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-page .kn-signout button {
  padding: 6px 12px;
  border: 1px solid var(--kn-line);
  border-radius: 9px;
  background: #fff;
  color: #31353f;
  font-size: 13px;
  font-weight: 600;
}

.admin-page .kn-signout button:hover {
  border-color: #c6c9d0;
}

.admin-page .kn-tabs {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

.admin-page .kn-tabs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-page .kn-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 10px 12px;
  border-bottom: 2px solid transparent;
  color: var(--kn-muted);
  font-size: 14px;
  font-weight: 620;
  white-space: nowrap;
  transition: color .2s, border-color .2s;
}

.admin-page .kn-tabs a:hover {
  color: var(--kn-ink);
}

.admin-page .kn-tabs a[aria-current="page"] {
  border-bottom-color: var(--green);
  color: var(--kn-ink);
}

.admin-page .kn-tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.admin-page .kn-tab-count[data-zero] {
  background: var(--kn-soft);
  color: var(--kn-muted);
}

.admin-page .kn-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Research text carries long URLs and ids: never let one widen the page. */
  overflow-wrap: anywhere;
  gap: 26px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 30px 28px 80px;
}

.admin-page .kn-flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid #bfcde2;
  border-radius: 12px;
  background: #ecf1f8;
  color: #0b264f;
  font-size: 14px;
  line-height: 1.45;
}

.admin-page .kn-flash .icon {
  margin-top: 2px;
}

.admin-page .kn-flash[data-tone="attention"] {
  border-color: #f2d29a;
  background: #fff7e8;
  color: #6c4300;
}

.admin-page .kn-flash[data-tone="negative"] {
  border-color: #f0c2c6;
  background: #fdeff0;
  color: #7c1720;
}

.admin-page .kn-flash[data-tone="neutral"] {
  border-color: var(--kn-line);
  background: #fff;
  color: #393d47;
}

/* Page intro */

.admin-page .kn-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.admin-page .kn-intro > div {
  max-width: 780px;
}

.admin-page .kn-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--green);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.admin-page .kn-intro h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 780;
  letter-spacing: -.035em;
  line-height: 1.08;
}

.admin-page .kn-claim-title {
  font-family: var(--kn-mono);
  font-size: clamp(20px, 3vw, 28px) !important;
  letter-spacing: -.02em !important;
  overflow-wrap: anywhere;
}

.admin-page .kn-lede {
  margin: 12px 0 0;
  color: #50545f;
  font-size: 16px;
  line-height: 1.6;
}

.admin-page .kn-back {
  margin: 0 0 -10px;
}

.admin-page .kn-back a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--kn-muted);
  font-size: 14px;
  font-weight: 600;
}

.admin-page .kn-back a:hover {
  color: var(--kn-ink);
}

.admin-page .kn-back .icon {
  transform: rotate(180deg);
}

/* Summary tiles */

.admin-page .kn-tiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.admin-page .kn-tile {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--kn-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px #0f1f2a0a;
  transition: border-color .2s, box-shadow .2s, transform .2s var(--motion-ease-out);
}

.admin-page .kn-tile:hover {
  border-color: #cccfd6;
  box-shadow: 0 12px 28px -16px #101a2940;
  transform: translateY(-1px);
}

.admin-page .kn-tile:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.admin-page .kn-tile-label {
  color: var(--kn-muted);
  font-size: 13px;
  font-weight: 620;
}

.admin-page .kn-tile strong {
  font-size: 34px;
  font-weight: 780;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.admin-page .kn-tile-note {
  color: var(--kn-muted);
  font-size: 12.5px;
  line-height: 1.4;
}

.admin-page .kn-tile[data-tile="reviews"] {
  border-color: #b9c7dc;
  background: linear-gradient(160deg, #f1f5fb, #fff 60%);
}

.admin-page .kn-tile[data-tile="reviews"] strong {
  color: var(--deep);
}

.admin-page .kn-kinds {
  display: grid;
  gap: 12px;
  margin-top: -10px;
}

.admin-page .kn-kinds ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-page .kn-kinds a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--kn-line);
  border-radius: 999px;
  background: #fff;
  color: #393d47;
  font-size: 13px;
  font-weight: 600;
}

.admin-page .kn-kinds a:hover {
  border-color: #bcc0c8;
}

.admin-page .kn-kinds strong {
  color: var(--kn-ink);
  font-variant-numeric: tabular-nums;
}

.admin-page .kn-import-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--kn-muted);
  font-size: 13px;
}

.admin-page .kn-import-line a {
  color: var(--green);
  font-weight: 650;
}

/* Sections and filters */

.admin-page .kn-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
}

.admin-page .kn-section h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 740;
  letter-spacing: -.02em;
}

.admin-page .kn-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-page .kn-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-page .kn-filters a {
  padding: 6px 12px;
  border: 1px solid var(--kn-line);
  border-radius: 999px;
  background: #fff;
  color: #414650;
  font-size: 13px;
  font-weight: 620;
}

.admin-page .kn-filters a:hover {
  border-color: #bcc0c8;
}

.admin-page .kn-filters a[aria-current="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.admin-page .kn-muted {
  margin: 0;
  color: var(--kn-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.admin-page .kn-empty {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 24px;
  border: 1px dashed #d2d5db;
  border-radius: 16px;
  background: #fff;
}

.admin-page .kn-empty > .icon {
  width: 22px;
  height: 22px;
  color: var(--green);
}

.admin-page .kn-empty h3 {
  margin: 0 0 4px;
  font-size: 16px;
}

.admin-page .kn-empty p {
  margin: 0;
  color: var(--kn-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Badges */

.admin-page .kn-badge,
.admin-page .kn-status,
.admin-page .kn-impact,
.admin-page .kn-priority,
.admin-page .kn-demand {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 680;
  letter-spacing: .005em;
  line-height: 1.35;
  text-transform: none;
  white-space: nowrap;
}

.admin-page .kn-badge {
  background: #f0f1f4;
  color: #393d47;
}

.admin-page .kn-badge[data-kind="hard_rule"],
.admin-page .kn-badge[data-kind="technical_requirement"],
.admin-page .kn-badge[data-kind="entry_requirement"],
.admin-page .kn-badge[data-kind="fee"] {
  background: #eaeefb;
  color: #2c3a8a;
}

.admin-page .kn-badge[data-kind="channel"] {
  background: #e6ecf4;
  color: #0b2b5a;
}

.admin-page .kn-badge[data-kind="event"] {
  background: #f3ebfb;
  color: #5b2c8a;
}

.admin-page .kn-status {
  border: 1px solid var(--kn-line);
  background: #fff;
  color: #414650;
}

.admin-page .kn-status[data-status="active"],
.admin-page .kn-status[data-status="done"] {
  border-color: #bfe2d3;
  color: #0b5a43;
}

.admin-page .kn-status[data-status="proposed"],
.admin-page .kn-status[data-status="in_progress"] {
  border-color: #f2d29a;
  color: #7a4b00;
}

.admin-page .kn-status[data-status="retracted"],
.admin-page .kn-status[data-status="expired"],
.admin-page .kn-status[data-status="dismissed"] {
  color: var(--kn-muted);
}

.admin-page .kn-impact[data-impact="high"] {
  background: var(--kn-high-bg);
  color: var(--kn-high);
}

.admin-page .kn-impact[data-impact="medium"] {
  background: var(--kn-medium-bg);
  color: var(--kn-medium);
}

.admin-page .kn-impact[data-impact="low"] {
  background: var(--kn-low-bg);
  color: var(--kn-low);
}

.admin-page .kn-priority {
  background: var(--ink);
  color: #fff;
}

.admin-page .kn-demand {
  background: #e7f0fb;
  color: #1f4f8a;
}

.admin-page .kn-claim-id {
  font-family: var(--kn-mono);
  font-size: 13px;
  color: var(--deep);
  overflow-wrap: anywhere;
}

.admin-page a.kn-claim-id:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Cards (review items, conflicts, research, imports) */

.admin-page .kn-cards,
.admin-page .kn-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-page .kn-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 18px 20px 18px 24px;
  border: 1px solid var(--kn-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px #0f1f2a0a;
  overflow: hidden;
}

.admin-page .kn-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #d8dae0;
}

.admin-page .kn-card[data-impact="high"]::before {
  background: var(--kn-high);
}

.admin-page .kn-card[data-impact="medium"]::before {
  background: #e19a2a;
}

.admin-page .kn-card[data-impact="low"]::before {
  background: #3f639a;
}

.admin-page .kn-card[data-priority="1"]::before {
  background: var(--kn-high);
}

.admin-page .kn-card[data-priority="2"]::before {
  background: #e19a2a;
}

.admin-page .kn-card-head,
.admin-page .kn-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-page .kn-card-when {
  overflow-wrap: anywhere;
  color: var(--kn-muted);
  font-size: 12.5px;
}

.admin-page .kn-card-title {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.35;
}

.admin-page .kn-card-title a:hover {
  color: var(--deep);
}

.admin-page .kn-question {
  font-weight: 640;
  line-height: 1.45;
}

.admin-page .kn-card-claim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.admin-page .kn-card-statement {
  margin: 0;
  overflow-wrap: anywhere;
  color: #292d36;
  font-size: 15px;
  line-height: 1.55;
}

.admin-page .kn-card-reason {
  margin: 0;
  overflow-wrap: anywhere;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--kn-soft);
  color: #484c56;
  font-size: 13.5px;
  line-height: 1.5;
}

.admin-page .kn-card-actions,
.admin-page .kn-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-page .kn-card-blocked {
  margin: 0;
  color: var(--kn-medium);
  font-size: 13.5px;
  font-weight: 600;
}

.admin-page .kn-card-decided {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  color: var(--kn-muted);
  font-size: 13px;
}

.admin-page .kn-card-decided span:first-child {
  color: #343841;
  font-weight: 650;
}

/* Buttons and forms */

.admin-page .kn-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 15px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--green);
  color: #fff;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .2s, border-color .2s, box-shadow .2s, transform .2s var(--motion-ease-out);
}

.admin-page .kn-button:hover {
  background: var(--deep);
  box-shadow: 0 8px 20px -10px #00286399;
}

.admin-page .kn-button:active {
  transform: translateY(1px);
}

.admin-page .kn-button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.admin-page .kn-button[disabled] {
  background: #a5a8af;
  box-shadow: none;
  cursor: default;
}

.admin-page .kn-button[data-style="ghost"] {
  border-color: var(--kn-line);
  background: #fff;
  color: #31353f;
}

.admin-page .kn-button[data-style="ghost"]:hover {
  border-color: #c6c9d0;
  background: var(--canvas);
  box-shadow: none;
}

.admin-page .kn-button[data-style="link"] {
  padding-inline: 8px;
  background: none;
  color: var(--deep);
}

.admin-page .kn-button[data-style="link"]:hover {
  background: var(--kn-soft);
  box-shadow: none;
}

.admin-page .kn-form {
  display: grid;
  gap: 14px;
}

.admin-page .kn-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.admin-page .kn-field > span {
  color: #393d47;
  font-size: 13px;
  font-weight: 650;
}

.admin-page .kn-field input,
.admin-page .kn-field select,
.admin-page .kn-field textarea {
  width: 100%;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid #d2d5db;
  border-radius: 10px;
  background: #fff;
  color: var(--kn-ink);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.45;
}

.admin-page .kn-field textarea {
  resize: vertical;
}

.admin-page .kn-field input:focus,
.admin-page .kn-field select:focus,
.admin-page .kn-field textarea:focus {
  border-color: var(--green);
  outline: 3px solid #00368726;
}

.admin-page .kn-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-page .kn-field-short {
  max-width: 220px;
}

.admin-page .kn-fieldset {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--kn-line);
  border-radius: 12px;
  background: var(--kn-soft);
}

.admin-page .kn-fieldset legend {
  padding: 0 6px;
  color: #393d47;
  font-size: 13px;
  font-weight: 700;
}

.admin-page .kn-inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.admin-page .kn-answer {
  padding: 22px;
  border: 1px solid var(--kn-line);
  border-radius: 18px;
  background: #fff;
}

.admin-page .kn-reject {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding-top: 14px;
  border-top: 1px solid var(--kn-line);
}

.admin-page .kn-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #f2d29a;
  border-radius: 10px;
  background: #fff7e8;
  color: #6c4300;
  font-size: 13.5px;
  line-height: 1.5;
}

.admin-page .kn-warning a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.admin-page .kn-warning .icon {
  margin-top: 2px;
}

/* Versions */

.admin-page .kn-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}

.admin-page .kn-version {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  align-content: start;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--kn-line);
  border-radius: 16px;
  background: #fff;
}

.admin-page .kn-version[data-tone="proposed"] {
  border-color: #b9c7dc;
  box-shadow: 0 0 0 3px #e7edf5;
}

.admin-page .kn-version-head {
  display: grid;
  gap: 6px;
}

.admin-page .kn-version h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 720;
}

.admin-page .kn-version-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  color: var(--kn-muted);
  font-size: 12.5px;
}

.admin-page .kn-statement {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 16.5px;
  line-height: 1.6;
  letter-spacing: -.005em;
}

.admin-page .kn-valid {
  margin: 0;
  color: #393d47;
  font-size: 13.5px;
  font-weight: 600;
}

.admin-page .kn-scope,
.admin-page .kn-facts,
.admin-page .kn-counts {
  display: grid;
  gap: 8px;
  margin: 0;
}

.admin-page .kn-scope > div,
.admin-page .kn-facts > div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.admin-page .kn-scope dt,
.admin-page .kn-facts dt {
  color: var(--kn-muted);
  font-size: 12.5px;
  font-weight: 650;
}

.admin-page .kn-scope dd,
.admin-page .kn-facts dd {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.admin-page .kn-scope-compact > div {
  grid-template-columns: 110px minmax(0, 1fr);
}

.admin-page .kn-chip {
  padding: 2px 8px;
  border-radius: 7px;
  background: var(--kn-soft);
  color: #343841;
  font-family: var(--kn-mono);
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.admin-page .kn-block {
  display: grid;
  gap: 8px;
}

.admin-page .kn-block h4 {
  margin: 0;
  color: #393d47;
  font-size: 12px;
  font-weight: 720;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.admin-page .kn-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.5;
}

.admin-page .kn-dates {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-page .kn-dates li {
  display: grid;
  grid-template-columns: minmax(130px, auto) minmax(0, 1fr);
  gap: 2px 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--kn-soft);
  font-size: 13.5px;
}

.admin-page .kn-dates time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.admin-page .kn-dates small {
  grid-column: 2;
  color: var(--kn-low);
  font-size: 12px;
}

.admin-page .kn-dates li[data-expected] small {
  color: var(--kn-medium);
}

.admin-page .kn-code {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  background: #1a202d;
  color: #e3e9f1;
  font-family: var(--kn-mono);
  font-size: 12.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.admin-page .kn-sources {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-page .kn-sources li {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--kn-line);
  border-radius: 12px;
}

.admin-page .kn-source-head {
  margin: 0;
  font-size: 13.5px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.admin-page .kn-source-head a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--deep);
}

.admin-page .kn-source-head a .icon {
  width: 13px;
  height: 13px;
  transform: rotate(-45deg);
}

.admin-page .kn-sources blockquote {
  margin: 0;
  padding-left: 10px;
  border-left: 3px solid #cfd9e7;
  color: #393d47;
  font-size: 13.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.admin-page .kn-source-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0;
  color: var(--kn-muted);
  font-size: 12px;
}

.admin-page .kn-source-type {
  font-weight: 700;
  color: #393d47;
}

.admin-page .kn-watch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--kn-muted);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.admin-page .kn-watch a {
  color: var(--deep);
  word-break: break-all;
}

/* Diffs */

.admin-page .kn-diff {
  display: grid;
  gap: 12px;
}

.admin-page .kn-diff-words {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--kn-line);
  border-radius: 14px;
  background: #fff;
  font-size: 15.5px;
  line-height: 1.75;
}

.admin-page .kn-diff ins,
.admin-page .kn-diff-table ins {
  padding: 1px 3px;
  border-radius: 4px;
  background: var(--kn-add-bg);
  color: var(--kn-add);
  text-decoration: none;
}

.admin-page .kn-diff del,
.admin-page .kn-diff-table del {
  padding: 1px 3px;
  border-radius: 4px;
  background: var(--kn-del-bg);
  color: var(--kn-del);
}

.admin-page .kn-diff-table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--kn-line);
  border-radius: 14px;
  background: #fff;
  border-collapse: collapse;
  font-size: 13.5px;
}

.admin-page .kn-diff-table th,
.admin-page .kn-diff-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--kn-line);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.admin-page .kn-diff-table thead th {
  color: var(--kn-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.admin-page .kn-diff-table tbody th {
  width: 22%;
  font-family: var(--kn-mono);
  font-size: 12px;
  font-weight: 600;
}

.admin-page .kn-diff-table tbody td {
  width: 39%;
}

.admin-page .kn-diff-table tr:last-child th,
.admin-page .kn-diff-table tr:last-child td {
  border-bottom: 0;
}

.admin-page .kn-diff-sources {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.admin-page .kn-diff-sources li[data-op="added"] {
  color: var(--kn-add);
}

.admin-page .kn-diff-sources li[data-op="removed"] {
  color: var(--kn-del);
}

/* Claim search */

.admin-page .kn-search {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--kn-line);
  border-radius: 16px;
  background: #fff;
}

.admin-page .kn-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 14px 18px;
  border: 1px solid var(--kn-line);
  border-radius: 14px;
  background: #fff;
}

.admin-page .kn-row-statement {
  margin: 0;
  color: #292d36;
  font-size: 14.5px;
  line-height: 1.55;
}

.admin-page .kn-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  color: var(--kn-muted);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.admin-page .kn-pager {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* One claim */

.admin-page .kn-claim-intro > div {
  display: grid;
  gap: 10px;
  max-width: 100%;
}

.admin-page .kn-claim-intro .kn-eyebrow {
  margin: 0;
}

.admin-page .kn-claim-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: start;
  gap: 24px;
}

.admin-page .kn-claim-main {
  display: grid;
  gap: 26px;
  min-width: 0;
}

/* The edit form is taller than a screen, so it scrolls with the page (a sticky panel
   would hide its buttons). */
.admin-page .kn-claim-side {
  position: static;
}

.admin-page .kn-edit {
  padding: 20px;
  border: 1px solid var(--kn-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 40px -30px #101a2955;
}

.admin-page .kn-edit h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 740;
}

.admin-page .kn-history {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-page .kn-history li {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 0 0 22px 24px;
  border-left: 2px solid var(--kn-line);
  margin-left: 6px;
}

.admin-page .kn-history li:last-child {
  border-left-color: transparent;
}

.admin-page .kn-history li::before {
  content: "";
  position: absolute;
  top: 2px;
  left: -8px;
  width: 14px;
  height: 14px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #bcc0c8;
  box-shadow: 0 0 0 1px var(--kn-line);
}

.admin-page .kn-history li[data-current]::before {
  background: var(--green);
}

.admin-page .kn-history-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
  font-size: 14px;
}

.admin-page .kn-history-head span {
  color: var(--kn-muted);
  font-size: 13px;
}

.admin-page .kn-history-reason {
  margin: 0;
  color: #393d47;
  font-size: 13.5px;
  line-height: 1.5;
}

.admin-page .kn-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0;
}

/* Imports */

.admin-page .kn-counts {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.admin-page .kn-counts > div {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--kn-soft);
}

.admin-page .kn-counts dt {
  color: var(--kn-muted);
  font-size: 12px;
  font-weight: 650;
}

.admin-page .kn-counts dd {
  margin: 0;
  font-size: 20px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

.admin-page .kn-rules summary {
  color: var(--deep);
  font-size: 13.5px;
  font-weight: 650;
}

.admin-page .kn-rules ul {
  display: grid;
  gap: 4px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.admin-page .kn-rules li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--kn-soft);
  font-size: 13px;
}

.admin-page .kn-intro-action {
  flex-shrink: 0;
}

/* Narrower screens */

@media (max-width: 1100px) {
  .admin-page .kn-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-page .kn-claim-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-page .kn-claim-side {
    position: static;
  }
}

@media (max-width: 760px) {
  .admin-page .kn-header-bar {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px 16px;
  }

  .admin-page .kn-account {
    width: 100%;
    margin-left: 0;
  }

  .admin-page .kn-email {
    flex: 1;
    max-width: none;
  }

  .admin-page .kn-tabs {
    padding: 0 8px;
  }

  .admin-page .kn-tabs a {
    gap: 6px;
    padding: 9px 8px 10px;
    font-size: 13.5px;
  }

  .admin-page .kn-main {
    gap: 20px;
    padding: 20px 16px 60px;
  }

  .admin-page .kn-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .admin-page .kn-tile {
    padding: 14px;
  }

  .admin-page .kn-tile strong {
    font-size: 28px;
  }

  .admin-page .kn-search {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .admin-page .kn-search-text {
    grid-column: 1 / -1;
  }

  .admin-page .kn-card {
    padding: 16px 16px 16px 20px;
  }

  .admin-page .kn-inline-form,
  .admin-page .kn-reject {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-page .kn-scope > div,
  .admin-page .kn-facts > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .admin-page .kn-compare {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-page .kn-version {
    padding: 16px;
  }
}

@media (max-width: 420px) {
  .admin-page .kn-brand-area {
    display: none;
  }

  .admin-page .kn-tile {
    padding: 12px;
  }

  .admin-page .kn-tile strong {
    font-size: 24px;
  }

  .admin-page .kn-tile-note {
    font-size: 12px;
  }

  .admin-page .kn-search {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-page .kn-field-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-page .kn-dates li {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-page .kn-dates small {
    grid-column: 1;
  }

  .admin-page .kn-card-actions .kn-button,
  .admin-page .kn-card-actions form,
  .admin-page .kn-form-actions .kn-button {
    width: 100%;
  }
}

/* What a freshness re-check found (review page) */

.admin-page .kn-recheck {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--kn-line);
  border-radius: 16px;
  background: #fff;
}

.admin-page .kn-recheck h2 {
  margin: 0;
}

.admin-page .kn-recheck h3 {
  margin: 0 0 6px;
  color: var(--kn-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.admin-page .kn-recheck-summary {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
}

.admin-page .kn-recheck-source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

.admin-page .kn-recheck-source a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--deep);
  word-break: break-all;
}

.admin-page .kn-recheck-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 12px;
}

.admin-page .kn-recheck-lines {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.admin-page .kn-recheck-lines li {
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--kn-soft);
}

.admin-page .kn-recheck-lines[data-op="removed"] li {
  background: var(--kn-del-bg);
  color: var(--kn-del);
}

.admin-page .kn-recheck-lines[data-op="added"] li {
  background: var(--kn-add-bg);
  color: var(--kn-add);
}

.admin-page .kn-recheck-lines a {
  color: var(--deep);
}

.admin-page .kn-recheck-suggested {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--kn-line);
  background: var(--kn-soft);
  font-size: 14.5px;
  line-height: 1.6;
}

/* The Jobs console (/admin/jobs): docs/jobs-console.md. Rendered by
   crates/web/src/pages/admin/jobs/ and enhanced by public/jobs-console.js.
   Scoped under .jc[data-console]; classes are prefixed jc-. Outpost's style, with the
   editor toolbar's dark slate for the live panels (the pulse strip and the terminal).
   No inline style anywhere: geometry the markup cannot say is in data-* attributes the
   module turns into custom properties through CSSOM. */

.jc[data-console] {
  /* The live panels' slate (the editor toolbar's). */
  --jc-slate: #1e2128;
  --jc-slate-2: #2a2e36;
  --jc-slate-3: #343842;
  --jc-on-slate: #f5f6f8;
  --jc-on-slate-soft: #ffffffb8;
  --jc-on-slate-dim: #ffffff7a;
  --jc-slate-line: #ffffff17;
  --jc-accent: #8db3f3;
  /* The live graph, sampled from docs/part2/refs/jobs-live-graph-ref.png. */
  --jc-graph-panel: #333231;
  --jc-graph-title: #a6a6a6;
  --jc-graph-blue: #78c6f0;
  --jc-graph-red: #eb5545;
  /* State colours: one each, always with an icon. */
  --jc-queued: #828690;
  --jc-scheduled: #697288;
  --jc-running: var(--brand);
  --jc-retrying: #b86f12;
  --jc-interrupted: #6e4fd0;
  --jc-failed: #c4332d;
  --jc-succeeded: #148457;
  --jc-cancelled: #8e929a;
  --jc-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --jc-ease: var(--motion-ease-out);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.jc[data-console] [data-state="queued"] { --jc-state: var(--jc-queued); }
.jc[data-console] [data-state="scheduled"] { --jc-state: var(--jc-scheduled); }
.jc[data-console] [data-state="running"] { --jc-state: var(--jc-running); }
.jc[data-console] [data-state="retrying"] { --jc-state: var(--jc-retrying); }
.jc[data-console] [data-state="interrupted"] { --jc-state: var(--jc-interrupted); }
.jc[data-console] [data-state="failed"] { --jc-state: var(--jc-failed); }
.jc[data-console] [data-state="succeeded"] { --jc-state: var(--jc-succeeded); }
.jc[data-console] [data-state="cancelled"] { --jc-state: var(--jc-cancelled); }

.jc .jc-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.jc .jc-muted {
  margin: 0;
  color: var(--kn-muted);
  font-size: 13px;
}

.jc .jc-calm {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  color: var(--jc-succeeded);
  font-size: 13.5px;
  font-weight: 600;
}

.jc .jc-cost {
  color: #7a5a00;
  font-variant-numeric: tabular-nums;
}

.jc .jc-tag {
  display: inline-flex;
  align-items: center;
  max-width: 180px;
  overflow: hidden;
  padding: 1px 7px;
  border-radius: 6px;
  background: #eff0f3;
  color: #494d56;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jc .jc-count {
  margin-left: 6px;
  color: var(--kn-muted);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* A state badge: icon and word, in the state's colour. */
.jc .jc-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--jc-state, var(--kn-muted));
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
}

.jc .jc-state .icon {
  width: 14px;
  height: 14px;
}

.jc .jc-state[data-state="running"] .icon {
  animation: jc-pulse-icon 1.4s var(--jc-ease) infinite;
}

@keyframes jc-pulse-icon {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

/* Buttons */

.jc .jc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--kn-line);
  border-radius: 9px;
  background: #fff;
  color: var(--kn-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: background-color .18s, border-color .18s, transform .18s;
}

.jc .jc-button:hover {
  border-color: #cccfd6;
  background: #f7f7f8;
}

.jc .jc-button:active {
  transform: translateY(1px);
}

.jc .jc-button[data-style="primary"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.jc .jc-button[data-style="primary"]:hover {
  background: var(--button-hover);
}

.jc .jc-button[data-style="danger"] {
  border-color: #efc4c1;
  color: var(--jc-failed);
}

.jc .jc-button[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

.jc .jc-button .icon {
  width: 15px;
  height: 15px;
}

/* Sections */

.jc .jc-section {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.jc .jc-section-head h1 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -.025em;
}

.jc .jc-section-head p {
  max-width: 78ch;
  margin: 6px 0 0;
  color: var(--kn-muted);
  font-size: 14px;
  line-height: 1.5;
}

.jc .jc-panel {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--kn-line);
  border-radius: var(--radius);
  background: #fff;
}

.jc .jc-panel h2 {
  margin: 0 0 6px;
  font-size: 16px;
  letter-spacing: -.01em;
}

.jc .jc-panel h3 {
  margin: 18px 0 8px;
  font-size: 14px;
}

.jc .jc-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.jc .jc-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px;
  border: 1px dashed #d0d3d9;
  border-radius: var(--radius);
  color: var(--kn-muted);
  font-size: 14px;
}

.jc .jc-empty strong {
  color: var(--kn-ink);
}

/* Forms */

.jc .jc-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 12px 0 0;
}

.jc .jc-form label {
  display: grid;
  gap: 4px;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #494d56;
}

.jc .jc-form .jc-grow {
  flex: 1 1 220px;
}

.jc .jc-form input,
.jc .jc-form select,
.jc .jc-inline-form input {
  min-height: 34px;
  min-width: 0;
  max-width: 100%;
  padding: 0 10px;
  border: 1px solid var(--kn-line);
  border-radius: 8px;
  background: #fff;
  color: var(--kn-ink);
  font: inherit;
  font-size: 13.5px;
}

.jc .jc-form input[type="number"] {
  width: 110px;
}

.jc .jc-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
}

.jc .jc-inline-form input {
  flex: 1 1 140px;
}

/* ---- The pulse strip (dark slate) ------------------------------------------------- */

.jc .jc-pulse {
  display: grid;
  grid-template-columns: minmax(200px, .9fr) minmax(0, 1.5fr) minmax(300px, 1.3fr);
  gap: 18px;
  padding: 16px;
  border-radius: 16px;
  background: var(--jc-slate);
  color: var(--jc-on-slate);
  box-shadow: 0 1px 2px #101a2914, 0 20px 46px -26px #101a2980;
}

.jc .jc-pulse a {
  color: inherit;
}

.jc .jc-pulse-caption {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  color: var(--jc-on-slate-dim);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.jc .jc-pulse-none {
  margin: 0;
  color: var(--jc-on-slate-soft);
  font-size: 13px;
  line-height: 1.5;
}

.jc .jc-pulse-stopped {
  margin: 8px 0 0 8px;
  color: var(--jc-on-slate-dim);
  font-size: 12px;
}

.jc .jc-workers {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jc .jc-worker a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 7px 8px;
  border-radius: 10px;
  transition: background-color .2s;
}

.jc .jc-worker a:hover {
  background: var(--jc-slate-2);
}

.jc .jc-ring {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--jc-accent);
}

.jc .jc-worker[data-worker-state="stalled"] .jc-ring { border-color: #f2b45a; }
.jc .jc-worker[data-worker-state="asleep"] .jc-ring { border-color: #b39dff; border-style: dashed; }
.jc .jc-worker[data-worker-state="stopped"] .jc-ring { border-color: #ffffff40; }

.jc .jc-ring-pulse {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--jc-accent);
  opacity: 0;
}

.jc .jc-worker[data-beat] .jc-ring-pulse {
  animation: jc-ring 1s var(--jc-ease);
}

@keyframes jc-ring {
  0% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.55); }
}

.jc .jc-avatar {
  font-size: 12.5px;
  font-weight: 760;
  letter-spacing: .02em;
}

.jc .jc-worker-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.jc .jc-worker-name {
  overflow: hidden;
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jc .jc-worker-note {
  overflow: hidden;
  color: var(--jc-on-slate-soft);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jc .jc-worker[data-worker-state="stalled"] .jc-worker-note { color: #f2b45a; }
.jc .jc-worker[data-worker-state="asleep"] .jc-worker-note { color: #c8b8ff; }

.jc .jc-worker-meta {
  overflow: hidden;
  color: var(--jc-on-slate-dim);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jc .jc-pulse-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  align-content: start;
  gap: 8px;
}

.jc .jc-stat {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--jc-slate-line);
  border-radius: 12px;
  background: var(--jc-slate-2);
  transition: border-color .2s, background-color .2s;
}

.jc .jc-stat:hover {
  border-color: #ffffff33;
  background: var(--jc-slate-3);
}

.jc .jc-stat-caption {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--jc-on-slate-dim);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.jc .jc-stat-caption .icon {
  width: 13px;
  height: 13px;
}

.jc .jc-stat-value {
  font-size: 24px;
  font-weight: 720;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.jc .jc-stat-value small {
  color: var(--jc-on-slate-dim);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}

.jc .jc-stat-note {
  color: var(--jc-on-slate-soft);
  font-size: 12px;
}

.jc .jc-stat[data-pulse="failed"] .jc-stat-value[data-nonzero] { color: #ff8d83; }

.jc .jc-spend {
  grid-column: span 2;
}

.jc .jc-spend-note[data-warn] {
  color: #ffb4a0;
  font-weight: 600;
}

.jc .jc-pulse .jc-spark {
  height: 24px;
}

.jc .jc-pulse .jc-spark-line { stroke: var(--jc-accent); }
.jc .jc-pulse .jc-spark-area { fill: #2f72d622; }

/* Sparklines */

.jc .jc-spark {
  display: block;
  width: 100%;
  height: 30px;
  overflow: visible;
}

.jc .jc-spark-line {
  fill: none;
  stroke: var(--green);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

.jc .jc-spark-area {
  fill: #00368714;
  stroke: none;
}

/* Meters: data-level 0–20. */

.jc .jc-meter {
  position: relative;
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6e7eb;
}

.jc .jc-pulse .jc-meter {
  background: #ffffff1c;
}

.jc .jc-meter span {
  --level: 0;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--green);
  transform-origin: left center;
  transform: scaleX(var(--level));
  transition: transform .8s var(--jc-ease);
}

.jc .jc-pulse .jc-meter span {
  background: var(--jc-accent);
}

.jc .jc-meter[data-over] span {
  background: #e08a1e;
}

.jc .jc-meter span[data-level="0"] { --level: 0; }
.jc .jc-meter span[data-level="1"] { --level: 0.05; }
.jc .jc-meter span[data-level="2"] { --level: 0.1; }
.jc .jc-meter span[data-level="3"] { --level: 0.15; }
.jc .jc-meter span[data-level="4"] { --level: 0.2; }
.jc .jc-meter span[data-level="5"] { --level: 0.25; }
.jc .jc-meter span[data-level="6"] { --level: 0.3; }
.jc .jc-meter span[data-level="7"] { --level: 0.35; }
.jc .jc-meter span[data-level="8"] { --level: 0.4; }
.jc .jc-meter span[data-level="9"] { --level: 0.45; }
.jc .jc-meter span[data-level="10"] { --level: 0.5; }
.jc .jc-meter span[data-level="11"] { --level: 0.55; }
.jc .jc-meter span[data-level="12"] { --level: 0.6; }
.jc .jc-meter span[data-level="13"] { --level: 0.65; }
.jc .jc-meter span[data-level="14"] { --level: 0.7; }
.jc .jc-meter span[data-level="15"] { --level: 0.75; }
.jc .jc-meter span[data-level="16"] { --level: 0.8; }
.jc .jc-meter span[data-level="17"] { --level: 0.85; }
.jc .jc-meter span[data-level="18"] { --level: 0.9; }
.jc .jc-meter span[data-level="19"] { --level: 0.95; }
.jc .jc-meter span[data-level="20"] { --level: 1; }

/* The live load graph: the reference's exact colours. */

.jc .jc-graph {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  min-width: 0;
  margin: 0;
  padding: 10px 12px 10px;
  border-radius: 12px;
  background: var(--jc-graph-panel);
}

.jc .jc-graph-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid #a6a6a666;
}

.jc .jc-graph-title {
  color: var(--jc-graph-title);
  font-size: 13px;
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: .08em;
  text-transform: lowercase;
}

.jc .jc-graph-switch {
  display: inline-flex;
  gap: 2px;
}

.jc .jc-graph-switch button {
  padding: 3px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #a6a6a6;
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  font-variant: small-caps;
  letter-spacing: .06em;
  text-transform: lowercase;
  cursor: pointer;
}

.jc .jc-graph-switch button[aria-pressed="true"] {
  background: #ffffff14;
  color: #e6e6e6;
}

.jc .jc-graph-plot {
  position: relative;
  min-height: 120px;
  margin-top: 8px;
  overflow: hidden;
}

.jc .jc-graph-plot canvas {
  display: block;
  width: 100%;
  height: 130px;
  will-change: transform;
}

.jc .jc-graph-cross {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: #ffffff66;
  pointer-events: none;
  transform: translateX(var(--x, 0));
}

.jc .jc-graph-tip {
  position: absolute;
  top: 6px;
  left: 0;
  z-index: 2;
  max-width: 220px;
  padding: 7px 9px;
  border-radius: 8px;
  background: #1d1c1bf2;
  color: #ececec;
  font-size: 11.5px;
  line-height: 1.45;
  pointer-events: none;
  transform: translateX(var(--x, 0));
  box-shadow: 0 8px 22px #0006;
}

.jc .jc-graph-tip strong {
  display: block;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.jc .jc-graph-tip [data-series="blue"] { color: var(--jc-graph-blue); }
.jc .jc-graph-tip [data-series="red"] { color: var(--jc-graph-red); }

.jc .jc-graph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  color: #a6a6a6;
  font-size: 11.5px;
}

.jc .jc-graph-legend li {
  display: none;
  align-items: center;
  gap: 6px;
}

.jc .jc-graph[data-view="load"] .jc-graph-legend [data-legend="load"],
.jc .jc-graph[data-view="throughput"] .jc-graph-legend [data-legend="throughput"],
.jc .jc-graph[data-view="queue"] .jc-graph-legend [data-legend="queue"] {
  display: inline-flex;
}

.jc .jc-graph-legend span {
  width: 10px;
  height: 3px;
  border-radius: 2px;
}

.jc .jc-graph-legend [data-series="blue"] span { background: var(--jc-graph-blue); }
.jc .jc-graph-legend [data-series="red"] span { background: var(--jc-graph-red); }

.jc .jc-graph-empty {
  margin: 4px 0 0;
  color: #a6a6a6;
  font-size: 11.5px;
}

.jc .jc-graph[data-live] .jc-graph-empty {
  display: none;
}

/* ---- Runs: the step waterfall ------------------------------------------------------ */

.jc .jc-runs {
  display: grid;
  gap: 22px;
}

.jc .jc-run-group h2 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #5a5e67;
}

.jc .jc-run-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jc .jc-run {
  min-width: 0;
  padding: 12px 14px 12px;
  border: 1px solid var(--kn-line);
  border-left: 3px solid var(--jc-state, var(--kn-line));
  border-radius: 12px;
  background: #fff;
  transition: box-shadow .2s, border-color .2s;
}

.jc .jc-run:hover {
  box-shadow: 0 10px 24px -18px #101a2955;
}

.jc .jc-run-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  color: inherit;
}

.jc .jc-run-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #eff0f2;
  color: var(--deep);
}

.jc .jc-run-title {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  font-size: 14.5px;
}

.jc .jc-run-kind {
  flex: none;
  font-weight: 720;
}

.jc .jc-run-dot {
  color: var(--kn-muted);
}

.jc .jc-run-subject {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jc .jc-run-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--kn-muted);
  font-size: 12.5px;
  white-space: nowrap;
}

.jc .jc-waterfall {
  display: grid;
  gap: 4px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.jc .jc-step a {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) 138px;
  align-items: center;
  gap: 10px;
  padding: 3px 4px;
  border-radius: 7px;
  color: inherit;
  font-size: 12.5px;
}

.jc .jc-step a:hover {
  background: #f5f6f7;
}

.jc .jc-step-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  color: #383c46;
  font-weight: 600;
  white-space: nowrap;
}

.jc .jc-step-name .icon {
  width: 13px;
  height: 13px;
  color: var(--jc-state);
}

.jc .jc-step-track {
  position: relative;
  height: 14px;
  border-radius: 4px;
  background: #f2f3f5;
}

.jc .jc-step-bar {
  --offset: 0;
  --span: 1;
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: calc(var(--offset) * 100%);
  width: max(6px, calc(var(--span) * 100%));
  border-radius: 3px;
  background: var(--jc-state, var(--jc-queued));
  transition: left .6s var(--jc-ease), width .6s var(--jc-ease), background-color .3s;
}

.jc .jc-step[data-state="queued"] .jc-step-bar,
.jc .jc-step[data-state="scheduled"] .jc-step-bar {
  background: repeating-linear-gradient(135deg, var(--jc-state) 0 4px, #ffffff00 4px 8px);
  opacity: .6;
}

/* Running bars shimmer. */
.jc .jc-step[data-state="running"] .jc-step-bar {
  background: linear-gradient(90deg, #003687 0%, #2f72d6 45%, #003687 90%);
  background-size: 220% 100%;
  animation: jc-shimmer 1.6s linear infinite;
}

@keyframes jc-shimmer {
  from { background-position: 110% 0; }
  to { background-position: -110% 0; }
}

/* A retry shows as stacked attempts. */
.jc .jc-attempts {
  position: absolute;
  inset: -3px 0 auto 0;
  display: flex;
  gap: 2px;
  justify-content: flex-end;
}

.jc .jc-attempt-mark {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--jc-state);
  box-shadow: 0 0 0 1.5px #fff;
}

.jc .jc-step-numbers {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  color: var(--kn-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.jc .jc-step-tries {
  color: var(--jc-retrying);
  font-weight: 650;
}

/* A one-step run is its head alone. */
.jc .jc-run[data-single] {
  padding-top: 9px;
  padding-bottom: 9px;
}

.jc .jc-run[data-single] .jc-waterfall {
  display: none;
}

/* Rows glide to their new group; the module drives it with FLIP transforms. */
.jc .jc-run[data-gliding] {
  transition: transform .5s var(--jc-ease);
}

/* ---- Queues ------------------------------------------------------------------------- */

.jc .jc-heartbeat {
  padding: 16px 18px;
  border: 1px solid #cfd8e6;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #f6f7f9, #fff);
}

.jc .jc-heartbeat[data-healthy="false"] {
  border-color: #f1d3a8;
  background: linear-gradient(180deg, #fff8ee, #fff);
}

.jc .jc-heartbeat h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 16px;
}

.jc .jc-heartbeat h2 .icon {
  color: var(--jc-succeeded);
}

.jc .jc-heartbeat[data-healthy="false"] h2 .icon {
  color: var(--jc-retrying);
}

.jc .jc-heartbeat-summary {
  color: var(--kn-muted);
  font-size: 13px;
  font-weight: 600;
}

.jc .jc-heartbeat ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 4px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jc .jc-heartbeat li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 10px;
  padding: 5px 0;
  border-bottom: 1px solid #eeeff2;
  font-size: 12.5px;
}

.jc .jc-heartbeat code {
  overflow: hidden;
  font-family: var(--jc-mono);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jc .jc-beat-rate {
  color: #494d56;
  font-variant-numeric: tabular-nums;
}

.jc .jc-beat-note {
  display: inline-flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 5px;
  color: var(--jc-succeeded);
  font-size: 12px;
}

.jc .jc-heartbeat li[data-healthy="false"] .jc-beat-note { color: var(--jc-retrying); }
.jc .jc-heartbeat li[data-paused] .jc-beat-note { color: var(--kn-muted); }

.jc .jc-beat-note .icon {
  width: 13px;
  height: 13px;
}

.jc .jc-area h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 6px 0 10px;
  font-size: 16px;
}

.jc .jc-area-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #eff0f2;
  color: var(--deep);
}

.jc .jc-kinds {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jc .jc-kind {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--kn-line);
  border-radius: 12px;
  background: #fff;
}

.jc .jc-kind[data-paused] {
  border-style: dashed;
  background: #fafbfc;
}

.jc .jc-kind header {
  display: grid;
  gap: 2px;
}

.jc .jc-kind h3 {
  margin: 0;
  font-size: 14px;
}

.jc .jc-kind header code {
  color: var(--kn-muted);
  font-family: var(--jc-mono);
  font-size: 11.5px;
}

.jc .jc-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jc .jc-counts a {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 7px;
  background: #f4f5f7;
  color: #494d56;
  font-size: 12px;
}

.jc .jc-counts strong {
  color: var(--jc-state);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.jc .jc-counts li[data-zero] a {
  opacity: .55;
}

.jc .jc-kind-numbers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.jc .jc-kind-numbers div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.jc .jc-kind-numbers dt {
  color: var(--kn-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.jc .jc-kind-numbers dd {
  margin: 0;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jc .jc-kind-numbers div[data-high] dd {
  color: var(--jc-failed);
}

.jc .jc-kind-when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  color: #494d56;
  font-size: 12.5px;
}

.jc .jc-kind-when .icon {
  width: 13px;
  height: 13px;
  color: var(--kn-muted);
}

.jc .jc-kind[data-idle]:not([data-paused]) {
  background: #fbfcfd;
}

.jc .jc-kind[data-idle]:not([data-paused]) .jc-spark {
  opacity: .45;
}

.jc .jc-pause summary {
  width: fit-content;
  list-style: none;
}

.jc .jc-pause summary::-webkit-details-marker {
  display: none;
}

.jc .jc-pause[open] summary {
  border-color: #cccfd6;
  background: #f4f5f7;
}

.jc .jc-kind-total {
  margin: 0;
  color: var(--kn-muted);
  font-size: 12px;
}

.jc .jc-paused-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #5b4a9c;
  font-size: 12.5px;
}

/* ---- Schedules: the 24-hour ruler --------------------------------------------------- */

.jc .jc-ruler {
  display: grid;
  min-width: 0;
  border: 1px solid var(--kn-line);
  border-radius: var(--radius);
  background: #fff;
}

.jc .jc-ruler-axis,
.jc .jc-ruler-row {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr) minmax(200px, 270px);
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
}

.jc .jc-ruler-axis {
  border-bottom: 1px solid var(--kn-line);
  color: var(--kn-muted);
  font-size: 11.5px;
}

.jc .jc-ruler-row + .jc-ruler-row {
  border-top: 1px solid #eff0f3;
}

.jc .jc-ruler-row[data-paused] {
  background: #fafbfc;
}

.jc .jc-ruler-label {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.jc .jc-ruler-label strong {
  overflow: hidden;
  font-size: 13.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jc .jc-ruler-label small {
  color: var(--kn-muted);
  font-size: 12px;
}

.jc .jc-ruler-hours,
.jc .jc-ruler-track {
  position: relative;
  height: 18px;
}

.jc .jc-ruler-track {
  border-radius: 9px;
  background: repeating-linear-gradient(90deg, #f2f3f5 0 calc(12.5% - 1px), #e4e5e9 calc(12.5% - 1px) 12.5%);
}

.jc .jc-ruler-hour,
.jc .jc-ruler-dot {
  --at: 0;
  position: absolute;
  top: 50%;
  left: calc(var(--at) * 100%);
  transform: translate(-50%, -50%);
}

.jc .jc-ruler-hour {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.jc .jc-ruler-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jc-scheduled);
  box-shadow: 0 0 0 2px #fff;
}

.jc .jc-ruler-row[data-paused] .jc-ruler-dot {
  background: #c6c9cf;
}

.jc .jc-ruler-side {
  display: grid;
  gap: 4px;
  justify-items: start;
  min-width: 0;
}

.jc .jc-ruler-last {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.jc .jc-ruler-last small {
  color: var(--kn-muted);
  font-size: 12px;
}

.jc .jc-ruler-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.jc .jc-ruler-actions form {
  margin: 0;
}

.jc .jc-ruler-actions .jc-button {
  min-height: 28px;
  padding: 0 9px;
  font-size: 12px;
}

/* ---- The live terminal (dark slate, monospace) -------------------------------------- */

.jc .jc-terminal {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--jc-slate);
  color: var(--jc-on-slate);
  box-shadow: 0 1px 2px #101a2914, 0 20px 46px -26px #101a2980;
}

.jc .jc-term-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--jc-slate-line);
  background: var(--jc-slate-2);
}

.jc .jc-term-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}

.jc .jc-term-live {
  color: var(--jc-on-slate-dim);
  font-size: 12px;
  font-weight: 600;
}

.jc .jc-term-live[data-live]::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--jc-accent);
  content: "";
  animation: jc-pulse-icon 1.6s ease-in-out infinite;
}

.jc .jc-term-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.jc .jc-term-controls select,
.jc .jc-term-search input,
.jc .jc-term-button {
  min-height: 30px;
  border: 1px solid var(--jc-slate-line);
  border-radius: 8px;
  background: var(--jc-slate);
  color: var(--jc-on-slate);
  font: inherit;
  font-size: 12.5px;
}

.jc .jc-term-controls select {
  max-width: 160px;
  padding: 0 8px;
}

.jc .jc-term-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  cursor: pointer;
}

.jc .jc-term-button[aria-pressed="false"] {
  border-color: #f2b45a66;
  color: #f2b45a;
}

.jc .jc-term-search {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.jc .jc-term-search .icon {
  position: absolute;
  left: 8px;
  width: 13px;
  height: 13px;
  color: var(--jc-on-slate-dim);
}

.jc .jc-term-search input {
  width: 150px;
  padding: 0 8px 0 27px;
}

.jc .jc-term-lines {
  max-height: 520px;
  margin: 0;
  padding: 8px 0;
  overflow: auto;
  list-style: none;
  font-family: var(--jc-mono);
  font-size: 12.5px;
  line-height: 1.55;
  overscroll-behavior: contain;
}

.jc .jc-terminal[data-compact] .jc-term-lines {
  max-height: 260px;
}

.jc .jc-line a {
  display: grid;
  grid-template-columns: 66px 14px 64px 112px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 1px 14px;
  color: var(--jc-on-slate-soft);
}

.jc .jc-line a:hover {
  background: #ffffff0d;
}

.jc .jc-line time {
  color: var(--jc-on-slate-dim);
  font-variant-numeric: tabular-nums;
}

.jc .jc-line-area {
  overflow: hidden;
  color: #a7aebe;
  white-space: nowrap;
}

.jc .jc-line-ws {
  overflow: hidden;
  color: #cdd0d8;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jc .jc-line-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jc .jc-line-took {
  color: var(--jc-on-slate-dim);
  font-variant-numeric: tabular-nums;
}

.jc .jc-line[data-level="started"] .jc-line-text,
.jc .jc-line[data-level="started"] .jc-line-glyph,
.jc .jc-line[data-level="queued"] .jc-line-text { color: #ffffff80; }
.jc .jc-line[data-level="succeeded"] .jc-line-glyph,
.jc .jc-line[data-level="succeeded"] .jc-line-text { color: #6fdca5; }
.jc .jc-line[data-level="retrying"] .jc-line-glyph,
.jc .jc-line[data-level="retrying"] .jc-line-text { color: #f4bb63; }
.jc .jc-line[data-level="failed"] .jc-line-glyph,
.jc .jc-line[data-level="failed"] .jc-line-text { color: #ff8478; }
.jc .jc-line[data-level="interrupted"] .jc-line-glyph,
.jc .jc-line[data-level="interrupted"] .jc-line-text { color: #bba6ff; }
.jc .jc-line[data-level="llm"] .jc-line-glyph,
.jc .jc-line[data-level="llm"] .jc-line-text { color: #6fd8ec; }
.jc .jc-line[data-level="cancelled"] .jc-line-text { color: #ffffff66; }

.jc .jc-line[data-collapsed] .jc-line-text::after {
  margin-left: 8px;
  color: #ffffff59;
  content: attr(data-collapsed);
}

/* New lines slide in. */
.jc .jc-line[data-new] {
  animation: jc-line-in .45s var(--jc-ease);
}

@keyframes jc-line-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.jc .jc-line[hidden] {
  display: none;
}

.jc .jc-term-paused {
  margin: 0;
  padding: 8px 14px;
  border-top: 1px solid var(--jc-slate-line);
  color: #f2b45a;
  font-size: 12px;
}

/* ---- The job drawer ------------------------------------------------------------------ */

.jc .jc-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  width: min(600px, 100vw);
  overflow: auto;
  border-left: 1px solid var(--kn-line);
  background: var(--canvas);
  box-shadow: -24px 0 60px -30px #101a2966;
  transform: translateX(0);
  transition: transform .35s var(--jc-ease);
}

.jc .jc-drawer[data-closing],
.jc .jc-drawer[data-opening] {
  transform: translateX(104%);
}

.jc .jc-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: #171b2540;
}

.jc .jc-drawer-close {
  position: sticky;
  top: 10px;
  z-index: 2;
  float: right;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 10px 10px 0 0;
  border: 1px solid var(--kn-line);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.jc .jc-drawer-content {
  padding: 18px 20px 40px;
}

.jc .jc-drawer-body {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.jc .jc-job-page .jc-drawer-body {
  max-width: 820px;
  padding: 20px 22px;
  border: 1px solid var(--kn-line);
  border-radius: var(--radius);
  background: #fff;
}

.jc .jc-drawer-kind {
  margin: 0;
  color: var(--kn-muted);
  font-size: 12.5px;
}

.jc .jc-drawer-kind code,
.jc .jc-payload code,
.jc .jc-call code {
  font-family: var(--jc-mono);
  font-size: 12px;
}

.jc .jc-drawer-head h2 {
  margin: 4px 0 6px;
  font-size: 20px;
  letter-spacing: -.02em;
}

.jc .jc-drawer-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--kn-muted);
  font-size: 13px;
}

.jc .jc-drawer-problem {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fdf0ef;
  color: #8f2721;
  font-size: 13px;
  line-height: 1.45;
}

.jc .jc-drawer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}

.jc .jc-drawer-actions form {
  margin: 0;
}

.jc .jc-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 0;
}

.jc .jc-facts div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.jc .jc-facts dt {
  color: var(--kn-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.jc .jc-facts dd {
  margin: 0;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
}

.jc .jc-facts a {
  color: var(--deep);
  font-weight: 600;
}

.jc .jc-drawer-section h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 14px;
}

.jc .jc-drawer-section h3 small {
  color: var(--kn-muted);
  font-size: 12px;
  font-weight: 600;
}

/* Attempts timeline with heartbeats and gaps. */

.jc .jc-timeline-ends {
  display: flex;
  justify-content: space-between;
  margin: 0 0 6px;
  color: var(--kn-muted);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.jc .jc-timeline ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jc .jc-attempt-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 6px;
  font-size: 13px;
}

.jc .jc-attempt-track {
  position: relative;
  display: block;
  height: 16px;
  border-radius: 5px;
  background: #eff0f3;
}

.jc .jc-attempt-bar,
.jc .jc-gap {
  --from: 0;
  --to: 1;
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: calc(var(--from) * 100%);
  width: max(3px, calc((var(--to) - var(--from)) * 100%));
  border-radius: 3px;
}

.jc .jc-attempt-bar {
  background: var(--jc-state, var(--jc-running));
  opacity: .85;
}

.jc .jc-gap {
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(135deg, #6e4fd0cc 0 3px, #6e4fd033 3px 7px);
  outline: 1px solid #6e4fd0;
}

.jc .jc-beat {
  --at: 0;
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: calc(var(--at) * 100%);
  width: 2px;
  border-radius: 1px;
  background: #fff;
  box-shadow: 0 0 0 .5px #0003;
}

.jc .jc-attempt-beats,
.jc .jc-attempt-gap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 5px 0 0;
  color: var(--kn-muted);
  font-size: 12px;
}

.jc .jc-attempt-gap {
  color: var(--jc-interrupted);
  font-weight: 600;
}

.jc .jc-attempt-error {
  margin: 6px 0 0;
  padding: 7px 9px;
  border-radius: 8px;
  background: #f7f0ef;
  color: #7d2a24;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.jc .jc-calls {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jc .jc-call {
  padding: 10px 12px;
  border: 1px solid var(--kn-line);
  border-left: 3px solid #1aa6c4;
  border-radius: 10px;
  background: #fff;
}

.jc .jc-call[data-ok="false"] {
  border-left-color: var(--jc-failed);
}

.jc .jc-call-head,
.jc .jc-call-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0;
  font-size: 12.5px;
}

.jc .jc-call-head .icon {
  color: #1aa6c4;
}

.jc .jc-call[data-ok="false"] .jc-call-head .icon {
  color: var(--jc-failed);
}

.jc .jc-call-numbers {
  margin-top: 4px;
  color: #494d56;
  font-variant-numeric: tabular-nums;
}

.jc .jc-excerpt {
  margin: 8px 0 0;
}

.jc .jc-excerpt summary {
  color: var(--deep);
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
}

.jc .jc-excerpt pre {
  max-height: 260px;
  margin: 6px 0 0;
  padding: 10px;
  overflow: auto;
  border-radius: 8px;
  background: var(--jc-slate);
  color: var(--jc-on-slate-soft);
  font-family: var(--jc-mono);
  font-size: 11.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.jc .jc-payload {
  display: grid;
  gap: 4px;
  margin: 0;
}

.jc .jc-payload div {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr);
  gap: 10px;
}

.jc .jc-payload dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.jc .jc-log {
  max-height: 280px;
  margin: 0;
  padding: 8px 0;
  overflow: auto;
  border-radius: 10px;
  background: var(--jc-slate);
  list-style: none;
  font-family: var(--jc-mono);
  font-size: 11.5px;
  line-height: 1.55;
}

.jc .jc-log li {
  display: grid;
  grid-template-columns: 62px 44px minmax(0, auto) minmax(0, 1fr);
  gap: 8px;
  padding: 0 12px;
  color: var(--jc-on-slate-soft);
}

.jc .jc-log time { color: var(--jc-on-slate-dim); }
.jc .jc-log-target { color: #a7aebe; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.jc .jc-log li[data-level="WARN"] .jc-log-level,
.jc .jc-log li[data-level="WARN"] .jc-log-message { color: #f4bb63; }
.jc .jc-log li[data-level="ERROR"] .jc-log-level,
.jc .jc-log li[data-level="ERROR"] .jc-log-message { color: #ff8478; }
.jc .jc-log-message { overflow-wrap: anywhere; }

.jc .jc-drawer-more {
  margin: 8px 0 0;
  font-size: 12.5px;
}

.jc .jc-drawer-more a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--deep);
  font-weight: 650;
}

/* ---- Model calls -------------------------------------------------------------------- */

.jc .jc-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.jc .jc-figure {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--kn-line);
  border-radius: 12px;
  background: #fff;
}

.jc .jc-figure[data-warn] {
  border-color: #f0c9a0;
  background: #fffaf3;
}

.jc .jc-figure-label {
  color: var(--kn-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.jc .jc-figure strong {
  font-size: 22px;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.jc .jc-figure-note {
  color: var(--kn-muted);
  font-size: 12px;
}

.jc .jc-figure-spark .jc-spark-line { stroke: #1aa6c4; }
.jc .jc-figure-spark .jc-spark-area { fill: #1aa6c41f; }

.jc .jc-breakdowns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.jc .jc-breakdown ul,
.jc .jc-burns,
.jc .jc-credits,
.jc .jc-anomalies,
.jc .jc-paused-list,
.jc .jc-fired,
.jc .jc-audit {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.jc .jc-breakdown li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  font-size: 13px;
}

.jc .jc-breakdown .jc-meter {
  grid-column: 1 / -1;
}

.jc .jc-breakdown-name {
  display: grid;
  min-width: 0;
}

.jc .jc-breakdown-name a,
.jc .jc-breakdown-name span {
  overflow: hidden;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jc .jc-breakdown-name small,
.jc .jc-breakdown-spend small,
.jc .jc-burns small,
.jc .jc-credits small,
.jc .jc-anomalies small,
.jc .jc-paused-list small,
.jc .jc-fired small,
.jc .jc-audit small {
  color: var(--kn-muted);
  font-size: 11.5px;
}

.jc .jc-breakdown-spend {
  display: grid;
  justify-items: end;
}

.jc .jc-burns li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(80px, 140px) auto;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.jc .jc-burn-name,
.jc .jc-burn-numbers {
  display: grid;
  min-width: 0;
}

.jc .jc-burn-numbers {
  justify-items: end;
}

.jc .jc-burns li[data-near] strong {
  color: #b05e00;
}

.jc .jc-credits li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  padding: 8px 10px;
  border: 1px solid var(--kn-line);
  border-radius: 10px;
  font-size: 13px;
}

.jc .jc-credits li span {
  display: grid;
}

.jc .jc-credit-actions {
  display: inline-flex !important;
  gap: 6px;
}

.jc .jc-credit-actions form {
  margin: 0;
}

.jc .jc-anomalies li {
  display: flex;
  gap: 8px;
  font-size: 13px;
}

.jc .jc-anomalies li .icon {
  color: var(--jc-retrying);
}

.jc .jc-anomalies a {
  display: grid;
  color: inherit;
}

.jc .jc-filters {
  margin-bottom: 12px;
}

.jc .jc-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--kn-line);
  border-radius: 10px;
}

.jc .jc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.jc .jc-table th,
.jc .jc-table td {
  padding: 7px 10px;
  border-bottom: 1px solid #eff0f3;
  text-align: left;
  white-space: nowrap;
}

.jc .jc-table th {
  background: #f8f8f9;
  color: var(--kn-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.jc .jc-table code {
  font-family: var(--jc-mono);
  font-size: 12px;
}

.jc .jc-outcome {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--jc-succeeded);
}

.jc .jc-outcome[data-ok="false"] {
  color: var(--jc-failed);
}

.jc .jc-outcome .icon {
  width: 13px;
  height: 13px;
}

.jc .jc-pager {
  display: flex;
  gap: 14px;
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 650;
}

.jc .jc-pager a {
  color: var(--deep);
}

/* ---- Operations --------------------------------------------------------------------- */

.jc .jc-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jc .jc-operation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--kn-line);
  border-radius: 12px;
  background: #fff;
}

.jc .jc-operation-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #eff0f2;
  color: var(--deep);
}

.jc .jc-operation h2 {
  margin: 0;
  font-size: 15px;
}

.jc .jc-operation p {
  margin: 4px 0 0;
  color: #494d56;
  font-size: 13px;
  line-height: 1.45;
}

.jc .jc-operation-cost {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #7a5a00 !important;
  font-weight: 600;
}

.jc .jc-confirm {
  padding: 18px 20px;
  border: 1px solid #f0c9a0;
  border-radius: var(--radius);
  background: #fffaf3;
  box-shadow: 0 16px 36px -26px #7a4a0066;
}

.jc .jc-confirm h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 17px;
}

.jc .jc-confirm h2 .icon {
  color: var(--jc-retrying);
}

.jc .jc-confirm p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
}

.jc .jc-confirm dl {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
}

.jc .jc-confirm dl div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 10px;
  font-size: 13.5px;
}

.jc .jc-confirm dt {
  color: var(--kn-muted);
  font-weight: 650;
}

.jc .jc-confirm dd {
  margin: 0;
}

.jc .jc-confirm form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}

.jc .jc-paused-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 13px;
}

/* ---- Alerts ------------------------------------------------------------------------- */

.jc .jc-rules {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jc .jc-rule {
  padding: 14px 16px;
  border: 1px solid var(--kn-line);
  border-radius: 12px;
  background: #fff;
}

.jc .jc-rule[data-open] {
  border-color: #f0c9a0;
}

.jc .jc-rule[data-enabled="false"] {
  background: #fafbfc;
}

.jc .jc-rule form {
  margin: 0;
}

.jc .jc-rule header {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.jc .jc-rule h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
}

.jc .jc-rule h2 .icon {
  color: var(--jc-succeeded);
}

.jc .jc-rule[data-open] h2 .icon {
  color: var(--jc-retrying);
}

.jc .jc-rule-open {
  flex: 1 1 100%;
  margin: 0;
  color: #9a5300;
  font-size: 13px;
}

.jc .jc-rule-fields {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.jc .jc-switch {
  display: inline-flex !important;
  grid-auto-flow: column;
  align-items: center;
  gap: 6px !important;
}

.jc .jc-switch input {
  width: 18px;
  height: 18px;
  min-height: 0;
  accent-color: var(--green);
}

.jc .jc-fired li {
  display: flex;
  gap: 8px;
  font-size: 13px;
}

.jc .jc-fired li .icon {
  flex: none;
  margin-top: 2px;
  color: var(--jc-succeeded);
}

.jc .jc-fired li[data-open] .icon {
  color: var(--jc-retrying);
}

.jc .jc-fired li span {
  display: grid;
  gap: 2px;
}

/* ---- Audit log ---------------------------------------------------------------------- */

.jc .jc-audit li {
  display: grid;
  grid-template-columns: 120px minmax(120px, 220px) minmax(0, 1fr);
  gap: 2px 14px;
  padding: 9px 12px;
  border: 1px solid var(--kn-line);
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
}

.jc .jc-audit time {
  color: var(--kn-muted);
  font-variant-numeric: tabular-nums;
}

.jc .jc-audit-who {
  overflow: hidden;
  font-weight: 650;
  text-overflow: ellipsis;
}

.jc .jc-audit small {
  grid-column: 3;
}

.jc .jc-audit code {
  font-family: var(--jc-mono);
  font-size: 12px;
}

/* The toast the module shows after an action in place. */

.jc .jc-toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  z-index: 80;
  max-width: min(520px, calc(100vw - 32px));
  margin: 0;
  padding: 11px 16px;
  border-radius: 12px;
  background: var(--jc-slate);
  color: var(--jc-on-slate);
  font-size: 13.5px;
  box-shadow: 0 18px 40px -16px #0008;
  transform: translateX(-50%);
  animation: jc-toast-in .35s var(--jc-ease);
}

.jc .jc-toast[data-tone="refused"] {
  background: #5a2320;
}

@keyframes jc-toast-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* The module's confirmation dialog (hand-built, not the browser's). */

.jc .jc-dialog {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 16px;
  background: #171b2559;
}

.jc .jc-dialog-box {
  width: min(460px, 100%);
  padding: 18px 20px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 30px 70px -30px #0009;
  animation: jc-line-in .3s var(--jc-ease);
}

.jc .jc-dialog-box h2 {
  margin: 0;
  font-size: 17px;
}

.jc .jc-dialog-box p {
  margin: 8px 0 0;
  color: #494d56;
  font-size: 14px;
  line-height: 1.5;
}

.jc .jc-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 16px 0 0;
}

/* ---- Responsive --------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .jc .jc-pulse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .jc .jc-graph {
    grid-column: 1 / -1;
  }
  .jc .jc-breakdowns {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .jc[data-console] {
    gap: 18px;
  }
  /* The pulse strip stacks. */
  .jc .jc-pulse {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
    border-radius: 14px;
  }
  .jc .jc-spend {
    grid-column: 1 / -1;
  }
  .jc .jc-two {
    grid-template-columns: minmax(0, 1fr);
  }
  .jc .jc-run-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .jc .jc-run-meta {
    grid-column: 2 / -1;
    grid-row: 2;
    flex-wrap: wrap;
    white-space: normal;
  }
  .jc .jc-step a {
    grid-template-columns: 84px minmax(0, 1fr) auto;
    gap: 8px;
  }
  .jc .jc-step-numbers {
    gap: 6px;
    font-size: 11.5px;
  }
  .jc .jc-step-numbers .jc-step-tries {
    display: none;
  }
  /* The strip stays short on a phone: the numbers come first and small. */
  .jc .jc-pulse-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .jc .jc-stat {
    padding: 8px 10px;
  }
  .jc .jc-stat-value {
    font-size: 20px;
  }
  /* Unrecorded paid calls are worth the room even on a phone. */
  .jc .jc-spend-note[data-warn] {
    display: block;
  }
  .jc .jc-stat-note:not([data-warn]),
  .jc .jc-worker-meta {
    display: none;
  }
  .jc .jc-pulse .jc-spark {
    height: 16px;
  }
  .jc .jc-workers {
    gap: 2px;
  }
  .jc .jc-worker a {
    padding: 4px 6px;
  }
  .jc .jc-ring {
    width: 32px;
    height: 32px;
  }
  /* A phone shows the live workers; stopped ones stay on the desktop strip. */
  .jc .jc-worker[data-worker-state="stopped"] {
    display: none;
  }
  .jc .jc-ruler-axis {
    display: none;
  }
  .jc .jc-ruler-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  /* The terminal goes full-width: lines wrap under their time. */
  .jc .jc-terminal {
    margin: 0 -16px;
    border-radius: 0;
  }
  .jc .jc-line a {
    grid-template-columns: 58px 12px minmax(0, 1fr) auto;
    padding: 2px 12px;
  }
  .jc .jc-line-area,
  .jc .jc-line-ws {
    display: none;
  }
  .jc .jc-term-controls,
  .jc .jc-term-controls label,
  .jc .jc-term-controls select,
  .jc .jc-term-search,
  .jc .jc-term-search input {
    width: 100%;
    max-width: none;
  }
  .jc .jc-term-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .jc .jc-term-search {
    grid-column: 1 / -1;
  }
  .jc .jc-facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .jc .jc-kind-numbers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .jc .jc-burns li {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .jc .jc-burns .jc-meter {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .jc .jc-audit li {
    grid-template-columns: minmax(0, 1fr);
  }
  .jc .jc-audit small {
    grid-column: 1;
  }
  .jc .jc-catalog {
    grid-template-columns: minmax(0, 1fr);
  }
  .jc .jc-log li {
    grid-template-columns: 58px minmax(0, 1fr);
  }
  .jc .jc-log-level,
  .jc .jc-log-target {
    display: none;
  }
}

/* prefers-reduced-motion turns all of it off. */
@media (prefers-reduced-motion: reduce) {
  .jc[data-console] *,
  .jc[data-console] *::before,
  .jc[data-console] *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* The hand-built listboxes (public/controls.js) inside the console's forms. */
.jc .jc-form .lb {
  display: grid;
  gap: 4px;
  min-width: 170px;
}

.jc .jc-form .lb-label {
  color: #494d56;
  font-size: 12.5px;
  font-weight: 600;
}

.jc .jc-form .lb-trigger {
  min-height: 34px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 13.5px;
}

/* On the terminal's dark bar. */
.jc .jc-term-filter .lb {
  min-width: 140px;
}

.jc .jc-term-filter .lb-native,
.jc .jc-term-filter .lb-trigger {
  min-height: 30px;
  padding: 4px 10px;
  border-color: var(--jc-slate-line);
  border-radius: 8px;
  background: var(--jc-slate);
  color: var(--jc-on-slate);
  font-size: 12.5px;
}

.jc .jc-term-filter .lb-trigger:hover {
  border-color: #ffffff33;
  background: var(--jc-slate-3);
}

.jc .jc-term-filter .lb-chevron {
  stroke: var(--jc-on-slate-soft);
}

@media (max-width: 760px) {
  .jc .jc-term-filter .lb {
    min-width: 0;
  }
  .jc .jc-form .lb {
    min-width: 0;
    flex: 1 1 100%;
  }
}

/* The app shell: header, workspace switcher, grouped navigation, shared banners.
   Rendered by crates/web/src/pages/app/layout.rs. Owner: foundation (shared file). */

.app-shell {
  --app-header-height: 66px;
  --app-nav-width: 240px;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--canvas);
}

/* Header */

.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #ffffffeb;
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
}

.app-header-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: var(--app-header-height);
  padding-inline: 30px 24px;
}

.app-brand span {
  font-size: 22px;
}

.app-brand img {
  width: 28px;
  height: 28px;
}

.app-shell .workspace-switcher {
  position: relative;
  min-width: 0;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

.app-shell .workspace-switcher summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  list-style: none;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}

.app-shell .workspace-switcher summary::-webkit-details-marker {
  display: none;
}

.app-shell .workspace-switcher summary:hover,
.app-shell .workspace-switcher[open] summary {
  border-color: #cccfd6;
  box-shadow: 0 4px 14px -6px #101a2933;
}

.app-shell .workspace-switcher summary > .icon {
  width: 15px;
  height: 15px;
  color: var(--muted);
  transform: rotate(90deg);
  transition: transform .25s var(--motion-ease-out);
}

.app-shell .workspace-switcher[open] summary > .icon {
  transform: rotate(-90deg);
}

/* A workspace's chip: its site's square icon (or logo fitted), over its initial in style A
   (brand blue on the pale blue tint, the display face), which shows whenever there is no
   image or it can't load. */
.app-shell .workspace-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--tint-blue);
  color: var(--brand);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
}

.app-shell .avatar-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.app-shell [data-image] > .avatar-fallback {
  display: none;
}

.app-shell .workspace-current {
  display: grid;
  min-width: 0;
  text-align: left;
}

.app-shell .workspace-current strong {
  overflow: hidden;
  max-width: 190px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell .workspace-current small {
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
}

.app-shell .workspace-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 18px;
  z-index: 40;
  width: 290px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 28px 60px -20px #101a2940, 0 2px 6px #101a290d;
}

.app-shell .workspace-menu-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 10px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7d848a;
}

.app-shell .workspace-menu-title span {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--mint);
  font-size: 11px;
  letter-spacing: 0;
}

.app-shell .workspace-menu ul {
  display: grid;
  gap: 2px;
}

.app-shell .workspace-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background-color .15s;
}

.app-shell .workspace-menu a:hover {
  background: var(--canvas);
}

.app-shell .workspace-menu a[aria-current="page"] {
  background: #eef2f8;
}

.app-shell .workspace-menu a > .icon {
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--green);
}

/* Sites in a workspace (0245): the site switcher beside the workspace switcher, in the
   same hand-built style (a native <details> menu). Each site shows its square icon (or
   its logo fitted) over its initial. */
.app-shell .site-switcher {
  position: relative;
  min-width: 0;
}

.app-shell .site-switcher summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  list-style: none;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}

.app-shell .site-switcher summary::-webkit-details-marker {
  display: none;
}

.app-shell .site-switcher summary:hover,
.app-shell .site-switcher[open] summary {
  border-color: #cccfd6;
  box-shadow: 0 4px 14px -6px #101a2933;
}

.app-shell .site-switcher summary:focus-visible,
.app-shell .workspace-switcher summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.app-shell .site-switcher summary > .icon {
  width: 15px;
  height: 15px;
  color: var(--muted);
  transform: rotate(90deg);
  transition: transform .25s var(--motion-ease-out);
}

.app-shell .site-switcher[open] summary > .icon {
  transform: rotate(-90deg);
}

/* A site's initial is the coral tint, so it never reads as the workspace's chip. */
.app-shell .site-avatar {
  background: var(--tint-pink);
  color: var(--ink);
}

.app-shell .site-avatar[data-image] {
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
}

.app-shell .site-current small {
  overflow: hidden;
  max-width: 170px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell .site-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 40;
  width: 300px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 28px 60px -20px #101a2940, 0 2px 6px #101a290d;
}

.app-shell .site-menu-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 10px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7d848a;
}

.app-shell .site-menu-title span {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--mint);
  font-size: 11px;
  letter-spacing: 0;
}

.app-shell .site-menu ul {
  display: grid;
  gap: 2px;
}

.app-shell .site-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background-color .15s;
}

.app-shell .site-menu a:hover {
  background: var(--canvas);
}

.app-shell .site-menu a[aria-current="page"] {
  background: #eef2f8;
}

.app-shell .site-menu li a > .icon {
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--brand);
}

.app-shell .site-menu .workspace-current small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell .site-menu-actions {
  display: grid;
  gap: 2px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.app-shell .site-menu-plus {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 1px dashed #c4c9d2;
  border-radius: 8px;
  color: var(--brand);
}

.app-shell .site-menu-plus .icon {
  width: 16px;
  height: 16px;
}

.app-shell .site-menu-add[data-full] .site-menu-plus {
  color: var(--muted);
}

.app-shell .site-menu-manage {
  font-size: 13px;
  color: var(--muted);
}

.app-shell .site-menu-manage .icon {
  width: 16px;
  height: 16px;
  margin-inline: 7px;
}

.app-account {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  min-width: 0;
}

.app-user {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-size: 13px;
  color: #494d57;
}

.app-shell .user-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell .user-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e9ebef;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.app-signout button {
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: #31353f;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color .2s, background-color .2s;
}

.app-signout button:hover {
  border-color: #cccfd6;
  background: var(--canvas);
}

/* Body: navigation column + page */

.app-body {
  display: grid;
  grid-template-columns: var(--app-nav-width) minmax(0, 1fr);
}

.app-nav {
  position: sticky;
  top: var(--app-header-height);
  align-self: start;
  height: calc(100vh - var(--app-header-height));
  height: calc(100dvh - var(--app-header-height));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 14px 18px 20px;
  border-right: 1px solid var(--line);
}

/* The groups scroll inside the column when they don't fit; the site card stays pinned
   at the foot, so it never needs scrolling. */
.app-nav-groups {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin-inline: -6px;
  padding: 24px 6px 12px;
  scrollbar-width: thin;
}

.app-nav-group + .app-nav-group {
  margin-top: 20px;
}

/* The site and plan at the foot of the navigation. */
.app-nav-site {
  display: flex;
  align-items: center;
  flex: none;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}

.app-nav-site:hover {
  border-color: #c6c9d0;
  box-shadow: 0 8px 20px -16px #101a2955;
}

.app-nav-site:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.app-nav-site-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--canvas);
  color: var(--deep);
}

/* Fix batch G: the site's square avatar in the site and workspace chips. A square icon
   fills its chip; a wide logo is fitted inside it with padding on a neutral tile. */
.app-shell .workspace-avatar[data-image],
.app-nav-site-icon[data-image] {
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: none;
}

.chip-avatar {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chip-avatar[data-fit="fitted"] {
  padding: 3px;
  background: var(--canvas);
  object-fit: contain;
}

.app-nav-site-icon .icon {
  width: 16px;
  height: 16px;
}

.app-nav-site-text {
  display: grid;
  flex: 1;
  min-width: 0;
}

.app-nav-site-text strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-nav-site-text small {
  color: var(--muted);
  font-size: 12px;
}

.app-nav-site > .icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: #9ea2ac;
}

.app-nav-label {
  padding: 0 10px 7px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8e9198;
}

.app-nav-group ul {
  display: grid;
  gap: 2px;
}

.app-nav-group a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.3;
  color: #41454f;
  transition: background-color .15s, color .15s, box-shadow .15s;
}

.app-nav-group a:hover {
  background: #ffffffb3;
  color: var(--ink);
}

.app-nav-group a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

.app-nav-group a .icon {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  color: #82868f;
  transition: color .15s;
}

.app-nav-group a[aria-current="page"] {
  background: #fff;
  color: var(--deep);
  font-weight: 650;
  box-shadow: inset 0 0 0 1px var(--line), 0 6px 16px -10px #101a2940;
}

.app-nav-group a[aria-current="page"] .icon {
  color: var(--green);
}

/* A short accent bar beside the current page. */
.app-nav-group a[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: -20px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--green);
}

.app-main {
  min-width: 0;
  max-width: 1220px;
  padding: 32px 36px 80px;
}

.app-main-solo {
  max-width: 760px;
  margin-inline: auto;
}

/* Banners shared by every page */

.app-banner,
.app-notice {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 13px 16px;
  border: 1px solid;
  border-radius: 13px;
  font-size: 14px;
  line-height: 1.5;
}

.app-banner {
  --banner-bg: #fffaf0;
  --banner-line: #f1ddb0;
  --banner-ink: #66460f;
  --banner-icon-bg: #ffefcc;
  --banner-icon: #9a5800;
  background: var(--banner-bg);
  border-color: var(--banner-line);
  color: var(--banner-ink);
}

.app-banner[data-kind="demo"] {
  --banner-bg: #f0f6ff;
  --banner-line: #cfe0fa;
  --banner-ink: #1d4677;
  --banner-icon-bg: #dce9fd;
  --banner-icon: #1d64c4;
}

.app-banner[data-kind="paused"] {
  --banner-bg: #f5f6f7;
  --banner-line: #dee0e5;
  --banner-ink: #393d47;
  --banner-icon-bg: #e6e8ec;
  --banner-icon: #545964;
}

.app-shell .banner-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--banner-icon-bg);
  color: var(--banner-icon);
}

.app-shell .banner-icon .icon {
  width: 18px;
  height: 18px;
}

.app-banner form,
.app-banner-action {
  margin-left: auto;
}

.app-banner button,
.app-banner-action {
  flex-shrink: 0;
  padding: 8px 14px;
  border: 1px solid var(--banner-line);
  border-radius: 9px;
  background: #fff;
  color: var(--banner-ink);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  transition: background-color .2s, border-color .2s;
}

.app-banner button:hover,
.app-banner-action:hover {
  border-color: var(--banner-icon);
}

.app-notice {
  background: #eef2f9;
  border-color: #c3d2e8;
  color: #0b2b5a;
}

/* The message shares the first row with the icon; actions wrap below on phones. */
.app-banner p {
  flex: 1 1 200px;
  min-width: 0;
}

.app-notice .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

@media (prefers-reduced-motion: no-preference) {
  .app-shell .workspace-switcher[open] .workspace-menu,
  .app-shell .site-switcher[open] .site-menu {
    animation: app-menu-in .2s var(--motion-ease-out);
  }
}

@keyframes app-menu-in {
  from {
    opacity: 0;
    transform: translate3d(0, -6px, 0) scale(.98);
  }
}

/* Narrow screens: the column gives way to the section menu under the header. */

.app-section-menu {
  display: none;
}

@media (max-width: 1100px) {
  .app-body {
    display: block;
  }
  .app-nav {
    display: none;
  }
  .app-section-menu {
    position: relative;
    z-index: 25;
    display: block;
    border-bottom: 1px solid var(--line);
    background: #fff;
  }
  .app-section-menu summary {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    padding-inline: 24px;
    list-style: none;
    cursor: pointer;
  }
  .app-section-menu summary::-webkit-details-marker {
    display: none;
  }
  .app-section-menu summary:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: -2px;
  }
  .app-section-current {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 15px;
    font-weight: 650;
    color: var(--deep);
  }
  .app-section-current span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .app-section-current .icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--green);
  }
  .app-section-toggle {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 6px;
    margin-left: auto;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: #494d57;
    white-space: nowrap;
  }
  .app-section-toggle .icon {
    width: 13px;
    height: 13px;
    transform: rotate(90deg);
    transition: transform .25s var(--motion-ease-out);
  }
  .app-section-menu details[open] .app-section-toggle .icon {
    transform: rotate(-90deg);
  }
  .app-section-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 16px;
    left: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    max-height: calc(100vh - 150px);
    max-height: calc(100dvh - 150px);
    overflow-y: auto;
    padding: 16px 14px 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 28px 60px -20px #101a2940, 0 2px 6px #101a290d;
  }
  .app-section-panel .app-nav-group + .app-nav-group {
    margin-top: 0;
  }
  .app-section-panel .app-nav-group a:hover {
    background: var(--canvas);
  }
  .app-section-panel .app-nav-group a[aria-current="page"] {
    background: #eef2f8;
    box-shadow: none;
  }
  .app-section-panel .app-nav-group a[aria-current="page"]::before {
    display: none;
  }
  .app-main {
    max-width: none;
    padding: 28px 24px 72px;
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 1100px) {
  .app-section-menu details[open] .app-section-panel {
    animation: app-menu-in .2s var(--motion-ease-out);
  }
}

@media (max-width: 860px) {
  .app-shell .user-email {
    display: none;
  }
}

@media (max-width: 600px) {
  .app-shell {
    --app-header-height: 60px;
  }
  .app-header-bar {
    gap: 12px;
    padding-inline: 16px;
  }
  .app-brand span {
    display: none;
  }
  .app-shell .workspace-switcher {
    padding-left: 12px;
  }
  .app-shell .workspace-current strong {
    max-width: 130px;
  }
  .app-shell .workspace-menu,
  .app-shell .site-menu {
    position: fixed;
    top: 66px;
    left: 12px;
    right: 12px;
    width: auto;
  }
  /* The site's chip alone in the bar; its name and address are in the menu. The chips
     and Sign out keep their size; the workspace's name gives way first. */
  .app-shell .site-switcher summary {
    gap: 6px;
    padding-right: 8px;
  }
  .app-shell .site-current {
    display: none;
  }
  .app-shell .site-switcher,
  .app-shell .app-account {
    flex-shrink: 0;
  }
  .app-shell .user-avatar {
    display: none;
  }
  .app-section-menu summary {
    padding-inline: 16px;
  }
  .app-section-panel {
    right: 12px;
    left: 12px;
    grid-template-columns: minmax(0, 1fr);
  }
  .app-main {
    padding: 20px 16px 56px;
  }
  .app-banner {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .app-banner form,
  .app-banner-action {
    margin-left: 48px;
  }
}

@media (max-width: 370px) {
  .app-header-bar {
    gap: 10px;
  }
  .app-shell .workspace-switcher {
    padding-left: 10px;
  }
  .app-shell .workspace-current small {
    display: none;
  }
  .app-shell .workspace-current strong {
    max-width: 72px;
  }
  /* The site switcher is its chip alone here (the menu names every site), and beside it
     the workspace is its chip alone too (its menu names it). */
  .app-shell .site-switcher summary {
    padding: 4px;
  }
  .app-shell .site-switcher summary > .icon {
    display: none;
  }
  .app-header-bar:has(.site-switcher) .workspace-switcher .workspace-current {
    display: none;
  }
  .app-signout button {
    padding: 8px 10px;
  }
}

/* The placeholder page a surface shows until its builder ships it.
   Rendered by crates/web/src/pages/app/placeholder.rs. Owner: foundation. */

.surface {
  display: grid;
  gap: 16px;
}

.surface-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 36px 40px 34px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
}

/* The command center's glow and dotted texture, quieter. */
.surface-head::before,
.surface-head::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.surface-head::before {
  top: -60%;
  right: -10%;
  width: 52%;
  height: 190%;
  background: radial-gradient(closest-side, #e2eaf5 0%, #f2f5fa 50%, transparent 100%);
}

.surface-head::after {
  inset: 0 0 0 52%;
  background-image: radial-gradient(#00368717 1px, transparent 1.3px);
  background-size: 18px 18px;
  mask-image: radial-gradient(70% 90% at 92% 20%, #000 0%, transparent 72%);
}

.surface-head h1 {
  max-width: 720px;
  margin-top: 4px;
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 770;
  line-height: 1.06;
  letter-spacing: -.05em;
}

.surface-lede {
  max-width: 640px;
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

.surface-empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border: 1px dashed #cfd2d9;
  border-radius: 18px;
  background: #ffffffb3;
}

.surface-empty-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #e6ecf5;
  color: var(--deep);
}

.surface-empty-icon .icon {
  width: 22px;
  height: 22px;
}

.surface-empty-text h2 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
}

.surface-empty-text p {
  max-width: 620px;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.surface-empty-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 650;
  white-space: nowrap;
  transition: border-color .2s, box-shadow .2s;
}

.surface-empty-action:hover {
  border-color: #cccfd6;
  box-shadow: 0 6px 16px -10px #101a2940;
}

.surface-empty-action .icon {
  width: 15px;
  height: 15px;
  color: var(--green);
}

/* "Until then, find it here": where the surface's information lives today. */
.surface-meanwhile {
  padding: 22px 24px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.surface-meanwhile h2 {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7d848a;
}

.surface-meanwhile ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.surface-meanwhile-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--canvas);
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.surface-meanwhile-link:hover,
.surface-meanwhile-link:focus-visible {
  border-color: #b9c7dc;
  background: #fff;
  box-shadow: 0 10px 22px -16px #101a2959;
}

.surface-meanwhile-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #e6ecf5;
  color: var(--deep);
}

.surface-meanwhile-icon .icon {
  width: 18px;
  height: 18px;
}

.surface-meanwhile-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.surface-meanwhile-text strong {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.surface-meanwhile-text span {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}

.surface-meanwhile-go .icon {
  width: 16px;
  height: 16px;
  color: var(--green);
  transition: transform .2s var(--motion-ease-out);
}

.surface-meanwhile-link:hover .surface-meanwhile-go .icon {
  transform: translateX(3px);
}

.surface-upcoming {
  padding: 22px 24px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.surface-upcoming h2 {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7d848a;
}

.surface-upcoming ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.surface-upcoming li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--canvas);
  font-size: 14px;
  line-height: 1.5;
  color: #393d47;
}

.surface-upcoming .icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--green);
}

/* A slow, soft ring around the empty-state icon: the surface is waiting, not broken. */
@media (prefers-reduced-motion: no-preference) {
  .surface-empty-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 #0036873d;
    animation: surface-wait 3.2s var(--motion-ease-out) infinite;
  }
}

@keyframes surface-wait {
  0% {
    box-shadow: 0 0 0 0 #0036873d;
  }
  70%,
  100% {
    box-shadow: 0 0 0 12px #00368700;
  }
}

@media (max-width: 860px) {
  .surface-head {
    padding: 28px 26px 26px;
  }
  .surface-empty {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .surface-empty-action {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .surface-upcoming ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .surface-head {
    padding: 24px 20px 22px;
    border-radius: 18px;
  }
  .surface-empty {
    gap: 14px;
    padding: 18px;
  }
  .surface-upcoming,
  .surface-meanwhile {
    padding: 18px;
  }
  .surface-meanwhile ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Dashboard building blocks shared by the dashboard-core surfaces (Command Center,
   territory, score, activity, decisions, briefing, settings): surface headers, pills,
   moments, evidence links, empty states, flash notices, metric tiles, sparklines and
   buttons. Rendered by crates/web/src/pages/app/parts.rs. Owner: dashboard-core.
   Every class is prefixed `dash-`. */

[data-surface] {
  --dash-card-shadow: 0 1px 2px #101a290a, 0 18px 40px -30px #101a2940;
  --dash-card-shadow-hover: 0 1px 2px #101a290f, 0 26px 50px -28px #101a2955;
  --dash-positive-bg: #e9f7f0;
  --dash-positive-ink: #0b7a55;
  --dash-progress-bg: #e8f1fe;
  --dash-progress-ink: #1d5fb8;
  --dash-pending-bg: #f1eefd;
  --dash-pending-ink: #5543c0;
  --dash-attention-bg: #fff3e2;
  --dash-attention-ink: #9a5200;
  --dash-negative-bg: #fdeeee;
  --dash-negative-ink: #b42318;
  --dash-neutral-bg: #eff0f3;
  --dash-neutral-ink: #545964;
}

/* Surface header */

.dash-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 24px;
}

.dash-head-text {
  max-width: 720px;
}

.dash-head h1 {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.05;
  font-weight: 770;
  letter-spacing: -.05em;
}

.dash-lede {
  margin-top: 12px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
}

.dash-head-aside {
  flex-shrink: 0;
}

/* Pills, moments, evidence */

.dash-pill {
  --pill-bg: var(--dash-neutral-bg);
  --pill-ink: var(--dash-neutral-ink);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-ink);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.45;
  white-space: nowrap;
}

[data-surface] [data-tone="positive"] {
  --pill-bg: var(--dash-positive-bg);
  --pill-ink: var(--dash-positive-ink);
}

[data-surface] [data-tone="progress"] {
  --pill-bg: var(--dash-progress-bg);
  --pill-ink: var(--dash-progress-ink);
}

[data-surface] [data-tone="pending"] {
  --pill-bg: var(--dash-pending-bg);
  --pill-ink: var(--dash-pending-ink);
}

[data-surface] [data-tone="attention"] {
  --pill-bg: var(--dash-attention-bg);
  --pill-ink: var(--dash-attention-ink);
}

[data-surface] [data-tone="negative"] {
  --pill-bg: var(--dash-negative-bg);
  --pill-ink: var(--dash-negative-ink);
}

[data-surface] [data-tone="neutral"] {
  --pill-bg: var(--dash-neutral-bg);
  --pill-ink: var(--dash-neutral-ink);
}

.dash-when {
  font-size: 12px;
  color: #7f838c;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dash-evidence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 650;
  color: var(--deep);
  text-underline-offset: 3px;
}

.dash-evidence .icon {
  width: 14px;
  height: 14px;
  transition: transform .2s var(--motion-ease-out);
}

.dash-evidence:hover {
  text-decoration: underline;
}

.dash-evidence:hover .icon {
  transform: translateX(3px);
}

.dash-more {
  font-size: 13px;
  font-weight: 650;
  color: var(--deep);
}

.dash-more:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Buttons */

.dash-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .2s, border-color .2s, box-shadow .2s, transform .2s var(--motion-ease-out);
}

.dash-button .icon {
  width: 16px;
  height: 16px;
}

.dash-button:hover {
  background: var(--button-hover);
  box-shadow: 0 8px 20px -10px rgba(11, 13, 18, .5);
}

.dash-button:active {
  transform: translateY(1px);
}

.dash-button:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}

.dash-button[data-style="ghost"] {
  border-color: var(--line);
  background: #fff;
  color: #31353f;
}

.dash-button[data-style="ghost"]:hover {
  border-color: #c6c9d0;
  background: var(--canvas);
  box-shadow: none;
}

.dash-button[data-style="danger"] {
  border-color: #b42318;
  background: #b42318;
  color: #fff;
}

.dash-button[data-style="danger"]:hover {
  background: #8f1c13;
}

.dash-button[data-style="quiet"] {
  border-color: #d6d8de;
  background: #fff;
  color: var(--ink);
}

.dash-button[data-style="quiet"]:hover {
  border-color: #9ea2ac;
  background: #fff;
  box-shadow: none;
}

.dash-button[disabled] {
  opacity: .5;
  pointer-events: none;
}

/* Empty states and notices */

.dash-empty {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px 28px;
  border: 1px dashed #d2d5db;
  border-radius: 18px;
  background: #fff;
}

.dash-empty > div {
  flex: 1;
  min-width: 0;
}

.dash-empty h2 {
  font-size: 17px;
  letter-spacing: -.02em;
}

.dash-empty p {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.dash-empty-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--dash-positive-bg);
  color: var(--green);
}

.dash-empty-icon .icon {
  width: 22px;
  height: 22px;
}

.dash-flash {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 12px 16px;
  border: 1px solid;
  border-radius: 13px;
  background: var(--pill-bg);
  border-color: color-mix(in srgb, var(--pill-ink) 22%, transparent);
  color: var(--pill-ink);
  font-size: 14px;
  line-height: 1.5;
}

.dash-flash .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

/* Metric tiles */

.dash-metric {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 18px 20px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
}

.dash-metric-label {
  font-size: 13px;
  font-weight: 650;
  color: #50545f;
}

.dash-metric-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.dash-metric-value strong {
  font-size: 36px;
  font-weight: 770;
  line-height: 1.05;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}

.dash-metric-change {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-ink);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.dash-spark {
  display: block;
  width: 100%;
  height: 36px;
  margin-block: 4px 2px;
  overflow: visible;
}

.dash-spark-area {
  fill: #00368712;
}

.dash-spark-line {
  fill: none;
  stroke: var(--green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.dash-metric-caption {
  flex: 1;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.dash-metric .dash-evidence {
  margin-top: 4px;
  font-size: 12.5px;
}

/* Cards shared by several surfaces */

.dash-card {
  min-width: 0;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
}

.dash-card > h2,
.dash-card > header h2 {
  font-size: 17px;
  font-weight: 720;
  letter-spacing: -.025em;
}

@media (max-width: 860px) {
  .dash-head {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 600px) {
  .dash-empty {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 20px;
  }
  .dash-metric-value strong {
    font-size: 32px;
  }
  .dash-card {
    padding: 18px 18px;
  }
}

/* The 10-second undo after an answer (fix batch 2026-10-21 §4). It slides in, stays ten
   seconds and leaves; with reduced motion it simply stays (the server says when it is
   too late). */
.undo-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 32px);
  padding: 10px 12px 10px 16px;
  border-radius: 12px;
  background: #1b1f27;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 10px 30px rgb(18 21 28 / .22);
  animation: undo-toast 10s linear forwards;
}

.undo-toast form {
  margin: 0;
}

.undo-toast .dash-button {
  color: #fff;
  border-color: rgb(255 255 255 / .35);
  background: transparent;
}

@keyframes undo-toast {
  0% { opacity: 0; transform: translateY(8px); visibility: visible; }
  3%, 95% { opacity: 1; transform: none; visibility: visible; }
  100% { opacity: 0; transform: translateY(8px); visibility: hidden; }
}

@media (max-width: 600px) {
  .undo-toast {
    right: 16px;
    left: 16px;
    bottom: 16px;
  }
}

/* "· Flag it again" beside an answered item. */
.flag-again,
.checks-badge form {
  display: inline;
  margin: 0;
}

.checks-link-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* App-wide interface primitives (fix batch 2026-10-21 §5, §6, §10): underlined tabs, the ⋯
   menu, the shared work row and side panel (Plan and Calendar), the Plan's filter sidebar
   and the secondary navigation column of Settings. Rendered by
   crates/web/src/pages/app/{ui.rs,work/row.rs}; enhanced by crates/web/src/work_ui.rs.
   Owner: pages. Classes are prefixed `ui-`, `wrow-`, `wgroup-`, `wpanel-` and `wcard-`.
   No rows of pills: tabs are underlined, filters live in a sidebar. Motion runs only with
   prefers-reduced-motion: no-preference. */

[data-surface] {
  --ui-ink-soft: #40444e;
  --ui-faint: #8e929c;
  --ui-hover: #f6f7f8;
  --ui-select: var(--tint-blue);
  --ui-spring: cubic-bezier(.2, 1.18, .36, 1);
  --cat-articles: #5b5bd6;
  --cat-listings: #e08a00;
  --cat-community: #0e489f;
  --cat-fixes: #164ea3;
  --cat-setup: #64748b;
  --cat-materials: #db2777;
  --cat-outreach: #2563eb;
  --cat-experiments: #7c3aed;
  --cat-boosts: #b45309;
  --cat-deadlines: #e11d48;
}

[data-cat="articles"] { --cat: var(--cat-articles); }
[data-cat="listings"] { --cat: var(--cat-listings); }
[data-cat="community"] { --cat: var(--cat-community); }
[data-cat="fixes"] { --cat: var(--cat-fixes); }
[data-cat="setup"] { --cat: var(--cat-setup); }
[data-cat="materials"] { --cat: var(--cat-materials); }
[data-cat="outreach"] { --cat: var(--cat-outreach); }
[data-cat="experiments"] { --cat: var(--cat-experiments); }
[data-cat="boosts"] { --cat: var(--cat-boosts); }
[data-cat="deadlines"] { --cat: var(--cat-deadlines); }

[data-js-hide][hidden],
.wk-ui,
.wrow[hidden],
.wgroup[hidden],
.wpanel[hidden],
.wpanel-backdrop[hidden] {
  display: none;
}

/* Underlined tabs: the count belongs to the link. */

.ui-tabs {
  position: relative;
  min-width: 0;
  /* The row scrolls inside the bar on a phone; the sliding underline never reaches past
     the bar's edge (it once widened the page at 390 px on the last tab, "All"). */
  overflow-x: clip;
  border-bottom: 1px solid var(--line);
}

.ui-tabs ul {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.ui-tabs ul::-webkit-scrollbar {
  display: none;
}

.ui-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px 12px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
  border-radius: 8px 8px 0 0;
  transition: color .2s;
}

.ui-tab:hover {
  color: var(--ink);
}

.ui-tab:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: -2px;
}

.ui-tab[aria-current="page"] {
  color: var(--ink);
}

/* Without the island the current tab carries its own underline. */
.ui-tabs:not([data-ink]) .ui-tab[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset: auto 10px -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--green);
}

.ui-tabs-ink {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: var(--ink-w, 0);
  height: 2px;
  border-radius: 2px;
  background: var(--green);
  transform: translateX(var(--ink-x, 0));
  opacity: 0;
}

.ui-tabs[data-ink] .ui-tabs-ink {
  opacity: 1;
}

.ui-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--canvas);
  color: var(--ui-ink-soft);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ui-tab[aria-current="page"] .ui-count {
  background: var(--ui-select);
  color: var(--deep);
}

/* The same underlined tabs for a nav of plain links (`nav.ui-tabs-flat > a`): the lists'
   filters on Content, Activity, the checks, AI visibility, deadlines and measurement. */

.ui-tabs-flat {
  display: flex;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}

.ui-tabs-flat::-webkit-scrollbar {
  display: none;
}

/* Narrow screens: the tabs wrap onto a second line rather than scroll sideways. */
@media (max-width: 600px) {
  .ui-tabs-flat {
    flex-wrap: wrap;
    overflow: visible;
  }
}

.ui-tabs-flat > a {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 11px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
  text-decoration: none;
  transition: color .2s;
}

.ui-tabs-flat > a:hover {
  color: var(--ink);
}

.ui-tabs-flat > a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: -2px;
  border-radius: 8px 8px 0 0;
}

.ui-tabs-flat > a[aria-current] {
  color: var(--ink);
}

.ui-tabs-flat > a[aria-current]::after {
  content: "";
  position: absolute;
  inset: auto 10px -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--green);
}

.ui-tabs-flat > a .wk-count,
.ui-tabs-flat > a .deadline-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--canvas);
  color: var(--ui-ink-soft);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ui-tabs-flat > a[aria-current] .wk-count,
.ui-tabs-flat > a[aria-current] .deadline-count {
  background: var(--ui-select);
  color: var(--deep);
}

@media (prefers-reduced-motion: no-preference) {
  .ui-tabs-flat > a[aria-current]::after {
    animation: ui-ink-in .35s var(--motion-ease-out);
  }
}

@keyframes ui-ink-in {
  from {
    transform: scaleX(.3);
    opacity: 0;
  }
}

/* The ⋯ menu */

.ui-menu {
  position: relative;
}

.ui-menu > summary {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  transition: background-color .15s, color .15s;
}

.ui-menu > summary::-webkit-details-marker {
  display: none;
}

.ui-menu > summary:hover,
.ui-menu[open] > summary {
  background: #eff0f3;
  color: var(--ink);
}

.ui-menu > summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

.ui-menu > summary .icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.6;
}

.ui-menu-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  display: grid;
  gap: 2px;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px #101a2914, 0 22px 44px -18px #101a2940;
}

.ui-menu:not([open]) > .ui-menu-list {
  display: none;
}

.ui-menu-form {
  margin: 0;
}

.ui-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.ui-menu-item:hover,
.ui-menu-item:focus-visible {
  background: var(--ui-hover);
  outline: none;
}

.ui-menu-item .icon {
  width: 15px;
  height: 15px;
  color: var(--muted);
}

.ui-menu-move {
  display: grid;
  gap: 6px;
  padding: 8px 10px 6px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}

.ui-menu-move label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.ui-menu-move-row {
  display: flex;
  gap: 6px;
}

.ui-menu-move input {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
}

.ui-menu-move .dash-button {
  min-height: 34px;
  padding: 6px 12px;
}

/* Work rows (Plan and Calendar list) */

.wrows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wrow {
  --cols: 28px 30px minmax(0, 1fr) minmax(0, 190px) 118px 96px 34px;
  position: relative;
  display: grid;
  grid-template-columns: var(--cols);
  align-items: center;
  column-gap: 12px;
  min-height: 52px;
  padding: 8px 10px;
  border-bottom: 1px solid #eff0f3;
  border-radius: 10px;
  transition: background-color .15s, box-shadow .2s;
}

.wrow:hover {
  background: var(--ui-hover);
}

.wrow[data-selected] {
  background: var(--ui-select);
  box-shadow: inset 3px 0 0 var(--green);
}

.wrow-check {
  display: grid;
  place-items: center;
  margin: 0;
  position: relative;
  z-index: 2;
}

.wcheck {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1.5px solid #bcc0c8;
  border-radius: 6px;
  background: #fff;
  color: transparent;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s, transform .15s;
}

.wcheck .icon {
  width: 13px;
  height: 13px;
  stroke-width: 3;
}

.wcheck:hover,
.wcheck:focus-visible {
  border-color: var(--green);
  color: #9eb5d7;
  outline: none;
}

.wcheck:active {
  transform: scale(.9);
}

.wrow-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--cat, #64748b) 11%, #fff);
  color: var(--cat, #64748b);
}

.wrow-icon .icon {
  width: 15px;
  height: 15px;
}

.wrow-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.wrow-title {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The whole row opens the panel; the checkbox and the menu sit above. */
.wrow-title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 10px;
}

.wrow-title:focus-visible {
  outline: none;
}

.wrow-title:focus-visible::after {
  outline: 2px solid var(--green);
  outline-offset: -2px;
}

.wrow-detail {
  overflow: hidden;
  color: var(--muted);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wrow-cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--ui-ink-soft);
  font-size: 13px;
}

.wrow-cat > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wdot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cat, #94a3b8);
}

.wrow-when {
  color: var(--muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wrow-menu {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: end;
}

/* Each row's entrance animation makes it a stacking context, so a later row paints over
   an earlier row's open menu. Lift the row (and its group) that holds the open menu. */
.wrow:has(.ui-menu[open]) {
  z-index: 40;
}

.wgroup:has(.ui-menu[open]) {
  position: relative;
  z-index: 40;
}

/* Groups */

.wgroup + .wgroup {
  margin-top: 18px;
}

.wgroup-head,
.wgroup > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  padding: 8px 10px;
  font-size: 13.5px;
  font-weight: 750;
  color: var(--ink);
}

.wgroup > summary {
  border-radius: 10px;
  cursor: pointer;
  list-style: none;
}

.wgroup > summary::-webkit-details-marker {
  display: none;
}

.wgroup > summary:hover {
  background: var(--ui-hover);
}

.wgroup > summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

.wgroup-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.wgroup-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pill-ink, #94a3b8);
  box-shadow: 0 0 0 3px var(--pill-bg, #eff0f3);
}

.wgroup-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 6px;
  background: #eff0f3;
  color: var(--ui-ink-soft);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.wgroup-toggle {
  margin-left: auto;
  color: var(--muted);
}

.wgroup-toggle .icon {
  width: 16px;
  height: 16px;
  transform: rotate(90deg);
  transition: transform .25s var(--motion-ease-out);
}

.wgroup:not([open]) .wgroup-toggle .icon {
  transform: rotate(0deg);
}

/* The side panel (task details and the Calendar's day). */

.wpanel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #13161e14;
  opacity: 0;
  transition: opacity .3s;
}

.wpanel-backdrop[data-open] {
  opacity: 1;
}

.wpanel {
  position: fixed;
  top: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 61;
  display: flex;
  flex-direction: column;
  width: min(440px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 2px 6px #101a2912, 0 40px 80px -30px #101a2955;
  transform: translateX(calc(100% + 24px));
  transition: transform .5s var(--ui-spring);
}

.wpanel[data-open] {
  transform: none;
}

.wpanel-inner {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.wpanel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 22px 14px;
}

.wpanel-head h2 {
  font-size: 21px;
  font-weight: 760;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.wpanel-head h2:focus {
  outline: none;
}

.wpanel-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.wpanel-close {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--muted);
}

.wpanel-close:hover {
  background: #eff0f3;
  color: var(--ink);
}

.wpanel-close:focus-visible {
  outline: 2px solid var(--green);
}

.wpanel-cards {
  display: grid;
  align-content: start;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 22px 22px;
}

.wpanel-empty {
  padding: 18px;
  border: 1px dashed #d2d5db;
  border-radius: 14px;
  color: var(--muted);
  font-size: 14px;
}

.wpanel-full {
  margin: 0 22px 22px;
}

.wpanel-full .icon {
  width: 15px;
  height: 15px;
}

.wcard {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 14px 14px 12px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 3px 0 0 var(--pill-ink, var(--cat, #94a3b8));
}

.wcard-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wcard-head .ui-menu {
  margin-left: auto;
}

.wcard-time {
  margin-left: auto;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.wcard-time + .ui-menu {
  margin-left: 0;
}

.wcard-body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.wcard-body .wrow-check:empty {
  display: none;
}

.wcard-body .wrow-check {
  padding-top: 1px;
}

.wcard-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.wcard-text h3 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.wcard-text h3 a {
  color: var(--ink);
  text-underline-offset: 3px;
}

.wcard-text h3 a:hover {
  text-decoration: underline;
}

.wcard-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--cat, #64748b) 11%, #fff);
  color: var(--cat, #64748b);
}

.wcard-icon .icon {
  width: 13px;
  height: 13px;
}

.wcard-detail {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.wcard-notes {
  display: grid;
  gap: 8px;
  margin: 2px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--canvas);
}

.wcard-notes dt {
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ui-faint);
}

.wcard-notes dd {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ui-ink-soft);
}

.wcard-foot {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wcard-foot .wk-who,
.wcard-foot .card-who {
  font-size: 11.5px;
}

/* A day's panel lists its items compactly; one item's panel shows its reasons too. */
.wpanel-inner:not([data-single]) .wcard-notes {
  display: none;
}

/* A single item's panel names it in the header already. */
.wpanel-inner[data-single] .wcard-text h3 {
  display: none;
}

/* Phones: the panel is a full-screen sheet. */
@media (max-width: 640px) {
  .wpanel {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: 100%;
    height: 100dvh;
    border-radius: 0;
    transform: translateY(100%);
  }
  .wpanel-head {
    padding: 18px 16px 12px;
  }
  .wpanel-cards {
    padding: 4px 16px 16px;
  }
  .wpanel-full {
    margin: 0 16px 16px;
  }
}

/* The Plan's filter sidebar and toolbar */

.ui-sidebar {
  display: grid;
  align-content: start;
  gap: 22px;
}

.ui-side-title {
  margin: 0 0 6px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ui-faint);
}

.ui-side-list {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-side-link,
.ui-side-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 9px;
  color: var(--ui-ink-soft);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}

.ui-side-link:hover,
.ui-side-check:hover {
  background: var(--ui-hover);
  color: var(--ink);
}

.ui-side-link:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: -2px;
}

.ui-side-link[aria-current="page"] {
  background: var(--ui-select);
  color: var(--deep);
}

.ui-side-link > span:nth-child(2),
.ui-side-check > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.ui-side-link .ui-count,
.ui-side-check .ui-count {
  background: transparent;
  color: var(--ui-faint);
}

.ui-side-link[aria-current="page"] .ui-count {
  color: var(--deep);
}

.ui-side-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--green);
}

.ui-side-apply {
  margin: 6px 10px 0;
}

.ui-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ui-search {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;
}

.ui-search .icon {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--ui-faint);
  transform: translateY(-50%);
  pointer-events: none;
}

.ui-search input {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px 8px 36px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}

.ui-search input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px #00368722;
  outline: none;
}

.ui-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 4px 0 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--ui-ink-soft);
  font-size: 13.5px;
  font-weight: 650;
}

.ui-select .icon {
  width: 15px;
  height: 15px;
  color: var(--muted);
}

.ui-select select {
  min-height: 38px;
  padding: 0 8px 0 2px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.ui-select:focus-within {
  border-color: var(--green);
}

.ui-select select:focus {
  outline: none;
}

/* Segmented control for a small choice (the Calendar's Month / Week / List). */

.ui-segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--canvas);
}

.ui-segmented a {
  padding: 6px 14px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  transition: background-color .2s, color .2s, box-shadow .2s;
}

.ui-segmented a:hover {
  color: var(--ink);
}

.ui-segmented a[aria-current="page"] {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px #101a291a;
}

.ui-segmented a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

/* Settings: the secondary navigation column, the breadcrumb, the phone select. */

.ui-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--ui-faint);
}

.ui-crumbs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ui-crumbs a {
  color: var(--deep);
  font-weight: 650;
  text-underline-offset: 3px;
}

.ui-crumbs a:hover {
  text-decoration: underline;
}

.ui-crumbs [aria-current] {
  color: var(--ui-ink-soft);
  font-weight: 650;
}

.ui-subnav {
  position: sticky;
  top: calc(var(--app-header-height, 64px) + 24px);
  align-self: start;
  display: grid;
  gap: 18px;
}

.ui-subnav-title {
  padding: 0 10px;
  font-size: 15px;
  font-weight: 760;
  color: var(--ink);
}

.ui-subnav-label {
  margin-bottom: 4px;
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ui-faint);
}

.ui-subnav ul {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-subnav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 9px;
  color: var(--ui-ink-soft);
  font-size: 13.5px;
  font-weight: 600;
  transition: background-color .15s, color .15s;
}

.ui-subnav a .icon {
  width: 16px;
  height: 16px;
  color: var(--ui-faint);
}

.ui-subnav a:hover {
  background: var(--ui-hover);
  color: var(--ink);
}

.ui-subnav a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: -2px;
}

.ui-subnav a[aria-current="page"] {
  background: var(--ui-select);
  color: var(--deep);
}

.ui-subnav a[aria-current="page"] .icon {
  color: var(--green);
}

.ui-subnav-select {
  display: none;
}

@media (max-width: 1100px) {
  .ui-subnav {
    display: none;
  }
  .ui-subnav-select {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
  }
  .ui-subnav-select label {
    font-size: 13px;
    font-weight: 750;
    color: var(--muted);
  }
  .ui-subnav-select select {
    flex: 1;
    min-width: 0;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    font-weight: 650;
  }
}

/* Rows on narrow screens: title, pill and menu; the rest folds under the title. */
@media (max-width: 760px) {
  .wrow {
    --cols: 24px 28px minmax(0, 1fr) auto 30px;
    column-gap: 10px;
    padding: 10px 6px;
  }
  .wrow-cat,
  .wrow-who,
  .wrow-when {
    display: none;
  }
  .wrow-title {
    white-space: normal;
  }
  .wrow-detail {
    white-space: normal;
  }
}

/* Motion */

@media (prefers-reduced-motion: no-preference) {
  .ui-tabs[data-ink] .ui-tabs-ink {
    transition: transform .42s var(--ui-spring), width .42s var(--ui-spring);
  }

  .wrow[data-entering] {
    animation: wrow-in .42s var(--motion-ease-out) both;
    animation-delay: calc(var(--i, 0) * 28ms);
  }

  .wrows > .wrow {
    animation: wrow-in .5s var(--motion-ease-out) both;
  }

  .wrows > .wrow:nth-child(2) { animation-delay: 25ms; }
  .wrows > .wrow:nth-child(3) { animation-delay: 50ms; }
  .wrows > .wrow:nth-child(4) { animation-delay: 75ms; }
  .wrows > .wrow:nth-child(5) { animation-delay: 100ms; }
  .wrows > .wrow:nth-child(6) { animation-delay: 125ms; }
  .wrows > .wrow:nth-child(n + 7) { animation-delay: 150ms; }

  .wrow[data-selected] {
    animation: wrow-select .45s var(--motion-ease-out);
  }

  .wpanel-inner[data-enter-dir="next"] {
    animation: wpanel-from-right .4s var(--motion-ease-out) both;
  }

  .wpanel-inner[data-enter-dir="prev"] {
    animation: wpanel-from-left .4s var(--motion-ease-out) both;
  }

  .wpanel[data-open] .wcard {
    animation: wrow-in .45s var(--motion-ease-out) both;
  }

  .wpanel[data-open] .wcard:nth-child(2) { animation-delay: 40ms; }
  .wpanel[data-open] .wcard:nth-child(3) { animation-delay: 80ms; }
  .wpanel[data-open] .wcard:nth-child(4) { animation-delay: 120ms; }
  .wpanel[data-open] .wcard:nth-child(n + 5) { animation-delay: 160ms; }

  [data-tick] {
    animation: ui-tick .45s var(--ui-spring);
  }

  [data-live-pill][data-morph="out"] {
    transform: scale(.86);
    opacity: .35;
    transition: transform .16s ease-in, opacity .16s ease-in;
  }

  [data-live-pill][data-morph="in"] {
    animation: pill-morph-in .42s var(--ui-spring);
    transition: background-color .3s, color .3s;
  }

  .ui-menu[open] .ui-menu-list {
    animation: ui-menu-in .18s var(--motion-ease-out);
  }

  .wgroup::details-content {
    block-size: 0;
    opacity: 0;
    transition: block-size .32s var(--motion-ease-out), opacity .26s ease,
      content-visibility .32s allow-discrete;
  }

  /* Clipped only while folding, so an open row's ⋯ menu is never cut off. */
  .wgroup:not([open])::details-content {
    overflow: clip;
  }

  .wgroup[open]::details-content {
    block-size: auto;
    opacity: 1;
  }

  .wcheck {
    transition: border-color .15s, background-color .2s, color .2s, transform .2s var(--ui-spring);
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 640px) {
  .wpanel {
    transition: transform .42s var(--motion-ease-out);
  }
}

:root {
  interpolate-size: allow-keywords;
}

@keyframes wrow-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes wrow-select {
  from {
    box-shadow: inset 0 0 0 var(--green), 0 0 0 4px #00368700;
  }
  40% {
    box-shadow: inset 3px 0 0 var(--green), 0 0 0 4px #00368726;
  }
}

@keyframes wpanel-from-right {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
}

@keyframes wpanel-from-left {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
}

@keyframes ui-tick {
  0% {
    transform: translateY(-4px);
    opacity: .2;
  }
}

@keyframes pill-morph-in {
  from {
    transform: scale(.86);
    opacity: .35;
  }
}

@keyframes ui-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(.98);
  }
}

/* The evidence-first card and founder-step cards (cards-ux). Rendered by
   crates/web/src/components/cards.rs on Decisions, the Command Center, the Score page and
   the Monday briefing, so every rule is scoped by the component's own classes
   (card-, step-, copy-). Values are never truncated: long text wraps. */

/* Who does it */

.card-who {
  --who-bg: var(--dash-neutral-bg);
  --who-ink: var(--dash-neutral-ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: var(--who-bg);
  color: var(--who-ink);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.card-who .icon {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
}

.card-who[data-who="outpost"] {
  --who-bg: var(--dash-positive-bg);
  --who-ink: var(--dash-positive-ink);
}

.card-who[data-who="founder"] {
  --who-bg: var(--dash-attention-bg);
  --who-ink: var(--dash-attention-ink);
}

.card-who[data-who="unlock"] {
  --who-bg: var(--dash-progress-bg);
  --who-ink: var(--dash-progress-ink);
}

/* Copy fields: the whole value, selectable, with a copy button once interactive */

.copy-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  margin-top: 8px;
}

.copy-label {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #70747d;
}

.copy-body {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 9px 9px 9px 12px;
  border: 1px solid #dfe2e7;
  border-radius: 11px;
  background: #f8f8f9;
}

.copy-value {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: all;
}

.copy-value:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

.copy-button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid #d6d8de;
  border-radius: 8px;
  background: #fff;
  color: #31353f;
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}

.copy-button[hidden] {
  display: none;
}

.copy-button .icon {
  width: 13px;
  height: 13px;
}

.copy-button:hover {
  border-color: #9ea2ac;
}

.copy-button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.copy-button[data-copied] {
  border-color: #9fb6d9;
  background: var(--dash-positive-bg);
  color: var(--dash-positive-ink);
}

/* A founder step in full */

.step-card {
  scroll-margin-top: 90px;
  min-width: 0;
  padding: 24px 26px 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
}

.step-card:target {
  border-color: #9fb6d9;
  box-shadow: 0 0 0 4px #124ea71f, var(--dash-card-shadow);
}

.step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
}

.step-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dash-attention-ink);
}

.step-kicker .icon {
  width: 15px;
  height: 15px;
}

.step-asked {
  font-size: 12px;
  color: #7f838c;
}

.step-card h2 {
  margin-top: 12px;
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 720;
  line-height: 1.25;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}

.step-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.step-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 650;
  color: #41454f;
}

.step-time .icon {
  width: 13px;
  height: 13px;
}

.step-why {
  max-width: 72ch;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: #31353f;
}

.step-only {
  max-width: 72ch;
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

.step-only strong {
  color: #41454f;
  font-weight: 650;
}

.step-status {
  --status-bg: var(--dash-neutral-bg);
  --status-ink: var(--dash-neutral-ink);
  display: grid;
  gap: 2px;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--status-bg);
  color: var(--status-ink);
  font-size: 13.5px;
  line-height: 1.5;
}

.step-status[data-tone="progress"] {
  --status-bg: var(--dash-progress-bg);
  --status-ink: var(--dash-progress-ink);
}

.step-status[data-tone="negative"] {
  --status-bg: var(--dash-negative-bg);
  --status-ink: var(--dash-negative-ink);
}

.step-status[data-tone="positive"] {
  --status-bg: var(--dash-positive-bg);
  --status-ink: var(--dash-positive-ink);
}

.step-status[data-tone="pending"] {
  --status-bg: var(--dash-pending-bg);
  --status-ink: var(--dash-pending-ink);
}

/* The exact items */

.step-items {
  margin-top: 18px;
  border: 1px solid #e8e9ec;
  border-radius: 15px;
  overflow: hidden;
}

.step-items > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 14px;
  padding: 12px 16px;
  border-bottom: 1px solid #e8e9ec;
  background: #fbfcfc;
}

.step-items h3 {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.step-items h3 a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.step-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 650;
  color: var(--green);
}

.step-more .icon {
  width: 13px;
  height: 13px;
}

.step-more:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.step-item-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-item {
  min-width: 0;
  padding: 14px 16px 16px;
}

.step-item + .step-item {
  border-top: 1px solid #eff0f3;
}

.step-item-head {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.step-item-mark {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--dash-negative-bg);
  color: var(--dash-negative-ink);
}

.step-item-mark .icon {
  width: 12px;
  height: 12px;
}

[data-status="answered"] > .step-item-head .step-item-mark,
[data-status="answered"] > .step-item-mark,
[data-status="pass"] > .step-item-mark {
  background: var(--dash-positive-bg);
  color: var(--dash-positive-ink);
}

.step-item-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 680;
  overflow-wrap: anywhere;
}

.step-item-view {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--green);
}

.step-item-view .icon {
  width: 12px;
  height: 12px;
  transform: rotate(-45deg);
}

.step-item-reason,
.step-item-seen,
.step-item-answered {
  margin-top: 5px;
  padding-left: 31px;
  font-size: 13px;
  line-height: 1.5;
  color: #41454f;
}

.step-item-seen {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.step-item-answered {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--dash-positive-ink);
  font-weight: 600;
}

.step-item-answered .icon {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  margin-top: 3px;
}

.step-item .copy-field,
.step-item-actions {
  margin-left: 31px;
}

.step-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.step-bulk {
  margin-top: 10px;
}

/* Answers with a reason: a disclosure with a small form */

.step-reason {
  min-width: 0;
}

.step-reason > summary {
  list-style: none;
  cursor: pointer;
}

.step-reason > summary::-webkit-details-marker {
  display: none;
}

.step-item-actions .step-reason > summary {
  min-height: 32px;
  padding: 6px 11px;
  border-radius: 9px;
  font-size: 12.5px;
}

.step-reason[open] {
  flex-basis: 100%;
}

.step-reason[open] > summary {
  border-color: #9ea2ac;
  background: var(--canvas);
}

.step-reason-form {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid #e8e9ec;
  border-radius: 13px;
  background: #fbfcfc;
}

.step-reason-form label,
.step-done-link label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #41454f;
}

.step-reason-form input,
.step-done-link input,
.step-later select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #d2d5db;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

.step-reason-form input:focus-visible,
.step-done-link input:focus-visible,
.step-later select:focus-visible {
  outline: 2px solid var(--success);
  outline-offset: 1px;
  border-color: var(--success);
}

.step-reason-form .dash-button {
  justify-self: start;
}

/* How to do it */

.step-how {
  margin-top: 20px;
}

.step-how h3 {
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #70747d;
}

.step-lines {
  display: grid;
  gap: 14px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step-line;
}

.step-lines > li {
  position: relative;
  min-width: 0;
  padding-left: 38px;
  counter-increment: step-line;
}

.step-lines > li::before {
  content: counter(step-line);
  position: absolute;
  top: -1px;
  left: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eef1f6;
  color: var(--deep);
  font-size: 12.5px;
  font-weight: 750;
}

.step-lines p {
  font-size: 14.5px;
  line-height: 1.55;
  color: #31353f;
  overflow-wrap: anywhere;
}

.step-link {
  margin-top: 8px;
  white-space: normal;
  text-align: left;
}

.step-link .icon {
  transform: rotate(-45deg);
}

.step-domain {
  margin: 14px 0 0 38px;
}

.step-verify,
.step-unlock {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 13px;
  font-size: 13.5px;
  line-height: 1.55;
}

.step-verify {
  background: var(--dash-positive-bg);
  color: #0f2e5c;
}

.step-unlock {
  margin-top: 8px;
  background: #f4f7fb;
  color: #3b4253;
}

.step-unlock em {
  font-style: normal;
  color: var(--muted);
}

.step-verify .icon,
.step-unlock .icon {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 3px;
}

/* The five answers */

.step-answers {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #eff0f3;
}

.step-done,
.step-skip,
.step-later {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  min-width: 0;
}

.step-done-link {
  flex: 1 1 100%;
}

.step-done-link label {
  flex: 1 1 260px;
}

.step-later label {
  width: auto;
}

.step-later select {
  width: auto;
  min-height: 40px;
}

/* The ranked list (Command Center, briefing) */

.step-list {
  min-width: 0;
}

.step-list > header h2 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.step-list > header h2 a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.step-list > header p {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.step-list-clear {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13.5px;
  color: #41454f;
}

.step-list-clear .icon {
  width: 16px;
  height: 16px;
  color: var(--green);
}

.step-rows {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.step-row a {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid #e8e9ec;
  border-radius: 14px;
  background: #fbfcfc;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.step-row a:hover {
  border-color: #d2d5db;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
}

.step-row a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.step-row[data-impact="high"] a {
  border-left: 3px solid #e8a04a;
}

.step-row-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.step-row-text strong {
  font-size: 14px;
  font-weight: 680;
  line-height: 1.35;
  letter-spacing: -.01em;
}

.step-row-text small {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

.step-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.step-folded {
  margin-top: 10px;
}

.step-folded > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
  color: var(--green);
}

/* A score check as an evidence-first card */

.card-check {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
}

.card-check > header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}

.card-check h3 {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.card-check h3 a:hover,
.card-check-count:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.card-check-count {
  font-size: 13px;
  font-weight: 650;
  color: var(--dash-negative-ink);
}

.card-check-cost {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--muted);
}

.card-check-items {
  display: grid;
  gap: 2px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.card-check-items li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
  padding: 8px 0;
}

.card-check-items li + li {
  border-top: 1px solid #eff0f3;
}

.card-check-item-text {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.card-check-item-text strong {
  font-size: 13.5px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.card-check-item-text small {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

.card-check > footer {
  margin-top: 12px;
}

.card-check > footer p {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.card-check-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.card-check-actions .dash-button {
  min-height: 36px;
  padding: 7px 13px;
  font-size: 13.5px;
}

@media (max-width: 560px) {
  .step-card {
    padding: 18px 16px 16px;
    border-radius: 16px;
  }

  .step-items > header,
  .step-item {
    padding-right: 12px;
    padding-left: 12px;
  }

  .step-item-reason,
  .step-item-seen,
  .step-item-answered {
    padding-left: 0;
  }

  .step-item .copy-field,
  .step-item-actions {
    margin-left: 0;
  }

  .step-lines > li {
    padding-left: 34px;
  }

  .step-domain {
    margin-left: 0;
  }

  .copy-body {
    flex-direction: column;
    align-items: stretch;
  }

  .copy-button {
    align-self: flex-start;
  }

  .step-answers > *,
  .step-answers .dash-button {
    flex: 1 1 auto;
  }

  .card-check {
    padding: 16px 14px;
  }
}

/* The calm pass: why only you, what Outpost found and the steps fold under one "Why?"
   (components/calm.rs); the card leads with its title, why and the way to do it. */
.step-details {
  margin-top: 12px;
}

.step-details > .calm-why-body {
  display: block;
  padding-top: 2px;
}

.step-details > .calm-why-body > .step-only {
  margin-top: 4px;
}

/* Shared by the growth-lab surfaces (experiments, assets, AI visibility, guarantee):
   the header, notices, the plan lock, empty states, buttons and section groups.
   Rendered by crates/web/src/pages/app/lab_kit.rs. Owner: dashboard-labs. The header builds
   on .surface-head from placeholder.css. */

.lab {
  --lab-ink-soft: #393d47;
  --lab-card-radius: 20px;
  --lab-shadow: 0 1px 0 #101a290a, 0 18px 40px -28px #101a2940;
  gap: 18px;
}

/* Lists and definition lists lay out as cards, chips and stats here: no user-agent
   numbers or indents. */
.lab dd {
  margin: 0;
}

.lab ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Header: the text on the left, an aside (chips, actions, a headline number) on the right. */

.lab-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 28px;
}

.lab-head-text {
  flex: 1 1 440px;
  min-width: 0;
  max-width: 700px;
}

.lab-head-aside {
  display: grid;
  justify-items: end;
  gap: 14px;
  flex-shrink: 0;
}

.lab-principles {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.lab-principles li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px 6px 9px;
  border: 1px solid #d5deeb;
  border-radius: 999px;
  background: #f3f6fb;
  color: var(--deep);
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
}

.lab-principles .icon {
  width: 14px;
  height: 14px;
}

.lab-summary {
  display: flex;
  gap: 8px;
}

.lab-summary div {
  display: grid;
  min-width: 82px;
  padding: 10px 14px 9px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.lab-summary dt {
  order: 2;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  text-transform: capitalize;
}

.lab-summary dd {
  order: 1;
  font-size: 24px;
  font-weight: 760;
  line-height: 1.1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.lab-summary [data-kind="running"] dd {
  color: var(--green);
}

/* Notices after a redirect. */

.lab-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid #cdd9eb;
  border-radius: 14px;
  background: #f1f5fa;
  color: var(--deep);
  font-size: 14px;
  font-weight: 560;
  line-height: 1.45;
}

.lab-notice[data-tone="problem"] {
  border-color: #f1d3c4;
  background: #fdf5f0;
  color: #8a3b16;
}

.lab-notice .icon {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
}

/* Buttons. */

.lab-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid #d2d5dc;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .2s var(--motion-ease-out), background-color .2s;
}

.lab-button:hover {
  border-color: #bbbfc8;
  box-shadow: 0 8px 18px -12px #101a2959;
  transform: translateY(-1px);
}

.lab-button:focus-visible {
  outline: 3px solid #00368759;
  outline-offset: 2px;
}

.lab-button[data-emphasis="primary"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
  box-shadow: inset 0 1px 0 #ffffff1f, 0 10px 22px -14px rgba(11, 13, 18, .6);
}

.lab-button[data-emphasis="primary"]:hover {
  border-color: var(--button-hover);
  background: var(--button-hover);
  box-shadow: inset 0 1px 0 #ffffff1f, 0 14px 26px -14px rgba(11, 13, 18, .65);
}

.lab-button .icon {
  width: 15px;
  height: 15px;
}

.lab-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-self: start;
  padding: 4px 2px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 620;
}

.lab-back .icon {
  width: 14px;
  height: 14px;
  transform: rotate(180deg);
}

.lab-back:hover {
  color: var(--deep);
}

/* The plan does not include the surface. */

.lab-lock {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 26px 28px;
  border: 1px solid #dddfe3;
  border-radius: var(--lab-card-radius);
  background: linear-gradient(120deg, #fff 30%, #f2f5fa);
}

.lab-lock-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #e3eaf4;
  color: var(--deep);
}

.lab-lock-icon .icon {
  width: 24px;
  height: 24px;
}

.lab-lock h2 {
  font-size: 19px;
  font-weight: 720;
  letter-spacing: -.02em;
}

.lab-lock p {
  max-width: 620px;
  margin-top: 5px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

.lab-lock .lab-lock-current {
  color: var(--ink);
  font-weight: 600;
}

/* Honest empty states. */

.lab-empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border: 1px dashed #cfd2d9;
  border-radius: 18px;
  background: #ffffffb3;
}

.lab-empty-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #e6ecf5;
  color: var(--deep);
}

.lab-empty-icon .icon {
  width: 21px;
  height: 21px;
}

.lab-empty h3 {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.lab-empty p {
  max-width: 640px;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

/* Sections of a surface. */

.lab-group {
  display: grid;
  gap: 12px;
}

.lab-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #72757d;
}

.lab-group-title span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ebecef;
  color: var(--ink);
  font-size: 11.5px;
  letter-spacing: 0;
}

.lab-group-note {
  margin-top: -6px;
  font-size: 13.5px;
  color: var(--muted);
}

@media (max-width: 1100px) {
  .lab-head {
    flex-direction: column;
    align-items: stretch;
  }
  /* In a column the 440px basis would become the text's height (empty space under it). */
  .lab-head-text {
    flex: none;
  }
  .lab-head-aside {
    justify-items: start;
  }
  .lab-principles {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .lab-lock,
  .lab-empty {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .lab-lock .lab-button,
  .lab-empty .lab-button {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .lab-summary {
    flex-wrap: wrap;
  }
  .lab-summary div {
    min-width: 0;
    flex: 1 1 0;
  }
}

@media (max-width: 420px) {
  .lab-lock,
  .lab-empty {
    padding: 18px;
  }
  .lab-lock-icon {
    width: 44px;
    height: 44px;
  }
}

/* Growth Command Center (/app/<workspace>). Owner: dashboard-core.
   Rendered by crates/web/src/pages/app/command_center/ (live updates through the WorkUi
   island); the shell around it is pages/app/shell.css. Layout: the greeting with the date
   range, five tiles, then "Needs your attention" beside "Outpost is working", recent
   results, upcoming this week and the growth trend, and "What's working". */

.command-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 40px 40px 36px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 1px 2px #101a290a, 0 24px 60px -44px #101a2959;
}

/* A soft green glow and a dotted texture in the corner. */
.command-hero::before,
.command-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.command-hero::before {
  top: -45%;
  right: -12%;
  width: 62%;
  height: 170%;
  background: radial-gradient(closest-side, #d7e2f2 0%, #eef2f9 45%, transparent 100%);
}

.command-hero::after {
  inset: 0 0 0 45%;
  background-image: radial-gradient(#0036871f 1px, transparent 1.3px);
  background-size: 18px 18px;
  mask-image: radial-gradient(70% 90% at 90% 20%, #000 0%, transparent 70%);
}

.command-intro {
  max-width: 680px;
}

.eyebrow-divider {
  margin-inline: 6px;
}

.command-hero h1 {
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.02;
  font-weight: 780;
  letter-spacing: -.055em;
}

.command-hero h1 span {
  background: linear-gradient(100deg, var(--deep) 0%, #124ea7 50%, var(--deep) 100%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.command-lede {
  max-width: 620px;
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
}

.command-side {
  display: grid;
  flex-shrink: 0;
  gap: 10px;
  justify-items: stretch;
  min-width: 250px;
}

.command-status,
.command-guarantee {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  border: 1px solid #d3ddeb;
  border-radius: 15px;
  background: #f3f6fae6;
}

.command-status strong,
.command-guarantee strong {
  display: block;
  font-size: 14px;
  letter-spacing: -.01em;
}

.command-status small,
.command-guarantee small {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.command-status[data-tone="neutral"] {
  border-color: var(--line);
  background: #f8f8f9e6;
}

.command-status[data-tone="neutral"] .status-pulse {
  background: #8f939c;
}

.command-guarantee {
  border-color: var(--line);
  background: #fffffff0;
  transition: border-color .2s, box-shadow .2s;
}

.command-guarantee:hover {
  border-color: #b9c9e0;
  box-shadow: 0 10px 24px -16px #00286366;
}

.command-guarantee > .icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--pill-ink);
}

[data-surface="command-center"] .status-pulse {
  position: relative;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
}

[data-surface="command-center"] .command-status[data-tone="progress"] .status-pulse {
  background: #2f7be6;
}

/* The working Command Center (fix batch 2026-10-21 §12): range picker, five stat tiles,
   "Needs your attention", "Outpost is working · Live", recent results, upcoming this
   week, the growth trend and "What's working". Light theme; layout ideas from the dark
   v2 mock. Every count is a link. */

.cc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.cc-range {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.cc-range .ui-select {
  flex: 1;
  background: #fffffff0;
}

.cc-range-dates {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Tiles */

.cc-tiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.cc-tile {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label label"
    "number spark"
    "change change"
    "source source"
    "note note";
  align-items: end;
  gap: 2px 10px;
  min-width: 0;
  padding: 16px 16px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
  transition: box-shadow .25s, transform .25s var(--motion-ease-out), border-color .2s;
}

.cc-tile:hover {
  border-color: #ced1d9;
  box-shadow: var(--dash-card-shadow-hover);
}

.cc-tile-label {
  grid-area: label;
  margin-bottom: 6px;
  color: #545964;
  font-size: 13px;
  font-weight: 650;
}

.cc-tile-number {
  grid-area: number;
  justify-self: start;
  border-radius: 8px;
  color: var(--ink);
}

.cc-tile-number strong {
  display: inline-block;
  font-size: 32px;
  font-weight: 780;
  line-height: 1.05;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.cc-tile-number:hover strong {
  color: var(--deep);
}

.cc-tile-number:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

/* The whole tile opens its items. */
.cc-tile-number::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
}

.cc-tile-change {
  grid-area: change;
  color: var(--pill-ink, var(--muted));
  font-size: 12.5px;
  font-weight: 700;
}

.cc-spark {
  grid-area: spark;
  width: 96px;
  height: 36px;
  overflow: visible;
}

.cc-spark[data-kind="bars"] rect {
  fill: #124ea7;
  opacity: .82;
}

.cc-spark[data-kind="bars"] rect:last-child {
  opacity: 1;
}

.cc-spark-line {
  fill: none;
  stroke: var(--green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.cc-spark-area {
  fill: #00368714;
}

.cc-tile-source {
  grid-area: source;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  color: #7f838c;
  font-size: 11.5px;
  font-weight: 600;
}

.cc-tile-source .icon {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  color: var(--green);
}

.cc-tile-note {
  grid-area: note;
  margin-top: 4px;
  color: #7f838c;
  font-size: 11.5px;
  line-height: 1.45;
}

.cc-tile[data-connect] {
  border-style: dashed;
  box-shadow: none;
}

.cc-tile-connect {
  grid-area: number / number / change / spark;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--canvas);
  color: var(--deep);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
}

.cc-tile-connect:hover {
  background: #e9eff7;
}

.cc-tile-connect .icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.cc-tile-none {
  grid-area: number;
  color: var(--muted);
  font-size: 14px;
}

/* Panels */

.cc-row {
  display: grid;
  gap: 16px;
  align-items: start;
}

.cc-row-now {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}

/* Each column stacks its own panels, so neither leaves a hole beside a tall card. */
.cc-col {
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
}

.cc-panel {
  min-width: 0;
  padding: 18px 20px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
}

.cc-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.cc-panel-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -.02em;
}

.cc-panel-head h2 .icon {
  width: 18px;
  height: 18px;
  color: #b25e00;
}

.cc-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--deep);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.cc-more:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cc-more .icon {
  width: 13px;
  height: 13px;
}

.cc-count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: 7px;
  background: var(--dash-attention-bg);
  color: var(--dash-attention-ink);
  font-size: 12.5px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.cc-count:hover {
  box-shadow: 0 0 0 2px #f3c68a;
}

.cc-clear {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  background: var(--canvas);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.cc-clear .icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--green);
}

/* Needs your attention */

.cc-attention {
  border-color: #f3dcc0;
  background: linear-gradient(180deg, #fffaf4, #fff 120px);
}

.cc-attention-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e07a00;
  box-shadow: 0 0 0 4px #fde9d2;
}

.cc-attention-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-attention-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #eee3d6;
  border-radius: 14px;
  background: #fff;
}

.cc-attention-item[data-question] {
  display: block;
  padding: 0;
  border: 0;
  background: none;
}

.cc-attention-item[data-question] .qplain {
  box-shadow: none;
}

.cc-attention-dismiss {
  display: flex;
  justify-content: flex-end;
  margin-top: -40px;
  padding: 0 14px 12px;
}

.cc-attention-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #fff1e0;
  color: #b25e00;
}

.cc-attention-icon .icon {
  width: 18px;
  height: 18px;
}

.cc-attention-text {
  display: grid;
  justify-items: start;
  gap: 3px;
  min-width: 0;
}

.cc-attention-text strong {
  font-size: 14.5px;
  line-height: 1.35;
}

.cc-attention-text > span:not(.dash-pill) {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.cc-attention-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cc-attention-actions .dash-button,
.cc-dismiss .dash-button {
  min-height: 36px;
  padding: 7px 14px;
}

.cc-dismiss {
  margin: 0;
}

/* Outpost is working */

.cc-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--dash-positive-bg);
  color: var(--dash-positive-ink);
  font-size: 12px;
  font-weight: 750;
}

.cc-live-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
}

.cc-job {
  display: grid;
  gap: 10px;
}

.cc-job-head {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
}

.cc-job-head strong {
  display: block;
  font-size: 15px;
  line-height: 1.35;
}

.cc-job-head small {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
}

.cc-job-head:hover strong {
  color: var(--deep);
}

.cc-job-ring {
  position: relative;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #e8f1fe;
  color: #1d5fb8;
}

.cc-job-ring[data-idle] {
  background: var(--canvas);
  color: var(--muted);
}

.cc-job-ring .icon {
  width: 18px;
  height: 18px;
}

.cc-job-progress {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #eff0f3;
}

.cc-job-progress span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #124ea7, var(--green));
  transition: width .6s var(--motion-ease-out);
}

.cc-job-progress span[data-progress="0/2"],
.cc-job-progress span[data-progress="0/3"],
.cc-job-progress span[data-progress="0/5"] { width: 4%; }
.cc-job-progress span[data-progress="1/2"] { width: 50%; }
.cc-job-progress span[data-progress="2/2"],
.cc-job-progress span[data-progress="3/3"],
.cc-job-progress span[data-progress="5/5"] { width: 100%; }
.cc-job-progress span[data-progress="1/3"] { width: 33%; }
.cc-job-progress span[data-progress="2/3"] { width: 67%; }
.cc-job-progress span[data-progress="1/5"] { width: 20%; }
.cc-job-progress span[data-progress="2/5"] { width: 40%; }
.cc-job-progress span[data-progress="3/5"] { width: 60%; }
.cc-job-progress span[data-progress="4/5"] { width: 80%; }

.cc-job-count {
  color: var(--muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.cc-steps {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: #7f838c;
  font-size: 13.5px;
}

.cc-steps li + li::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 9px;
  width: 2px;
  height: 14px;
  background: #e5e6ea;
}

.cc-step-mark {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid #d6d8de;
  border-radius: 50%;
  background: #fff;
  color: transparent;
}

.cc-step-mark .icon {
  width: 11px;
  height: 11px;
  stroke-width: 3.2;
}

.cc-steps li[data-state="done"] {
  color: var(--ink);
}

.cc-steps li[data-state="done"] .cc-step-mark {
  border-color: var(--success);
  background: var(--success);
  color: #fff;
}

.cc-steps li[data-state="current"] {
  color: var(--ink);
  font-weight: 650;
}

.cc-steps li[data-state="current"] .cc-step-mark {
  border-color: var(--green);
  box-shadow: 0 0 0 4px #00368722;
}

.cc-idle {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
}

.cc-idle a {
  color: var(--ink);
}

.cc-idle a:hover {
  color: var(--deep);
}

.cc-idle p {
  color: var(--muted);
  font-size: 14px;
}

/* Recent results, upcoming */

.cc-result-list,
.cc-upcoming-list,
.cc-insight-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-result-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 6px;
  border-radius: 10px;
}

a.cc-result-link:hover {
  background: #f6f7f8;
}

.cc-result-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--pill-bg, var(--canvas));
  color: var(--pill-ink, var(--muted));
}

.cc-result-icon .icon {
  width: 15px;
  height: 15px;
}

.cc-result-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.cc-result-text strong {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-result-text small,
.cc-result-text .dash-when {
  color: #7f838c;
  font-size: 12px;
}

.cc-upcoming-list a {
  display: grid;
  grid-template-columns: 56px 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 6px;
  border-radius: 10px;
}

.cc-upcoming-list a:hover {
  background: #f6f7f8;
}

.cc-day {
  display: inline-grid;
  place-items: center;
  min-height: 28px;
  border-radius: 8px;
  background: var(--canvas);
  color: #40444e;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cc-upcoming-title {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-who {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--dash-positive-bg);
  color: var(--dash-positive-ink);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.cc-who[data-who="you"],
.cc-who[data-who="connect"] {
  background: var(--dash-attention-bg);
  color: var(--dash-attention-ink);
}

/* Growth trend */

.cc-series {
  flex-wrap: wrap;
  margin: -4px 0 12px;
  overflow: visible;
}

.cc-series > a {
  padding: 7px 10px 9px;
  font-size: 13px;
}

.cc-chart {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: 150px auto;
  gap: 4px 8px;
}

.cc-chart-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  color: #9ea2ac;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  list-style: none;
  text-align: right;
}

.cc-chart-svg {
  width: 100%;
  height: 150px;
  overflow: visible;
}

.cc-chart-grid {
  fill: none;
  stroke: #ebecef;
  stroke-dasharray: 3 6;
}

.cc-chart-area {
  fill: #0036871a;
}

.cc-chart-line {
  fill: none;
  stroke: var(--green);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.cc-chart-x {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  color: #9ea2ac;
  font-size: 11px;
  list-style: none;
}

/* What's working */

.cc-insight-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.cc-insight-list a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color .2s, background-color .2s;
}

.cc-insight-list a:hover {
  border-color: #b9c9e0;
  background: #f8f8fa;
}

.cc-insight-list a > .icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  color: var(--deep);
}

.cc-insight-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--dash-positive-bg);
  color: var(--dash-positive-ink);
}

.cc-insight-icon .icon {
  width: 16px;
  height: 16px;
}

.cc-insight-text {
  display: grid;
  flex: 1;
  gap: 4px;
  min-width: 0;
}

.cc-insight-text strong {
  font-size: 14px;
  line-height: 1.4;
}

.cc-insight-text small {
  color: #7f838c;
  font-size: 12px;
}

@media (max-width: 1280px) {
  .cc-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .cc-row-now,
  .cc-insight-list {
    grid-template-columns: minmax(0, 1fr);
  }
  /* One column: the panels interleave in reading order. */
  .cc-col {
    display: contents;
  }
  .cc-attention { order: 1; }
  .cc-working { order: 2; }
  .cc-upcoming { order: 3; }
  .cc-results { order: 4; }
  .cc-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .cc-tiles {
    gap: 10px;
  }
  .cc-tile {
    padding: 14px;
  }
  .cc-tile-number strong {
    font-size: 27px;
  }
  .cc-spark {
    width: 64px;
  }
  .cc-panel {
    padding: 16px 14px;
    border-radius: 16px;
  }
  .cc-attention-item {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .cc-attention-actions {
    grid-column: 1 / -1;
  }
  .cc-upcoming-list a {
    grid-template-columns: 50px 8px minmax(0, 1fr);
  }
  .cc-who {
    display: none;
  }
}

@media (max-width: 360px) {
  .cc-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .cc-live[data-live-state="live"] .cc-live-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: app-ping 2.4s var(--motion-ease-out) infinite;
  }

  .cc-steps li {
    animation: cc-step-in .45s var(--motion-ease-out) backwards;
  }

  .cc-steps li:nth-child(2) { animation-delay: 70ms; }
  .cc-steps li:nth-child(3) { animation-delay: 140ms; }
  .cc-steps li:nth-child(4) { animation-delay: 210ms; }
  .cc-steps li:nth-child(5) { animation-delay: 280ms; }

  .cc-steps li[data-state="done"] .cc-step-mark {
    animation: cc-tick .5s var(--ui-spring, var(--motion-ease-out)) backwards;
  }

  .cc-steps li:nth-child(2)[data-state="done"] .cc-step-mark { animation-delay: 120ms; }
  .cc-steps li:nth-child(3)[data-state="done"] .cc-step-mark { animation-delay: 240ms; }
  .cc-steps li:nth-child(4)[data-state="done"] .cc-step-mark { animation-delay: 360ms; }

  .cc-job-progress span {
    animation: cc-grow .9s var(--motion-ease-out) backwards .2s;
  }

  .cc-steps li[data-ticked] .cc-step-mark {
    animation: cc-tick .5s var(--ui-spring, var(--motion-ease-out));
  }

  .cc-steps li[data-state="current"] .cc-step-mark {
    animation: cc-pulse 1.8s ease-in-out infinite;
  }

  .cc-result[data-fresh] {
    animation: cc-arrive .7s var(--motion-ease-out) backwards;
  }

  .cc-attention-item[data-leaving] {
    animation: cc-leave .28s var(--motion-ease-out) forwards;
  }

  /* Live state changes (fix batch §25): a new card slides in, the count ticks, a fresh
     working panel settles in. */
  .cc-attention-item[data-fresh] {
    animation: cc-slide-in .42s var(--motion-ease-out) backwards;
  }

  .cc-count[data-ticked],
  .cc-tile-number [data-ticked] {
    animation: cc-tick .5s var(--ui-spring, var(--motion-ease-out));
  }

  .cc-working[data-fresh] .cc-job,
  .cc-working[data-fresh] .cc-idle {
    animation: cc-arrive .5s var(--motion-ease-out) backwards;
  }
}

@keyframes cc-slide-in {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
}

@keyframes cc-step-in {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
}

@keyframes cc-grow {
  from {
    width: 0;
  }
}

@keyframes cc-tick {
  from {
    transform: scale(.4);
  }
}

@keyframes cc-pulse {
  50% {
    box-shadow: 0 0 0 7px #00368710;
  }
}

@keyframes cc-arrive {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes cc-leave {
  to {
    opacity: 0;
    transform: translateX(28px);
  }
}

/* Starting state (before the first campaign) */

[data-surface="command-center"] .status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

[data-surface="command-center"] .status-card {
  --status-tint: #e6ecf5;
  --status-ink: var(--deep);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 200px;
  padding: 20px 20px 22px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fff;
}

[data-surface="command-center"] .status-card[data-kind="progress"] {
  --status-tint: #e8f1fe;
  --status-ink: #1d64c4;
}

[data-surface="command-center"] .status-card[data-kind="queued"] {
  --status-tint: #f0edfd;
  --status-ink: #5b49c7;
}

[data-surface="command-center"] .status-card[data-kind="permission"] {
  --status-tint: #fff3e2;
  --status-ink: #9a5800;
}

[data-surface="command-center"] .status-card header {
  display: flex;
  align-items: center;
  gap: 11px;
}

[data-surface="command-center"] .status-card h2 {
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.01em;
}

[data-surface="command-center"] .status-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--status-tint);
  color: var(--status-ink);
}

[data-surface="command-center"] .status-icon .icon {
  width: 18px;
  height: 18px;
}

[data-surface="command-center"] .status-count {
  margin-top: 10px;
  font-size: 42px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  color: #c6c9d0;
}

[data-surface="command-center"] .status-empty {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

[data-surface="command-center"] .status-card[data-kind="results"] {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  grid-template-areas:
    "header chart"
    "count chart"
    "empty chart";
  grid-template-rows: auto auto 1fr;
  column-gap: 40px;
  min-height: 0;
}

[data-surface="command-center"] .status-card[data-kind="results"] header {
  grid-area: header;
}

[data-surface="command-center"] .status-card[data-kind="results"] .status-count {
  grid-area: count;
}

[data-surface="command-center"] .status-card[data-kind="results"] .status-empty {
  grid-area: empty;
  max-width: 420px;
}

[data-surface="command-center"] .results-chart {
  grid-area: chart;
  align-self: center;
  width: 100%;
  height: auto;
  overflow: visible;
}

[data-surface="command-center"] .results-grid {
  fill: none;
  stroke: #e5e7eb;
  stroke-dasharray: 3 7;
}

[data-surface="command-center"] .results-baseline {
  fill: none;
  stroke: var(--green);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: .55;
}

[data-surface="command-center"] .next-steps {
  margin-top: 18px;
  padding: 26px 26px 28px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fff;
}

[data-surface="command-center"] .next-steps h2 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
}

[data-surface="command-center"] .next-steps ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

[data-surface="command-center"] .next-steps li {
  position: relative;
  padding: 18px 18px 20px;
  border-radius: 13px;
  background: var(--canvas);
}

[data-surface="command-center"] .next-step-number {
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .08em;
  color: var(--green);
}

[data-surface="command-center"] .next-steps h3 {
  margin-top: 8px;
  font-size: 15px;
  letter-spacing: -.02em;
}

[data-surface="command-center"] .next-steps p {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* No workspace yet */

.command-empty {
  max-width: 640px;
  padding: 44px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
}

.command-empty img {
  margin-bottom: 18px;
}

.command-empty h1 {
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -.05em;
}

/* Motion: the greeting's shimmer, the pulses, and arrivals on the live board. */

@media (prefers-reduced-motion: no-preference) {
  .command-hero h1 span {
    animation: app-shimmer 8s ease-in-out infinite alternate;
  }

  [data-surface="command-center"] .status-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 #00368766;
    animation: app-ping 2.4s var(--motion-ease-out) infinite;
  }

}

@keyframes app-shimmer {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

@keyframes app-ping {
  0% {
    box-shadow: 0 0 0 0 #00368766;
  }
  70%,
  100% {
    box-shadow: 0 0 0 10px #00368700;
  }
}

/* Responsive */

@media (max-width: 1100px) {
  [data-surface="command-center"] .status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  [data-surface="command-center"] .status-card[data-kind="results"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "count"
      "empty"
      "chart";
  }
  .command-hero {
    flex-direction: column;
    align-items: stretch;
    padding: 30px 26px;
  }
  .command-side {
    min-width: 0;
  }
  [data-surface="command-center"] .next-steps ol {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .command-hero {
    padding: 24px 18px;
    border-radius: 18px;
  }
  [data-surface="command-center"] .status-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-surface="command-center"] .status-card {
    min-height: 0;
  }
  [data-surface="command-center"] .status-card[data-kind="results"] {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  grid-template-areas:
    "header chart"
    "count chart"
    "empty chart";
  grid-template-rows: auto auto 1fr;
  column-gap: 40px;
  min-height: 0;
}

[data-surface="command-center"] .status-card[data-kind="results"] header {
  grid-area: header;
}

[data-surface="command-center"] .status-card[data-kind="results"] .status-count {
  grid-area: count;
}

[data-surface="command-center"] .status-card[data-kind="results"] .status-empty {
  grid-area: empty;
  max-width: 420px;
}

[data-surface="command-center"] .results-chart {
  grid-area: chart;
  align-self: center;
  width: 100%;
  height: auto;
  overflow: visible;
}

[data-surface="command-center"] .results-grid {
  fill: none;
  stroke: #e5e7eb;
  stroke-dasharray: 3 7;
}

[data-surface="command-center"] .results-baseline {
  fill: none;
  stroke: var(--green);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: .55;
}

[data-surface="command-center"] .next-steps {
    padding: 20px;
  }
  .command-empty {
    padding: 28px 22px;
  }
}

/* The calm pass: three numbers, what needs you and what Outpost is doing lead; the other
   numbers, the week ahead, the results, the trend and the insights open in place under
   "Show more" (components/calm.rs). */
.cc-tiles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cc-tiles-more {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.cc-fold {
  margin-top: 0;
}

.cc-fold > .calm-more-body {
  display: grid;
  gap: 16px;
}

.cc-row-more {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* The welcome screen's one next step. */
.cc-welcome-next {
  display: grid;
  justify-items: start;
  gap: 4px;
  max-width: 560px;
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}

.cc-welcome-next strong {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.015em;
}

.cc-welcome-next span {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.cc-welcome-next .dash-button {
  margin-top: 10px;
}

.cc-welcome-kicker {
  color: var(--brand);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media (max-width: 960px) {
  .cc-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cc-tiles-more {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  }
  .cc-row-more {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Territory (/app/<workspace>/territory). Owner: territory-exp.
   Rendered by crates/web/src/pages/app/territory/: the scoreboard, the channel board,
   the outposts table, next to claim and visitors by source. No globe in the app (the
   homepage keeps it). Every bar's fill is a `[data-level]` of 0–20 (5% steps), so no
   inline style is needed (CSP). Scoped under [data-surface="territory"]. */

:is([data-surface="territory"], [data-surface="competitors"]) {
  --ter-green: #0b3e8a;
  --ter-green-soft: #e9eff7;
  --ter-track: #eeeff2;
  --ter-ink-soft: #575c67;
}

[data-surface="territory"] [hidden] {
  display: none !important;
}

[data-surface="territory"] [data-level] {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ter-green);
}

[data-surface="territory"] [data-level="0"] { width: 0%; }
[data-surface="territory"] [data-level="1"] { width: 5%; }
[data-surface="territory"] [data-level="2"] { width: 10%; }
[data-surface="territory"] [data-level="3"] { width: 15%; }
[data-surface="territory"] [data-level="4"] { width: 20%; }
[data-surface="territory"] [data-level="5"] { width: 25%; }
[data-surface="territory"] [data-level="6"] { width: 30%; }
[data-surface="territory"] [data-level="7"] { width: 35%; }
[data-surface="territory"] [data-level="8"] { width: 40%; }
[data-surface="territory"] [data-level="9"] { width: 45%; }
[data-surface="territory"] [data-level="10"] { width: 50%; }
[data-surface="territory"] [data-level="11"] { width: 55%; }
[data-surface="territory"] [data-level="12"] { width: 60%; }
[data-surface="territory"] [data-level="13"] { width: 65%; }
[data-surface="territory"] [data-level="14"] { width: 70%; }
[data-surface="territory"] [data-level="15"] { width: 75%; }
[data-surface="territory"] [data-level="16"] { width: 80%; }
[data-surface="territory"] [data-level="17"] { width: 85%; }
[data-surface="territory"] [data-level="18"] { width: 90%; }
[data-surface="territory"] [data-level="19"] { width: 95%; }
[data-surface="territory"] [data-level="20"] { width: 100%; }

[data-surface="territory"] .ter-kicker {
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7f838c;
}

[data-surface="territory"] .ter-note {
  font-size: 12.5px;
  line-height: 1.55;
  color: #7f838c;
}

/* Scoreboard */

[data-surface="territory"] .ter-score {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}

[data-surface="territory"] .ter-score-main,
[data-surface="territory"] .ter-race,
[data-surface="territory"] .ter-section {
  min-width: 0;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
}

[data-surface="territory"] .ter-score-main {
  background:
    radial-gradient(120% 90% at 100% 0%, #e7edf6 0%, #ffffff00 55%),
    #fff;
}

[data-surface="territory"] .ter-score-figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 14px;
  line-height: 1;
}

[data-surface="territory"] .ter-score-figure a {
  color: inherit;
  text-decoration: none;
  border-radius: 10px;
}

[data-surface="territory"] .ter-score-figure a:hover,
[data-surface="territory"] .ter-score-figure a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

[data-surface="territory"] .ter-score-claimed strong {
  font-size: clamp(48px, 6vw, 68px);
  font-weight: 800;
  letter-spacing: -.06em;
  color: var(--ter-green);
  font-variant-numeric: tabular-nums;
}

[data-surface="territory"] .ter-score-of {
  font-size: 18px;
  font-weight: 650;
  color: #8f939c;
}

[data-surface="territory"] .ter-score-places {
  font-size: clamp(30px, 3.6vw, 40px);
  font-weight: 760;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}

[data-surface="territory"] .ter-meter {
  height: 10px;
  border-radius: 999px;
  background: var(--ter-track);
  overflow: hidden;
}

[data-surface="territory"] .ter-score-caption {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ter-ink-soft);
}

[data-surface="territory"] .ter-score-caption a {
  font-weight: 700;
  color: var(--deep);
  text-underline-offset: 3px;
}

[data-surface="territory"] .ter-trend {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 650;
  color: var(--ter-green);
}

[data-surface="territory"] .ter-spark {
  width: 160px;
  height: 40px;
  flex-shrink: 0;
}

[data-surface="territory"] .ter-spark-area {
  fill: #0b3e8a14;
}

[data-surface="territory"] .ter-spark-line {
  fill: none;
  stroke: var(--ter-green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

[data-surface="territory"] .ter-race header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

[data-surface="territory"] .ter-race-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="territory"] .ter-race-list a {
  display: grid;
  grid-template-columns: minmax(96px, 1.1fr) minmax(60px, 2fr) 34px;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  font-size: 13.5px;
}

[data-surface="territory"] .ter-race-list a:hover,
[data-surface="territory"] .ter-race-list a:focus-visible {
  background: var(--canvas);
}

[data-surface="territory"] .ter-race-list [data-selected="true"] a {
  background: var(--ter-green-soft);
}

[data-surface="territory"] .ter-race-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

[data-surface="territory"] .ter-race-list [data-you="true"] .ter-race-name {
  font-weight: 780;
}

[data-surface="territory"] .ter-race-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--ter-track);
  overflow: hidden;
}

[data-surface="territory"] .ter-race-bar [data-level] {
  background: #9fa3ad;
}

[data-surface="territory"] .ter-race-list [data-you="true"] .ter-race-bar [data-level] {
  background: var(--ter-green);
}

[data-surface="territory"] .ter-race-list strong {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

[data-surface="territory"] .ter-race .ter-note,
[data-surface="territory"] .ter-race-none {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #7f838c;
}

/* Channel board */

[data-surface="territory"] .ter-board ul {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

[data-surface="territory"] .ter-board a {
  display: grid;
  align-content: start;
  gap: 8px;
  height: 100%;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-shadow: var(--dash-card-shadow);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s var(--motion-ease-out);
}

[data-surface="territory"] .ter-board a:hover,
[data-surface="territory"] .ter-board a:focus-visible {
  border-color: #b9c6d9;
  box-shadow: var(--dash-card-shadow-hover);
  transform: translateY(-1px);
}

[data-surface="territory"] .ter-board [data-selected="true"] a {
  border-color: var(--ter-green);
  background: linear-gradient(180deg, #f2f6fb, #fff);
  box-shadow: 0 0 0 3px #0b3e8a1f, var(--dash-card-shadow);
}

[data-surface="territory"] .ter-board-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  letter-spacing: -.01em;
}

[data-surface="territory"] .ter-board-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--ter-green-soft);
  color: var(--ter-green);
}

[data-surface="territory"] .ter-board-icon .icon {
  width: 16px;
  height: 16px;
}

[data-surface="territory"] .ter-board-counts {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

[data-surface="territory"] .ter-board-counts b {
  font-size: 28px;
  font-weight: 780;
  letter-spacing: -.05em;
}

[data-surface="territory"] .ter-board-counts span {
  font-size: 13px;
  font-weight: 650;
  color: #7f838c;
}

[data-surface="territory"] .ter-board-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--ter-track);
  overflow: hidden;
}

[data-surface="territory"] .ter-board-unit {
  font-size: 12px;
  line-height: 1.45;
  color: #7f838c;
}

[data-surface="territory"] .ter-board-rivals {
  font-size: 12px;
  font-weight: 650;
  color: var(--ter-ink-soft);
}

/* Filter */

[data-surface="territory"] .ter-filter {
  margin: 0 0 18px;
  padding: 12px 16px;
  border: 1px solid #b9c6d9;
  border-radius: 14px;
  background: var(--ter-green-soft);
  font-size: 13.5px;
}

[data-surface="territory"] .ter-filter p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-weight: 650;
}

[data-surface="territory"] .ter-filter .icon {
  width: 16px;
  height: 16px;
  color: var(--ter-green);
}

[data-surface="territory"] .ter-filter a {
  font-weight: 700;
  color: var(--deep);
  text-underline-offset: 3px;
}

[data-surface="territory"] .ter-evidence {
  display: grid;
  gap: 4px;
  margin: 8px 0 0 28px;
  padding: 0;
  color: var(--ter-ink-soft);
  font-size: 13px;
}

/* Sections */

[data-surface="territory"] .ter-section {
  margin-bottom: 18px;
  scroll-margin-top: calc(var(--app-header-height) + 16px);
}

[data-surface="territory"] .ter-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 16px;
}

[data-surface="territory"] .ter-section-head h2 {
  font-size: 18px;
  font-weight: 740;
  letter-spacing: -.025em;
}

[data-surface="territory"] .ter-section-head p {
  max-width: 640px;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

[data-surface="territory"] .ter-section-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 10px;
}

[data-surface="territory"] .ter-chip {
  --pill-bg: #fff;
  --pill-ink: var(--ink);
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-ink);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

[data-surface="territory"] a.ter-chip:hover,
[data-surface="territory"] a.ter-chip:focus-visible {
  border-color: #bdc1cb;
}

[data-surface="territory"] .ter-chip[aria-current="true"] {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

[data-surface="territory"] .ter-chip[data-tone="attention"] {
  border-color: #f3d3a8;
}

[data-surface="territory"] .ter-chip[data-static="true"] {
  background: var(--canvas);
  color: var(--ter-ink-soft);
}

[data-surface="territory"] .ter-checks-note {
  margin: -6px 0 12px;
}

[data-surface="territory"] .ter-none {
  padding: 16px;
  border-radius: 12px;
  background: var(--canvas);
  font-size: 13.5px;
  color: var(--muted);
}

/* Outposts table */

[data-surface="territory"] .ter-table {
  display: grid;
  border-top: 1px solid var(--line);
}

[data-surface="territory"] .ter-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.7fr) 92px minmax(0, 1.5fr) 118px;
  gap: 16px;
  align-items: start;
  padding: 14px 10px;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--app-header-height) + 16px);
}

[data-surface="territory"] .ter-row:target {
  background: #f2f6fb;
}

[data-surface="territory"] .ter-row-head {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7f838c;
}

[data-surface="territory"] .ter-row[data-broken="true"] {
  background: linear-gradient(90deg, #fff6ea, #fff 60%);
  box-shadow: inset 3px 0 0 #e8a04a;
}

[data-surface="territory"] .ter-cell {
  display: grid;
  gap: 4px;
  min-width: 0;
  font-size: 13.5px;
}

[data-surface="territory"] .ter-cell small {
  font-size: 12px;
  line-height: 1.45;
  color: #7f838c;
}

[data-surface="territory"] .ter-cell-label {
  display: none;
}

[data-surface="territory"] .ter-where strong {
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

[data-surface="territory"] .ter-live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--brand);
  overflow-wrap: anywhere;
}

[data-surface="territory"] .ter-live .icon {
  width: 11px;
  height: 11px;
  transform: rotate(-45deg);
}

[data-surface="territory"] .ter-health .dash-pill {
  width: fit-content;
  white-space: normal;
}

[data-surface="territory"] .ter-health .dash-pill .icon {
  width: 12px;
  height: 12px;
}

[data-surface="territory"] .ter-check {
  overflow-wrap: anywhere;
}

[data-surface="territory"] .ter-results ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="territory"] .ter-results li {
  line-height: 1.4;
}

[data-surface="territory"] .ter-results b {
  font-variant-numeric: tabular-nums;
}

[data-surface="territory"] .ter-results li small {
  display: block;
}

[data-surface="territory"] .ter-nothing {
  font-size: 13px;
  color: #8f939c;
}

[data-surface="territory"] .ter-actions {
  justify-items: end;
  gap: 8px;
}

[data-surface="territory"] .ter-link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ter-ink-soft);
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

[data-surface="territory"] .ter-link-button:hover {
  color: var(--ink);
}

/* Next to claim */

:is([data-surface="territory"], [data-surface="competitors"]) .ter-link-check {
  color: var(--ter-ink-soft);
  text-decoration: none;
  white-space: nowrap;
}

[data-surface="territory"] a.ter-link-check:hover,
[data-surface="territory"] a.ter-link-check:focus-visible {
  color: var(--deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

:is([data-surface="territory"], [data-surface="competitors"]) .ter-link-check .icon {
  width: 12px;
  height: 12px;
  margin-right: 3px;
  vertical-align: -1px;
}

[data-surface="territory"] .ter-next {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

:is([data-surface="territory"], [data-surface="competitors"]) .ter-opportunity {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

:is([data-surface="territory"], [data-surface="competitors"]) .ter-opportunity-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #7f838c;
}

:is([data-surface="territory"], [data-surface="competitors"]) .ter-opportunity-meta span + span {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

:is([data-surface="territory"], [data-surface="competitors"]) .ter-opportunity h3 {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 730;
  letter-spacing: -.02em;
}

:is([data-surface="territory"], [data-surface="competitors"]) .ter-why {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ter-ink-soft);
}

:is([data-surface="territory"], [data-surface="competitors"]) .ter-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ter-ink-soft);
}

:is([data-surface="territory"], [data-surface="competitors"]) .ter-badge {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--dash-pending-bg);
  color: var(--dash-pending-ink);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

:is([data-surface="territory"], [data-surface="competitors"]) .ter-badge[data-who="outpost"] {
  background: var(--ter-green-soft);
  color: var(--dash-positive-ink);
}

:is([data-surface="territory"], [data-surface="competitors"]) .ter-rivals {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--dash-attention-ink);
}

:is([data-surface="territory"], [data-surface="competitors"]) .ter-rivals .icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

:is([data-surface="territory"], [data-surface="competitors"]) .ter-opportunity-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

:is([data-surface="territory"], [data-surface="competitors"]) .ter-planned {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--deep);
}

:is([data-surface="territory"], [data-surface="competitors"]) .ter-planned .icon {
  width: 14px;
  height: 14px;
}

:is([data-surface="territory"], [data-surface="competitors"]) .ter-hold-next {
  display: inline-flex;
  padding-left: 20px;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--deep);
  text-decoration: none;
}

:is([data-surface="territory"], [data-surface="competitors"]) .ter-hold-next .icon {
  width: 12px;
  height: 12px;
  transition: transform 160ms ease;
}

:is([data-surface="territory"], [data-surface="competitors"]) .ter-hold-next:hover .icon,
:is([data-surface="territory"], [data-surface="competitors"]) .ter-hold-next:focus-visible .icon {
  transform: translateX(2px);
}

:is([data-surface="territory"], [data-surface="competitors"]) .ter-unavailable {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ter-ink-soft);
}

:is([data-surface="territory"], [data-surface="competitors"]) .ter-unavailable a {
  font-weight: 700;
  color: var(--deep);
}

[data-surface="territory"] .ter-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--deep);
}

[data-surface="territory"] .ter-more .icon {
  width: 14px;
  height: 14px;
}

[data-surface="territory"] .ter-ongoing {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

[data-surface="territory"] .ter-ongoing li {
  display: grid;
  grid-template-columns: auto minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--canvas);
  font-size: 13px;
  color: var(--ter-ink-soft);
}

[data-surface="territory"] .ter-ongoing strong {
  color: var(--ink);
  white-space: nowrap;
}

/* Visitors by source */

[data-surface="territory"] .ter-sources {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each row is its own grid, so the figure column has a fixed width: bars line up. */
[data-surface="territory"] .ter-sources a {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(80px, 2fr) 12rem;
  align-items: center;
  gap: 16px;
  padding: 10px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}

[data-surface="territory"] .ter-sources a:hover,
[data-surface="territory"] .ter-sources a:focus-visible {
  background: var(--canvas);
}

[data-surface="territory"] .ter-source-name {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-size: 13.5px;
}

[data-surface="territory"] .ter-source-name small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: #7f838c;
}

[data-surface="territory"] .ter-source-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--ter-track);
  overflow: hidden;
}

[data-surface="territory"] .ter-source-figure {
  display: grid;
  justify-items: end;
  font-variant-numeric: tabular-nums;
}

[data-surface="territory"] .ter-source-figure b {
  font-size: 15px;
}

[data-surface="territory"] .ter-source-figure small {
  font-size: 11.5px;
  color: #7f838c;
  white-space: nowrap;
}

[data-surface="territory"] .ter-geo {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

[data-surface="territory"] .ter-geo .icon {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* Narrower screens */

@media (max-width: 1180px) {
  [data-surface="territory"] .ter-board ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  [data-surface="territory"] .ter-row {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr) minmax(0, 1.2fr) 104px;
  }
  [data-surface="territory"] .ter-since,
  [data-surface="territory"] .ter-row-head span:nth-child(3) {
    display: none;
  }
}

@media (max-width: 960px) {
  [data-surface="territory"] .ter-score,
  [data-surface="territory"] .ter-next {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 820px) {
  [data-surface="territory"] .ter-row-head {
    display: none;
  }
  [data-surface="territory"] .ter-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 14px;
    padding: 14px 4px;
  }
  [data-surface="territory"] .ter-row[data-broken="true"] {
    padding-left: 12px;
  }
  [data-surface="territory"] .ter-where {
    grid-column: 1;
  }
  [data-surface="territory"] .ter-actions {
    grid-column: 2;
    grid-row: 1;
  }
  [data-surface="territory"] .ter-health,
  [data-surface="territory"] .ter-since,
  [data-surface="territory"] .ter-results {
    grid-column: 1 / -1;
  }
  [data-surface="territory"] .ter-since {
    display: flex;
    gap: 6px;
    align-items: baseline;
  }
  [data-surface="territory"] .ter-cell-label {
    display: block;
    font-size: 11px;
    font-weight: 760;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  [data-surface="territory"] .ter-section-head {
    flex-direction: column;
  }
  [data-surface="territory"] .ter-section-tools {
    justify-content: flex-start;
  }
  [data-surface="territory"] .ter-ongoing li {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
  [data-surface="territory"] .ter-ongoing strong {
    white-space: normal;
  }
}

@media (max-width: 640px) {
  [data-surface="territory"] .ter-board ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  [data-surface="territory"] .ter-board a {
    padding: 14px;
  }
  [data-surface="territory"] .ter-board-counts b {
    font-size: 24px;
  }
  [data-surface="territory"] .ter-score-main,
  [data-surface="territory"] .ter-race,
  [data-surface="territory"] .ter-section {
    padding: 18px 16px;
    border-radius: 16px;
  }
  [data-surface="territory"] .ter-sources a {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
  }
  [data-surface="territory"] .ter-source-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  [data-surface="territory"] .ter-source-figure small {
    max-width: 8.5em;
    white-space: normal;
    text-align: right;
  }
  [data-surface="territory"] .ter-race-list a {
    grid-template-columns: minmax(0, 1fr) minmax(40px, 1fr) 28px;
    gap: 8px;
  }
}

@media (max-width: 380px) {
  [data-surface="territory"] .ter-board ul {
    grid-template-columns: minmax(0, 1fr);
  }
  :is([data-surface="territory"], [data-surface="competitors"]) .ter-opportunity {
    padding: 14px;
  }
}

/* Competitors (/app/<workspace>/competitors and /competitors/<id>). Wave 3, product
   intelligence (fix batch 2026-10-21 §27). Rendered by crates/web/src/pages/app/competitors/:
   the add form, the evidence-first cards with their live research steps, the "Why is it a
   competitor?" answers, the correction form, and a competitor's findings page. The open
   places on a competitor's page reuse Territory's cards (territory.css shares those rules
   with this surface). No inline style anywhere (CSP): states are data attributes.
   Scoped under [data-surface="competitors"]. */

[data-surface="competitors"] {
  --cp-ink-soft: #575c67;
  --cp-faint: #7f838c;
  --cp-green: #0b3e8a;
  --cp-green-soft: #e9eff7;
  --cp-amber: #9a5800;
  --cp-amber-soft: #fff5e5;
  --cp-blue: #2f7bd8;
  --cp-track: #eeeff2;
}

[data-surface="competitors"] [hidden] {
  display: none !important;
}

/* The header's research left. */
[data-surface="competitors"] .cp-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  transition: border-color .18s, box-shadow .2s var(--motion-ease-out);
}

[data-surface="competitors"] .cp-left:hover,
[data-surface="competitors"] .cp-left:focus-visible {
  border-color: #cccfd7;
  box-shadow: var(--dash-card-shadow);
}

/* Add. */
[data-surface="competitors"] .cp-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 10px 24px;
  align-items: center;
  margin-top: 22px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
}

[data-surface="competitors"] .cp-add-text h2 {
  font-size: 17px;
  font-weight: 740;
  letter-spacing: -.02em;
}

[data-surface="competitors"] .cp-add-text p {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cp-ink-soft);
}

[data-surface="competitors"] .cp-add-form {
  display: flex;
  gap: 10px;
  min-width: 0;
}

[data-surface="competitors"] .cp-add-field {
  flex: 1 1 auto;
  min-width: 0;
}

[data-surface="competitors"] .cp-add-field input,
[data-surface="competitors"] .cp-prompt input,
[data-surface="competitors"] .cp-correct-form input {
  width: 100%;
  min-width: 0;
  padding: 10px 13px;
  border: 1px solid #d2d5db;
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  transition: border-color .16s, box-shadow .2s var(--motion-ease-out);
}

[data-surface="competitors"] .cp-add-field input:focus-visible,
[data-surface="competitors"] .cp-prompt input:focus-visible,
[data-surface="competitors"] .cp-correct-form input:focus-visible {
  outline: none;
  border-color: var(--deep);
  box-shadow: 0 0 0 3px rgb(11 62 138 / .16);
}

[data-surface="competitors"] .cp-uses {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--cp-ink-soft);
}

[data-surface="competitors"] .cp-uses[data-waits="true"] {
  color: var(--cp-amber);
}

/* The list. */
[data-surface="competitors"] .cp-lists {
  margin-top: 26px;
}

[data-surface="competitors"] .cp-count {
  font-size: 13px;
  font-weight: 720;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cp-faint);
}

[data-surface="competitors"] .cp-list {
  display: grid;
  gap: 14px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

[data-surface="competitors"] .cp-list > li[data-fresh="true"] .cp-card {
  animation: cp-arrive .5s var(--motion-ease-out) both;
}

@keyframes cp-arrive {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

[data-surface="competitors"] .cp-card {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
  transition: box-shadow .2s var(--motion-ease-out), border-color .2s;
}

[data-surface="competitors"] .cp-card:hover {
  box-shadow: var(--dash-card-shadow-hover);
}

[data-surface="competitors"] .cp-card[data-standing="pinned"] {
  border-color: #b9c9e2;
}

[data-surface="competitors"] .cp-card[data-standing="demoted"],
[data-surface="competitors"] .cp-card[data-removed="true"] {
  background: #fbfcfc;
}

[data-surface="competitors"] .cp-card[data-removed="true"] .cp-card-title h3 a {
  color: var(--cp-faint);
}

[data-surface="competitors"] .cp-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

[data-surface="competitors"] .cp-mono {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--cp-green-soft);
  color: var(--cp-green);
  font-size: 18px;
  font-weight: 780;
}

[data-surface="competitors"] .cp-card[data-removed="true"] .cp-mono {
  background: var(--cp-track);
  color: var(--cp-faint);
}

[data-surface="competitors"] .cp-card-title {
  min-width: 0;
}

[data-surface="competitors"] .cp-card-title h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 740;
  letter-spacing: -.02em;
}

[data-surface="competitors"] .cp-card-title h3 a {
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

[data-surface="competitors"] .cp-card-title h3 a:hover {
  text-decoration: underline;
}

[data-surface="competitors"] .cp-pinned {
  display: inline-flex;
  color: var(--cp-green);
}

[data-surface="competitors"] .cp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--cp-ink-soft);
}

[data-surface="competitors"] .cp-meta a {
  color: var(--deep);
  overflow-wrap: anywhere;
}

[data-surface="competitors"] .cp-provenance {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

[data-surface="competitors"] .cp-provenance[data-yours="true"] {
  color: var(--cp-green);
  font-weight: 650;
}

/* Stats: icon over number, label under, every one a link with its provenance. */
[data-surface="competitors"] .cp-stats {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="competitors"] .cp-stat {
  position: relative;
}

[data-surface="competitors"] .cp-stat > a {
  display: grid;
  justify-items: center;
  min-width: 72px;
  padding: 6px 9px;
  border-radius: 12px;
  color: inherit;
  text-align: center;
  text-decoration: none;
  transition: background-color .18s;
}

[data-surface="competitors"] .cp-stat > a:hover,
[data-surface="competitors"] .cp-stat > a:focus-visible {
  outline: none;
  background: var(--canvas);
}

[data-surface="competitors"] .cp-stat-icon {
  color: var(--cp-faint);
}

[data-surface="competitors"] .cp-stat strong {
  font-size: 17px;
  font-weight: 760;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

[data-surface="competitors"] .cp-stat small {
  color: var(--cp-faint);
  font-size: 11px;
  white-space: nowrap;
}

[data-surface="competitors"] .cp-stat-tip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 5;
  width: max-content;
  max-width: 240px;
  padding: 7px 10px;
  border-radius: 9px;
  background: #1a1e26;
  color: #f0f1f4;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .16s, transform .2s var(--motion-ease-out);
}

[data-surface="competitors"] .cp-stat:hover .cp-stat-tip,
[data-surface="competitors"] .cp-stat:focus-within .cp-stat-tip {
  opacity: 1;
  transform: none;
}

/* Why it's a match, how it's used, the evidence. */
[data-surface="competitors"] .cp-match,
[data-surface="competitors"] .cp-use {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}

[data-surface="competitors"] .cp-match .icon {
  flex: none;
  margin-top: 2px;
  color: var(--cp-green);
}

[data-surface="competitors"] .cp-use {
  display: block;
  margin-top: 6px;
  color: var(--cp-ink-soft);
}

[data-surface="competitors"] .cp-use strong {
  color: var(--ink);
}

[data-surface="competitors"] .cp-evidence {
  display: grid;
  gap: 4px;
  margin: 10px 0 0;
  padding: 0 0 0 16px;
  font-size: 12.5px;
  color: var(--cp-ink-soft);
}

[data-surface="competitors"] .cp-evidence a {
  color: var(--deep);
}

/* Research, live. */
[data-surface="competitors"] .cp-research {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 13px;
  background: var(--canvas);
}

[data-surface="competitors"] .cp-research-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 10px;
  font-size: 13px;
}

[data-surface="competitors"] .cp-research[data-live="true"] .cp-research-head .icon {
  color: var(--cp-blue);
}

[data-surface="competitors"] .cp-fixture {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--cp-amber-soft);
  color: var(--cp-amber);
  font-size: 11.5px;
  font-weight: 650;
}

[data-surface="competitors"] .cp-steps {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

[data-surface="competitors"] .cp-steps li {
  display: grid;
  grid-template-columns: 16px auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  font-size: 13px;
  color: var(--cp-faint);
  transition: color .2s;
}

[data-surface="competitors"] .cp-steps li[data-state="running"],
[data-surface="competitors"] .cp-steps li[data-state="done"] {
  color: var(--ink);
}

[data-surface="competitors"] .cp-step-mark {
  width: 12px;
  height: 12px;
  border: 2px solid #c9ccd4;
  border-radius: 50%;
  transition: background-color .25s, border-color .25s, transform .3s var(--motion-ease-out);
}

[data-surface="competitors"] .cp-steps li[data-state="running"] .cp-step-mark {
  border-color: var(--cp-blue);
  border-right-color: transparent;
}

[data-surface="competitors"] .cp-steps li[data-state="done"] .cp-step-mark {
  border-color: var(--cp-green);
  background: var(--cp-green);
}

[data-surface="competitors"] .cp-steps li[data-state="skipped"] .cp-step-mark {
  border-style: dashed;
}

[data-surface="competitors"] .cp-step-summary {
  min-width: 0;
  color: var(--cp-ink-soft);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

[data-surface="competitors"] .cp-research-uses {
  margin-top: 8px;
  font-size: 12px;
  color: var(--cp-faint);
}

[data-surface="competitors"] .cp-research-problem {
  margin-top: 8px;
  font-size: 12.5px;
  color: #a12a1c;
}

/* The site prompt and the question. */
[data-surface="competitors"] .cp-prompt,
[data-surface="competitors"] .cp-question {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid #f0d9ac;
  border-radius: 14px;
  background: var(--cp-amber-soft);
}

[data-surface="competitors"] .cp-prompt-title,
[data-surface="competitors"] .cp-question-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

[data-surface="competitors"] .cp-prompt-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

[data-surface="competitors"] .cp-prompt-other {
  display: flex;
  flex: 1 1 280px;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

[data-surface="competitors"] .cp-prompt-row .cp-prompt-other {
  margin-top: 0;
}

[data-surface="competitors"] .cp-prompt-other label {
  display: flex;
  flex: 1 1 200px;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  white-space: nowrap;
}

[data-surface="competitors"] .cp-question-body {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cp-ink-soft);
  white-space: pre-line;
}

[data-surface="competitors"] .cp-answers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

[data-surface="competitors"] .cp-answer {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid #e6d3ad;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s, transform .18s var(--motion-ease-out), box-shadow .2s;
}

[data-surface="competitors"] .cp-answer strong {
  font-size: 13.5px;
}

[data-surface="competitors"] .cp-answer small {
  font-size: 12px;
  line-height: 1.4;
  color: var(--cp-ink-soft);
}

[data-surface="competitors"] .cp-answer:hover,
[data-surface="competitors"] .cp-answer:focus-visible {
  outline: none;
  border-color: var(--deep);
  box-shadow: 0 0 0 3px rgb(11 62 138 / .14);
  transform: translateY(-1px);
}

/* Footer and actions. */
[data-surface="competitors"] .cp-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

[data-surface="competitors"] .cp-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--deep);
  font-size: 13px;
  font-weight: 650;
}

[data-surface="competitors"] .cp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

[data-surface="competitors"] .cp-correct {
  margin-top: 10px;
}

[data-surface="competitors"] .cp-correct summary {
  width: max-content;
  font-size: 13px;
  font-weight: 650;
  color: var(--cp-ink-soft);
  cursor: pointer;
}

[data-surface="competitors"] .cp-correct-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
  gap: 10px;
  margin-top: 10px;
}

[data-surface="competitors"] .cp-correct-form label {
  display: grid;
  gap: 4px;
  font-size: 12.5px;
  color: var(--cp-ink-soft);
}

[data-surface="competitors"] .cp-removed {
  margin-top: 22px;
}

[data-surface="competitors"] .cp-removed summary {
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

[data-surface="competitors"] .cp-removed summary small {
  font-weight: 500;
  color: var(--cp-faint);
}

/* A competitor's page. */
[data-surface="competitors"] .cp-detail-head .eyebrow a {
  color: inherit;
  text-decoration: none;
}

[data-surface="competitors"] .cp-detail-head .eyebrow a:hover {
  text-decoration: underline;
}

[data-surface="competitors"] .cp-detail-card {
  margin-top: 18px;
}

/* The card's "Findings and what it changed" is this page. */
[data-surface="competitors"] .cp-detail-card .cp-open {
  visibility: hidden;
}

[data-surface="competitors"] .cp-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

[data-surface="competitors"] .cp-group,
[data-surface="competitors"] .cp-section {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

[data-surface="competitors"] .cp-section {
  margin-top: 18px;
}

[data-surface="competitors"] .cp-group h2,
[data-surface="competitors"] .cp-section h2 {
  font-size: 15px;
  font-weight: 740;
  letter-spacing: -.01em;
}

[data-surface="competitors"] .cp-findings {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

[data-surface="competitors"] .cp-finding {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cp-track);
}

[data-surface="competitors"] .cp-finding:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

[data-surface="competitors"] .cp-claim {
  font-size: 13.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

[data-surface="competitors"] .cp-source {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 3px;
  font-size: 12px;
  color: var(--cp-faint);
}

[data-surface="competitors"] .cp-source a {
  color: var(--deep);
}

[data-surface="competitors"] .cp-none,
[data-surface="competitors"] .cp-block-lede {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cp-ink-soft);
}

[data-surface="competitors"] .cp-none a {
  color: var(--deep);
}

[data-surface="competitors"] .cp-block {
  margin-top: 18px;
}

[data-surface="competitors"] .cp-block h3 {
  font-size: 14px;
  font-weight: 720;
}

[data-surface="competitors"] .cp-places {
  margin-top: 12px;
}

[data-surface="competitors"] .cp-shared,
[data-surface="competitors"] .cp-share {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--cp-ink-soft);
}

[data-surface="competitors"] .cp-share a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--deep);
  font-weight: 650;
}

[data-surface="competitors"] .cp-changes,
[data-surface="competitors"] .cp-playbook {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

[data-surface="competitors"] .cp-changes a,
[data-surface="competitors"] .cp-playbook li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--deep);
}

[data-surface="competitors"] .cp-playbook li {
  color: var(--ink);
}

[data-surface="competitors"] .cp-gaps {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

[data-surface="competitors"] .cp-gap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
}

[data-surface="competitors"] .cp-gap-keyword {
  font-size: 14px;
  font-weight: 680;
  overflow-wrap: anywhere;
}

[data-surface="competitors"] .cp-gap-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--cp-ink-soft);
}

[data-surface="competitors"] .cp-gap-meta span {
  color: var(--cp-faint);
}

[data-surface="competitors"] .cp-gap-idea {
  font-size: 12.5px;
  color: var(--cp-faint);
}

@media (max-width: 960px) {
  [data-surface="competitors"] .cp-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  [data-surface="competitors"] .cp-add {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }

  [data-surface="competitors"] .cp-uses {
    grid-column: 1;
  }

  [data-surface="competitors"] .cp-add-form {
    flex-direction: column;
  }

  [data-surface="competitors"] .cp-card {
    padding: 16px;
  }

  [data-surface="competitors"] .cp-card-head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  [data-surface="competitors"] .cp-stats {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  /* On phones a tip takes no room until its number is touched or focused. */
  [data-surface="competitors"] .cp-stat-tip {
    display: none;
    right: auto;
    left: 0;
    max-width: 70vw;
  }

  [data-surface="competitors"] .cp-stat:hover .cp-stat-tip,
  [data-surface="competitors"] .cp-stat:focus-within .cp-stat-tip {
    display: block;
  }

  [data-surface="competitors"] .cp-answers {
    grid-template-columns: minmax(0, 1fr);
  }

  /* A step's summary goes under its label on phones. */
  [data-surface="competitors"] .cp-steps li {
    grid-template-columns: 16px minmax(0, 1fr);
    row-gap: 1px;
  }

  [data-surface="competitors"] .cp-step-summary {
    grid-column: 2;
  }

  [data-surface="competitors"] .cp-group,
  [data-surface="competitors"] .cp-section {
    padding: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-surface="competitors"] .cp-card,
  [data-surface="competitors"] .cp-answer,
  [data-surface="competitors"] .cp-step-mark,
  [data-surface="competitors"] .cp-stat-tip {
    transition: none;
  }

  [data-surface="competitors"] .cp-list > li[data-fresh="true"] .cp-card {
    animation: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  [data-surface="competitors"] .cp-steps li[data-state="running"] .cp-step-mark {
    animation: cp-spin .9s linear infinite;
  }
}

@keyframes cp-spin {
  to {
    transform: rotate(360deg);
  }
}

/* "Why is it a competitor?" on Decisions and the Command Center. */
.decision-answers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.decision-answer {
  padding: 8px 12px;
  border: 1px solid #e6d3ad;
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color .16s, box-shadow .2s;
}

.decision-answer:hover,
.decision-answer:focus-visible {
  outline: none;
  border-color: var(--deep);
  box-shadow: 0 0 0 3px rgb(11 62 138 / .14);
}

/* Their site, in a new tab (fix batch H). */
[data-surface="competitors"] .cp-site {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

[data-surface="competitors"] .cp-site .icon {
  width: 12px;
  height: 12px;
  color: var(--muted);
}

/* Channels (fit-channels, Part 2): the overview, "Add a channel", one assessment per
   channel and its founder-step kit. Rendered by crates/web/src/pages/app/channels/.
   Every class is prefixed `ch-` and sits under `.ch-page`; the kit's copy button is
   `.copy-button` (components/copy_button.rs). */

.ch-page {
  --ch-gap: 18px;
  display: grid;
  gap: var(--ch-gap);
  min-width: 0;
}

.ch-page [hidden] {
  display: none !important;
}

.ch-page .dash-head {
  margin-bottom: 4px;
}

.ch-page h3 {
  margin: 22px 0 10px;
  font-size: 14px;
  font-weight: 720;
  letter-spacing: -.01em;
}

.ch-add .icon {
  width: 16px;
  height: 16px;
}

/* Counts: every one filters the list */

.ch-counts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.ch-count {
  --pill-bg: var(--dash-neutral-bg);
  --pill-ink: var(--dash-neutral-ink);
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
  transition: border-color .2s, box-shadow .2s, transform .2s var(--motion-ease-out);
}

.ch-count strong {
  font-size: 28px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--pill-ink);
  font-variant-numeric: tabular-nums;
}

.ch-count span {
  font-size: 13px;
  font-weight: 650;
  color: #494d57;
}

.ch-count:hover {
  border-color: #c6c9d0;
  box-shadow: var(--dash-card-shadow-hover);
  transform: translateY(-1px);
}

.ch-count[aria-current="true"] {
  border-color: var(--pill-ink);
  background: var(--pill-bg);
}

.ch-count:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* Section headers inside cards */

.ch-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.ch-section-head h2 {
  font-size: 17px;
  font-weight: 720;
  letter-spacing: -.025em;
}

.ch-section-head p {
  margin-top: 4px;
  max-width: 68ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

.ch-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--deep);
}

.ch-kicker .icon {
  width: 14px;
  height: 14px;
}

.ch-plan-note,
.ch-empty-line,
.ch-considered,
.ch-showing {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

.ch-plan-note {
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--canvas);
}

.ch-considered {
  margin-top: 16px;
}

.ch-considered a,
.ch-row-summary a,
.ch-question-list p a {
  color: var(--deep);
  font-weight: 650;
  text-underline-offset: 3px;
}

.ch-considered a:hover,
.ch-question-list p a:hover {
  text-decoration: underline;
}

/* Channel rows */

.ch-rows {
  display: grid;
  border-top: 1px solid var(--line);
}

.ch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line);
}

.ch-row-main {
  min-width: 0;
}

.ch-row-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.ch-row-title a {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}

.ch-row-title a:hover {
  color: var(--deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ch-row-meta {
  margin-top: 3px;
  font-size: 12.5px;
  color: #7f838c;
}

.ch-row-summary {
  margin-top: 5px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #40444e;
  overflow-wrap: anywhere;
}

.ch-row-fix,
.ch-verdict-fix,
.ch-check-fix {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #40444e;
}

.ch-row-fix strong,
.ch-verdict-fix strong,
.ch-check-fix strong {
  color: var(--deep);
}

.ch-row-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
}

/* Decisions, questions */

.ch-decision-list,
.ch-question-list {
  display: grid;
  gap: 10px;
}

.ch-decision-list li,
.ch-question-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--canvas);
}

.ch-decision-list li > div,
.ch-question-list li > div {
  flex: 1;
  min-width: 0;
}

.ch-decision-list strong,
.ch-question-list strong {
  font-size: 14.5px;
  font-weight: 700;
}

.ch-decision-list p,
.ch-question-list p {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.55;
  color: #545964;
}

.ch-decision-list .icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--dash-attention-ink);
}

.ch-decisions {
  border-color: #f2d7ad;
}

/* Readiness */

.ch-measured {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #40444e;
  overflow-wrap: anywhere;
}

.ch-measured .dash-pill {
  justify-self: start;
  white-space: normal;
}

.ch-measure-forms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.ch-measure,
.ch-build,
.ch-done {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--canvas);
}

.ch-measure label,
.ch-build label,
.ch-done label {
  font-size: 13px;
  font-weight: 700;
}

.ch-measure small,
.ch-build small,
.ch-done small {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.ch-inline {
  display: flex;
  gap: 8px;
  min-width: 0;
}

.ch-inline input {
  flex: 1;
  min-width: 0;
}

.ch-page input[type="url"],
.ch-page input[type="search"] {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #d2d5dc;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
}

.ch-page input[type="file"] {
  font-size: 13px;
}

.ch-page input:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

.ch-checks {
  display: grid;
  gap: 10px;
}

.ch-check {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 12px;
}

.ch-check[data-tone="negative"] {
  border-left-color: var(--dash-negative-ink);
}

.ch-check[data-tone="positive"] {
  border-left-color: var(--dash-positive-ink);
}

.ch-check[data-tone="pending"] {
  border-left-color: var(--dash-pending-ink);
}

.ch-check-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-size: 14px;
}

.ch-check-channel {
  font-size: 13px;
  font-weight: 650;
  color: var(--deep);
}

.ch-check-measured,
.ch-check-how {
  font-size: 13px;
  line-height: 1.55;
  color: #545964;
  overflow-wrap: anywhere;
}

/* Claims and their sources */

.ch-cite {
  display: inline-block;
  justify-self: start;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--mint);
  font-size: 11.5px;
  color: #5f636d;
  overflow-wrap: anywhere;
}

.ch-claims {
  display: grid;
  gap: 10px;
}

.ch-claim {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.ch-claim header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.ch-claim-statement {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}

.ch-claim-why {
  font-size: 13px;
  line-height: 1.55;
  color: #545964;
}

.ch-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 12.5px;
}

.ch-sources li {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.ch-sources a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 650;
  color: var(--deep);
}

.ch-sources a:hover {
  text-decoration: underline;
}

.ch-sources .icon {
  width: 12px;
  height: 12px;
}

.ch-sources span {
  color: #7f838c;
}

/* Markets */

.ch-market-list {
  display: grid;
  gap: 14px;
}

.ch-market-list li {
  display: grid;
  gap: 8px;
}

.ch-market-places {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #40444e;
}

.ch-market-places .icon {
  width: 15px;
  height: 15px;
}

.ch-market-list .dash-button {
  justify-self: start;
}

/* Catalogue */

.ch-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: #7f838c;
}

.ch-crumbs a {
  font-weight: 650;
  color: var(--deep);
}

.ch-crumbs a:hover {
  text-decoration: underline;
}

.ch-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 14px;
  border: 1px solid #d2d5dc;
  border-radius: 14px;
  background: #fff;
}

.ch-search .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #7f838c;
}

.ch-search input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  padding-left: 0;
}

.ch-search input[type="search"]:focus-visible {
  outline: none;
}

.ch-search:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px #00368722;
}

.ch-showing {
  margin-bottom: 8px;
}

/* Assessment */

.ch-assess-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.ch-assess-head h1 {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.05;
  font-weight: 770;
  letter-spacing: -.05em;
  overflow-wrap: anywhere;
}

.ch-assess-aside {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 14px;
}

.ch-assess-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: var(--ch-gap);
  align-items: start;
}

.ch-assess-main,
.ch-assess-side {
  display: grid;
  gap: var(--ch-gap);
  min-width: 0;
}

.ch-assess-side {
  position: sticky;
  top: 18px;
}

.ch-verdict {
  display: grid;
  gap: 12px;
  border-left: 4px solid var(--line);
}

.ch-verdict[data-status="blocked"] {
  border-left-color: var(--dash-negative-ink);
}

.ch-verdict[data-status="recommended"],
.ch-verdict[data-status="added"] {
  border-left-color: var(--green);
}

.ch-verdict[data-status="unknown"] {
  border-left-color: var(--dash-attention-ink);
}

.ch-verdict h2 {
  font-size: 21px;
  font-weight: 750;
  letter-spacing: -.03em;
}

.ch-verdict-body {
  font-size: 15px;
  line-height: 1.6;
  color: #31353f;
}

.ch-verdict > .dash-button {
  justify-self: start;
  white-space: normal;
  text-align: left;
}

.ch-more-blockers summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
  color: var(--deep);
}

.ch-more-blockers[open] summary {
  margin-bottom: 10px;
}

.ch-more-blockers .ch-claim + .ch-claim {
  margin-top: 10px;
}

.ch-ranked {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--canvas);
  font-size: 13.5px;
  line-height: 1.55;
}

.ch-ranked ol {
  margin: 6px 0 6px 20px;
  list-style: decimal;
}

.ch-ranked a {
  font-weight: 650;
  color: var(--deep);
}

.ch-ranked-note {
  font-size: 12.5px;
  color: var(--muted);
}

.ch-pin,
.ch-facts {
  display: grid;
  gap: 12px;
}

.ch-pin h2,
.ch-facts h2 {
  font-size: 16px;
  font-weight: 720;
  letter-spacing: -.02em;
}

.ch-pin p {
  font-size: 13.5px;
  line-height: 1.55;
  color: #545964;
}

.ch-pin-form {
  display: grid;
  gap: 12px;
}

.ch-pin .dash-button {
  width: 100%;
}

.ch-pinned {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 650;
  color: var(--deep) !important;
}

.ch-pinned .icon {
  width: 16px;
  height: 16px;
}

.ch-understand {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #f2d7ad;
  border-radius: 10px;
  background: var(--dash-attention-bg);
  font-size: 13.5px;
  line-height: 1.5;
  color: #5b3a07;
  cursor: pointer;
}

.ch-understand a {
  color: var(--deep);
  font-weight: 650;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ch-understand input {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  accent-color: var(--green);
}

.ch-facts dl {
  display: grid;
  gap: 10px;
}

.ch-facts dl div {
  display: grid;
  gap: 2px;
}

.ch-facts dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #7f838c;
}

.ch-facts dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #31353f;
  overflow-wrap: anywhere;
}

.ch-facts h3 {
  margin: 6px 0 0;
}

.ch-bullets {
  display: grid;
  gap: 6px;
  padding-left: 18px;
  list-style: disc;
  font-size: 13px;
  line-height: 1.5;
  color: #40444e;
}

.ch-irreversible {
  display: grid;
  gap: 12px;
  border-color: #f2d7ad;
}

.ch-irreversible[data-confirmed="true"] {
  border-color: var(--line);
}

.ch-irreversible .ch-section-head {
  margin-bottom: 0;
}

.ch-irreversible .ch-kicker {
  color: var(--dash-attention-ink);
}

.ch-consequence {
  font-size: 15px;
  line-height: 1.6;
  color: #31353f;
}

.ch-answered,
.ch-holding {
  font-size: 13px;
  font-weight: 650;
  color: #545964;
}

.ch-confirm-forms {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.ch-confirm-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* The kit */

.ch-steps {
  display: grid;
  gap: 8px;
  counter-reset: ch-step;
}

.ch-steps li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  padding: 10px 12px 10px 44px;
  position: relative;
  border-radius: 10px;
  background: var(--canvas);
  font-size: 13.5px;
  line-height: 1.55;
  color: #31353f;
  counter-increment: ch-step;
}

.ch-steps li::before {
  content: counter(ch-step);
  position: absolute;
  left: 12px;
  top: 10px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 12px;
  font-weight: 750;
}

.ch-steps li span {
  flex: 1 1 240px;
  overflow-wrap: anywhere;
}

.ch-step-items {
  flex-basis: 100%;
  display: grid;
  gap: 4px;
  padding-left: 18px;
  list-style: disc;
  font-size: 13px;
  color: #40444e;
}

.ch-page .ch-steps .ch-step-items li {
  display: list-item;
  padding: 0;
  background: none;
  counter-increment: none;
}

.ch-page .ch-steps .ch-step-items li::before {
  content: none;
}

.ch-copy-list {
  display: grid;
  gap: 10px;
}

.ch-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.ch-copy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: #494d57;
}

.ch-copy-text {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfc;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: all;
}

.ch-copy small {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.ch-page .copy-button {
  padding: 4px 10px;
  border: 1px solid #d2d5dc;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--deep);
  cursor: pointer;
}

.ch-page .copy-button:hover {
  border-color: var(--green);
}

.ch-page .copy-button[data-copy="copied"] {
  border-color: var(--green);
  background: var(--dash-positive-bg);
}

.ch-sizes-note,
.ch-verify {
  font-size: 13.5px;
  line-height: 1.55;
  color: #545964;
}

.ch-assets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 8px;
  margin-top: 10px;
}

.ch-asset {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.ch-asset:hover {
  border-color: var(--green);
}

.ch-asset .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--deep);
}

.ch-asset span {
  display: grid;
  min-width: 0;
}

.ch-asset strong {
  font-size: 13px;
}

.ch-asset small {
  font-size: 12px;
  color: var(--muted);
}

.ch-done {
  margin-top: 16px;
}

.ch-kit-waiting,
.ch-kit-done {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 16px;
}

.ch-posted {
  font-size: 13px;
  color: var(--deep);
  overflow-wrap: anywhere;
}

/* The entry on the Territory page (until its channel board links here). */

.ch-territory-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  font-size: 14px;
  line-height: 1.5;
  color: #40444e;
}

.ch-territory-link strong {
  color: var(--deep);
}

.ch-territory-link:hover {
  border-color: var(--green);
}

@media (max-width: 1100px) {
  .ch-assess-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ch-assess-side {
    position: static;
    grid-row: 1;
  }
}

@media (max-width: 860px) {
  .ch-counts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ch-assess-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .ch-counts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ch-count strong {
    font-size: 24px;
  }
  .ch-count:last-child:nth-child(odd) {
    grid-column: span 2;
  }
  .ch-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .ch-row-actions {
    flex-wrap: wrap;
  }
  .ch-decision-list li,
  .ch-question-list li {
    flex-direction: column;
    align-items: stretch;
  }
  .ch-inline {
    flex-direction: column;
  }
  .ch-section-head {
    flex-direction: column;
  }
  .ch-search {
    flex-wrap: wrap;
    padding: 10px;
  }
  .ch-search .dash-button {
    width: 100%;
  }
}

/* Visibility score (/app/<workspace>/score). Owner: dashboard-core.
   Rendered by crates/web/src/pages/app/score.rs: the dial, the summary strip, the trend
   chart (inline SVG), the components with their checks, and the re-score timeline.
   Scoped under [data-surface="score"]. */

[data-surface="score"] .score-dial {
  position: relative;
  width: 168px;
  height: 168px;
}

[data-surface="score"] .score-dial svg {
  width: 100%;
  height: 100%;
}

[data-surface="score"] .score-dial-track {
  fill: none;
  stroke: #e9eaee;
  stroke-width: 10;
}

[data-surface="score"] .score-dial-arc {
  fill: none;
  stroke: var(--green);
  stroke-width: 10;
  stroke-linecap: round;
}

[data-surface="score"] .score-dial-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
}

[data-surface="score"] .score-dial-value strong {
  font-size: 50px;
  font-weight: 780;
  line-height: 1;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}

[data-surface="score"] .score-dial-value small {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

/* Summary strip */

[data-surface="score"] .score-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 32px;
  padding: 16px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

[data-surface="score"] .score-summary p {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

[data-surface="score"] .score-summary strong {
  font-size: 26px;
  font-weight: 760;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

[data-surface="score"] .score-summary p[data-tone="positive"] strong {
  color: var(--success);
}

[data-surface="score"] .score-summary span {
  font-size: 13px;
  color: var(--muted);
}

[data-surface="score"] .score-readiness {
  padding-left: 24px;
  border-left: 1px solid var(--line);
}

[data-surface="score"] .score-sources {
  flex-basis: 100%;
  font-size: 13px;
  color: var(--muted);
}

[data-surface="score"] .score-measured {
  margin-left: auto;
  font-size: 13px;
  color: var(--muted);
}

/* Trend */

[data-surface="score"] .score-trend {
  margin-top: 16px;
  padding: 20px 22px 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
}

[data-surface="score"] .score-trend header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
}

[data-surface="score"] h2 {
  font-size: 17px;
  font-weight: 720;
  letter-spacing: -.025em;
}

[data-surface="score"] .score-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12.5px;
  color: var(--muted);
}

[data-surface="score"] .score-legend span::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 0;
  margin-right: 6px;
  vertical-align: middle;
  border-top: 2px solid var(--green);
}

[data-surface="score"] .score-legend [data-key="baseline"]::before {
  border-top: 2px solid #9ea2ac;
}

[data-surface="score"] .score-legend [data-key="target"]::before {
  border-top: 2px dashed #c2700a;
}

[data-surface="score"] .score-chart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 6px;
  overflow: visible;
}

[data-surface="score"] .score-grid {
  stroke: #eff0f3;
}

[data-surface="score"] .score-axis {
  fill: #8e9198;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

[data-surface="score"] .score-baseline {
  stroke: #9ea2ac;
  stroke-width: 1.5;
}

[data-surface="score"] .score-target {
  stroke: #c2700a;
  stroke-width: 1.5;
  stroke-dasharray: 6 6;
}

[data-surface="score"] .score-target-label {
  fill: #9a5200;
  font-size: 11px;
  font-weight: 700;
}

[data-surface="score"] .score-area {
  fill: #0036870f;
}

[data-surface="score"] .score-line {
  fill: none;
  stroke: var(--green);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-surface="score"] .score-point circle {
  fill: #fff;
  stroke: var(--green);
  stroke-width: 2.5;
}

[data-surface="score"] .score-point[data-last] circle {
  fill: var(--green);
  stroke: #fff;
  stroke-width: 3;
}

[data-surface="score"] .score-point-value {
  fill: var(--ink);
  font-size: 12px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

/* Components and checks */

[data-surface="score"] .score-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}

[data-surface="score"] .score-section-lede {
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

[data-surface="score"] .score-components > ol {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

[data-surface="score"] .score-component {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

[data-surface="score"] .score-component[data-measured="false"] {
  padding: 14px 18px;
  border-style: dashed;
  background: #fbfcfc;
}

[data-surface="score"] .score-component-head {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(80px, 1.2fr) auto;
  align-items: center;
  gap: 16px;
  list-style: none;
}

[data-surface="score"] summary.score-component-head {
  padding: 14px 18px;
  cursor: pointer;
}

[data-surface="score"] summary.score-component-head::-webkit-details-marker {
  display: none;
}

[data-surface="score"] .score-component[data-measured="false"] .score-component-head {
  grid-template-columns: minmax(0, 1fr) auto;
}

[data-surface="score"] .score-component-name {
  display: grid;
  gap: 2px;
  min-width: 0;
}

[data-surface="score"] .score-component-name strong {
  font-size: 15px;
  letter-spacing: -.015em;
}

[data-surface="score"] .score-component-name small,
[data-surface="score"] .score-component-points small {
  font-size: 12px;
  color: var(--muted);
}

[data-surface="score"] .score-bar {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #eeeff2;
}

[data-surface="score"] .score-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #124ea7, var(--green));
  transform-origin: left center;
  transform: scaleX(0);
}

[data-surface="score"] .score-bar span[data-level="1"] { transform: scaleX(.1); }
[data-surface="score"] .score-bar span[data-level="2"] { transform: scaleX(.2); }
[data-surface="score"] .score-bar span[data-level="3"] { transform: scaleX(.3); }
[data-surface="score"] .score-bar span[data-level="4"] { transform: scaleX(.4); }
[data-surface="score"] .score-bar span[data-level="5"] { transform: scaleX(.5); }
[data-surface="score"] .score-bar span[data-level="6"] { transform: scaleX(.6); }
[data-surface="score"] .score-bar span[data-level="7"] { transform: scaleX(.7); }
[data-surface="score"] .score-bar span[data-level="8"] { transform: scaleX(.8); }
[data-surface="score"] .score-bar span[data-level="9"] { transform: scaleX(.9); }
[data-surface="score"] .score-bar span[data-level="10"] { transform: scaleX(1); }

[data-surface="score"] .score-component-points {
  display: grid;
  justify-items: end;
  min-width: 110px;
}

[data-surface="score"] .score-component-points strong {
  font-size: 22px;
  font-weight: 760;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

[data-surface="score"] .score-note {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

[data-surface="score"] .score-checks {
  display: grid;
  margin: 0;
  padding: 0 18px 10px;
  list-style: none;
}

[data-surface="score"] .score-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #eff0f3;
  scroll-margin-top: 90px;
}

[data-surface="score"] .score-check-mark {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: #d64545;
  box-shadow: 0 0 0 4px #fdeeee;
}

[data-surface="score"] .score-check[data-outcome="pass"] .score-check-mark {
  background: #12a777;
  box-shadow: 0 0 0 4px #e9f7f0;
}

[data-surface="score"] .score-check[data-outcome="partial"] .score-check-mark {
  background: #e08a1e;
  box-shadow: 0 0 0 4px #fff3e2;
}

[data-surface="score"] .score-check-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

[data-surface="score"] .score-check-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

[data-surface="score"] .score-check-title strong {
  font-size: 14px;
}

[data-surface="score"] .score-check-title small {
  font-size: 11.5px;
  color: #8e9198;
  font-variant-numeric: tabular-nums;
}

[data-surface="score"] .score-evidence,
[data-surface="score"] .score-fix {
  font-size: 13px;
  line-height: 1.55;
  color: #41454f;
  overflow-wrap: anywhere;
}

[data-surface="score"] .score-evidence a {
  color: var(--deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

[data-surface="score"] .score-fix span {
  margin-right: 6px;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9a5200;
}

[data-surface="score"] .score-check .dash-evidence {
  font-size: 12.5px;
}

/* Timeline */

[data-surface="score"] .score-timeline {
  position: sticky;
  top: calc(var(--app-header-height) + 16px);
  padding: 20px 20px 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}

[data-surface="score"] .score-timeline > ol {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

[data-surface="score"] .score-timeline > ol > li {
  position: relative;
  padding: 0 0 16px 22px;
}

[data-surface="score"] .score-timeline > ol > li::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
}

[data-surface="score"] .score-timeline > ol > li::after {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 0;
  left: 8px;
  width: 1px;
  background: #e5e7eb;
}

[data-surface="score"] .score-timeline > ol > li:last-child::after {
  display: none;
}

[data-surface="score"] .score-timeline > ol > li[data-baseline]::before {
  background: #1d5fb8;
}

[data-surface="score"] .score-timeline-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

[data-surface="score"] .score-timeline-head strong {
  font-size: 20px;
  font-weight: 760;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

[data-surface="score"] .score-timeline-head > span:not(.dash-pill) {
  font-size: 12.5px;
  color: var(--muted);
}

[data-surface="score"] .score-changes {
  display: grid;
  gap: 3px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

[data-surface="score"] .score-changes li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #41454f;
}

[data-surface="score"] .score-changes li span {
  margin-right: auto;
}

[data-surface="score"] .score-changes small {
  font-size: 11px;
  font-weight: 700;
  color: #b42318;
}

[data-surface="score"] .score-changes small[data-outcome="pass"] {
  color: var(--dash-positive-ink);
}

[data-surface="score"] .score-changes small[data-outcome="partial"] {
  color: var(--dash-attention-ink);
}

@media (prefers-reduced-motion: no-preference) {
  [data-surface="score"] details[open] .score-bar span {
    transition: transform 1s var(--motion-ease-out);
  }
}

@media (max-width: 1100px) {
  [data-surface="score"] .score-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-surface="score"] .score-timeline {
    position: static;
  }
}

@media (max-width: 860px) {
  [data-surface="score"] .score-dial {
    width: 132px;
    height: 132px;
  }
  [data-surface="score"] .score-dial-value strong {
    font-size: 40px;
  }
  [data-surface="score"] .score-measured {
    margin-left: 0;
  }
}

@media (max-width: 600px) {
  [data-surface="score"] .score-component-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  [data-surface="score"] .score-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  [data-surface="score"] .score-trend {
    padding: 16px 12px 8px;
  }
  [data-surface="score"] .score-summary {
    gap: 8px 20px;
    padding: 14px 16px;
  }
  [data-surface="score"] .score-checks {
    padding: 0 14px 8px;
  }
  [data-surface="score"] summary.score-component-head {
    padding: 14px 14px;
  }
}

/* Needs a look: the costliest failing checks as evidence-first cards (cards-ux; the cards
   themselves are in cards.css). */
[data-surface="score"] .score-needs {
  margin-top: 26px;
}

[data-surface="score"] .score-needs > header h2 {
  font-size: 19px;
  font-weight: 720;
  letter-spacing: -.025em;
}

[data-surface="score"] .score-needs > header p {
  max-width: 72ch;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

[data-surface="score"] .score-needs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 14px;
  margin-top: 14px;
}

[data-surface="score"] .score-summary a[data-count] {
  color: inherit;
  text-decoration: none;
}

[data-surface="score"] .score-summary a[data-count]:hover strong {
  text-decoration: underline;
  text-underline-offset: 4px;
}

[data-surface="score"] .score-components,
[data-surface="score"] .score-timeline {
  scroll-margin-top: 90px;
}

/* The check view (/app/<workspace>/score/checks/<check id>) and the exceptions list
   (/app/<workspace>/score/exceptions). Owner: audit-checks (Part 2).
   Rendered by crates/web/src/pages/app/checks.rs; also the item links on the Score page
   (.score-check-links). Scoped under [data-surface="score"]. */

[data-surface="score"] .checks-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--muted);
}

[data-surface="score"] .checks-crumbs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 650;
  color: var(--deep);
  text-decoration: none;
}

[data-surface="score"] .checks-crumbs a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

[data-surface="score"] .checks-crumbs .icon {
  width: 14px;
  height: 14px;
  transform: rotate(180deg);
}

/* Header aside: status, cost and the re-check button */

[data-surface="score"] .checks-status {
  display: grid;
  justify-items: end;
  gap: 8px;
  min-width: 220px;
  text-align: right;
}

[data-surface="score"] .checks-status .dash-pill {
  padding: 5px 12px;
  font-size: 13px;
}

[data-surface="score"] .checks-cost {
  font-size: 13px;
  color: var(--muted);
}

[data-surface="score"] .checks-recheck .icon {
  width: 15px;
  height: 15px;
}

[data-surface="score"] .checks-running {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 11px;
  background: var(--dash-progress-bg);
  color: var(--dash-progress-ink);
  font-size: 13px;
  font-weight: 600;
}

[data-surface="score"] .checks-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: checks-spin 1s linear infinite;
}

@keyframes checks-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Facts strip */

[data-surface="score"] .checks-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 30px;
  padding: 16px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

[data-surface="score"] .checks-facts p {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

[data-surface="score"] .checks-facts strong {
  font-size: 26px;
  font-weight: 760;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

[data-surface="score"] .checks-facts span {
  font-size: 13px;
  color: var(--muted);
}

[data-surface="score"] .checks-facts p[data-tone="positive"] strong {
  color: var(--success);
}

[data-surface="score"] .checks-facts p[data-tone="negative"] strong {
  color: var(--dash-negative-ink);
}

[data-surface="score"] .checks-measured {
  margin-left: auto;
  font-size: 13px;
  color: var(--muted);
}

/* Layout */

[data-surface="score"] .checks-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}

[data-surface="score"] .checks-items,
[data-surface="score"] .checks-card,
[data-surface="score"] .checks-group {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
}

[data-surface="score"] .checks-aside {
  display: grid;
  gap: 14px;
}

[data-surface="score"] .checks-card h2,
[data-surface="score"] .checks-items h2,
[data-surface="score"] .checks-group h2 {
  font-size: 16px;
}

[data-surface="score"] .checks-card > p,
[data-surface="score"] .checks-quiet {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #41454f;
}

[data-surface="score"] .checks-quiet {
  color: var(--muted);
}

[data-surface="score"] .checks-card .dash-evidence {
  margin-top: 10px;
}

[data-surface="score"] .checks-evidence {
  font-size: 13px;
  color: var(--muted);
}

[data-surface="score"] .checks-fix {
  margin-top: 10px;
  padding: 10px 12px;
  border-left: 3px solid #e08a1e;
  border-radius: 4px 10px 10px 4px;
  background: #fffaf2;
  font-size: 13.5px;
  line-height: 1.55;
  color: #3c2c12;
}

[data-surface="score"] .checks-fix[data-done="true"] {
  border-left-color: var(--success);
  background: var(--dash-positive-bg);
  color: var(--dash-positive-ink);
}

/* Items */

[data-surface="score"] .checks-items-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

[data-surface="score"] .checks-list {
  display: grid;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

[data-surface="score"] .checks-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid #eff0f3;
  scroll-margin-top: 90px;
}

[data-surface="score"] .checks-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--dash-negative-bg);
  color: var(--dash-negative-ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

[data-surface="score"] .checks-mark::before {
  content: "✕";
}

[data-surface="score"] .checks-item[data-outcome="pass"] .checks-mark {
  background: var(--dash-positive-bg);
  color: var(--dash-positive-ink);
}

[data-surface="score"] .checks-item[data-outcome="pass"] .checks-mark::before {
  content: "✓";
}

[data-surface="score"] .checks-item[data-outcome="partial"] .checks-mark {
  background: var(--dash-attention-bg);
  color: var(--dash-attention-ink);
}

[data-surface="score"] .checks-item[data-outcome="partial"] .checks-mark::before {
  content: "–";
}

[data-surface="score"] .checks-item[data-excepted="true"] .checks-mark {
  background: var(--dash-neutral-bg);
  color: var(--dash-neutral-ink);
}

[data-surface="score"] .checks-item-body {
  display: grid;
  gap: 5px;
  min-width: 0;
}

[data-surface="score"] .checks-item-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

[data-surface="score"] .checks-item-name {
  font-size: 14.5px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

[data-surface="score"] .checks-view {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--deep);
}

[data-surface="score"] .checks-view .icon {
  width: 12px;
  height: 12px;
  transform: rotate(-45deg);
}

[data-surface="score"] .checks-reason-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: #41454f;
}

[data-surface="score"] .checks-seen {
  font-size: 12.5px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

[data-surface="score"] .checks-seen code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--canvas);
  border: 1px solid var(--line);
  font-size: 12px;
  color: #31353f;
}

[data-surface="score"] .checks-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="score"] .checks-flags li {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--dash-progress-bg);
  color: var(--dash-progress-ink);
  font-size: 11.5px;
  font-weight: 650;
}

[data-surface="score"] .checks-badge a {
  color: inherit;
  text-decoration: none;
}

[data-surface="score"] .checks-badge {
  justify-self: start;
  margin: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--dash-neutral-bg);
  color: var(--dash-neutral-ink);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

[data-surface="score"] .checks-badge[data-tone="positive"] {
  background: var(--dash-positive-bg);
  color: var(--dash-positive-ink);
}

[data-surface="score"] .checks-badge[data-tone="attention"] {
  background: var(--dash-attention-bg);
  color: var(--dash-attention-ink);
}

[data-surface="score"] .checks-badge[data-tone="negative"] {
  background: var(--dash-negative-bg);
  color: var(--dash-negative-ink);
}

[data-surface="score"] .checks-none {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--dash-positive-bg);
  color: var(--dash-positive-ink);
  font-size: 14px;
  font-weight: 600;
}

[data-surface="score"] .checks-none .icon {
  width: 18px;
  height: 18px;
}

[data-surface="score"] .checks-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--deep);
}

[data-surface="score"] .checks-more .icon {
  width: 14px;
  height: 14px;
}

/* Answer forms (native <details>, no script) */

[data-surface="score"] .checks-answer {
  margin-top: 4px;
}

[data-surface="score"] .checks-answer > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid #d6d8de;
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  font-weight: 650;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

[data-surface="score"] .checks-answer > summary::-webkit-details-marker {
  display: none;
}

[data-surface="score"] .checks-answer > summary::after {
  content: "▾";
  font-size: 11px;
  color: var(--muted);
}

[data-surface="score"] .checks-answer[open] > summary::after {
  content: "▴";
}

[data-surface="score"] .checks-answer > summary:hover {
  border-color: #9ea2ac;
}

[data-surface="score"] .checks-answer > summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

[data-surface="score"] .checks-answer form {
  display: grid;
  gap: 12px;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--canvas);
}

[data-surface="score"] .checks-answer form .dash-button {
  justify-self: start;
}

[data-surface="score"] .checks-bulk {
  margin-top: 12px;
}

[data-surface="score"] .checks-kinds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

[data-surface="score"] .checks-kinds label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

[data-surface="score"] .checks-kinds label:has(input:checked) {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green) inset;
}

[data-surface="score"] .checks-kinds input {
  margin-top: 3px;
  accent-color: var(--green);
}

[data-surface="score"] .checks-kinds span {
  display: grid;
  gap: 2px;
}

[data-surface="score"] .checks-kinds strong {
  font-size: 13.5px;
}

[data-surface="score"] .checks-kinds small {
  font-size: 12px;
  color: var(--muted);
}

[data-surface="score"] .checks-reason {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #31353f;
}

[data-surface="score"] .checks-reason textarea {
  width: 100%;
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid #d2d5db;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  resize: vertical;
}

[data-surface="score"] .checks-reason textarea:focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
  border-color: transparent;
}

[data-surface="score"] .checks-launch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #41454f;
}

[data-surface="score"] .checks-launch input {
  accent-color: var(--green);
}

/* Exception cards */

[data-surface="score"] .checks-exceptions,
[data-surface="score"] .checks-group-list {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

[data-surface="score"] .checks-group-list {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}

[data-surface="score"] .checks-group + .checks-group {
  margin-top: 16px;
}

[data-surface="score"] .checks-exception {
  display: grid;
  gap: 8px;
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: 14px;
  background: #fff;
  scroll-margin-top: 90px;
}

[data-surface="score"] .checks-exception[data-tone="attention"] {
  border-left-color: #e08a1e;
  background: #fffcf7;
}

[data-surface="score"] .checks-exception[data-tone="negative"] {
  border-left-color: #d64545;
  background: #fffafa;
}

[data-surface="score"] .checks-exception[data-tone="neutral"] {
  border-left-color: #c6c9d0;
}

[data-surface="score"] .checks-exception:target {
  box-shadow: 0 0 0 3px #00368733;
}

[data-surface="score"] .checks-exception header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

[data-surface="score"] .checks-exception-kind {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

[data-surface="score"] .checks-exception-item {
  font-size: 14px;
  overflow-wrap: anywhere;
}

[data-surface="score"] .checks-exception-item a {
  color: var(--deep);
}

[data-surface="score"] .checks-exception blockquote {
  margin: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--canvas);
  font-size: 13.5px;
  line-height: 1.5;
  color: #31353f;
}

[data-surface="score"] .checks-exception blockquote::before {
  content: "“";
}

[data-surface="score"] .checks-exception blockquote::after {
  content: "”";
}

[data-surface="score"] .checks-exception-meta {
  font-size: 12.5px;
  color: var(--muted);
}

[data-surface="score"] .checks-exception-note {
  font-size: 13px;
  font-weight: 600;
  color: var(--dash-negative-ink);
}

[data-surface="score"] .checks-exception[data-tone="neutral"] .checks-exception-note {
  font-weight: 500;
  color: var(--muted);
}

[data-surface="score"] .checks-exception-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

[data-surface="score"] .checks-exception-actions .dash-button {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 13px;
}

/* Score page: each check's link to its items */

[data-surface="score"] .score-check-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

[data-surface="score"] .score-check-links:empty {
  display: none;
}

/* Score page: the exceptions summary in the summary strip */

[data-surface="score"] .score-exceptions {
  flex-basis: 100%;
  padding-top: 10px;
  border-top: 1px solid #eff0f3;
}

[data-surface="score"] .score-exceptions .dash-evidence span,
[data-surface="score"] .score-check-links .dash-evidence span {
  min-width: 0;
  overflow-wrap: anywhere;
}

[data-surface="score"] .score-check-links .dash-evidence {
  max-width: 100%;
}

/* Re-check states */

[data-surface="score"] .checks-recheck-failed {
  display: grid;
  justify-items: end;
  gap: 8px;
  max-width: 320px;
}

[data-surface="score"] .checks-recheck-failed p,
[data-surface="score"] .checks-recheck-note {
  padding: 8px 12px;
  border-radius: 11px;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
}

[data-surface="score"] .checks-recheck-failed p {
  background: var(--dash-attention-bg);
  color: var(--dash-attention-ink);
}

[data-surface="score"] .checks-recheck-note {
  max-width: 320px;
  background: var(--dash-neutral-bg);
  color: var(--dash-neutral-ink);
}

@media (max-width: 960px) {
  [data-surface="score"] .checks-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  [data-surface="score"] .checks-status {
    justify-items: start;
    min-width: 0;
    text-align: left;
  }

  [data-surface="score"] .checks-measured {
    margin-left: 0;
  }

  [data-surface="score"] .checks-facts {
    gap: 8px 18px;
    padding: 14px 16px;
  }

  [data-surface="score"] .checks-facts strong {
    font-size: 22px;
  }

  [data-surface="score"] .checks-items,
  [data-surface="score"] .checks-card,
  [data-surface="score"] .checks-group {
    padding: 16px 14px;
  }

  [data-surface="score"] .checks-kinds {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-surface="score"] .checks-spinner {
    animation: none;
  }
}

/* Pieces shared by the Work surfaces the pages builder owns (Plan, Calendar, Content):
   the who-does-it badge, filter tabs whose counts are links, breadcrumbs.
   Rendered by crates/web/src/pages/app/work.rs. Owner: pages. Every class is prefixed
   `wk-` and scoped to the three surfaces. */

:is([data-surface="plan"], [data-surface="calendar"], [data-surface="content"]) {
  --wk-outpost-bg: #e9eff7;
  --wk-outpost-ink: #0b377a;
  --wk-you-bg: #fff3e2;
  --wk-you-ink: #8a4a00;
  --wk-connect-bg: #eef1fb;
  --wk-connect-ink: #3949a3;
  --wk-panel-shadow: 0 1px 2px #101a290a, 0 18px 40px -32px #101a2940;
}

/* Who does it */

:is([data-surface="plan"], [data-surface="calendar"], [data-surface="content"]) .wk-who {
  --who-bg: var(--wk-outpost-bg);
  --who-ink: var(--wk-outpost-ink);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 2px 9px 2px 7px;
  border-radius: 999px;
  background: var(--who-bg);
  color: var(--who-ink);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
}

:is([data-surface="plan"], [data-surface="calendar"], [data-surface="content"]) .wk-who span {
  min-width: 0;
  overflow-wrap: anywhere;
}

:is([data-surface="plan"], [data-surface="calendar"], [data-surface="content"]) .wk-who .icon {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

:is([data-surface="plan"], [data-surface="calendar"], [data-surface="content"]) .wk-who[data-who="you"] {
  --who-bg: var(--wk-you-bg);
  --who-ink: var(--wk-you-ink);
}

:is([data-surface="plan"], [data-surface="calendar"], [data-surface="content"]) .wk-who[data-who="connect"] {
  --who-bg: var(--wk-connect-bg);
  --who-ink: var(--wk-connect-ink);
}

/* Counts beside a label. */

:is([data-surface="plan"], [data-surface="calendar"], [data-surface="content"]) .wk-count {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--canvas);
  color: inherit;
  font-size: 12.5px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

/* Breadcrumbs */

:is([data-surface="plan"], [data-surface="calendar"], [data-surface="content"]) .wk-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #7f838c;
}

:is([data-surface="plan"], [data-surface="calendar"], [data-surface="content"]) .wk-crumbs a {
  font-weight: 650;
  color: var(--deep);
  text-underline-offset: 3px;
}

:is([data-surface="plan"], [data-surface="calendar"], [data-surface="content"]) .wk-crumbs a:hover {
  text-decoration: underline;
}

:is([data-surface="plan"], [data-surface="calendar"], [data-surface="content"]) .wk-crumbs [aria-current] {
  min-width: 0;
  overflow-wrap: anywhere;
}


/* Plan surface (/app/<workspace>/plan and /plan/<task>). Owner: pages (Part 2; fix batch
   2026-10-21 §6). Rendered by crates/web/src/pages/app/plan/. Scope selectors under
   [data-surface="plan"]; classes are prefixed `plan-`. The rows, groups, sidebar, toolbar
   and the task panel are the shared ones in ui.css (the Calendar list uses the same row);
   the who badge and crumbs are in work.css. On narrow screens the sidebar is a "Filters"
   sheet. */

[data-surface="plan"] .plan-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* Header: the title, the campaign, and the ⋯ menu (export, calendar feed). No "Add task":
   Outpost plans every task (founder, 2026-10-21). */

[data-surface="plan"] .plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

[data-surface="plan"] .plan-head h1 {
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.05;
  font-weight: 770;
  letter-spacing: -.05em;
}

[data-surface="plan"] .plan-head-side {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 6px;
}

[data-surface="plan"] .plan-campaign {
  display: grid;
  justify-items: end;
  font-size: 13px;
  color: var(--muted);
  text-align: right;
}

[data-surface="plan"] .plan-campaign strong {
  color: var(--ink);
  font-size: 13.5px;
}

[data-surface="plan"] .plan-head-side .ui-menu > summary {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
}

/* Launch day */

[data-surface="plan"] .plan-launch {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid #d8d1f6;
  border-radius: 18px;
  background: linear-gradient(135deg, #f6f3ff, #fff 70%);
}

[data-surface="plan"] .plan-launch > div {
  flex: 1;
  min-width: 0;
}

[data-surface="plan"] .plan-launch h2 {
  font-size: 16px;
  letter-spacing: -.02em;
}

[data-surface="plan"] .plan-launch p {
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

[data-surface="plan"] .plan-launch-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #ece7ff;
  color: #5543c0;
}

[data-surface="plan"] .plan-launch-icon .icon {
  width: 22px;
  height: 22px;
}

/* The list with its sidebar */

[data-surface="plan"] .plan-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

[data-surface="plan"] .plan-side {
  position: sticky;
  top: calc(var(--app-header-height, 64px) + 20px);
}

[data-surface="plan"] .plan-side > summary {
  display: none;
}

[data-surface="plan"] .plan-side-body {
  display: grid;
  gap: 22px;
  padding: 14px 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

[data-surface="plan"] .plan-statuses .ui-side-link > .wgroup-dot {
  flex-shrink: 0;
}

[data-surface="plan"] .plan-main {
  display: grid;
  gap: 16px;
  min-width: 0;
}

[data-surface="plan"] .plan-narrowed {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--canvas);
  font-size: 13.5px;
  color: var(--muted);
}

[data-surface="plan"] .plan-narrowed a {
  color: var(--deep);
  font-weight: 650;
}

[data-surface="plan"] .plan-list {
  min-width: 0;
}

[data-surface="plan"] .plan-list .wgroup[data-group="waiting"] > summary .wgroup-count {
  background: var(--dash-attention-bg);
  color: var(--dash-attention-ink);
}

[data-surface="plan"] .plan-empty[hidden] {
  display: none;
}

@media (max-width: 1100px) {
  [data-surface="plan"] .plan-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  [data-surface="plan"] .plan-side {
    position: static;
  }

  /* The sidebar becomes a "Filters" sheet. */
  [data-surface="plan"] .plan-side > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    color: var(--ink);
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
  }

  [data-surface="plan"] .plan-side > summary::-webkit-details-marker {
    display: none;
  }

  [data-surface="plan"] .plan-side > summary .icon {
    width: 16px;
    height: 16px;
  }

  [data-surface="plan"] .plan-side-body {
    margin-top: 10px;
  }

  [data-surface="plan"] .plan-side[data-sheet][open] .plan-side-body {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 61;
    max-height: 82vh;
    overflow-y: auto;
    margin: 0;
    padding: 18px 12px 24px;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -20px 50px -20px #101a2955;
  }

  [data-surface="plan"] .plan-side[data-sheet][open]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 60;
    background: #13161e29;
  }

  [data-surface="plan"] .plan-head {
    flex-direction: column;
  }

  [data-surface="plan"] .plan-head-side {
    width: 100%;
    justify-content: space-between;
    padding-top: 0;
  }

  [data-surface="plan"] .plan-campaign {
    justify-items: start;
    text-align: left;
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 1100px) {
  [data-surface="plan"] .plan-side[data-sheet][open] .plan-side-body {
    animation: plan-sheet-in .38s var(--motion-ease-out);
  }
}

@keyframes plan-sheet-in {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
}

/* One task */

[data-surface="plan"] .plan-task-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 24px;
}

[data-surface="plan"] .plan-task-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: linear-gradient(145deg, #e9eff7, #f4f6fa);
  color: var(--deep);
}

[data-surface="plan"] .plan-task-icon .icon {
  width: 26px;
  height: 26px;
}

[data-surface="plan"] .plan-task-heading {
  min-width: 0;
}

[data-surface="plan"] .plan-task-heading h1 {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.12;
  font-weight: 770;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}

[data-surface="plan"] .plan-task-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
  font-size: 14.5px;
  color: #50545f;
}

[data-surface="plan"] .plan-task-layout {
  container: plan-task / inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

@media (min-width: 1180px) {
  [data-surface="plan"] .plan-task-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }

  [data-surface="plan"] .plan-task-side {
    position: sticky;
    top: 92px;
  }
}

[data-surface="plan"] .plan-task-main,
[data-surface="plan"] .plan-task-side {
  display: grid;
  gap: 16px;
  min-width: 0;
}

[data-surface="plan"] .plan-panel {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--wk-panel-shadow);
}

[data-surface="plan"] .plan-panel h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -.02em;
}

[data-surface="plan"] .plan-panel h3 {
  margin: 18px 0 8px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7f838c;
}

[data-surface="plan"] .plan-panel > p,
[data-surface="plan"] .plan-panel li {
  font-size: 14.5px;
  line-height: 1.6;
  color: #393d48;
}

[data-surface="plan"] .plan-panel[data-tone="attention"] {
  border-color: #f0d9b5;
  background: linear-gradient(135deg, #fffaf2, #fff 75%);
}

[data-surface="plan"] .plan-panel[data-tone="attention"] .dash-button,
[data-surface="plan"] .plan-instructions .dash-button {
  margin-top: 14px;
}

[data-surface="plan"] .plan-hold h2 .icon {
  width: 17px;
  height: 17px;
  color: #9a5200;
}

[data-surface="plan"] .plan-impact {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f3f6fb;
  font-size: 14px;
  color: var(--deep);
}

[data-surface="plan"] .plan-impact .icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
}

[data-surface="plan"] .plan-who-line {
  margin-bottom: 8px;
}

[data-surface="plan"] .plan-who-line .wk-who {
  padding: 5px 12px 5px 10px;
  font-size: 13px;
}

[data-surface="plan"] .plan-who-line .wk-who .icon {
  width: 14px;
  height: 14px;
}

[data-surface="plan"] .plan-who-note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

[data-surface="plan"] .plan-instructions {
  margin-top: 6px;
}

[data-surface="plan"] .plan-window {
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff3e2;
  font-size: 13.5px;
  font-weight: 650;
  color: #8a4a00;
}

[data-surface="plan"] .plan-fields {
  display: grid;
  gap: 12px;
}

[data-surface="plan"] .plan-field {
  display: grid;
  gap: 6px;
}

[data-surface="plan"] .plan-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

[data-surface="plan"] .plan-copy {
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--deep);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

[data-surface="plan"] .plan-copy:hover {
  border-color: var(--green);
}

[data-surface="plan"] .plan-copy[data-copied="true"] {
  border-color: var(--green);
  background: #e9eff7;
}

[data-surface="plan"] .plan-copy[hidden] {
  display: none;
}

[data-surface="plan"] .plan-field label {
  font-size: 12.5px;
  font-weight: 700;
  color: #50545f;
}

[data-surface="plan"] .plan-field textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #d6d8de;
  border-radius: 11px;
  background: var(--canvas);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.55;
  resize: vertical;
}

[data-surface="plan"] .plan-field textarea:focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
  background: #fff;
}

[data-surface="plan"] .plan-checklist,
[data-surface="plan"] .plan-steps,
[data-surface="plan"] .plan-pages,
[data-surface="plan"] .plan-facts,
[data-surface="plan"] .plan-related,
[data-surface="plan"] .plan-linked,
[data-surface="plan"] .plan-history {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="plan"] .plan-checklist li {
  display: grid;
  gap: 2px;
  padding-left: 22px;
  background: no-repeat left 7px / 10px 10px radial-gradient(circle, var(--green) 40%, transparent 45%);
}

[data-surface="plan"] .plan-checklist li span {
  font-size: 13.5px;
  color: var(--muted);
}

[data-surface="plan"] .plan-steps {
  counter-reset: plan-step;
}

[data-surface="plan"] .plan-steps li {
  position: relative;
  padding-left: 34px;
  counter-increment: plan-step;
}

[data-surface="plan"] .plan-steps li::before {
  content: counter(plan-step);
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e9eff7;
  color: var(--deep);
  font-size: 12px;
  font-weight: 750;
}

[data-surface="plan"] .plan-pages li {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--canvas);
}

[data-surface="plan"] .plan-pages code {
  font-size: 13px;
  overflow-wrap: anywhere;
}

[data-surface="plan"] .plan-fix {
  margin-bottom: 10px;
}

[data-surface="plan"] .plan-brief {
  display: grid;
  gap: 4px 0;
}

[data-surface="plan"] .plan-brief dt {
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #7f838c;
}

[data-surface="plan"] .plan-brief dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
}

[data-surface="plan"] .plan-facts li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--canvas);
  font-size: 13.5px;
}

[data-surface="plan"] .plan-boost-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
}

[data-surface="plan"] .plan-boost-price strong {
  font-size: 26px;
  letter-spacing: -.03em;
}

[data-surface="plan"] .plan-boost-free {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  font-size: 14px;
  color: var(--deep);
}

[data-surface="plan"] .plan-boost-free .icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
}

[data-surface="plan"] .plan-boost-note,
[data-surface="plan"] .plan-review-time {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--muted);
}

[data-surface="plan"] .plan-warnings {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fdeeee;
}

[data-surface="plan"] .plan-warnings h3 {
  margin-top: 0;
  color: #b42318;
}

[data-surface="plan"] .plan-warnings li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px 8px;
}

[data-surface="plan"] .plan-warnings .icon {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 4px;
  color: #b42318;
}

[data-surface="plan"] .plan-warnings a {
  font-weight: 650;
  color: #b42318;
  text-decoration: underline;
}

[data-surface="plan"] .plan-linked a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 650;
  color: inherit;
}

[data-surface="plan"] .plan-linked a:hover {
  border-color: var(--green);
  color: var(--deep);
}

[data-surface="plan"] .plan-receipt-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

[data-surface="plan"] .plan-receipt-url {
  display: block;
  margin: 10px 0 4px;
  font-size: 13.5px;
  color: var(--deep);
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-underline-offset: 3px;
}

[data-surface="plan"] .plan-receipt .dash-button {
  margin-top: 12px;
}

[data-surface="plan"] .plan-history li {
  display: grid;
  gap: 2px;
  padding: 0 0 10px 18px;
  border-left: 2px solid var(--line);
  margin-left: 4px;
}

[data-surface="plan"] .plan-history-text {
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

[data-surface="plan"] .plan-history-meta {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: #7f838c;
}

[data-surface="plan"] .plan-empty-line {
  font-size: 14px;
  color: var(--muted);
}

[data-surface="plan"] .plan-day-value {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
}

[data-surface="plan"] .plan-day-value .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--green);
}

/* Changes */

[data-surface="plan"] .plan-actions {
  display: grid;
  gap: 10px;
}

[data-surface="plan"] .plan-actions h2 {
  margin-bottom: 0;
}

[data-surface="plan"] .plan-actions-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

[data-surface="plan"] .plan-action-form {
  display: grid;
  gap: 8px;
}

[data-surface="plan"] .plan-action-form .dash-button {
  width: 100%;
}

[data-surface="plan"] .plan-action-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

[data-surface="plan"] .plan-action-pair:empty {
  display: none;
}

[data-surface="plan"] .plan-action-pair [data-action="move-earlier"] .icon {
  transform: rotate(-90deg);
}

[data-surface="plan"] .plan-action-pair [data-action="move-later"] .icon {
  transform: rotate(90deg);
}

[data-surface="plan"] .plan-action-blocked {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px dashed #d6d8de;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

[data-surface="plan"] .plan-action-blocked strong {
  color: #50545f;
}

[data-surface="plan"] .plan-reschedule label,
[data-surface="plan"] .plan-reason label {
  font-size: 12.5px;
  font-weight: 700;
  color: #50545f;
}

[data-surface="plan"] .plan-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

[data-surface="plan"] .plan-inline input {
  flex: 1;
  min-width: 140px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #d6d8de;
  border-radius: 11px;
  font: inherit;
  font-size: 14px;
}

[data-surface="plan"] .plan-inline .dash-button {
  width: auto;
}

[data-surface="plan"] .plan-reason summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 11px;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

[data-surface="plan"] .plan-reason summary::-webkit-details-marker {
  display: none;
}

[data-surface="plan"] .plan-reason summary:hover {
  border-color: #c6c9d0;
  background: var(--canvas);
}

[data-surface="plan"] .plan-reason[open] summary {
  margin-bottom: 8px;
  border-color: var(--green);
}

[data-surface="plan"] .plan-reason textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #d6d8de;
  border-radius: 11px;
  font: inherit;
  font-size: 14px;
  resize: vertical;
}

@container plan-task (max-width: 560px) {
  [data-surface="plan"] .plan-panel {
    padding: 16px;
  }
}

@media (max-width: 640px) {
  [data-surface="plan"] .plan-launch {
    flex-wrap: wrap;
  }

  [data-surface="plan"] .plan-launch form {
    width: 100%;
  }

  [data-surface="plan"] .plan-launch .dash-button {
    width: 100%;
  }

  [data-surface="plan"] .plan-task-head {
    gap: 14px;
  }

  [data-surface="plan"] .plan-task-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }
}

/* Editable content briefs (fix batch 2026-10-21 §15): the brief form, the outline editor
   (reorder with motion, remove, add), the steering note and the locked facts. */

[data-surface="plan"] .brief-form {
  display: grid;
  gap: 14px;
}

[data-surface="plan"] .brief-intro {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

[data-surface="plan"] .brief-provenance {
  color: var(--deep);
  font-weight: 600;
}

[data-surface="plan"] .brief-field {
  display: grid;
  gap: 6px;
}

[data-surface="plan"] .brief-field > span,
[data-surface="plan"] .brief-outline-field legend {
  color: #626670;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .01em;
}

[data-surface="plan"] .brief-field input,
[data-surface="plan"] .brief-field textarea,
[data-surface="plan"] .brief-point input {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.45;
  transition: border-color .18s, box-shadow .18s;
}

[data-surface="plan"] .brief-field textarea {
  resize: vertical;
}

[data-surface="plan"] .brief-field input:focus,
[data-surface="plan"] .brief-field textarea:focus,
[data-surface="plan"] .brief-point input:focus {
  border-color: var(--green);
  outline: none;
  box-shadow: 0 0 0 3px rgb(0 54 135 / .14);
}

[data-surface="plan"] .brief-field small,
[data-surface="plan"] .brief-hint,
[data-surface="plan"] .brief-actions small {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

[data-surface="plan"] .brief-outline-field {
  margin: 0;
  padding: 0;
  border: 0;
}

[data-surface="plan"] .brief-outline {
  display: grid;
  gap: 6px;
  margin: 6px 0 8px;
  padding: 0;
  list-style: none;
}

[data-surface="plan"] .brief-point {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  will-change: transform;
}

[data-surface="plan"] .brief-point-grip {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #e9eff7;
  color: var(--deep);
  font-size: 12px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

[data-surface="plan"] .brief-point-tools {
  display: inline-flex;
  gap: 2px;
}

[data-surface="plan"] .brief-point-tools[hidden],
[data-surface="plan"] .brief-add[hidden],
[data-surface="plan"] .brief-hint[hidden] {
  display: none;
}

[data-surface="plan"] .brief-point-tools button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #70747f;
  cursor: pointer;
}

[data-surface="plan"] .brief-point-tools button:hover {
  border-color: var(--line);
  background: var(--canvas);
  color: var(--ink);
}

[data-surface="plan"] .brief-point-tools button:focus-visible,
[data-surface="plan"] .brief-add:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

[data-surface="plan"] .brief-point-tools .icon {
  width: 15px;
  height: 15px;
}

[data-surface="plan"] .brief-point-tools [data-outline="up"] .icon {
  transform: rotate(-90deg);
}

[data-surface="plan"] .brief-point-tools [data-outline="down"] .icon {
  transform: rotate(90deg);
}

[data-surface="plan"] .brief-add {
  justify-self: start;
  padding: 7px 12px;
  border: 1px dashed #cacdd4;
  border-radius: 10px;
  background: transparent;
  color: var(--deep);
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
}

[data-surface="plan"] .brief-add:hover {
  border-color: var(--green);
  background: #f3f6fb;
}

[data-surface="plan"] .brief-steering textarea {
  border-style: dashed;
  background: #fffdf7;
}

[data-surface="plan"] .brief-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

[data-surface="plan"] .brief-actions .icon {
  width: 15px;
  height: 15px;
}

[data-surface="plan"] .brief-state {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--canvas);
  color: #393d47;
  font-size: 14px;
  line-height: 1.5;
}

[data-surface="plan"] .brief-state[data-tone="progress"] {
  background: #eef5ff;
  color: #1d4677;
}

[data-surface="plan"] .brief-state[data-tone="locked"] {
  background: #fff8ec;
  color: #66460f;
}

[data-surface="plan"] .brief-state .icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

[data-surface="plan"] .brief-spinner {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 2px solid currentcolor;
  border-right-color: transparent;
  border-radius: 50%;
}

[data-surface="plan"] .brief-steering-read {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px dashed #e2c98e;
  border-radius: 10px;
  background: #fffdf7;
  font-size: 14px;
}

[data-surface="plan"] .brief-facts {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

[data-surface="plan"] .brief-facts h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-surface="plan"] .brief-facts h3 .icon {
  width: 17px;
  height: 17px;
  color: var(--deep);
}

[data-surface="plan"] .brief-facts-note {
  margin: 4px 0 10px;
  color: var(--muted);
  font-size: 13px;
}

[data-surface="plan"] .brief-fact-link {
  flex-basis: 100%;
  color: var(--deep);
  font-size: 12.5px;
  font-weight: 650;
}

@media (prefers-reduced-motion: no-preference) {
  [data-surface="plan"] .brief-spinner {
    animation: act-spin .8s linear infinite;
  }
}

/* The Calendar (fix batch 2026-10-21 §5): the list by default (tabs, search, rows by day,
   the shared row from ui.css), and month and week grids with fixed-height cells (two chips,
   then "+N more") that open the day panel. Phones get the list only. Rendered by
   crates/web/src/pages/app/calendar/mod.rs. Owner: pages. Classes prefixed `cal-`, scoped to
   the calendar surface. */

[data-surface="calendar"] .cal-page {
  --cal-cell: 118px;
  --cal-today: var(--green);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* Header */

[data-surface="calendar"] .cal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 28px;
  margin-bottom: 22px;
}

[data-surface="calendar"] .cal-head-text {
  max-width: 640px;
}

[data-surface="calendar"] .cal-head h1 {
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.05;
  font-weight: 770;
  letter-spacing: -.05em;
}

[data-surface="calendar"] .cal-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

[data-surface="calendar"] .cal-head-actions .cal-views {
  margin-right: 6px;
}

/* Toolbar */

[data-surface="calendar"] .cal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  margin-bottom: 14px;
}

[data-surface="calendar"] .cal-toolbar[data-view="list"] {
  align-items: flex-end;
}

[data-surface="calendar"] .cal-toolbar[data-view="list"] .ui-tabs {
  flex: 1 1 560px;
  min-width: 0;
}

[data-surface="calendar"] .cal-toolbar-side {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
}

[data-surface="calendar"] .cal-toolbar-side .ui-search {
  flex: 1 1 240px;
  width: 260px;
  min-width: 200px;
}

[data-surface="calendar"] .cal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-surface="calendar"] .cal-nav-button,
[data-surface="calendar"] .cal-today {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: #31353f;
  font-size: 13.5px;
  font-weight: 650;
  transition: border-color .2s, background-color .2s;
}

[data-surface="calendar"] .cal-nav-button:hover,
[data-surface="calendar"] .cal-today:hover {
  border-color: #bdc0c8;
  background: var(--canvas);
}

[data-surface="calendar"] .cal-nav-button:focus-visible,
[data-surface="calendar"] .cal-today:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

[data-surface="calendar"] .cal-nav-button .icon {
  width: 15px;
  height: 15px;
  transform: rotate(180deg);
}

[data-surface="calendar"] .cal-nav-button + .cal-nav-button .icon {
  transform: none;
}

[data-surface="calendar"] .cal-title {
  margin-left: 8px;
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -.03em;
  white-space: nowrap;
}

/* The list (and the phone list under a grid) */

[data-surface="calendar"] .cal-list {
  min-width: 0;
}

[data-surface="calendar"] .cal-list-head {
  display: grid;
  grid-template-columns: 28px 30px minmax(0, 1fr) minmax(0, 190px) 118px 96px 34px;
  column-gap: 12px;
  padding: 6px 10px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--ui-faint, #8e929c);
  font-size: 12px;
  font-weight: 700;
}

[data-surface="calendar"] .cal-list-head span:last-child {
  text-align: right;
}

[data-surface="calendar"] .cal-list .wgroup {
  margin-top: 14px;
}

[data-surface="calendar"] .cal-list .wgroup-head {
  margin-bottom: 2px;
  padding: 6px 10px;
  color: #31353f;
  font-size: 13px;
}

[data-surface="calendar"] .cal-list[data-phone-only] {
  display: none;
}

[data-surface="calendar"] .cal-nothing {
  margin-top: 18px;
  padding: 26px 24px;
  border: 1px dashed #d2d5db;
  border-radius: 16px;
  background: #fff;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

[data-surface="calendar"] .cal-nothing[hidden] {
  display: none;
}

[data-surface="calendar"] .cal-legend {
  margin-top: 18px;
  color: #7f838c;
  font-size: 13px;
}

/* The grid */

[data-surface="calendar"] .cal-grid {
  display: grid;
  gap: 8px;
}

[data-surface="calendar"] .cal-weekdays,
[data-surface="calendar"] .cal-days,
[data-surface="calendar"] .cal-banners {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

[data-surface="calendar"] .cal-weekdays span {
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #7f838c;
}

[data-surface="calendar"] .cal-week {
  display: grid;
  gap: 6px;
}

[data-surface="calendar"] .cal-days {
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="calendar"] .cal-day {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 4px;
  height: var(--cal-cell);
  min-width: 0;
  padding: 8px 7px 7px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s, box-shadow .25s, background-color .2s;
}

[data-surface="calendar"] .cal-grid[data-view="week"] .cal-day {
  --cal-cell: 260px;
}

[data-surface="calendar"] .cal-day:hover {
  border-color: #c6c9d0;
  box-shadow: 0 10px 24px -20px #101a2955;
}

[data-surface="calendar"] .cal-day[data-out] {
  background: #fafbfc;
}

[data-surface="calendar"] .cal-day[data-out] .cal-day-number {
  color: #b6b9c0;
}

[data-surface="calendar"] .cal-day[data-past]:not([data-out]) {
  background: #fcfcfd;
}

/* The animated selection ring. */
[data-surface="calendar"] .cal-day[data-selected] {
  border-color: var(--green);
  box-shadow: 0 0 0 3px #0036871f;
}

[data-surface="calendar"] .cal-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
}

[data-surface="calendar"] .cal-day-head:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

[data-surface="calendar"] .cal-day-number {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  border-radius: 999px;
  color: #31353f;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

[data-surface="calendar"] .cal-day[data-today] .cal-day-number {
  background: var(--ink);
  color: #fff;
}

[data-surface="calendar"] .cal-chips {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="calendar"] .cal-entry {
  --chip-accent: var(--pill-ink, #9ea2ac);
  position: relative;
  min-width: 0;
  border-radius: 7px;
  background: var(--pill-bg, var(--canvas));
  box-shadow: inset 2px 0 0 var(--chip-accent);
  transition: transform .2s var(--motion-ease-out), box-shadow .2s, opacity .2s;
}

[data-surface="calendar"] .cal-entry[data-folded] {
  display: none;
}

[data-surface="calendar"] .cal-entry[draggable="true"] {
  cursor: grab;
}

[data-surface="calendar"] .cal-entry-link {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 3px 6px 3px 7px;
  color: var(--pill-ink, #31353f);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

[data-surface="calendar"] .cal-entry-link:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
  border-radius: 7px;
}

[data-surface="calendar"] .cal-entry-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
}

[data-surface="calendar"] .cal-entry-icon .icon {
  width: 11px;
  height: 11px;
}

[data-surface="calendar"] .cal-entry-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-surface="calendar"] .cal-entry-time {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  opacity: .8;
}

[data-surface="calendar"] .cal-more {
  justify-self: start;
  padding: 1px 6px;
  border-radius: 6px;
  color: var(--deep);
  font-size: 12px;
  font-weight: 700;
}

[data-surface="calendar"] .cal-more:hover {
  background: #e9eff7;
}

[data-surface="calendar"] .cal-more:focus-visible {
  outline: 2px solid var(--green);
}

/* Drag to reschedule: the chip lifts, valid days light up, refused ones shake. */

[data-surface="calendar"] .cal-entry[data-dragging] {
  opacity: .92;
  transform: translateY(-2px) scale(1.04);
  box-shadow: inset 2px 0 0 var(--chip-accent), 0 12px 24px -10px #101a2955;
}

[data-surface="calendar"] .cal-day[data-drop-ok] {
  border-color: #9ed7c0;
  background: #f6f7f9;
}

[data-surface="calendar"] .cal-day[data-drop-ok][data-drop] {
  border-color: var(--success);
  box-shadow: 0 0 0 3px #0087652e;
}

[data-surface="calendar"] .cal-day[data-drop-no] {
  opacity: .55;
}

[data-surface="calendar"] .cal-day[data-refuse] {
  border-color: #e3a29c;
  background: #fdf3f2;
}

[data-surface="calendar"] .cal-entry[data-moving] {
  opacity: .5;
}

/* Event banners */

[data-surface="calendar"] .cal-banner {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 5px 10px;
  border: 1px solid #d8d1f6;
  border-radius: 9px;
  background: linear-gradient(90deg, #f1edff, #f8f6ff);
  color: #43349c;
  font-size: 12.5px;
  line-height: 1.3;
  overflow: hidden;
}

[data-surface="calendar"] .cal-banner:hover {
  border-color: #a89be8;
}

[data-surface="calendar"] .cal-banner[data-expected="true"] {
  border-style: dashed;
}

[data-surface="calendar"] .cal-banner .icon {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
}

[data-surface="calendar"] .cal-banner strong {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-surface="calendar"] .cal-banner span {
  flex-shrink: 0;
  color: #6b5fc0;
  white-space: nowrap;
}

[data-surface="calendar"] .cal-banners .cal-banner[data-start="1"] { grid-column-start: 1; }
[data-surface="calendar"] .cal-banners .cal-banner[data-start="2"] { grid-column-start: 2; }
[data-surface="calendar"] .cal-banners .cal-banner[data-start="3"] { grid-column-start: 3; }
[data-surface="calendar"] .cal-banners .cal-banner[data-start="4"] { grid-column-start: 4; }
[data-surface="calendar"] .cal-banners .cal-banner[data-start="5"] { grid-column-start: 5; }
[data-surface="calendar"] .cal-banners .cal-banner[data-start="6"] { grid-column-start: 6; }
[data-surface="calendar"] .cal-banners .cal-banner[data-start="7"] { grid-column-start: 7; }
[data-surface="calendar"] .cal-banners .cal-banner[data-span="1"] { grid-column-end: span 1; }
[data-surface="calendar"] .cal-banners .cal-banner[data-span="2"] { grid-column-end: span 2; }
[data-surface="calendar"] .cal-banners .cal-banner[data-span="3"] { grid-column-end: span 3; }
[data-surface="calendar"] .cal-banners .cal-banner[data-span="4"] { grid-column-end: span 4; }
[data-surface="calendar"] .cal-banners .cal-banner[data-span="5"] { grid-column-end: span 5; }
[data-surface="calendar"] .cal-banners .cal-banner[data-span="6"] { grid-column-end: span 6; }
[data-surface="calendar"] .cal-banners .cal-banner[data-span="7"] { grid-column-end: span 7; }

@media (max-width: 1180px) {
  [data-surface="calendar"] .cal-page {
    --cal-cell: 104px;
  }
  [data-surface="calendar"] .cal-list-head {
    display: none;
  }
}

/* Phones: the list only (fix batch §5). */
@media (max-width: 640px) {
  [data-surface="calendar"] .cal-grid,
  [data-surface="calendar"] .cal-views,
  [data-surface="calendar"] .cal-legend {
    display: none;
  }
  [data-surface="calendar"] .cal-list[data-phone-only] {
    display: block;
  }
  [data-surface="calendar"] .cal-toolbar-side {
    flex: 1 1 100%;
    padding-bottom: 0;
  }
  [data-surface="calendar"] .cal-toolbar-side .ui-search {
    min-width: 0;
  }
  [data-surface="calendar"] .cal-head-actions {
    width: 100%;
  }
  [data-surface="calendar"] .cal-head-actions .dash-button {
    flex: 1 1 auto;
  }
  [data-surface="calendar"] .cal-title {
    font-size: 18px;
  }
}

@media (max-width: 420px) {
  [data-surface="calendar"] .cal-nav {
    flex-wrap: wrap;
  }
  [data-surface="calendar"] .cal-title {
    flex-basis: 100%;
    margin: 4px 0 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  [data-surface="calendar"] .cal-day[data-selected] {
    animation: cal-ring .5s var(--ui-spring, var(--motion-ease-out));
  }

  [data-surface="calendar"] .cal-day[data-refuse] {
    animation: cal-shake .45s cubic-bezier(.36, .07, .19, .97);
  }

  [data-surface="calendar"] .cal-day[data-drop-ok] {
    transition: border-color .2s, background-color .25s, box-shadow .2s, opacity .2s;
  }
}

@keyframes cal-ring {
  0% {
    box-shadow: 0 0 0 9px #00368700;
  }
  60% {
    box-shadow: 0 0 0 2px #00368738;
  }
}

@keyframes cal-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

/* Event deadlines (/app/<workspace>/calendar/deadlines and …/deadlines/<id>).
   Owner: freshness. Rendered by crates/web/src/pages/app/deadlines.rs. Every class is
   prefixed `deadline`; the page root is `.deadlines-page` (it sits under the Calendar
   section, whose data-surface belongs to the pages builder). */

.deadlines-page {
  --deadline-expected: #9a5200;
  --deadline-expected-bg: #fff3e2;
  --deadline-confirmed: #0b377a;
  display: grid;
  gap: 0;
}

.deadline-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #7f838c;
}

.deadline-crumbs a {
  font-weight: 650;
  color: var(--deep);
  text-underline-offset: 3px;
}

.deadline-crumbs a:hover {
  text-decoration: underline;
}

.deadlines-layout {
  container: deadlines / inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

@media (min-width: 1180px) {
  .deadlines-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
  }

  .deadlines-side {
    position: sticky;
    top: 92px;
  }
}

.deadlines-main,
.deadlines-side {
  display: grid;
  gap: 18px;
  min-width: 0;
}

/* Filter tabs: every count is a link to its list. */

.deadline-count {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--canvas);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

/* The list */

.deadline-months {
  display: grid;
  gap: 26px;
}

.deadline-month h2 {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7f838c;
}

.deadline-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.deadline-link {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  color: inherit;
  box-shadow: var(--dash-card-shadow);
  transition: border-color .2s, box-shadow .2s, transform .2s var(--motion-ease-out);
}

.deadline-link:hover {
  border-color: #c6c9d0;
  box-shadow: var(--dash-card-shadow-hover);
  transform: translateY(-1px);
}

.deadline-link:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.deadline-row[data-status="done"] .deadline-link,
.deadline-row[data-status="dismissed"] .deadline-link,
.deadline-row[data-status="passed"] .deadline-link,
.deadline-row[data-status="missed"] .deadline-link {
  background: var(--canvas);
  box-shadow: none;
}

.deadline-date {
  display: grid;
  justify-items: center;
  padding: 8px 4px 9px;
  border-radius: 14px;
  background: #f4f5f6;
  color: var(--deep);
  line-height: 1.1;
}

.deadline-date strong {
  font-size: 26px;
  font-weight: 780;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.deadline-weekday,
.deadline-month-short {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.deadline-weekday {
  color: #757982;
}

.deadline-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.deadline-event {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}

.deadline-label {
  font-size: 17px;
  font-weight: 720;
  letter-spacing: -.02em;
  color: var(--ink);
}

.deadline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: #626670;
  font-variant-numeric: tabular-nums;
}

.deadline-prepare {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 650;
  color: var(--deadline-expected);
}

.deadline-prepare .icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.deadline-site {
  font-size: 12.5px;
  color: #7f838c;
}

.deadline-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.deadline-who {
  font-size: 12px;
  font-weight: 650;
  color: #545964;
  white-space: nowrap;
}

.deadline-claim {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #8e9198;
}

@container deadlines (max-width: 620px) {
  .deadline-link {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .deadline-badges {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .deadline-who {
    white-space: normal;
  }
}

/* Side panels */

.deadline-panel {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
}

.deadline-panel h2 {
  font-size: 16px;
  letter-spacing: -.02em;
}

.deadline-panel p {
  font-size: 14px;
  line-height: 1.6;
  color: #4b4f59;
}

.deadline-panel form,
.deadline-panel .dash-button {
  width: 100%;
}

.deadline-feed-ready {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 650;
}

.deadline-panel .deadline-feed-ready {
  color: var(--deadline-confirmed);
}

.deadline-feed-ready .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.deadline-feed-apps {
  display: grid;
  gap: 8px;
}

.deadline-feed-label {
  font-size: 13px;
  font-weight: 650;
  color: #50545f;
}

.deadline-feed-url {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #d2d5db;
  border-radius: 10px;
  background: var(--canvas);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
}

.deadline-feed-url:focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

.deadline-panel .deadline-feed-note {
  font-size: 13px;
  color: var(--muted);
}

.deadline-feed-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.deadline-how ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  line-height: 1.55;
  color: #4b4f59;
}

.deadline-how li {
  padding-left: 14px;
  border-left: 3px solid var(--line);
}

.deadline-how li:first-child {
  border-left-color: var(--deadline-confirmed);
}

.deadline-how li:nth-child(2) {
  border-left-color: #f0b35e;
}

/* The detail page */

.deadline-hero {
  display: grid;
  gap: 6px;
  margin-bottom: 22px;
  padding: 26px 28px;
  border: 1px solid #d5dce7;
  border-radius: 22px;
  background: linear-gradient(135deg, #f3f6fa, #fff 70%);
}

.deadline-hero h1 {
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.05;
  font-weight: 770;
  letter-spacing: -.05em;
}

.deadline-hero-date {
  margin-top: 6px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--deep);
}

.deadline-hero-time {
  font-size: 14px;
  color: #545964;
  font-variant-numeric: tabular-nums;
}

.deadline-hero .deadline-badges {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}

.deadline-card {
  display: grid;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
}

.deadline-card h2 {
  font-size: 17px;
  letter-spacing: -.02em;
}

.deadline-prepare-big {
  margin: 0;
  font-size: 16px;
}

.deadline-prepare-big .icon {
  width: 18px;
  height: 18px;
}

.deadline-lead {
  font-size: 14px;
  line-height: 1.6;
  color: #4b4f59;
}

.deadline-who-line {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--canvas);
  font-size: 13.5px;
  line-height: 1.55;
  color: #4b4f59;
}

.deadline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.deadline-timeline {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.deadline-timeline li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 10px 0 10px 22px;
  border-bottom: 1px solid #eff0f3;
  font-size: 14px;
}

.deadline-timeline li:last-child {
  border-bottom: 0;
}

.deadline-timeline li::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 2px;
  width: 9px;
  height: 9px;
  border: 2px solid #bdc0c8;
  border-radius: 50%;
  background: #fff;
}

.deadline-timeline li[data-current="true"]::before {
  border-color: var(--green);
  background: var(--green);
}

.deadline-timeline li[data-current="true"] {
  font-weight: 700;
}

.deadline-timeline li[data-passed="true"] {
  color: #8e9198;
}

.deadline-timeline-when {
  font-variant-numeric: tabular-nums;
  color: #545964;
}

.deadline-expected-tag {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--deadline-expected-bg);
  color: var(--deadline-expected);
  font-size: 11px;
  font-weight: 700;
}

.deadline-written {
  font-size: 13px;
  color: var(--muted);
}

.deadline-written q,
.deadline-evidence q {
  font-style: italic;
}

.deadline-certainty-note {
  font-weight: 600;
}

.deadline-statement {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--green);
  border-radius: 0 10px 10px 0;
  background: #f7f8f9;
  font-size: 14px;
  line-height: 1.6;
  color: #31353f;
}

.deadline-claim-line {
  font-size: 12.5px;
}

.deadline-claim-line code {
  font-size: 12px;
  overflow-wrap: anywhere;
}

.deadline-evidence {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.deadline-evidence li {
  display: grid;
  gap: 3px;
  padding-top: 12px;
  border-top: 1px solid #eff0f3;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.deadline-evidence a {
  font-weight: 650;
  color: var(--deep);
}

.deadline-evidence a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.deadline-evidence-meta {
  font-size: 12px;
  color: #7f838c;
}

.deadline-evidence li[data-official="true"] .deadline-evidence-meta {
  color: var(--deadline-confirmed);
  font-weight: 650;
}

@media (max-width: 520px) {
  .deadline-hero {
    padding: 20px;
  }

  .deadline-card,
  .deadline-panel {
    padding: 18px 16px;
  }

  .deadline-link {
    padding: 14px;
    gap: 12px;
  }

  .deadline-feed-actions {
    grid-template-columns: 1fr;
  }
}

/* Content surface (/app/<workspace>/content and /content/<item>). Owner: pages (Part 2).
   Rendered by crates/web/src/pages/app/content/. Scope selectors under
   [data-surface="content"]; classes are prefixed `ct-`. */

[data-surface="content"] .ct-page {
  grid-template-columns: minmax(0, 1fr);
  display: grid;
  gap: 0;
}

/* The header strip (fix batch 2026-10-21 §21): this month's articles and the blog's
   address in one compact strip with icons. */

[data-surface="content"] .ct-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

[data-surface="content"] .ct-strip-item {
  display: flex;
  flex: 1 1 280px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: inherit;
  box-shadow: var(--wk-panel-shadow);
}

[data-surface="content"] a.ct-strip-item {
  transition: border-color .2s, box-shadow .2s;
}

[data-surface="content"] a.ct-strip-item:hover {
  border-color: #bdc0c8;
}

[data-surface="content"] .ct-strip-icon {
  display: grid;
  flex: none;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: #e9eff7;
  color: var(--deep);
}

[data-surface="content"] .ct-strip-icon .icon {
  width: 17px;
  height: 17px;
}

[data-surface="content"] .ct-strip-text {
  display: grid;
  min-width: 0;
}

[data-surface="content"] .ct-strip-text small {
  color: #7f838c;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

[data-surface="content"] .ct-strip-text strong,
[data-surface="content"] .ct-strip-text a {
  overflow: hidden;
  font-size: 15px;
  font-weight: 720;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

[data-surface="content"] .ct-strip-text a {
  color: var(--deep);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

[data-surface="content"] .ct-meter {
  display: block;
  flex: 1 1 60px;
  max-width: 120px;
  height: 6px;
  border-radius: 999px;
  background: var(--mint);
  overflow: hidden;
}

[data-surface="content"] .ct-meter-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), #265eb3);
}

[data-surface="content"] .ct-meter-fill[data-fill="5"] { width: 5%; }
[data-surface="content"] .ct-meter-fill[data-fill="10"] { width: 10%; }
[data-surface="content"] .ct-meter-fill[data-fill="15"] { width: 15%; }
[data-surface="content"] .ct-meter-fill[data-fill="20"] { width: 20%; }
[data-surface="content"] .ct-meter-fill[data-fill="25"] { width: 25%; }
[data-surface="content"] .ct-meter-fill[data-fill="30"] { width: 30%; }
[data-surface="content"] .ct-meter-fill[data-fill="35"] { width: 35%; }
[data-surface="content"] .ct-meter-fill[data-fill="40"] { width: 40%; }
[data-surface="content"] .ct-meter-fill[data-fill="45"] { width: 45%; }
[data-surface="content"] .ct-meter-fill[data-fill="50"] { width: 50%; }
[data-surface="content"] .ct-meter-fill[data-fill="55"] { width: 55%; }
[data-surface="content"] .ct-meter-fill[data-fill="60"] { width: 60%; }
[data-surface="content"] .ct-meter-fill[data-fill="65"] { width: 65%; }
[data-surface="content"] .ct-meter-fill[data-fill="70"] { width: 70%; }
[data-surface="content"] .ct-meter-fill[data-fill="75"] { width: 75%; }
[data-surface="content"] .ct-meter-fill[data-fill="80"] { width: 80%; }
[data-surface="content"] .ct-meter-fill[data-fill="85"] { width: 85%; }
[data-surface="content"] .ct-meter-fill[data-fill="90"] { width: 90%; }
[data-surface="content"] .ct-meter-fill[data-fill="95"] { width: 95%; }
[data-surface="content"] .ct-meter-fill[data-fill="100"] {
  width: 100%;
  background: linear-gradient(90deg, #d08a2e, #e3a24c);
}

[data-surface="content"] .ct-allowance-renews {
  flex: none;
  color: var(--muted);
  font-size: 12.5px;
}

[data-surface="content"] .ct-allowance-none {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

[data-surface="content"] .ct-blog {
  flex-wrap: wrap;
}

[data-surface="content"] .ct-blog-next {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin: -2px 0 0 46px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

[data-surface="content"] .ct-blog-next a {
  color: var(--deep);
  font-weight: 650;
}

[data-surface="content"] .ct-page > [data-js-filter-tabs] .wk-tabs {
  margin-bottom: 14px;
}

/* The list: custom, stat-led rows. */

[data-surface="content"] .ct-rows {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="content"] .ct-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--wk-panel-shadow);
  transition: border-color .2s, box-shadow .25s, transform .25s var(--motion-ease-out);
}

[data-surface="content"] .ct-row[hidden] {
  display: none;
}

[data-surface="content"] .ct-row:hover {
  border-color: #cccfd6;
  box-shadow: 0 1px 2px #101a290f, 0 18px 36px -28px #101a2955;
  transform: translateY(-1px);
}

[data-surface="content"] .ct-row-main {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
  color: inherit;
}

[data-surface="content"] .ct-row-main:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
  border-radius: 10px;
}

[data-surface="content"] .ct-tile {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 780;
  letter-spacing: -.02em;
}

[data-surface="content"] .ct-tile[data-tint="0"] { background: #e7edf6; color: #0b316b; }
[data-surface="content"] .ct-tile[data-tint="1"] { background: #ecebfd; color: #4a46c2; }
[data-surface="content"] .ct-tile[data-tint="2"] { background: #fdf1e3; color: #a35c0b; }
[data-surface="content"] .ct-tile[data-tint="3"] { background: #e6f3fb; color: #1f6b9a; }
[data-surface="content"] .ct-tile[data-tint="4"] { background: #fbe9f1; color: #a32a64; }
[data-surface="content"] .ct-tile[data-tint="5"] { background: #eff1f4; color: #414652; }

[data-surface="content"] .ct-row-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

[data-surface="content"] .ct-row-text strong {
  font-size: 15.5px;
  line-height: 1.35;
  font-weight: 720;
  letter-spacing: -.012em;
  overflow-wrap: anywhere;
}

[data-surface="content"] .ct-row-main:hover strong {
  color: var(--deep);
}

[data-surface="content"] .ct-row-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  color: #60646e;
  font-size: 13px;
}

[data-surface="content"] .ct-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-weight: 650;
}

[data-surface="content"] .ct-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8e929c;
}

[data-surface="content"] .ct-status[data-tone="positive"] .ct-status-dot { background: #12a37a; }
[data-surface="content"] .ct-status[data-tone="attention"] .ct-status-dot { background: #e08a00; }
[data-surface="content"] .ct-status[data-tone="progress"] .ct-status-dot { background: #2f7bd8; }
[data-surface="content"] .ct-status[data-tone="pending"] .ct-status-dot { background: #7c6fe0; }

[data-surface="content"] .ct-row-note::before {
  content: "·";
  margin-right: 10px;
  color: #bcbfc6;
}

[data-surface="content"] .ct-row-note[data-tone="negative"] {
  color: #a12a1c;
}

[data-surface="content"] .ct-stats {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="content"] .ct-stat {
  position: relative;
}

[data-surface="content"] .ct-stat > a {
  display: grid;
  justify-items: center;
  min-width: 78px;
  padding: 6px 10px;
  border-radius: 12px;
  color: inherit;
  text-align: center;
  transition: background-color .18s;
}

[data-surface="content"] .ct-stat > a:hover,
[data-surface="content"] .ct-stat > a:focus-visible {
  outline: none;
  background: var(--canvas);
}

[data-surface="content"] .ct-stat-icon {
  color: #7f838c;
}

[data-surface="content"] .ct-stat-icon .icon {
  width: 16px;
  height: 16px;
}

[data-surface="content"] .ct-stat[data-tone="positive"] .ct-stat-icon { color: #0b8a65; }
[data-surface="content"] .ct-stat[data-tone="attention"] .ct-stat-icon { color: #c47a00; }

[data-surface="content"] .ct-stat-value {
  font-size: 17px;
  font-weight: 760;
  line-height: 1.25;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

[data-surface="content"] .ct-stat[data-tone="attention"] .ct-stat-value {
  color: #9a5800;
}

[data-surface="content"] .ct-stat small {
  color: #7f838c;
  font-size: 11px;
  white-space: nowrap;
}

[data-surface="content"] .ct-spark {
  display: block;
  width: 64px;
  max-width: 64px;
  height: 16px;
  margin-top: 3px;
  overflow: visible;
}

[data-surface="content"] .ct-spark-area {
  fill: rgb(18 76 163 / .12);
}

[data-surface="content"] .ct-spark-line {
  vector-effect: non-scaling-stroke;
  fill: none;
  stroke: #124ca3;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Provenance on hover, focus or tap. */
[data-surface="content"] .ct-stat-tip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 5;
  width: max-content;
  max-width: 240px;
  padding: 7px 10px;
  border-radius: 9px;
  background: #1a1e26;
  color: #f0f1f4;
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .16s, transform .2s var(--motion-ease-out);
}

[data-surface="content"] .ct-stat:hover .ct-stat-tip,
[data-surface="content"] .ct-stat:focus-within .ct-stat-tip {
  opacity: 1;
  transform: none;
}

[data-surface="content"] .ct-row-live {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  margin-left: 58px;
  font-size: 12.5px;
  color: var(--success-ink);
  overflow-wrap: anywhere;
}

[data-surface="content"] .ct-row-live:hover span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

[data-surface="content"] .ct-row-live .icon {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
}

[data-surface="content"] .ct-filter-empty {
  margin: 12px 0 0;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  color: var(--muted);
  text-align: center;
}

[data-surface="content"] .ct-filter-empty[hidden] {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  [data-surface="content"] .ct-row {
    animation: ct-row-in .5s var(--motion-ease-out) backwards;
  }
  [data-surface="content"] .ct-row[data-index="1"] { animation-delay: 40ms; }
  [data-surface="content"] .ct-row[data-index="2"] { animation-delay: 80ms; }
  [data-surface="content"] .ct-row[data-index="3"] { animation-delay: 120ms; }
  [data-surface="content"] .ct-row[data-index="4"] { animation-delay: 160ms; }
  [data-surface="content"] .ct-row[data-index="5"] { animation-delay: 200ms; }
  [data-surface="content"] .ct-row[data-index="6"] { animation-delay: 240ms; }
  [data-surface="content"] .ct-row[data-index="7"] { animation-delay: 280ms; }
  [data-surface="content"] .ct-row[data-index="8"] { animation-delay: 320ms; }
  [data-surface="content"] .ct-row[data-entering] {
    animation: ct-row-in .38s var(--motion-ease-out) backwards;
  }
  [data-surface="content"] .ct-spark-line {
    stroke-dasharray: 1;
    animation: ct-spark-draw 1.1s var(--motion-ease-out) .25s backwards;
  }
}

@keyframes ct-row-in {
  from { opacity: 0; transform: translateY(10px); }
}

@keyframes ct-spark-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@media (max-width: 760px) {
  [data-surface="content"] .ct-row {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-surface="content"] .ct-stats {
    margin-left: 50px;
  }
  [data-surface="content"] .ct-stats .ct-stat:nth-child(n + 4) {
    display: none;
  }
  [data-surface="content"] .ct-stat > a {
    min-width: 0;
    padding: 4px 8px;
  }
  [data-surface="content"] .ct-spark {
    display: none;
  }
  [data-surface="content"] .ct-row-live {
    margin-left: 58px;
  }
}

/* The smallest phones: the stats wrap under the title, and their explanations (hover
   tips) give way, so nothing scrolls sideways. */
@media (max-width: 420px) {
  [data-surface="content"] .ct-stats {
    flex-wrap: wrap;
    margin-left: 0;
  }
  [data-surface="content"] .ct-stat-tip {
    display: none;
  }
  [data-surface="content"] .ct-row-live {
    margin-left: 0;
  }
}

/* One article */

[data-surface="content"] .ct-article-head {
  margin-bottom: 22px;
}

[data-surface="content"] .ct-article-head h1 {
  max-width: 860px;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.1;
  font-weight: 770;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}

[data-surface="content"] .ct-article-head .dash-lede {
  max-width: 760px;
}

[data-surface="content"] .ct-article-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 14px;
  font-size: 14.5px;
  color: #50545f;
}

[data-surface="content"] .ct-article-layout {
  container: ct-article / inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

@media (min-width: 1180px) {
  [data-surface="content"] .ct-article-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }

  [data-surface="content"] .ct-article-side {
    position: sticky;
    top: 92px;
  }
}

[data-surface="content"] .ct-article-main,
[data-surface="content"] .ct-article-side {
  display: grid;
  gap: 16px;
  min-width: 0;
}

[data-surface="content"] .ct-panel {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--wk-panel-shadow);
}

[data-surface="content"] .ct-panel h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -.02em;
}

[data-surface="content"] .ct-panel h3 {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7f838c;
}

[data-surface="content"] .ct-panel-note,
[data-surface="content"] .ct-empty-line {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}

[data-surface="content"] .ct-approval {
  margin-bottom: 18px;
  border-color: #f0d9b5;
  background: linear-gradient(135deg, #fffaf2, #fff 75%);
}

[data-surface="content"] .ct-approval p {
  font-size: 14.5px;
  color: #393d48;
}

[data-surface="content"] .ct-approval .dash-button {
  margin-top: 14px;
}

[data-surface="content"] .ct-live-url {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 650;
  color: var(--success-ink);
  overflow-wrap: anywhere;
}

[data-surface="content"] .ct-live-url:hover span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

[data-surface="content"] .ct-live-url .icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

[data-surface="content"] .ct-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

[data-surface="content"] .ct-checks li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 11px;
  background: #f3f6fb;
  font-size: 13.5px;
  color: #1f375b;
}

[data-surface="content"] .ct-checks li[data-check="fail"] {
  background: #fdeeee;
  color: #8f1d14;
}

[data-surface="content"] .ct-checks .icon {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 2px;
}

[data-surface="content"] .ct-checked {
  margin-top: 10px;
  font-size: 12.5px;
  color: #7f838c;
}

/* Results */

[data-surface="content"] .ct-results-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
}

[data-surface="content"] .ct-figure {
  display: grid;
  align-content: start;
  gap: 2px;
}

[data-surface="content"] .ct-figure > strong {
  font-size: 40px;
  line-height: 1;
  font-weight: 780;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}

[data-surface="content"] .ct-figure > span {
  font-size: 14px;
  color: #50545f;
}

[data-surface="content"] .ct-provenance {
  display: inline-flex;
  width: fit-content;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--dash-positive-bg);
  color: var(--dash-positive-ink);
  font-size: 11.5px;
  font-weight: 700;
}

[data-surface="content"] .ct-spark {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: 12px;
}

[data-surface="content"] .ct-spark-area {
  fill: #00368714;
}

[data-surface="content"] .ct-spark-line {
  fill: none;
  stroke: var(--green);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

[data-surface="content"] .ct-filtered {
  margin-top: 6px;
  font-size: 12px;
  color: #7f838c;
}

[data-surface="content"] .ct-referrers ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="content"] .ct-referrers li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 9px;
  background: var(--canvas);
  font-size: 13.5px;
}

[data-surface="content"] .ct-referrers li span {
  min-width: 0;
  overflow-wrap: anywhere;
}

[data-surface="content"] .ct-search {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}

[data-surface="content"] .ct-search-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="content"] .ct-search-figures li {
  display: grid;
  gap: 2px;
}

[data-surface="content"] .ct-search-figures strong {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

/* Fact-check */

[data-surface="content"] .ct-fact-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-size: 14px;
  line-height: 1.55;
}

/* Where the facts it checks against live (Settings › Your product). */
[data-surface="content"] .ct-fact-where {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

[data-surface="content"] .ct-fact-where a {
  color: var(--deep);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}

[data-surface="content"] .ct-claims {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

[data-surface="content"] .ct-claims li {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-left: 3px solid var(--dash-positive-ink);
  border-radius: 4px 11px 11px 4px;
  background: var(--canvas);
}

[data-surface="content"] .ct-claims li[data-tone="attention"] {
  border-left-color: #e3a24c;
  background: #fffaf2;
}

[data-surface="content"] .ct-claims li[data-tone="neutral"] {
  border-left-color: #b6b9c0;
}

[data-surface="content"] .ct-claims p {
  font-size: 14px;
  line-height: 1.55;
}

[data-surface="content"] .ct-claim-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

[data-surface="content"] .ct-claim-meta small {
  font-size: 12.5px;
  color: #6b707a;
}

/* A flagged claim's actions (fix batch 2026-10-21 §15): add the fact, edit, remove,
   not a claim. Each posts in place (public/inplace.js); the panel is re-rendered. */
[data-surface="content"] .ct-claim-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  margin-top: 4px;
}

[data-surface="content"] .ct-claim-tools form {
  margin: 0;
}

[data-surface="content"] .ct-claim-tools .dash-button {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 13px;
}

/* Closed, it sits in the row with the others; open, its form takes the full width. */
[data-surface="content"] .ct-claim-add[open] {
  flex-basis: 100%;
}

[data-surface="content"] .ct-claim-add > summary {
  list-style: none;
  width: fit-content;
  cursor: pointer;
}

[data-surface="content"] .ct-claim-add > summary::-webkit-details-marker {
  display: none;
}

[data-surface="content"] .ct-claim-add[open] > summary {
  border-color: var(--deep);
  color: var(--deep);
}

[data-surface="content"] .ct-claim-form {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  animation: ct-claim-open var(--motion-duration) var(--motion-ease-out);
}

[data-surface="content"] .ct-claim-form-note,
[data-surface="content"] .ct-claim-label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

[data-surface="content"] .ct-claim-label {
  font-weight: 650;
  color: var(--ink);
}

[data-surface="content"] .ct-claim-form textarea {
  width: 100%;
  min-height: 72px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}

[data-surface="content"] .ct-claim-form textarea:focus-visible {
  outline: 2px solid var(--deep);
  outline-offset: 1px;
}

[data-surface="content"] .ct-claim-form > .dash-button {
  justify-self: start;
}

[data-surface="content"] .ct-claim-locked {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--attention-tint);
  color: var(--attention-ink);
  font-size: 13px;
  line-height: 1.5;
}

@keyframes ct-claim-open {
  from {
    opacity: 0;
    transform: translateY(calc(var(--motion-distance) * -0.5));
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-surface="content"] .ct-claim-form {
    animation: none;
  }
}

/* Revisions */

[data-surface="content"] .ct-revisions {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

[data-surface="content"] .ct-revision {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
}

[data-surface="content"] .ct-revision-number {
  display: grid;
  place-items: center;
  width: 38px;
  height: 30px;
  border-radius: 9px;
  background: var(--mint);
  font-size: 13px;
  font-weight: 750;
}

[data-surface="content"] .ct-revision-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

[data-surface="content"] .ct-revision-text strong {
  font-size: 14px;
  overflow-wrap: anywhere;
}

[data-surface="content"] .ct-revision-text span {
  font-size: 12.5px;
  color: #6b707a;
}

[data-surface="content"] .ct-revision-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

[data-surface="content"] .ct-restore {
  grid-column: 2 / -1;
}

[data-surface="content"] .ct-restore .dash-button {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 13px;
}

/* Edit */

[data-surface="content"] .ct-edit summary {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}

[data-surface="content"] .ct-edit summary::-webkit-details-marker {
  display: none;
}

[data-surface="content"] .ct-edit summary .icon {
  width: 17px;
  height: 17px;
  color: var(--deep);
}

[data-surface="content"] .ct-edit-form {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

[data-surface="content"] .ct-edit-form label,
[data-surface="content"] .ct-follow-up label {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #50545f;
}

[data-surface="content"] .ct-edit-form input,
[data-surface="content"] .ct-edit-form textarea,
[data-surface="content"] .ct-follow-up textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d6d8de;
  border-radius: 11px;
  font: inherit;
  font-size: 14.5px;
  line-height: 1.55;
}

[data-surface="content"] .ct-edit-form textarea[name="body"] {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px;
}

[data-surface="content"] .ct-edit-form .dash-button {
  justify-self: start;
  margin-top: 6px;
}

/* Actions */

[data-surface="content"] .ct-actions {
  display: grid;
  gap: 10px;
}

[data-surface="content"] .ct-actions h2 {
  margin-bottom: 2px;
}

[data-surface="content"] .ct-actions .dash-button {
  width: 100%;
}

[data-surface="content"] .ct-follow-up summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 11px;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

[data-surface="content"] .ct-follow-up summary::-webkit-details-marker {
  display: none;
}

[data-surface="content"] .ct-follow-up summary .icon {
  width: 16px;
  height: 16px;
}

[data-surface="content"] .ct-follow-up[open] summary {
  border-color: var(--green);
}

[data-surface="content"] .ct-follow-up .ct-action-form {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

[data-surface="content"] .ct-action-notes {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

[data-surface="content"] .ct-experiments {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="content"] .ct-experiments a {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  font-size: 13.5px;
  color: inherit;
}

[data-surface="content"] .ct-experiments a:hover {
  border-color: var(--green);
}

[data-surface="content"] .ct-experiments .icon {
  width: 15px;
  height: 15px;
  color: var(--deep);
}

[data-surface="content"] .ct-experiments small {
  font-size: 12px;
  color: #6b707a;
}

@container ct-article (max-width: 620px) {
  [data-surface="content"] .ct-results-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  [data-surface="content"] .ct-page .dash-head {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 640px) {
  [data-surface="content"] .ct-panel {
    padding: 16px;
  }

  [data-surface="content"] .ct-revision {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  [data-surface="content"] .ct-revision-badges {
    grid-column: 2;
    justify-content: flex-start;
  }
}

/* The coming-soon page editor (/app/<workspace>/content/coming-soon). Owner: publishing
   (Launch Runway, 0244). Rendered by crates/web/src/pages/app/coming_soon.rs; the live
   preview by public/coming-soon-editor.js. Scope selectors under [data-surface="content"];
   classes are prefixed `csx-`. Style A tokens; the preview frame shows the customer's own
   page in their brand. */

[data-surface="content"] .csx-page {
  display: grid;
  gap: 18px;
  min-width: 0;
}

[data-surface="content"] .csx-page .dash-surface-head {
  margin-bottom: 0;
}

[data-surface="content"] .csx-card {
  min-width: 0;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--card-shadow);
}

[data-surface="content"] .csx-card h2,
[data-surface="content"] .csx-preview-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}

[data-surface="content"] .csx-card-head {
  display: grid;
  gap: 4px;
  margin-bottom: 18px;
}

[data-surface="content"] .csx-card-head p,
[data-surface="content"] .csx-preview-head p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

[data-surface="content"] .csx-muted {
  color: var(--muted);
}

[data-surface="content"] .csx-fine {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

[data-surface="content"] .csx-text-link {
  color: var(--brand);
  font-size: 14px;
  font-weight: 650;
}

/* ---- Start ------------------------------------------------------------------------ */

[data-surface="content"] .csx-start {
  display: grid;
  justify-items: start;
  gap: 10px;
  max-width: 720px;
  padding: 30px 32px;
}

[data-surface="content"] .csx-start p {
  margin: 0;
  max-width: 60ch;
  font-size: 15px;
}

[data-surface="content"] .csx-start-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  background: var(--tint-blue);
  color: var(--brand);
}

[data-surface="content"] .csx-start-mark .icon {
  width: 24px;
  height: 24px;
}

[data-surface="content"] .csx-start h2 {
  font-size: 24px;
}

[data-surface="content"] .csx-start-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
}

[data-surface="content"] .csx-start-actions form {
  margin: 0;
}

/* ---- Status strip ---------------------------------------------------------------- */

[data-surface="content"] .csx-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--card-shadow);
  transition: box-shadow .4s, border-color .4s;
}

[data-surface="content"] .csx-status[data-saved] {
  border-color: #b9cdee;
  box-shadow: 0 0 0 4px var(--tint-blue), var(--card-shadow);
}

[data-surface="content"] .csx-status-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  min-width: 0;
}

[data-surface="content"] .csx-status-word {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 750;
  color: var(--ink);
}

[data-surface="content"] .csx-status-dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--faint);
}

[data-surface="content"] .csx-status[data-status="live"] .csx-status-dot {
  background: var(--success);
}

[data-surface="content"] .csx-status[data-status="live"] .csx-status-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--success);
  opacity: .25;
  animation: csx-pulse 2.4s var(--motion-ease-out) infinite;
}

[data-surface="content"] .csx-status[data-status="launched"] .csx-status-dot {
  background: var(--brand);
}

@keyframes csx-pulse {
  from { transform: scale(.6); opacity: .35; }
  to { transform: scale(1.9); opacity: 0; }
}

[data-surface="content"] .csx-status-line {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

[data-surface="content"] .csx-address {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--brand);
  font-size: 14px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

[data-surface="content"] .csx-address .icon {
  flex: none;
  width: 15px;
  height: 15px;
}

[data-surface="content"] .csx-address-off {
  color: var(--muted);
}

[data-surface="content"] .csx-status-note,
[data-surface="content"] .csx-drafted {
  flex-basis: 100%;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

[data-surface="content"] .csx-drafted {
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--tint-blue);
  color: #1d3b6b;
}

[data-surface="content"] .csx-status-form {
  margin: 0;
}

/* ---- Editor and preview ---------------------------------------------------------- */

[data-surface="content"] .csx-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: start;
  gap: 18px;
}

[data-surface="content"] .csx-form,
[data-surface="content"] .csx-form > fieldset {
  display: grid;
  gap: 16px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

[data-surface="content"] .csx-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

[data-surface="content"] .csx-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

[data-surface="content"] .csx-form label,
[data-surface="content"] .csx-form legend {
  padding: 0;
  color: #31353f;
  font-size: 13px;
  font-weight: 680;
}

[data-surface="content"] .csx-optional {
  color: var(--faint);
  font-weight: 500;
}

[data-surface="content"] .csx-count {
  color: var(--faint);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  transition: color .2s;
}

[data-surface="content"] .csx-count[data-near] {
  color: var(--coral-ink);
}

[data-surface="content"] .csx-help {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}

[data-surface="content"] .csx-form input:not([type="radio"]),
[data-surface="content"] .csx-form textarea {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #d6d8de;
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
  transition: border-color .2s, box-shadow .2s;
}

[data-surface="content"] .csx-form textarea {
  resize: vertical;
  min-height: 112px;
  line-height: 1.55;
}

[data-surface="content"] .csx-form input:hover,
[data-surface="content"] .csx-form textarea:hover {
  border-color: #bdc1ca;
}

[data-surface="content"] .csx-form input:focus,
[data-surface="content"] .csx-form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--tint-blue);
}

[data-surface="content"] .csx-form input[type="date"] {
  max-width: 220px;
}

[data-surface="content"] .csx-form fieldset[disabled] input,
[data-surface="content"] .csx-form fieldset[disabled] textarea {
  background: #f7f7f8;
  color: #70747d;
}

[data-surface="content"] .csx-error {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--negative-line);
  border-radius: 11px;
  background: var(--negative-tint);
  color: var(--negative-ink);
  font-size: 14px;
  font-weight: 600;
}

/* Where it lives: two choice cards (an in-form choice, not navigation). */

[data-surface="content"] .csx-choice,
[data-surface="content"] .csx-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

[data-surface="content"] .csx-choice legend,
[data-surface="content"] .csx-links legend {
  margin-bottom: 8px;
}

[data-surface="content"] .csx-links {
  grid-template-columns: minmax(0, 1fr);
}

[data-surface="content"] .csx-links .csx-help {
  margin-top: -4px;
}

[data-surface="content"] .csx-choice-card {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #d6d8de;
  border-radius: 13px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}

[data-surface="content"] .csx-choice-card:hover {
  border-color: #b9bfc9;
}

[data-surface="content"] .csx-choice-card:has(input:checked) {
  border-color: var(--brand);
  background: #f6f9fe;
  box-shadow: 0 0 0 3px var(--tint-blue);
}

[data-surface="content"] .csx-choice-card input {
  flex: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  border: 1.5px solid #b5bac4;
  border-radius: 50%;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}

[data-surface="content"] .csx-choice-card input:checked {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 9px var(--brand);
}

[data-surface="content"] .csx-choice-card input:focus-visible {
  outline: 2px solid #124ea766;
  outline-offset: 2px;
}

[data-surface="content"] .csx-choice-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

[data-surface="content"] .csx-choice-body strong {
  color: var(--ink);
  font-size: 14px;
}

[data-surface="content"] .csx-choice-body small {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

[data-surface="content"] .csx-path {
  display: grid;
  grid-column: 1 / -1;
  gap: 6px;
  overflow: hidden;
  max-height: 120px;
  opacity: 1;
  transition: max-height .35s var(--motion-ease-out), opacity .25s;
}

[data-surface="content"] .csx-path[data-off] {
  max-height: 0;
  opacity: 0;
}

[data-surface="content"] .csx-path-row {
  display: flex;
  align-items: center;
  min-width: 0;
  border: 1px solid #d6d8de;
  border-radius: 11px;
  background: #fff;
  overflow: hidden;
}

[data-surface="content"] .csx-path-row:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--tint-blue);
}

[data-surface="content"] .csx-path-host {
  flex: 0 1 auto;
  min-width: 0;
  padding: 10px 0 10px 12px;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-surface="content"] .csx-form .csx-path-row input {
  flex: 1 1 120px;
  border: 0;
  border-radius: 0;
  padding-left: 2px;
  box-shadow: none;
}

[data-surface="content"] .csx-link-row {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 8px;
  align-items: start;
}

[data-surface="content"] .csx-link-row .lb {
  min-width: 0;
}

[data-surface="content"] .csx-link-field {
  display: grid;
  min-width: 0;
}

[data-surface="content"] .csx-form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding-top: 4px;
}

/* The preview: the customer's page in a browser frame, sticky beside the editor. */

[data-surface="content"] .csx-preview-card {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 12px;
  min-width: 0;
}

[data-surface="content"] .csx-preview-head {
  display: grid;
  gap: 2px;
  padding: 0 4px;
}

[data-surface="content"] .csx-browser {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--card-shadow);
  transition: box-shadow .4s;
}

[data-surface="content"] .csx-preview-card[data-saved] .csx-browser {
  box-shadow: 0 0 0 4px var(--tint-blue), var(--card-shadow);
}

[data-surface="content"] .csx-browser-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: #f7f8fa;
}

[data-surface="content"] .csx-browser-dots {
  display: inline-flex;
  gap: 6px;
}

[data-surface="content"] .csx-browser-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #dcdfe5;
}

[data-surface="content"] .csx-browser-url {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 10px;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-surface="content"] .csx-browser-url:empty {
  display: none;
}

[data-surface="content"] .csx-frame {
  display: block;
  width: 100%;
  height: 720px;
  border: 0;
  background: #fff;
}

/* ---- Launch day switch ----------------------------------------------------------- */

[data-surface="content"] .csx-launch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
}

[data-surface="content"] .csx-launch-text {
  display: grid;
  gap: 4px;
  max-width: 64ch;
}

[data-surface="content"] .csx-launch-text p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

[data-surface="content"] .csx-launch-form {
  margin: 0;
}

[data-surface="content"] .csx-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

[data-surface="content"] .csx-switch:disabled {
  cursor: not-allowed;
  opacity: .55;
}

[data-surface="content"] .csx-switch:focus-visible {
  outline: 2px solid #124ea766;
  outline-offset: 2px;
}

[data-surface="content"] .csx-switch-track {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: #d9dce2;
  transition: background-color .25s var(--motion-ease-out);
}

[data-surface="content"] .csx-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(11 13 18 / .2);
  transition: transform .3s var(--motion-ease-out);
}

[data-surface="content"] .csx-switch[aria-checked="true"] .csx-switch-track {
  background: var(--brand);
}

[data-surface="content"] .csx-switch[aria-checked="true"] .csx-switch-thumb {
  transform: translateX(20px);
}

[data-surface="content"] .csx-switch[aria-busy="true"] .csx-switch-thumb {
  transform: translateX(10px);
}

/* ---- Waitlist -------------------------------------------------------------------- */

[data-surface="content"] .csx-waitlist-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

[data-surface="content"] .csx-waitlist-head > div {
  display: grid;
  gap: 4px;
  max-width: 64ch;
}

[data-surface="content"] .csx-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}

[data-surface="content"] .csx-count-tile {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fbfbfc;
}

[data-surface="content"] .csx-count-tile dt {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 650;
}

[data-surface="content"] .csx-count-tile dd {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

[data-surface="content"] .csx-count-tile[data-tone="positive"] dd {
  color: var(--success-ink);
}

[data-surface="content"] .csx-signups {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

[data-surface="content"] .csx-signups[data-empty] {
  display: none;
}

[data-surface="content"] .csx-signups-empty {
  display: none;
  margin: 0 0 12px;
  padding: 18px;
  border: 1px dashed #d6d8de;
  border-radius: 13px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

[data-surface="content"] .csx-signups[data-empty] + .csx-signups-empty {
  display: block;
}

[data-surface="content"] .csx-signup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
}

[data-surface="content"] .csx-signup[data-fresh] {
  animation: csx-rise .5s var(--motion-ease-out) both;
}

@keyframes csx-rise {
  from { opacity: 0; transform: translateY(6px); }
}

[data-surface="content"] .csx-signup-main {
  display: grid;
  gap: 1px;
  min-width: 0;
}

[data-surface="content"] .csx-signup-email {
  color: var(--ink);
  font-size: 14.5px;
  overflow-wrap: anywhere;
}

[data-surface="content"] .csx-signup-when {
  color: var(--muted);
  font-size: 12.5px;
}

[data-surface="content"] .csx-signup-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

[data-surface="content"] .csx-signup-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c4c8d0;
}

[data-surface="content"] .csx-signup-state[data-confirmed] {
  color: var(--success-ink);
}

[data-surface="content"] .csx-signup-state[data-confirmed] .csx-signup-dot {
  background: var(--success);
}

[data-surface="content"] .csx-remove {
  margin: 0;
}

[data-surface="content"] .csx-icon-button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}

[data-surface="content"] .csx-icon-button:hover,
[data-surface="content"] .csx-icon-button:focus-visible {
  border-color: var(--negative-line);
  background: var(--negative-tint);
  color: var(--negative-ink);
}

[data-surface="content"] .csx-icon-button .icon {
  width: 16px;
  height: 16px;
}

/* ---- Content list strip: the coming-soon page beside the articles ----------------- */

[data-surface="content"] .ct-coming-soon .ct-strip-icon {
  background: var(--tint-pink);
  color: #9a3550;
}

[data-surface="content"] .ct-coming-soon[data-status="live"] .ct-strip-icon {
  background: var(--success-tint);
  color: var(--success-ink);
}

/* ---- Narrow screens -------------------------------------------------------------- */

@media (max-width: 1080px) {
  [data-surface="content"] .csx-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-surface="content"] .csx-preview-card {
    position: static;
  }

  [data-surface="content"] .csx-frame {
    height: 640px;
  }
}

@media (max-width: 600px) {
  [data-surface="content"] .csx-card {
    padding: 18px 16px;
  }

  [data-surface="content"] .csx-start {
    padding: 22px 18px;
  }

  [data-surface="content"] .csx-choice {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-surface="content"] .csx-count-tile {
    padding: 10px 12px;
  }

  [data-surface="content"] .csx-count-tile dd {
    font-size: 24px;
  }

  [data-surface="content"] .csx-link-row {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }

  [data-surface="content"] .csx-signup {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  [data-surface="content"] .csx-signup-state {
    grid-column: 1;
    grid-row: 2;
  }

  [data-surface="content"] .csx-remove {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  [data-surface="content"] .csx-frame {
    height: 560px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-surface="content"] .csx-status-dot::after,
  [data-surface="content"] .csx-signup[data-fresh] {
    animation: none;
  }

  [data-surface="content"] .csx-switch-thumb,
  [data-surface="content"] .csx-switch-track,
  [data-surface="content"] .csx-path {
    transition: none;
  }
}

/* Social posts (/app/<workspace>/social), Settings › Connections' social cards, and the
   network previews. Owner: social (wave 3). Rendered by crates/web/src/pages/app/social/.
   Classes: `so-` for the pages and cards, `np-` for the previews (each network's own
   look: LinkedIn's card, Bluesky's, X's). */

/* Status: a dot and a word, never a pill. */

.so-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--pill-ink, #50545e);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
  white-space: nowrap;
}

.so-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent);
}

.so-status[data-tone="progress"] .so-dot {
  animation: so-pulse 1.6s var(--motion-ease-in-out) infinite;
}

.so-status-big {
  font-size: 14.5px;
}

@keyframes so-pulse {
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 8%, transparent); }
}

/* The page */

[data-surface="social"] .so-page {
  display: grid;
  gap: 18px;
}

[data-surface="social"] .so-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
}

[data-surface="social"] .so-back .icon {
  width: 14px;
  height: 14px;
  transform: rotate(180deg);
}

[data-surface="social"] .so-back:hover {
  color: var(--ink);
}

[data-surface="social"] .so-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

[data-surface="social"] .so-account {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-size: 13.5px;
  font-weight: 620;
}

[data-surface="social"] .so-account .np-mark,
[data-surface="social"] .so-row-mark .np-mark {
  width: 15px;
  height: 15px;
}

[data-surface="social"] .so-strip-manage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--deep);
  font-size: 13.5px;
  font-weight: 650;
}

[data-surface="social"] .so-strip-manage .icon {
  width: 14px;
  height: 14px;
}

/* Network colours, shared by marks and checkboxes. */

[data-network="linkedin"] { --np-brand: #0a66c2; }
[data-network="bluesky"] { --np-brand: #1185fe; }
[data-network="x"] { --np-brand: #111317; }

.so-row-mark {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--np-brand) 10%, #fff);
  color: var(--np-brand);
}

/* The list */

[data-surface="social"] .so-rows {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="social"] .so-row-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: inherit;
  box-shadow: var(--dash-card-shadow);
  transition: border-color .2s, transform .25s var(--motion-ease-out);
}

[data-surface="social"] .so-row-link:hover {
  border-color: #bdc0c8;
}

[data-surface="social"] .so-row-marks {
  display: flex;
  gap: 4px;
}

[data-surface="social"] .so-row-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

[data-surface="social"] .so-row-main strong {
  overflow: hidden;
  font-size: 15px;
  font-weight: 680;
  white-space: nowrap;
  text-overflow: ellipsis;
}

[data-surface="social"] .so-row-main small,
[data-surface="social"] .so-row-side small {
  color: var(--muted);
  font-size: 12.5px;
}

[data-surface="social"] .so-row-side {
  display: grid;
  justify-items: end;
  gap: 3px;
  text-align: right;
}

[data-surface="social"] .so-needs {
  color: #8a4a00;
  font-weight: 650;
}

/* One post */

[data-surface="social"] .so-origin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  margin-top: -8px;
  color: var(--deep);
  font-size: 13.5px;
  font-weight: 650;
}

[data-surface="social"] .so-origin .icon {
  width: 14px;
  height: 14px;
}

[data-surface="social"] .so-sample {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid #f1d7a8;
  border-radius: 12px;
  background: #fff8ec;
  color: #6b4100;
  font-size: 13.5px;
}

[data-surface="social"] .so-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  align-items: start;
  gap: 22px;
}

[data-surface="social"] .so-main,
[data-surface="social"] .so-side {
  display: grid;
  gap: 16px;
  min-width: 0;
}

[data-surface="social"] .so-side {
  position: sticky;
  top: 84px;
}

[data-surface="social"] .so-card {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
}

[data-surface="social"] .so-card h2 {
  margin: 0 0 12px;
  font-size: 15.5px;
  font-weight: 720;
  letter-spacing: -.01em;
}

[data-surface="social"] .so-actions {
  display: grid;
  gap: 12px;
}

[data-surface="social"] .so-actions:not([data-any]):not(:has(li)) {
  display: none;
}

[data-surface="social"] .so-waiting {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="social"] .so-waiting li {
  display: flex;
  gap: 10px;
  color: #50545e;
  font-size: 14px;
  line-height: 1.5;
}

[data-surface="social"] .so-waiting .icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: #b06a00;
}

[data-surface="social"] .so-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

[data-surface="social"] .so-cancel {
  margin-left: auto;
}

[data-surface="social"] .so-previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  align-items: start;
  gap: 16px;
}

/* Targets */

[data-surface="social"] .so-targets ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="social"] .so-target {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

[data-surface="social"] .so-target:first-child {
  padding-top: 0;
  border-top: 0;
}

[data-surface="social"] .so-target-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

[data-surface="social"] .so-target-main p {
  margin: 2px 0 0;
  color: #50545e;
  font-size: 13.5px;
  line-height: 1.5;
}

[data-surface="social"] .so-target-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13.5px;
  font-weight: 650;
}

[data-surface="social"] .so-target-links a {
  color: var(--deep);
}

[data-surface="social"] .so-resolve {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 12px;
  border-radius: 12px;
  background: #fff8ec;
}

[data-surface="social"] .so-resolve label {
  font-size: 13.5px;
  font-weight: 600;
}

/* Forms */

[data-surface="social"] .so-field {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

[data-surface="social"] .so-field > label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 680;
}

[data-surface="social"] .so-field > label .np-mark {
  width: 14px;
  height: 14px;
  color: var(--np-brand);
}

[data-surface="social"] .so-field[data-text-field="linkedin"] { --np-brand: #0a66c2; }
[data-surface="social"] .so-field[data-text-field="bluesky"] { --np-brand: #1185fe; }
[data-surface="social"] .so-field[data-text-field="x"] { --np-brand: #111317; }

[data-surface="social"] .so-field-count {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  transition: color .2s;
}

[data-surface="social"] .so-field-count[data-level="near"] { color: #b06a00; }
[data-surface="social"] .so-field-count[data-level="over"] { color: #b42318; }

[data-surface="social"] .so-field textarea,
[data-surface="social"] .so-field input,
[data-surface="social"] .so-resolve input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d6d8de;
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  transition: border-color .2s, box-shadow .2s;
}

[data-surface="social"] .so-field textarea {
  resize: vertical;
}

[data-surface="social"] .so-field textarea:focus,
[data-surface="social"] .so-field input:focus,
[data-surface="social"] .so-resolve input:focus {
  border-color: var(--green);
  outline: 0;
  box-shadow: 0 0 0 3px #00368722;
}

[data-surface="social"] .so-field textarea[data-level="over"] {
  border-color: #e2a19b;
}

[data-surface="social"] .so-more {
  margin-bottom: 14px;
}

[data-surface="social"] .so-more summary {
  margin-bottom: 10px;
  color: var(--deep);
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
}

[data-surface="social"] .so-accounts {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}

[data-surface="social"] .so-accounts legend {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 680;
}

/* A hand-built checkbox. */

.so-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}

.so-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.so-check-box {
  display: grid;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid #bdc0c8;
  border-radius: 6px;
  background: #fff;
  transition: background-color .18s, border-color .18s, transform .18s var(--motion-ease-out);
}

.so-check-box::after {
  content: "";
  width: 9px;
  height: 5px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg) scale(0);
  transition: transform .18s var(--motion-ease-out);
}

.so-check:has(input:checked) {
  border-color: color-mix(in srgb, var(--np-brand) 40%, #fff);
  background: color-mix(in srgb, var(--np-brand) 5%, #fff);
}

.so-check input:checked + .so-check-box {
  border-color: var(--np-brand);
  background: var(--np-brand);
}

.so-check input:checked + .so-check-box::after {
  transform: rotate(-45deg) scale(1);
}

.so-check input:focus-visible + .so-check-box {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.so-check .np-mark {
  width: 15px;
  height: 15px;
  color: var(--np-brand);
}

[data-surface="social"] .so-claims ul,
[data-surface="social"] .so-rules ul,
[data-surface="social"] .so-revisions ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="social"] .so-claims li,
[data-surface="social"] .so-revisions li {
  display: grid;
  gap: 2px;
  font-size: 13.5px;
}

[data-surface="social"] .so-claims small,
[data-surface="social"] .so-revisions small {
  color: var(--muted);
  font-size: 12.5px;
}

[data-surface="social"] .so-claims li[data-flagged] small {
  color: #b42318;
  font-weight: 650;
}

[data-surface="social"] .so-revisions li[data-current] span {
  font-weight: 700;
}

[data-surface="social"] .so-rules li {
  position: relative;
  padding-left: 16px;
  color: #50545e;
  font-size: 13px;
  line-height: 1.5;
}

[data-surface="social"] .so-rules li::before {
  content: "";
  position: absolute;
  top: .6em;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

[data-surface="social"] .so-schedule-now {
  margin: -4px 0 10px;
  color: #50545e;
  font-size: 14px;
}

/* The previews: each network's own look. */

.np {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--dash-card-shadow, 0 1px 2px #0000000d);
}

.np-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
  color: #50545e;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.np-bar .np-mark {
  width: 14px;
  height: 14px;
  color: var(--np-brand);
}

.np-live {
  margin-left: auto;
  color: var(--success-ink);
  letter-spacing: 0;
  text-transform: none;
}

.np-mark {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.np-post {
  display: grid;
  gap: 10px;
  padding: 14px 16px 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.np-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.np-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1f54a3, #0d336b);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  object-fit: cover;
}

.np-avatar[data-page] {
  border-radius: 8px;
}

.np-who {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}

.np-who strong {
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.np-who small {
  color: #6b7480;
  font-size: 13px;
}

.np-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.np-text:empty::before {
  content: "Start writing: the post appears here as each network shows it.";
  color: #9ea1a9;
}

.np-link {
  color: var(--np-brand);
}

.np[data-network="x"] .np-link {
  color: #1d9bf0;
}

.np-card {
  display: grid;
  overflow: hidden;
  border: 1px solid #e1e2e5;
  border-radius: 14px;
}

.np-card-thumb {
  display: grid;
  height: 120px;
  place-items: center;
  background: linear-gradient(135deg, #f0f1f4, #e2e4e9);
  color: #989da8;
}

.np-card-thumb svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.np-card-text {
  display: grid;
  gap: 2px;
  padding: 10px 12px 12px;
}

.np-card-host {
  color: #6b7480;
  font-size: 12.5px;
}

.np-card-title {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
}

.np-card-desc {
  overflow: hidden;
  color: #50545e;
  font-size: 13.5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.np-image {
  margin: 0;
  overflow: hidden;
  border: 1px solid #e1e2e5;
  border-radius: 14px;
}

.np-image img {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: cover;
}

.np-actions {
  display: flex;
  justify-content: space-between;
  padding: 8px 4px 2px;
  border-top: 1px solid #eff0f2;
  color: #6b7480;
  font-size: 13px;
  font-weight: 600;
}

/* LinkedIn: the feed card, its blue, square-ish media, the action bar. */
.np[data-network="linkedin"] .np-post {
  padding-top: 12px;
}

.np[data-network="linkedin"] .np-card {
  border-radius: 0;
  border-right: 0;
  border-left: 0;
  margin: 0 -16px;
}

.np[data-network="linkedin"] .np-card-text {
  background: #f0f2f6;
}

.np[data-network="linkedin"] .np-card-title {
  order: -1;
  font-size: 14px;
}

.np[data-network="linkedin"] .np-actions {
  justify-content: space-around;
}

/* Bluesky: the rounded external card under the text. */
.np[data-network="bluesky"] .np-avatar {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #3ea0ff, #1167d6);
}

.np[data-network="bluesky"] .np-card {
  border-radius: 12px;
}

.np[data-network="bluesky"] .np-card-text {
  border-top: 1px solid #e9eaee;
}

/* X: the dense layout and the domain-under-card. */
.np[data-network="x"] .np-avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #303235, #111317);
}

.np[data-network="x"] .np-card {
  border-radius: 16px;
}

.np[data-network="x"] .np-card-host {
  order: 3;
}

.np[data-network="x"] .np-card-desc {
  display: none;
}

/* The check under each preview. */

.np-check {
  display: grid;
  gap: 8px;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--line);
  background: #fbfcfd;
}

.np-meter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}

.np-meter {
  position: relative;
  flex: 1 1 auto;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #eaebef;
}

.np-meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: var(--green);
  transition: width .35s var(--motion-ease-out), background-color .25s;
}

.np-check[data-level="near"] .np-meter-fill { background: #d08a2e; }
.np-check[data-level="over"] .np-meter-fill { background: #c4321f; }

.np-meter-fill[data-fill="5"] { width: 5%; }
.np-meter-fill[data-fill="10"] { width: 10%; }
.np-meter-fill[data-fill="15"] { width: 15%; }
.np-meter-fill[data-fill="20"] { width: 20%; }
.np-meter-fill[data-fill="25"] { width: 25%; }
.np-meter-fill[data-fill="30"] { width: 30%; }
.np-meter-fill[data-fill="35"] { width: 35%; }
.np-meter-fill[data-fill="40"] { width: 40%; }
.np-meter-fill[data-fill="45"] { width: 45%; }
.np-meter-fill[data-fill="50"] { width: 50%; }
.np-meter-fill[data-fill="55"] { width: 55%; }
.np-meter-fill[data-fill="60"] { width: 60%; }
.np-meter-fill[data-fill="65"] { width: 65%; }
.np-meter-fill[data-fill="70"] { width: 70%; }
.np-meter-fill[data-fill="75"] { width: 75%; }
.np-meter-fill[data-fill="80"] { width: 80%; }
.np-meter-fill[data-fill="85"] { width: 85%; }
.np-meter-fill[data-fill="90"] { width: 90%; }
.np-meter-fill[data-fill="95"] { width: 95%; }
.np-meter-fill[data-fill="100"] { width: 100%; }

.np-count {
  flex: none;
  color: #50545e;
  font-variant-numeric: tabular-nums;
}

.np-count strong {
  color: var(--ink);
}

.np-unit {
  color: #8e929a;
}

.np-verdict {
  flex: none;
  color: var(--deep);
  font-weight: 700;
}

.np-check[data-level="over"] .np-verdict,
.np-check:has(li[data-blocks]) .np-verdict {
  color: #b42318;
}

.np-issues {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0 0 0 16px;
  color: #6b4100;
  font-size: 12.5px;
  line-height: 1.45;
}

.np-issues li[data-blocks] {
  color: #b42318;
  font-weight: 650;
}

.np-note {
  margin: 0;
  padding: 0 16px 12px;
  color: #50545e;
  font-size: 12.5px;
  line-height: 1.45;
  background: #fbfcfd;
}

.np-note[data-kind="cost"] {
  color: #6b4100;
}

/* Settings › Connections: the social networks' and Reddit's cards sit in the connectors'
   grid (`.cx-cards`) and use their card design (`connections.css`: `cx-card`, `cx-card-head`,
   `cx-logo`, `cx-status`). What follows is only what is social's own. */

[data-surface="settings"] .cx-cards > .so-conn-note {
  display: flex;
  grid-column: 1 / -1;
  gap: 8px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 13px;
  background: #eef1fb;
  color: #33407a;
}

[data-surface="settings"] .so-conn-note .icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

[data-surface="settings"] .so-net {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 12px;
  min-width: 0;
  scroll-margin-top: 90px;
}

[data-surface="settings"] .so-net .cx-card-head {
  margin-bottom: 0;
}

[data-surface="settings"] .so-net .cx-card-head > div {
  min-width: 0;
}

[data-surface="settings"] .so-net .cx-actions,
[data-surface="settings"] .so-net .cx-lead,
[data-surface="settings"] .so-net .cx-meta {
  margin-top: 0;
}

[data-surface="settings"] .so-net:target {
  box-shadow: 0 0 0 4px #00368722, var(--dash-card-shadow);
}

[data-surface="settings"] .cx-logo[data-provider="bluesky"] { background: #e8f2ff; color: #0a7aff; }
[data-surface="settings"] .cx-logo[data-provider="linkedin"] { background: #e8f1fa; color: #0a66c2; }
[data-surface="settings"] .cx-logo[data-provider="x"] { background: #eff0f1; color: #111317; }
[data-surface="settings"] .cx-logo[data-provider="reddit"] { background: #fff0ea; color: #ff4500; }

[data-surface="settings"] .cx-logo .np-mark {
  width: 20px;
  height: 20px;
}

[data-surface="settings"] .so-conn-accounts {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="settings"] .so-conn-account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--canvas);
}

[data-surface="settings"] .so-conn-account-main {
  display: grid;
  flex: 1 1 180px;
  gap: 2px;
  min-width: 0;
}

[data-surface="settings"] .so-conn-account-main strong {
  overflow: hidden;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

[data-surface="settings"] .so-conn-account-main small {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}

[data-surface="settings"] .so-conn-account-actions {
  display: flex;
  gap: 8px;
}

[data-surface="settings"] .so-conn-form {
  display: grid;
  gap: 8px;
  min-width: 0;
}

[data-surface="settings"] .so-conn-form.cx-actions {
  display: flex;
}

[data-surface="settings"] .so-conn-form .dash-button,
[data-surface="settings"] .so-conn-account-actions .dash-button {
  width: auto;
  min-width: 0;
  max-width: 100%;
  justify-self: start;
  white-space: normal;
  text-align: left;
  overflow-wrap: anywhere;
}

[data-surface="settings"] .so-conn-form .dash-button .np-mark {
  width: 15px;
  height: 15px;
}

[data-surface="settings"] .so-conn-form label {
  font-size: 13px;
  font-weight: 650;
}

[data-surface="settings"] .so-conn-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Beside a field the button keeps its one line (on phones it takes its own row). */
[data-surface="settings"] .so-conn-inline .dash-button {
  flex: none;
  white-space: nowrap;
}

[data-surface="settings"] .so-conn-at {
  color: var(--muted);
  font-weight: 700;
}

[data-surface="settings"] .so-conn-form input {
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  padding: 9px 11px;
  border: 1px solid #d6d8de;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
}

[data-surface="settings"] .so-conn-form input:focus {
  border-color: var(--green);
  outline: 0;
  box-shadow: 0 0 0 3px #00368722;
}

[data-surface="settings"] .so-conn-password summary {
  color: var(--deep);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

[data-surface="settings"] .so-conn-password p {
  margin: 8px 0;
  color: #50545e;
  font-size: 12.5px;
  line-height: 1.5;
}

/* X's card: the X posting add-on in posts, and the way to add it (style A: a pale blue
   tint while it's off, neutral with a success check once it's on). */
[data-surface="settings"] .so-spend {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 13px;
  background: var(--tint-blue);
}

[data-surface="settings"] .so-spend[data-on] {
  background: var(--canvas);
}

[data-surface="settings"] .so-spend .cx-meta {
  display: flex;
  gap: 8px;
  color: var(--ink);
}

[data-surface="settings"] .so-spend .cx-meta .icon {
  color: var(--brand);
}

[data-surface="settings"] .so-spend[data-on] .cx-meta .icon {
  color: var(--success-ink);
}

[data-surface="settings"] .so-spend .cx-actions {
  margin: 0;
}

[data-surface="settings"] .so-spend .cx-meta .icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

[data-surface="settings"] .so-spend-form input {
  max-width: 120px;
}

[data-surface="settings"] .so-conn-rules {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 10px 0 0;
  border-top: 1px dashed var(--line);
  list-style: none;
}

[data-surface="settings"] .so-conn-rules li {
  display: flex;
  gap: 8px;
  color: #50545e;
  font-size: 12.5px;
  line-height: 1.45;
}

[data-surface="settings"] .so-conn-rules .icon {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: var(--green);
}

/* The page that continues to a network's consent screen. */

.so-continue main {
  max-width: 420px;
  margin: 18vh auto;
  padding: 0 16px;
  text-align: center;
}

@media (max-width: 960px) {
  [data-surface="social"] .so-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-surface="social"] .so-side {
    position: static;
  }
}

@media (max-width: 640px) {
  [data-surface="social"] .so-row-link {
    grid-template-columns: auto minmax(0, 1fr);
  }

  [data-surface="social"] .so-row-side {
    grid-column: 2;
    justify-items: start;
    text-align: left;
  }

  [data-surface="social"] .so-strip-manage {
    margin-left: 0;
  }

}

@media (prefers-reduced-motion: reduce) {
  .so-status[data-tone="progress"] .so-dot { animation: none; }
}

@media (max-width: 640px) {
  [data-surface="settings"] .so-conn-inline {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }

  [data-surface="settings"] .so-conn-inline .dash-button {
    grid-column: 1 / -1;
  }
}

/* The Conversations inbox (/app/<workspace>/conversations). Owner: social (wave 3).
   Rendered by crates/web/src/pages/app/conversations/. Classes are prefixed `cv-`. */

[data-surface="conversations"] .cv-page {
  display: grid;
  gap: 16px;
}

[data-surface="conversations"] .cv-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  color: #50545e;
  font-size: 13px;
}

[data-surface="conversations"] .cv-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

[data-surface="conversations"] .cv-strip .icon {
  width: 14px;
  height: 14px;
  color: var(--muted);
}

[data-surface="conversations"] .cv-source {
  color: #33407a;
}

[data-surface="conversations"] .cv-layout {
  display: grid;
  grid-template-columns: minmax(280px, 400px) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

[data-surface="conversations"] .cv-list {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 10px;
  max-height: calc(100vh - 110px);
  padding: 12px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
}

/* Four filters in a 400px column: tighter than the page-wide tabs, so none is cut off. */
[data-surface="conversations"] .cv-list .ui-tabs-flat {
  gap: 0;
}

[data-surface="conversations"] .cv-list .ui-tabs-flat > a {
  gap: 6px;
  padding: 10px 9px 11px;
  font-size: 13.5px;
}

[data-surface="conversations"] .cv-list .ui-tabs-flat > a .wk-count {
  min-width: 20px;
  padding: 0 5px;
}

[data-surface="conversations"] .cv-rows {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="conversations"] .cv-row-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  color: inherit;
  transition: background-color .2s;
}

[data-surface="conversations"] .cv-row-link:hover {
  background: var(--canvas);
}

[data-surface="conversations"] .cv-row-link[aria-current="page"] {
  background: #e9eff7;
  box-shadow: inset 3px 0 0 var(--green);
}

[data-surface="conversations"] .cv-row-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

[data-surface="conversations"] .cv-row-main strong {
  font-size: 14.5px;
  font-weight: 680;
  line-height: 1.35;
}

[data-surface="conversations"] .cv-row-status {
  display: none;
}

[data-surface="conversations"] .cv-sub {
  color: var(--muted);
  font-size: 12.5px;
}

[data-surface="conversations"] .cv-fit {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, #fff 76%, transparent 78% 100%),
    conic-gradient(var(--cv-ring) calc(var(--cv-fit, 70) * 1%), #eaebef 0);
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  --cv-ring: #9ea2ac;
}

[data-surface="conversations"] .cv-fit[data-band="high"] { --cv-ring: var(--green); }
[data-surface="conversations"] .cv-fit[data-band="mid"] { --cv-ring: #d08a2e; }
[data-surface="conversations"] .cv-fit[data-band="low"] { --cv-ring: #9ea2ac; }
[data-surface="conversations"] .cv-fit[data-fit="0"] { --cv-fit: 0; }
[data-surface="conversations"] .cv-fit[data-fit="5"] { --cv-fit: 5; }
[data-surface="conversations"] .cv-fit[data-fit="10"] { --cv-fit: 10; }
[data-surface="conversations"] .cv-fit[data-fit="15"] { --cv-fit: 15; }
[data-surface="conversations"] .cv-fit[data-fit="20"] { --cv-fit: 20; }
[data-surface="conversations"] .cv-fit[data-fit="25"] { --cv-fit: 25; }
[data-surface="conversations"] .cv-fit[data-fit="30"] { --cv-fit: 30; }
[data-surface="conversations"] .cv-fit[data-fit="35"] { --cv-fit: 35; }
[data-surface="conversations"] .cv-fit[data-fit="40"] { --cv-fit: 40; }
[data-surface="conversations"] .cv-fit[data-fit="45"] { --cv-fit: 45; }
[data-surface="conversations"] .cv-fit[data-fit="50"] { --cv-fit: 50; }
[data-surface="conversations"] .cv-fit[data-fit="55"] { --cv-fit: 55; }
[data-surface="conversations"] .cv-fit[data-fit="60"] { --cv-fit: 60; }
[data-surface="conversations"] .cv-fit[data-fit="65"] { --cv-fit: 65; }
[data-surface="conversations"] .cv-fit[data-fit="70"] { --cv-fit: 70; }
[data-surface="conversations"] .cv-fit[data-fit="75"] { --cv-fit: 75; }
[data-surface="conversations"] .cv-fit[data-fit="80"] { --cv-fit: 80; }
[data-surface="conversations"] .cv-fit[data-fit="85"] { --cv-fit: 85; }
[data-surface="conversations"] .cv-fit[data-fit="90"] { --cv-fit: 90; }
[data-surface="conversations"] .cv-fit[data-fit="95"] { --cv-fit: 95; }
[data-surface="conversations"] .cv-fit[data-fit="100"] { --cv-fit: 100; }

[data-surface="conversations"] .cv-rule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pill-ink, #50545e);
  font-size: 12.5px;
  font-weight: 650;
}

[data-surface="conversations"] .cv-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

[data-surface="conversations"] .cv-list-empty {
  margin: 0;
  padding: 18px 12px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

/* No thread open yet (wide screens; on phones the list is the page). */
[data-surface="conversations"] .cv-pick {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 56px 28px;
  border: 1px dashed #d6d8de;
  border-radius: 20px;
  color: var(--muted);
  text-align: center;
}

[data-surface="conversations"] .cv-pick .icon {
  width: 26px;
  height: 26px;
  color: var(--green);
}

[data-surface="conversations"] .cv-pick h2 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 720;
}

[data-surface="conversations"] .cv-pick p {
  max-width: 380px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* The open thread */

[data-surface="conversations"] .cv-detail {
  display: grid;
  gap: 16px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
  animation: cv-in .45s var(--motion-ease-out) backwards;
}

@keyframes cv-in {
  from { opacity: 0; transform: translateY(10px); }
}

[data-surface="conversations"] .cv-detail-head {
  display: grid;
  gap: 6px;
}

[data-surface="conversations"] .cv-detail-head h2 {
  margin: 0;
  font-size: 21px;
  font-weight: 740;
  letter-spacing: -.02em;
  line-height: 1.25;
}

[data-surface="conversations"] .cv-open {
  width: max-content;
  color: var(--deep);
  font-size: 13.5px;
  font-weight: 680;
}

[data-surface="conversations"] .cv-excerpt {
  margin: 0;
  padding: 12px 16px;
  border-left: 3px solid #ff4500;
  border-radius: 0 12px 12px 0;
  background: #fff6f2;
  color: #3a2a24;
  font-size: 14.5px;
  line-height: 1.55;
  white-space: pre-wrap;
}

[data-surface="conversations"] .cv-cleared {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

[data-surface="conversations"] .cv-why h3,
[data-surface="conversations"] .cv-replies h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 15.5px;
  font-weight: 720;
}

[data-surface="conversations"] .cv-why h3 .cv-fit {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

[data-surface="conversations"] .cv-why ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="conversations"] .cv-why li {
  display: grid;
  gap: 3px;
  padding-left: 14px;
  border-left: 2px solid #e2e4e9;
  font-size: 14px;
  line-height: 1.5;
}

[data-surface="conversations"] .cv-why li span {
  color: #50545e;
}

[data-surface="conversations"] .cv-why q {
  color: #3a2a24;
  font-style: italic;
}

[data-surface="conversations"] .cv-rules {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--pill-bg, var(--canvas));
  color: var(--pill-ink, var(--ink));
}

[data-surface="conversations"] .cv-rules .icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

[data-surface="conversations"] .cv-rules div {
  display: grid;
  gap: 3px;
}

[data-surface="conversations"] .cv-rules small {
  color: #50545e;
  font-size: 12.5px;
  line-height: 1.45;
}

[data-surface="conversations"] .cv-reply {
  display: grid;
  gap: 12px;
}

[data-surface="conversations"] .cv-reply-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  color: var(--muted);
  font-size: 12.5px;
}

[data-surface="conversations"] .cv-mentions {
  color: #6b4100;
  font-weight: 650;
}

[data-surface="conversations"] .cv-sample {
  color: #6b4100;
}

[data-surface="conversations"] .cv-edit {
  display: grid;
  gap: 8px;
}

[data-surface="conversations"] .cv-edit textarea,
[data-surface="conversations"] .cv-posted input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d6d8de;
  border-radius: 12px;
  font: inherit;
  font-size: 14.5px;
  line-height: 1.55;
}

[data-surface="conversations"] .cv-edit textarea:focus,
[data-surface="conversations"] .cv-posted input:focus {
  border-color: var(--green);
  outline: 0;
  box-shadow: 0 0 0 3px #00368722;
}

[data-surface="conversations"] .cv-edit .dash-button {
  width: max-content;
}

[data-surface="conversations"] .cv-disclosure {
  margin: 0;
  color: #6b4100;
  font-size: 13.5px;
  font-weight: 600;
}

[data-surface="conversations"] .cv-pace-block {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff8ec;
  color: #6b4100;
  font-size: 13px;
}

[data-surface="conversations"] .cv-pace-block .icon {
  flex: none;
  width: 15px;
  height: 15px;
}

[data-surface="conversations"] .cv-posted {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

[data-surface="conversations"] .cv-posted label {
  color: #50545e;
  font-size: 13px;
}

[data-surface="conversations"] .cv-inline {
  display: flex;
  gap: 8px;
}

[data-surface="conversations"] .cv-live {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 0;
  font-size: 13.5px;
}

[data-surface="conversations"] .cv-live a {
  color: var(--success-ink);
  font-weight: 650;
}

[data-surface="conversations"] .cv-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

@media (max-width: 960px) {
  [data-surface="conversations"] .cv-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-surface="conversations"] .cv-list {
    position: static;
    max-height: none;
  }

  [data-surface="conversations"] .cv-pick {
    display: none;
  }

  /* On phones an open thread comes first; the list follows it. */
  [data-surface="conversations"] .cv-page[data-open] .cv-detail {
    order: -1;
  }

  [data-surface="conversations"] .cv-detail {
    padding: 18px 16px;
  }

  [data-surface="conversations"] .cv-inline {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-surface="conversations"] .cv-detail { animation: none; }
}

/* The Playbook (/app/<workspace>/playbook…). Owner: playbooks (wave 3). Rendered by
   crates/web/src/pages/app/playbook/. Classes are prefixed `pb-`; the briefing's
   "What did you work on?" card (`.briefing-notes`) reuses the notes form. */

[data-surface="playbook"] .pb-page {
  display: grid;
  gap: 16px;
}

[data-surface="playbook"] .pb-subject {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -6px 0 0;
  color: #50545e;
  font-size: 13.5px;
  font-weight: 600;
}

[data-surface="playbook"] .pb-subject .icon {
  width: 15px;
  height: 15px;
  color: var(--deep);
}

[data-surface="playbook"] .pb-main {
  display: grid;
  gap: 18px;
  min-width: 0;
  /* Long links (a published devlog's address, a commit URL) wrap instead of widening the
     page at phone width. */
  overflow-wrap: anywhere;
}

[data-surface="playbook"] .pb-columns {
  container: pb-columns / inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

@media (min-width: 1100px) {
  [data-surface="playbook"] .pb-columns {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

[data-surface="playbook"] .pb-card,
[data-surface="playbook"] .pb-part {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
}

[data-surface="playbook"] .pb-card h2,
[data-surface="playbook"] .pb-part h2 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  letter-spacing: -0.01em;
}

[data-surface="playbook"] .pb-card h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 14.5px;
}

[data-surface="playbook"] .pb-card h3 small {
  color: var(--muted);
  font-weight: 600;
}

[data-surface="playbook"] .pb-lede,
[data-surface="playbook"] .pb-part p {
  margin: 0;
  color: #50545e;
  font-size: 14px;
  line-height: 1.55;
}

[data-surface="playbook"] .pb-empty {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--canvas);
  color: #50545e;
  font-size: 14px;
  line-height: 1.5;
}

[data-surface="playbook"] .pb-empty[data-tone="attention"] {
  background: var(--dash-attention-bg);
  color: var(--dash-attention-ink);
}

/* Overview cards. */
[data-surface="playbook"] .pb-parts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="playbook"] .pb-part {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}

[data-surface="playbook"] .pb-part-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--mint);
  color: var(--deep);
}

[data-surface="playbook"] .pb-part-icon .icon {
  width: 20px;
  height: 20px;
}

[data-surface="playbook"] .pb-part-body {
  display: grid;
  gap: 10px;
  justify-items: start;
  min-width: 0;
}

[data-surface="playbook"] .pb-part-count {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
}

[data-surface="playbook"] .pb-part-count strong {
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

[data-surface="playbook"] .pb-part-count span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

[data-surface="playbook"] .pb-part-count:hover span,
[data-surface="playbook"] .pb-part-next:hover span {
  color: var(--deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

[data-surface="playbook"] .pb-part-next {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  color: #33407a;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

[data-surface="playbook"] .pb-part-next .icon {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
}

[data-surface="playbook"] .pb-part-note {
  color: var(--muted);
  font-size: 13px;
}

[data-surface="playbook"] .pb-promise,
[data-surface="playbook"] .pb-feed,
[data-surface="playbook"] .pb-source,
[data-surface="playbook"] .pb-zone,
[data-surface="playbook"] .pb-lead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  color: #50545e;
  font-size: 13px;
  line-height: 1.5;
}

[data-surface="playbook"] .pb-promise .icon,
[data-surface="playbook"] .pb-feed .icon,
[data-surface="playbook"] .pb-source .icon,
[data-surface="playbook"] .pb-zone .icon,
[data-surface="playbook"] .pb-lead .icon {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--deep);
}

[data-surface="playbook"] .pb-feed a,
[data-surface="playbook"] .pb-zone a {
  color: var(--deep);
  font-weight: 650;
}

/* Chips and cites. */
[data-surface="playbook"] .pb-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--pill-bg, var(--dash-neutral-bg));
  color: var(--pill-ink, var(--dash-neutral-ink));
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.45;
  white-space: nowrap;
}

[data-surface="playbook"] .pb-cite {
  font-size: 12.5px;
  color: var(--muted);
}

[data-surface="playbook"] .pb-cite summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: var(--deep);
  font-weight: 650;
  list-style: none;
}

[data-surface="playbook"] .pb-cite summary::-webkit-details-marker {
  display: none;
}

[data-surface="playbook"] .pb-cite summary .icon {
  width: 13px;
  height: 13px;
}

[data-surface="playbook"] .pb-cite ul {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--canvas);
  list-style: none;
}

[data-surface="playbook"] .pb-cite li {
  display: grid;
  gap: 2px;
}

[data-surface="playbook"] .pb-cite a {
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

[data-surface="playbook"] .pb-claim-id {
  margin: 6px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
}

[data-surface="playbook"] .pb-rechecked {
  color: var(--dash-attention-ink);
  font-weight: 700;
}

/* Forms. */
[data-surface="playbook"] .pb-inline-form {
  display: inline-flex;
  margin: 0;
}

[data-surface="playbook"] .pb-window-form,
[data-surface="playbook"] .pb-move-form,
[data-surface="playbook"] .pb-posted-form,
[data-surface="playbook"] .pb-email-form,
[data-surface="playbook"] .pb-add-form,
[data-surface="playbook"] .pb-sources-form,
[data-surface="playbook"] .pb-pitch-form,
[data-surface="playbook"] .pb-application,
.pb-notes-form {
  display: grid;
  gap: 10px;
  margin: 0;
}

[data-surface="playbook"] .pb-window-form,
[data-surface="playbook"] .pb-move-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}

[data-surface="playbook"] .pb-window-form > .dash-button,
[data-surface="playbook"] .pb-move-form > .dash-button {
  grid-column: 1 / -1;
  justify-self: start;
}

[data-surface="playbook"] .pb-move-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

[data-surface="playbook"] label,
.pb-notes-form label {
  display: grid;
  gap: 4px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 650;
}

[data-surface="playbook"] label small,
.pb-notes-form label small {
  color: var(--muted);
  font-weight: 500;
  line-height: 1.45;
}

[data-surface="playbook"] input[type="text"],
[data-surface="playbook"] input[type="url"],
[data-surface="playbook"] input[type="email"],
[data-surface="playbook"] textarea,
.pb-notes-form textarea {
  width: 100%;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid #d6d9df;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

[data-surface="playbook"] textarea,
.pb-notes-form textarea {
  resize: vertical;
}

[data-surface="playbook"] input:focus-visible,
[data-surface="playbook"] textarea:focus-visible,
.pb-notes-form textarea:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

[data-surface="playbook"] .pb-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

[data-surface="playbook"] .pb-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
}

[data-surface="playbook"] .pb-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

[data-surface="playbook"] .pb-slot-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Availability windows. */
[data-surface="playbook"] .pb-windows {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="playbook"] .pb-windows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--canvas);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* Slots. */
[data-surface="playbook"] .pb-slot-list,
[data-surface="playbook"] .pb-contacts,
[data-surface="playbook"] .pb-festivals,
[data-surface="playbook"] .pb-devlogs,
[data-surface="playbook"] .pb-crossposts {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="playbook"] .pb-slot,
[data-surface="playbook"] .pb-crosspost,
[data-surface="playbook"] .pb-devlog {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

[data-surface="playbook"] .pb-slot[data-live] {
  border-color: #b8dccd;
  background: linear-gradient(180deg, #f7f8fa, #fff 40%);
}

[data-surface="playbook"] .pb-slot-list[data-compact] .pb-slot {
  padding: 12px 14px;
}

[data-surface="playbook"] .pb-slot-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
}

[data-surface="playbook"] .pb-slot-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

[data-surface="playbook"] .pb-slot-head h3,
[data-surface="playbook"] .pb-slot-head h4 {
  margin: 2px 0 0;
  font-size: 15.5px;
}

[data-surface="playbook"] .pb-slot-head a {
  color: var(--ink);
  text-decoration: none;
}

[data-surface="playbook"] .pb-slot-head a:hover {
  color: var(--deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

[data-surface="playbook"] .pb-slot-when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  font-size: 14px;
}

[data-surface="playbook"] .pb-slot-when .icon {
  width: 15px;
  height: 15px;
  color: var(--deep);
}

[data-surface="playbook"] .pb-slot-when span {
  color: #50545e;
}

[data-surface="playbook"] .pb-reasons {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="playbook"] .pb-reasons li {
  display: grid;
  gap: 4px;
  padding-left: 14px;
  border-left: 3px solid var(--line);
  color: #42464f;
  font-size: 13.5px;
  line-height: 1.5;
}

[data-surface="playbook"] .pb-reasons li[data-basis="availability"],
[data-surface="playbook"] .pb-reasons li[data-basis="founder"] {
  border-left-color: var(--green);
}

[data-surface="playbook"] .pb-reasons li[data-basis="folklore"] {
  border-left-color: #e0a33a;
}

[data-surface="playbook"] .pb-reasons li[data-basis="platform"] {
  border-left-color: #5a7bd8;
}

[data-surface="playbook"] .pb-reasons li[data-basis="history"] {
  border-left-color: #8a63d2;
}

[data-surface="playbook"] .pb-slot-go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

[data-surface="playbook"] .pb-submit-note {
  flex: 1 1 220px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

[data-surface="playbook"] .pb-copies,
[data-surface="playbook"] .pb-fields {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="playbook"] .pb-fields li {
  display: grid;
  gap: 4px;
}

[data-surface="playbook"] .pb-count {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

[data-surface="playbook"] .pb-move summary {
  cursor: pointer;
  color: var(--deep);
  font-size: 13.5px;
  font-weight: 650;
}

[data-surface="playbook"] .pb-move[open] {
  flex: 1 1 100%;
  display: grid;
  gap: 10px;
}

[data-surface="playbook"] .pb-alternatives {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

[data-surface="playbook"] .pb-posted-form {
  grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
  align-items: end;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

[data-surface="playbook"] .pb-posted-form > .dash-button {
  grid-column: 1 / -1;
  justify-self: start;
}

[data-surface="playbook"] .pb-outcome {
  margin: 0;
  color: var(--dash-positive-ink);
  font-size: 13.5px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

[data-surface="playbook"] .pb-never {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="playbook"] .pb-never li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  color: #42464f;
  font-size: 13px;
  line-height: 1.5;
}

[data-surface="playbook"] .pb-never li .icon {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  color: var(--deep);
}

[data-surface="playbook"] .pb-never li .pb-cite {
  grid-column: 2;
}

[data-surface="playbook"] .pb-waiting {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
}

[data-surface="playbook"] .pb-waiting li {
  display: grid;
  gap: 2px;
}

[data-surface="playbook"] .pb-waiting a {
  color: var(--ink);
  font-weight: 650;
}

[data-surface="playbook"] .pb-waiting span {
  color: var(--muted);
}

/* Festivals. */
[data-surface="playbook"] .pb-statement {
  margin: 0;
  color: #42464f;
  font-size: 14px;
  line-height: 1.55;
}

[data-surface="playbook"] .pb-deadlines {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="playbook"] .pb-deadlines li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--canvas);
}

[data-surface="playbook"] .pb-deadlines li[data-passed] {
  opacity: 0.6;
}

[data-surface="playbook"] .pb-deadlines a {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--ink);
  text-decoration: none;
}

[data-surface="playbook"] .pb-deadlines a span {
  color: #50545e;
  font-variant-numeric: tabular-nums;
}

[data-surface="playbook"] .pb-deadlines small {
  flex: 1 1 100%;
  color: var(--muted);
}

[data-surface="playbook"] .pb-demo,
[data-surface="playbook"] .pb-lines {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: #42464f;
  font-size: 13.5px;
  line-height: 1.5;
}

[data-surface="playbook"] .pb-lines li small {
  margin-left: 6px;
  color: var(--muted);
  font-weight: 600;
}

[data-surface="playbook"] .pb-checklist {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="playbook"] .pb-checklist li {
  display: grid;
  gap: 2px;
}

[data-surface="playbook"] .pb-check-form {
  margin: 0;
}

[data-surface="playbook"] .pb-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s var(--motion-ease-out), border-color 0.2s var(--motion-ease-out);
}

[data-surface="playbook"] .pb-check:hover {
  border-color: var(--line);
  background: var(--canvas);
}

[data-surface="playbook"] .pb-check-box {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 2px solid #b8bcc6;
  border-radius: 6px;
  background: #fff;
  color: #fff;
}

[data-surface="playbook"] .pb-checklist li[data-checked] .pb-check-box {
  border-color: var(--green);
  background: var(--green);
}

[data-surface="playbook"] .pb-checklist li[data-checked] .pb-check > span:last-child {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: #b8bcc6;
}

[data-surface="playbook"] .pb-check-box .icon {
  width: 13px;
  height: 13px;
}

/* Creators. */
[data-surface="playbook"] .pb-score {
  display: grid;
  place-content: center;
  justify-items: center;
  min-width: 46px;
  height: 46px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--mint);
  color: var(--deep);
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

[data-surface="playbook"] .pb-score small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .04em;
}

[data-surface="playbook"] .pb-score:focus-visible {
  outline: 2px solid var(--deep);
  outline-offset: 2px;
}

[data-surface="playbook"] .pb-evidence summary {
  cursor: pointer;
  color: var(--deep);
  font-size: 13px;
  font-weight: 650;
}

[data-surface="playbook"] .pb-evidence ul {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

[data-surface="playbook"] .pb-evidence li {
  display: grid;
  gap: 2px;
  font-size: 13.5px;
}

[data-surface="playbook"] .pb-evidence a {
  color: var(--ink);
  font-weight: 600;
}

[data-surface="playbook"] .pb-evidence small {
  color: var(--muted);
}

[data-surface="playbook"] .pb-email-form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

[data-surface="playbook"] .pb-email-form label {
  grid-column: 1 / -1;
}

[data-surface="playbook"] .pb-pitch {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #d4d7dd;
  border-radius: 14px;
  background: #f8f9fa;
}

[data-surface="playbook"] .pb-pitch-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

[data-surface="playbook"] .pb-pitch-head h4 {
  margin: 0;
  font-size: 14.5px;
}

[data-surface="playbook"] .pb-pitch-head small {
  color: var(--muted);
  font-size: 12px;
}

[data-surface="playbook"] .pb-flagged {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--dash-attention-bg);
  color: var(--dash-attention-ink);
  font-size: 13.5px;
}

[data-surface="playbook"] .pb-flagged ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

[data-surface="playbook"] .pb-signoff {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px dashed #cdd1d9;
  border-radius: 12px;
}

[data-surface="playbook"] .pb-signoff legend {
  padding: 0 6px;
  font-size: 13px;
  font-weight: 700;
}

[data-surface="playbook"] .pb-signoff p {
  grid-column: 1 / -1;
  margin: 0;
  color: #50545e;
  font-size: 13px;
}

/* Store kits and devlogs. */
[data-surface="playbook"] .pb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="playbook"] .pb-tags li {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--canvas);
  font-size: 13px;
  font-weight: 600;
}

[data-surface="playbook"] .pb-week {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

[data-surface="playbook"] .pb-material {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="playbook"] .pb-material li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--canvas);
  font-size: 13.5px;
  line-height: 1.45;
}

[data-surface="playbook"] .pb-material li small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

[data-surface="playbook"] .pb-material li a {
  color: var(--ink);
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  [data-surface="playbook"] .pb-card,
  [data-surface="playbook"] .pb-part {
    padding: 16px;
  }

  [data-surface="playbook"] .pb-window-form,
  [data-surface="playbook"] .pb-move-form,
  [data-surface="playbook"] .pb-posted-form,
  [data-surface="playbook"] .pb-signoff,
  [data-surface="playbook"] .pb-email-form {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Cards inside cards (a devlog's cross-posts) keep their text column wide enough. */
  [data-surface="playbook"] .pb-devlog,
  [data-surface="playbook"] .pb-devlog .pb-crosspost {
    padding: 12px;
  }

  [data-surface="playbook"] .pb-slot-actions .dash-button,
  [data-surface="playbook"] .pb-crosspost .dash-button {
    white-space: normal;
    text-align: center;
  }
}

/* Grid items may shrink below their content's width (long words wrap instead). */
[data-surface="playbook"] .pb-slot > *,
[data-surface="playbook"] .pb-crosspost > *,
[data-surface="playbook"] .pb-devlog > *,
[data-surface="playbook"] .pb-crossposts > *,
[data-surface="playbook"] .pb-devlogs > * {
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  [data-surface="playbook"] .pb-check {
    transition: none;
  }
}

/* The briefing's "What did you work on?" (the Monday briefing page). */
[data-surface="briefing"] .briefing-notes {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 20px 22px;
  border: 1px solid #d4d7dd;
  border-radius: 18px;
  background: linear-gradient(180deg, #f7f8fa, #fff 50%);
}

[data-surface="briefing"] .briefing-notes h2 {
  margin: 0;
  font-size: 17px;
}

[data-surface="briefing"] .briefing-notes-done {
  margin: 0;
  color: var(--dash-positive-ink);
  font-weight: 650;
}

[data-surface="briefing"] .briefing-notes-done a {
  color: var(--success-ink);
}

[data-surface="briefing"] .briefing-notes .pb-slot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

[data-surface="briefing"] .briefing-notes .pb-inline-form {
  display: inline-flex;
  margin: 0;
}

/* Festivals that probably don't fit: set aside, one click away. */
[data-surface="playbook"] .pb-others {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px 0 0;
  border-top: 1px dashed var(--line);
}

[data-surface="playbook"] .pb-others > * {
  min-width: 0;
}

[data-surface="playbook"] .pb-others summary {
  cursor: pointer;
  color: var(--deep);
  font-size: 14px;
  font-weight: 650;
}

[data-surface="playbook"] .pb-others summary:focus-visible {
  outline: 2px solid var(--deep);
  outline-offset: 3px;
}

[data-surface="playbook"] .pb-hint {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

[data-surface="playbook"] .pb-fit-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--mint);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

[data-surface="playbook"] .pb-fit-note .icon {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  color: var(--deep);
}

/* A set-aside event: one line (its name and why), the full kit one click away. */
[data-surface="playbook"] .pb-aside-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="playbook"] .pb-aside-kit {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

[data-surface="playbook"] .pb-aside-kit > summary {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  cursor: pointer;
}

[data-surface="playbook"] .pb-aside-kit > summary strong {
  color: var(--ink);
  font-size: 14px;
}

[data-surface="playbook"] .pb-aside-kit > summary span {
  color: var(--muted);
  font-size: 13px;
}

[data-surface="playbook"] .pb-aside-kit > summary:focus-visible {
  outline: 2px solid var(--deep);
  outline-offset: -2px;
  border-radius: var(--radius);
}

[data-surface="playbook"] .pb-aside-kit[open] > .pb-festivals {
  padding: 0 10px 10px;
}

/* The article editor (crates/web/src/pages/app/content/editor.rs, editor/src). Ghost's
   layout, Medium's typography, Outpost's tokens. The floating toolbar and the phone's
   docked bar are the one deliberately dark surface. Without JavaScript the page is a
   plain, styled form. Classes are prefixed `ed-`. */

:root {
  --ed-slate: #1e2128;
  --ed-slate-2: #2a2e36;
  --ed-on-slate: #f5f6f8;
  --ed-on-slate-soft: #ffffffb8;
  --ed-accent: #8db3f3;
  --ed-accent-ink: var(--green);
  --ed-text: #30343c;
  --ed-heading: #191d26;
  --ed-muted: #7b7f89;
  --ed-faint: #a7aab2;
  --ed-rule: #e8e9ec;
  --ed-select: #dadde2;
  --ed-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Iowan Old Style", Georgia, serif;
  --ed-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ed-mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --ed-measure: 720px;
  --ed-bar-height: 64px;
  --ed-in: 160ms;
  --ed-out: 100ms;
  --ed-ease: cubic-bezier(.16, 1, .3, 1);
}

/* `hidden` always wins over the display a class sets. */
.ed-page [hidden] {
  display: none !important;
}

.ed-page {
  min-height: 100vh;
  min-height: 100dvh;
  background: #fff;
  color: var(--ed-text);
}

/* ---------------------------------------------------------------- Top bar */

.ed-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--ed-bar-height);
  padding: 0 28px;
  background: #fffffff2;
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  font-family: var(--ed-sans);
}

.ed-bar-start,
.ed-bar-end {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.ed-bar-end {
  gap: 10px;
}

.ed-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 10px 0 6px;
  margin-left: -6px;
  border-radius: 8px;
  color: var(--ed-heading);
  font-size: 15px;
  font-weight: 560;
  letter-spacing: -.005em;
  transition: background-color .15s;
}

.ed-back:hover {
  background: var(--mint);
}

.ed-back .icon {
  width: 15px;
  height: 15px;
  transform: rotate(180deg);
}

.ed-status {
  color: var(--ed-muted);
  font-size: 14.5px;
  white-space: nowrap;
}

.ed-save-state {
  color: var(--ed-faint);
  font-size: 13.5px;
  white-space: nowrap;
  transition: color .2s;
}

.ed-save-state[data-state="dirty"] {
  color: var(--ed-muted);
}

.ed-save-state[data-state="saving"]::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--ed-accent-ink);
  vertical-align: 1px;
  animation: ed-pulse 1s ease-in-out infinite;
  content: "";
}

.ed-save-state[data-state="error"] {
  color: #b42318;
}

.ed-words {
  margin-right: 6px;
  color: var(--ed-faint);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ed-bar-button {
  min-height: 34px;
  padding: 0 11px;
  border-radius: 8px;
  background: transparent;
  color: var(--ed-muted);
  font-size: 14px;
  font-weight: 540;
  transition: background-color .15s, color .15s;
}

.ed-bar-button:hover,
.ed-bar-button[aria-pressed="true"] {
  background: var(--mint);
  color: var(--ed-heading);
}

.ed-publish {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.ed-primary,
.ed-primary-more {
  min-height: 36px;
  background: transparent;
  color: var(--ed-accent-ink);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.005em;
  transition: background-color .15s, color .15s;
}

.ed-primary {
  padding: 0 4px 0 10px;
  border-radius: 8px 0 0 8px;
}

.ed-primary:only-child {
  padding-right: 10px;
  border-radius: 8px;
}

.ed-primary-more {
  display: inline-grid;
  place-items: center;
  width: 26px;
  padding: 0 6px 0 0;
  border-radius: 0 8px 8px 0;
}

.ed-primary-more .icon {
  width: 13px;
  height: 13px;
  transform: rotate(90deg);
  transition: transform .2s var(--ed-ease);
}

.ed-primary-more[aria-expanded="true"] .icon {
  transform: rotate(-90deg);
}

.ed-primary:hover,
.ed-primary-more:hover,
.ed-primary-more[aria-expanded="true"] {
  background: #e9eff7;
  color: var(--deep);
}

.ed-primary[aria-busy="true"] {
  opacity: .6;
}

.ed-page.is-dirty .ed-primary::after {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 2px;
  content: "";
}

.ed-gear {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-left: 6px;
  border-radius: 10px;
  background: transparent;
  color: var(--ed-heading);
  transition: background-color .15s, transform .3s var(--ed-ease);
}

.ed-gear .icon {
  width: 20px;
  height: 20px;
}

.ed-gear:hover,
.ed-gear[aria-expanded="true"] {
  background: var(--mint);
}

.ed-gear[aria-expanded="true"] .icon {
  transform: rotate(30deg);
  transition: transform .3s var(--ed-ease);
}

/* Menus (Update ▾) */

.ed-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  width: 300px;
  padding: 6px;
  border: 1px solid var(--ed-rule);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px #101a2914, 0 20px 46px -18px #101a294d;
  transform-origin: top right;
}

.ed-menu-row {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  background: transparent;
  color: var(--ed-heading);
  text-align: left;
}

.ed-menu-row strong {
  font-size: 14.5px;
  font-weight: 620;
}

.ed-menu-row small {
  color: var(--ed-muted);
  font-size: 12.5px;
  line-height: 1.4;
}

.ed-menu-row:hover,
.ed-menu-row:focus-visible {
  outline: none;
  background: var(--mint);
}

.ed-menu-form {
  margin: 0;
}

/* ---------------------------------------------------------------- Notices */

.ed-notices {
  position: sticky;
  top: var(--ed-bar-height);
  z-index: 30;
  display: grid;
  justify-items: center;
  gap: 8px;
  height: 0;
  font-family: var(--ed-sans);
}

.ed-lock,
.ed-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(640px, calc(100vw - 32px));
  margin: 8px 16px 0;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 1px 2px #101a2914, 0 14px 32px -18px #101a2955;
}

.ed-lock {
  border: 1px solid #f3dfbf;
  background: #fff8ec;
  color: #7a4300;
}

.ed-lock .icon {
  flex: none;
  width: 17px;
  height: 17px;
}

.ed-lock-link {
  flex: none;
  color: #7a4300;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.ed-notice {
  background: var(--ed-slate);
  color: var(--ed-on-slate);
}

.ed-notice[data-tone="positive"] {
  background: #0d5b43;
}

.ed-notice[data-tone="attention"],
.ed-notice[data-tone="negative"] {
  background: #fff3e2;
  color: #7a4300;
}

.ed-notice.is-in {
  animation: ed-drop var(--ed-in) var(--ed-ease);
}

.ed-link-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.ed-link-button .icon {
  width: 14px;
  height: 14px;
}

/* ---------------------------------------------------------------- Canvas */

.ed-layout {
  display: block;
}

.ed-form {
  margin: 0;
}

.ed-canvas {
  width: min(var(--ed-measure), calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(48px, 11vh, 132px) 0 40vh;
}

.ed-title {
  display: block;
  width: 100%;
  min-height: 1.2em;
  padding: 0;
  overflow: hidden;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--ed-heading);
  font-family: var(--ed-sans);
  font-size: clamp(34px, 4.4vw, 48px);
  font-weight: 760;
  line-height: 1.14;
  letter-spacing: -.028em;
  overflow-wrap: break-word;
}

.ed-title::placeholder {
  color: #c8cacf;
}

.ed-count {
  display: flex;
  gap: 4px;
  margin: 6px 0 0;
  color: var(--ed-faint);
  font-family: var(--ed-sans);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  transition: color .2s, opacity .2s;
}

.ed-count[data-over="limit"] [data-count] {
  color: #b26a00;
  font-weight: 600;
}

.ed-count[data-over="max"] [data-count] {
  color: #b42318;
  font-weight: 650;
}

.ed-js .ed-title-count {
  opacity: 0;
}

.ed-js .ed-title:focus + .ed-title-count,
.ed-js .ed-title-count[data-over="limit"],
.ed-js .ed-title-count[data-over="max"] {
  opacity: 1;
}

.ed-body {
  position: relative;
  margin-top: 26px;
}

/* No JavaScript: the Markdown textarea is the editor. */
.ed-source-label {
  display: block;
  margin: 28px 0 8px;
  color: var(--ed-muted);
  font-family: var(--ed-sans);
  font-size: 13px;
  font-weight: 600;
}

.ed-source {
  display: block;
  width: 100%;
  min-height: 60vh;
  padding: 18px 20px;
  border: 1px solid var(--ed-rule);
  border-radius: 12px;
  outline: none;
  resize: vertical;
  background: #fbfcfd;
  color: var(--ed-heading);
  font-family: var(--ed-mono);
  font-size: 15px;
  line-height: 1.7;
  tab-size: 4;
}

.ed-source:focus {
  border-color: #bdc0c7;
}

.ed-js .ed-source-label {
  display: none;
}

.ed-js[data-mode="rich"] .ed-source {
  display: none;
}

.ed-js[data-mode="markdown"] .ed-body {
  display: none;
}

.ed-js[data-mode="markdown"] .ed-source {
  margin-top: 26px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  resize: none;
  background: transparent;
  color: #383c47;
  font-size: 15.5px;
  line-height: 1.75;
}

.ed-js .ed-body,
.ed-js .ed-source {
  transition: opacity 140ms ease-out;
}

.ed-js.is-swapping .ed-body,
.ed-js.is-swapping .ed-source {
  opacity: 0;
}

/* ---------------------------------------------------------------- The text */

.ed-prose {
  position: relative;
  min-height: 40vh;
  outline: none;
  color: var(--ed-text);
  font-family: var(--ed-serif);
  font-size: 1.25rem;
  line-height: 1.72;
  letter-spacing: .002em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  white-space: break-spaces;
  /* Soft line breaks read as spaces, as on the blog. */
  white-space-collapse: preserve-spaces;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--ed-accent-ink);
}

.ed-prose ::selection,
.ed-title::selection,
.ed-source::selection {
  background: var(--ed-select);
  color: inherit;
}

.ed-prose > * {
  margin: 0 0 1.25em;
}

.ed-prose > :last-child {
  margin-bottom: 0;
}

.ed-prose p {
  margin: 0 0 1.25em;
}

.ed-prose h1,
.ed-prose h2,
.ed-prose h3,
.ed-prose h4,
.ed-prose h5,
.ed-prose h6 {
  margin: 1.9em 0 .55em;
  color: var(--ed-heading);
  font-family: var(--ed-sans);
  font-weight: 720;
  letter-spacing: -.02em;
  text-wrap: balance;
}

/* The title is the page's h1: a body h1 reads as a section heading, as on the blog. */
.ed-prose h1,
.ed-prose h2 {
  font-size: 1.65em;
  line-height: 1.22;
}

.ed-prose h3 {
  margin-top: 1.6em;
  font-size: 1.3em;
  line-height: 1.3;
}

.ed-prose h4,
.ed-prose h5,
.ed-prose h6 {
  font-size: 1.05em;
  line-height: 1.4;
}

.ed-prose > :is(h1, h2, h3, h4, h5, h6):first-child {
  margin-top: .4em;
}

.ed-prose a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: #30343c80;
  text-underline-offset: .2em;
  cursor: text;
}

.ed-prose strong {
  color: var(--ed-heading);
  font-weight: 700;
}

.ed-prose s {
  text-decoration-thickness: 1.5px;
  text-decoration-color: #30343caa;
}

.ed-prose code {
  padding: .12em .38em;
  border-radius: 5px;
  background: #f1f3f6;
  color: #242831;
  font-family: var(--ed-mono);
  font-size: .82em;
}

.ed-prose blockquote {
  margin: 1.7em 0;
  padding: .05em 0 .05em 1.15em;
  border-left: 3px solid var(--ed-heading);
  color: #40444d;
  font-style: italic;
}

.ed-prose blockquote > :last-child {
  margin-bottom: 0;
}

.ed-prose ul,
.ed-prose ol {
  margin: 0 0 1.3em;
  padding-left: 1.6em;
}

/* The site's base styles reset list markers; the article shows them, as the blog does. */
.ed-prose ul {
  list-style: disc;
}

.ed-prose ul ul {
  list-style: circle;
}

.ed-prose ol {
  list-style: decimal;
}

.ed-prose li {
  position: relative;
  margin: .35em 0;
  padding-left: .25em;
}

.ed-prose li > p {
  margin: 0;
}

.ed-prose ul:not([data-tight]) > li > p,
.ed-prose ol:not([data-tight]) > li > p {
  margin-bottom: .7em;
}

.ed-prose li > :is(ul, ol) {
  margin: .3em 0 0;
}

.ed-prose ul > li::marker {
  color: var(--ed-heading);
}

.ed-prose ol > li::marker {
  color: var(--ed-heading);
  font-family: var(--ed-sans);
  font-size: .9em;
  font-weight: 600;
}

/* Checklists */

.ed-prose ul.ed-checklist,
.ed-prose li.ed-check-item {
  list-style: none;
}

.ed-prose ul.ed-checklist {
  padding-left: .2em;
}

.ed-prose li.ed-check-item {
  display: flex;
  align-items: flex-start;
  gap: .6em;
  padding-left: 0;
}

.ed-prose li.ed-check-item::marker {
  content: none;
}

.ed-check-body {
  flex: 1;
  min-width: 0;
}

.ed-check {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.05em;
  height: 1.05em;
  margin-top: .34em;
  padding: 0;
  border: 1.5px solid #9ea2ac;
  border-radius: 5px;
  background: #fff;
  color: #fff;
  transition: background-color .15s, border-color .15s, transform .15s var(--ed-ease);
}

.ed-check .ed-icon {
  width: .72em;
  height: .72em;
  opacity: 0;
  stroke-width: 2.6;
  transform: scale(.6);
  transition: opacity .15s, transform .2s var(--ed-ease);
}

.ed-check[aria-checked="true"] {
  border-color: var(--ed-accent-ink);
  background: var(--ed-accent-ink);
}

.ed-check[aria-checked="true"] .ed-icon {
  opacity: 1;
  transform: none;
}

.ed-check:active {
  transform: scale(.9);
}

.ed-check-item[data-checked="true"] > .ed-check-body {
  color: var(--ed-muted);
}

/* Code */

.ed-code {
  position: relative;
  margin: 1.6em 0;
}

.ed-code pre,
.ed-prose pre {
  margin: 0;
  padding: 20px 22px;
  overflow-x: auto;
  border-radius: 12px;
  background: #11161f;
  color: #e7ebf0;
  font-family: var(--ed-mono);
  font-size: .76em;
  line-height: 1.62;
  white-space: pre-wrap;
  tab-size: 4;
}

.ed-code pre code {
  padding: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}

.ed-code-bar {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 1;
}

.ed-code-language {
  width: 9em;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  outline: none;
  background: transparent;
  color: #a6acb9;
  font-family: var(--ed-sans);
  font-size: 12px;
  text-align: right;
  transition: background-color .15s, border-color .15s;
}

.ed-code-language::placeholder {
  color: #666c7a;
}

.ed-code-language:hover,
.ed-code-language:focus {
  border-color: #ffffff26;
  background: #ffffff0f;
  color: #e7ebf0;
}

/* Raw Markdown, kept as written */

.ed-raw {
  margin: 1.6em 0;
  padding: 12px 16px 14px;
  border: 1px dashed #cccfd5;
  border-radius: 12px;
  background: #fafbfc;
}

.ed-raw-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--ed-muted);
  font-family: var(--ed-sans);
  font-size: 12px;
  font-weight: 600;
  user-select: none;
}

.ed-raw pre {
  margin: 0;
  color: #414650;
  font-family: var(--ed-mono);
  font-size: .74em;
  line-height: 1.6;
  white-space: pre-wrap;
}

.ed-raw-html {
  font-family: var(--ed-mono);
  font-size: .82em;
}

/* Divider */

.ed-hr {
  margin: 2.4em 0;
  padding: .6em 0;
  cursor: pointer;
}

.ed-hr hr {
  margin: 0;
  border: 0;
  border-top: 1px solid #d8dbe0;
}

/* Figures */

.ed-figure {
  margin: 2em 0;
}

.ed-figure-frame {
  overflow: hidden;
  border-radius: 10px;
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: outline-color .15s;
}

.ed-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  background: var(--canvas);
}

.ed-external {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 34px 24px;
  border: 1px dashed #cccfd5;
  border-radius: 10px;
  background: var(--canvas);
  color: var(--ed-muted);
  font-family: var(--ed-sans);
  font-size: 13.5px;
  line-height: 1.45;
  text-align: center;
}

.ed-external strong {
  color: var(--ed-heading);
  font-size: 14.5px;
  font-weight: 620;
}

.ed-external-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  border: 1px dashed #cccfd5;
  border-radius: 5px;
  color: var(--ed-muted);
  font-family: var(--ed-sans);
  font-size: .72em;
  vertical-align: .1em;
}

.ed-figure.is-selected .ed-figure-frame,
.ProseMirror-selectednode > .ed-figure-frame {
  outline-color: var(--ed-accent-ink);
}

.ed-figcaption {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.ed-caption {
  width: 100%;
  padding: 4px 48px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ed-muted);
  font-family: var(--ed-sans);
  font-size: 14.5px;
  line-height: 1.5;
  text-align: center;
}

.ed-caption::placeholder {
  color: #bdc0c8;
}

.ed-alt-toggle {
  position: absolute;
  right: 0;
  padding: 2px 8px;
  border: 1px solid var(--ed-rule);
  border-radius: 6px;
  background: #fff;
  color: var(--ed-muted);
  font-family: var(--ed-sans);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .02em;
  opacity: 0;
  transition: opacity .15s, background-color .15s;
}

.ed-figure:hover .ed-alt-toggle,
.ed-figure.is-selected .ed-alt-toggle,
.ed-figure:focus-within .ed-alt-toggle {
  opacity: 1;
}

.ed-alt-toggle[aria-pressed="true"] {
  border-color: var(--ed-heading);
  background: var(--ed-heading);
  color: #fff;
}

.ed-figure.is-alt .ed-caption {
  color: var(--ed-heading);
  font-style: italic;
}

.ed-prose img {
  max-width: 100%;
  vertical-align: middle;
}

/* Tables */

.ed-table {
  margin: 1.6em 0;
  overflow-x: auto;
}

.ed-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ed-sans);
  font-size: .8em;
  line-height: 1.5;
}

.ed-table th,
.ed-table td {
  min-width: 4em;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ed-rule);
  text-align: left;
  vertical-align: top;
}

.ed-table th {
  color: var(--ed-heading);
  font-weight: 680;
}

.ed-table [data-align="center"] {
  text-align: center;
}

.ed-table [data-align="right"] {
  text-align: right;
}

/* Placeholder, gap cursor, drop cursor, selected nodes */

.ed-empty::before {
  position: absolute;
  color: #b9bcc4;
  font-style: normal;
  pointer-events: none;
  content: attr(data-placeholder);
}

.ed-empty.ed-hint::before {
  color: #cbcdd2;
  font-family: var(--ed-sans);
  font-size: .78em;
  line-height: 2.2;
}

.ProseMirror-hideselection *::selection {
  background: transparent;
}

.ProseMirror-hideselection {
  caret-color: transparent;
}

.ProseMirror [draggable][contenteditable="false"] {
  user-select: text;
}

.ProseMirror-selectednode {
  outline: none;
}

.ed-hr.ProseMirror-selectednode hr {
  border-top-color: var(--ed-accent-ink);
  box-shadow: 0 0 0 1px var(--ed-accent-ink);
}

.ProseMirror-gapcursor {
  position: absolute;
  display: none;
  pointer-events: none;
}

.ProseMirror-gapcursor::after {
  position: absolute;
  top: -2px;
  display: block;
  width: 20px;
  border-top: 2px solid var(--ed-heading);
  animation: ed-blink 1.1s steps(2, start) infinite;
  content: "";
}

.ProseMirror-focused .ProseMirror-gapcursor {
  display: block;
}

.ed-dropcursor {
  border-radius: 2px;
  background: var(--ed-accent-ink);
}

/* Fact-check: flagged sentences */

.ed-claim {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-thickness: 1.5px;
  text-decoration-color: #e9a23b;
  text-underline-offset: .28em;
  cursor: pointer;
}

.ed-claim[data-tone="negative"] {
  text-decoration-color: #d8584b;
}

/* The claim "Edit the sentence" opened the editor at (public/editor-focus.js). */
.ed-claim-focus {
  border-radius: 3px;
  background: var(--attention-tint);
  box-shadow: 0 0 0 3px var(--attention-tint);
  transition: background var(--motion-duration) var(--motion-ease-out),
    box-shadow var(--motion-duration) var(--motion-ease-out);
}

/* A claim the profile now backs: its underline fades before it goes. */
.ed-claim.is-clearing {
  animation: ed-claim-clear 320ms ease-out forwards;
}

/* A block that just changed type settles into place. */
.ed-morph {
  animation: ed-morph 260ms var(--ed-ease);
}

/* ---------------------------------------------------------------- Floating toolbar */

.ed-toolbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 70;
  display: block;
  border-radius: 9px;
  background: var(--ed-slate);
  color: var(--ed-on-slate);
  box-shadow: 0 1px 1px #0e101614, 0 4px 10px -2px #0e101633, 0 18px 36px -14px #0e101666;
  font-family: var(--ed-sans);
  opacity: 0;
  transform-origin: var(--caret-x, 50%) calc(100% + 8px);
  user-select: none;
  -webkit-user-select: none;
}

.ed-toolbar[hidden],
.ed-dock[hidden],
.ed-insert-menu[hidden],
.ed-picker[hidden],
.ed-pop[hidden] {
  display: none;
}

.ed-toolbar[data-place="below"] {
  transform-origin: var(--caret-x, 50%) -8px;
}

.ed-toolbar.is-in {
  animation: ed-rise var(--ed-in) var(--ed-ease) forwards;
}

.ed-toolbar[data-place="below"].is-in {
  animation-name: ed-sink;
}

.ed-toolbar.is-out {
  animation: ed-leave var(--ed-out) ease-in forwards;
}

.ed-toolbar.is-gliding {
  transition: translate 180ms var(--ed-ease);
}

.ed-tb-track {
  display: flex;
  width: max-content;
}

.ed-tb-track.is-resizing {
  overflow: hidden;
  transition: width 200ms var(--ed-ease);
}

.ed-tb-row {
  display: flex;
  flex: none;
  align-items: center;
  height: 40px;
  padding: 0 4px;
}

.ed-tb-row[hidden],
.ed-tb-group[hidden],
.ed-tb-divider[hidden] {
  display: none;
}

.ed-tb-group {
  display: flex;
  align-items: center;
}

.ed-tb-divider {
  flex: none;
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: #ffffff2e;
}

.ed-tb-button {
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ed-on-slate);
  transition: color .12s, background-color .12s;
}

.ed-icon {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ed-tb-button:hover {
  background: #ffffff14;
}

.ed-tb-button:focus-visible {
  outline: 2px solid var(--ed-accent);
  outline-offset: -2px;
}

.ed-tb-button[aria-pressed="true"] {
  color: var(--ed-accent);
}

.ed-tb-button:disabled {
  color: #ffffff47;
  cursor: default;
}

.ed-tb-button:disabled:hover {
  background: transparent;
}

.ed-tb-more:not([hidden]) > .ed-tb-button {
  animation: ed-fade 200ms var(--ed-ease) both;
}

.ed-tb-more > .ed-tb-button:nth-child(2) {
  animation-delay: 20ms;
}

.ed-tb-more > .ed-tb-button:nth-child(3) {
  animation-delay: 40ms;
}

.ed-tb-more > .ed-tb-button:nth-child(4) {
  animation-delay: 60ms;
}

.ed-toolbar.is-more [data-item="more"] {
  color: var(--ed-accent);
}

/* Tooltips with the shortcut, after a short hover. */
.ed-tb-button[data-tip]::after {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  z-index: 2;
  padding: 5px 9px;
  border-radius: 6px;
  background: #0f1116;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 3px);
  transition: opacity .12s, transform .12s;
  content: attr(data-tip);
}

.ed-toolbar[data-place="below"] .ed-tb-button[data-tip]::after {
  top: calc(100% + 10px);
  bottom: auto;
  transform: translate(-50%, -3px);
}

.ed-tb-button[data-tip]:hover::after,
.ed-tb-button[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: .45s;
}

.ed-tb-track.is-resizing .ed-tb-button::after {
  display: none;
}

.ed-tb-caret {
  position: absolute;
  top: 100%;
  left: var(--caret-x, 50%);
  width: 0;
  height: 0;
  border-top: 7px solid var(--ed-slate);
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  transform: translateX(-50%);
  transition: left 180ms var(--ed-ease);
}

.ed-toolbar[data-place="below"] .ed-tb-caret {
  top: auto;
  bottom: 100%;
  border-top: 0;
  border-bottom: 7px solid var(--ed-slate);
}

/* The link field: the same bar */

.ed-tb-link {
  gap: 2px;
  padding-left: 12px;
}

.ed-tb-link > .ed-icon {
  flex: none;
  color: var(--ed-on-slate-soft);
}

.ed-tb-input {
  width: 270px;
  height: 36px;
  padding: 0 8px;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 14px;
  caret-color: var(--ed-accent);
}

.ed-tb-input::placeholder {
  color: #ffffff73;
}

.ed-tb-linkview {
  gap: 2px;
  padding-left: 12px;
}

.ed-tb-href {
  max-width: 280px;
  overflow: hidden;
  color: var(--ed-on-slate);
  font-size: 13.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ed-tb-href:hover {
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* ---------------------------------------------------------------- Block inserter */

.ed-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

.ed-plus {
  position: absolute;
  top: 0;
  left: -56px;
  z-index: 5;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #d2d4d9;
  border-radius: 50%;
  background: #fff;
  color: var(--ed-muted);
  animation: ed-fade 160ms var(--ed-ease);
  transition: border-color .15s, color .15s, transform .2s var(--ed-ease), translate 120ms var(--ed-ease);
}

.ed-plus[hidden] {
  display: none;
}

.ed-plus:hover,
.ed-plus[aria-expanded="true"] {
  border-color: var(--ed-heading);
  color: var(--ed-heading);
}

.ed-plus[aria-expanded="true"] {
  transform: rotate(45deg);
}

.ed-insert-menu,
.ed-picker {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 75;
  border: 1px solid var(--ed-rule);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px #101a2914, 0 22px 50px -20px #101a2959;
  font-family: var(--ed-sans);
  transform-origin: top left;
}

.ed-insert-menu {
  width: 284px;
  max-height: min(400px, 60vh);
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ed-insert-menu[data-origin="bottom"] {
  transform-origin: bottom left;
}

.ed-insert-menu.is-in,
.ed-picker.is-in,
.ed-menu.is-in {
  animation: ed-pop var(--ed-in) var(--ed-ease);
}

.ed-insert-menu.is-out {
  animation: ed-leave var(--ed-out) ease-in forwards;
}

.ed-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 42px;
  padding: 5px 10px 5px 6px;
  border-radius: 8px;
  background: transparent;
  color: var(--ed-heading);
  font-size: 14.5px;
  font-weight: 520;
  text-align: left;
}

.ed-menu-item[hidden] {
  display: none;
}

.ed-menu-item.is-active,
.ed-menu-item:focus-visible {
  outline: none;
  background: var(--mint);
}

.ed-menu-icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--ed-rule);
  border-radius: 8px;
  background: #fff;
  color: var(--ed-heading);
}

.ed-menu-label {
  flex: 1;
}

.ed-menu-hint {
  color: var(--ed-faint);
  font-family: var(--ed-mono);
  font-size: 12px;
}

.ed-menu-empty {
  padding: 10px;
  color: var(--ed-muted);
  font-size: 14px;
}

/* Image picker */

.ed-picker {
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ed-picker-head-end {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* "Upload": the shared uploader (uploader.css), compact, inside the picker. */
.ed-picker-upload-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 11px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bg);
  font-size: 12.5px;
  font-weight: 650;
}

.ed-picker-upload-toggle:hover {
  background: var(--button-hover);
}

.ed-picker-upload-toggle[aria-expanded="true"] {
  background: var(--tint-blue);
  color: var(--brand);
}

.ed-picker-upload-toggle:focus-visible,
.ed-picker-close:focus-visible,
.ed-picker-item:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.ed-picker-upload-panel {
  margin-bottom: 12px;
}

.ed-picker-upload-panel[hidden] {
  display: none;
}

.ed-picker-upload-panel .up-drop {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 12px;
  min-height: 0;
  padding: 12px 14px;
}

.ed-picker-upload-panel .up-choose {
  grid-column: 1 / -1;
  justify-content: center;
  min-height: 34px;
}

.ed-picker-upload-panel .up-drop-icon {
  width: 36px;
  height: 36px;
}

.ed-picker-upload-panel .up-row {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  padding: 8px 10px;
}

.ed-picker-upload-panel .up-dismiss {
  grid-column: 3;
}

.ed-picker-upload-panel .up-retry {
  grid-column: 2 / -1;
  justify-self: start;
}

.ed-picker-item.is-new img {
  box-shadow: 0 0 0 2px var(--brand);
}

.ed-picker-item.is-unusable {
  cursor: not-allowed;
}

.ed-picker-item.is-unusable img {
  opacity: .45;
  filter: grayscale(1);
}

.ed-picker-why {
  color: var(--attention-ink);
  font-size: 11px;
  line-height: 1.3;
}

.ed-picker-grid[hidden],
.ed-picker-empty[hidden] {
  display: none;
}

/* An image on its way into the text: its ring where it will go. */
.ed-upload {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  margin: 1.4em 0;
  padding: 16px 18px;
  border: 1.5px dashed color-mix(in srgb, var(--brand) 22%, var(--line));
  border-radius: 14px;
  background: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--tint-blue) 45%, var(--bg)));
  font-family: var(--ed-sans);
  user-select: none;
}

.ed-upload[data-state="failed"] {
  border-color: var(--negative-line);
  border-style: solid;
  background: color-mix(in srgb, var(--negative-tint) 40%, var(--bg));
}

.ed-upload-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ed-upload-name {
  overflow: hidden;
  color: var(--ed-heading);
  font-size: 14px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ed-upload-note {
  color: var(--ed-muted);
  font-size: 12.5px;
}

.ed-upload[data-state="failed"] .ed-upload-note {
  color: var(--negative-ink);
}

@media (prefers-reduced-motion: no-preference) {
  .ed-upload {
    animation: ed-pop var(--ed-in) var(--ed-ease);
  }
}

/* An image without alt text: its toggle stays visible and asks for it. */
.ed-figure.is-missing-alt .ed-alt-toggle {
  opacity: 1;
  border-color: var(--attention-line);
  background: var(--attention-tint);
  color: var(--attention-ink);
}

/* An inline or linked image: its Alt control right after it, the field in place. */
.ed-inline-image-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
}

.ed-inline-alt {
  padding: 1px 6px;
  border: 1px solid var(--ed-rule);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ed-muted);
  font-family: var(--ed-sans);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.5;
  opacity: 0;
  transition: opacity .15s;
}

.ed-inline-image-wrap:hover .ed-inline-alt,
.ed-inline-image-wrap:focus-within .ed-inline-alt,
.ed-inline-image-wrap.is-missing-alt .ed-inline-alt {
  opacity: 1;
}

.ed-inline-image-wrap.is-missing-alt .ed-inline-alt {
  border-color: var(--attention-line);
  background: var(--attention-tint);
  color: var(--attention-ink);
}

.ed-inline-alt:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  opacity: 1;
}

.ed-inline-alt[hidden],
.ed-inline-alt-field[hidden] {
  display: none;
}

.ed-inline-alt-field {
  width: 16em;
  max-width: 60vw;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--brand);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ed-sans);
  font-size: 13px;
  outline: none;
}

.ed-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: var(--ed-heading);
  font-size: 14.5px;
}

.ed-picker-close {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: transparent;
  color: var(--ed-muted);
}

.ed-picker-close:hover {
  background: var(--mint);
}

.ed-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: 250px;
  overflow-y: auto;
}

.ed-picker-item {
  display: grid;
  gap: 4px;
  padding: 4px;
  border-radius: 9px;
  background: transparent;
  color: var(--ed-muted);
  font-size: 11.5px;
  text-align: left;
}

.ed-picker-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  background: var(--canvas);
  object-fit: cover;
}

.ed-picker-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ed-picker-item:hover,
.ed-picker-item:focus-visible {
  outline: none;
  background: var(--mint);
}

.ed-picker-empty {
  color: var(--ed-muted);
  font-size: 14px;
}

.ed-picker-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.ed-picker-url {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--ed-rule);
  border-radius: 8px;
  outline: none;
  font-size: 13.5px;
}

.ed-picker-url:focus {
  border-color: #bdc0c7;
}

.ed-picker-upload {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  color: var(--ed-accent-ink);
  font-size: 13.5px;
  font-weight: 620;
}

.ed-picker-note {
  margin-top: 8px;
  color: #9a5200;
  font-size: 12.5px;
}

.ed-picker-note:empty {
  display: none;
}

/* ---------------------------------------------------------------- Fact-check card */

/* The selection toolbar's surface: slate, white line icons, the caret at the claim. */
.ed-claim-pop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 75;
  width: min(384px, calc(100vw - 24px));
  border-radius: 9px;
  background: var(--ed-slate);
  color: var(--ed-on-slate);
  box-shadow: 0 1px 1px #0e101614, 0 4px 10px -2px #0e101633, 0 18px 36px -14px #0e101666;
  font-family: var(--ed-sans);
  opacity: 0;
  transform-origin: var(--caret-x, 50%) -8px;
}

.ed-claim-pop[data-place="above"] {
  transform-origin: var(--caret-x, 50%) calc(100% + 8px);
}

.ed-claim-pop.is-in {
  animation: ed-sink var(--ed-in) var(--ed-ease) forwards;
}

.ed-claim-pop[data-place="above"].is-in {
  animation-name: ed-rise;
}

.ed-claim-pop.is-out {
  animation: ed-leave var(--ed-out) ease-in forwards;
}

.ed-claim-pop.is-gliding {
  transition: translate 180ms var(--ed-ease);
}

.ed-cc-body {
  overflow: hidden;
  border-radius: inherit;
}

.ed-cc-body.is-resizing {
  transition: height 220ms var(--ed-ease);
}

.ed-cc-pane {
  display: grid;
  gap: 6px;
  padding: 12px 12px 8px;
  animation: ed-fade-in 180ms var(--ed-ease) both;
}

.ed-cc-caret {
  position: absolute;
  bottom: 100%;
  left: var(--caret-x, 50%);
  width: 0;
  height: 0;
  border-right: 7px solid transparent;
  border-bottom: 7px solid var(--ed-slate);
  border-left: 7px solid transparent;
  transform: translateX(-50%);
  transition: left 180ms var(--ed-ease);
}

.ed-claim-pop[data-place="above"] .ed-cc-caret {
  top: 100%;
  bottom: auto;
  border-top: 7px solid var(--ed-slate);
  border-bottom: 0;
}

.ed-cc-verdict,
.ed-cc-done,
.ed-cc-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 620;
  line-height: 1.35;
}

.ed-cc-verdict .ed-icon {
  flex: none;
  color: #f2b64c;
}

.ed-cc-verdict[data-tone="negative"] .ed-icon {
  color: #ff8a7a;
}

.ed-cc-done .ed-icon {
  flex: none;
  color: var(--ed-accent);
}

.ed-cc-done {
  padding: 2px 0 4px;
}

/* Where an added fact now lives (Settings › Your product). */
.ed-cc-where {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 2px 24px;
  color: #fff;
  font-size: 13px;
  font-weight: 620;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, .45);
}

.ed-cc-where:hover,
.ed-cc-where:focus-visible {
  text-decoration-color: currentColor;
}

.ed-cc-where .ed-icon {
  color: var(--ed-on-slate-soft);
}

.ed-cc-source,
.ed-cc-note {
  margin: 0;
  padding-left: 24px;
  color: var(--ed-on-slate-soft);
  font-size: 13px;
  line-height: 1.45;
}

.ed-cc-note {
  color: var(--ed-on-slate);
}

.ed-cc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: 4px -6px 0;
  padding-top: 6px;
  border-top: 1px solid #ffffff1a;
}

.ed-cc-actions.is-end {
  justify-content: flex-end;
  gap: 6px;
  margin: 6px 0 0;
  padding-top: 0;
  border-top: 0;
}

.ed-cc-divider {
  flex: none;
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: #ffffff2e;
}

.ed-cc-button {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 10px 0 8px;
  border-radius: 6px;
  background: transparent;
  color: var(--ed-on-slate);
  font-size: 13.5px;
  font-weight: 560;
  line-height: 1;
  white-space: nowrap;
  transition: color .12s, background-color .12s, opacity .12s;
}

.ed-cc-button:not(:has(.ed-icon)) {
  padding: 0 12px;
}

.ed-cc-button:focus-visible,
.ed-cc-kind:focus-visible {
  outline: 2px solid var(--ed-accent);
  outline-offset: -2px;
}

.ed-cc-button.is-primary {
  color: var(--ed-accent);
}

.ed-cc-button.is-filled {
  padding-right: 14px;
  background: var(--ed-accent);
  color: var(--ed-slate);
  font-weight: 650;
}

.ed-cc-button.is-filled:focus-visible {
  outline-color: #fff;
}

.ed-cc-button:disabled {
  opacity: .6;
  cursor: progress;
}

/* The add-fact form: the same dark surface, grown in place. */
.ed-cc-form {
  gap: 8px;
}

.ed-cc-title {
  color: var(--ed-on-slate-soft);
  font-size: 13px;
  font-weight: 560;
}

.ed-cc-title .ed-icon {
  flex: none;
  color: var(--ed-accent);
}

/* A hand-built segmented choice: one track, the chosen segment lifted. */
.ed-cc-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
  background: #0000003d;
  box-shadow: inset 0 0 0 1px #ffffff12;
}

.ed-cc-kind {
  flex: 1 1 auto;
  min-height: 32px;
  padding: 0 7px;
  border-radius: 6px;
  background: transparent;
  color: var(--ed-on-slate-soft);
  font-size: 12.5px;
  font-weight: 560;
  white-space: nowrap;
  transition: color .12s, background-color .15s, box-shadow .15s;
}

.ed-cc-kind[aria-checked="true"] {
  background: var(--ed-slate-2);
  color: #fff;
  box-shadow: 0 1px 2px #0000004d, inset 0 0 0 1px #ffffff1f, inset 0 -2px 0 var(--ed-accent);
}

/* Hover tints only where there is a hover (a tap leaves none behind on a phone). */
@media (hover: hover) {
  .ed-cc-button:hover {
    background: #ffffff14;
  }

  .ed-cc-button.is-primary:hover {
    background: #2f72d61f;
  }

  .ed-cc-button.is-filled:hover {
    background: #4f8ae2;
  }

  .ed-cc-kind:not([aria-checked="true"]):hover {
    color: var(--ed-on-slate);
    background: #ffffff0d;
  }
}

.ed-cc-label {
  margin-top: 2px;
  color: var(--ed-on-slate-soft);
  font-size: 12.5px;
  font-weight: 560;
}

.ed-cc-input {
  width: 100%;
  min-height: 76px;
  padding: 8px 10px;
  border: 1px solid #ffffff24;
  border-radius: 8px;
  outline: none;
  background: #ffffff0d;
  color: #fff;
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  resize: none;
  caret-color: var(--ed-accent);
  transition: border-color .12s, box-shadow .12s;
}

.ed-cc-input:focus {
  border-color: var(--ed-accent);
  box-shadow: 0 0 0 3px #2f72d633;
}

.ed-cc-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: -2px 0 0;
  color: var(--ed-on-slate-soft);
  font-size: 12px;
  line-height: 1.35;
}

.ed-cc-hint {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ed-cc-count {
  flex: none;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.ed-cc-count[data-over="true"] {
  color: #ff8a7a;
}

.ed-cc-error {
  margin: 0;
  padding: 7px 10px;
  border-radius: 7px;
  background: #ff8a7a1f;
  color: #ffc2b8;
  font-size: 13px;
  line-height: 1.4;
}

.ed-cc-error[hidden] {
  display: none;
}

/* ---------------------------------------------------------------- Side panel */

.ed-panel {
  width: min(var(--ed-measure), calc(100% - 48px));
  margin: 0 auto 80px;
  padding: 28px 0 0;
  border-top: 1px solid var(--ed-rule);
  font-family: var(--ed-sans);
}

.has-panel .ed-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  width: min(400px, 100vw);
  margin: 0;
  padding: calc(var(--ed-bar-height) + 8px) 28px 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 0;
  border-left: 1px solid var(--ed-rule);
  background: #fff;
  box-shadow: -24px 0 60px -40px #101a2966;
  transform: translateX(104%);
  visibility: hidden;
  transition: transform 240ms var(--ed-ease), visibility 0s linear 240ms;
}

.has-panel .ed-panel[data-open="true"] {
  transform: none;
  visibility: visible;
  transition: transform 260ms var(--ed-ease), visibility 0s;
}

.ed-panel:focus {
  outline: none;
}

.ed-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.ed-panel-head h2 {
  color: var(--ed-heading);
  font-size: 18px;
  font-weight: 720;
  letter-spacing: -.015em;
}

.ed-panel-close {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: transparent;
  color: var(--ed-muted);
}

.ed-panel-close .icon {
  width: 18px;
  height: 18px;
}

.ed-panel-close:hover {
  background: var(--mint);
  color: var(--ed-heading);
}

.ed-field {
  display: grid;
  gap: 6px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ed-rule);
}

.ed-field:first-of-type {
  padding-top: 0;
}

.ed-field:last-child {
  border-bottom: 0;
}

.ed-field label,
.ed-label,
.ed-field h3 {
  color: var(--ed-heading);
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: 0;
}

.ed-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ed-rule);
  border-radius: 10px;
  outline: none;
  resize: vertical;
  color: var(--ed-heading);
  font: 14.5px/1.5 var(--ed-sans);
  transition: border-color .15s, box-shadow .15s;
}

.ed-field textarea:focus {
  border-color: #9fb6d9;
  box-shadow: 0 0 0 3px #124ea922;
}

.ed-hint {
  color: var(--ed-muted);
  font-size: 13px;
  line-height: 1.45;
}

.ed-address {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  color: var(--ed-heading);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.ed-address:hover span {
  text-decoration: underline;
  text-underline-offset: .2em;
}

.ed-address .icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--ed-muted);
}

.ed-fact-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--ed-text);
  font-size: 13.5px;
  line-height: 1.45;
}

.ed-claims {
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.ed-claims li {
  padding: 10px 12px;
  border-left: 3px solid #e9a23b;
  border-radius: 0 8px 8px 0;
  background: #fffaf1;
  font-size: 13.5px;
  line-height: 1.45;
}

.ed-claims li[data-in-text="false"] {
  border-left-color: var(--ed-rule);
  background: var(--canvas);
  opacity: .75;
}

.ed-claims small {
  display: block;
  margin-top: 3px;
  color: #9a5200;
}

.ed-revision-count {
  color: var(--ed-faint);
  font-weight: 600;
}

.ed-revisions {
  display: grid;
  gap: 2px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.ed-revision {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--ed-rule);
  font-size: 13.5px;
}

.ed-revision:last-child {
  border-bottom: 0;
}

.ed-revision.is-new {
  animation: ed-drop var(--ed-in) var(--ed-ease);
}

.ed-revision-number {
  grid-row: span 3;
  color: var(--ed-faint);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.ed-revision-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ed-revision-text strong {
  overflow: hidden;
  color: var(--ed-heading);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ed-revision-text span {
  color: var(--ed-muted);
  font-size: 12.5px;
}

.ed-revision-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.ed-revision-badge {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--dash-progress-bg);
  color: var(--dash-progress-ink);
  font-size: 11.5px;
  font-weight: 650;
}

.ed-restore {
  margin: 6px 0 0;
  color: var(--ed-accent-ink);
  font-size: 13px;
}

/* ---------------------------------------------------------------- Phones */

.ed-dock {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 72;
  display: flex;
  align-items: center;
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom)) 6px;
  background: var(--ed-slate);
  color: var(--ed-on-slate);
  box-shadow: 0 -10px 30px -16px #0e101680;
  font-family: var(--ed-sans);
  animation: ed-dock-in 200ms var(--ed-ease);
}

.ed-dock.has-keyboard {
  padding-bottom: 4px;
}

.ed-dock-scroll {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.ed-dock-scroll::-webkit-scrollbar {
  display: none;
}

.ed-dock .ed-tb-group {
  scroll-snap-align: start;
}

.ed-dock .ed-tb-button {
  width: 44px;
  height: 44px;
  border-radius: 8px;
}

.ed-dock .ed-tb-button[data-tip]::after {
  display: none;
}

.ed-dock-done {
  flex: none;
  min-width: 44px;
  height: 44px;
  margin-left: 4px;
  padding: 0 12px;
  border-left: 1px solid #ffffff24;
  border-radius: 0;
  background: transparent;
  color: var(--ed-accent);
  font-size: 15px;
  font-weight: 650;
}

html.ed-docked .ed-canvas {
  padding-bottom: calc(40vh + 64px);
}

/* Phones and touch screens: 44 px targets in the fact-check card. */
@media (pointer: coarse), (max-width: 760px) {
  .ed-cc-button,
  .ed-cc-kind {
    min-height: 44px;
  }
}

/* A phone-width card: the five kinds as two even rows (three, then two). */
@media (max-width: 760px) {
  .ed-cc-kinds {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .ed-cc-kind {
    grid-column: span 2;
  }

  .ed-cc-kind:nth-child(n + 4) {
    grid-column: span 3;
  }
}

@media (pointer: coarse) {
  .ed-tb-button {
    width: 44px;
    height: 44px;
  }

  .ed-tb-row {
    height: 48px;
  }

  .ed-tb-button[data-tip]::after {
    display: none;
  }

  .ed-menu-item {
    min-height: 48px;
  }

  .ed-plus {
    width: 44px;
    height: 44px;
  }

  .ed-check {
    width: 1.25em;
    height: 1.25em;
    margin-top: .24em;
  }
}

@media (max-width: 1000px) {
  .ed-plus {
    left: -46px;
  }
}

@media (max-width: 860px) {
  .ed-words {
    display: none;
  }
}

@media (max-width: 760px) {
  .ed-page {
    --ed-bar-height: 56px;
  }

  .ed-bar {
    gap: 8px;
    padding: 0 10px 0 14px;
  }

  .ed-bar-start {
    gap: 10px;
  }

  .ed-bar-end {
    gap: 2px;
  }

  .ed-save-state {
    display: none;
  }

  .ed-bar-button {
    padding: 0 8px;
  }

  .ed-primary,
  .ed-gear,
  .ed-bar-button,
  .ed-primary-more,
  .ed-back {
    min-height: 44px;
  }

  .ed-gear {
    width: 44px;
    height: 44px;
    margin-left: 0;
  }

  .ed-canvas {
    width: calc(100% - 40px);
    padding-top: 28px;
  }

  .ed-title {
    font-size: 31px;
    line-height: 1.16;
  }

  .ed-prose {
    font-size: 1.1875rem;
    line-height: 1.68;
  }

  /* The "+" becomes a button at the start of the empty line. */
  .ed-plus {
    left: -4px;
    width: 40px;
    height: 40px;
  }

  .ed-empty.ed-hint::before {
    display: none;
  }

  .has-panel .ed-panel {
    width: 100vw;
    padding: calc(var(--ed-bar-height) + 8px) 20px calc(40px + env(safe-area-inset-bottom));
  }

  .ed-tb-input {
    width: min(230px, 60vw);
  }

  /* The floating bar fits the screen and scrolls sideways. */
  .ed-toolbar {
    max-width: calc(100vw - 24px);
  }

  .ed-tb-track {
    max-width: calc(100vw - 24px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .ed-tb-track::-webkit-scrollbar {
    display: none;
  }

  .ed-picker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 440px) {
  .ed-status {
    display: none;
  }
}

/* ---------------------------------------------------------------- Motion */

@keyframes ed-rise {
  from {
    opacity: 0;
    transform: translateY(4px) scale(.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ed-sink {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ed-leave {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: scale(.98);
  }
}

@keyframes ed-pop {
  from {
    opacity: 0;
    transform: translateY(-3px) scale(.97);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ed-fade {
  from {
    opacity: 0;
    transform: scale(.85);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ed-drop {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ed-dock-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ed-morph {
  from {
    opacity: .35;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ed-blink {
  to {
    visibility: hidden;
  }
}

@keyframes ed-pulse {
  50% {
    opacity: .35;
  }
}

@keyframes ed-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes ed-claim-clear {
  to {
    text-decoration-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ed-page *,
  .ed-page *::before,
  .ed-page *::after,
  .ed-toolbar,
  .ed-toolbar *,
  .ed-toolbar *::after,
  .ed-insert-menu,
  .ed-picker,
  .ed-pop,
  .ed-pop *,
  .ed-dock,
  .ed-plus {
    animation: none !important;
    transition: none !important;
  }

  .ed-toolbar.is-in,
  .ed-claim-pop.is-in {
    opacity: 1;
  }

  .ed-toolbar.is-out,
  .ed-claim-pop.is-out {
    opacity: 0;
  }

  .ed-tb-button[data-tip]:hover::after,
  .ed-tb-button[data-tip]:focus-visible::after {
    transform: translate(-50%, 0);
  }
}

/* Activity and receipts (/app/<workspace>/activity and /activity/<receipt>).
   Owner: dashboard-core. Rendered by crates/web/src/pages/app/activity.rs. Scoped under
   [data-surface="activity"]. */

[data-surface="activity"] .links-counter {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 2px 12px;
  padding: 14px 18px 14px 14px;
  border: 1px solid #cfd9e9;
  border-radius: 18px;
  background: linear-gradient(135deg, #f1f5fa, #fff 70%);
  box-shadow: var(--dash-card-shadow);
  transition: box-shadow .2s, border-color .2s;
}

[data-surface="activity"] .links-counter:hover {
  border-color: #9fb6d9;
  box-shadow: var(--dash-card-shadow-hover);
}

[data-surface="activity"] .links-counter-icon {
  display: grid;
  place-items: center;
  grid-row: span 2;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--green);
  color: #fff;
}

[data-surface="activity"] .links-counter-icon .icon {
  width: 22px;
  height: 22px;
}

[data-surface="activity"] .links-counter strong {
  font-size: 34px;
  font-weight: 780;
  line-height: 1;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}

[data-surface="activity"] .links-counter small {
  margin-left: 6px;
  font-size: 13px;
  font-weight: 650;
  color: #393d47;
}

[data-surface="activity"] .links-counter-detail {
  font-size: 12px;
  color: var(--muted);
}

/* Task banner */

[data-surface="activity"] .activity-task {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
  padding: 18px 22px;
  border: 1px solid #d9d2fb;
  border-radius: 18px;
  background: #faf9ff;
}

[data-surface="activity"] .activity-task h2 {
  font-size: 19px;
  letter-spacing: -.025em;
}

[data-surface="activity"] .activity-task-why {
  max-width: 720px;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: #41454f;
}

[data-surface="activity"] .activity-task-why span {
  display: block;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dash-pending-ink);
}

[data-surface="activity"] .activity-task-impact {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}

[data-surface="activity"] .activity-task-side {
  display: grid;
  align-content: start;
  justify-items: end;
  gap: 6px;
  flex-shrink: 0;
  text-align: right;
}

[data-surface="activity"] .activity-task-side small {
  max-width: 240px;
  font-size: 12px;
  color: var(--muted);
}

/* Tabs and filters */

[data-surface="activity"] .activity-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  margin: 14px 0 16px;
}

[data-surface="activity"] .activity-filters label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

[data-surface="activity"] .activity-filters label span {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7f838c;
}

[data-surface="activity"] .activity-filters select {
  min-width: 150px;
  max-width: 100%;
  padding: 9px 12px;
  border: 1px solid #d6d8de;
  border-radius: 11px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
}

[data-surface="activity"] .activity-filters .dash-more {
  align-self: center;
}

/* Receipt log */

[data-surface="activity"] .receipt-log {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="activity"] .receipt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}

[data-surface="activity"] .receipt-row:hover {
  border-color: #d2d5db;
  box-shadow: var(--dash-card-shadow);
}

[data-surface="activity"] .receipt-row[data-failed] {
  border-left: 3px solid #d64545;
}

[data-surface="activity"] .receipt-row-kind {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7f838c;
}

[data-surface="activity"] .receipt-row-kind span + span::before {
  content: "·";
  margin-right: 10px;
}

[data-surface="activity"] .receipt-row h3 {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -.02em;
}

[data-surface="activity"] .receipt-row h3 a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

[data-surface="activity"] .receipt-row-result {
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--deep);
}

[data-surface="activity"] .receipt-row-result[data-empty] {
  font-weight: 500;
  color: #7f838c;
}

[data-surface="activity"] .receipt-row-failure {
  margin-top: 6px;
  font-size: 13.5px;
  color: #b42318;
}

[data-surface="activity"] .receipt-row-next {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

[data-surface="activity"] .receipt-row-next span,
[data-surface="activity"] .receipt-next span {
  margin-right: 6px;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green);
}

[data-surface="activity"] .receipt-row-side {
  display: grid;
  align-content: start;
  justify-items: end;
  gap: 6px;
  text-align: right;
}

/* Feed view */

[data-surface="activity"] .activity-events {
  margin: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  list-style: none;
}

[data-surface="activity"] .activity-events li > a,
[data-surface="activity"] .activity-events li > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 10px 12px;
  border-radius: 11px;
}

[data-surface="activity"] .activity-events li > a:hover {
  background: #f8f8f9;
}

[data-surface="activity"] .activity-event-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pill-bg);
  color: var(--pill-ink);
}

[data-surface="activity"] .activity-event-icon .icon {
  width: 14px;
  height: 14px;
}

[data-surface="activity"] .activity-event-text {
  display: grid;
  gap: 2px;
  padding-top: 4px;
  font-size: 14px;
  line-height: 1.45;
}

[data-surface="activity"] .activity-event-text small {
  font-size: 12px;
  color: #7f838c;
}

[data-surface="activity"] .activity-pager {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

/* Links ledger */

[data-surface="activity"] .links-ledger {
  margin-top: 28px;
  scroll-margin-top: 90px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}

[data-surface="activity"] .links-ledger h2,
[data-surface="activity"] .receipt-history h2 {
  font-size: 17px;
  font-weight: 720;
  letter-spacing: -.025em;
}

[data-surface="activity"] .links-ledger header p {
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--muted);
}

[data-surface="activity"] .links-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 24px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

[data-surface="activity"] .links-types li {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

[data-surface="activity"] .links-types strong {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

[data-surface="activity"] .links-bar {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #eeeff2;
}

[data-surface="activity"] .links-bar span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--green);
  transform-origin: left center;
  transform: scaleX(.1);
}

[data-surface="activity"] .links-bar span[data-level="2"] { transform: scaleX(.2); }
[data-surface="activity"] .links-bar span[data-level="3"] { transform: scaleX(.3); }
[data-surface="activity"] .links-bar span[data-level="4"] { transform: scaleX(.4); }
[data-surface="activity"] .links-bar span[data-level="5"] { transform: scaleX(.5); }
[data-surface="activity"] .links-bar span[data-level="6"] { transform: scaleX(.6); }
[data-surface="activity"] .links-bar span[data-level="7"] { transform: scaleX(.7); }
[data-surface="activity"] .links-bar span[data-level="8"] { transform: scaleX(.8); }
[data-surface="activity"] .links-bar span[data-level="9"] { transform: scaleX(.9); }
[data-surface="activity"] .links-bar span[data-level="10"] { transform: scaleX(1); }

[data-surface="activity"] .links-table {
  display: grid;
  margin-top: 18px;
  border-top: 1px solid #eff0f3;
}

[data-surface="activity"] .links-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .9fr) auto minmax(70px, auto) minmax(60px, auto);
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #eff0f3;
  font-size: 13px;
  color: #41454f;
}

[data-surface="activity"] .links-source .dash-evidence {
  overflow: hidden;
  max-width: 100%;
}

[data-surface="activity"] .links-source .dash-evidence span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-surface="activity"] .links-empty {
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted);
}

/* Receipt page */

[data-surface="activity"] .receipt-back {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--deep);
}

[data-surface="activity"] .receipt-status-big {
  display: grid;
  justify-items: end;
  gap: 8px;
}

[data-surface="activity"] .receipt-status-big .dash-pill {
  padding: 6px 14px;
  font-size: 14px;
}

[data-surface="activity"] .receipt-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  margin: 0 0 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  list-style: none;
}

[data-surface="activity"] .receipt-steps li {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 0 12px 0 26px;
}

[data-surface="activity"] .receipt-steps li strong {
  font-size: 14px;
}

[data-surface="activity"] .receipt-steps li small {
  font-size: 12px;
  color: #a7aab1;
}

[data-surface="activity"] .receipt-step-dot {
  position: absolute;
  top: 3px;
  left: 0;
  width: 16px;
  height: 16px;
  border: 2px solid #d6d8de;
  border-radius: 50%;
  background: #fff;
}

[data-surface="activity"] .receipt-steps li[data-reached] .receipt-step-dot {
  border-color: transparent;
  background: var(--pill-ink);
  box-shadow: 0 0 0 4px var(--pill-bg);
}

[data-surface="activity"] .receipt-steps li:not([data-reached]) strong {
  color: #8e9198;
}

[data-surface="activity"] .receipt-failure {
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid #f3c7c7;
  border-radius: 13px;
  background: #fdf3f3;
  font-size: 14px;
  color: #8f1d14;
}

[data-surface="activity"] .receipt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

[data-surface="activity"] .receipt-grid h2 {
  margin-bottom: 10px;
}

[data-surface="activity"] .receipt-url .dash-evidence {
  overflow-wrap: anywhere;
}

[data-surface="activity"] .receipt-muted {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

[data-surface="activity"] .receipt-shot,
[data-surface="activity"] .receipt-shot-placeholder {
  width: 100%;
  margin-top: 12px;
  border-radius: 13px;
}

[data-surface="activity"] .receipt-shot-placeholder {
  display: grid;
  place-items: center;
  gap: 4px;
  aspect-ratio: 16 / 9;
  padding: 18px;
  border: 1px dashed #d2d5db;
  background: repeating-linear-gradient(135deg, #fafbfc 0 10px, #f4f5f7 10px 20px);
  text-align: center;
}

[data-surface="activity"] .receipt-shot-placeholder .icon {
  width: 26px;
  height: 26px;
  color: #9ea2ac;
}

[data-surface="activity"] .receipt-shot-placeholder span {
  font-size: 14px;
  font-weight: 680;
  color: #545964;
}

[data-surface="activity"] .receipt-shot-placeholder small {
  max-width: 340px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

[data-surface="activity"] .receipt-verification {
  margin-top: 14px;
  font-size: 13px;
  color: #41454f;
}

[data-surface="activity"] .receipt-verification ul {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

[data-surface="activity"] .receipt-verification li {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-surface="activity"] .receipt-verification .icon {
  width: 15px;
  height: 15px;
  color: var(--green);
}

[data-surface="activity"] .receipt-verification li[data-ok="false"] .icon {
  color: #d64545;
}

[data-surface="activity"] .receipt-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin: 0;
}

[data-surface="activity"] .receipt-metrics div {
  padding: 12px 14px;
  border-radius: 12px;
  background: #f3f6fa;
}

[data-surface="activity"] .receipt-metrics dt {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #70747d;
}

[data-surface="activity"] .receipt-metrics dd {
  margin: 2px 0 0;
  font-size: 24px;
  font-weight: 760;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

[data-surface="activity"] .receipt-nothing {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f7f7f8;
  font-size: 16px;
  font-weight: 680;
}

[data-surface="activity"] .receipt-nothing small {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--muted);
}

[data-surface="activity"] .receipt-next {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.55;
}

[data-surface="activity"] .receipt-task-title {
  font-size: 15px;
  font-weight: 680;
}

[data-surface="activity"] .receipt-task p + p {
  margin-top: 8px;
}

[data-surface="activity"] .receipt-task small {
  font-size: 12.5px;
  color: var(--muted);
}

[data-surface="activity"] .receipt-approval {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f7f7f8;
  font-size: 13px;
}

[data-surface="activity"] .receipt-approval .icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--green);
}

[data-surface="activity"] .receipt-approval small {
  display: block;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

[data-surface="activity"] .receipt-task .dash-evidence {
  margin-top: 10px;
}

[data-surface="activity"] .receipt-links ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="activity"] .receipt-links li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 13px;
  color: var(--muted);
}

[data-surface="activity"] .receipt-history {
  margin-top: 22px;
}

[data-surface="activity"] .receipt-history .activity-events {
  margin-top: 10px;
}

@media (max-width: 860px) {
  [data-surface="activity"] .receipt-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-surface="activity"] .links-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  [data-surface="activity"] .links-row > span:nth-child(n+5) {
    display: none;
  }
  [data-surface="activity"] .links-row > span:nth-child(2),
  [data-surface="activity"] .links-row > span:nth-child(3) {
    grid-column: 1;
    font-size: 12px;
  }
  [data-surface="activity"] .links-row > span:nth-child(4) {
    grid-column: 2;
    grid-row: 1;
  }
  [data-surface="activity"] .activity-task {
    flex-direction: column;
  }
  [data-surface="activity"] .activity-task-side {
    justify-items: start;
    text-align: left;
  }
  [data-surface="activity"] .receipt-status-big {
    justify-items: start;
  }
}

@media (max-width: 600px) {
  [data-surface="activity"] .receipt-row {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px 16px;
  }
  [data-surface="activity"] .receipt-row-side {
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    justify-items: start;
    gap: 10px;
    text-align: left;
  }
  [data-surface="activity"] .receipt-row-side .dash-more {
    display: none;
  }
  [data-surface="activity"] .activity-filters label {
    flex: 1 1 130px;
  }
  [data-surface="activity"] .activity-filters select {
    width: 100%;
    min-width: 0;
  }
  [data-surface="activity"] .links-ledger {
    padding: 18px 16px;
  }
  [data-surface="activity"] .links-types li {
    grid-template-columns: 110px minmax(0, 1fr) 24px;
  }
  [data-surface="activity"] .receipt-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 0;
  }
}

/* Decision cards (/app/<workspace>/decisions) and the compact card on the Command Center.
   Owner: dashboard-core. Rendered by crates/web/src/pages/app/decisions.rs. The compact
   card appears on two surfaces, so its rules are scoped by its own class. */

.decisions-mode {
  display: grid;
  gap: 2px;
  min-width: 240px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}

.decisions-mode:hover {
  border-color: #c6c9d0;
  box-shadow: var(--dash-card-shadow);
}

.decisions-mode small {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8e9198;
}

.decisions-mode strong {
  font-size: 16px;
  letter-spacing: -.02em;
}

.decisions-mode span {
  font-size: 12.5px;
  color: var(--muted);
}

.decision-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Shared parts of both cards */

.decision-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--dash-attention-bg);
  color: var(--dash-attention-ink);
}

.decision-icon .icon {
  width: 16px;
  height: 16px;
}

[data-kind="approve_content"] .decision-icon {
  background: var(--dash-positive-bg);
  color: var(--dash-positive-ink);
}

[data-kind="approve_submission"] .decision-icon {
  background: var(--dash-progress-bg);
  color: var(--dash-progress-ink);
}

[data-kind="approve_paid_boost"] .decision-icon {
  background: var(--dash-pending-bg);
  color: var(--dash-pending-ink);
}

.decision-kind {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #70747d;
}

.decision-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.decision-actions form {
  display: contents;
}

/* Compact (Command Center) */

.decision-compact {
  padding: 14px 14px 14px;
  border: 1px solid #e8e9ec;
  border-radius: 15px;
  background: #fbfcfc;
  transition: border-color .2s, box-shadow .2s;
}

.decision-compact:hover {
  border-color: #d2d5db;
}

.decision-compact header {
  display: flex;
  align-items: center;
  gap: 9px;
}

.decision-compact header .decision-kind {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.decision-compact h3 {
  margin-top: 10px;
  font-size: 14.5px;
  font-weight: 680;
  line-height: 1.35;
  letter-spacing: -.015em;
}

.decision-compact h3 a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.decision-impact {
  display: grid;
  gap: 2px;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #41454f;
}

.decision-impact span {
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green);
}

.decision-compact .decision-actions {
  margin-top: 12px;
  gap: 6px;
}

.decision-compact .dash-button {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 9px;
  font-size: 13px;
}

/* Full card (Decisions) */

.decision-card {
  scroll-margin-top: 90px;
  padding: 24px 26px 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
}

.decision-card:target {
  border-color: #9fb6d9;
  box-shadow: 0 0 0 4px #124ea71f, var(--dash-card-shadow);
}

.decision-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.decision-head .decision-kind {
  flex: 1;
}

.decision-asked {
  font-size: 12px;
  color: #7f838c;
}

.decision-card h2 {
  margin-top: 14px;
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.25;
  font-weight: 720;
  letter-spacing: -.03em;
}

.decision-body {
  max-width: 760px;
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.65;
  color: #41454f;
}

/* A wrapping row, not an auto-fit grid: the full-width impact fact spans every track, so
   a grid kept them all and squeezed a lone fact beside it into one 180px column. */
.decision-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 0;
}

.decision-facts > div {
  flex: 1 1 180px;
  min-width: 0;
  padding: 11px 13px;
  border-radius: 12px;
  background: #f7f7f8;
}

.decision-facts dt {
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7f838c;
}

.decision-facts dd {
  margin: 3px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}

.decision-facts .decision-impact-fact {
  flex-basis: 100%;
  background: #eef2f9;
}

.decision-impact-fact dt {
  color: var(--green);
}

.decision-impact-fact dd {
  font-size: 14.5px;
  font-weight: 600;
}

.decision-price {
  background: #f4f1fe;
}

.decision-free {
  background: #eef2f9;
}

/* The draft preview: plain text only. */

.decision-draft {
  margin-top: 14px;
  border: 1px solid #e8e9ec;
  border-radius: 14px;
  background: #fbfcfc;
}

.decision-draft summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 14px;
  list-style: none;
  cursor: pointer;
}

.decision-draft summary::-webkit-details-marker {
  display: none;
}

.decision-draft summary > span:first-child {
  font-size: 14px;
  font-weight: 680;
  color: var(--deep);
}

.decision-draft summary > span:first-child::after {
  content: " ›";
  display: inline-block;
  transition: transform .2s var(--motion-ease-out);
}

.decision-draft[open] summary > span:first-child::after {
  transform: rotate(90deg);
}

.decision-draft summary small {
  font-size: 12.5px;
  color: var(--muted);
}

.decision-draft-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: 22px;
  padding: 4px 18px 18px;
}

.decision-article {
  max-width: 680px;
  font-size: 14.5px;
  line-height: 1.7;
  color: #31353f;
}

.decision-article h3 {
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -.025em;
}

.decision-article h4 {
  margin-top: 16px;
  font-size: 15.5px;
  letter-spacing: -.02em;
}

.decision-article p {
  margin-top: 10px;
}

.decision-dek {
  font-size: 15px;
  color: var(--muted);
}

.decision-item {
  position: relative;
  padding-left: 18px;
}

.decision-item::before {
  content: "";
  position: absolute;
  top: .7em;
  left: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
}

.decision-claims h4 {
  font-size: 13px;
  font-weight: 720;
}

.decision-claims ul {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.decision-claims li {
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  border-left: 3px solid var(--green);
  border-radius: 4px 10px 10px 4px;
  background: #fff;
}

.decision-claims li[data-supported="false"] {
  border-left-color: #d64545;
}

/* Opinions and general statements: labelled, never flagged (cards-ux). */
.decision-claims li[data-supported="label"] {
  border-left-color: #c6c9d0;
  background: #fbfcfc;
}

.decision-claims-note {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.decision-claims-note a {
  color: var(--deep);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Founder steps first, then approvals (cards-ux; the cards are in cards.css). */

.decisions-steps {
  display: grid;
  gap: 14px;
  margin-bottom: 30px;
}

.decisions-steps-head h2,
.decisions-section-title {
  font-size: 19px;
  font-weight: 720;
  letter-spacing: -.025em;
}

.decisions-steps-head p {
  max-width: 70ch;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

.decisions-section-title {
  margin: 0 0 14px;
}

.decisions-folded > summary {
  cursor: pointer;
  padding: 10px 0;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--green);
}

.decisions-folded[open] > summary {
  margin-bottom: 10px;
}

.decision-who dd {
  margin-top: 5px;
}

/* The fact-check summary is a sentence: it wraps on narrow screens. */
.decision-draft summary .dash-pill {
  white-space: normal;
}

.decision-claims strong {
  font-size: 13px;
  font-weight: 620;
  line-height: 1.4;
}

.decision-claims small {
  font-size: 12px;
  color: var(--muted);
}

/* History */

.decision-history {
  margin-top: 28px;
}

.decision-history h2 {
  font-size: 16px;
  font-weight: 720;
  letter-spacing: -.02em;
}

.decision-history ol {
  margin: 10px 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  list-style: none;
}

.decision-history li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  font-size: 13.5px;
}

.decision-history li + li {
  border-top: 1px solid #eff0f3;
}

.decision-history[hidden] {
  display: none;
}

/* The verb as a dot and a word (no pills). */
.decision-history-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-weight: 650;
}

.decision-history-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8e929c;
}

.decision-history-status[data-tone="positive"] .decision-history-dot { background: #12a37a; }
.decision-history-status[data-tone="attention"] .decision-history-dot { background: #e08a00; }

.decision-history-flags {
  display: inline-flex;
  gap: 3px;
  margin-right: 6px;
  vertical-align: -3px;
}

.decision-history-flags .lb-flag {
  width: 18px;
  height: 18px;
}

/* "Change answer": the question again, inline, under the row. */
.decision-history-change {
  grid-column: 1 / -1;
  margin: -4px 0 2px 164px;
}

.decision-history-change > summary {
  display: inline-flex;
  width: fit-content;
  color: var(--deep, #002863);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.decision-history-change > summary::-webkit-details-marker {
  display: none;
}

.decision-history-change > summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 6px;
}

.decision-history-change[open] > summary {
  margin-bottom: 10px;
}

.decision-history-form {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #e5e6e9;
  border-radius: 14px;
  background: #fbfdfc;
}

.decision-history-form .dash-button {
  justify-self: start;
}

.decision-history-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A question's row leads with the answer itself; the question is the quiet part. */
.decision-history-question {
  color: var(--muted, #646871);
}

.decision-history-arrow {
  margin-inline: 8px;
  color: #9ea2aa;
}

.decision-history-answer {
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 700;
}

/* Edit form */

.decision-edit {
  display: grid;
  gap: 8px;
  max-width: 860px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}

.decision-edit label {
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 680;
}

.decision-edit label small {
  font-weight: 500;
  color: var(--muted);
}

.decision-edit input,
.decision-edit textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #d6d8de;
  border-radius: 11px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}

.decision-edit textarea {
  resize: vertical;
}

.decision-edit input:focus,
.decision-edit textarea:focus {
  outline: 2px solid #124ea766;
  outline-offset: 1px;
  border-color: var(--green);
}

@media (max-width: 860px) {
  .decision-draft-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .decision-history li {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .decision-history-change {
    margin-left: 0;
  }
  .decision-history-title {
    grid-column: 1 / -1;
    grid-row: 1;
    white-space: normal;
  }
}

@media (max-width: 600px) {
  .decision-card {
    padding: 18px 16px;
  }
  .decision-actions .dash-button {
    flex: 1 1 auto;
  }
  .decision-edit {
    padding: 18px 16px;
  }
  .decisions-mode {
    min-width: 0;
  }
}

/* When an article publishes and why a card waits (fix batch 2026-10-21 §2). */
.decision-timeline,
.decision-waiting {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.decision-waiting {
  color: #7a5200;
}

.decision-waiting[data-tone="info"] {
  color: #1f3f6f;
}

.decision-waiting a {
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Keyword use on an article card (the "don't overstuff" guard, migration 0231). */

.decision-keyword-use {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--dash-positive-bg);
}

.decision-keyword-use[data-stuffed="true"] {
  background: var(--dash-attention-bg);
}

.decision-keyword-use p,
.decision-keyword-use ul {
  margin: 4px 0 0;
  font-size: 13px;
}

.decision-keyword-use ul {
  padding-left: 18px;
}

/* The calm pass: three cards lead; the rest, the folded steps and the history open in
   place under "Show more" (components/calm.rs). */
.decisions-now {
  display: grid;
  gap: 10px;
}

.decisions-order > .calm-why-body p {
  max-width: 70ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

.decisions-order .decisions-steps-headline {
  color: var(--ink);
  font-weight: 650;
}

.decisions-more > .calm-more-body {
  display: grid;
  gap: 26px;
  padding-top: 12px;
}

.decisions-folded h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--muted);
}

/* Nothing decided yet: no empty disclosure (an in-place answer fills it). */
.decisions-history-more:has(#decision-history[hidden]) {
  display: none;
}

.decisions-history-more .decision-history {
  margin-top: 0;
}

.decision-why {
  margin-top: 10px;
}

.decision-why > .calm-why-body {
  display: block;
  padding-top: 2px;
}

.decision-why .decision-body {
  margin-top: 4px;
}

/* The main keyword (migration 0231). Rendered by crates/web/src/pages/app/keyword.rs on
   the keyword page, Decisions, the Command Center, onboarding, the Score page and
   Territory, so every rule is scoped by the component's own classes (kw-). Values wrap,
   never truncate; motion is transform/opacity only and stops under reduced motion. */

.kw-page {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.kw-kicker {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.kw-section {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.kw-section-title {
  margin: 0;
  color: var(--ink);
  font-size: 19px;
  font-weight: 720;
  letter-spacing: -.01em;
}

.kw-section-lede,
.kw-note {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.kw-subtitle {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 700;
}

/* The current keyword */

.kw-current {
  display: grid;
  gap: 8px;
  padding: 22px 24px;
  border-left: 4px solid var(--green);
}

.kw-current-keyword {
  margin: 0;
  color: var(--ink);
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 780;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

.kw-current-meta,
.kw-current-organised {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.kw-current-organised {
  color: #31353f;
}

.kw-current-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.kw-change > summary {
  width: max-content;
  list-style: none;
  cursor: pointer;
}

.kw-change > summary::-webkit-details-marker {
  display: none;
}

.kw-change-body {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

/* Candidates */

.kw-chooser {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.kw-candidates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kw-chooser[data-compact="false"] .kw-candidates {
  grid-template-columns: minmax(0, 1fr);
}

.kw-candidate {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
  transition: transform .3s var(--motion-ease-out), box-shadow .3s var(--motion-ease-out);
}

.kw-candidate:hover {
  box-shadow: var(--dash-card-shadow-hover);
  transform: translateY(-2px);
}

.kw-candidate[data-recommended="true"] {
  border-color: #9fb6d8;
  background: linear-gradient(180deg, #f3f6fb 0%, #fff 60%);
}

.kw-candidate[data-chosen="true"] {
  border-color: var(--green);
}

.kw-candidate-head {
  display: grid;
  gap: 4px;
}

.kw-badge {
  justify-self: start;
  padding: 3px 9px;
  border-radius: 7px;
  background: var(--dash-neutral-bg);
  color: var(--dash-neutral-ink);
  font-size: 11.5px;
  font-weight: 700;
}

/* Outpost's recommendation is brand blue; green stays for the founder's settled choice. */
.kw-badge[data-kind="pick"] {
  background: var(--tint-blue);
  color: var(--brand);
}

.kw-badge[data-kind="chosen"] {
  background: var(--dash-positive-bg);
  color: var(--dash-positive-ink);
}

.kw-badge[data-kind="typed"] {
  background: var(--dash-progress-bg);
  color: var(--dash-progress-ink);
}

.kw-candidate-keyword {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 740;
  overflow-wrap: anywhere;
}

.kw-candidate-fit {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.kw-candidate-why {
  margin: 0;
  color: #31353f;
  font-size: 14px;
  line-height: 1.5;
}

.kw-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr));
  gap: 10px 14px;
  margin: 0;
}

.kw-stat {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.kw-stat dt {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .02em;
}

.kw-stat dd {
  display: grid;
  gap: 1px;
  margin: 0;
}

.kw-stat-value {
  color: var(--ink);
  font-size: 16px;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
  text-decoration: underline dotted #bcbfc7;
  text-underline-offset: 4px;
}

.kw-stat-value:hover {
  color: var(--green);
  text-decoration-color: var(--green);
}

.kw-stat-source {
  color: #898d97;
  font-size: 11px;
}

.kw-choose {
  margin: 0;
}

.kw-choose .dash-button {
  white-space: normal;
  text-align: left;
}

.kw-compare {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
}

.kw-compare a {
  color: var(--green);
  text-decoration: none;
}

.kw-compare a:hover {
  text-decoration: underline;
}

/* Type your own */

.kw-own {
  display: grid;
  gap: 10px;
}

.kw-own-form {
  display: grid;
  gap: 6px;
  max-width: 560px;
}

.kw-own-label {
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
}

.kw-own-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kw-own-input {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #d2d5db;
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}

.kw-own-input:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

.kw-again {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.kw-notes {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.kw-empty,
.kw-failed {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.kw-failed {
  color: var(--dash-negative-ink);
}

.kw-pending {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--dash-progress-bg);
  color: var(--dash-progress-ink);
  font-size: 14px;
  font-weight: 600;
}

.kw-pending p {
  margin: 0;
}

.kw-pending-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}

@media (prefers-reduced-motion: no-preference) {
  .kw-pending-dot {
    animation: kw-pulse 1.4s var(--motion-ease-in-out) infinite;
  }
}

@keyframes kw-pulse {
  50% {
    opacity: .35;
    transform: scale(.7);
  }
}

/* The evidence */

.kw-evidence {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.kw-evidence > summary {
  color: var(--green);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.kw-evidence-source {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

.kw-evidence-source[data-fixture="true"] {
  color: var(--dash-attention-ink);
  font-weight: 650;
}

.kw-evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 18px;
  margin-top: 12px;
}

.kw-evidence-grid section {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.kw-evidence-wide {
  grid-column: 1 / -1;
}

.kw-evidence-grid h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 750;
}

.kw-evidence-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.kw-evidence-strong {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 720;
}

.kw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.kw-table th,
.kw-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #eef0f3;
  text-align: left;
  overflow-wrap: anywhere;
}

.kw-table thead th {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
}

.kw-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
}

.kw-serp {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kw-serp-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--canvas);
  font-size: 13px;
}

.kw-serp-row[data-weak="true"] {
  background: var(--dash-positive-bg);
}

.kw-serp-row[data-competitor="true"] {
  background: var(--dash-attention-bg);
}

.kw-serp-position {
  color: var(--muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.kw-serp-body {
  display: grid;
  min-width: 0;
}

.kw-serp-body a {
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.kw-serp-host {
  color: var(--muted);
  font-size: 12px;
}

.kw-serp-kind {
  color: #31353f;
  font-size: 12px;
  font-weight: 650;
  text-align: right;
}

/* Progress */

.kw-progress {
  display: grid;
  gap: 12px;
  padding: 20px 22px;
}

.kw-progress-head {
  display: grid;
  gap: 2px;
}

.kw-progress-title {
  margin: 0;
  font-size: 20px;
  font-weight: 760;
  overflow-wrap: anywhere;
}

.kw-progress-title a {
  color: var(--ink);
  text-decoration: none;
}

.kw-progress-title a:hover {
  color: var(--green);
}

.kw-position {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  min-width: 0;
}

.kw-position-keyword {
  flex: 1 1 180px;
  min-width: 0;
  color: #31353f;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.kw-position[data-primary="true"] .kw-position-keyword {
  display: none;
}

.kw-position-value {
  color: var(--ink);
  font-size: 15px;
  font-weight: 740;
  font-variant-numeric: tabular-nums;
  text-decoration: underline dotted #bcbfc7;
  text-underline-offset: 4px;
}

.kw-position[data-primary="true"] .kw-position-value {
  font-size: 28px;
  letter-spacing: -.02em;
}

.kw-position-value[data-tone="positive"] {
  color: var(--dash-positive-ink);
}

.kw-position-change,
.kw-position-source {
  color: var(--muted);
  font-size: 12.5px;
}

.kw-progress-cluster {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.kw-progress-coverage {
  margin: 0;
  font-size: 13.5px;
}

/* How we estimate */

.kw-estimate-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.kw-estimate-text {
  display: grid;
  gap: 10px;
  color: #31353f;
  font-size: 14px;
  line-height: 1.6;
}

.kw-estimate-text p {
  margin: 0;
}

.kw-sources {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
}

.kw-ctr caption {
  padding-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  text-align: left;
}

/* Topic pages and history */

.kw-hubs,
.kw-changes,
.kw-history {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kw-hub {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.kw-hub-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.kw-hub-title {
  color: var(--ink);
  font-weight: 700;
}

.kw-hub-detail {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.kw-change-row,
.kw-history-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 8px 0;
  border-bottom: 1px solid #eef0f3;
  font-size: 13.5px;
}

.kw-change-row[data-undone="true"] .kw-change-summary {
  color: var(--muted);
  text-decoration: line-through;
}

.kw-change-summary,
.kw-history-keyword {
  flex: 1 1 260px;
  min-width: 0;
}

.kw-history-row[data-current="true"] .kw-history-keyword {
  font-weight: 700;
}

.kw-change-when,
.kw-history-meta {
  color: var(--muted);
  font-size: 12.5px;
}

.kw-link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--green);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.kw-link-button:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  .kw-estimate-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .kw-serp-row {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .kw-serp-kind {
    grid-column: 2;
    text-align: left;
  }

  .kw-current {
    padding: 18px;
  }
}

.kw-pending-refresh {
  margin-left: auto;
  color: inherit;
  font-weight: 700;
}

/* The Command Center: the keyword card in "Needs your attention", and Launch Runway. */

.kw-attention {
  display: grid;
  flex: 1;
  gap: 8px;
  min-width: 0;
}

/* The chooser ends with its own text, so Dismiss sits below it, not over it. */
.kw-attention + .cc-attention-dismiss {
  margin-top: 8px;
  padding: 0;
}

.kw-runway {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
  padding: 20px 22px;
  border: 1px solid #cfd9e9;
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 100% 0%, #e3eaf5 0%, transparent 55%),
    #f8f9fb;
}

.kw-runway h2 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 760;
  overflow-wrap: anywhere;
}

.kw-runway p {
  margin: 0;
  color: #31353f;
  font-size: 14px;
  line-height: 1.5;
}

.kw-runway .kw-kicker {
  color: var(--green);
}

.kw-runway .dash-button {
  justify-self: start;
  margin-top: 4px;
}

/* The coming-soon page's line under the main keyword (0244). */
.kw-runway .kw-runway-page {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid #dbe2ee;
}

.kw-runway .kw-runway-page .icon {
  width: 16px;
  height: 16px;
  color: var(--brand);
}

.kw-runway .kw-runway-page a {
  color: var(--brand);
  font-weight: 650;
}

/* The Plan page's main-keyword line. */

.kw-plan {
  display: grid;
  gap: 2px;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: 12px;
  background: #fff;
}

.kw-plan[data-open="true"] {
  border-left-color: var(--dash-attention-ink);
  background: var(--dash-attention-bg);
}

.kw-plan-line {
  margin: 0;
  color: #31353f;
  font-size: 14px;
}

.kw-plan-line a {
  color: var(--green);
  font-weight: 650;
}

/* The traffic's honest range under its likely value. */
.kw-stat-note {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

/* Fix batch H: the founder's own keywords, right above "Or type your own"; a typed one is
   scored in its slot (a skeleton), and the research used shows as counts. */

.kw-yours {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.kw-yours-title {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
}

.kw-skeleton {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 18px;
  border: 1px dashed #c9d9f0;
  border-radius: 14px;
  background: #fff;
}

.kw-skeleton-keyword {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
}

.kw-skeleton-status {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.kw-skeleton-line,
.kw-skeleton-stat {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--mint) 0%, #e8ebf0 50%, var(--mint) 100%);
  background-size: 200% 100%;
}

.kw-skeleton-line[data-short] {
  width: 60%;
}

.kw-skeleton-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr));
  gap: 10px;
}

.kw-skeleton-stat {
  height: 44px;
  border-radius: 10px;
}

@media (prefers-reduced-motion: no-preference) {
  .kw-skeleton-line,
  .kw-skeleton-stat {
    animation: kw-shimmer 1.4s linear infinite;
  }
}

@keyframes kw-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

.kw-usage {
  display: grid;
  gap: 2px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.kw-usage-count {
  color: var(--ink);
  font-weight: 560;
}

.kw-usage-count strong {
  font-variant-numeric: tabular-nums;
  font-weight: 720;
}

/* The calm pass: a candidate leads with why and its likely visits; every other number is
   under "The other N numbers", and the page's method, topic pages and history under
   "Show more" (components/calm.rs). */
.kw-stats-lead .kw-stat-value {
  font-size: 18px;
}

.kw-numbers > .calm-why-body {
  padding-top: 6px;
}

.kw-candidate > .kw-numbers {
  margin-top: -4px;
}

#kw-more-candidates {
  margin-top: 14px;
}

#kw-more-candidates > .calm-more-body {
  padding-top: 12px;
}

.kw-more > .calm-more-body > .kw-section:first-child {
  margin-top: 12px;
}

/* "The evidence" reads like the other disclosures: no native marker, a chevron. */
.kw-evidence > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
}

.kw-evidence > summary::-webkit-details-marker {
  display: none;
}

.kw-evidence > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s var(--motion-ease-out);
}

.kw-evidence[open] > summary::after {
  margin-top: 3px;
  transform: rotate(225deg);
}

/* Experiments (/app/<workspace>/experiments and /experiments/{id}). Owner: dashboard-labs.
   Rendered by crates/web/src/pages/app/experiments/ (flow.rs draws the diagram). Every rule
   is scoped under the shell root's [data-surface="experiments"]. The flow's row height and gap
   (76px, 12px) mirror ROW_HEIGHT and ROW_GAP in flow.rs, so stream ends meet row centres. */

[data-surface="experiments"] {
  --lab-row: 76px;
  --lab-gap: 12px;
  --lab-stream: #cfd9e9;
  --lab-stream-strong: #9fb5d6;
  --lab-dot: #0b449a;
  --lab-lit: #1154b8;
}

/* Cards */

[data-surface="experiments"] .lab-cards {
  display: grid;
  gap: 16px;
}

[data-surface="experiments"] .lab-card {
  display: grid;
  gap: 16px;
  padding: 22px 24px 18px;
  border: 1px solid var(--line);
  border-radius: var(--lab-card-radius);
  background: #fff;
  box-shadow: var(--lab-shadow);
}

[data-surface="experiments"] .lab-card[data-phase="draft"] {
  border-style: dashed;
  border-color: #cfd2d9;
  box-shadow: none;
}

[data-surface="experiments"] .lab-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

[data-surface="experiments"] .lab-card-title {
  flex-basis: 100%;
  font-size: 20px;
  font-weight: 730;
  line-height: 1.25;
  letter-spacing: -.025em;
}

[data-surface="experiments"] .lab-card-title a:hover {
  color: var(--deep);
}

[data-surface="experiments"] .lab-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #eff0f3;
  color: #50545f;
  font-size: 12.5px;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
}

[data-surface="experiments"] .lab-status[data-phase="running"] {
  background: #e3eaf5;
  color: var(--deep);
}

[data-surface="experiments"] .lab-status[data-phase="decided"] {
  background: var(--ink);
  color: #fff;
}

[data-surface="experiments"] .lab-live {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
}

[data-surface="experiments"] .lab-proposer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

[data-surface="experiments"] .lab-proposer .icon {
  width: 13px;
  height: 13px;
  color: var(--green);
}

[data-surface="experiments"] .lab-hypothesis {
  max-width: 820px;
  padding-left: 14px;
  border-left: 3px solid #d6dfec;
  color: var(--lab-ink-soft);
  font-size: 14.5px;
  line-height: 1.6;
}

[data-surface="experiments"] .lab-hypothesis-label {
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #8d9096;
}

/* The flow diagram */

[data-surface="experiments"] .lab-flow {
  container: lab-flow / inline-size;
  margin: 0;
  padding: 18px;
  border-radius: 16px;
  background:
    radial-gradient(#00368712 1px, transparent 1.3px) 0 0 / 16px 16px,
    linear-gradient(180deg, #fbfdfc, #f6f7f8);
  border: 1px solid #e8eaed;
}

[data-surface="experiments"] .lab-flow-across {
  display: grid;
  grid-template-columns: minmax(112px, 140px) minmax(36px, 1fr) minmax(220px, 290px) minmax(28px, .6fr) minmax(170px, 210px);
  align-items: center;
}

[data-surface="experiments"] .lab-flow-down {
  display: none;
}

[data-surface="experiments"] .lab-flow-source {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2px;
  padding: 12px 13px;
  border: 1px solid #dcdee2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 22px -18px #101a2966;
  min-width: 0;
}

[data-surface="experiments"] .lab-flow-source-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 6px;
  border-radius: 9px;
  background: #e3eaf5;
  color: var(--deep);
}

[data-surface="experiments"] .lab-flow-source-icon .icon {
  width: 16px;
  height: 16px;
}

/* "Readers of blog.habitflow.example" is one long word to the browser: break the host. */
[data-surface="experiments"] .lab-flow-source strong {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

[data-surface="experiments"] .lab-flow-source small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-surface="experiments"] .lab-flow-source-count {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11.5px;
}

[data-surface="experiments"] .lab-flow-source-count b {
  color: var(--ink);
  font-size: 15px;
  font-weight: 740;
  font-variant-numeric: tabular-nums;
}

/* Streams: the SVG is exactly as tall as the variant column (rows × 76 + gaps × 12). */

[data-surface="experiments"] .lab-streams {
  display: block;
  width: 100%;
  height: var(--lab-row);
  overflow: visible;
}

[data-surface="experiments"] .lab-flow[data-rows="2"] .lab-flow-across .lab-streams {
  height: calc(2 * var(--lab-row) + var(--lab-gap));
}

[data-surface="experiments"] .lab-flow[data-rows="3"] .lab-flow-across .lab-streams {
  height: calc(3 * var(--lab-row) + 2 * var(--lab-gap));
}

[data-surface="experiments"] .lab-flow[data-rows="4"] .lab-flow-across .lab-streams {
  height: calc(4 * var(--lab-row) + 3 * var(--lab-gap));
}

[data-surface="experiments"] .lab-flow-down .lab-streams {
  height: 44px;
}

[data-surface="experiments"] .lab-stream {
  fill: none;
  stroke: var(--lab-stream);
  stroke-linecap: round;
  transition: stroke .4s, opacity .4s;
}

[data-surface="experiments"] .lab-streams[data-kind="merge"] .lab-stream,
[data-surface="experiments"] .lab-streams[data-kind="fan-in"] .lab-stream {
  stroke: var(--lab-stream-strong);
}

[data-surface="experiments"] .lab-stream-dots {
  fill: none;
  stroke: var(--lab-dot);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 0 14;
  opacity: .7;
}

[data-surface="experiments"] .lab-streams[data-kind="merge"] .lab-stream-dots,
[data-surface="experiments"] .lab-streams[data-kind="fan-in"] .lab-stream-dots {
  stroke: var(--lab-lit);
  stroke-width: 4;
  stroke-dasharray: 0 26;
  opacity: 1;
}

[data-surface="experiments"] .lab-stream[data-role="winner"] {
  stroke: #7fcaa8;
}

[data-surface="experiments"] .lab-stream[data-role="faded"],
[data-surface="experiments"] .lab-stream-dots[data-role="faded"] {
  opacity: .35;
}

[data-surface="experiments"] .lab-flow[data-phase="draft"] .lab-stream {
  stroke: #e1e3e7;
  stroke-dasharray: 2 7;
  stroke-width: 2;
}

[data-surface="experiments"] .lab-flow:not([data-phase="running"]) .lab-stream-dots {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  [data-surface="experiments"] .lab-flow[data-phase="running"] .lab-stream-dots {
    animation: lab-travel 1.6s linear infinite;
  }
  [data-surface="experiments"] .lab-flow[data-phase="running"] .lab-streams[data-kind="merge"] .lab-stream-dots,
  [data-surface="experiments"] .lab-flow[data-phase="running"] .lab-streams[data-kind="fan-in"] .lab-stream-dots {
    animation: lab-travel-lit 2.4s linear infinite;
  }
  [data-surface="experiments"] .lab-status[data-phase="running"] .lab-live::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: lab-ping 2s var(--motion-ease-out) infinite;
  }
  [data-surface="experiments"] .lab-meter-fill,
  [data-surface="experiments"] .lab-variant-best-fill {
    transform-box: fill-box;
    transform-origin: left center;
    animation: lab-grow 1.3s var(--motion-ease-out) .25s backwards;
  }
  [data-surface="experiments"] .lab-decision[data-tone="collecting"] .lab-decision-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    animation: lab-ping 2.4s var(--motion-ease-out) infinite;
  }
}

@keyframes lab-travel {
  to {
    stroke-dashoffset: -28;
  }
}

@keyframes lab-travel-lit {
  to {
    stroke-dashoffset: -52;
  }
}

@keyframes lab-ping {
  0% {
    box-shadow: 0 0 0 0 #00368759;
  }
  70%,
  100% {
    box-shadow: 0 0 0 9px #00368700;
  }
}

@keyframes lab-grow {
  from {
    transform: scaleX(0);
  }
}

/* Variant rows (across) */

[data-surface="experiments"] .lab-flow-variants {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--lab-gap);
}

[data-surface="experiments"] .lab-variant {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  height: var(--lab-row);
  padding: 0 12px 0 10px;
  overflow: hidden;
  border: 1px solid #e1e3e6;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 20px -18px #101a2966;
  transition: border-color .3s, opacity .3s, box-shadow .3s;
}

[data-surface="experiments"] .lab-variant[data-role="leader"] {
  border-color: #a9bddc;
}

[data-surface="experiments"] .lab-variant[data-role="winner"] {
  border-color: var(--success);
  box-shadow: 0 0 0 3px #00876521, 0 10px 22px -16px #00634f80;
}

[data-surface="experiments"] .lab-variant[data-role="faded"] {
  opacity: .6;
}

[data-surface="experiments"] .lab-variant-key {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #eeeff2;
  color: #4b4f58;
  font-size: 12.5px;
  font-weight: 780;
}

[data-surface="experiments"] [data-role="leader"] .lab-variant-key {
  background: #dfe7f3;
  color: var(--deep);
}

[data-surface="experiments"] [data-role="winner"] .lab-variant-key {
  background: var(--success);
  color: #fff;
}

[data-surface="experiments"] .lab-variant-text {
  display: grid;
  min-width: 0;
}

[data-surface="experiments"] .lab-variant-text strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  font-weight: 680;
  line-height: 1.28;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

[data-surface="experiments"] .lab-variant-text small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-surface="experiments"] .lab-variant-numbers {
  display: grid;
  justify-items: end;
  line-height: 1.2;
}

[data-surface="experiments"] .lab-variant-rate {
  font-size: 18px;
  font-weight: 760;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

[data-surface="experiments"] [data-role="winner"] .lab-variant-rate,
[data-surface="experiments"] [data-role="leader"] .lab-variant-rate {
  color: var(--success-ink);
}

[data-surface="experiments"] .lab-variant-numbers small {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

[data-surface="experiments"] .lab-variant-best {
  position: absolute;
  inset: auto 10px 7px 46px;
  width: calc(100% - 56px);
  height: 4px;
}

[data-surface="experiments"] .lab-variant-best-track {
  fill: #eff0f3;
}

[data-surface="experiments"] .lab-variant-best-fill {
  fill: #9fb5d6;
}

[data-surface="experiments"] [data-role="leader"] .lab-variant-best-fill,
[data-surface="experiments"] [data-role="winner"] .lab-variant-best-fill {
  fill: var(--success);
}

/* Meter and decision */

[data-surface="experiments"] .lab-flow-outcome {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}

[data-surface="experiments"] .lab-meter {
  display: grid;
  gap: 5px;
  padding: 12px 13px;
  border: 1px solid #e1e3e6;
  border-radius: 14px;
  background: #fff;
}

[data-surface="experiments"] .lab-meter-label {
  font-size: 10.5px;
  font-weight: 760;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8d9096;
}

[data-surface="experiments"] .lab-meter-bar {
  display: block;
  width: 100%;
  height: 10px;
  margin: 3px 0 2px;
  overflow: visible;
}

[data-surface="experiments"] .lab-meter-track {
  fill: #ebecef;
}

[data-surface="experiments"] .lab-meter-fill {
  fill: #366ab8;
}

[data-surface="experiments"] .lab-meter[data-state="cleared"] .lab-meter-fill {
  fill: var(--green);
}

[data-surface="experiments"] .lab-meter[data-state="gathering"] .lab-meter-fill {
  fill: #b9bdc8;
}

[data-surface="experiments"] .lab-meter-tick {
  stroke: var(--ink);
  stroke-width: 2;
}

[data-surface="experiments"] .lab-meter-headline {
  font-size: 13.5px;
  font-weight: 720;
  line-height: 1.3;
}

[data-surface="experiments"] .lab-meter-detail {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}

[data-surface="experiments"] .lab-decision {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid #e1e3e6;
  border-radius: 14px;
  background: #fff;
}

[data-surface="experiments"] .lab-decision-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #eeeff2;
  color: #50545f;
}

[data-surface="experiments"] .lab-decision-icon .icon {
  width: 16px;
  height: 16px;
}

[data-surface="experiments"] .lab-decision-text {
  display: grid;
  min-width: 0;
}

[data-surface="experiments"] .lab-decision-text strong {
  font-size: 13.5px;
  font-weight: 730;
  line-height: 1.3;
}

[data-surface="experiments"] .lab-decision-text small {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}

[data-surface="experiments"] .lab-decision[data-tone="winner"] {
  border-color: var(--success-ink);
  background: linear-gradient(160deg, #0a9a72, var(--success-ink));
  color: #fff;
}

[data-surface="experiments"] .lab-decision[data-tone="winner"] .lab-decision-icon {
  background: #ffffff26;
  color: #fff;
}

[data-surface="experiments"] .lab-decision[data-tone="winner"] small {
  color: #d9f3e8;
}

[data-surface="experiments"] .lab-decision[data-tone="collecting"] .lab-decision-icon {
  background: #e3eaf5;
  color: var(--deep);
}

[data-surface="experiments"] .lab-decision[data-tone="waiting"] .lab-decision-icon {
  background: #fdf3e2;
  color: #94620b;
}

[data-surface="experiments"] .lab-decision[data-tone="draft"] {
  border-style: dashed;
}

/* Narrow cards: the flow runs downward. */

[data-surface="experiments"] .lab-flow-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

[data-surface="experiments"] .lab-flow-columns[data-columns="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

[data-surface="experiments"] .lab-flow-columns[data-columns="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

[data-surface="experiments"] .lab-column {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  padding: 10px 6px 9px;
  border: 1px solid #e1e3e6;
  border-radius: 12px;
  background: #fff;
  text-align: center;
}

[data-surface="experiments"] .lab-column[data-role="winner"] {
  border-color: var(--success);
  box-shadow: 0 0 0 3px #00876521;
}

[data-surface="experiments"] .lab-column[data-role="faded"] {
  opacity: .6;
}

[data-surface="experiments"] .lab-column b {
  margin-top: 3px;
  font-size: 17px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

[data-surface="experiments"] .lab-column small {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.3;
}

[data-surface="experiments"] .lab-column-label {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 3px;
  color: var(--lab-ink-soft);
  font-size: 11px;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@container lab-flow (max-width: 700px) {
  [data-surface="experiments"] .lab-flow-across {
    display: none;
  }
  [data-surface="experiments"] .lab-flow-down {
    display: grid;
  }
  [data-surface="experiments"] .lab-flow-down .lab-flow-source {
    justify-self: center;
    width: min(100%, 260px);
    text-align: center;
    justify-items: center;
  }
  [data-surface="experiments"] .lab-flow-down .lab-flow-outcome {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@container lab-flow (max-width: 420px) {
  [data-surface="experiments"] .lab-flow-down .lab-flow-outcome {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Card footer: criteria and the way to the evidence. */

[data-surface="experiments"] .lab-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}

[data-surface="experiments"] .lab-criteria {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

[data-surface="experiments"] .lab-criteria div {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 9px;
  background: var(--canvas);
  font-size: 12.5px;
}

[data-surface="experiments"] .lab-criteria dt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-weight: 600;
}

[data-surface="experiments"] .lab-criteria dd {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

[data-surface="experiments"] .lab-criteria .lab-criteria-lock {
  background: #e9eef6;
}

[data-surface="experiments"] .lab-criteria-lock dt {
  color: var(--deep);
}

[data-surface="experiments"] .lab-criteria-lock .icon {
  width: 12px;
  height: 12px;
}

[data-surface="experiments"] .lab-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--deep);
  font-size: 13.5px;
  font-weight: 680;
  white-space: nowrap;
}

[data-surface="experiments"] .lab-card-link-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 560;
}

[data-surface="experiments"] .lab-card-link .icon {
  width: 14px;
  height: 14px;
  transition: transform .25s var(--motion-ease-out);
}

[data-surface="experiments"] .lab-card-link:hover .icon {
  transform: translateX(3px);
}

/* Lab notebook */

[data-surface="experiments"] .lab-notebook {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--lab-card-radius);
  background: #fff;
}

[data-surface="experiments"] .lab-notebook header h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 18px;
  font-weight: 720;
  letter-spacing: -.02em;
}

[data-surface="experiments"] .lab-notebook header h2 .icon {
  width: 18px;
  height: 18px;
  color: var(--green);
}

[data-surface="experiments"] .lab-notebook header p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

[data-surface="experiments"] .lab-notebook-empty {
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
}

[data-surface="experiments"] .lab-notebook-entries {
  display: grid;
  margin-top: 14px;
}

[data-surface="experiments"] .lab-entry {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
}

[data-surface="experiments"] .lab-entry + .lab-entry {
  border-top: 1px solid #eff0f3;
}

[data-surface="experiments"] .lab-entry-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #eff0f3;
  color: #5b5f69;
}

[data-surface="experiments"] .lab-entry-icon .icon {
  width: 15px;
  height: 15px;
}

[data-surface="experiments"] .lab-entry[data-tone="winner"] .lab-entry-icon {
  background: var(--success);
  color: #fff;
}

[data-surface="experiments"] .lab-entry[data-tone="collecting"] .lab-entry-icon {
  background: #e3eaf5;
  color: var(--deep);
}

[data-surface="experiments"] .lab-entry[data-tone="waiting"] .lab-entry-icon {
  background: #fdf3e2;
  color: #94620b;
}

[data-surface="experiments"] .lab-entry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 13.5px;
}

[data-surface="experiments"] .lab-entry-decision {
  font-weight: 720;
}

[data-surface="experiments"] .lab-entry-probability {
  padding: 1px 7px;
  border-radius: 6px;
  background: #eef1f6;
  color: var(--deep);
  font-size: 12px;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
}

[data-surface="experiments"] .lab-entry-experiment {
  color: var(--lab-ink-soft);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #cccfd6;
  text-underline-offset: 3px;
}

[data-surface="experiments"] .lab-entry-experiment:hover {
  color: var(--deep);
  text-decoration-color: currentColor;
}

[data-surface="experiments"] .lab-entry time {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

[data-surface="experiments"] .lab-entry-note {
  margin-top: 3px;
  color: var(--lab-ink-soft);
  font-size: 13.5px;
  line-height: 1.55;
}

[data-surface="experiments"] .lab-entry-counts {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Detail page */

[data-surface="experiments"] .lab-detail-grid {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) minmax(0, 3fr);
  align-items: start;
  gap: 16px;
}

[data-surface="experiments"] .lab-history {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--lab-card-radius);
  background: #fff;
}

[data-surface="experiments"] .lab-history h2 {
  font-size: 16px;
  font-weight: 720;
  letter-spacing: -.02em;
}

[data-surface="experiments"] .lab-history svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 14px;
  overflow: visible;
}

[data-surface="experiments"] .lab-history-axis {
  stroke: #e1e3e7;
  stroke-width: 1;
}

[data-surface="experiments"] .lab-history-threshold {
  stroke: var(--ink);
  stroke-width: 1.2;
  stroke-dasharray: 4 4;
  opacity: .55;
}

[data-surface="experiments"] .lab-history-line {
  fill: none;
  stroke: var(--green);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

[data-surface="experiments"] .lab-history-dots circle {
  fill: #fff;
  stroke: var(--green);
  stroke-width: 2;
}

[data-surface="experiments"] .lab-history-caption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

[data-surface="experiments"] .lab-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

[data-surface="experiments"] .lab-actions-note {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 12.5px;
  text-align: right;
}

/* The definition form */

[data-surface="experiments"] .lab-propose {
  border: 1px solid var(--line);
  border-radius: var(--lab-card-radius);
  background: #fff;
}

[data-surface="experiments"] .lab-propose summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  list-style: none;
  cursor: pointer;
}

[data-surface="experiments"] .lab-propose summary::-webkit-details-marker {
  display: none;
}

[data-surface="experiments"] .lab-propose summary strong {
  display: block;
  font-size: 16px;
  font-weight: 720;
}

[data-surface="experiments"] .lab-propose summary small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 13.5px;
}

[data-surface="experiments"] .lab-propose summary > .icon {
  width: 16px;
  height: 16px;
  color: var(--muted);
  transform: rotate(90deg);
  transition: transform .25s var(--motion-ease-out);
}

[data-surface="experiments"] .lab-propose[open] summary > .icon {
  transform: rotate(-90deg);
}

[data-surface="experiments"] .lab-propose-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fdf3e2;
  color: #94620b;
}

[data-surface="experiments"] .lab-propose-icon .icon {
  width: 19px;
  height: 19px;
}

[data-surface="experiments"] .lab-propose .lab-form {
  padding: 4px 22px 22px;
  border-top: 1px solid #eff0f3;
}

[data-surface="experiments"] .lab-edit {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--lab-card-radius);
  background: #fff;
}

[data-surface="experiments"] .lab-edit h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 720;
}

[data-surface="experiments"] .lab-edit h2 .icon {
  width: 17px;
  height: 17px;
  color: var(--green);
}

[data-surface="experiments"] .lab-edit > p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13.5px;
}

[data-surface="experiments"] .lab-form {
  display: grid;
  gap: 16px;
  margin-top: 14px;
}

[data-surface="experiments"] .lab-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

[data-surface="experiments"] .lab-form-row[data-columns="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

[data-surface="experiments"] .lab-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

[data-surface="experiments"] .lab-field label,
[data-surface="experiments"] .lab-form legend {
  font-size: 13px;
  font-weight: 680;
  color: var(--ink);
}

[data-surface="experiments"] .lab-form input[type="text"],
[data-surface="experiments"] .lab-form input[type="url"],
[data-surface="experiments"] .lab-form select,
[data-surface="experiments"] .lab-form textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #d2d5dc;
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
  transition: border-color .2s, box-shadow .2s;
}

[data-surface="experiments"] .lab-form textarea {
  resize: vertical;
  line-height: 1.5;
}

[data-surface="experiments"] .lab-form input:focus,
[data-surface="experiments"] .lab-form select:focus,
[data-surface="experiments"] .lab-form textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px #00368726;
}

[data-surface="experiments"] .lab-field[data-invalid] input,
[data-surface="experiments"] .lab-field[data-invalid] textarea,
[data-surface="experiments"] .lab-field[data-invalid] select {
  border-color: #c4582a;
}

[data-surface="experiments"] .lab-field-error {
  color: #a3441a;
  font-size: 12.5px;
  font-weight: 600;
}

[data-surface="experiments"] .lab-form fieldset {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

[data-surface="experiments"] .lab-form-choices {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

[data-surface="experiments"] .lab-form-choices legend {
  margin-bottom: 8px;
}

[data-surface="experiments"] .lab-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid #dee0e5;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}

[data-surface="experiments"] .lab-choice:has(input:checked) {
  border-color: var(--green);
  background: #f3f6fb;
}

[data-surface="experiments"] .lab-choice input {
  margin-top: 3px;
  accent-color: var(--green);
}

[data-surface="experiments"] .lab-choice strong {
  display: block;
  font-size: 13.5px;
  font-weight: 680;
}

[data-surface="experiments"] .lab-choice small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

[data-surface="experiments"] .lab-form-help {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

[data-surface="experiments"] .lab-form-variant {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 76px;
  align-items: center;
  gap: 10px;
}

[data-surface="experiments"] .lab-form-variant-block {
  display: grid;
  gap: 10px;
}

[data-surface="experiments"] .lab-form-change {
  display: grid;
  gap: 10px;
  margin-left: 36px;
  padding: 12px 14px 14px;
  border: 1px solid #e5e7ec;
  border-radius: 12px;
  background: #f9f9fa;
}

[data-surface="experiments"] .lab-form-change[data-invalid] {
  border-color: #c4582a;
}

[data-surface="experiments"] .lab-form-change-head {
  color: var(--muted);
  font-size: 12px;
  font-weight: 680;
  letter-spacing: .02em;
  text-transform: uppercase;
}

[data-surface="experiments"] .lab-form-body summary {
  width: fit-content;
  color: var(--green);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

[data-surface="experiments"] .lab-form-body textarea {
  margin-top: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}

[data-surface="experiments"] .lab-choice[data-unavailable] {
  border-style: dashed;
  background: #f8f8f9;
  cursor: not-allowed;
}

[data-surface="experiments"] .lab-choice[data-unavailable] strong {
  color: var(--muted);
}

[data-surface="experiments"] .lab-propose-waiting {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 22px 20px;
  border-top: 1px solid #eff0f3;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

[data-surface="experiments"] .lab-propose-waiting strong {
  color: var(--ink);
}

[data-surface="experiments"] .lab-propose-waiting .icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--green);
}

[data-surface="experiments"] .lab-form .lab-form-weight {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

[data-surface="experiments"] .lab-form-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding-top: 4px;
}

[data-surface="experiments"] .lab-form-submit p {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12.5px;
}

[data-surface="experiments"] .lab-form-submit .icon {
  width: 14px;
  height: 14px;
  color: var(--green);
}

@media (max-width: 960px) {
  [data-surface="experiments"] .lab-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  [data-surface="experiments"] .lab-card {
    padding: 18px 16px 16px;
  }
  [data-surface="experiments"] .lab-flow {
    padding: 14px 12px;
  }
  [data-surface="experiments"] .lab-card-title {
    font-size: 18px;
  }
  [data-surface="experiments"] .lab-form-row,
  [data-surface="experiments"] .lab-form-row[data-columns="3"] {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-surface="experiments"] .lab-propose summary,
  [data-surface="experiments"] .lab-propose .lab-form,
  [data-surface="experiments"] .lab-propose-waiting {
    padding-inline: 16px;
  }
  [data-surface="experiments"] .lab-form-change {
    margin-left: 0;
  }
  [data-surface="experiments"] .lab-notebook,
  [data-surface="experiments"] .lab-history,
  [data-surface="experiments"] .lab-edit {
    padding: 18px 16px;
  }
  [data-surface="experiments"] .lab-entry time {
    margin-left: 0;
  }
  [data-surface="experiments"] .lab-actions {
    justify-content: flex-start;
  }
  [data-surface="experiments"] .lab-actions-note {
    text-align: left;
  }
}

/* territory-exp: real controls on every card, the winner's approval, Outpost's proposals,
   the two-way propose section and before/after tests (labelled weaker). */

[data-surface="experiments"] .lab-card-foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  width: 100%;
}

[data-surface="experiments"] .lab-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 14px;
}

[data-surface="experiments"] .lab-card-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

[data-surface="experiments"] .lab-card-buttons .lab-button {
  min-height: 38px;
  padding: 8px 14px;
  font-size: 13.5px;
}

[data-surface="experiments"] .lab-waiting {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #fdf3e2;
  color: #8a5a07;
  font-size: 12.5px;
  font-weight: 680;
  text-decoration: none;
}

[data-surface="experiments"] .lab-waiting .icon {
  width: 13px;
  height: 13px;
}

[data-surface="experiments"] .lab-propose-button {
  justify-self: end;
}

/* The propose section: two ways to test. */

[data-surface="experiments"] .lab-propose-section {
  display: grid;
  gap: 12px;
  scroll-margin-top: calc(var(--app-header-height, 66px) + 16px);
}

[data-surface="experiments"] .lab-propose-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

[data-surface="experiments"] .lab-propose-head h2 {
  font-size: 18px;
  font-weight: 740;
  letter-spacing: -.025em;
}

[data-surface="experiments"] .lab-propose-head p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 13.5px;
}

[data-surface="experiments"] .lab-propose-section .lab-propose summary {
  grid-template-columns: minmax(0, 1fr) auto;
}

[data-surface="experiments"] .lab-propose[data-choice="before_after"] summary strong::after {
  content: "Weaker evidence";
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fdf3e2;
  color: #8a5a07;
  font-size: 11px;
  font-weight: 700;
  vertical-align: 2px;
}

/* Outpost's proposal on the experiment's page. */

[data-surface="experiments"] .lab-proposal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 16px 20px;
  border: 1px solid #f1dcb4;
  border-radius: var(--lab-card-radius);
  background: #fffaf1;
}

[data-surface="experiments"] .lab-proposal p {
  max-width: 640px;
  font-size: 14px;
  line-height: 1.55;
}

[data-surface="experiments"] .lab-proposal p .icon {
  width: 15px;
  height: 15px;
  margin-right: 6px;
  vertical-align: -2px;
  color: #94620b;
}

/* Publish the winner. */

[data-surface="experiments"] .lab-winner {
  display: grid;
  gap: 16px;
  padding: 22px 24px;
  border: 1px solid #bfe3d2;
  border-radius: var(--lab-card-radius);
  background: linear-gradient(180deg, #f1fbf6, #fff 70%);
  scroll-margin-top: calc(var(--app-header-height, 66px) + 16px);
}

[data-surface="experiments"] .lab-winner header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

[data-surface="experiments"] .lab-winner-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--success-ink);
  color: #fff;
}

[data-surface="experiments"] .lab-winner-icon .icon {
  width: 18px;
  height: 18px;
}

[data-surface="experiments"] .lab-winner h2 {
  font-size: 18px;
  font-weight: 740;
  letter-spacing: -.025em;
}

[data-surface="experiments"] .lab-winner header p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

[data-surface="experiments"] .lab-winner-changes,
[data-surface="experiments"] .lab-ba-changes {
  display: grid;
  gap: 10px;
}

[data-surface="experiments"] .lab-winner-changes dt,
[data-surface="experiments"] .lab-ba-changes dt {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7f838c;
}

[data-surface="experiments"] .lab-winner-changes dd,
[data-surface="experiments"] .lab-ba-changes dd {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

[data-surface="experiments"] .lab-winner-changes dd > span,
[data-surface="experiments"] .lab-ba-changes dd > span {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

[data-surface="experiments"] .lab-winner-changes small,
[data-surface="experiments"] .lab-ba-changes small {
  font-size: 11px;
  font-weight: 700;
  color: #7f838c;
}

[data-surface="experiments"] .lab-winner-changes dd > .lab-winner-after,
[data-surface="experiments"] .lab-ba-changes dd > span:last-child {
  border-color: #9fd3bb;
  background: #f6f7fa;
}

[data-surface="experiments"] .lab-winner-address {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

[data-surface="experiments"] .lab-winner-address .icon {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}

[data-surface="experiments"] .lab-winner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

[data-surface="experiments"] .lab-winner-link {
  color: var(--success-ink);
  font-size: 13px;
  font-weight: 650;
}

[data-surface="experiments"] .lab-winner-blocked {
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff3e2;
  color: #8a5200;
  font-size: 13.5px;
}

/* Before/after tests. */

[data-surface="experiments"] .lab-ba {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--canvas);
}

[data-surface="experiments"] .lab-ba-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

[data-surface="experiments"] .lab-ba-label strong {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fdf3e2;
  color: #8a5a07;
  font-size: 12px;
}

[data-surface="experiments"] .lab-ba-label .icon {
  width: 14px;
  height: 14px;
  color: #94620b;
  align-self: center;
}

[data-surface="experiments"] .lab-ba-page {
  font-size: 13px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

[data-surface="experiments"] .lab-ba-page a {
  color: var(--deep);
  font-weight: 650;
}

[data-surface="experiments"] .lab-ba-periods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="experiments"] .lab-ba-periods li {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

[data-surface="experiments"] .lab-ba-periods li[data-winner="true"] {
  border-color: var(--success-ink);
  box-shadow: 0 0 0 3px #00876522;
}

[data-surface="experiments"] .lab-ba-period {
  display: grid;
  gap: 2px;
  font-size: 13px;
}

[data-surface="experiments"] .lab-ba-period small,
[data-surface="experiments"] .lab-ba-counts {
  font-size: 12px;
  color: var(--muted);
}

[data-surface="experiments"] .lab-ba-rate {
  font-size: 26px;
  font-weight: 780;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

[data-surface="experiments"] .lab-ba-provenance,
[data-surface="experiments"] .lab-ba-status {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

[data-surface="experiments"] .lab-ba-advice {
  padding: 10px 14px;
  border-radius: 10px;
  background: #e9eef6;
  color: var(--deep);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.5;
}

@media (max-width: 760px) {
  [data-surface="experiments"] .lab-card-foot-row,
  [data-surface="experiments"] .lab-card-actions {
    justify-content: flex-start;
  }
  [data-surface="experiments"] .lab-winner-changes dd,
  [data-surface="experiments"] .lab-ba-changes dd,
  [data-surface="experiments"] .lab-ba-periods {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-surface="experiments"] .lab-winner,
  [data-surface="experiments"] .lab-ba {
    padding: 16px;
  }
  [data-surface="experiments"] .lab-propose-button {
    justify-self: start;
  }
}

[data-surface="experiments"] .lab-winner-changes[hidden] {
  display: none;
}

/* No experiments yet: how close the first proposal is (fix batch §13). */

.lab-progress {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px #101a290a, 0 18px 40px -32px #101a2940;
}

.lab-progress-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #f1eefd;
  color: #5543c0;
}

.lab-progress-icon .icon {
  width: 22px;
  height: 22px;
}

.lab-progress-text {
  display: grid;
  flex: 1;
  gap: 10px;
  min-width: 0;
}

.lab-progress-text h2 {
  font-size: 18px;
  letter-spacing: -.02em;
}

.lab-progress-text p {
  max-width: 68ch;
  color: #40444e;
  font-size: 14.5px;
  line-height: 1.6;
}

.lab-progress-bar {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #eff0f3;
  appearance: none;
}

.lab-progress-bar::-webkit-progress-bar {
  border-radius: 999px;
  background: #eff0f3;
}

.lab-progress-bar::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, #7c6cf0, #5543c0);
}

.lab-progress-bar::-moz-progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, #7c6cf0, #5543c0);
}

.lab-progress p.lab-progress-count {
  color: var(--muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

/* Ideas Outpost ranked (wave 3, product intelligence): evidence-first cards, every number
   a link to its basis. Rendered by crates/web/src/pages/app/experiments/ideas.rs. The
   section sits among the lab's groups without being one (a group is a set of tests). */
.lab-ideas {
  display: grid;
  gap: 12px;
}

.lab-ideas-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
}

.lab-ideas-head > div {
  flex: 1 1 320px;
  min-width: 0;
}

.lab-ideas-none {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.lab-idea-list {
  display: grid;
  gap: 14px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.lab-idea {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
  transition: box-shadow .2s var(--motion-ease-out);
}

.lab-idea:hover {
  box-shadow: var(--dash-card-shadow-hover);
}

.lab-idea:not([data-feasible]) {
  background: #fbfbfd;
}

.lab-idea-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.lab-idea-rank {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: #efecff;
  color: #4b3bb8;
  font-size: 15px;
  font-weight: 780;
  font-variant-numeric: tabular-nums;
}

.lab-idea:not([data-feasible]) .lab-idea-rank {
  background: #f1f2f3;
  color: var(--muted);
}

.lab-idea-kind {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6c5bd8;
}

.lab-idea-kind span + span {
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
}

.lab-idea-kind span[data-design="before_after"] {
  color: #9a5800;
}

.lab-idea h3 {
  margin-top: 4px;
  font-size: 16.5px;
  font-weight: 740;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

.lab-idea-numbers {
  display: flex;
  gap: 14px;
  margin: 0;
}

.lab-idea-numbers div {
  display: grid;
  justify-items: end;
}

.lab-idea-numbers dt {
  font-size: 11px;
  color: var(--muted);
}

.lab-idea-numbers dd {
  margin: 0;
  font-size: 18px;
  font-weight: 780;
  font-variant-numeric: tabular-nums;
}

.lab-idea-numbers a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dashed #c3c8ce;
}

.lab-idea-numbers a:hover,
.lab-idea-numbers a:focus-visible {
  border-bottom-color: currentColor;
}

.lab-idea-hypothesis {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
}

.lab-idea-copy {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.lab-idea-copy p {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #f6f7f9;
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

.lab-idea-copy p[data-role="challenger"] {
  background: #f1efff;
}

.lab-idea-copy span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.lab-idea-metric,
.lab-idea-learning,
.lab-idea-value {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.lab-idea-metric .icon,
.lab-idea-learning .icon,
.lab-idea-value .icon {
  flex: none;
  margin-top: 2px;
}

.lab-idea-basis {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fafbfc;
  list-style: none;
}

.lab-idea-basis li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.45;
}

.lab-idea-basis-label {
  color: var(--muted);
}

.lab-idea-basis-value {
  color: var(--ink);
  font-weight: 620;
  overflow-wrap: anywhere;
}

a.lab-idea-basis-value {
  color: var(--deep);
}

.lab-idea-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.lab-idea-foot .lab-idea-value {
  margin-top: 0;
}

.lab-idea-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 720px) {
  .lab-idea {
    padding: 16px;
  }

  .lab-idea-head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .lab-idea-numbers {
    grid-column: 1 / -1;
  }

  .lab-idea-numbers div {
    justify-items: start;
  }

  .lab-idea-basis li {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lab-idea {
    transition: none;
  }
}

/* Assets (/app/<workspace>/assets and /assets/requests/{id}). Owner: dashboard-labs.
   Rendered by crates/web/src/pages/app/assets/. Scoped under [data-surface="assets"]. */

[data-surface="assets"] .asset-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr));
  gap: 16px;
}

[data-surface="assets"] .asset-card {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 22px 22px 18px;
  border: 1px solid var(--line);
  border-radius: var(--lab-card-radius);
  background: #fff;
  box-shadow: var(--lab-shadow);
}

[data-surface="assets"] .asset-card[data-status="fulfilled"] {
  border-color: #cfd9e9;
  background: linear-gradient(180deg, #fbfefc, #fff);
}

[data-surface="assets"] .asset-card[data-status="dismissed"] {
  border-style: dashed;
  border-color: #cfd2d9;
  box-shadow: none;
  background: #fbfcfd;
}

[data-surface="assets"] .asset-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

[data-surface="assets"] .asset-card-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: #fdf3e2;
  color: #94620b;
}

[data-surface="assets"] [data-status="fulfilled"] .asset-card-icon {
  background: #e3eaf5;
  color: var(--deep);
}

[data-surface="assets"] [data-status="dismissed"] .asset-card-icon {
  background: #eff0f3;
  color: #70747e;
}

[data-surface="assets"] .asset-card-icon .icon {
  width: 20px;
  height: 20px;
}

[data-surface="assets"] .asset-card-kind {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8d9096;
}

[data-surface="assets"] .asset-card-status {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

[data-surface="assets"] .asset-card h3 {
  margin-top: 3px;
  font-size: 17.5px;
  font-weight: 720;
  line-height: 1.3;
  letter-spacing: -.02em;
}

[data-surface="assets"] .asset-card h3 a:hover {
  color: var(--deep);
}

[data-surface="assets"] .asset-progress {
  padding: 5px 10px;
  border-radius: 999px;
  background: #fdf3e2;
  color: #8a5a0a;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

[data-surface="assets"] .asset-progress[data-complete] {
  background: #e3f5ec;
  color: var(--success-ink);
}

[data-surface="assets"] .asset-reason {
  color: var(--lab-ink-soft);
  font-size: 14.5px;
  line-height: 1.6;
}

[data-surface="assets"] .asset-spec {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

[data-surface="assets"] .asset-spec div {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 9px;
  background: var(--canvas);
  font-size: 12.5px;
  line-height: 1.4;
}

[data-surface="assets"] .asset-spec .asset-spec-usage {
  flex-basis: 100%;
}

[data-surface="assets"] .asset-spec dt {
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

[data-surface="assets"] .asset-spec dd {
  font-weight: 650;
}

/* Upload: the form beside the QR code. */

[data-surface="assets"] .asset-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
  background:
    radial-gradient(#00368712 1px, transparent 1.3px) 0 0 / 16px 16px,
    linear-gradient(180deg, #fbfdfc, #f6f7f8);
  border: 1px solid #e8eaed;
}

[data-surface="assets"] .asset-upload {
  display: grid;
  align-content: start;
  gap: 8px;
}

[data-surface="assets"] .asset-alt-label {
  font-size: 12.5px;
  font-weight: 680;
}

[data-surface="assets"] .asset-alt {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid #d2d5dc;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

[data-surface="assets"] .asset-alt:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px #00429626;
}

[data-surface="assets"] .asset-upload .lab-button {
  justify-self: start;
  margin-top: 4px;
}

[data-surface="assets"] .asset-phone {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e1e3e6;
  border-radius: 14px;
  background: #fff;
}

[data-surface="assets"] .asset-qr {
  display: block;
  width: 92px;
  height: 92px;
  shape-rendering: crispEdges;
}

[data-surface="assets"] .asset-qr-light {
  fill: #fff;
}

[data-surface="assets"] .asset-qr-dark {
  fill: var(--ink);
}

[data-surface="assets"] .asset-phone strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
}

[data-surface="assets"] .asset-phone strong .icon {
  width: 14px;
  height: 14px;
  color: var(--green);
}

[data-surface="assets"] .asset-phone p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

[data-surface="assets"] .asset-phone-link {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  color: var(--deep);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-surface="assets"] .asset-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

[data-surface="assets"] .asset-link-button {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #cccfd6;
  text-underline-offset: 3px;
  cursor: pointer;
}

[data-surface="assets"] .asset-link-button:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

/* Tiles: previews keep their space (width and height attributes), so nothing shifts. */

[data-surface="assets"] .asset-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
}

[data-surface="assets"] .asset-tiles[data-compact] {
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
}

[data-surface="assets"] .asset-tile {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  transition: box-shadow .25s, transform .25s var(--motion-ease-out);
}

[data-surface="assets"] .asset-tile:hover {
  box-shadow: 0 12px 24px -18px #101a2966;
  transform: translateY(-2px);
}

[data-surface="assets"] .asset-tile-preview {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background:
    linear-gradient(45deg, #f2f3f5 25%, transparent 25%, transparent 75%, #f2f3f5 75%) 0 0 / 14px 14px,
    linear-gradient(45deg, #f2f3f5 25%, #fff 25%, #fff 75%, #f2f3f5 75%) 7px 7px / 14px 14px;
}

[data-surface="assets"] .asset-tile-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

[data-surface="assets"] .asset-tile-file {
  display: grid;
  justify-items: center;
  gap: 6px;
  color: #5b5f69;
  font-size: 13px;
  font-weight: 760;
  letter-spacing: .06em;
}

[data-surface="assets"] .asset-tile-file .icon {
  width: 26px;
  height: 26px;
  color: var(--green);
}

[data-surface="assets"] .asset-tile-meta {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 10px 11px 11px;
  border-top: 1px solid #eff0f3;
}

[data-surface="assets"] .asset-tile-meta strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-surface="assets"] .asset-tile-meta small {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}

[data-surface="assets"] .asset-tile-meta .asset-tile-treatment {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--deep);
}

[data-surface="assets"] .asset-tile-treatment .icon {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

/* Library */

[data-surface="assets"] .asset-library {
  display: grid;
  gap: 14px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--lab-card-radius);
  background: #fff;
}

[data-surface="assets"] .asset-library h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 18px;
  font-weight: 720;
  letter-spacing: -.02em;
}

[data-surface="assets"] .asset-library h2 .icon {
  width: 18px;
  height: 18px;
  color: var(--green);
}

[data-surface="assets"] .asset-library h2 span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ebecef;
  font-size: 12px;
  letter-spacing: 0;
}

[data-surface="assets"] .asset-library header p,
[data-surface="assets"] .asset-library-empty {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

[data-surface="assets"] .asset-library-add {
  border-top: 1px solid #eff0f3;
  padding-top: 12px;
}

[data-surface="assets"] .asset-library-add .asset-upload {
  max-width: 720px;
}

/* A tile that just arrived from the uploader. */
@media (prefers-reduced-motion: no-preference) {
  [data-surface="assets"] .asset-tile.is-new {
    animation: outpost-rise .42s var(--motion-ease-out) both;
  }
}

/* The upload page (phones). */

[data-surface="assets"] .asset-request-head {
  padding: 4px 2px;
}

[data-surface="assets"] .asset-request-head h1 {
  margin-top: 2px;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 760;
  line-height: 1.1;
  letter-spacing: -.045em;
}

[data-surface="assets"] .asset-request-page .asset-card {
  max-width: 760px;
}

/* The page heading already names the card. */
[data-surface="assets"] .asset-request-page .asset-card-head h3,
[data-surface="assets"] .asset-request-page .asset-card-kind {
  display: none;
}

[data-surface="assets"] .asset-request-page .asset-card-head {
  align-items: center;
}

@media (max-width: 720px) {
  [data-surface="assets"] .asset-card {
    padding: 18px 16px 16px;
  }
  [data-surface="assets"] .asset-card-head {
    grid-template-columns: auto minmax(0, 1fr);
  }
  [data-surface="assets"] .asset-progress {
    grid-column: 1 / -1;
    justify-self: start;
  }
  [data-surface="assets"] .asset-library {
    padding: 18px 16px;
  }
  [data-surface="assets"] .asset-tiles,
  [data-surface="assets"] .asset-tiles[data-compact] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Remove (fix batch 2026-10-21 §11): the tile's ⋯ menu and the confirmation. */
[data-surface="assets"] .asset-tile {
  position: relative;
}

[data-surface="assets"] .asset-tile-menu {
  position: absolute;
  top: 8px;
  right: 8px;
}

[data-surface="assets"] .asset-tile-menu summary {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgb(255 255 255 / .92);
  box-shadow: 0 1px 3px rgb(18 21 28 / .18);
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

[data-surface="assets"] .asset-tile-menu summary::-webkit-details-marker {
  display: none;
}

[data-surface="assets"] .asset-tile-menu a {
  position: absolute;
  top: 34px;
  right: 0;
  padding: 8px 14px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 20px rgb(18 21 28 / .16);
  color: #b42318;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

[data-surface="assets"] .asset-remove-effects {
  display: grid;
  gap: 8px;
  max-width: 680px;
  margin: 18px 0;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.6;
}

[data-surface="assets"] .asset-remove-effects [data-tone="live"] {
  color: #7a5200;
}

[data-surface="assets"] .asset-remove-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

[data-surface="assets"] .asset-remove-page .asset-tiles {
  max-width: 260px;
}


/* The uploader (public/uploader.js): a dropzone with "Choose files", then one row per file
   with its progress ring. Shared by Assets (`form[data-uploader]`) and the article editor
   (its picker's Upload, and the placeholder of an image dropped into the text). Classes
   are prefixed `up-`. Without JavaScript the dropzone is the file input's label and the
   form posts the chosen files with its Upload button. */

.up-zone {
  position: relative;
}

.up-drop {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 84px;
  padding: 16px 18px;
  border: 1.5px dashed color-mix(in srgb, var(--brand) 22%, var(--line));
  border-radius: 16px;
  background: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--tint-blue) 45%, var(--bg)));
  color: var(--ink);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.up-drop:hover,
.up-zone[data-over] .up-drop {
  border-color: var(--brand);
  background: var(--tint-blue);
}

.up-zone[data-over] .up-drop {
  border-style: solid;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 8%, transparent);
}

.up-input:focus-visible + .up-drop {
  border-color: var(--brand);
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.up-drop-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--tint-blue);
  color: var(--brand);
}

.up-drop-icon .icon {
  width: 20px;
  height: 20px;
}

.up-drop-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.up-drop-title {
  font-size: 15px;
  font-weight: 720;
  letter-spacing: -.01em;
}

.up-drop-hint {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}

/* Looks like the primary button; the whole label opens the file picker. */
.up-choose {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--bg);
  font-size: 13.5px;
  font-weight: 680;
  white-space: nowrap;
  transition: background-color .16s ease;
}

.up-drop:hover .up-choose {
  background: var(--button-hover);
}

/* Without JavaScript: say the files are chosen (the input itself is hidden). */
.up-chosen {
  display: none;
  grid-column: 1 / -1;
  align-items: center;
  gap: 6px;
  color: var(--success-ink);
  font-size: 12.5px;
  font-weight: 650;
}

.up-chosen .icon {
  width: 14px;
  height: 14px;
}

.up-zone:has(.up-input:required:valid) .up-chosen {
  display: inline-flex;
}

[data-enhanced] .up-chosen,
[data-enhanced] .up-nojs {
  display: none;
}

.up-nojs {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

/* The rows. */

.up-progress {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.up-progress[hidden] {
  display: none;
}

.up-summary {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.up-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.up-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
}

.up-row[data-state="failed"] {
  border-color: var(--negative-line);
  background: color-mix(in srgb, var(--negative-tint) 40%, var(--bg));
}

.up-row-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.up-row-name {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.up-row-note {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}

.up-row[data-state="done"] .up-row-note {
  color: var(--success-ink);
}

.up-row[data-state="failed"] .up-row-note {
  color: var(--negative-ink);
}

.up-retry,
.up-dismiss {
  min-height: 32px;
  border-radius: 9px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 680;
  cursor: pointer;
}

.up-retry {
  padding: 0 12px;
  border: 1px solid var(--negative-line);
  background: var(--bg);
  color: var(--negative-ink);
}

.up-retry:hover {
  background: var(--negative-tint);
}

.up-dismiss {
  width: 32px;
  border: 0;
  background: transparent;
  color: var(--faint);
  font-size: 18px;
  line-height: 1;
}

.up-dismiss:hover {
  color: var(--ink);
}

.up-retry:focus-visible,
.up-dismiss:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.up-retry[hidden],
.up-dismiss[hidden] {
  display: none;
}

.up-alt-field {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.up-alt {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, var(--line));
  border-radius: 9px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

.up-alt:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent);
}

.up-alt-state {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

/* The ring: a pale track, the brand-blue arc, the percentage in the centre. */

.up-ring {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
}

.up-ring-graphic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}

.up-ring-track,
.up-ring-arc {
  fill: none;
  stroke-width: 4;
}

.up-ring-track {
  stroke: var(--tint-blue);
}

.up-ring-arc {
  stroke: var(--brand);
  stroke-linecap: round;
}

.up-ring-check,
.up-ring-alert {
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  /* Undo the graphic's rotation for the marks. */
  transform: rotate(90deg);
  transform-origin: 22px 22px;
}

.up-ring-check {
  stroke: var(--brand);
}

.up-ring-alert {
  stroke: var(--negative);
}

.up-ring-text {
  position: relative;
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.up-ring[data-state="queued"] .up-ring-text {
  color: var(--faint);
}

.up-ring[data-state="done"] .up-ring-text,
.up-ring[data-state="failed"] .up-ring-text {
  opacity: 0;
}

.up-ring[data-state="done"] .up-ring-check,
.up-ring[data-state="failed"] .up-ring-alert {
  opacity: 1;
}

.up-ring[data-state="done"] .up-ring-track {
  fill: var(--tint-blue);
}

.up-ring[data-state="failed"] .up-ring-track {
  stroke: var(--tint-pink);
  fill: var(--negative-tint);
}

.up-ring[data-state="failed"] .up-ring-arc {
  stroke: var(--negative);
  stroke-dashoffset: 0 !important;
}

@media (prefers-reduced-motion: no-preference) {
  .up-ring-arc {
    transition: stroke-dashoffset .24s var(--motion-ease-out), stroke .2s ease;
  }

  .up-ring-check,
  .up-ring-alert,
  .up-ring-text {
    transition: opacity .18s ease;
  }

  .up-ring[data-state="done"] .up-ring-check {
    animation: up-check .36s var(--motion-ease-out) both;
  }

  .up-row.is-entering {
    animation: outpost-rise .32s var(--motion-ease-out) both;
    --motion-distance: 8px;
  }
}

@keyframes up-check {
  from {
    opacity: 0;
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
  }

  to {
    opacity: 1;
    stroke-dasharray: 24;
    stroke-dashoffset: 0;
  }
}

@media (max-width: 560px) {
  .up-drop {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .up-choose {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .up-row {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }

  .up-dismiss {
    grid-column: 3;
  }

  .up-retry {
    grid-column: 2 / -1;
    justify-self: start;
  }
}

/* The renderer's panels. Owner: renderer. Rendered by crates/web/src/pages/app/renders.rs:
   the receipt screenshot (Activity, [data-surface="activity"]) and the capture panel on
   asset cards (Assets, [data-surface="assets"]). */

/* Receipt screenshot. */

[data-surface="activity"] .receipt-shot-real {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}

[data-surface="activity"] .receipt-shot-link {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #f4f5f7;
  box-shadow: 0 18px 34px -26px #0f1a2a59;
  transition: box-shadow .2s, transform .2s var(--motion-ease-out);
}

[data-surface="activity"] .receipt-shot-link:hover {
  box-shadow: 0 22px 40px -24px #0f1a2a73;
  transform: translateY(-1px);
}

[data-surface="activity"] .receipt-shot-link:focus-visible {
  outline: 3px solid #00368759;
  outline-offset: 2px;
}

[data-surface="activity"] .receipt-shot-real .receipt-shot {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 0;
}

[data-surface="activity"] .receipt-shot-real figcaption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 4px 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

[data-surface="activity"] .receipt-shot-real figcaption .icon {
  width: 14px;
  height: 14px;
  margin-top: 3px;
  color: var(--green);
}

[data-surface="activity"] .receipt-shot-real figcaption small {
  grid-column: 2;
  overflow-wrap: anywhere;
}

[data-surface="activity"] .receipt-shot-placeholder[data-shot="pending"] {
  border-style: solid;
  border-color: #cfd9e9;
  background: repeating-linear-gradient(135deg, #f9fafc 0 10px, #eef2f8 10px 20px);
}

[data-surface="activity"] .receipt-shot-placeholder[data-shot="pending"] .icon {
  color: var(--green);
}

[data-surface="activity"] .receipt-shot-placeholder[data-shot="failed"],
[data-surface="activity"] .receipt-shot-placeholder[data-shot="stalled"] {
  aspect-ratio: auto;
  min-height: 180px;
  border-color: #ecd9b4;
  background: #fffaf0;
}

[data-surface="activity"] .receipt-shot-placeholder[data-shot="failed"] .icon,
[data-surface="activity"] .receipt-shot-placeholder[data-shot="stalled"] .icon {
  color: #a8740f;
}

[data-surface="activity"] .receipt-shot-placeholder .render-action {
  margin-top: 6px;
}

/* Capture panel on an asset card. */

[data-surface="assets"] .capture-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #d6dee9;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8f9fb, #fff 70%);
}

[data-surface="assets"] .capture-panel[data-tone="problem"],
[data-surface="assets"] .capture-panel[data-tone="not-from-site"],
[data-surface="assets"] .capture-panel[data-tone="off"] {
  border-color: #e7e8eb;
  background: #fbfcfd;
}

[data-surface="assets"] .capture-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

[data-surface="assets"] .capture-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #e3eaf5;
  color: var(--deep);
}

[data-surface="assets"] .capture-panel[data-tone="problem"] .capture-mark,
[data-surface="assets"] .capture-panel[data-tone="not-from-site"] .capture-mark,
[data-surface="assets"] .capture-panel[data-tone="off"] .capture-mark {
  background: #eff0f3;
  color: #70747e;
}

[data-surface="assets"] .capture-mark .icon {
  width: 16px;
  height: 16px;
}

[data-surface="assets"] .capture-head h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 720;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

[data-surface="assets"] .capture-head p {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

[data-surface="assets"] .capture-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="assets"] .capture-item {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}

[data-surface="assets"] .capture-item[data-unusable] {
  border-style: dashed;
  background: #fbfcfd;
}

[data-surface="assets"] .capture-image {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 9px;
  background:
    linear-gradient(45deg, #f2f3f5 25%, transparent 25%, transparent 75%, #f2f3f5 75%) 0 0 / 16px 16px,
    linear-gradient(45deg, #f2f3f5 25%, #fff 25%, #fff 75%, #f2f3f5 75%) 8px 8px / 16px 16px;
}

[data-surface="assets"] .capture-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* A logo sits with room around it, like a listing thumbnail. */
[data-surface="assets"] .capture-item[data-kind="logo"] .capture-image img {
  inset: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
}

[data-surface="assets"] .capture-item[data-unusable] .capture-image img {
  opacity: .55;
}

[data-surface="assets"] .capture-image:focus-visible {
  outline: 3px solid #00368759;
  outline-offset: 2px;
}

[data-surface="assets"] .capture-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

[data-surface="assets"] .capture-meta strong {
  font-size: 13.5px;
  font-weight: 680;
  overflow-wrap: anywhere;
}

[data-surface="assets"] .capture-meta small {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

[data-surface="assets"] .capture-meta .capture-note {
  color: #8a5a06;
}

[data-surface="assets"] .capture-item-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

[data-surface="assets"] .capture-item-actions .lab-button {
  min-height: 36px;
  padding: 7px 14px;
}

[data-surface="assets"] .capture-notes {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0 0 0 18px;
  font-size: 13px;
  line-height: 1.55;
  color: #545964;
}

[data-surface="assets"] .capture-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

[data-surface="assets"] .render-action {
  display: contents;
}

@media (max-width: 480px) {
  [data-surface="assets"] .capture-panel {
    padding: 14px 12px;
  }

  [data-surface="assets"] .capture-actions .lab-button {
    flex: 1 1 100%;
  }
}

/* AI visibility (/app/<workspace>/ai-visibility). Owner: dashboard-labs.
   Rendered by crates/web/src/pages/app/ai_visibility/ (chart.rs draws the trend and the
   sparklines) and the AnswerReplay island (crates/web/src/components/answer_replay.rs).
   Scoped under [data-surface="ai-visibility"]. One series per chart, in the brand green,
   on a shared 0–100% scale: identity comes from position and labels, never colour alone. */

[data-surface="ai-visibility"] {
  --aiv-series: var(--green);
  --aiv-area: #00368721;
  --aiv-grid: #e9eaed;
}

/* Header: the headline share of voice. */

[data-surface="ai-visibility"] .aiv-headline {
  display: grid;
  justify-items: end;
  gap: 2px;
  padding: 14px 18px;
  border: 1px solid #d5deeb;
  border-radius: 16px;
  background: linear-gradient(160deg, #fff, #f1f5fa);
  text-align: right;
  transition: box-shadow .2s, border-color .2s;
}

[data-surface="ai-visibility"] .aiv-headline:hover {
  border-color: #a9bddc;
  box-shadow: 0 12px 26px -20px #00286399;
}

[data-surface="ai-visibility"] .aiv-headline-label {
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--deep);
}

[data-surface="ai-visibility"] .aiv-headline strong {
  font-size: 46px;
  font-weight: 790;
  line-height: 1;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}

[data-surface="ai-visibility"] .aiv-headline small {
  color: var(--muted);
  font-size: 12.5px;
}

[data-surface="ai-visibility"] .aiv-source-note {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #f5f6f7;
  color: #50545f;
  font-size: 13px;
  line-height: 1.45;
}

[data-surface="ai-visibility"] .aiv-source-note .icon {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  color: var(--muted);
}

/* Panels */

[data-surface="ai-visibility"] .aiv-trend,
[data-surface="ai-visibility"] .aiv-race,
[data-surface="ai-visibility"] .aiv-answers,
[data-surface="ai-visibility"] .aiv-prompts {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--lab-card-radius);
  background: #fff;
}

[data-surface="ai-visibility"] .aiv-trend h2,
[data-surface="ai-visibility"] .aiv-race h2,
[data-surface="ai-visibility"] .aiv-answers h2,
[data-surface="ai-visibility"] .aiv-prompts h2 {
  font-size: 17px;
  font-weight: 720;
  letter-spacing: -.02em;
}

[data-surface="ai-visibility"] .aiv-trend header p,
[data-surface="ai-visibility"] .aiv-race header p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

/* The trend chart: values beside, weeks below, the plot stretched between. */

[data-surface="ai-visibility"] .aiv-chart {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: 200px auto auto;
  column-gap: 8px;
  margin: 18px 0 0;
}

[data-surface="ai-visibility"] .aiv-chart-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #8d9096;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

[data-surface="ai-visibility"] .aiv-chart-y span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 0;
}

[data-surface="ai-visibility"] .aiv-chart-plot {
  width: 100%;
  height: 100%;
  overflow: visible;
}

[data-surface="ai-visibility"] .aiv-grid line {
  stroke: var(--aiv-grid);
  stroke-width: 1;
}

[data-surface="ai-visibility"] .aiv-area {
  fill: var(--aiv-area);
}

[data-surface="ai-visibility"] .aiv-line {
  fill: none;
  stroke: var(--aiv-series);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

[data-surface="ai-visibility"] .aiv-marker {
  fill: none;
  stroke: var(--aiv-series);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-width .15s;
}

[data-surface="ai-visibility"] .aiv-chart .aiv-marker {
  /* A generous hit target; the visible dot stays 8px. */
  pointer-events: stroke;
}

[data-surface="ai-visibility"] .aiv-chart .aiv-marker:hover {
  stroke-width: 12;
}

[data-surface="ai-visibility"] .aiv-marker[data-last] {
  stroke: var(--deep);
  stroke-width: 10;
}

[data-surface="ai-visibility"] .aiv-chart-x {
  grid-column: 2;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin-top: 8px;
  color: #8d9096;
  font-size: 11px;
  text-align: center;
  white-space: nowrap;
}

[data-surface="ai-visibility"] .aiv-chart figcaption {
  grid-column: 2;
  margin-top: 12px;
  color: var(--lab-ink-soft);
  font-size: 13px;
}

[data-surface="ai-visibility"] .aiv-table {
  margin-top: 12px;
}

[data-surface="ai-visibility"] .aiv-table summary {
  color: var(--deep);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

[data-surface="ai-visibility"] .aiv-table table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

[data-surface="ai-visibility"] .aiv-table th,
[data-surface="ai-visibility"] .aiv-table td {
  padding: 7px 8px;
  border-bottom: 1px solid #eff0f3;
  text-align: right;
}

[data-surface="ai-visibility"] .aiv-table th:first-child {
  text-align: left;
}

[data-surface="ai-visibility"] .aiv-table thead th {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
}

/* Engines: small multiples on one scale. */

[data-surface="ai-visibility"] .aiv-engines {
  display: grid;
  gap: 12px;
}

[data-surface="ai-visibility"] .aiv-engine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 12px;
}

[data-surface="ai-visibility"] .aiv-engine a {
  display: grid;
  gap: 3px;
  height: 100%;
  padding: 16px 16px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  transition: border-color .2s, box-shadow .2s, transform .2s var(--motion-ease-out);
}

[data-surface="ai-visibility"] .aiv-engine a:hover {
  border-color: #b9c6d9;
  box-shadow: 0 12px 24px -20px #101a2973;
  transform: translateY(-2px);
}

[data-surface="ai-visibility"] .aiv-engine-name {
  font-size: 13px;
  font-weight: 700;
}

[data-surface="ai-visibility"] .aiv-engine strong {
  font-size: 30px;
  font-weight: 780;
  line-height: 1.1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

[data-surface="ai-visibility"] .aiv-engine-change {
  color: var(--muted);
  font-size: 12px;
}

[data-surface="ai-visibility"] .aiv-engine-change[data-direction="up"] {
  color: var(--deep);
  font-weight: 650;
}

[data-surface="ai-visibility"] .aiv-spark {
  width: 100%;
  height: 44px;
  margin: 8px 0 4px;
  overflow: visible;
}

[data-surface="ai-visibility"] .aiv-spark-base {
  stroke: var(--aiv-grid);
  stroke-width: 1;
}

[data-surface="ai-visibility"] .aiv-spark .aiv-marker[data-last] {
  stroke-width: 8;
}

[data-surface="ai-visibility"] .aiv-engine-count {
  color: var(--deep);
  font-size: 12px;
  font-weight: 620;
}

/* Who the engines name */

[data-surface="ai-visibility"] .aiv-race-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

[data-surface="ai-visibility"] .aiv-brand {
  display: grid;
  grid-template-columns: minmax(110px, 180px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
}

[data-surface="ai-visibility"] .aiv-brand-name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-weight: 640;
}

[data-surface="ai-visibility"] .aiv-brand-name em {
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--green);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 720;
}

[data-surface="ai-visibility"] .aiv-brand-bar {
  width: 100%;
  height: 8px;
}

[data-surface="ai-visibility"] .aiv-brand-track {
  fill: #eff0f3;
}

[data-surface="ai-visibility"] .aiv-brand-fill {
  fill: #acb0ba;
}

[data-surface="ai-visibility"] .aiv-brand[data-you] .aiv-brand-fill {
  fill: var(--green);
}

[data-surface="ai-visibility"] .aiv-brand-value {
  color: var(--muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

[data-surface="ai-visibility"] .aiv-race-note {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}

@media (prefers-reduced-motion: no-preference) {
  [data-surface="ai-visibility"] .aiv-brand-fill {
    transform-box: fill-box;
    transform-origin: left center;
    animation: aiv-grow 1.1s var(--motion-ease-out) .2s backwards;
  }
  [data-surface="ai-visibility"] .answer-replay[data-replay="running"] .replay-word {
    transition: opacity .18s var(--motion-ease-out);
  }
  [data-surface="ai-visibility"] .answer-replay[data-replay="running"] .aiv-mention:has(.replay-word[data-shown]) {
    animation: aiv-mark .9s var(--motion-ease-out);
  }
}

@keyframes aiv-grow {
  from {
    transform: scaleX(0);
  }
}

@keyframes aiv-mark {
  0% {
    box-shadow: 0 0 0 0 #00368766;
  }
  100% {
    box-shadow: 0 0 0 8px #00368700;
  }
}

/* Answers and the replay */

[data-surface="ai-visibility"] .aiv-answers > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

[data-surface="ai-visibility"] .aiv-answers-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  margin-top: 16px;
}

[data-surface="ai-visibility"] .aiv-runs {
  display: grid;
  gap: 6px;
  max-height: 640px;
  overflow-y: auto;
  padding-right: 4px;
}

[data-surface="ai-visibility"] .aiv-run a {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: background-color .2s, border-color .2s;
}

[data-surface="ai-visibility"] .aiv-run a:hover {
  background: var(--canvas);
}

[data-surface="ai-visibility"] .aiv-run[aria-current] a {
  border-color: #b9c6d9;
  background: #f3f6fb;
}

[data-surface="ai-visibility"] .aiv-run-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}

[data-surface="ai-visibility"] .aiv-run-prompt {
  overflow: hidden;
  color: var(--lab-ink-soft);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-surface="ai-visibility"] .aiv-run small {
  color: var(--muted);
  font-size: 11.5px;
}

[data-surface="ai-visibility"] .aiv-fixture {
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 5px;
  background: #eff0f3;
  color: #5b5f69;
  font-size: 10.5px;
  font-weight: 680;
  text-transform: uppercase;
  letter-spacing: .06em;
}

[data-surface="ai-visibility"] .aiv-outcome {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 680;
  white-space: nowrap;
}

[data-surface="ai-visibility"] .aiv-outcome .icon {
  width: 13px;
  height: 13px;
}

[data-surface="ai-visibility"] .aiv-outcome[data-kind="mentioned"] {
  color: var(--deep);
}

[data-surface="ai-visibility"] .aiv-outcome[data-kind="absent"],
[data-surface="ai-visibility"] .aiv-outcome[data-kind="failed"] {
  color: #70747e;
}

[data-surface="ai-visibility"] .aiv-replay {
  display: grid;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid #e1e3e6;
  border-radius: 16px;
  background:
    radial-gradient(#00368710 1px, transparent 1.3px) 0 0 / 16px 16px,
    #fbfdfc;
}

[data-surface="ai-visibility"] .aiv-replay > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

[data-surface="ai-visibility"] .aiv-replay h3 {
  font-size: 15.5px;
  font-weight: 720;
}

[data-surface="ai-visibility"] .aiv-prompt {
  justify-self: end;
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  line-height: 1.45;
}

[data-surface="ai-visibility"] .aiv-prompt-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ffffffa6;
}

[data-surface="ai-visibility"] .answer-replay {
  display: grid;
  gap: 10px;
}

[data-surface="ai-visibility"] .answer-replay-button {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid #ced1d7;
  border-radius: 10px;
  background: #fff;
  color: var(--deep);
  font: inherit;
  font-size: 13px;
  font-weight: 660;
  cursor: pointer;
}

[data-surface="ai-visibility"] .answer-replay-button[hidden] {
  display: none;
}

[data-surface="ai-visibility"] .answer-replay-button:disabled {
  opacity: .55;
  cursor: progress;
}

[data-surface="ai-visibility"] .answer-replay-button .icon {
  width: 14px;
  height: 14px;
}

[data-surface="ai-visibility"] .aiv-answer {
  padding: 14px 16px;
  border: 1px solid #e5e6e9;
  border-radius: 4px 16px 16px 16px;
  background: #fff;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.65;
}

[data-surface="ai-visibility"] .answer-replay[data-replay="running"] .replay-word:not([data-shown]) {
  opacity: 0;
}

/* The highlight arrives with its first word, not before. */
[data-surface="ai-visibility"] .answer-replay[data-replay="running"] .aiv-mention:not(:has(.replay-word[data-shown])) {
  background: transparent;
}

[data-surface="ai-visibility"] .aiv-mention {
  padding: 1px 4px;
  border-radius: 5px;
  background: #c9d9f0;
  color: #00183b;
  font-weight: 720;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

[data-surface="ai-visibility"] .aiv-error {
  padding: 12px 14px;
  border-radius: 12px;
  background: #fdf5f0;
  color: #8a3b16;
  font-size: 13.5px;
}

[data-surface="ai-visibility"] .aiv-replay-meta {
  display: grid;
  gap: 8px;
  font-size: 13px;
}

[data-surface="ai-visibility"] .aiv-replay-meta div {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
}

[data-surface="ai-visibility"] .aiv-replay-meta dt {
  color: var(--muted);
  font-weight: 620;
}

[data-surface="ai-visibility"] .aiv-replay-meta dd {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

[data-surface="ai-visibility"] .aiv-named {
  padding: 1px 8px;
  border-radius: 999px;
  background: #eff0f3;
  font-size: 12.5px;
  font-weight: 620;
}

[data-surface="ai-visibility"] .aiv-named[data-you] {
  background: var(--green);
  color: #fff;
}

[data-surface="ai-visibility"] .aiv-citation {
  overflow: hidden;
  color: var(--deep);
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-surface="ai-visibility"] .aiv-fixture-note {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

[data-surface="ai-visibility"] .aiv-prompts ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

[data-surface="ai-visibility"] .aiv-prompts li {
  padding: 7px 12px;
  border-radius: 10px;
  background: var(--canvas);
  color: var(--lab-ink-soft);
  font-size: 13.5px;
}

@media (max-width: 960px) {
  [data-surface="ai-visibility"] .aiv-answers-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-surface="ai-visibility"] .aiv-runs {
    max-height: 320px;
  }
  [data-surface="ai-visibility"] .aiv-replay {
    grid-row: 1;
  }
}

@media (max-width: 1100px) {
  [data-surface="ai-visibility"] .aiv-headline {
    justify-items: start;
    text-align: left;
  }
}

@media (max-width: 640px) {
  [data-surface="ai-visibility"] .aiv-trend,
  [data-surface="ai-visibility"] .aiv-race,
  [data-surface="ai-visibility"] .aiv-answers,
  [data-surface="ai-visibility"] .aiv-prompts {
    padding: 18px 16px;
  }
  [data-surface="ai-visibility"] .aiv-chart {
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: 160px auto auto;
  }
  [data-surface="ai-visibility"] .aiv-chart-x span[data-odd] {
    visibility: hidden;
  }
  [data-surface="ai-visibility"] .aiv-brand {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  [data-surface="ai-visibility"] .aiv-brand-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  [data-surface="ai-visibility"] .aiv-replay {
    padding: 14px;
  }
  [data-surface="ai-visibility"] .aiv-prompt {
    max-width: 100%;
  }
}

/* The 90-day guarantee tracker (/app/<workspace>/guarantee). Owner: dashboard-labs.
   Rendered by crates/web/src/pages/app/guarantee/. Scoped under [data-surface="guarantee"]. */

[data-surface="guarantee"] .gtee-terms {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--deep);
  font-size: 13.5px;
  font-weight: 650;
}

[data-surface="guarantee"] .gtee-terms .icon {
  width: 15px;
  height: 15px;
}

/* Hero: "Day 42 of 90 · on track ✓" and the 90-day track. */

[data-surface="guarantee"] .gtee-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 10px;
  padding: 28px 30px 24px;
  border-radius: 22px;
  background: linear-gradient(135deg, #0b1e3b 0%, #002863 55%, #0a3d8a 100%);
  color: #fff;
  box-shadow: 0 24px 50px -32px #002863cc;
}

[data-surface="guarantee"] .gtee-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(#ffffff1f 1px, transparent 1.3px);
  background-size: 18px 18px;
  mask-image: radial-gradient(80% 100% at 100% 0%, #000 0%, transparent 70%);
}

[data-surface="guarantee"] .gtee-hero[data-verdict="at-risk"] {
  background: linear-gradient(135deg, #3b2a0b 0%, #7a4f05 55%, #a8700f 100%);
}

[data-surface="guarantee"] .gtee-hero[data-verdict="missed"],
[data-surface="guarantee"] .gtee-hero[data-verdict="void"] {
  background: linear-gradient(135deg, #202329 0%, #393d47 100%);
}

[data-surface="guarantee"] .gtee-site {
  font-size: 11.5px;
  font-weight: 760;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ffffffb3;
}

[data-surface="guarantee"] .gtee-day {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  font-size: clamp(30px, 4.4vw, 50px);
  font-weight: 790;
  line-height: 1.05;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}

[data-surface="guarantee"] .gtee-dot {
  color: #ffffff73;
}

[data-surface="guarantee"] .gtee-verdict {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #b8cff2;
}

[data-surface="guarantee"] [data-verdict="at-risk"] .gtee-verdict {
  color: #ffe1a3;
}

[data-surface="guarantee"] .gtee-verdict .icon {
  width: .72em;
  height: .72em;
}

[data-surface="guarantee"] .gtee-headline {
  max-width: 760px;
  color: #ffffffd9;
  font-size: 15px;
  line-height: 1.55;
}

[data-surface="guarantee"] .gtee-track {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

[data-surface="guarantee"] .gtee-track-bar {
  display: block;
  width: 100%;
  height: 12px;
}

[data-surface="guarantee"] .gtee-track-rail {
  fill: #ffffff26;
}

[data-surface="guarantee"] .gtee-track-fill {
  fill: #b8cff2;
}

[data-surface="guarantee"] [data-verdict="at-risk"] .gtee-track-fill {
  fill: #ffe1a3;
}

/* Check days sit at 30, 60 and 90 of 90 along the track. */
[data-surface="guarantee"] .gtee-checkpoints {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  text-align: right;
}

[data-surface="guarantee"] .gtee-checkpoints li {
  display: grid;
  justify-items: end;
  gap: 1px;
  font-size: 12.5px;
}

[data-surface="guarantee"] .gtee-mark {
  width: 2px;
  height: 14px;
  margin: -24px 0 6px;
  border-radius: 1px;
  background: #ffffff8c;
}

[data-surface="guarantee"] .gtee-checkpoints strong {
  font-weight: 720;
}

[data-surface="guarantee"] .gtee-checkpoints small {
  color: #ffffffa6;
}

[data-surface="guarantee"] .gtee-checkpoints [data-state="on-track"] small,
[data-surface="guarantee"] .gtee-checkpoints [data-state="met"] small {
  color: #b8f2d8;
  font-weight: 650;
}

[data-surface="guarantee"] .gtee-checkpoints [data-state="at-risk"] small {
  color: #ffe1a3;
  font-weight: 650;
}

[data-surface="guarantee"] .gtee-track-dates {
  display: flex;
  justify-content: space-between;
  color: #ffffff99;
  font-size: 12px;
}

[data-surface="guarantee"] .gtee-status-note {
  padding: 10px 14px;
  border-radius: 12px;
  background: #ffffff1a;
  font-size: 13.5px;
}

@media (prefers-reduced-motion: no-preference) {
  [data-surface="guarantee"] .gtee-track-fill,
  [data-surface="guarantee"] .gtee-metric-fill {
    transform-box: fill-box;
    transform-origin: left center;
    animation: gtee-grow 1.4s var(--motion-ease-out) .3s backwards;
  }
}

@keyframes gtee-grow {
  from {
    transform: scaleX(0);
  }
}

/* The three metrics */

[data-surface="guarantee"] .gtee-metrics {
  display: grid;
  gap: 12px;
}

[data-surface="guarantee"] .gtee-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

[data-surface="guarantee"] .gtee-metric {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--lab-shadow);
}

[data-surface="guarantee"] .gtee-metric[data-state="met"] {
  border-color: var(--success);
  box-shadow: 0 0 0 3px #00876521, var(--lab-shadow);
}

[data-surface="guarantee"] .gtee-metric[data-state="unmeasured"] {
  border-style: dashed;
  box-shadow: none;
  background: #fbfcfd;
}

[data-surface="guarantee"] .gtee-metric-name {
  display: grid;
  font-size: 13.5px;
  font-weight: 700;
}

[data-surface="guarantee"] .gtee-metric-name small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 560;
}

[data-surface="guarantee"] .gtee-metric-value {
  font-size: 32px;
  font-weight: 780;
  line-height: 1.1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

[data-surface="guarantee"] [data-state="unmeasured"] .gtee-metric-value {
  color: #8d9096;
  font-size: 22px;
  letter-spacing: -.02em;
}

[data-surface="guarantee"] .gtee-metric-range {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

[data-surface="guarantee"] .gtee-metric-bar {
  display: block;
  width: 100%;
  height: 10px;
  margin: 6px 0 2px;
  overflow: visible;
}

[data-surface="guarantee"] .gtee-metric-rail {
  fill: #eff0f3;
}

[data-surface="guarantee"] .gtee-metric-fill {
  fill: #9fb5d6;
}

[data-surface="guarantee"] [data-state="ahead"] .gtee-metric-fill,
[data-surface="guarantee"] [data-state="met"] .gtee-metric-fill {
  fill: var(--success);
}

[data-surface="guarantee"] [data-state="behind"] .gtee-metric-fill {
  fill: #e0a22e;
}

[data-surface="guarantee"] .gtee-metric-tick {
  stroke: var(--ink);
  stroke-width: 2;
}

[data-surface="guarantee"] .gtee-metric-progress {
  font-size: 12.5px;
  font-weight: 620;
  line-height: 1.45;
  color: var(--lab-ink-soft);
}

[data-surface="guarantee"] .gtee-evidence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--deep);
  font-size: 12.5px;
  font-weight: 660;
}

[data-surface="guarantee"] .gtee-evidence .icon {
  width: 12px;
  height: 12px;
  transition: transform .25s var(--motion-ease-out);
}

[data-surface="guarantee"] .gtee-evidence:hover .icon {
  transform: translateX(3px);
}

/* Diagnosis */

[data-surface="guarantee"] .gtee-diagnosis,
[data-surface="guarantee"] .gtee-checks,
[data-surface="guarantee"] .gtee-conditions {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--lab-card-radius);
  background: #fff;
}

[data-surface="guarantee"] .gtee-diagnosis h2,
[data-surface="guarantee"] .gtee-checks h2,
[data-surface="guarantee"] .gtee-conditions h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 720;
  letter-spacing: -.02em;
}

[data-surface="guarantee"] .gtee-diagnosis h2 .icon {
  width: 17px;
  height: 17px;
  color: var(--green);
}

[data-surface="guarantee"] .gtee-diagnosis > p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

[data-surface="guarantee"] .gtee-diagnosis ol {
  display: grid;
  margin-top: 12px;
}

[data-surface="guarantee"] .gtee-diagnosis li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
}

[data-surface="guarantee"] .gtee-diagnosis li + li {
  border-top: 1px solid #eff0f3;
}

[data-surface="guarantee"] .gtee-diagnosis strong {
  font-size: 14px;
  font-weight: 700;
}

[data-surface="guarantee"] .gtee-diagnosis li p {
  margin-top: 2px;
  color: var(--lab-ink-soft);
  font-size: 13.5px;
  line-height: 1.5;
}

[data-surface="guarantee"] .gtee-diagnosis .lab-button {
  min-height: 36px;
  padding: 8px 12px;
  font-size: 13px;
}

/* Checks and conditions */

[data-surface="guarantee"] .gtee-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

[data-surface="guarantee"] .gtee-empty {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

[data-surface="guarantee"] .gtee-checks ol {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

[data-surface="guarantee"] .gtee-checks li {
  padding: 12px 14px;
  border-left: 3px solid #9fb5d6;
  border-radius: 4px 12px 12px 4px;
  background: var(--canvas);
}

[data-surface="guarantee"] .gtee-checks li[data-tone="at-risk"] {
  border-left-color: #e0a22e;
}

[data-surface="guarantee"] .gtee-check-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 13.5px;
}

[data-surface="guarantee"] .gtee-check-head span {
  color: var(--deep);
  font-weight: 680;
}

[data-surface="guarantee"] [data-tone="at-risk"] .gtee-check-head span {
  color: #8a5a0a;
}

[data-surface="guarantee"] .gtee-check-head time {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
}

[data-surface="guarantee"] .gtee-check-text {
  margin-top: 4px;
  color: var(--lab-ink-soft);
  font-size: 13px;
  line-height: 1.55;
}

[data-surface="guarantee"] .gtee-conditions ul {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

[data-surface="guarantee"] .gtee-conditions li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

[data-surface="guarantee"] .gtee-conditions li > .icon {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  padding: 3px;
  border-radius: 50%;
  background: #e3eaf5;
  color: var(--deep);
}

[data-surface="guarantee"] .gtee-conditions [data-state="broken"] > .icon {
  background: #fdecea;
  color: #a3361f;
}

[data-surface="guarantee"] .gtee-conditions [data-state="pending"] > .icon {
  background: #fdf3e2;
  color: #94620b;
}

[data-surface="guarantee"] .gtee-conditions strong {
  display: block;
  font-size: 13.5px;
  font-weight: 680;
}

[data-surface="guarantee"] .gtee-conditions small {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

[data-surface="guarantee"] .gtee-remedy {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #eff0f3;
  color: var(--lab-ink-soft);
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 960px) {
  [data-surface="guarantee"] .gtee-metric-grid,
  [data-surface="guarantee"] .gtee-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  [data-surface="guarantee"] .gtee-hero {
    padding: 22px 18px 18px;
    border-radius: 18px;
  }
  [data-surface="guarantee"] .gtee-diagnosis,
  [data-surface="guarantee"] .gtee-checks,
  [data-surface="guarantee"] .gtee-conditions {
    padding: 18px 16px;
  }
  [data-surface="guarantee"] .gtee-diagnosis li {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  [data-surface="guarantee"] .gtee-diagnosis .lab-button {
    justify-self: start;
  }
  [data-surface="guarantee"] .gtee-checkpoints li {
    font-size: 11.5px;
  }
}

/* Monday briefing (/app/<workspace>/briefing). Owner: dashboard-core.
   Rendered by crates/web/src/pages/app/briefing.rs, styled like a well-set letter.
   Scoped under [data-surface="briefing"]. */

[data-surface="briefing"] .briefing-sent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

[data-surface="briefing"] .briefing-sent .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--green);
}

[data-surface="briefing"] .briefing {
  display: grid;
  gap: 16px;
  max-width: 980px;
}

[data-surface="briefing"] .briefing-section {
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
}

[data-surface="briefing"] .briefing-section[data-kind="needs-you"] {
  border-color: #f1ddb0;
  background: linear-gradient(140deg, #fffaf0, #fff 60%);
}

[data-surface="briefing"] .briefing-section h2 {
  font-size: 18px;
  font-weight: 730;
  letter-spacing: -.025em;
}

[data-surface="briefing"] .briefing-none {
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
}

[data-surface="briefing"] .briefing-numbers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

[data-surface="briefing"] .briefing-number {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 15px;
  background: #f7f7f8;
}

[data-surface="briefing"] .briefing-number-label {
  font-size: 12.5px;
  font-weight: 680;
  color: #50545f;
}

[data-surface="briefing"] .briefing-number-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
}

[data-surface="briefing"] .briefing-number-value strong {
  font-size: 28px;
  font-weight: 780;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}

[data-surface="briefing"] .briefing-number-value span {
  font-size: 13px;
  font-weight: 700;
  color: var(--pill-ink);
  font-variant-numeric: tabular-nums;
}

[data-surface="briefing"] .briefing-number-was {
  font-size: 12px;
  color: var(--muted);
}

[data-surface="briefing"] .briefing-number .dash-evidence {
  margin-top: 4px;
  font-size: 12.5px;
}

[data-surface="briefing"] .briefing-items,
[data-surface="briefing"] .briefing-experiments {
  display: grid;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

[data-surface="briefing"] .briefing-items li,
[data-surface="briefing"] .briefing-experiments li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 16px;
  padding: 12px 0;
  border-top: 1px solid #eff0f3;
}

[data-surface="briefing"] .briefing-experiments li {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

[data-surface="briefing"] .briefing-items li > span,
[data-surface="briefing"] .briefing-experiments li > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

[data-surface="briefing"] .briefing-items strong,
[data-surface="briefing"] .briefing-experiments strong {
  font-size: 14.5px;
  letter-spacing: -.01em;
}

[data-surface="briefing"] .briefing-items small,
[data-surface="briefing"] .briefing-experiments small {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 1100px) {
  [data-surface="briefing"] .briefing-numbers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  [data-surface="briefing"] .briefing-section {
    padding: 18px 16px;
  }
  [data-surface="briefing"] .briefing-items li,
  [data-surface="briefing"] .briefing-experiments li {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-surface="briefing"] .briefing-numbers {
    gap: 8px;
  }
  [data-surface="briefing"] .briefing-number {
    padding: 12px;
  }
  [data-surface="briefing"] .briefing-number-value strong {
    font-size: 24px;
  }
}

/* Development tools only: "Write this week's briefing now". */
[data-surface="briefing"] .briefing-dev {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  padding: 14px 18px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

[data-surface="briefing"] .briefing-dev p {
  margin: 0;
  flex: 1 1 280px;
}

[data-surface="briefing"] .briefing-dev strong {
  margin-right: 6px;
  color: var(--ink);
}

/* Right now: the live founder steps above the stored week (cards-ux; the list is styled
   in cards.css). */
[data-surface="briefing"] .briefing-now {
  max-width: 980px;
  margin: 18px 0 16px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
}

[data-surface="briefing"] .briefing-now-kicker {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dash-attention-ink);
}

@media (max-width: 560px) {
  [data-surface="briefing"] .briefing-now {
    padding: 16px 14px;
  }
}

/* The main keyword's week (migration 0231). */

[data-surface="briefing"] .briefing-keyword {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

[data-surface="briefing"] .briefing-keyword p {
  margin: 0;
}

[data-surface="briefing"] .briefing-keyword-name {
  font-size: 18px;
  font-weight: 740;
  overflow-wrap: anywhere;
}

[data-surface="briefing"] .briefing-keyword-position a {
  color: var(--ink);
  font-size: 22px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

[data-surface="briefing"] .briefing-keyword-source,
[data-surface="briefing"] .briefing-keyword-coverage {
  color: var(--muted);
  font-size: 13.5px;
}

/* Settings (/app/<workspace>/settings/<section>). Owner: dashboard-core.
   Rendered by crates/web/src/pages/app/settings.rs: one section per page beside the
   settings sub-navigation (ui.css): general, brand, domains (DNS wizard), operating mode,
   billing, connections, notifications, pause. Scoped under [data-surface="settings"]. */

[data-surface="settings"] .settings-readonly {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 13px;
  background: #eff0f3;
  font-size: 14px;
  color: #393d47;
}

[data-surface="settings"] .settings-readonly .icon {
  width: 18px;
  height: 18px;
}

[data-surface="settings"] .settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

[data-surface="settings"] .settings-card {
  scroll-margin-top: 90px;
  padding: 22px 24px 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
}

[data-surface="settings"] .settings-card > header {
  max-width: 760px;
  margin-bottom: 16px;
}

[data-surface="settings"] .settings-card h2 {
  font-size: 18px;
  font-weight: 730;
  letter-spacing: -.025em;
}

[data-surface="settings"] .settings-card > header p {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

[data-surface="settings"] code {
  padding: 2px 6px;
  border-radius: 6px;
  background: #f2f3f5;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Forms */

[data-surface="settings"] fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

[data-surface="settings"] .settings-form fieldset {
  display: grid;
  gap: 6px;
}

[data-surface="settings"] label,
[data-surface="settings"] .settings-label {
  font-size: 13px;
  font-weight: 680;
  color: #31353f;
}

[data-surface="settings"] .settings-label {
  margin-top: 8px;
}

[data-surface="settings"] input:not([type="radio"]):not([type="color"]),
[data-surface="settings"] select {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #d6d8de;
  border-radius: 11px;
  background: #fff;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
}

[data-surface="settings"] input[type="color"] {
  width: 100%;
  height: 42px;
  padding: 4px;
  border: 1px solid #d6d8de;
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
}

[data-surface="settings"] input:focus,
[data-surface="settings"] select:focus {
  outline: 2px solid #124ea766;
  outline-offset: 1px;
  border-color: var(--green);
}

[data-surface="settings"] fieldset[disabled] input,
[data-surface="settings"] fieldset[disabled] select {
  background: #f7f7f8;
  color: #70747d;
}

[data-surface="settings"] .settings-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

[data-surface="settings"] .settings-row > span {
  display: grid;
  gap: 6px;
  min-width: 0;
}

[data-surface="settings"] .settings-nav {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr);
}

[data-surface="settings"] .settings-form .dash-button {
  justify-self: start;
  margin-top: 10px;
}

/* Brand */

[data-surface="settings"] .settings-brand {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, .9fr);
  gap: 28px;
  align-items: start;
}

[data-surface="settings"] .settings-preview {
  margin: 0;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(160deg, #f0f1f4, #f8f8f9);
}

/* Fix batch G: the wide logo where there is room for it, a header lockup. */
[data-surface="settings"] .settings-lockup {
  grid-column: 1 / -1;
  margin: 0;
}

[data-surface="settings"] .settings-lockup-bar {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

[data-surface="settings"] .settings-lockup-bar img {
  display: block;
  max-width: min(260px, 100%);
  max-height: 36px;
  object-fit: contain;
}

[data-surface="settings"] .settings-lockup figcaption {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12.5px;
}

/* Brand Studio's icon and logo, with "Capture again" in place (style A). */
[data-surface="settings"] .brand-images {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

[data-surface="settings"] .brand-images header h3 {
  margin: 0;
  font-size: 14.5px;
  letter-spacing: -.01em;
}

[data-surface="settings"] .brand-images header p {
  margin: 3px 0 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

[data-surface="settings"] .brand-images-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

[data-surface="settings"] .brand-tile {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
}

[data-surface="settings"] .brand-tile figcaption {
  color: var(--muted);
  font-size: 12px;
}

[data-surface="settings"] .brand-tile-square,
[data-surface="settings"] .brand-tile-wide {
  display: grid;
  place-items: center;
  height: 64px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--canvas);
  color: var(--faint);
  transition: opacity .3s var(--motion-ease-out);
}

[data-surface="settings"] .brand-tile-square {
  width: 64px;
}

[data-surface="settings"] .brand-tile-square img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-surface="settings"] .brand-tile-square img[data-fit="fitted"] {
  padding: 8px;
  object-fit: contain;
}

[data-surface="settings"] .brand-tile-wide {
  width: min(240px, 100%);
  padding: 10px 14px;
  font-size: 12.5px;
}

[data-surface="settings"] .brand-tile-wide img {
  display: block;
  max-width: 100%;
  max-height: 40px;
  object-fit: contain;
}

[data-surface="settings"] .brand-tile .icon {
  width: 20px;
  height: 20px;
}

[data-surface="settings"] .brand-images[data-busy] .brand-tile-square,
[data-surface="settings"] .brand-images[data-busy] .brand-tile-wide {
  opacity: .55;
}

[data-surface="settings"] .brand-capture-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 13px;
}

[data-surface="settings"] .brand-capture-steps {
  display: inline-flex;
  gap: 4px;
}

[data-surface="settings"] .brand-capture-steps span {
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}

[data-surface="settings"] .brand-capture-steps span[data-done] {
  background: var(--brand);
}

[data-surface="settings"] .brand-capture-steps span:not([data-done]):first-of-type,
[data-surface="settings"] .brand-capture-steps span[data-done] + span:not([data-done]) {
  background: linear-gradient(90deg, var(--sky) 0 40%, var(--tint-blue) 40% 100%);
  background-size: 200% 100%;
  animation: brand-capture-sweep 1.2s linear infinite;
}

@keyframes brand-capture-sweep {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-surface="settings"] .brand-capture-steps span {
    animation: none !important;
  }
}

[data-surface="settings"] .brand-capture-status {
  margin: 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

[data-surface="settings"] .brand-capture-form {
  margin: 0;
}

[data-surface="settings"] .settings-preview svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 20px 40px -26px #101a2966;
}

[data-surface="settings"] .settings-preview figcaption {
  margin-top: 10px;
  font-size: 12px;
  text-align: center;
  color: var(--muted);
}

/* Domains */

[data-surface="settings"] .settings-domains {
  display: grid;
  /* A long hostname or token never widens the card past the screen. */
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

[data-surface="settings"] .settings-domain {
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 16px 18px;
  border: 1px solid #e8e9ec;
  border-radius: 16px;
  background: #fbfcfc;
}

[data-surface="settings"] .settings-domain-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

[data-surface="settings"] .settings-domain-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
  overflow-wrap: anywhere;
}

[data-surface="settings"] .settings-domain-name .icon {
  width: 18px;
  height: 18px;
  color: var(--green);
}

[data-surface="settings"] .settings-domain-name strong {
  font-size: 15px;
  overflow-wrap: anywhere;
}

[data-surface="settings"] .settings-domain-name small {
  font-size: 12px;
  color: var(--muted);
}

[data-surface="settings"] .settings-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

[data-surface="settings"] .settings-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 11px;
  background: #eff0f3;
  font-size: 12.5px;
  font-weight: 650;
  color: #70747d;
}

[data-surface="settings"] .settings-steps li span {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  font-size: 12px;
  font-weight: 750;
}

[data-surface="settings"] .settings-steps li[data-reached] {
  background: var(--dash-positive-bg);
  color: var(--dash-positive-ink);
}

[data-surface="settings"] .settings-steps li[data-reached] span {
  background: var(--green);
  color: #fff;
}

[data-surface="settings"] .settings-dns {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
  /* Long hostnames and tokens wrap inside the card on phones. */
  table-layout: fixed;
  overflow-wrap: anywhere;
  font-size: 13px;
}

[data-surface="settings"] .settings-dns caption {
  padding-bottom: 8px;
  font-size: 12.5px;
  font-weight: 680;
  text-align: left;
  color: #393d47;
}

[data-surface="settings"] .settings-dns th {
  padding: 8px 10px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .1em;
  text-align: left;
  text-transform: uppercase;
  color: #7f838c;
}

[data-surface="settings"] .settings-dns td {
  padding: 9px 10px;
  border-bottom: 1px solid #eff0f3;
  vertical-align: top;
}

[data-surface="settings"] .settings-domain-failure {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 11px;
  background: #fdf3f3;
  font-size: 13px;
  color: #8f1d14;
}

[data-surface="settings"] .settings-domain-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 12px;
}

[data-surface="settings"] .settings-domain-foot small {
  font-size: 12px;
  color: var(--muted);
}

[data-surface="settings"] .settings-domain-foot form:first-of-type {
  margin-left: auto;
}

[data-surface="settings"] .settings-add-domain fieldset {
  display: grid;
  gap: 6px;
}

[data-surface="settings"] .settings-inline {
  display: flex;
  gap: 8px;
}

[data-surface="settings"] .settings-add-domain small {
  font-size: 12.5px;
  color: var(--muted);
}

/* Billing */

[data-surface="settings"] .settings-plan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(120deg, #eef2f9, #f8f8f9);
}

[data-surface="settings"] .settings-plan-name {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

[data-surface="settings"] .settings-plan-name strong {
  font-size: 24px;
  font-weight: 780;
  letter-spacing: -.04em;
}

[data-surface="settings"] .settings-plan-name span {
  font-size: 14px;
  font-weight: 650;
  color: #50545f;
}

[data-surface="settings"] .settings-plan-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 6px;
}

[data-surface="settings"] .settings-plan-meta small {
  font-size: 12.5px;
  color: var(--muted);
}

[data-surface="settings"] .settings-note {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

[data-surface="settings"] .settings-usage {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

[data-surface="settings"] .settings-usage li {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 14px;
  font-size: 13.5px;
}

[data-surface="settings"] .settings-usage small {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--muted);
}

[data-surface="settings"] .settings-usage-bar {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #eeeff2;
}

[data-surface="settings"] .settings-usage-bar span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--green);
  transform-origin: left center;
  transform: scaleX(0);
}

[data-surface="settings"] .settings-usage li[data-over] .settings-usage-bar span {
  background: #e08a1e;
}

[data-surface="settings"] .settings-usage-bar span[data-level="1"] { transform: scaleX(.1); }
[data-surface="settings"] .settings-usage-bar span[data-level="2"] { transform: scaleX(.2); }
[data-surface="settings"] .settings-usage-bar span[data-level="3"] { transform: scaleX(.3); }
[data-surface="settings"] .settings-usage-bar span[data-level="4"] { transform: scaleX(.4); }
[data-surface="settings"] .settings-usage-bar span[data-level="5"] { transform: scaleX(.5); }
[data-surface="settings"] .settings-usage-bar span[data-level="6"] { transform: scaleX(.6); }
[data-surface="settings"] .settings-usage-bar span[data-level="7"] { transform: scaleX(.7); }
[data-surface="settings"] .settings-usage-bar span[data-level="8"] { transform: scaleX(.8); }
[data-surface="settings"] .settings-usage-bar span[data-level="9"] { transform: scaleX(.9); }
[data-surface="settings"] .settings-usage-bar span[data-level="10"] { transform: scaleX(1); }

[data-surface="settings"] .settings-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

[data-surface="settings"] .settings-features li {
  display: flex;
  align-items: center;
  gap: 6px;
}

[data-surface="settings"] .settings-features .icon {
  width: 15px;
  height: 15px;
  color: var(--green);
}

[data-surface="settings"] .settings-features li[data-included="false"] {
  color: #8e9198;
}

[data-surface="settings"] .settings-features li[data-included="false"] .icon {
  color: #b5b8bf;
}

/* Operating mode */

[data-surface="settings"] .settings-modes fieldset {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

[data-surface="settings"] .settings-mode {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 15px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}

[data-surface="settings"] .settings-mode:hover {
  border-color: #c6c9d0;
}

[data-surface="settings"] .settings-mode:has(input:checked) {
  border-color: var(--green);
  background: #f3f6fa;
  box-shadow: 0 0 0 3px #124ea724;
}

[data-surface="settings"] .settings-mode input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--green);
}

[data-surface="settings"] .settings-mode > span {
  display: grid;
  gap: 4px;
}

[data-surface="settings"] .settings-mode strong {
  font-size: 15px;
}

[data-surface="settings"] .settings-mode span span {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
  color: #393d47;
}

[data-surface="settings"] .settings-mode small {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
}

[data-surface="settings"] .settings-modes .dash-button {
  grid-column: 1 / -1;
  justify-self: start;
}

/* Pause */

[data-surface="settings"] .settings-pause {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

[data-surface="settings"] .settings-pause > header {
  margin-bottom: 0;
}

[data-surface="settings"] .settings-pause[data-paused] {
  border-color: #dee0e5;
  background: repeating-linear-gradient(135deg, #fbfcfc 0 14px, #f5f6f7 14px 28px);
}

@media (max-width: 1100px) {
  [data-surface="settings"] .settings-brand {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-surface="settings"] .settings-preview {
    max-width: 420px;
  }
}

@media (max-width: 860px) {
  [data-surface="settings"] .settings-modes fieldset {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-surface="settings"] .settings-usage li {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  [data-surface="settings"] .settings-usage-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 600px) {
  [data-surface="settings"] .settings-card {
    padding: 18px 16px 20px;
  }
  [data-surface="settings"] .settings-row,
  [data-surface="settings"] .settings-nav,
  [data-surface="settings"] .settings-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-surface="settings"] .settings-inline {
    flex-direction: column;
  }
  [data-surface="settings"] .settings-dns,
  [data-surface="settings"] .settings-dns tbody,
  [data-surface="settings"] .settings-dns tr,
  [data-surface="settings"] .settings-dns td {
    display: block;
  }
  [data-surface="settings"] .settings-dns thead {
    display: none;
  }
  [data-surface="settings"] .settings-dns tr {
    padding: 8px 0;
    border-bottom: 1px solid #eff0f3;
  }
  [data-surface="settings"] .settings-dns td {
    padding: 2px 0;
    border: 0;
  }
  [data-surface="settings"] .settings-domain-foot form:first-of-type {
    margin-left: 0;
  }
}

/* "Publish clean articles on schedule unless I object" (Review everything). */
[data-surface="settings"] .settings-check {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 4px 0 12px;
  font-size: 14px;
  cursor: pointer;
}

[data-surface="settings"] .settings-check input {
  flex-shrink: 0;
  margin-top: 3px;
}

[data-surface="settings"] .settings-check span {
  display: grid;
  gap: 2px;
  min-width: 0;
  overflow-wrap: anywhere;
}

[data-surface="settings"] .settings-check small {
  color: var(--muted);
}

/* The frame: the settings column beside the section (fix batch §10). */

[data-surface="settings"] .settings-frame {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

[data-surface="settings"] .settings-content {
  min-width: 0;
}

[data-surface="settings"] .settings-content .dash-head {
  margin-bottom: 20px;
}

[data-surface="settings"] .settings-content .dash-head h1 {
  font-size: clamp(28px, 3vw, 38px);
}

@media (max-width: 1100px) {
  [data-surface="settings"] .settings-frame {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

/* General: the workspace at a glance. */

[data-surface="settings"] .settings-glance {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="settings"] .settings-glance li + li {
  border-top: 1px solid #eff0f3;
}

[data-surface="settings"] .settings-glance a {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 18px;
  grid-template-areas: "label value chevron" "label note chevron";
  align-items: center;
  gap: 2px 16px;
  padding: 14px 6px;
  border-radius: 10px;
  transition: background-color .15s;
}

[data-surface="settings"] .settings-glance a:hover {
  background: #f6f7f8;
}

[data-surface="settings"] .settings-glance a:focus-visible {
  outline: 2px solid var(--green);
}

[data-surface="settings"] .settings-glance-label {
  grid-area: label;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

[data-surface="settings"] .settings-glance strong {
  grid-area: value;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 14.5px;
}

[data-surface="settings"] .settings-glance small {
  grid-area: note;
  color: #7f838c;
  font-size: 12.5px;
}

[data-surface="settings"] .settings-glance .icon {
  grid-area: chevron;
  width: 16px;
  height: 16px;
  color: #a7abb3;
}

@media (max-width: 560px) {
  [data-surface="settings"] .settings-glance a {
    grid-template-columns: minmax(0, 1fr) 18px;
    grid-template-areas: "label chevron" "value chevron" "note chevron";
  }
}

/* Connections and notifications */

[data-surface="settings"] .settings-connections,
[data-surface="settings"] .settings-emails {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="settings"] .settings-connections li,
[data-surface="settings"] .settings-emails li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 2px;
}

[data-surface="settings"] .settings-connections li + li,
[data-surface="settings"] .settings-emails li + li {
  border-top: 1px solid #eff0f3;
}

[data-surface="settings"] .settings-connections li > div,
[data-surface="settings"] .settings-emails li > div {
  flex: 1;
  min-width: 0;
}

[data-surface="settings"] .settings-connections strong,
[data-surface="settings"] .settings-emails strong {
  font-size: 14.5px;
}

[data-surface="settings"] .settings-connections p,
[data-surface="settings"] .settings-emails p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

[data-surface="settings"] .settings-emails .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--green);
}

[data-surface="settings"] .settings-note {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13.5px;
}

[data-surface="settings"] .settings-card-head {
  margin-bottom: 10px;
}

[data-surface="settings"] .settings-card-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

/* The research allowance (the money layer): a quiet meter in things, never dollars. */
[data-surface="settings"] .research {
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
}

[data-surface="settings"] .research-head h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: -.01em;
}

[data-surface="settings"] .research-head p {
  margin: 4px 0 0;
  max-width: 62ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

[data-surface="settings"] .research-meter {
  margin: 14px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--canvas);
}

[data-surface="settings"] .research-site {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

[data-surface="settings"] .research-left {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0;
  font-size: 14px;
  color: var(--ink);
}

[data-surface="settings"] .research-count strong {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

[data-surface="settings"] .research-dot,
[data-surface="settings"] .research-suffix {
  color: var(--muted);
}

[data-surface="settings"] .research-bar {
  position: relative;
  display: block;
  height: 4px;
  margin: 12px 0 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8e9ec;
}

[data-surface="settings"] .research-bar span {
  --left: 0;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--green);
  transform-origin: left center;
  transform: scaleX(var(--left));
  animation: research-fill 1.1s var(--motion-ease-out) both;
}

[data-surface="settings"] .research-meter[data-waiting] .research-bar span {
  background: #c9822b;
}

@keyframes research-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(var(--left)); }
}

[data-surface="settings"] .research-bar span[data-level="0"] { --left: 0; }
[data-surface="settings"] .research-bar span[data-level="1"] { --left: 0.05; }
[data-surface="settings"] .research-bar span[data-level="2"] { --left: 0.1; }
[data-surface="settings"] .research-bar span[data-level="3"] { --left: 0.15; }
[data-surface="settings"] .research-bar span[data-level="4"] { --left: 0.2; }
[data-surface="settings"] .research-bar span[data-level="5"] { --left: 0.25; }
[data-surface="settings"] .research-bar span[data-level="6"] { --left: 0.3; }
[data-surface="settings"] .research-bar span[data-level="7"] { --left: 0.35; }
[data-surface="settings"] .research-bar span[data-level="8"] { --left: 0.4; }
[data-surface="settings"] .research-bar span[data-level="9"] { --left: 0.45; }
[data-surface="settings"] .research-bar span[data-level="10"] { --left: 0.5; }
[data-surface="settings"] .research-bar span[data-level="11"] { --left: 0.55; }
[data-surface="settings"] .research-bar span[data-level="12"] { --left: 0.6; }
[data-surface="settings"] .research-bar span[data-level="13"] { --left: 0.65; }
[data-surface="settings"] .research-bar span[data-level="14"] { --left: 0.7; }
[data-surface="settings"] .research-bar span[data-level="15"] { --left: 0.75; }
[data-surface="settings"] .research-bar span[data-level="16"] { --left: 0.8; }
[data-surface="settings"] .research-bar span[data-level="17"] { --left: 0.85; }
[data-surface="settings"] .research-bar span[data-level="18"] { --left: 0.9; }
[data-surface="settings"] .research-bar span[data-level="19"] { --left: 0.95; }
[data-surface="settings"] .research-bar span[data-level="20"] { --left: 1; }

[data-surface="settings"] .research-status,
[data-surface="settings"] .research-used,
[data-surface="settings"] .research-credits {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

[data-surface="settings"] .research-status svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--green);
}

[data-surface="settings"] .research-meter[data-waiting] .research-status svg {
  color: #c9822b;
}

[data-surface="settings"] .research-used,
[data-surface="settings"] .research-credits {
  margin-top: 4px;
}

[data-surface="settings"] .research-packs {
  margin: 16px 0 0;
}

[data-surface="settings"] .research-packs h4 {
  margin: 0;
  font-size: 13.5px;
}

[data-surface="settings"] .research-packs-note {
  margin: 4px 0 10px;
  max-width: 64ch;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

[data-surface="settings"] .research-packs ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="settings"] .research-packs li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

[data-surface="settings"] .research-packs li div {
  display: grid;
  gap: 2px;
  font-size: 13px;
}

[data-surface="settings"] .research-packs li span {
  color: var(--muted);
  font-size: 12.5px;
}

[data-surface="settings"] .research-packs form {
  margin: 0;
}

[data-surface="settings"] .research-pending {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

[data-surface="settings"] .research-pending svg {
  width: 14px;
  height: 14px;
}

/* Add-ons (the X posting add-on): one row per add-on, its terms in posts, never X's
   dollar costs. */
[data-surface="settings"] .addons {
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
}

[data-surface="settings"] .addon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 14px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

[data-surface="settings"] .addon-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
}

[data-surface="settings"] .addon-mark .np-mark {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

[data-surface="settings"] .addon-text {
  display: grid;
  flex: 1 1 260px;
  gap: 3px;
  min-width: 0;
}

[data-surface="settings"] .addon-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
  font-size: 14px;
}

[data-surface="settings"] .addon-name > span:not(.addon-state) {
  color: var(--muted);
  font-size: 13px;
}

[data-surface="settings"] .addon-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--success-ink);
  font-size: 12.5px;
  font-weight: 650;
}

[data-surface="settings"] .addon-state .icon {
  width: 13px;
  height: 13px;
}

[data-surface="settings"] .addon-detail,
[data-surface="settings"] .addon-note {
  margin: 0;
  max-width: 62ch;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

[data-surface="settings"] .addon-note {
  color: var(--attention-ink);
}

[data-surface="settings"] .addon-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

[data-surface="settings"] .addon-actions form {
  margin: 0;
}

/* "Regenerate brief" says what it uses. */
.brief-research {
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  [data-surface="settings"] .research-bar span {
    animation: none;
  }
}

@media (max-width: 600px) {
  [data-surface="settings"] .research-meter {
    padding: 12px;
  }
  [data-surface="settings"] .research-packs li {
    align-items: stretch;
  }
  [data-surface="settings"] .research-packs form,
  [data-surface="settings"] .research-packs button {
    width: 100%;
  }
  [data-surface="settings"] .addon-actions,
  [data-surface="settings"] .addon-actions form,
  [data-surface="settings"] .addon-actions .dash-button {
    width: 100%;
  }
}

/* Export & delete, Your account and the deletion receipt (0241).
   Rendered by crates/web/src/pages/app/data_rights.rs (inside Settings, scoped under
   [data-surface="settings"]) and crates/web/src/pages/account/data_rights.rs (the
   receipt, inside the account frame; its width is set in account.css). Style A tokens
   only; the danger colours are the negative tokens. */

/* Cards */

[data-surface="settings"] .dr-card > header {
  max-width: 720px;
}

[data-surface="settings"] .dr-danger {
  border-color: var(--negative-line);
}

[data-surface="settings"] .dr-danger h2 {
  color: var(--negative-ink);
}

[data-surface="settings"] .dr-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

[data-surface="settings"] .dr-inline-form {
  display: contents;
}

[data-surface="settings"] .dr-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

[data-surface="settings"] .dr-meta {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

[data-surface="settings"] .dr-note .icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

[data-surface="settings"] .dr-note[data-tone="attention"] {
  padding: 10px 12px;
  border: 1px solid var(--attention-line);
  border-radius: 11px;
  background: var(--attention-tint);
  color: var(--attention-ink);
}

[data-surface="settings"] .dr-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 650;
  color: var(--brand);
}

[data-surface="settings"] .dr-link:hover {
  color: var(--sky);
}

[data-surface="settings"] .dr-link .icon {
  width: 14px;
  height: 14px;
}

/* A copy being prepared, and ready */

[data-surface="settings"] .dr-preparing {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--tint-blue);
  animation: dr-arrive .5s var(--motion-ease-out) both;
}

[data-surface="settings"] .dr-preparing div {
  display: grid;
  gap: 2px;
  font-size: 14px;
  color: var(--ink);
}

[data-surface="settings"] .dr-preparing span:not(.dr-spinner) {
  color: var(--muted);
  font-size: 13.5px;
}

[data-surface="settings"] .dr-spinner {
  flex: none;
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(0, 66, 150, .18);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: dr-spin .9s linear infinite;
}

[data-surface="settings"] .dr-ready {
  display: grid;
  justify-items: start;
  gap: 4px;
  animation: dr-arrive .6s var(--motion-ease-out) both;
}

/* What will be deleted */

[data-surface="settings"] .dr-goes {
  display: grid;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

[data-surface="settings"] .dr-goes li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
}

[data-surface="settings"] .dr-goes li > span:last-child {
  display: grid;
  gap: 1px;
  min-width: 0;
}

[data-surface="settings"] .dr-goes strong {
  font-weight: 650;
  color: var(--ink);
  overflow-wrap: anywhere;
}

[data-surface="settings"] .dr-goes li > span:last-child > span {
  color: var(--muted);
  font-size: 13.5px;
}

[data-surface="settings"] .dr-goes-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--mint);
  color: var(--ink);
}

[data-surface="settings"] .dr-danger .dr-goes-icon,
[data-surface="settings"] .dr-confirm .dr-goes-icon {
  background: var(--negative-tint);
  color: var(--negative-ink);
}

[data-surface="settings"] .dr-goes-icon .icon {
  width: 15px;
  height: 15px;
}

/* The confirmation */

[data-surface="settings"] .dr-confirm h2 {
  margin-bottom: 12px;
}

[data-surface="settings"] .dr-block {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

[data-surface="settings"] .dr-block h3 {
  margin-bottom: 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}

[data-surface="settings"] .dr-block > p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

[data-surface="settings"] .dr-plain {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.55;
  color: #393d47;
}

[data-surface="settings"] .dr-dns-list {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

[data-surface="settings"] .dr-dns-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--canvas);
  font-size: 13.5px;
}

[data-surface="settings"] .dr-confirm-form {
  display: grid;
  gap: 4px;
  margin-top: 24px;
  padding: 18px;
  border: 1px solid var(--negative-line);
  border-radius: 16px;
  background: var(--negative-tint);
}

[data-surface="settings"] .dr-field {
  display: grid;
  gap: 6px;
  max-width: 420px;
}

[data-surface="settings"] .dr-expected {
  padding: 1px 6px;
  border-radius: 6px;
  background: #fff;
  font-weight: 750;
  color: var(--ink);
}

[data-surface="settings"] .dr-hint {
  font-size: 12.5px;
  color: var(--muted);
}

[data-surface="settings"] .dr-final {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--negative-ink);
}

[data-surface="settings"] .dr-final .icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

/* Transfer ownership */

[data-surface="settings"] .dr-transfer-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-surface="settings"] .dr-transfer-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--canvas);
}

[data-surface="settings"] .dr-transfer-form .lb {
  flex: 1 1 260px;
  min-width: 0;
}

/* The receipt (account frame) */

.dr-receipt h1 {
  overflow-wrap: anywhere;
}

.dr-receipt .dr-receipt-icon[data-tone="working"] {
  background: var(--tint-blue);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px #c9d8f0;
}

.dr-receipt .dr-receipt-icon[data-tone="done"] {
  background: var(--success-tint);
  color: var(--success-ink);
  box-shadow: inset 0 0 0 1px #bfe6d4;
}

.dr-receipt .dr-reference {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--muted);
}

.dr-receipt .dr-reference code {
  padding: 2px 8px;
  border-radius: 7px;
  background: var(--mint);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 650;
  color: var(--ink);
}

.dr-receipt .dr-steps {
  display: grid;
  gap: 0;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.dr-receipt .dr-steps li {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 0 0 16px;
}

.dr-receipt .dr-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 2px;
  left: 10px;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
}

.dr-receipt .dr-steps li > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-size: 14px;
  line-height: 1.5;
}

.dr-receipt .dr-steps strong {
  font-weight: 650;
  color: var(--ink);
}

.dr-receipt .dr-steps li > div > span {
  color: var(--muted);
  font-size: 13.5px;
}

.dr-receipt .dr-step-mark {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 2px solid #d6d8de;
  border-radius: 50%;
  background: #fff;
  transition: background-color .4s, border-color .4s, transform .4s var(--motion-ease-out);
}

.dr-receipt [data-status="waiting"] strong {
  color: var(--muted);
}

.dr-receipt [data-status="running"] .dr-step-mark {
  border-color: rgba(0, 66, 150, .2);
  border-top-color: var(--brand);
  animation: dr-spin .9s linear infinite;
}

.dr-receipt [data-status="done"] .dr-step-mark {
  border-color: var(--success);
  background: var(--success);
}

.dr-receipt [data-status="done"] .dr-step-mark::after,
.dr-receipt [data-status="skipped"] .dr-step-mark::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 6px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.dr-receipt [data-status="skipped"] .dr-step-mark {
  border-color: #c3c7cf;
  background: #c3c7cf;
}

.dr-receipt [data-status="manual"] .dr-step-mark,
.dr-receipt [data-status="left"] .dr-step-mark {
  border-color: var(--sky);
  background: var(--tint-blue);
}

.dr-receipt [data-status="failed"] .dr-step-mark {
  border-color: var(--coral);
  background: var(--tint-pink);
}

.dr-receipt [data-changed] .dr-step-mark {
  animation: dr-pop .6s var(--motion-ease-out);
}

.dr-receipt [data-changed] > div {
  animation: dr-arrive .5s var(--motion-ease-out);
}

.dr-receipt .dr-yours,
.dr-receipt .dr-stays {
  margin-top: 14px;
  padding: 18px;
  border-radius: 16px;
  animation: dr-arrive .6s var(--motion-ease-out) both;
}

.dr-receipt .dr-yours {
  border: 1px solid #c9d8f0;
  background: var(--tint-blue);
}

.dr-receipt .dr-stays {
  border: 1px solid var(--line);
  background: var(--canvas);
}

.dr-receipt .dr-yours h2,
.dr-receipt .dr-stays h2 {
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 720;
  color: var(--ink);
}

.dr-receipt .dr-yours > p {
  font-size: 13.5px;
  color: var(--muted);
}

.dr-receipt .dr-yours ul,
.dr-receipt .dr-stays ul {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #393d47;
}

.dr-receipt .dr-yours li {
  display: grid;
  gap: 2px;
}

.dr-receipt .dr-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 650;
  color: var(--brand);
}

.dr-receipt .dr-link .icon {
  width: 13px;
  height: 13px;
}

.dr-receipt .dr-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}

.dr-receipt .dr-next .icon {
  width: 16px;
  height: 16px;
}

.dr-receipt .dr-receipt-icon[data-tone="scheduled"] {
  background: var(--attention-tint);
  color: var(--attention-ink);
  box-shadow: inset 0 0 0 1px var(--attention-line);
}

.dr-receipt .dr-cancel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--attention-line);
  border-radius: 16px;
  background: var(--attention-tint);
  font-size: 13.5px;
  color: var(--attention-ink);
}

.dr-receipt .dr-cancel-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dr-receipt .dr-cancel-button .icon {
  width: 16px;
  height: 16px;
}

.dr-receipt .dash-flash {
  margin-top: 16px;
}

/* Your account and its confirmation outside any workspace (/account/data) */

.dr-standalone > h1 {
  margin-top: 6px;
}

.dr-standalone > .settings-layout {
  margin-top: 24px;
}

.dr-standalone .eyebrow {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .135em;
  color: var(--brand);
  overflow-wrap: anywhere;
}

[data-surface="settings"] .dr-sent {
  padding: 12px 14px;
  border: 1px solid var(--attention-line);
  border-radius: 12px;
  background: var(--attention-tint);
  color: var(--attention-ink);
}

@keyframes dr-spin {
  to { transform: rotate(360deg); }
}

@keyframes dr-arrive {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes dr-pop {
  0% { transform: scale(.6); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@media (max-width: 640px) {
  [data-surface="settings"] .dr-actions .dash-button {
    flex: 1 1 100%;
  }

  [data-surface="settings"] .dr-transfer-form .dash-button {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-surface="settings"] .dr-spinner,
  .dr-receipt [data-status="running"] .dr-step-mark {
    animation-duration: 2.4s;
  }

  [data-surface="settings"] .dr-preparing,
  [data-surface="settings"] .dr-ready,
  .dr-receipt [data-changed] .dr-step-mark,
  .dr-receipt [data-changed] > div,
  .dr-receipt .dr-yours,
  .dr-receipt .dr-stays {
    animation: none;
  }
}

/* Settings › Sites and "Add a site" (sites in a workspace, 0245).
   Rendered by crates/web/src/pages/app/sites.rs inside Settings
   ([data-surface="settings"]). Style A tokens only. */

[data-surface="settings"] .sites-room {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}

[data-surface="settings"] .sites-room[data-state="full"] {
  border-color: #cfdcf3;
  background: linear-gradient(180deg, var(--tint-blue), #fff 70%);
}

[data-surface="settings"] .sites-room-text {
  flex: 1 1 320px;
  max-width: 680px;
}

[data-surface="settings"] .sites-room-text p {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

[data-surface="settings"] .sites-room-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

[data-surface="settings"] .sites-room-actions form {
  display: contents;
}

[data-surface="settings"] .sites-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

[data-surface="settings"] .sites-row {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
}

[data-surface="settings"] .sites-row[data-current] {
  border-color: #cfdcf3;
  box-shadow: inset 3px 0 0 var(--brand);
}

[data-surface="settings"] .sites-row[data-state="removing"] {
  background: var(--canvas);
}

[data-surface="settings"] .sites-row-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

[data-surface="settings"] .sites-row-head > .dash-button {
  margin-left: auto;
  flex-shrink: 0;
}

[data-surface="settings"] .sites-chip {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 11px;
  background: var(--tint-pink);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
}

[data-surface="settings"] .sites-chip[data-image] {
  border: 1px solid var(--line);
  background: #fff;
}

[data-surface="settings"] .sites-chip[data-image] .sites-chip-letter {
  display: none;
}

[data-surface="settings"] .sites-row-text {
  display: grid;
  min-width: 0;
}

[data-surface="settings"] .sites-row-text strong {
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-surface="settings"] .sites-row-text span {
  overflow: hidden;
  font-size: 13px;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-surface="settings"] .sites-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

[data-surface="settings"] .sites-tag {
  padding: 2px 8px;
  border-radius: 7px;
  background: var(--mint);
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
}

[data-surface="settings"] .sites-tag[data-tone="brand"] {
  background: var(--tint-blue);
  color: var(--brand);
}

[data-surface="settings"] .sites-setup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--muted);
}

[data-surface="settings"] .sites-setup .icon {
  width: 15px;
  height: 15px;
}

[data-surface="settings"] .sites-setup a {
  font-weight: 650;
  color: var(--brand);
}

[data-surface="settings"] .sites-setup[data-tone="attention"] {
  color: var(--attention-ink);
}

[data-surface="settings"] .sites-manage {
  margin-top: 10px;
  border-top: 1px solid var(--line);
}

[data-surface="settings"] .sites-manage summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-top: 10px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--muted);
  list-style: none;
  cursor: pointer;
}

[data-surface="settings"] .sites-manage summary::-webkit-details-marker {
  display: none;
}

[data-surface="settings"] .sites-manage summary:hover {
  color: var(--ink);
}

[data-surface="settings"] .sites-manage summary .icon {
  width: 14px;
  height: 14px;
}

[data-surface="settings"] .sites-manage-body {
  display: grid;
  gap: 16px;
  padding-top: 12px;
}

[data-surface="settings"] .sites-rename label,
[data-surface="settings"] .sites-add-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 650;
}

[data-surface="settings"] .sites-rename-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

[data-surface="settings"] .sites-rename input,
[data-surface="settings"] .sites-add-form input[type="text"] {
  flex: 1 1 220px;
  min-width: 0;
  width: 100%;
  max-width: 460px;
  padding: 10px 12px;
  border: 1px solid #d6d9e0;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  color: var(--ink);
}

[data-surface="settings"] .sites-rename input:focus,
[data-surface="settings"] .sites-add-form input[type="text"]:focus {
  border-color: var(--brand);
  outline: 2px solid var(--tint-blue);
}

[data-surface="settings"] .sites-hint {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

[data-surface="settings"] .sites-hint a {
  font-weight: 650;
  color: var(--brand);
}

[data-surface="settings"] .sites-remove {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 12px 14px;
  border: 1px solid var(--negative-line);
  border-radius: 12px;
}

[data-surface="settings"] .sites-remove p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

[data-surface="settings"] .sites-add .dash-flash {
  margin-top: 12px;
}

[data-surface="settings"] .sites-add-form {
  margin-top: 14px;
}

@media (max-width: 600px) {
  [data-surface="settings"] .sites-row-head {
    flex-wrap: wrap;
  }
  [data-surface="settings"] .sites-row-text {
    flex: 1 1 0;
  }
  [data-surface="settings"] .sites-row-tags {
    order: 3;
    flex-basis: 100%;
    padding-left: 52px;
  }
  [data-surface="settings"] .sites-row-head > .dash-button {
    margin-left: 0;
  }
}

/* Connectors (fix batch 2026-10-21 §17): Settings › Connections' Cloudflare and Search
   Console cards, the token page, the DNS page (Cloudflare, Domain Connect, by hand with live
   checking), DNS receipts, and "Connect it for me" on founder-step cards.
   Rendered by crates/web/src/pages/app/connections.rs and components/cards/connect.rs.
   Classes `cx-` (pages) and `cfm-` (the card panel). Status is a dot and a word, never a pill. */

/* ---- Shared pieces ------------------------------------------------------------------ */

.cx-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--dash-neutral-ink);
}

.cx-status[data-tone="positive"] { color: var(--dash-positive-ink); }
.cx-status[data-tone="progress"] { color: var(--dash-progress-ink); }
.cx-status[data-tone="attention"] { color: var(--dash-attention-ink); }
.cx-status[data-tone="negative"] { color: var(--dash-negative-ink); }

.cx-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent);
}

.cx-kind {
  display: inline-block;
  min-width: 52px;
  padding: 2px 7px;
  border-radius: 6px;
  background: #eff1f4;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  color: #363c49;
}

.cx-page code,
.cfm code {
  padding: 2px 6px;
  border-radius: 6px;
  background: #f2f3f5;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.cx-page {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.cx-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: -6px 0 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}

.cx-back .icon {
  width: 14px;
  height: 14px;
  transform: rotate(90deg);
}

.cx-back:hover { color: var(--ink); }

.cx-badge {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--dash-neutral-bg);
  color: var(--dash-neutral-ink);
}

.cx-badge[data-tone="positive"] { background: var(--dash-positive-bg); color: var(--dash-positive-ink); }
.cx-badge[data-tone="negative"] { background: var(--dash-negative-bg); color: var(--dash-negative-ink); }
.cx-badge[data-tone="attention"] { background: var(--dash-attention-bg); color: var(--dash-attention-ink); }

.cx-badge .icon {
  width: 19px;
  height: 19px;
}

.cx-subhead {
  margin: 18px 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.cx-meta,
.cx-lead {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}

.cx-lead { color: #414650; }

.cx-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.cx-unavailable,
.cx-problem {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 13px;
  background: var(--dash-attention-bg);
  font-size: 14px;
  line-height: 1.55;
  color: var(--dash-attention-ink);
}

.cx-problem { background: var(--dash-negative-bg); color: var(--dash-negative-ink); }

.cx-unavailable .icon {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 2px;
}

.cx-current {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  font-size: 15px;
}

.cx-current small {
  font-size: 13px;
  color: var(--muted);
}

/* ---- What a token can do ------------------------------------------------------------ */

.cx-abilities {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cx-abilities li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid #dce4ef;
  border-radius: 13px;
  background: #f7f8fa;
  animation: cx-rise .55s var(--motion-ease-out) both;
}

.cx-abilities li[data-step="1"] { animation-delay: 80ms; }
.cx-abilities li[data-step="2"] { animation-delay: 160ms; }
.cx-abilities li[data-step="3"] { animation-delay: 240ms; }

.cx-abilities li > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cx-abilities strong {
  font-size: 14px;
  font-weight: 650;
}

.cx-abilities small {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.cx-abilities .cx-permission {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--dash-positive-ink);
}

.cx-check {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  animation: cx-pop .5s var(--motion-ease-out) both;
}

.cx-check .icon {
  width: 14px;
  height: 14px;
  stroke-width: 3;
}

.cx-never {
  padding: 12px 16px;
  border: 1px dashed #d2d4da;
  border-radius: 14px;
  font-size: 13.5px;
  color: #414650;
}

.cx-never summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  cursor: pointer;
}

.cx-never summary .icon {
  width: 16px;
  height: 16px;
  color: var(--green);
}

.cx-never ul {
  margin: 10px 0 0 18px;
  line-height: 1.6;
}

.cx-never p {
  margin-top: 8px;
  color: var(--muted);
}

/* ---- The token page ----------------------------------------------------------------- */

.cx-steps {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cx-step {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
}

.cx-step h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  font-weight: 730;
  letter-spacing: -.02em;
}

.cx-step > p {
  max-width: 720px;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.65;
  color: #414650;
}

.cx-step-number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  font-size: 13px;
  font-weight: 750;
  color: #fff;
}

.cx-template {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin-top: 16px;
}

/* The two "create token" links: the switch shows the one that matches (no script). */
.cx-template [data-wa="on"] { display: none; }
.cx-template:has(.cx-switch input:checked) [data-wa="on"] { display: inline-flex; }
.cx-template:has(.cx-switch input:checked) [data-wa="off"] { display: none; }

.cx-wa-note {
  max-width: 640px;
  margin-top: -4px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* A hand-built switch over a real checkbox (role=switch, keyboard and screen readers intact). */
.cx-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.cx-switch input {
  position: absolute;
  opacity: 0;
  width: 42px;
  height: 24px;
  margin: 0;
  cursor: pointer;
}

.cx-switch-track {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #d2d4da;
  transition: background-color .25s var(--motion-ease-out);
}

.cx-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px #101a2940;
  transition: transform .3s var(--motion-ease-out);
}

.cx-switch input:checked + .cx-switch-track { background: var(--green); }
.cx-switch input:checked + .cx-switch-track .cx-switch-thumb { transform: translateX(18px); }
.cx-switch input:focus-visible + .cx-switch-track { outline: 2px solid var(--green); outline-offset: 2px; }

.cx-token-form {
  display: grid;
  justify-items: start;
  gap: 12px;
  max-width: 560px;
  margin-top: 16px;
}

.cx-field {
  display: grid;
  gap: 6px;
  width: 100%;
  font-size: 13px;
  font-weight: 650;
  color: #393d47;
}

.cx-field input {
  width: 100%;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid #d2d4da;
  border-radius: 12px;
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  transition: border-color .2s, box-shadow .2s;
}

.cx-field input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 4px #00368722;
  outline: none;
}

.cx-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #414650;
}

.cx-checkbox input {
  width: 16px;
  height: 16px;
  accent-color: var(--green);
}

.cx-result {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
  animation: cx-rise .6s var(--motion-ease-out) both;
}

.cx-result[data-empty="true"] {
  display: none;
}

.cx-result[data-kept="true"] { border-color: #bfcfe6; }
.cx-result[data-kept="false"] { border-color: #f3c7c3; }

.cx-result > header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.cx-result h2 {
  font-size: 17px;
  font-weight: 730;
  letter-spacing: -.02em;
}

.cx-result header p {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.cx-result > .dash-button { margin-top: 16px; }

.cx-refusals {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: refusal;
}

.cx-refusals li {
  display: grid;
  gap: 4px;
  padding: 12px 14px 12px 16px;
  border-left: 3px solid var(--dash-negative-ink);
  border-radius: 4px 12px 12px 4px;
  background: #fdf5f4;
  font-size: 14px;
  line-height: 1.55;
  animation: cx-rise .5s var(--motion-ease-out) both;
}

.cx-refusals li:nth-child(2) { animation-delay: 90ms; }
.cx-refusals li:nth-child(3) { animation-delay: 180ms; }

.cx-refusals strong { font-weight: 650; color: #5c1610; }
.cx-refusals span { color: #414650; }

.cx-also { margin-top: 14px; font-size: 13.5px; }
.cx-also summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.cx-also .cx-abilities { margin-top: 10px; }

/* ---- Settings › Connections cards -------------------------------------------------- */

.cx-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 16px;
}

.cx-card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.cx-card-head p {
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

.cx-logo {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: #fff4e8;
  color: #d2691e;
}

.cx-logo[data-provider="google"] {
  background: #ecf3fe;
  color: #1a5fd1;
}

.cx-logo .icon {
  width: 21px;
  height: 21px;
}

.cx-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
  font-size: 13.5px;
  color: #414650;
}

.cx-batches {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
}

.cx-batches li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
}

.cx-batches li[data-undone="true"] a { color: var(--muted); }
.cx-batches a { font-weight: 600; }
.cx-batches a:hover { text-decoration: underline; }

.cx-remove { position: relative; }
.cx-remove summary { list-style: none; cursor: pointer; }
.cx-remove summary::-webkit-details-marker { display: none; }

.cx-remove form {
  display: grid;
  justify-items: start;
  gap: 10px;
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fdf5f4;
  font-size: 13.5px;
  line-height: 1.55;
  animation: cx-rise .35s var(--motion-ease-out) both;
}

/* What removing also deletes (Search Console's imported numbers), said first. */
.cx-remove .cx-remove-warning {
  color: var(--dash-negative-ink);
  font-weight: 600;
}

/* ---- Records, live checks, options ------------------------------------------------- */

.cx-records {
  display: grid;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.cx-records-head,
.cx-record {
  display: grid;
  grid-template-columns: 76px minmax(0, 1.2fr) minmax(0, 1.4fr) 120px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
}

.cx-records-head {
  background: #f7f8f9;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.cx-record {
  border-top: 1px solid var(--line);
  font-size: 13.5px;
}

.cx-record > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.cx-record small {
  font-size: 12px;
  color: var(--muted);
}

.cx-record .copy-field { margin-top: 0; }

.cx-record > .cx-live-state {
  display: inline-flex;
  align-items: center;
  justify-content: start;
  gap: 8px;
  font-weight: 650;
  color: var(--dash-neutral-ink);
}

.cx-record[data-live="waiting"] .cx-live-state { color: var(--dash-attention-ink); }
.cx-record[data-live="waiting"] .cx-live-state .cx-dot { animation: cx-breathe 1.6s ease-in-out infinite; }
.cx-record[data-live="live"] .cx-live-state { color: var(--dash-positive-ink); }
.cx-record[data-live="live"] .cx-live-state .cx-dot { animation: cx-pop .5s var(--motion-ease-out) both; }

.cx-live {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.cx-live-note {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: #414650;
}

.cx-pulse {
  position: relative;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dash-progress-ink);
}

.cx-pulse::after {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--dash-progress-ink);
  content: "";
  animation: cx-ping 1.6s var(--motion-ease-out) infinite;
}

.cx-live[data-done="true"] .cx-pulse { background: var(--success); }
.cx-live[data-done="true"] .cx-pulse::after { animation: none; }
.cx-live > .dash-evidence { justify-self: start; }

.cx-options {
  display: grid;
  gap: 14px;
}

.cx-host {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #393d47;
}

.cx-host .icon {
  width: 16px;
  height: 16px;
  color: var(--green);
}

.cx-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 14px;
}

.cx-option-grid:empty { display: none; }

.cx-option {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 8px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
  transition: transform .25s var(--motion-ease-out), box-shadow .25s;
}

.cx-option[data-primary="true"] {
  border-color: #bfcfe6;
  background: linear-gradient(180deg, #f7f8fa, #fff 55%);
}

.cx-option:hover {
  transform: translateY(-1px);
  box-shadow: var(--dash-card-shadow-hover);
}

.cx-option h3 {
  font-size: 16px;
  font-weight: 720;
  letter-spacing: -.015em;
}

.cx-option p {
  font-size: 13.5px;
  line-height: 1.6;
  color: #414650;
}

.cx-manual { justify-items: stretch; }
.cx-manual > h3,
.cx-manual > p { justify-self: start; }

/* ---- Receipts ----------------------------------------------------------------------- */

.cx-receipt {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
}

.cx-receipt[data-undone="true"] .cx-changes { opacity: .65; }

.cx-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px 18px;
  margin: 0 0 18px;
}

.cx-facts dt {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

.cx-facts dd {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 600;
}

.cx-changes {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cx-changes > li {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfcfd;
  animation: cx-rise .5s var(--motion-ease-out) both;
}

.cx-changes > li:nth-child(2) { animation-delay: 90ms; }

.cx-change-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
}

.cx-change-head small {
  color: var(--muted);
}

.cx-diff {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.cx-before,
.cx-after {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
}

.cx-before { background: #fdf5f4; }
.cx-after { background: #f0f4f9; }
.cx-before[data-empty="true"],
.cx-after[data-empty="true"] { background: #f5f6f7; }

.cx-before small,
.cx-after small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.cx-before em,
.cx-after em {
  font-style: normal;
  color: var(--muted);
}

.cx-arrow {
  display: grid;
  place-items: center;
  color: var(--muted);
}

.cx-arrow .icon {
  width: 16px;
  height: 16px;
}

.cx-applied {
  display: grid;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid #bfcfe6;
  border-radius: 18px;
  background: #fff;
  animation: cx-rise .6s var(--motion-ease-out) both;
}

.cx-applied-head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}

.cx-applied .cx-actions { margin-top: 0; }
.cx-applied .cx-live { margin-top: 0; }

/* ---- "Connect it for me" on a card -------------------------------------------------- */

.cfm {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid #cfd9e9;
  border-radius: 16px;
  background: linear-gradient(180deg, #f7f7f9, #fff 70%);
  animation: cx-rise .5s var(--motion-ease-out) both;
}

.cfm[data-state="problem"] {
  border-color: #f3c7c3;
  background: #fdf8f7;
}

.cfm[data-state="applied"] {
  padding: 0;
  border: 0;
  background: none;
}

.cfm-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 720;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dash-positive-ink);
}

.cfm-title .icon {
  width: 15px;
  height: 15px;
}

.cfm[data-state="applied"] .cfm-title { display: none; }

.cfm-what,
.cfm-problem {
  font-size: 14px;
  line-height: 1.6;
  color: #393d47;
}

.cfm-problem { color: var(--dash-negative-ink); }

.cfm-records {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.cfm-records li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
}

.cfm-to { color: var(--muted); }

.cfm form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.cfm form small {
  font-size: 12.5px;
  color: var(--muted);
}

.cfm-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* No connection can do it: one quiet line, the card's steps are the job. */
.cfm[data-state="manual"] {
  border-color: var(--line, #e4e6eb);
  background: #fafafb;
}

.cfm[data-state="manual"] .cfm-title { color: var(--muted); }

.cfm-records code {
  overflow-wrap: anywhere;
}

.cfm-waiting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-size: 14px;
}

.cfm-waiting span:last-child {
  color: var(--muted);
}

/* ---- Motion ------------------------------------------------------------------------- */

@keyframes cx-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes cx-pop {
  0% { transform: scale(.4); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes cx-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

@keyframes cx-ping {
  from { transform: scale(1); opacity: .55; }
  to { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cx-abilities li,
  .cx-check,
  .cx-result,
  .cx-refusals li,
  .cx-changes > li,
  .cx-applied,
  .cfm,
  .cx-remove form,
  .cx-record .cx-live-state .cx-dot,
  .cx-pulse::after {
    animation: none;
  }

  .cx-switch-track,
  .cx-switch-thumb,
  .cx-option {
    transition: none;
  }
}

/* ---- Phones ------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .cx-step,
  .cx-result,
  .cx-receipt {
    padding: 18px 16px;
  }

  .cx-records-head { display: none; }

  .cx-record {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
  }

  .cx-diff {
    grid-template-columns: 1fr;
  }

  .cx-arrow { transform: rotate(90deg); }
}

/* Settings styles every input as a full-width field; the switch and the checkbox are not. */
[data-surface] .cx-switch input[type="checkbox"] {
  width: 42px;
  min-width: 0;
  height: 24px;
  padding: 0;
  border: 0;
}

[data-surface] .cx-checkbox input[type="checkbox"] {
  flex: none;
  width: 16px;
  min-width: 0;
  height: 16px;
  padding: 0;
}

[data-surface] .cx-checkbox {
  font-weight: 500;
}

@media (max-width: 720px) {
  .cx-record > .cx-kind {
    justify-self: start;
  }
}

/* CMS providers (WordPress, Ghost, Webflow). */
.cx-logo[data-provider="wordpress"] { background: var(--brand-tint, #e6eefa); color: var(--brand); }
.cx-logo[data-provider="ghost"] { background: #f1f2f4; color: var(--ink); }
.cx-logo[data-provider="webflow"] { background: #e6eefa; color: #3b78d8; }

/* Fix batch G: every connection card shows its brand's mark on a white chip. */
.cx-logo[data-mark="logo"][data-provider],
[data-surface] .cx-logo[data-mark="logo"][data-provider] {
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 1px 2px rgba(11, 13, 18, .05);
  color: var(--ink);
}

.cx-logo[data-mark="logo"] img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* Connections off on this server (no secrets key): said once, above the cards. */
.cx-off {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--canvas);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.cx-off .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

/* The onboarding step's coming-soon cards carry the same chip beside their title. */
.connection-head .cx-logo {
  width: 36px;
  height: 36px;
  border-radius: 11px;
}

.connection-head .cx-logo img {
  width: 20px;
  height: 20px;
}

.connection-head .cx-logo + h2 {
  flex: 1;
  min-width: 0;
}

.settings-connections .cx-logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.settings-connections .cx-logo img {
  width: 19px;
  height: 19px;
}

/* CMS connectors (crates/web/src/pages/app/cms.rs): "Publish articles to", the WordPress,
   Ghost and Webflow cards, their connect pages, Webflow's field mapping and the receipt of
   every change on a CMS. Built on connections.css (`cx-`); style A tokens only. */

.cms-publishing {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}

/* ---- "Publish articles to" ------------------------------------------------------------ */

.cms-target .settings-card-head { margin-bottom: 12px; }

.cms-chooser {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.cms-chooser .lb { min-width: 0; max-width: 100%; }

.cms-target .cx-meta { margin-top: 10px; }
.cms-target .cx-problem { margin-top: 10px; }

/* ---- Cards ---------------------------------------------------------------------------- */


.cms-card .cx-actions { margin-top: 14px; }

.cms-setup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--success-tint, #e7f6ef);
  font-size: 13.5px;
}

.cms-setup[data-done="false"] {
  background: #fbe2e8;
}

.cms-setup .icon { width: 16px; height: 16px; flex-shrink: 0; }
.cms-setup span { flex: 1 1 200px; min-width: 0; }

.cms-can {
  margin: 10px 0;
  font-size: 13.5px;
}

.cms-can summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--muted);
}

.cms-can .cx-abilities { margin-top: 10px; }

.cms-choosers {
  display: grid;
  gap: 10px;
  margin: 12px 0 6px;
}

/* An ability the access doesn't have: said plainly, not hidden. */
.cms-abilities li[data-ok="false"] {
  background: #fff;
  border-style: dashed;
}

.cms-abilities li[data-ok="false"] .cx-check {
  background: #eceef2;
  color: var(--muted);
}

/* ---- Results and notes ---------------------------------------------------------------- */

.cms-result[data-kept="confirm"] { border-color: #f6c4cf; }

.cms-notes {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.cms-notes li {
  display: grid;
  gap: 4px;
  padding: 12px 14px 12px 16px;
  border-left: 3px solid var(--dash-negative-ink);
  border-radius: 4px 12px 12px 4px;
  background: #fdf5f4;
  font-size: 14px;
  line-height: 1.55;
  animation: cx-rise .5s var(--motion-ease-out) both;
}

.cms-notes[data-kind="warning"] li {
  border-left-color: #ec7d93;
  background: #fdf2f5;
}

.cms-notes strong { font-weight: 650; }
.cms-notes span { color: #414650; }

.cms-result .cx-subhead { margin-top: 18px; }
.cms-result .cx-meta { margin-top: 12px; }

.cms-target-line {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #e6eefa;
  font-size: 13.5px;
  line-height: 1.5;
}

.cms-form .cx-field small {
  font-size: 12.5px;
  color: var(--muted);
}

/* ---- Webflow: collection and field mapping ------------------------------------------- */

.cms-mapping {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
}

.cms-mapping h2 {
  font-size: 17px;
  font-weight: 730;
  letter-spacing: -.02em;
}

.cms-mapping .cms-notes { margin-bottom: 12px; }

.cms-saved {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--success-tint, #e7f6ef);
  color: var(--success-ink, #0b7a55);
  font-size: 13.5px;
  font-weight: 600;
}

.cms-saved .icon { width: 16px; height: 16px; }

.cms-mapping-form {
  display: grid;
  gap: 16px;
  margin-top: 14px;
}

.cms-map {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.cms-map-head,
.cms-map-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
}

.cms-map-head {
  background: #f7f8fa;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.cms-map-row + .cms-map-row { border-top: 1px solid var(--line); }

.cms-map-ours {
  font-size: 14px;
  font-weight: 600;
}

.cms-map .lb { min-width: 0; max-width: 100%; }

.cms-required {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--muted);
}

/* ---- Receipts ------------------------------------------------------------------------- */

.cms-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  min-width: 0;
}

.cms-links a {
  overflow-wrap: anywhere;
}

.cms-links small {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--faint);
}

.cms-undo {
  display: grid;
  gap: 8px;
}

@media (max-width: 720px) {
  .cms-mapping { padding: 18px 16px; }

  .cms-map-head { display: none; }

  .cms-map-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cms-notes li { animation: none; }
}

/* Tracking & measurement (/app/<workspace>/measurement…). Owner: tracking. Rendered by
   crates/web/src/pages/app/measurement/. Every class is prefixed `ms-`; the page root is
   `.ms-page` (it sits under the Settings section, whose data-surface belongs to
   dashboard-core). */

.ms-page {
  --ms-verified-bg: #e9f7f0;
  --ms-verified-ink: #0b7a55;
  --ms-platform-bg: #e8f1fe;
  --ms-platform-ink: #1d5fb8;
  --ms-self-bg: #fff3e2;
  --ms-self-ink: #9a5200;
  --ms-estimate-bg: #f1eefd;
  --ms-estimate-ink: #5543c0;
  container: ms-page / inline-size;
  display: grid;
  gap: 22px;
  min-width: 0;
}

.ms-page [hidden] {
  display: none !important;
}

/* Breadcrumb and tabs */

.ms-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: -8px;
  font-size: 13px;
  color: #7f838c;
}

.ms-crumbs a,
.ms-back {
  font-weight: 650;
  color: var(--deep);
  text-underline-offset: 3px;
}

.ms-crumbs a:hover,
.ms-back:hover {
  text-decoration: underline;
}

.ms-back {
  justify-self: start;
  font-size: 13.5px;
}

/* The header's figure */

.ms-head-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: 320px;
  font-size: 14px;
  color: var(--muted);
  text-align: right;
  justify-content: flex-end;
}

.ms-head-figure strong {
  font-size: 22px;
  font-weight: 760;
  letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Sections and cards */

.ms-section {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.ms-section-title {
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7f838c;
}

.ms-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ms-card {
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
}

.ms-card > h2 {
  font-size: 18px;
  font-weight: 740;
  letter-spacing: -.025em;
}

.ms-section-lede {
  margin-top: -6px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.ms-show-all {
  margin-top: 12px;
}

.ms-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

@container ms-page (min-width: 920px) {
  .ms-columns {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.ms-note {
  padding: 12px 16px;
  border: 1px solid #f0d9b8;
  border-radius: 12px;
  background: var(--ms-self-bg);
  color: #6b3d00;
  font-size: 14px;
  line-height: 1.55;
}

.ms-note a {
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ms-foot,
.ms-hint {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.ms-foot .ms-prov {
  vertical-align: 1px;
}

.ms-muted {
  color: #8f939c;
}

.ms-empty-line {
  padding: 14px 16px;
  border: 1px dashed #d2d5db;
  border-radius: 12px;
  font-size: 14px;
  color: var(--muted);
}

/* Provenance labels */

.ms-prov {
  --prov-bg: var(--dash-neutral-bg);
  --prov-ink: var(--dash-neutral-ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: var(--prov-bg);
  color: var(--prov-ink);
  font-size: 11.5px;
  font-weight: 720;
  line-height: 1.45;
  white-space: nowrap;
}

.ms-prov::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.ms-prov[data-provenance="verified"] {
  --prov-bg: var(--ms-verified-bg);
  --prov-ink: var(--ms-verified-ink);
}

.ms-prov[data-provenance="platform"] {
  --prov-bg: var(--ms-platform-bg);
  --prov-ink: var(--ms-platform-ink);
}

.ms-prov[data-provenance="self_reported"] {
  --prov-bg: var(--ms-self-bg);
  --prov-ink: var(--ms-self-ink);
}

.ms-prov[data-provenance="estimated"] {
  --prov-bg: var(--ms-estimate-bg);
  --prov-ink: var(--ms-estimate-ink);
}

.ms-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-legend-item {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.ms-legend-item p {
  font-size: 13.5px;
  line-height: 1.55;
  color: #40444e;
}

.ms-legend-item small {
  font-size: 12px;
  font-weight: 650;
  color: var(--ms-verified-ink);
}

.ms-legend-item small[data-counts="no"] {
  color: #8f939c;
}

/* Tiles: every count is a link to its items */

.ms-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-tiles-small {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.ms-tile-link {
  display: grid;
  align-content: start;
  gap: 6px;
  height: 100%;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  color: inherit;
  box-shadow: var(--dash-card-shadow);
  transition: border-color .2s, box-shadow .2s, transform .2s var(--motion-ease-out);
}

a.ms-tile-link:hover {
  border-color: #c6c9d0;
  box-shadow: var(--dash-card-shadow-hover);
  transform: translateY(-1px);
}

a.ms-tile-link:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.ms-tile-label {
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7f838c;
}

.ms-tile-value {
  font-size: 34px;
  font-weight: 780;
  letter-spacing: -.045em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.ms-tile-caption {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

.ms-tile-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.ms-tile-cta {
  font-size: 13px;
  font-weight: 680;
  color: var(--deep);
}

/* Tables (stacked into cards on narrow screens) */

.ms-table-wrap {
  min-width: 0;
}

.ms-table-wrap.ms-card {
  padding: 6px 8px;
}

.ms-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
}

.ms-table th,
.ms-table td {
  padding: 11px 12px;
  border-bottom: 1px solid #eff0f3;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.ms-table thead th {
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7f838c;
}

.ms-table tbody tr:last-child th,
.ms-table tbody tr:last-child td {
  border-bottom: 0;
}

.ms-table tbody th {
  font-weight: 650;
}

.ms-table th:first-child {
  width: 44%;
}

.ms-table small {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}

.ms-table code {
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.ms-table a {
  color: var(--deep);
  font-weight: 650;
  text-underline-offset: 3px;
}

.ms-table a:hover {
  text-decoration: underline;
}

.ms-num {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}

.ms-table tr[data-person="no"] td {
  color: #7f838c;
}

.ms-value {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

@container ms-page (max-width: 560px) {
  .ms-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .ms-table,
  .ms-table tbody,
  .ms-table tr,
  .ms-table th,
  .ms-table td {
    display: block;
    width: 100%;
  }

  .ms-table tr {
    padding: 10px 4px;
    border-bottom: 1px solid #eff0f3;
  }

  .ms-table tbody tr:last-child {
    border-bottom: 0;
  }

  .ms-table th,
  .ms-table td {
    padding: 3px 8px;
    border-bottom: 0;
  }

  .ms-table td[data-label] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    text-align: left !important;
  }

  .ms-table td[data-label]::before {
    content: attr(data-label);
    font-size: 12px;
    font-weight: 650;
    color: #8f939c;
  }
}

/* Copyable text */

.ms-copy,
.ms-code {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.ms-copy span {
  font-size: 12px;
  font-weight: 700;
  color: #60646e;
}

.ms-copy input,
.ms-code textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #dbdde3;
  border-radius: 10px;
  background: var(--canvas);
  color: var(--ink);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
}

.ms-copy input {
  height: 40px;
  padding: 0 12px;
  text-overflow: ellipsis;
}

.ms-code textarea {
  padding: 12px 14px;
  line-height: 1.55;
  resize: vertical;
  overflow: auto;
  white-space: pre;
}

.ms-copy input:focus,
.ms-code textarea:focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
  background: #fff;
}

/* Forms */

.ms-form {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.ms-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.ms-form label,
.ms-choice {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.ms-form label > span,
.ms-choice legend {
  font-size: 13px;
  font-weight: 680;
  color: #31353f;
}

.ms-form input[type="text"],
.ms-form input[type="url"],
.ms-form input[type="date"],
.ms-form select {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #d6d8de;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 14.5px;
}

.ms-form input[type="file"] {
  width: 100%;
  min-width: 0;
  padding: 10px;
  border: 1px dashed #c6c9d0;
  border-radius: 10px;
  background: var(--canvas);
  font-size: 13.5px;
}

.ms-form input:focus,
.ms-form select:focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

.ms-form input[aria-invalid="true"] {
  border-color: #d92d20;
}

.ms-form .dash-button {
  justify-self: start;
}

.ms-problem {
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--dash-negative-bg);
  color: var(--dash-negative-ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
}

.ms-hint .ms-prov {
  vertical-align: 1px;
}

.ms-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.ms-choice legend {
  width: 100%;
  margin-bottom: 6px;
}

.ms-choice label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 620;
}

.ms-choice label:has(input:checked) {
  border-color: var(--green);
  background: #e9eff7;
}

.ms-format {
  font-size: 13.5px;
  line-height: 1.6;
  color: #40444e;
}

.ms-format summary {
  cursor: pointer;
  font-weight: 680;
  color: var(--deep);
}

.ms-format p,
.ms-format pre {
  margin-top: 8px;
}

.ms-format pre {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--canvas);
  font-size: 12.5px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ms-format code {
  font-size: 12.5px;
}

/* Tracked links */

.ms-link-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-link-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px 22px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
}

@container ms-page (min-width: 860px) {
  .ms-link-card {
    grid-template-columns: minmax(0, 1fr) 290px 190px;
    align-items: center;
  }

  .ms-link-stats {
    grid-template-columns: 70px 100px minmax(0, 1fr);
  }
}

.ms-link-main {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.ms-link-main h2 {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.015em;
}

.ms-link-main h2 a {
  color: var(--ink);
}

.ms-link-main h2 a:hover {
  color: var(--deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ms-link-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 18px;
  margin: 0;
}

.ms-link-stats div {
  display: grid;
  gap: 2px;
}

.ms-link-stats dt {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8f939c;
}

.ms-link-stats dd {
  margin: 0;
  font-size: 18px;
  font-weight: 740;
  font-variant-numeric: tabular-nums;
}

.ms-link-stats dd a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: #cccfd7;
  text-underline-offset: 4px;
}

.ms-link-stats dd a:hover {
  color: var(--deep);
  text-decoration-color: currentColor;
}

.ms-link-stats .dash-when {
  font-size: 13px;
  font-weight: 600;
}

.ms-link-post {
  min-width: 0;
}

.ms-link-post .dash-pill,
.ms-post-status .dash-pill,
.ms-check .dash-pill,
.ms-listing .dash-pill {
  white-space: normal;
}

.ms-unlinked {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-unlinked li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 0;
  border-top: 1px solid #eff0f3;
}

.ms-unlinked li > span {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 220px;
}

.ms-unlinked strong {
  font-size: 14.5px;
}

.ms-unlinked small {
  font-size: 12.5px;
  color: var(--muted);
}

/* One link */

.ms-more summary {
  margin: 12px 12px 4px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 680;
  color: var(--deep);
}

.ms-classes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-classes li {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--canvas);
}

.ms-classes li[data-person="yes"] {
  background: var(--ms-verified-bg);
}

.ms-classes span {
  font-size: 12.5px;
  font-weight: 650;
  color: #60646e;
}

.ms-classes strong {
  font-size: 22px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

.ms-classes small {
  font-size: 12px;
  color: var(--muted);
}

.ms-post-status {
  display: flex;
}

.ms-post-note {
  font-size: 14px;
  line-height: 1.6;
  color: #40444e;
}

.ms-checks {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-check {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid #eff0f3;
  border-radius: 12px;
}

.ms-check header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ms-check p {
  font-size: 14px;
  line-height: 1.55;
}

.ms-check small {
  font-size: 12.5px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* Your numbers */

.ms-imports {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-import-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: inherit;
  transition: border-color .2s;
}

.ms-import-link:hover {
  border-color: #c6c9d0;
}

.ms-import-name {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ms-import-counts {
  flex: 1 1 200px;
  font-size: 13.5px;
  color: var(--muted);
}

.ms-problems {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-problems li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--canvas);
  font-size: 14px;
}

.ms-line {
  font-weight: 720;
  font-variant-numeric: tabular-nums;
  color: #9a5200;
}

/* Payments */

.ms-join {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px 32px;
}

@container ms-page (min-width: 720px) {
  .ms-join {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }
}

.ms-join-figure {
  display: grid;
  gap: 4px;
}

.ms-join-figure h2 {
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7f838c;
}

.ms-join-figure strong {
  font-size: 56px;
  font-weight: 790;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--deep);
  font-variant-numeric: tabular-nums;
}

.ms-join-figure span {
  font-size: 14px;
  color: var(--muted);
}

.ms-join-detail {
  display: grid;
  justify-items: start;
  gap: 8px;
  font-size: 14px;
}

.ms-join-verdict {
  font-size: 15px;
  line-height: 1.55;
  color: #31353f;
}

.ms-join-detail a {
  font-weight: 680;
  color: var(--deep);
  text-underline-offset: 3px;
}

.ms-join-revenue {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
}

.ms-snippets {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-snippet details {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.ms-snippet summary {
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
}

.ms-snippet p {
  margin: 10px 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

.ms-manual-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* Brand monitoring */

.ms-check-now {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.ms-check-now small {
  font-size: 12.5px;
  color: var(--muted);
}

.ms-listings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-listing {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid #b9c9e2;
  border-radius: 18px;
  background: linear-gradient(180deg, #f3f6fb 0, #fff 70px);
  box-shadow: var(--dash-card-shadow);
}

.ms-listing header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ms-listing-store {
  font-size: 12px;
  font-weight: 760;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--deep);
}

.ms-listing-found {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
}

.ms-listing h3 {
  font-size: 18px;
  font-weight: 740;
  letter-spacing: -.02em;
}

.ms-listing h3 a {
  color: var(--ink);
  text-underline-offset: 3px;
}

.ms-listing h3 a:hover {
  text-decoration: underline;
}

.ms-listing-seller,
.ms-listing-why {
  font-size: 14px;
  line-height: 1.5;
  color: #40444e;
}

.ms-listing-url {
  font-size: 12.5px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.ms-listing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.ms-sources,
.ms-answered {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-source {
  display: grid;
  gap: 6px;
  padding: 12px 0;
  border-top: 1px solid #eff0f3;
}

.ms-source:first-child {
  border-top: 0;
  padding-top: 0;
}

.ms-source header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ms-source strong {
  font-size: 15px;
}

.ms-source p {
  font-size: 14px;
  line-height: 1.55;
  color: #40444e;
}

.ms-answered li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 10px 0;
  border-top: 1px solid #eff0f3;
}

.ms-answered li:first-child {
  border-top: 0;
}

.ms-answered li > span:first-child {
  display: grid;
  gap: 2px;
  flex: 1 1 220px;
  min-width: 0;
}

.ms-answered a {
  font-weight: 680;
  color: var(--deep);
  overflow-wrap: anywhere;
}

.ms-answered small {
  font-size: 12.5px;
  color: var(--muted);
}

/* Overview: sources and bots */

.ms-bots {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-bots li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--canvas);
  font-size: 14px;
}

.ms-bots strong {
  font-variant-numeric: tabular-nums;
}

/* The Monday briefing's compact form */

.ms-number-form[data-compact="yes"] .ms-hint {
  font-size: 12.5px;
}

@media (max-width: 720px) {
  .ms-card {
    padding: 18px 16px;
  }

  .ms-head-figure {
    justify-content: flex-start;
    text-align: left;
  }

  .ms-link-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .ms-check-now {
    justify-items: start;
  }
}

/* The Monday briefing's "Report a number" (outside .ms-page, so it carries the labels'
   colours itself). */

.ms-briefing-report {
  --ms-verified-bg: #e9f7f0;
  --ms-verified-ink: #0b7a55;
  --ms-platform-bg: #e8f1fe;
  --ms-platform-ink: #1d5fb8;
  --ms-self-bg: #fff3e2;
  --ms-self-ink: #9a5200;
  --ms-estimate-bg: #f1eefd;
  --ms-estimate-ink: #5543c0;
  container: ms-briefing / inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px 28px;
  /* The briefing's own column width. */
  max-width: 980px;
  margin-top: 26px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--dash-card-shadow);
}

@media (min-width: 1000px) {
  .ms-briefing-report {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    align-items: start;
  }
}

.ms-briefing-report-text {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 8px;
}

.ms-briefing-report h2 {
  font-size: 18px;
  font-weight: 740;
  letter-spacing: -.025em;
}

.ms-briefing-report-text p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 720px) {
  .ms-briefing-report {
    padding: 18px 16px;
  }
}

/* Hand-built controls and in-place feedback (fix batch 2026-10-21 §15, §18, §23).
   Toasts and in-place states are driven by public/inplace.js; the listbox, the timezone and
   country pickers, "Remind me…" and the branching card by public/controls.js. Every control
   renders as a plain form first (a native <select>, radios, a submit button) and works
   without JavaScript. Owner: pages. Classes are prefixed `toast-`, `act-`, `lb-`, `branch-`
   and `remind-`. Motion runs only with prefers-reduced-motion: no-preference. */

/* On :root: popups and toasts live on <body>, outside the app shell. */
:root {
  --ctl-ink: #1b1f27;
  --ctl-soft: #4f545e;
  --ctl-faint: #8e929c;
  --ctl-line: #e1e3e8;
  --ctl-hover: #f4f5f7;
  --ctl-active: #e8eef6;
  --ctl-focus: #0a3d8a;
  --ctl-shadow: 0 18px 44px -18px rgb(18 21 28 / .35), 0 2px 6px rgb(18 21 28 / .06);
  --ctl-spring: cubic-bezier(.2, 1.18, .36, 1);
}

/* ---- Toasts ------------------------------------------------------------------------- */

.toast-region {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 80;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(560px, calc(100vw - 32px));
  transform: translateX(-50%);
  pointer-events: none;
}

.toast {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 10px 11px 14px;
  overflow: hidden;
  border-radius: 14px;
  background: #1a1e26;
  color: #f5f6f8;
  font-size: 14px;
  line-height: 1.35;
  box-shadow: 0 22px 48px -20px rgb(10 13 18 / .6), 0 2px 8px rgb(10 13 18 / .18);
  pointer-events: auto;
}

.toast-icon {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: #124ca3;
}

.toast[data-tone="neutral"] .toast-icon { background: #515661; }
.toast[data-tone="attention"] .toast-icon { background: #c47a00; }
.toast[data-tone="negative"] .toast-icon { background: #c0392b; }

.toast-icon svg,
.act-confirm svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.toast-text {
  margin: 0;
  min-width: 0;
}

.toast-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.toast-form {
  margin: 0;
}

.toast-action {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #7fa6e0;
  font: inherit;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.toast-action + .toast-action::before,
.toast-actions > * + *::before {
  content: none;
}

.toast-action:hover {
  background: rgb(255 255 255 / .08);
}

.toast-action:focus-visible,
.toast-close:focus-visible {
  outline: 2px solid #7fa6e0;
  outline-offset: 1px;
}

.toast-close {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #aeb2bb;
  cursor: pointer;
}

.toast-close svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
}

.toast-close:hover {
  background: rgb(255 255 255 / .08);
  color: #fff;
}

.toast-timer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #124ca3;
  transform-origin: left;
  opacity: .7;
}

@media (max-width: 600px) {
  .toast-region {
    bottom: 16px;
  }
  .toast {
    grid-template-columns: 26px minmax(0, 1fr) 28px;
  }
  .toast-actions {
    grid-column: 2 / -1;
    grid-row: 2;
    margin: -4px 0 0 -10px;
  }
}

/* ---- In-place states ------------------------------------------------------------------ */

[data-act-item][data-busy] {
  cursor: progress;
}

[data-act-item][data-busy] button[aria-busy="true"],
form[data-busy] button[aria-busy="true"] {
  position: relative;
  color: transparent;
}

[data-act-item][data-busy] button[aria-busy="true"]::after,
form[data-busy] button[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 16px;
  height: 16px;
  margin: auto;
  border: 2px solid currentcolor;
  border-color: #fff #fff transparent transparent;
  border-radius: 50%;
}

button.dash-button[data-style="ghost"][aria-busy="true"]::after,
button.qplain-choice[aria-busy="true"]::after {
  border-color: var(--green) var(--green) transparent transparent;
}

.act-confirm {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #bfcfe6;
  border-radius: 14px;
  background: #eff3fa;
  color: #0b2b5c;
  font-weight: 650;
}

.act-confirm svg {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 50%;
  background: #124ca3;
  color: #fff;
}

.act-problem {
  margin: 8px 0 0;
  color: #a12a1c;
  font-size: 13px;
  font-weight: 600;
}

.act-problem[hidden] {
  display: none;
}

[data-count-key] {
  display: inline-grid;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

[data-count-key] > span {
  grid-area: 1 / 1;
}

/* ---- Listbox (select, combobox) ---------------------------------------------------------- */

.lb {
  position: relative;
  min-width: 0;
}

.lb[data-enhanced] .lb-native,
[data-lb-fallback][hidden] {
  display: none;
}

.lb-native {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--ctl-line);
  border-radius: 11px;
  background: #fff;
  color: var(--ctl-ink);
  font: inherit;
}

.lb-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--ctl-line);
  border-radius: 12px;
  background: #fff;
  color: var(--ctl-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, background-color .18s;
}

.lb-trigger:hover {
  border-color: #c8cbd2;
  background: #fcfdfd;
}

.lb-trigger:focus-visible,
.lb[data-open] .lb-trigger {
  border-color: var(--ctl-focus);
  outline: none;
  box-shadow: 0 0 0 3px rgb(10 61 138 / .16);
}

.lb-trigger[data-compact] {
  grid-template-columns: minmax(0, 1fr) 16px;
  width: auto;
  min-height: 40px;
  padding: 8px 12px 8px 14px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 650;
}

.lb-value {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lb-value-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-placeholder {
  color: var(--ctl-faint);
}

.lb-meta {
  color: var(--ctl-soft);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lb-chevron {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--ctl-soft);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s var(--ctl-spring);
}

.lb[data-open] .lb-chevron {
  transform: rotate(180deg);
}

.lb-flag {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgb(18 21 28 / .1);
  background: #eff0f2;
}

.lb-flag[data-region] {
  display: grid;
  place-items: center;
  color: #0a377a;
  background: #e4ebf5;
}

.lb-flag svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
}

.lb-popup {
  position: fixed;
  z-index: 70;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 240px;
  max-height: min(420px, 70vh);
  overflow: hidden;
  border: 1px solid var(--ctl-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--ctl-shadow);
  transform-origin: top center;
}

.lb-popup[hidden] {
  display: none;
}

.lb-popup[data-side="above"] {
  transform-origin: bottom center;
}

.lb-search-wrap {
  position: relative;
  padding: 8px;
  border-bottom: 1px solid #eef0f3;
}

.lb-search-wrap svg {
  position: absolute;
  top: 50%;
  left: 20px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--ctl-faint);
  stroke-width: 2;
  stroke-linecap: round;
  transform: translateY(-50%);
}

.lb-search {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px 7px 36px;
  border: 1px solid var(--ctl-line);
  border-radius: 10px;
  background: #f9f9fa;
  color: var(--ctl-ink);
  font: inherit;
  font-size: 14px;
}

.lb-search:focus {
  border-color: var(--ctl-focus);
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 3px rgb(10 61 138 / .14);
}

.lb-list {
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  scroll-padding: 34px 0 6px;
}

.lb-group-label {
  position: sticky;
  top: -6px;
  z-index: 1;
  margin: 0 -6px;
  padding: 10px 16px 5px;
  background: linear-gradient(#fff 75%, rgb(255 255 255 / 0));
  color: var(--ctl-faint);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lb-group[hidden],
.lb-option[hidden] {
  display: none;
}

.lb-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lb-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 7px 10px;
  border-radius: 9px;
  color: var(--ctl-ink);
  font-size: 14px;
  cursor: pointer;
  transition: background-color .12s;
}

.lb-option[data-plain] {
  grid-template-columns: minmax(0, 1fr) 18px;
}

.lb-option:hover {
  background: var(--ctl-hover);
}

.lb-option[data-active] {
  background: var(--ctl-hover);
  box-shadow: inset 0 0 0 2px #b9cae3;
}

.lb-option[aria-selected="true"] {
  background: var(--ctl-active);
  color: #06224d;
  font-weight: 650;
}

.lb-option-text {
  display: grid;
  min-width: 0;
}

.lb-option-text strong {
  overflow: hidden;
  font-weight: inherit;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lb-option-text small {
  overflow: hidden;
  color: var(--ctl-soft);
  font-size: 12px;
  font-weight: 450;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lb-option-meta {
  display: grid;
  justify-items: end;
  color: var(--ctl-soft);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lb-option-meta b {
  color: var(--ctl-ink);
  font-size: 13px;
  font-weight: 600;
}

.lb-check {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #0a3d8a;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
}

.lb-option[aria-selected="true"] .lb-check {
  stroke-dashoffset: 0;
}

.lb-option mark {
  border-radius: 3px;
  background: #fff1b8;
  color: inherit;
}

.lb-empty {
  margin: 0;
  padding: 18px 16px 20px;
  color: var(--ctl-soft);
  font-size: 14px;
  text-align: center;
}

.lb-empty[hidden] {
  display: none;
}

.lb-foot {
  margin: 0;
  padding: 8px 14px;
  border-top: 1px solid #eef0f3;
  color: var(--ctl-faint);
  font-size: 12px;
}

.lb-foot kbd {
  padding: 1px 5px;
  border: 1px solid var(--ctl-line);
  border-radius: 5px;
  background: #f9f9fa;
  font: inherit;
  font-size: 11px;
}

/* Several values: chips with flags, each removable. */

.lb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.lb-chips:empty {
  display: none;
}

.lb-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 4px 4px 4px 6px;
  border: 1px solid #cfd9e9;
  border-radius: 999px;
  background: #f1f5fa;
  color: #0b264f;
  font-size: 14px;
  font-weight: 600;
}

.lb-chip .lb-flag {
  width: 22px;
  height: 22px;
}

.lb-chip button {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #3f577a;
  cursor: pointer;
}

.lb-chip button:hover {
  background: #dce4ef;
}

.lb-chip button:focus-visible {
  outline: 2px solid var(--ctl-focus);
}

.lb-chip svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

/* ---- "Remind me…" -------------------------------------------------------------------- */

.remind {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.remind .lb {
  display: inline-block;
}

/* ---- The branching question card ("Which is true?") --------------------------------- */

.branch {
  margin: 0;
  padding: 0;
  border: 0;
}

.branch-legend {
  margin: 0 0 10px;
  padding: 0;
  color: var(--ctl-ink);
  font-size: 15px;
  font-weight: 700;
}

.branch-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}

.branch-choice {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--ctl-line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .18s, background-color .18s, box-shadow .18s;
}

.branch-choice:hover {
  border-color: #c8cbd2;
}

.branch-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.branch-dot {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 2px solid #bbbfc7;
  border-radius: 50%;
  background: #fff;
  transition: border-color .18s, box-shadow .25s var(--ctl-spring);
}

.branch-choice input:checked ~ .branch-dot {
  border-color: var(--ctl-focus);
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 10px var(--ctl-focus);
}

.branch-choice:has(input:checked) {
  border-color: var(--ctl-focus);
  background: #f3f6fb;
  box-shadow: 0 0 0 3px rgb(10 61 138 / .12);
}

.branch-choice:has(input:focus-visible) {
  outline: 2px solid var(--ctl-focus);
  outline-offset: 2px;
}

.branch-choice strong {
  display: block;
  color: var(--ctl-ink);
  font-size: 14px;
}

.branch-choice small {
  display: block;
  margin-top: 2px;
  color: var(--ctl-soft);
  font-size: 13px;
}

/* Only the chosen branch shows (CSS alone, so it works without JavaScript). */
.branch-panel {
  display: none;
  margin-top: 14px;
}

.branch:has([value="none"]:checked) .branch-panel[data-branch="none"],
.branch:has([value="other"]:checked) .branch-panel[data-branch="other"],
.branch:has([value="nope"]:checked) .branch-panel[data-branch="nope"] {
  display: block;
}

.branch-panel-wrap {
  overflow: hidden;
}

.branch-note {
  margin: 0 0 12px;
  color: var(--ctl-soft);
  font-size: 14px;
  line-height: 1.5;
}

.branch-panel form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin: 12px 0 0;
}

.branch-panel .lb {
  flex: 1 1 260px;
}

.branch-panel label > span {
  display: block;
  margin-bottom: 6px;
  color: var(--ctl-soft);
  font-size: 13px;
  font-weight: 600;
}

.branch-panel input[type="text"] {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--ctl-line);
  border-radius: 12px;
  font: inherit;
}

.lb-label {
  display: block;
  margin-bottom: 6px;
  color: var(--ctl-soft);
  font-size: 13px;
  font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
  .toast {
    animation: toast-in .42s var(--ctl-spring) backwards;
  }
  .toast[data-leaving] {
    animation: toast-out .24s var(--motion-ease-out) forwards;
  }
  .toast-timer {
    animation: toast-timer var(--toast-ms, 8s) linear forwards;
  }
  .toast[data-paused] .toast-timer {
    animation-play-state: paused;
  }
  [data-act-item],
  [data-act-item][data-folding] {
    transition: height .3s var(--motion-ease-out), opacity .3s var(--motion-ease-out), margin .3s var(--motion-ease-out);
  }
  [data-act-item][data-folding] {
    opacity: 0;
  }
  [data-act-item][data-fresh] {
    animation: act-slide-up .48s var(--motion-ease-out) backwards;
  }
  [data-act-item][data-saved],
  [data-saved] {
    animation: act-glow 1.4s var(--motion-ease-out);
  }
  .act-confirm {
    animation: act-confirm .5s var(--ctl-spring) backwards;
  }
  .act-confirm svg path {
    stroke-dasharray: 18;
    animation: act-draw .45s var(--motion-ease-out) .12s backwards;
  }
  [data-act-item][data-busy] button[aria-busy="true"]::after,
  form[data-busy] button[aria-busy="true"]::after {
    animation: act-spin .7s linear infinite;
  }
  [data-count-key][data-tick] .act-tick-old {
    animation: act-tick-out .42s var(--motion-ease-out) forwards;
  }
  [data-count-key][data-tick] .act-tick-new {
    animation: act-tick-in .42s var(--ctl-spring) backwards;
  }
  [data-count-key][data-tick="up"] .act-tick-old {
    animation-name: act-tick-out-up;
  }
  [data-count-key][data-tick="up"] .act-tick-new {
    animation-name: act-tick-in-up;
  }
  .lb-popup[data-state="opening"] {
    animation: lb-open .22s var(--motion-ease-out);
  }
  .lb-popup[data-state="closing"] {
    animation: lb-close .14s ease-in forwards;
  }
  .lb-popup[data-state="opening"] .lb-option:nth-child(-n + 8) {
    animation: lb-option-in .3s var(--motion-ease-out) backwards;
  }
  .lb-popup[data-state="opening"] .lb-option:nth-child(2) { animation-delay: 20ms; }
  .lb-popup[data-state="opening"] .lb-option:nth-child(3) { animation-delay: 40ms; }
  .lb-popup[data-state="opening"] .lb-option:nth-child(4) { animation-delay: 60ms; }
  .lb-popup[data-state="opening"] .lb-option:nth-child(5) { animation-delay: 80ms; }
  .lb-popup[data-state="opening"] .lb-option:nth-child(6) { animation-delay: 100ms; }
  .lb-popup[data-state="opening"] .lb-option:nth-child(7) { animation-delay: 120ms; }
  .lb-popup[data-state="opening"] .lb-option:nth-child(8) { animation-delay: 140ms; }
  .lb-option[data-entering] {
    animation: lb-option-in .26s var(--motion-ease-out) backwards;
  }
  .lb-check {
    transition: stroke-dashoffset .3s var(--motion-ease-out);
  }
  .lb-chip[data-fresh] {
    animation: lb-chip-in .36s var(--ctl-spring) backwards;
  }
  .lb-chip[data-leaving] {
    animation: lb-chip-out .2s ease-in forwards;
  }
  .lb-value[data-changed] {
    animation: lb-value-in .32s var(--motion-ease-out);
  }
  .branch-panel[data-entering] {
    animation: branch-in .36s var(--motion-ease-out) backwards;
  }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateY(10px) scale(.98); }
}

@keyframes toast-timer {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@keyframes act-slide-up {
  from { opacity: 0; transform: translateY(18px); }
}

@keyframes act-glow {
  0% { box-shadow: 0 0 0 0 rgb(18 76 163 / .45); }
  30% { box-shadow: 0 0 0 6px rgb(18 76 163 / .18); }
  100% { box-shadow: 0 0 0 0 rgb(18 76 163 / 0); }
}

@keyframes act-confirm {
  from { opacity: 0; transform: scale(.97); }
}

@keyframes act-draw {
  from { stroke-dashoffset: 18; }
  to { stroke-dashoffset: 0; }
}

@keyframes act-spin {
  to { transform: rotate(360deg); }
}

@keyframes act-tick-out {
  to { opacity: 0; transform: translateY(-70%); }
}

@keyframes act-tick-in {
  from { opacity: 0; transform: translateY(70%); }
}

@keyframes act-tick-out-up {
  to { opacity: 0; transform: translateY(70%); }
}

@keyframes act-tick-in-up {
  from { opacity: 0; transform: translateY(-70%); }
}

@keyframes lb-open {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
}

@keyframes lb-close {
  to { opacity: 0; transform: translateY(-4px) scale(.98); }
}

@keyframes lb-option-in {
  from { opacity: 0; transform: translateY(4px); }
}

@keyframes lb-chip-in {
  from { opacity: 0; transform: scale(.8); }
}

@keyframes lb-chip-out {
  to { opacity: 0; transform: scale(.8); }
}

@keyframes lb-value-in {
  from { opacity: 0; transform: translateY(3px); }
}

@keyframes branch-in {
  from { opacity: 0; transform: translateY(6px); }
}

/* Brand ("style A") rules a colour token cannot express: the self-hosted display face, ink
   primary buttons, the coral underline, soft card shadows, chart fills drawn as SVG stops, and
   green kept for success states. Colours come from tokens.css. The `:root` prefix keeps these
   ahead of the section and page rules they adjust; this file is bundled after them. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Display type: Bricolage Grotesque 800, tight, for page titles (every h1), the marketing
   site's section headings, the wordmark and the app's big numbers. Body stays Inter. */
:root h1,
:root:has(.site-header) h2,
:root .wordmark span {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.035em;
}

:root .wordmark span {
  color: var(--ink);
}

/* The app's big numbers (tiles, dials, counters, prices). Not the audit's odometer, whose digits
   animate in fixed-width cells. */
:root :is(.cc-tile-number strong, .status-count, .dash-metric-value strong, .ms-tile-value,
  .ms-join-figure strong, .score-dial-value strong, .ct-figure > strong, .gtee-metric-value,
  .aiv-headline strong, .aiv-engine strong, .briefing-number-value strong, .ch-count strong,
  .links-counter strong, .kw-position-value, .pb-part-count strong, .ter-board-counts b,
  .plans-card-price strong, .test-summary-price strong, .audit-pages-count strong,
  .audit-score-preview strong) {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.03em;
}

/* Primary buttons: black with white text. */
:root .button:not(.button-white) {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  box-shadow: 0 1px 2px rgba(11, 13, 18, .12);
}

:root .button:not(.button-white):hover {
  background: var(--button-hover);
  border-color: var(--button-hover);
  box-shadow: 0 6px 16px rgba(11, 13, 18, .16);
}

:root .hero-audit-submit,
:root .hero-audit-submit:hover {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 1px 0 rgb(255 255 255 / .12) inset, 0 10px 24px -12px rgba(11, 13, 18, .5);
}

:root .hero-audit-submit:hover {
  background: var(--button-hover);
}

/* The one highlighted phrase: brand blue with a coral hand-drawn underline. */
:root .hero-highlight {
  color: var(--brand);
  background: none;
  -webkit-text-fill-color: currentColor;
}

:root .hero-stroke path {
  stroke: var(--coral);
}

/* Cards: white, soft two-layer shadow, lighter borders. */
:root .preview-card {
  border-color: var(--line);
  box-shadow: var(--card-shadow);
}

:root ::selection {
  background: var(--tint-blue);
  color: var(--ink);
}

:root :focus-visible {
  outline-color: var(--sky);
}

:root .check-list .icon {
  color: var(--brand);
}

/* Pricing: the plan buttons follow the primary button (black), the outlined plan stays white. */
:root .pricing-section {
  --plan-deep: var(--ink);
  --plan-deep-hover: var(--button-hover);
}

:root .price-card:not([data-tone="plain"], .agency-card) .plan-cta {
  background: var(--ink);
  box-shadow: inset 0 1px 0 #ffffff1f, 0 6px 14px -8px rgba(11, 13, 18, .45);
}

:root .price-card:not([data-tone="plain"], .agency-card) .plan-cta:hover {
  background: var(--button-hover);
  box-shadow: inset 0 1px 0 #ffffff1f, 0 10px 20px -10px rgba(11, 13, 18, .5);
}

/* Green is kept only for success, live and "claimed" states. */
:root :is(.receipts-section .receipt-status, .receipts-section .chip-verified,
  .analytics-section .score-chip, .runway-status,
  .lab-entry:not([data-outcome="inconclusive"]) .lab-outcome) {
  background: var(--success-tint);
  color: var(--success-ink);
}

:root :is(.receipts-section .receipt-pulse, .runway-pulse, .product-section .preview-status i,
  .globe-live .status-dot, .visitor-live, .founding-meter i),
:root :is(.receipts-section .receipt-pulse, .runway-pulse, .globe-live .status-dot, .visitor-live)::after {
  background: var(--success);
}

:root :is(.product-section .brand-check p, .product-section .brand-check .icon,
  .links-section .links-caption span:last-child) {
  color: var(--success-ink);
}

:root .agency-portal em {
  color: #6fdcb0;
}

/* Motion system: scroll reveals, CSS entrances, count-ups and SVG draw-ins (see ARCHITECTURE.md,
   "Motion"). Loaded last so its transient states win; everything is disabled for reduced motion.

   Nothing here applies until markup opts in with a data-* attribute, and hidden states are
   only ever set by the runtime (crates/web/src/motion), so content without WebAssembly is
   always visible. Animations use opacity and transform only: no layout shift, GPU friendly. */

@media (prefers-reduced-motion: no-preference) {
  /* Entrances on first paint (above the fold): data-enter="0".."8" picks the stagger slot. */
  [data-enter] {
    animation: outpost-rise var(--motion-duration) var(--motion-ease-out) backwards;
    animation-delay: calc(var(--motion-slot, 0) * var(--motion-step));
  }
  [data-enter="1"] { --motion-slot: 1; }
  [data-enter="2"] { --motion-slot: 2; }
  [data-enter="3"] { --motion-slot: 3; }
  [data-enter="4"] { --motion-slot: 4; }
  [data-enter="5"] { --motion-slot: 5; }
  [data-enter="6"] { --motion-slot: 6; }
  [data-enter="7"] { --motion-slot: 7; }
  [data-enter="8"] { --motion-slot: 8; }

  /* Scroll reveals. The runtime marks below-the-fold elements "pending", then "visible". */
  [data-reveal][data-reveal-state="pending"] {
    opacity: 0;
  }
  [data-reveal][data-reveal-state="visible"],
  [data-reveal=""][data-reveal-state="visible"],
  [data-reveal="up"][data-reveal-state="visible"] {
    animation: outpost-rise var(--motion-duration) var(--motion-ease-out) backwards;
    animation-delay: calc(var(--motion-slot, 0) * var(--motion-step));
  }
  [data-reveal="fade"][data-reveal-state="visible"] {
    animation-name: outpost-fade;
  }
  [data-reveal="left"][data-reveal-state="visible"] {
    animation-name: outpost-from-left;
  }
  [data-reveal="right"][data-reveal-state="visible"] {
    animation-name: outpost-from-right;
  }
  [data-reveal="scale"][data-reveal-state="visible"] {
    animation-name: outpost-scale;
  }

  /* Staggered children: the child's position picks its delay. */
  [data-reveal-stagger] > :nth-child(2) { --motion-slot: 1; }
  [data-reveal-stagger] > :nth-child(3) { --motion-slot: 2; }
  [data-reveal-stagger] > :nth-child(4) { --motion-slot: 3; }
  [data-reveal-stagger] > :nth-child(5) { --motion-slot: 4; }
  [data-reveal-stagger] > :nth-child(6) { --motion-slot: 5; }
  [data-reveal-stagger] > :nth-child(7) { --motion-slot: 6; }
  [data-reveal-stagger] > :nth-child(8) { --motion-slot: 7; }
  [data-reveal-stagger] > :nth-child(9) { --motion-slot: 8; }
  [data-reveal-stagger] > :nth-child(n+10) { --motion-slot: 9; }
  [data-reveal-stagger="fast"] { --motion-step: 45ms; }
  [data-reveal-stagger="slow"] { --motion-step: 130ms; }

  /* SVG draw-in: geometry needs pathLength="1" and class="draw-in". */
  [data-reveal-state="pending"] .draw-in,
  .draw-in[data-reveal-state="pending"] {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  [data-reveal-state="visible"] .draw-in,
  .draw-in[data-reveal-state="visible"],
  [data-enter] .draw-in {
    stroke-dasharray: 1;
    animation: outpost-draw var(--motion-duration-draw) var(--motion-ease-in-out) backwards;
    animation-delay: calc(var(--motion-slot, 0) * var(--motion-step) + .15s);
  }

  /* Hover micro-interaction. */
  [data-hover="lift"] {
    transition: transform .25s var(--motion-ease-out), box-shadow .25s var(--motion-ease-out);
  }
  [data-hover="lift"]:hover,
  [data-hover="lift"]:focus-within {
    transform: translate3d(0, -3px, 0);
    box-shadow: 0 14px 30px -18px #0d1f3b40;
  }
}

/* Count-ups keep a stable width while digits change. */
[data-count-to] {
  font-variant-numeric: tabular-nums;
}

@keyframes outpost-rise {
  from {
    opacity: 0;
    transform: translate3d(0, var(--motion-distance), 0);
  }
}

@keyframes outpost-fade {
  from {
    opacity: 0;
  }
}

@keyframes outpost-from-left {
  from {
    opacity: 0;
    transform: translate3d(calc(-1 * var(--motion-distance)), 0, 0);
  }
}

@keyframes outpost-from-right {
  from {
    opacity: 0;
    transform: translate3d(var(--motion-distance), 0, 0);
  }
}

@keyframes outpost-scale {
  from {
    opacity: 0;
    transform: scale(.94);
  }
}

@keyframes outpost-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}