/* Hallmark · shape: Workbench (/), kept order on the other pages · genre: modern-minimal · theme: Vantage (deal 1/3, seed tool-scans-live-reports-cf0d·e7ca38ee·2026-11-09·r0) · redesign: full · scope: site
 * hero: Stage (/), Banner (/pricing, /docs), app screens keep their shell · nav: edge-aligned bar, wordmark and one action · footer: mast, the wordmark over the links · imagery: the product built (the scanned page as measured points) · signature: a sample page drawn as points, the sweep lighting three deviations in lime with their measured values · vantage: object/steel, plus a daylight colourway for the light setting
 * axes: dark/grotesk-sans/chromatic-lime · posture: restrained · contrast: pass · fold: pass · job: sign up (start a free scan) · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: E, an 8000-line stylesheet restyled through its own token names; the long tail of app panels is listed for the owner rather than rebuilt */
/* Hallmark · dismissed 56 · .site-header and .app-shell__header live in different shells and never share a page */
/* Hallmark · dismissed 62 · .locked-tip is a tooltip revealed by :hover and :focus-within in CSS; no script is involved */
/* Hallmark · dismissed 85 · /inloggen is a sign-in form, not a mailing list close */
/* Hallmark · dismissed 41 · the flagged panels set no colour because they inherit --color-ink, which swaps with the theme */
@import url("./tokens.css");

[hidden] { display: none !important; }

/* Project token names, filled from the Vantage system. Dark is the default; light is the daylight colourway. */
:root {
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --font-geist-sans: var(--font-body);
  --font-geist-mono: var(--font-mono);
  --radius: 6px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-2xl: 10px;
  --header-h: 3.5rem;
  --sidebar-w: 15.5rem;
  color-scheme: dark;
  --background: var(--color-paper);
  --background-subtle: oklch(15% 0.013 235);
  --foreground: var(--color-ink);
  --card: var(--color-paper-2);
  --card-foreground: var(--color-ink);
  --surface-raised: var(--color-paper-3);
  --popover: var(--color-paper-3);
  --border: var(--color-rule);
  --border-strong: var(--color-rule-2);
  --input: var(--color-rule-2);
  --ring: var(--color-focus);
  --primary: var(--color-ink);
  --primary-foreground: var(--color-paper);
  --secondary: var(--color-paper-3);
  --secondary-foreground: var(--color-ink);
  --muted: var(--color-paper-3);
  --muted-foreground: var(--color-muted);
  --subtle-foreground: oklch(60% 0.016 230);
  --accent: var(--color-paper-3);
  --accent-foreground: var(--color-ink);
  --destructive: oklch(68% 0.17 25);
  --destructive-foreground: oklch(98% 0.005 25);
  --success: var(--color-success);
  --warning: oklch(80% 0.14 75);
  --teal: var(--color-accent);
  --teal-foreground: var(--color-accent-ink);
  --scrim: oklch(8% 0.01 235 / 0.6);
  --highlight: inset 0 0 0 0 transparent;
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: 0 12px 32px -16px oklch(5% 0.01 235 / 0.7);
  --shadow-lg: 0 24px 64px -24px oklch(5% 0.01 235 / 0.8);
  --glow: 0 0 0 1px var(--color-rule-2);
  /* Finding severities. */
  --sev-critical: oklch(68% 0.17 25);
  --sev-important: oklch(80% 0.14 75);
  --sev-minor: oklch(72% 0.09 230);
  --sev-human: oklch(74% 0.08 290);
  /* Translucent ink and shade, for overlays and pressed states. */
  --tint-ink: oklch(95% 0.006 230 / 0.06);
  --tint-ink-2: oklch(95% 0.006 230 / 0.14);
  --tint-ink-3: oklch(95% 0.006 230 / 0.28);
  --tint-shade: oklch(5% 0.01 235 / 0.35);
  --tint-shade-2: oklch(5% 0.01 235 / 0.6);
  /* Always-light paper (the PDF cover preview, the scanned site's frame). */
  --paper-white: oklch(99% 0.002 230);
  --paper-white-ink: oklch(22% 0.015 235);
  --paper-white-muted: oklch(50% 0.012 235);
  --paper-white-rule: oklch(90% 0.006 235);
  /* The theme picker's two previews, fixed whatever the active theme is. */
  --preview-dark: oklch(17% 0.014 235);
  --preview-dark-2: oklch(30% 0.014 235);
  --preview-dark-ink: oklch(95% 0.006 230);
  --preview-light: oklch(98% 0.004 230);
  --preview-light-2: oklch(86% 0.006 230);
  --preview-light-ink: oklch(20% 0.016 235);
  --preview-accent: oklch(89% 0.19 126);
  /* A field's edge: 3:1 against the paper it sits on. */
  --field-edge: oklch(50% 0.016 230);
  /* Ink on a severity fill. */
  --sev-ink: oklch(15% 0.012 235);
  /* Defaults for the PDF cover preview, before the user's house style fills them. */
  --brand-fallback: oklch(56% 0.1 185);
  --brand-accent-fallback: oklch(24% 0.04 265);
  --checker: oklch(95% 0.004 230);
}

:root[data-theme=light] {
  color-scheme: light;
  --color-paper: oklch(97.5% 0.004 230);
  --color-paper-2: oklch(99.5% 0.002 230);
  --color-paper-3: oklch(94.5% 0.006 230);
  --color-ink: oklch(20% 0.016 235);
  --color-ink-2: oklch(34% 0.014 235);
  --color-muted: oklch(47% 0.014 235);
  --color-rule: oklch(89% 0.007 235);
  --color-rule-2: oklch(78% 0.01 235);
  --color-accent: oklch(50% 0.15 132);
  --color-accent-hi: oklch(45% 0.14 132);
  --color-accent-ink: oklch(99% 0.01 126);
  --color-focus: oklch(45% 0.14 132);
  --color-slot: oklch(94.5% 0.006 230);
  --color-error: oklch(54% 0.19 27);
  --color-success: oklch(50% 0.13 150);
  --background-subtle: oklch(96% 0.005 230);
  --subtle-foreground: oklch(52% 0.012 235);
  --destructive: oklch(54% 0.19 27);
  --warning: oklch(58% 0.14 70);
  --sev-critical: oklch(54% 0.19 27);
  --sev-important: oklch(58% 0.14 70);
  --sev-minor: oklch(50% 0.11 240);
  --sev-human: oklch(50% 0.11 295);
  --tint-ink: oklch(20% 0.016 235 / 0.05);
  --tint-ink-2: oklch(20% 0.016 235 / 0.1);
  --tint-ink-3: oklch(20% 0.016 235 / 0.22);
  --tint-shade: oklch(20% 0.016 235 / 0.12);
  --tint-shade-2: oklch(20% 0.016 235 / 0.3);
  --scrim: oklch(20% 0.016 235 / 0.35);
  --shadow-md: 0 12px 32px -16px oklch(20% 0.016 235 / 0.18);
  --shadow-lg: 0 24px 64px -24px oklch(20% 0.016 235 / 0.24);
  --sev-ink: oklch(99% 0.002 230);
  --field-edge: oklch(60% 0.012 235);
  --point-lo: oklch(84% 0.012 235);
  --point-mid: oklch(58% 0.02 235);
  --point-hi: oklch(24% 0.02 235);
}

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

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

html,
body {
  overflow-x: clip;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 5rem;
  tab-size: 4;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

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

ul,
ol {
  list-style: none;
  padding: 0;
}

table {
  border-collapse: collapse;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

html {
  font-family: var(--font-body);
  scrollbar-color: var(--color-rule-2) var(--color-paper);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-md);
  line-height: 1.55;
  caret-color: var(--color-accent);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

::selection {
  background: color-mix(in oklab, var(--color-accent) 24%, transparent);
  color: var(--color-ink);
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

code,
pre {
  font-family: var(--font-mono);
}

b,
strong {
  font-weight: 500;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "SHRP" 100;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: break-word;
  min-width: 0;
}

p {
  text-wrap: pretty;
}

/* Kept for markup that still carries the class: the accent word is gone, the head is set one way. */
.serif {
  font: inherit;
  color: inherit;
}

/* A small label in the body face: sentence case, untracked. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--muted-foreground);
}
.eyebrow--accent {
  color: var(--teal);
}

.text-muted {
  color: var(--muted-foreground);
}

.tabular {
  font-variant-numeric: tabular-nums;
}

.inline-link {
  color: var(--foreground);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--foreground) 30%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease;
}
.inline-link:hover {
  text-decoration-color: var(--teal);
}

.kbd-code {
  font-family: var(--font-mono);
  font-size: 0.8125em;
  padding: 0.1em 0.4em;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--muted);
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
@keyframes pulse-ring {
  0% {
    transform: scale(0.8);
    opacity: 0.7;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.container--sm {
  max-width: 24rem;
}
.container--md {
  max-width: 42rem;
}
.container--lg {
  max-width: 64rem;
}
.container--xl {
  max-width: 72rem;
}
.container--flush {
  padding-inline: 0;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.stack--xs {
  gap: var(--space-xs);
}
.stack--sm {
  gap: var(--space-sm);
}
.stack--md {
  gap: 1.25rem;
}
.stack--lg {
  gap: var(--space-lg);
}
.stack--xl {
  gap: 2rem;
}

.cluster {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.cluster--between {
  justify-content: space-between;
}
.cluster--tight {
  gap: var(--space-xs);
}

.page {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
}
.page > * {
  min-width: 0;
}
.page--narrow {
  max-width: 44rem;
}
.page--medium {
  max-width: 58rem;
}
@media (prefers-reduced-motion: no-preference) {
  .page {
    animation: fade-up 0.45s var(--ease-out) both;
  }
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
}
.page-header__text {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}
.page-header__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-xs);
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  transition: color 0.15s ease;
}
.page-header__back svg {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.2s var(--ease-out);
}
.page-header__back:hover {
  color: var(--foreground);
}
.page-header__back:hover svg {
  transform: translateX(-2px);
}
.page-header__title {
  font-size: 1.625rem;
  font-weight: 500;
  letter-spacing: -0.025em;
}
@media (min-width: 640px) {
  .page-header__title {
    font-size: 1.875rem;
  }
}
.page-header__description {
  max-width: 40rem;
  font-size: 0.9375rem;
  color: var(--muted-foreground);
}
.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.section-header__title {
  font-size: 1rem;
  font-weight: 500;
}
.section-header__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
  transition: color 0.15s ease;
}
.section-header__link svg {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.2s var(--ease-out);
}
.section-header__link:hover {
  color: var(--foreground);
}
.section-header__link:hover svg {
  transform: translateX(2px);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: 3.5rem var(--space-lg);
  text-align: center;
}
.empty-state__icon {
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-xs);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--color-paper-3);
  box-shadow: var(--shadow-sm);
  color: var(--muted-foreground);
}
.empty-state__icon svg {
  width: 1.375rem;
  height: 1.375rem;
}
.empty-state__title {
  font-size: 1rem;
  font-weight: 500;
}
.empty-state__description {
  max-width: 24rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.empty-state__actions {
  margin-top: var(--space-sm);
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.875rem var(--space-md);
  font-size: 0.875rem;
}
.alert svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  margin-top: 0.0625rem;
}
.alert--success {
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
  background: color-mix(in srgb, var(--success) 8%, transparent);
  color: var(--success);
}
.alert--error {
  border-color: color-mix(in srgb, var(--destructive) 30%, transparent);
  background: color-mix(in srgb, var(--destructive) 8%, transparent);
  color: var(--destructive);
}
.alert--warning {
  border-color: color-mix(in srgb, var(--warning) 30%, transparent);
  background: color-mix(in srgb, var(--warning) 8%, transparent);
  color: var(--warning);
}

.skeleton {
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--muted) 0%, color-mix(in srgb, var(--muted) 60%, var(--foreground) 6%) 50%, var(--muted) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}

.divider {
  height: 1px;
  border: 0;
  background: var(--border);
}

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  white-space: nowrap;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: transparent;
  font-size: var(--text-sm);
  font-weight: 400;
  height: 2.5rem;
  padding: 0 var(--space-md);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.button:active:not(:disabled) {
  transform: translateY(1px);
}
.button:disabled, .button[aria-disabled=true] {
  pointer-events: none;
  cursor: not-allowed;
  background: var(--color-paper-3);
  border-color: var(--color-rule);
  color: var(--color-muted);
}
.button svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.button--default {
  background: var(--color-ink);
  color: var(--color-paper);
}
.button--default:hover {
  background: var(--color-ink-2);
}
.button--accent {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}
.button--accent:hover {
  background: var(--color-accent-hi);
}
.button--destructive {
  background: var(--destructive);
  color: var(--destructive-foreground);
}
.button--destructive:hover {
  background: color-mix(in oklab, var(--destructive) 85%, var(--color-paper));
}
.button--outline {
  background: transparent;
  border-color: var(--color-rule-2);
  color: var(--color-ink);
}
.button--outline:hover {
  border-color: var(--color-muted);
  background: var(--tint-ink);
}
.button--secondary {
  background: var(--color-paper-3);
  color: var(--color-ink);
}
.button--secondary:hover {
  background: var(--tint-ink-2);
}
.button--ghost {
  color: var(--color-muted);
}
.button--ghost:hover {
  background: var(--tint-ink);
  color: var(--color-ink);
}
.button--link {
  color: var(--color-ink);
  text-underline-offset: 4px;
  padding: 0;
  height: auto;
  border-radius: var(--radius-sm);
}
.button--link:hover {
  text-decoration: underline;
}
.button--sm {
  height: 2rem;
  padding: 0 var(--space-sm);
  font-size: var(--text-xs);
}
.button--lg {
  height: 3rem;
  padding: 0 var(--space-lg);
  font-size: var(--text-md);
}
.button--icon {
  height: 2.25rem;
  width: 2.25rem;
  padding: 0;
}
.button--full {
  width: 100%;
}
.button__arrow {
  transition: transform var(--dur-short) var(--ease-out);
}
.button:hover .button__arrow {
  transform: translateX(3px);
}

.spinner {
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: spin 0.7s linear infinite;
}

.input,
.select {
  display: flex;
  height: 2.5rem;
  width: 100%;
  border-radius: var(--radius-card);
  border: 1px solid var(--field-edge);
  background: var(--color-paper-2);
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-md);
  font-weight: 300;
  box-shadow: none;
  transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.input::placeholder,
.select::placeholder {
  color: var(--subtle-foreground);
}
.input:hover:not(:disabled),
.select:hover:not(:disabled) {
  border-color: var(--color-muted);
}
.input:focus-visible,
.select:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}
.input:disabled,
.select:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background: var(--color-paper-3);
  color: var(--color-muted);
}
.input--lg,
.select--lg {
  height: 3rem;
  font-size: var(--text-md);
}

.select {
  appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23889099' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
}

.input-group {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.input-group__icon {
  position: absolute;
  left: 0.875rem;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--subtle-foreground);
  pointer-events: none;
  transition: color 0.15s ease;
}
.input-group:focus-within .input-group__icon {
  color: var(--teal);
}
.input-group .input {
  padding-left: 2.625rem;
}

.label {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
}
.label--disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.field__hint {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
.field__error {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.8125rem;
  color: var(--destructive);
}

.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  padding: var(--space-2xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--background-subtle);
}
.segmented__option {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.4375rem 0.875rem;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.segmented__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.segmented__option:hover {
  color: var(--foreground);
}
.segmented__option:has(input:checked) {
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--border-strong);
}
.segmented__option:has(input:focus-visible) {
  outline: 2px solid color-mix(in srgb, var(--ring) 70%, transparent);
  outline-offset: 1px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: var(--space-3xs) 0.5625rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.badge--default {
  background: var(--primary);
  color: var(--primary-foreground);
}
.badge--secondary {
  background: var(--secondary);
  border-color: var(--border);
  color: var(--secondary-foreground);
}
.badge--outline {
  border-color: var(--border-strong);
  color: var(--muted-foreground);
}
.badge--accent {
  border-color: color-mix(in srgb, var(--teal) 30%, transparent);
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  color: var(--teal);
}
.badge--success {
  border-color: color-mix(in srgb, var(--success) 28%, transparent);
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
}
.badge--warning {
  border-color: color-mix(in srgb, var(--warning) 28%, transparent);
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  color: var(--warning);
}
.badge--destructive {
  border-color: color-mix(in srgb, var(--destructive) 28%, transparent);
  background: color-mix(in srgb, var(--destructive) 12%, transparent);
  color: var(--destructive);
}
.badge svg {
  width: 0.75rem;
  height: 0.75rem;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--muted-foreground);
}
.status__dot {
  position: relative;
  width: 0.4375rem;
  height: 0.4375rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: currentColor;
}
.status--done {
  color: var(--success);
}
.status--error {
  color: var(--destructive);
}
.status--running, .status--pending {
  color: var(--warning);
}
.status--running .status__dot::after, .status--pending .status__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  animation: pulse-ring 1.6s var(--ease-out) infinite;
}
.status--pending {
  color: var(--muted-foreground);
}

.card {
  position: relative;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--card-foreground);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease, box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.card--interactive:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.card--warning {
  border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
  background: color-mix(in srgb, var(--warning) 5%, var(--card));
}
.card--highlight {
  border-color: color-mix(in srgb, var(--teal) 50%, var(--border));
  box-shadow: var(--shadow-sm), var(--glow);
}
.card--subtle {
  background: var(--background-subtle);
  box-shadow: none;
}
.card__header {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: var(--space-lg);
}
.card__header--row {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
}
.card__title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.card__title--warning {
  color: var(--warning);
}
.card__description {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted-foreground);
}
.card__content {
  padding: var(--space-lg);
  padding-top: 0;
}
.card__content--flush {
  padding: 0;
}
.card__content--tight {
  padding: 1.125rem;
}
.card__content--padded {
  padding-top: var(--space-lg);
}
.card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border);
  background: var(--background-subtle);
  border-radius: 0 0 calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px);
}
.card__footer--plain {
  border-top: 0;
  background: none;
  padding-top: 0;
}
.card__footer--end {
  justify-content: flex-end;
}

.table__wrapper {
  position: relative;
  width: 100%;
  overflow-x: auto;
}
.table {
  width: 100%;
  font-size: 0.875rem;
  border-collapse: collapse;
}
.table__head tr {
  border-bottom: 1px solid var(--border);
  background: var(--background-subtle);
}
.table__head tr:hover {
  background: var(--background-subtle);
}
.table__body tr:last-child {
  border-bottom: 0;
}
.table__row {
  border-bottom: 1px solid var(--border);
  transition: background-color 0.15s ease;
}
.table__row:hover {
  background: color-mix(in srgb, var(--accent) 60%, transparent);
}
.table__row--link {
  position: relative;
  cursor: pointer;
}
.table__row-link {
  font-weight: 500;
}
.table__row-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.table__row-link:focus-visible {
  outline: none;
}
.table__row-link:focus-visible::after {
  outline: 2px solid color-mix(in srgb, var(--ring) 70%, transparent);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}
.table__head-cell {
  height: 2.5rem;
  padding: 0 var(--space-md);
  text-align: left;
  vertical-align: middle;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  white-space: nowrap;
}
.table__head-cell:first-child {
  padding-left: 1.25rem;
}
.table__cell {
  padding: 0.875rem var(--space-md);
  vertical-align: middle;
}
.table__cell:first-child {
  padding-left: 1.25rem;
}
.table__cell--muted {
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  white-space: nowrap;
}
.table__cell--end {
  text-align: right;
  width: 1%;
  color: var(--subtle-foreground);
}

.tabs__list {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--background-subtle);
  color: var(--muted-foreground);
  padding: var(--space-2xs);
  flex-wrap: wrap;
}
.tabs__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  white-space: nowrap;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.tabs__trigger:disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.5;
  background: transparent;
  color: var(--subtle-foreground);
}
.tabs__trigger:hover:not([data-state=active]):not(:disabled) {
  color: var(--foreground);
}
.tabs__trigger[data-state=active], .tabs__trigger--active {
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--border-strong);
}
.tabs__content {
  margin-top: 1.25rem;
}
.tabs__content:focus-visible {
  outline: none;
}

.progress {
  position: relative;
  height: 0.375rem;
  width: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: var(--secondary);
}
.progress__bar {
  height: 100%;
  border-radius: 999px;
  background: var(--color-accent);
}
.progress--warning .progress__bar {
  background: var(--warning);
  box-shadow: none;
}
.progress--live .progress__bar {
  background-image: linear-gradient(90deg, transparent 0%, var(--tint-ink-3) 50%, transparent 100%), linear-gradient(90deg, color-mix(in srgb, var(--teal) 70%, var(--primary)), var(--teal));
  background-size: 200% 100%, 100% 100%;
  animation: shimmer 2s linear infinite;
}

.bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.bar-row__label {
  width: 6rem;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
}
.bar-row__track {
  height: 1rem;
  flex: 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--secondary);
}
.bar-row__fill {
  height: 100%;
  border-radius: var(--radius-sm);
  background: var(--primary);
}
.bar-row__fill--ongrid {
  background: var(--teal);
  box-shadow: 0 0 10px -2px color-mix(in srgb, var(--teal) 65%, transparent);
}
.bar-row__fill--offgrid, .bar-row__fill--outlier {
  background: var(--warning);
}
.bar-row__fill--single-outlier {
  background: var(--destructive);
  border: 1px dashed var(--destructive-foreground);
}
.bar-row__count {
  width: 2.5rem;
  flex-shrink: 0;
  text-align: right;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}
.stat-grid--gap-lg {
  gap: var(--space-md);
}
@media (min-width: 768px) {
  .stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  }
}

.stat-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  padding: 1.125rem 1.25rem;
}
.stat-tile--flush {
  border: none;
  padding: 0;
  background: none;
  box-shadow: none;
}
.stat-tile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
}
.stat-tile__icon {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--muted);
  color: var(--muted-foreground);
}
.stat-tile__icon svg {
  width: 0.9375rem;
  height: 0.9375rem;
}
.stat-tile__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
.stat-tile__value {
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat-tile__value small {
  margin-left: var(--space-2xs);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted-foreground);
}
.stat-tile__value--accent {
  color: var(--warning);
}
.stat-tile__foot {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.stat-tile__foot a {
  color: var(--foreground);
  font-weight: 500;
}
.stat-tile__foot a:hover {
  color: var(--teal);
}

.icon-button {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.icon-button svg {
  width: 1.125rem;
  height: 1.125rem;
}
.icon-button:hover {
  background: var(--accent);
  border-color: var(--border);
  color: var(--foreground);
}

.app-shell {
  display: flex;
  min-height: 100vh;
}
.app-shell__sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: min(var(--sidebar-w), 85vw);
  padding: var(--space-md) var(--space-sm);
  border-right: 1px solid var(--border);
  background: var(--background-subtle);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.35s var(--ease-out);
}
/* From tablet width the sidebar is pinned to the window: only the content next to it scrolls. */
@media (min-width: 768px) {
  .app-shell__sidebar {
    width: var(--sidebar-w);
    height: 100vh;
    height: 100dvh;
    transform: none;
    transition: none;
  }
  .app-shell__body {
    margin-left: var(--sidebar-w);
  }
}
.app-shell--nav-open .app-shell__sidebar {
  transform: none;
  box-shadow: var(--shadow-lg);
}
.app-shell__scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--scrim);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
@media (min-width: 768px) {
  .app-shell__scrim {
    display: none;
  }
}
.app-shell--nav-open .app-shell__scrim {
  opacity: 1;
  pointer-events: auto;
}
.app-shell__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2xs) var(--space-xs);
  min-height: 2.25rem;
}
@media (min-width: 768px) {
  .app-shell__close {
    display: none;
  }
}
.app-shell__cta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  height: 2.5rem;
  padding: 0 var(--space-sm);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  font-size: 0.875rem;
  font-weight: 500;
  transition: border-color 0.2s ease, box-shadow 0.25s var(--ease-out), background-color 0.2s ease;
}
.app-shell__cta svg {
  width: 1rem;
  height: 1rem;
  padding: 0.0625rem;
  border-radius: 999px;
  background: var(--teal);
  color: var(--teal-foreground);
  stroke-width: 2.5;
}
.app-shell__cta:hover, .app-shell__cta--active {
  border-color: color-mix(in srgb, var(--teal) 45%, var(--border-strong));
  box-shadow: var(--shadow-sm), var(--glow);
}
.app-shell__cta-hint {
  margin-left: auto;
  min-width: 1.25rem;
  padding: 0 0.3rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.3rem;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  line-height: 1.1rem;
  text-align: center;
  color: var(--subtle-foreground);
}
.app-shell__sidebar-foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}
.app-shell__body {
  display: flex;
  min-width: 0;
  min-height: 100vh;
  flex: 1;
  flex-direction: column;
}
.app-shell__header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  height: var(--header-h);
  border-bottom: 1px solid var(--border);
  background: var(--color-paper);
  padding: 0 var(--space-md);
}
@media (min-width: 768px) {
  .app-shell__header {
    padding: 0 2rem;
  }
}
.app-shell__menu {
  margin-left: -0.375rem;
}
@media (min-width: 768px) {
  .app-shell__menu {
    display: none;
  }
}
.app-shell__title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
.app-shell__header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-left: auto;
}
@media (min-width: 768px) {
  .app-shell__header-cta {
    display: none;
  }
}
.app-shell__main {
  flex: 1;
  padding: var(--space-lg) var(--space-md) var(--space-2xl);
}
@media (min-width: 768px) {
  .app-shell__main {
    padding: var(--space-xl) 2rem var(--space-2xl);
  }
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  font-size: 0.9875rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  transition: opacity 0.2s ease;
}
.logo:hover {
  opacity: 0.85;
}
.logo__mark {
  width: 1.625rem;
  height: 1.625rem;
  flex-shrink: 0;
}
.logo__mark-bg {
  fill: var(--foreground);
}
.logo__mark-check {
  fill: none;
  stroke: var(--teal);
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.logo__word-accent {
  color: var(--muted-foreground);
  font-weight: 500;
}

:root[data-theme=light] .logo__mark-check {
  stroke: var(--teal);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: var(--space-xs);
  border-radius: var(--radius-md);
  transition: background-color 0.15s ease;
}
.user-chip:hover {
  background: var(--accent);
}
.user-chip__avatar {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-paper-3);
  color: var(--color-ink);
  color: var(--foreground);
  font-size: 0.75rem;
  font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--tint-ink-2);
}
.user-chip__text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.3;
}
.user-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 500;
}
.user-chip__meta {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.app-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
.app-nav__heading {
  margin: var(--space-md) 0 var(--space-2xs);
  padding: 0 var(--space-sm);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--subtle-foreground);
}
.app-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  padding: 0 var(--space-sm);
  font-size: 0.875rem;
  color: var(--muted-foreground);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.app-nav__link svg {
  width: 1.0625rem;
  height: 1.0625rem;
  flex-shrink: 0;
  opacity: 0.85;
}
.app-nav__link:hover {
  background: var(--accent);
  color: var(--foreground);
}
.app-nav__link--active {
  background: var(--card);
  color: var(--foreground);
  font-weight: 500;
  box-shadow: var(--shadow-xs), 0 0 0 1px var(--border);
}
.app-nav__link--active svg {
  color: var(--teal);
  opacity: 1;
}
.app-nav__link--quiet {
  font-size: 0.8125rem;
}

.admin-shell {
  min-height: 100vh;
  padding: 0 var(--space-md) var(--space-2xl);
}
@media (min-width: 768px) {
  .admin-shell {
    padding-inline: 2rem;
  }
}
.admin-shell__bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  max-width: 72rem;
  height: 4rem;
  margin: 0 auto var(--space-lg);
  border-bottom: 1px solid var(--border);
}
.admin-shell .tabs__list {
  align-self: flex-start;
}

.scan-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.scan-form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-xs);
}
.scan-form__footer .button {
  min-width: 10rem;
}
@media (max-width: 767px) {
  .scan-form__footer .button {
    width: 100%;
  }
}
.scan-form__summary {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.scan-step {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
}
@media (min-width: 640px) {
  .scan-step {
    padding: var(--space-lg);
  }
}
.scan-step__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.scan-step__num {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--background-subtle);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
.scan-step__title {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.scan-step__intro {
  margin-bottom: var(--space-md);
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.style-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.style-option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.875rem var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--background-subtle);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.2s ease;
}
.style-option:hover {
  border-color: var(--border-strong);
}
.style-option--selected {
  border-color: color-mix(in srgb, var(--teal) 55%, var(--border));
  background: color-mix(in srgb, var(--teal) 7%, var(--card));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 12%, transparent);
}
.style-option:has(:focus-visible) {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.style-option__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.style-option__icon {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--muted);
  color: var(--muted-foreground);
}
.style-option__icon svg {
  width: 1rem;
  height: 1rem;
}
.style-option--selected .style-option__icon {
  background: color-mix(in srgb, var(--teal) 16%, transparent);
  color: var(--teal);
}
.style-option__text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2xs);
}
.style-option__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.9375rem;
  font-weight: 500;
}
.style-option__description {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}

.style-input {
  margin-top: var(--space-md);
}
.style-input__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
}
.style-input__file {
  position: relative;
  cursor: pointer;
}
.style-input__file input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.style-input__file:has(:focus-visible) {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.textarea {
  width: 100%;
  min-height: 8rem;
  resize: vertical;
  border-radius: var(--radius-md);
  border: 1px solid var(--field-edge);
  background: var(--background-subtle);
  padding: var(--space-sm) 0.875rem;
  font-size: 0.9375rem;
  color: var(--foreground);
  box-shadow: none;
  transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.textarea::placeholder {
  color: var(--subtle-foreground);
}
.textarea:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}
.textarea[aria-invalid="true"] {
  border-color: var(--destructive);
}
.textarea--code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  tab-size: 2;
}

.scan-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.scan-result__empty {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.scan-result__toolbar {
  display: flex;
  justify-content: flex-start;
}

.scan-section-title {
  margin-bottom: var(--space-sm);
  font-size: 0.875rem;
  font-weight: 500;
}
.scan-section-title--warning {
  color: var(--warning);
}

.scan-detail {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.scan-detail__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
}
.scan-detail__heading {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.scan-detail__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-width: 0;
}
.scan-detail__title-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.375rem;
}
.scan-detail__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.025em;
}
@media (min-width: 640px) {
  .scan-detail__title {
    font-size: 1.75rem;
  }
}
.scan-detail__path {
  margin-left: var(--space-2xs);
  font-weight: 400;
  color: var(--muted-foreground);
}
.scan-detail__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}
.scan-detail__source-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  transition: color 0.15s ease;
}
.scan-detail__source-link svg {
  width: 0.8125rem;
  height: 0.8125rem;
}
.scan-detail__source-link:hover {
  color: var(--foreground);
}
.scan-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.scan-detail__error {
  display: flex;
  gap: var(--space-md);
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--destructive) 30%, var(--border));
  background: color-mix(in srgb, var(--destructive) 5%, var(--card));
  padding: var(--space-lg);
  font-size: 0.875rem;
}
.scan-detail__error-icon {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--destructive) 14%, transparent);
  color: var(--destructive);
}
.scan-detail__error-icon svg {
  width: 1.125rem;
  height: 1.125rem;
}
.scan-detail__error-title {
  margin-bottom: var(--space-2xs);
  font-weight: 500;
}
.scan-detail__error-text {
  color: var(--muted-foreground);
}
.scan-detail__error-text + .scan-detail__error-text {
  margin-top: var(--space-2xs);
}

.scan-status {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-md);
  padding: 3.5rem var(--space-lg);
  text-align: center;
  isolation: isolate;
}
@media (min-width: 768px) {
  .scan-status {
    gap: var(--space-lg);
    padding: 4.5rem 3rem;
  }
}
.scan-status::before {
  content: "";
  position: absolute;
  top: -12rem;
  left: 50%;
  z-index: -1;
  width: 34rem;
  height: 24rem;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--teal) 18%, transparent), transparent 70%);
  pointer-events: none;
}
.scan-status__orb {
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teal) 30%, transparent);
}
.scan-status__orb::before, .scan-status__orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--teal) 45%, transparent);
  animation: pulse-ring 2.4s var(--ease-out) infinite;
}
.scan-status__orb::after {
  animation-delay: 1.2s;
}
.scan-status__orb span {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 0 18px 2px color-mix(in srgb, var(--teal) 70%, transparent);
}
.scan-status__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.scan-status__title {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.scan-status__bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
  max-width: 46rem;
}
.scan-status__progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  text-align: left;
}
.scan-status__activity {
  min-width: 0;
  font-size: 0.9375rem;
  color: var(--foreground);
  overflow-wrap: anywhere;
}
.scan-status__percent {
  flex-shrink: 0;
  min-width: 3ch;
  text-align: right;
  font-size: 1rem;
  font-weight: 500;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}
.scan-status__bar .progress {
  height: 0.625rem;
}
.scan-status__hint {
  max-width: 28rem;
  font-size: 0.8125rem;
  color: var(--subtle-foreground);
}

.scan-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: 1.125rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.scan-card:hover {
  border-color: var(--color-rule-2);
}
.scan-card:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.scan-card__top {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.scan-card__site {
  min-width: 0;
  flex: 1;
  line-height: 1.35;
}
.scan-card__host {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.scan-card__path {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
.scan-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: 0.875rem;
  border-top: 1px solid var(--border);
}
.scan-card__facts {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  white-space: nowrap;
}
.scan-card__facts {
  gap: var(--space-sm);
}
.scan-card__ai {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--teal);
  font-weight: 500;
}
.scan-card__ai svg {
  width: 0.8125rem;
  height: 0.8125rem;
}

.color-palette {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.color-palette__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}
@media (min-width: 640px) {
  .color-palette__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .color-palette__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.color-role-group__label {
  margin-bottom: var(--space-xs);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
.color-role-group + .color-role-group {
  margin-top: var(--space-md);
}

.color-deviations {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.color-deviation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin: var(--space-xs) 0;
}
.color-deviation__arrow {
  color: var(--muted-foreground);
  font-size: 1rem;
}
.color-deviation__meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.color-deviation__near-dup {
  color: var(--warning);
}

.swatch {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: var(--space-xs);
}
.swatch--sm {
  display: inline-flex;
  border: none;
  padding: 0;
}
.swatch__preview {
  height: 2.25rem;
  width: 2.25rem;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.swatch--sm .swatch__preview {
  height: 1.5rem;
  width: 1.5rem;
}
.swatch__meta {
  min-width: 0;
}
.swatch__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.swatch__count {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.user-cell__name {
  font-size: 0.875rem;
  font-weight: 500;
}
.user-cell__email {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.setup-notice__code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.dashboard__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-sm);
}
@media (min-width: 640px) {
  .dashboard__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .dashboard__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.quick-scan {
  position: relative;
  display: grid;
  gap: 1.25rem;
  overflow: hidden;
  padding: var(--space-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--card);
  isolation: isolate;
}
@media (min-width: 768px) {
  .quick-scan {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 2rem;
    padding: 2rem;
  }
}
.quick-scan::before {
  display: none;
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(80% 120% at 100% 0%, var(--color-ink) 0%, transparent 60%);
  opacity: 0.55;
}
.quick-scan__text {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.quick-scan__title {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
.quick-scan__description {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.quick-scan__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
@media (min-width: 640px) {
  .quick-scan__form {
    flex-direction: row;
  }
}
.quick-scan__form .input-group {
  flex: 1;
}
.quick-scan__form .input {
  background: var(--background);
}

.usage-meter {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.usage-meter__warning {
  color: var(--warning);
}

.score-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 1.625rem;
  padding: 0 var(--space-xs);
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.score-chip--good {
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
}
.score-chip--fair {
  border-color: color-mix(in srgb, var(--warning) 30%, transparent);
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  color: var(--warning);
}
.score-chip--poor {
  border-color: color-mix(in srgb, var(--destructive) 30%, transparent);
  background: color-mix(in srgb, var(--destructive) 12%, transparent);
  color: var(--destructive);
}

.site-mark {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-paper-3);
  box-shadow: inset 0 0 0 1px var(--color-rule-2);
  color: var(--color-ink-2);
  font-weight: 500;
}
.site-mark--md {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 0.9375rem;
}
.site-mark--lg {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-lg);
  font-size: 1.25rem;
}
.site-mark--sm {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
}

:root[data-theme=light] .site-mark {
  color: var(--color-ink-2);
}

.billing__plans {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-md);
  align-items: stretch;
}
@media (min-width: 768px) {
  .billing__plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.billing-portal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  padding: 1.25rem var(--space-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--background-subtle);
}
.billing-portal__icon {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted-foreground);
}
.billing-portal__icon svg {
  width: 1.125rem;
  height: 1.125rem;
}
.billing-portal__text {
  flex: 1;
  min-width: 14rem;
}
.billing-portal__title {
  font-size: 0.9375rem;
}
.billing-portal__description {
  margin-top: var(--space-3xs);
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.site-cell {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 14rem;
}
.site-cell__text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.35;
}
.site-cell__host {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-cell__path {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.site-cell__ai {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--teal);
  font-weight: 500;
}
.site-cell__ai svg {
  width: 0.75rem;
  height: 0.75rem;
}
.site-cell__error {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--destructive);
}

.settings-section {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) {
  .settings-section {
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 2rem;
  }
}
.settings-section__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.settings-section__title {
  font-size: 0.9375rem;
  font-weight: 500;
}
.settings-section__description {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.settings-list {
  display: flex;
  flex-direction: column;
}
.settings-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}
.settings-list__row:first-child {
  padding-top: 0;
}
.settings-list__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.settings-list__label {
  color: var(--muted-foreground);
}
.settings-list__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.settings-plan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.settings-plan__name {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.settings-plan__price {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.theme-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}

.theme-option {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.625rem;
  padding: var(--space-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--background-subtle);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.25s var(--ease-out);
}
.theme-option:hover {
  border-color: var(--border-strong);
}
.theme-option:disabled {
  cursor: default;
}
.theme-option--active {
  border-color: color-mix(in srgb, var(--teal) 60%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--teal) 50%, transparent);
}
.theme-option__preview {
  position: relative;
  display: block;
  height: 4.5rem;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - 4px);
  padding: 0.625rem 0.625rem 0.625rem var(--space-xl);
}
.theme-option__preview--dark {
  background: var(--preview-dark);
  box-shadow: inset 0 0 0 1px var(--preview-dark-2);
  color: var(--preview-dark-ink);
  --line: var(--preview-dark-2);
  --bar: var(--preview-dark-2);
}
.theme-option__preview--light {
  background: var(--preview-light);
  box-shadow: inset 0 0 0 1px var(--preview-light-2);
  color: var(--preview-light-ink);
  --line: var(--preview-light-2);
  --bar: var(--preview-light-2);
}
.theme-option__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 1.875rem;
  background: var(--bar);
}
.theme-option__line {
  display: block;
  height: 0.4375rem;
  margin-bottom: 0.375rem;
  border-radius: 999px;
  background: var(--line);
}
.theme-option__line--short {
  width: 55%;
}
.theme-option__dot {
  position: absolute;
  right: 0.625rem;
  bottom: 0.625rem;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 0.25rem;
  background: var(--teal);
}
.theme-option__label {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0 var(--space-2xs) var(--space-3xs);
  font-size: 0.8125rem;
  font-weight: 500;
}
.theme-option__check {
  display: inline-flex;
  width: 1.125rem;
  height: 1.125rem;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--teal);
  color: var(--teal-foreground);
}
.theme-option__check svg {
  stroke-width: 3;
}

.score-gauge {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  color: var(--teal);
}
.score-gauge__value {
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1;
}
.score-gauge__max {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.score-gauge--lg .score-gauge__value {
  font-size: 3rem;
}
.score-gauge--lg .score-gauge__max {
  font-size: 1.25rem;
}
.score-gauge--lg::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 14rem;
  height: 10rem;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, color-mix(in srgb, currentColor 20%, transparent), transparent 70%);
  pointer-events: none;
}
.score-gauge--fair {
  color: var(--warning);
}
.score-gauge--poor {
  color: var(--destructive);
}

.severity-bar__track {
  display: flex;
  height: 0.625rem;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--secondary);
  margin-bottom: var(--space-xs);
}
.severity-bar__segment {
  height: 100%;
}
.severity-bar__segment--critical {
  background: var(--destructive);
}
.severity-bar__segment--important {
  background: var(--warning);
}
.severity-bar__segment--minor {
  background: var(--muted-foreground);
}
.severity-bar__segment--empty {
  width: 100%;
  background: var(--teal);
}
.severity-bar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  font-size: 0.6875rem;
}
.severity-bar__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--muted-foreground);
}
.severity-bar__legend-item::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}
.severity-bar__legend-item--critical::before {
  background: var(--destructive);
}
.severity-bar__legend-item--important::before {
  background: var(--warning);
}
.severity-bar__legend-item--minor::before {
  background: var(--muted-foreground);
}

.severity-border--critical {
  border-left: 3px solid var(--destructive);
}
.severity-border--important {
  border-left: 3px solid var(--warning);
}
.severity-border--minor {
  border-left: 3px solid var(--muted-foreground);
}

.page-health__title {
  margin-bottom: var(--space-xs);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
.page-health__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.page-health__cell {
  height: 1.125rem;
  width: 1.125rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.page-health__cell:hover:not(.page-health__cell--active) {
  transform: scale(1.2);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--foreground) 25%, transparent);
}
.page-health__cell--good {
  background: var(--success);
}
.page-health__cell--fair {
  background: var(--warning);
}
.page-health__cell--poor {
  background: var(--destructive);
}
.page-health__cell--active {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px var(--teal);
}
.page-health__more {
  align-self: center;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.filter-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm);
  margin-bottom: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
}
.filter-bar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}
.filter-bar__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  cursor: pointer;
  user-select: none;
}
.filter-bar__pills {
  display: inline-flex;
  gap: var(--space-2xs);
}
.filter-bar__select {
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--background);
  color: var(--foreground);
  font-size: 0.8125rem;
  padding: var(--space-2xs) var(--space-xs);
}
.filter-bar__status {
  font-size: 0.75rem;
  color: var(--teal);
}

.filter-pill {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 0.75rem;
  padding: var(--space-2xs) 0.625rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.filter-pill:hover {
  color: var(--foreground);
}
.filter-pill--active {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--teal-foreground);
  box-shadow: 0 0 10px -2px color-mix(in srgb, var(--teal) 60%, transparent);
}
.filter-pill--removable {
  background: var(--secondary);
  color: var(--secondary-foreground);
}

.issue-location {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px dashed var(--border);
}
.issue-location__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.75rem;
}
.issue-location__label {
  flex-shrink: 0;
  width: 4.5rem;
  color: var(--muted-foreground);
}
.issue-location__code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--foreground);
  word-break: break-all;
}
.issue-location__unknown {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--muted-foreground);
}
.issue-location__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
.issue-location__viewports {
  display: inline-flex;
  gap: 0.375rem;
}

.page-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  padding: var(--space-3xs) var(--space-xs);
}
.page-chip--button {
  cursor: pointer;
}
.page-chip--button:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.viewport-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  opacity: 0.35;
}
.viewport-tag--active {
  opacity: 1;
  color: var(--teal);
}

.issue-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.issue-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  border-left-width: 3px;
  transition: box-shadow 0.2s ease;
}
.issue-card:hover {
  box-shadow: 0 4px 16px -10px var(--tint-shade-2);
}
.issue-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}
.issue-card__title {
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}
.issue-card__deviation {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

.value-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.value-chip {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-family: var(--font-mono);
  padding: var(--space-2xs) 0.625rem;
}
.value-chip--expected {
  background: color-mix(in srgb, var(--success) 18%, transparent);
  color: var(--success);
}
.value-chip--deviation {
  background: color-mix(in srgb, var(--warning) 18%, transparent);
  color: var(--warning);
}
.value-chip__count {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.outlier-item {
  border-left: 3px solid transparent;
  padding-left: var(--space-sm);
}
.outlier-item__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.outlier-item__row .bar-row {
  flex: 1;
}

.font-size-compare {
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
  margin: var(--space-sm) 0;
}
.font-size-compare__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}
.font-size-compare__box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.5rem;
  width: 6rem;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--secondary);
}
.font-size-compare__box--deviation {
  border-color: var(--warning);
}
.font-size-compare__sample {
  line-height: 1;
  color: var(--foreground);
}
.font-size-compare__label {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  color: var(--muted-foreground);
}

.type-scale {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.type-specimen__dominant, .type-specimen__variant {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  transition: box-shadow 0.2s ease;
}
.type-specimen__dominant:hover, .type-specimen__variant:hover {
  box-shadow: 0 4px 16px -10px var(--tint-shade-2);
}
.type-specimen__variant {
  margin-top: var(--space-xs);
  margin-left: 1.25rem;
  border-left-width: 3px;
  border-left-color: var(--warning);
}
.type-specimen__meta {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}
.type-specimen__tag {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
.type-specimen__ok {
  font-size: 0.75rem;
  color: var(--success);
}
.type-specimen__sample-box {
  max-height: 9rem;
  overflow: hidden;
  padding: var(--space-xs) 0;
}
.type-specimen__sample {
  display: block;
  color: var(--foreground);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.type-specimen__specs {
  margin-top: var(--space-sm);
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.element-matrix__scroll {
  overflow-x: auto;
}
.element-matrix__table {
  border-collapse: collapse;
  font-size: 0.75rem;
}
.element-matrix__table th,
.element-matrix__table td {
  padding: 0.375rem 0.625rem;
  text-align: center;
  white-space: nowrap;
}
.element-matrix__table thead th {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
  font-weight: 500;
}
.element-matrix__table tbody th {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  text-align: left;
  color: var(--foreground);
}
.element-matrix__dot {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.element-matrix__dot:hover {
  transform: scale(1.3);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--foreground) 25%, transparent);
}
.element-matrix__dot--good {
  background: var(--success);
}
.element-matrix__dot--fair {
  background: var(--warning);
}
.element-matrix__dot--poor {
  background: var(--destructive);
}

.grid-ruler__svg {
  width: 100%;
  max-width: 40rem;
  height: auto;
}
.grid-ruler__axis {
  stroke: var(--border);
  stroke-width: 1;
}
.grid-ruler__tick {
  stroke: var(--border);
  stroke-width: 1;
}
.grid-ruler__tick-label {
  fill: var(--muted-foreground);
  font-size: 8px;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}
.grid-ruler__dot {
  stroke: var(--background);
  stroke-width: 1.5;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.grid-ruler__dot:hover {
  opacity: 0.75;
}
.grid-ruler__dot--ongrid {
  fill: var(--teal);
}
.grid-ruler__dot--offgrid {
  fill: var(--warning);
}

.client-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.client-summary__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}
.client-summary__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: var(--space-sm);
  padding: 0.3rem var(--space-sm);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.client-summary__eyebrow::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 25%, transparent);
}
.client-summary__verdict {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.client-summary__actions {
  display: flex;
  gap: var(--space-xs);
}
.client-summary__issues {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.client-summary__issue {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: flex-start;
}
.client-summary__issue p {
  font-size: 0.9375rem;
  line-height: 1.5;
}

.donut-legend__item,
.page-bars__row,
.filter-chip,
.issue-row__summary,
.issue-list__reset,
.issue-list__more {
  background: transparent;
  border: 1px solid transparent;
  color: inherit;
}

.issue-row__summary,
.issue-list__reset {
  border: 0;
}

.donut {
  position: relative;
  flex-shrink: 0;
}
.donut svg {
  display: block;
}
.donut__track {
  stroke: var(--secondary);
}
.donut__segment {
  stroke-linecap: butt;
  transition: stroke-dasharray 0.4s ease, opacity 0.15s ease;
}
.donut__segment:hover {
  opacity: 0.8;
}
.donut__segment--critical {
  stroke: var(--destructive);
}
.donut__segment--important {
  stroke: var(--warning);
}
.donut__segment--minor {
  stroke: var(--muted-foreground);
}
.donut__segment--good {
  stroke: var(--success);
}
.donut__segment--fair {
  stroke: var(--warning);
}
.donut__segment--poor {
  stroke: var(--destructive);
}
.donut__segment--empty {
  stroke: var(--border);
}
.donut__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.donut__value {
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1;
}
.donut__value--sm {
  font-size: 1.125rem;
}
.donut__caption {
  margin-top: var(--space-2xs);
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.donut-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
  flex: 1;
}
.donut-legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: 0.375rem var(--space-xs);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}
.donut-legend__item:hover {
  background: var(--secondary);
}
.donut-legend__item--active {
  border-color: var(--border);
  background: var(--secondary);
}
.donut-legend__swatch {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.donut-legend__swatch--critical {
  background: var(--destructive);
}
.donut-legend__swatch--important {
  background: var(--warning);
}
.donut-legend__swatch--minor {
  background: var(--muted-foreground);
}
.donut-legend__label {
  flex: 1;
  color: var(--muted-foreground);
}
.donut-legend__value {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.scan-overview {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .scan-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.overview-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: 1.25rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.overview-panel__title {
  font-size: 0.875rem;
  font-weight: 500;
}
.overview-panel__body {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.overview-panel__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}
.overview-panel__verdict {
  font-size: 0.875rem;
  line-height: 1.4;
}
.overview-panel__empty {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.overview-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2xs) var(--space-sm);
  font-size: 0.8125rem;
}
.overview-facts div {
  display: contents;
}
.overview-facts dt {
  color: var(--muted-foreground);
}
.overview-facts dd {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.page-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.page-bars__row {
  display: grid;
  grid-template-columns: minmax(0, 7rem) 1fr 2rem;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: 0.375rem var(--space-xs);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  text-align: left;
  cursor: pointer;
}
.page-bars__row:hover {
  background: var(--secondary);
}
.page-bars__row--active {
  border-color: var(--border);
  background: var(--secondary);
}
.page-bars__path {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
}
.page-bars__track {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--secondary);
  overflow: hidden;
}
.page-bars__fill {
  display: block;
  height: 100%;
  min-width: 0.25rem;
  border-radius: 999px;
  background: var(--teal);
}
.page-bars__value {
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.category-health {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
  .category-health {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .category-health {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.category-health__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-sm);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.category-health__card:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--foreground) 25%, var(--border));
}
.category-health__card--active {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 6%, var(--card));
}
.category-health__card:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background: var(--color-paper);
  color: var(--color-muted);
}
.category-health__label {
  font-size: 0.875rem;
  font-weight: 500;
}
.category-health__status {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  text-align: center;
}
.category-health__status::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.375rem;
  border-radius: 50%;
  vertical-align: 0.05em;
}
.category-health__status--good::before {
  background: var(--success);
}
.category-health__status--fair::before {
  background: var(--warning);
}
.category-health__status--poor::before {
  background: var(--destructive);
}
.category-health__status--empty::before {
  background: var(--border);
}

.issue-list {
  scroll-margin-top: 1.5rem;
}
.issue-list__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}
.issue-list__count {
  margin-left: var(--space-xs);
  font-weight: 400;
  color: var(--muted-foreground);
}
.issue-list__reset {
  font-size: 0.8125rem;
  color: var(--teal);
  cursor: pointer;
}
.issue-list__reset:hover {
  text-decoration: underline;
}
.issue-list__empty {
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  border: 1px dashed var(--border);
  font-size: 0.875rem;
  color: var(--muted-foreground);
  text-align: center;
}
.issue-list__more {
  display: block;
  width: 100%;
  margin-top: var(--space-sm);
  padding: var(--space-xs);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--muted-foreground);
  cursor: pointer;
}
.issue-list__more:hover {
  background: var(--secondary);
  color: var(--foreground);
}

.issue-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.issue-filters__group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  padding: 0.1875rem;
  border-radius: var(--radius-lg);
  background: var(--secondary);
}
.issue-filters__select {
  height: 2.125rem;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-md);
  border: 1px solid var(--input);
  background: var(--background);
  color: var(--foreground);
  font-size: 0.8125rem;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.625rem;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  cursor: pointer;
}
.filter-chip:hover:not(:disabled) {
  color: var(--foreground);
}
.filter-chip:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  background: transparent;
  color: var(--subtle-foreground);
}
.filter-chip--active {
  background: var(--background);
  color: var(--foreground);
  box-shadow: 0 1px 2px var(--tint-shade);
}
.filter-chip__count {
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

.issue-rows {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.issue-rows__head {
  display: none;
  padding: var(--space-xs) var(--space-md);
  border-bottom: 1px solid var(--border);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
@media (min-width: 768px) {
  .issue-rows__head {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1.2fr) minmax(0, 1.6fr) 3.5rem 3.5rem 1rem;
    gap: var(--space-sm);
  }
}
.issue-rows__num {
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) {
  .issue-rows__num {
    text-align: right;
  }
}

.issue-row + .issue-row {
  border-top: 1px solid var(--border);
}
.issue-row__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "sev what chevron" "values values values" "count pages pages";
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  cursor: pointer;
}
.issue-row__summary:hover {
  background: color-mix(in srgb, var(--secondary) 60%, transparent);
}
.issue-row__summary > :nth-child(1) {
  grid-area: sev;
}
.issue-row__summary > :nth-child(2) {
  grid-area: what;
}
.issue-row__summary > :nth-child(3) {
  grid-area: values;
}
.issue-row__summary > :nth-child(4) {
  grid-area: count;
  font-size: 0.8125rem;
}
.issue-row__summary > :nth-child(5) {
  grid-area: pages;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
.issue-row__summary > :nth-child(5)::after {
  content: " pagina('s)";
}
.issue-row__summary > :nth-child(6) {
  grid-area: chevron;
}
@media (min-width: 768px) {
  .issue-row__summary {
    grid-template-columns: 7.5rem minmax(0, 1.2fr) minmax(0, 1.6fr) 3.5rem 3.5rem 1rem;
    grid-template-areas: none;
  }
  .issue-row__summary > * {
    grid-area: auto !important;
  }
  .issue-row__summary > :nth-child(4),
  .issue-row__summary > :nth-child(5) {
    font-size: 0.875rem;
    color: var(--foreground);
  }
  .issue-row__summary > :nth-child(4)::after,
  .issue-row__summary > :nth-child(5)::after {
    content: none;
  }
}
.issue-row__what {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-width: 0;
}
.issue-row__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 500;
}
.issue-row__category {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.issue-row__values {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
}
.issue-row__arrow {
  color: var(--muted-foreground);
}
.issue-row__note {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.issue-row__chevron {
  justify-self: end;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid var(--muted-foreground);
  border-bottom: 1.5px solid var(--muted-foreground);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s ease;
}
.issue-row--open .issue-row__chevron {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.issue-row__details {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding: var(--space-xs) var(--space-md) var(--space-md);
  background: color-mix(in srgb, var(--secondary) 40%, transparent);
}
@media (min-width: 768px) {
  .issue-row__details {
    padding-left: calc(7.5rem + var(--space-md) + var(--space-sm));
  }
}

.severity-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}
.severity-tag__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}
.severity-tag--critical .severity-tag__dot {
  background: var(--destructive);
}
.severity-tag--important .severity-tag__dot {
  background: var(--warning);
}
.severity-tag--minor .severity-tag__dot {
  background: var(--muted-foreground);
}

.issue-value {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-width: 100%;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.issue-value--found {
  background: color-mix(in srgb, var(--destructive) 12%, transparent);
}
.issue-value--expected {
  background: color-mix(in srgb, var(--success) 12%, transparent);
}
.issue-value--none {
  color: var(--muted-foreground);
}
.issue-value__swatch {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 20%, transparent);
}

.issue-compare {
  display: flex;
  gap: var(--space-sm);
}
.issue-compare__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
}
.issue-compare__label {
  font-size: 0.6875rem;
  color: var(--muted-foreground);
}
.issue-compare__sample {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 4.5rem;
  height: 4.5rem;
  padding: 0 var(--space-xs);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--background);
  line-height: 1;
  overflow: hidden;
}
.issue-compare__sample--found {
  border-color: color-mix(in srgb, var(--destructive) 50%, var(--border));
}

.issue-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
  flex: 1;
  font-size: 0.8125rem;
}
.issue-meta div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: baseline;
}
.issue-meta dt {
  width: 5rem;
  flex-shrink: 0;
  color: var(--muted-foreground);
}
.issue-meta dd {
  min-width: 0;
  flex: 1;
}
.issue-meta__code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  word-break: break-word;
}
.issue-meta__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.system-sections {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.system-section + .system-section {
  border-top: 1px solid var(--border);
}
.system-section__summary {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.system-section__summary::-webkit-details-marker {
  display: none;
}
.system-section__summary::after {
  content: "";
  margin-left: auto;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid var(--muted-foreground);
  border-bottom: 1.5px solid var(--muted-foreground);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.system-section__summary:hover {
  background: color-mix(in srgb, var(--secondary) 60%, transparent);
}
.system-section[open] > .system-section__summary::after {
  transform: rotate(-135deg);
}
.system-section__count {
  padding: 0 0.4375rem;
  border-radius: 999px;
  background: var(--secondary);
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}
.system-section__body {
  padding: 0 var(--space-md) var(--space-md);
}

.system-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: var(--space-xs);
}

.system-swatch {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-xs);
  align-items: center;
}
.system-swatch__color {
  grid-row: span 2;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 20%, transparent);
}
.system-swatch__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.system-swatch__count {
  font-size: 0.6875rem;
  color: var(--muted-foreground);
}

.scale-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.scale-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  padding: var(--space-2xs) 0.625rem;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.scale-chip__value {
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.scale-chip__count {
  font-size: 0.6875rem;
  color: var(--muted-foreground);
}

.system-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.system-table__scroll {
  overflow-x: auto;
}
.system-table th,
.system-table td {
  padding: var(--space-xs) var(--space-sm) var(--space-xs) 0;
  text-align: left;
  white-space: nowrap;
}
.system-table thead th {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
}
.system-table tbody th,
.system-table td {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
}
.system-table tbody tr + tr > * {
  border-top: 1px solid var(--border);
}
.system-table__num {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}

.ai-result {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.ai-result__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
}
.ai-result__headline {
  font-size: 1.125rem;
  font-weight: 500;
}
.ai-result__counts, .ai-result__hint, .ai-result__empty {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.ai-result__heading {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: var(--space-sm);
}
.ai-result__notice {
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  background: color-mix(in srgb, var(--warning) 8%, var(--background));
  padding: var(--space-md);
  font-size: 0.875rem;
}
.ai-result__intentional summary {
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
}
.ai-result__hint {
  margin: var(--space-xs) 0 var(--space-md);
}

.ai-pages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--space-sm);
}

.ai-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.ai-page:hover {
  border-color: var(--ring);
}
.ai-page--active {
  border-color: var(--teal);
  box-shadow: 0 0 0 1px var(--teal);
}
.ai-page__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--secondary);
}
.ai-page__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.ai-page__score {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--background) 85%, transparent);
  padding: var(--space-3xs) var(--space-xs);
  font-size: 0.875rem;
  font-weight: 500;
}
.ai-page__path {
  overflow: hidden;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-page__count {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

:root {
  --cv-critical: var(--sev-critical);
  --cv-important: var(--sev-important);
  --cv-minor: var(--sev-minor);
  --cv-human: var(--sev-human);
  --cv-done: var(--color-muted);
  --cv-surface: var(--card);
  --cv-stage: color-mix(in srgb, var(--muted) 70%, var(--background));
  --cv-dot: color-mix(in srgb, var(--foreground) 9%, transparent);
  --cv-shadow: var(--shadow-md);
  --cv-header-h: var(--header-h);
}

.app-shell__main:has(> .cv-page) {
  padding: 0;
}

.cv-page {
  height: calc(100dvh - var(--cv-header-h));
  min-height: 36rem;
}
.cv-page--shared {
  height: 100dvh;
}

.cv-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.125rem;
  border: 1px solid transparent;
  border-radius: 0.6rem;
  padding: 0 0.85rem;
  font-size: 0.8125rem;
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.cv-btn:active:not(:disabled) {
  transform: translateY(1px);
}
.cv-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.cv-btn--primary {
  background: var(--foreground);
  color: var(--background);
}
.cv-btn--primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--foreground) 85%, var(--background));
}
.cv-btn--ghost {
  border-color: var(--border);
  background: var(--cv-surface);
  color: var(--foreground);
}
.cv-btn--ghost:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--foreground) 25%, var(--border));
  background: var(--accent);
}
.cv-btn--active {
  border-color: color-mix(in srgb, var(--teal) 55%, transparent);
  background: color-mix(in srgb, var(--teal) 14%, transparent);
  color: var(--teal);
}
.cv-btn--sm {
  height: 1.875rem;
  border-radius: 0.5rem;
  padding: 0 0.65rem;
  font-size: 0.78rem;
}

.cv-icon-btn {
  display: inline-flex;
  width: 1.875rem;
  height: 1.875rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
}
.cv-icon-btn:hover {
  background: var(--accent);
  color: var(--foreground);
}

.cv {
  display: grid;
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--background);
}

.cv-top {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  border-bottom: 1px solid var(--border);
  padding: var(--space-sm) 1.25rem;
}
.cv-top__site {
  min-width: 0;
}
.cv-top__host {
  overflow: hidden;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cv-top__meta {
  font-size: 0.78rem;
  color: var(--muted-foreground);
}
.cv-top__counts {
  display: none;
  gap: 0.4rem;
  margin-left: auto;
}
@media (min-width: 1024px) {
  .cv-top__counts {
    display: flex;
  }
}
.cv-top__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-left: auto;
}
@media (min-width: 1024px) {
  .cv-top__actions {
    margin-left: var(--space-xs);
  }
}

.cv-score {
  position: relative;
  width: 2.9rem;
  height: 2.9rem;
  flex-shrink: 0;
}
.cv-score svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.cv-score__track {
  fill: none;
  stroke: var(--border);
  stroke-width: 4;
}
.cv-score__bar {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 4;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cv-score__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}
.cv-score--good {
  color: var(--success);
}
.cv-score--fair {
  color: var(--cv-important);
}
.cv-score--poor {
  color: var(--cv-critical);
}

.cv-count {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: var(--space-2xs) 0.65rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.cv-count strong {
  font-weight: 500;
  color: var(--foreground);
}
.cv-count__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
}
.cv-count--critical .cv-count__dot {
  background: var(--cv-critical);
}
.cv-count--important .cv-count__dot {
  background: var(--cv-important);
}
.cv-count--minor .cv-count__dot {
  background: var(--cv-minor);
}
.cv-count--zero {
  opacity: 0.55;
}
.cv-count--clear {
  border-color: color-mix(in srgb, var(--success) 40%, transparent);
  color: var(--success);
}

.cv-share-anchor {
  position: relative;
}

/* Release check: one verdict for the whole site, with a panel per kind of check. */
.cv-release-anchor {
  position: relative;
  margin-left: auto;
}
.cv-release-anchor ~ .cv-top__actions {
  margin-left: var(--space-xs);
}
@media (min-width: 1024px) {
  .cv-release-anchor + .cv-top__counts {
    margin-left: 0;
  }
}
.cv-release {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  padding: 0 0.8rem;
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--foreground);
  cursor: pointer;
}
.cv-release strong {
  min-width: 1.25rem;
  border-radius: 999px;
  background: var(--cv-critical);
  padding: 0 0.35rem;
  font-size: 0.7rem;
  color: var(--sev-ink);
  text-align: center;
}
.cv-release__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--cv-important);
}
.cv-release--ready {
  border-color: color-mix(in srgb, var(--success) 45%, transparent);
  color: var(--success);
}
.cv-release--blocked {
  border-color: color-mix(in srgb, var(--cv-critical) 45%, transparent);
}
.cv-release--blocked .cv-release__dot {
  background: var(--cv-critical);
}
/* The release panel: verdict, a bar with one segment per check, and the checks as
   compact tiles in two columns (blocking first), so it fits without scrolling. */
.cv-share.cv-rp {
  --rp-tone: var(--cv-important);
  left: 0;
  right: auto;
  width: 42rem;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 6rem);
  gap: 0.9rem;
  overflow-y: auto;
  padding: 1.1rem 1.15rem var(--space-md);
}
.cv-share.cv-rp > * {
  flex-shrink: 0;
}
.cv-share.cv-rp--blocked {
  --rp-tone: var(--cv-critical);
}
.cv-share.cv-rp--ready {
  --rp-tone: var(--success);
}
.cv-rp__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.8rem;
}
.cv-rp__badge {
  display: inline-flex;
  width: 2.4rem;
  height: 2.4rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--rp-tone) 15%, transparent);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--rp-tone);
}
.cv-rp__intro {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-top: 0.1rem;
}
.cv-rp__title {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.cv-rp__lead {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted-foreground);
}
.cv-rp__bar {
  display: flex;
  height: 0.4rem;
  gap: var(--space-2xs);
}
.cv-rp__seg {
  flex: 1;
  border-radius: 999px;
  background: var(--success);
}
.cv-rp__seg--blocked {
  background: var(--cv-critical);
}
.cv-rp__seg--incomplete {
  background: var(--cv-important);
}
.cv-rp__seg--advice {
  background: var(--cv-minor);
}
.cv-rp__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem var(--space-md);
  margin-top: -0.35rem;
  font-size: 0.74rem;
  color: var(--muted-foreground);
}
.cv-rp__stat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.cv-rp__stat strong {
  font-weight: 500;
  color: var(--foreground);
}
.cv-rp__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--success);
}
.cv-rp__stat--blocked .cv-rp__dot {
  background: var(--cv-critical);
}
.cv-rp__stat--incomplete .cv-rp__dot {
  background: var(--cv-important);
}
.cv-rp__stat--advice .cv-rp__dot {
  background: var(--cv-minor);
}
.cv-rp__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cv-rp__tile {
  --tile: var(--success);
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 1.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: transparent;
  padding: 0.55rem 0.65rem;
  font: inherit;
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.cv-rp__tile:hover {
  border-color: color-mix(in srgb, var(--tile) 55%, var(--border));
  background: color-mix(in srgb, var(--tile) 6%, transparent);
}
.cv-rp__tile--blocked {
  --tile: var(--cv-critical);
  border-color: color-mix(in srgb, var(--cv-critical) 35%, var(--border));
  background: color-mix(in srgb, var(--cv-critical) 5%, transparent);
}
.cv-rp__tile--incomplete {
  --tile: var(--cv-important);
}
.cv-rp__tile--advice {
  --tile: var(--cv-minor);
}
.cv-rp__icon {
  display: inline-flex;
  width: 1.4rem;
  height: 1.4rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tile) 16%, transparent);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--tile);
}
.cv-rp__text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.05rem;
}
.cv-rp__text strong {
  font-size: 0.82rem;
  font-weight: 500;
}
.cv-rp__text span {
  overflow: hidden;
  font-size: 0.7rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted-foreground);
}
.cv-rp__count {
  border-radius: 999px;
  background: color-mix(in srgb, var(--tile) 13%, transparent);
  padding: 0.15rem var(--space-xs);
  font-size: 0.68rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--tile);
}
.cv-rp__tile--ready .cv-rp__count {
  background: transparent;
  padding-right: 0;
  color: var(--muted-foreground);
}
.cv-rp__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  border-top: 1px solid var(--border);
  padding-top: var(--space-sm);
  font-size: 0.72rem;
  color: var(--muted-foreground);
}
.cv-rp__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--foreground);
  text-decoration: none;
}
.cv-rp__link:hover {
  text-decoration: underline;
}
@media (max-width: 720px) {
  .cv-share.cv-rp {
    position: fixed;
    top: 4.5rem;
    right: 1rem;
    left: 1rem;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 5.5rem);
  }
}
@media (max-width: 560px) {
  .cv-rp__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .cv-rp__foot span {
    display: none;
  }
}

.cv-body {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) 24.5rem;
}

.cv-stage {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: 0.85rem;
  background-color: var(--cv-stage);
  background-image: radial-gradient(var(--cv-dot) 1px, transparent 1px);
  background-size: 18px 18px;
  padding: 0.85rem 1.25rem 1.25rem;
}

.ct {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.ct__end {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}
.ct__hint {
  font-size: 0.72rem;
  color: var(--muted-foreground);
}

.ct-page {
  position: relative;
  max-width: 22rem;
}
.ct-page__select {
  height: 2.125rem;
  max-width: 100%;
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  background: var(--cv-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23999' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.65rem center;
  box-shadow: 0 1px 2px var(--tint-shade);
  padding: 0 2rem 0 var(--space-sm);
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  color: var(--foreground);
  cursor: pointer;
}

.ct-seg {
  display: inline-flex;
  gap: var(--space-3xs);
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  background: var(--cv-surface);
  box-shadow: 0 1px 2px var(--tint-shade);
  padding: var(--space-3xs);
}
.ct-seg__option {
  display: inline-flex;
  height: 1.875rem;
  align-items: center;
  gap: 0.4rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  padding: 0 0.7rem;
  font-size: 0.78rem;
  font-weight: 550;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ct-seg__option:hover:not(:disabled) {
  color: var(--foreground);
}
.ct-seg__option:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.ct-seg__option--active {
  background: var(--foreground);
  color: var(--background);
}
.ct-seg__option--active:hover:not(:disabled) {
  color: var(--background);
}

.cv-window {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  background: var(--cv-surface);
  box-shadow: var(--cv-shadow);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.cv-window--commenting {
  border-color: color-mix(in srgb, var(--cv-human) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cv-human) 22%, transparent), var(--cv-shadow);
}
.cv-window__chrome {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-bottom: 1px solid var(--border);
  padding: 0.45rem 0.6rem 0.45rem 0.85rem;
}
.cv-window__dots {
  display: flex;
  gap: 0.35rem;
}
.cv-window__dots i {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: var(--border);
}
.cv-window__address {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 0.35rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  background: var(--muted);
  padding: 0 0.7rem;
  font-size: 0.78rem;
  color: var(--muted-foreground);
}
.cv-window__address svg {
  flex-shrink: 0;
}
.cv-window__host {
  color: var(--foreground);
  white-space: nowrap;
}
.cv-window__path {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cv-window__live {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding-right: var(--space-2xs);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--success);
}
.cv-window__live--off {
  color: var(--muted-foreground);
}
.cv-window__live-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
}
.cv-window__live:not(.cv-window__live--off) .cv-window__live-dot {
  animation: cv-pulse 2s ease-out infinite;
}
.cv-window__viewport {
  position: relative;
  min-height: 0;
  flex: 1;
  background: var(--paper-white);
}

@keyframes cv-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent);
  }
  100% {
    box-shadow: 0 0 0 6px transparent;
  }
}
.canvas-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--cv-stage);
}
.canvas-frame__iframe {
  position: absolute;
  top: 0;
  display: block;
  border: 0;
  background: var(--paper-white);
  transform-origin: top left;
}

.cv-state {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 2rem;
  font-size: 0.85rem;
  color: var(--muted-foreground);
  text-align: center;
}
.cv-state p {
  max-width: 26rem;
}
.cv-state--overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--cv-surface) 92%, transparent);
  backdrop-filter: blur(4px);
}
.cv-state__title {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--foreground);
}
.cv-state .cv-btn {
  margin-top: var(--space-xs);
}

.cv-spinner {
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: var(--space-2xs);
  border: 2.5px solid var(--border);
  border-top-color: var(--foreground);
  border-radius: 50%;
  animation: cv-spin 0.8s linear infinite;
}

@keyframes cv-spin {
  to {
    transform: rotate(360deg);
  }
}
.cs {
  display: flex;
  min-height: 0;
  flex-direction: column;
  border-left: 1px solid var(--border);
  background: var(--background);
}
.cs__head {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  border-bottom: 1px solid var(--border);
  padding: 0.85rem var(--space-md);
}
.cs__notice {
  margin: var(--space-sm) var(--space-md) 0;
  border: 1px solid color-mix(in srgb, var(--cv-important) 35%, transparent);
  border-radius: 0.6rem;
  background: color-mix(in srgb, var(--cv-important) 10%, transparent);
  padding: 0.55rem var(--space-sm);
  font-size: 0.78rem;
}
.cs__list {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 0.6rem;
  overflow-y: auto;
  padding: 0.85rem var(--space-md) var(--space-lg);
  scrollbar-width: thin;
}
.cs__empty {
  margin-top: 2rem;
  font-size: 0.82rem;
  color: var(--muted-foreground);
  text-align: center;
}
.cs__empty-title {
  margin-bottom: var(--space-2xs);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--foreground);
}

.cs-tabs {
  display: flex;
  gap: var(--space-2xs);
  border-radius: 0.65rem;
  background: var(--muted);
  padding: var(--space-3xs);
}
.cs-tabs__tab {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 1.9rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  font-size: 0.8rem;
  font-weight: 550;
  color: var(--muted-foreground);
  cursor: pointer;
}
.cs-tabs__tab--active {
  background: var(--cv-surface);
  box-shadow: 0 1px 2px var(--tint-shade);
  color: var(--foreground);
}
.cs-tabs__count {
  min-width: 1.25rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  padding: 0 0.35rem;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

.cs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.cs-cats {
  display: flex;
  gap: var(--space-2xs);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
}
.cs-cats__cat {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  padding: 0.3rem 0.45rem 0.45rem;
  font-size: 0.78rem;
  font-weight: 550;
  color: var(--muted-foreground);
  cursor: pointer;
}
.cs-cats__cat:hover {
  color: var(--foreground);
}
.cs-cats__cat--active {
  border-bottom-color: var(--foreground);
  color: var(--foreground);
}

.cs__group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
.cs__group:first-child {
  margin-top: 0;
}
.cs__group-count {
  font-weight: 500;
  letter-spacing: 0;
}
.cs-chips__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 1.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  padding: 0 var(--space-xs);
  font-size: 0.7rem;
  color: var(--muted-foreground);
  cursor: pointer;
}
.cs-chips__chip:hover {
  color: var(--foreground);
}
.cs-chips__chip--active {
  border-color: var(--foreground);
  color: var(--foreground);
}
.cs-chips__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
}
.cs-chips__chip--critical .cs-chips__dot {
  background: var(--cv-critical);
}
.cs-chips__chip--important .cs-chips__dot {
  background: var(--cv-important);
}
.cs-chips__chip--minor .cs-chips__dot {
  background: var(--cv-minor);
}

.cs-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  background: var(--background);
  padding: var(--space-xs) 0.65rem;
  font: inherit;
  font-size: 0.82rem;
  color: var(--foreground);
  resize: vertical;
}
.cs-input:focus {
  border-color: color-mix(in srgb, var(--foreground) 35%, var(--border));
  outline: none;
}

.cs-composer {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  border: 1px solid color-mix(in srgb, var(--cv-human) 55%, transparent);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--cv-human) 7%, var(--cv-surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cv-human) 12%, transparent);
  padding: 0.85rem;
}
.cs-composer__target {
  font-size: 0.8rem;
  color: var(--muted-foreground);
}
.cs-composer__target strong {
  color: var(--foreground);
}
.cs-composer__buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
}

.ci {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--cv-surface);
  padding: 0.8rem 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.ci:hover {
  border-color: color-mix(in srgb, var(--foreground) 22%, var(--border));
}
.ci--selected {
  border-color: color-mix(in srgb, var(--foreground) 45%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--foreground) 8%, transparent), var(--cv-shadow);
  cursor: default;
}
.ci--done:not(.ci--selected) {
  opacity: 0.6;
}
.ci__head {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.ci__pin {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50% 50% 50% 2px;
  box-shadow: 0 0 0 2px var(--cv-surface), 0 1px 3px var(--tint-shade-2);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--sev-ink);
}
.ci__pin--critical {
  background: var(--cv-critical);
}
.ci__pin--important {
  background: var(--cv-important);
}
.ci__pin--minor {
  background: var(--cv-minor);
}
.ci__pin--human {
  background: var(--cv-human);
}
.ci__pin--done {
  background: var(--cv-done);
}
.ci__title {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 0.1rem;
}
.ci__label {
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.3;
}
.ci__target {
  overflow: hidden;
  font-size: 0.76rem;
  color: var(--muted-foreground);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci__target code {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  opacity: 0.8;
}
.ci__severity, .ci__status {
  flex-shrink: 0;
  border-radius: 999px;
  padding: 0.1rem var(--space-xs);
  font-size: 0.68rem;
  font-weight: 500;
}
.ci__severity--critical {
  background: color-mix(in srgb, var(--cv-critical) 16%, transparent);
  color: var(--cv-critical);
}
.ci__severity--important {
  background: color-mix(in srgb, var(--cv-important) 16%, transparent);
  color: var(--cv-important);
}
.ci__severity--minor {
  background: color-mix(in srgb, var(--cv-minor) 16%, transparent);
  color: var(--cv-minor);
}
.ci__status {
  background: var(--muted);
  color: var(--muted-foreground);
}
.ci__status--confirmed {
  background: color-mix(in srgb, var(--teal) 15%, transparent);
  color: var(--teal);
}
.ci__status--possibly_resolved {
  background: color-mix(in srgb, var(--success) 15%, transparent);
  color: var(--success);
}
.ci__values {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding-left: 2.1rem;
}
.ci__arrow {
  color: var(--muted-foreground);
}
.ci__meta {
  font-size: 0.72rem;
  color: var(--muted-foreground);
}
.ci__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding-left: 2.1rem;
}
.ci__tags:empty {
  display: none;
}
.ci__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  border: 1px dashed var(--border);
  border-radius: 999px;
  padding: 0.1rem var(--space-xs);
  font-size: 0.7rem;
  color: var(--muted-foreground);
}
.ci__tag--warn {
  border-style: solid;
  border-color: color-mix(in srgb, var(--cv-important) 40%, transparent);
  color: var(--cv-important);
}
.ci__explanation {
  display: flex;
  gap: 0.4rem;
  margin-left: 2.1rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--foreground) 82%, var(--muted-foreground));
}
.ci__explanation--ai {
  border-left: 2px solid color-mix(in srgb, var(--teal) 45%, transparent);
  padding-left: 0.55rem;
}
.ci__clamp {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.ci__explanation-icon {
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: var(--teal);
}
.ci__detail {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-left: 2.1rem;
  border-top: 1px solid var(--border);
  padding-top: 0.65rem;
}
.ci__shot {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}
.ci__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.ci__error {
  font-size: 0.75rem;
  color: var(--destructive);
}

.ci-value {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 0.4rem;
  padding: 0.15rem 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.ci-value--is {
  background: color-mix(in srgb, var(--cv-critical) 12%, transparent);
  color: color-mix(in srgb, var(--cv-critical) 80%, var(--foreground));
}
.ci-value--should {
  background: color-mix(in srgb, var(--success) 13%, transparent);
  color: color-mix(in srgb, var(--success) 80%, var(--foreground));
}
.ci-value__swatch {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.2rem;
  box-shadow: inset 0 0 0 1px var(--tint-shade);
}

.ci-thread {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  list-style: none;
}
.ci-thread__item {
  display: flex;
  gap: var(--space-xs);
}
.ci-thread__avatar {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cv-human) 20%, var(--muted));
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--foreground);
}
.ci-thread__author {
  font-size: 0.74rem;
  font-weight: 500;
}
.ci-thread__body {
  font-size: 0.8rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.ci-reply {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
}
.ci-reply__input {
  min-height: 1.875rem;
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
  padding: 0.4rem 0.6rem;
  font: inherit;
  font-size: 0.8rem;
  color: var(--foreground);
  resize: none;
  field-sizing: content;
  max-height: 8rem;
}
.ci-reply__input:focus {
  border-color: color-mix(in srgb, var(--foreground) 35%, var(--border));
  outline: none;
}

.cv-share {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 40;
  display: flex;
  width: 22rem;
  flex-direction: column;
  gap: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  background: var(--cv-surface);
  box-shadow: 0 16px 40px -12px var(--tint-shade-2);
  padding: var(--space-md);
}
.cv-share__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-xs);
}
.cv-share__title {
  font-size: 0.92rem;
  font-weight: 500;
}
.cv-share__hint {
  font-size: 0.74rem;
  color: var(--muted-foreground);
}
.cv-share__perm {
  align-self: flex-start;
}
.cv-share__create {
  justify-content: center;
}
.cv-share__created {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.cv-share__url {
  display: flex;
  gap: 0.35rem;
}
.cv-share__url input {
  min-width: 0;
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
  padding: 0 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--foreground);
}
.cv-share__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  border-top: 1px solid var(--border);
  padding-top: 0.6rem;
  list-style: none;
  font-size: 0.8rem;
}
.cv-share__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 1024px) {
  .cv-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 40%;
  }
  .cs {
    border-top: 1px solid var(--border);
    border-left: 0;
  }
}

/* Login and registration (Go version). */
.auth-card { width: 100%; }
.auth-form { display: flex; flex-direction: column; gap: var(--space-md); }
.auth-form__switch { margin-top: 1.25rem; font-size: 0.875rem; color: var(--muted-foreground); text-align: center; }
.app-nav__logout { width: 100%; background: none; border: 0; cursor: pointer; font: inherit; text-align: left; }
/* The two views of a fast scan's result take part in .scan-result's own layout. */
[data-view-panel] { display: contents; }
/* The canvas is rendered into #canvas-root: it must pass the page's height on to .cv. */
#canvas-root { height: 100%; min-height: 0; }
/* Tablet: the site gets most of the screen, the findings follow below it. */
@media (max-width: 1024px) {
  .cv-page { height: auto; }
  .cv { height: auto; }
  .cv-body { grid-template-rows: max(26rem, calc(100dvh - 12rem)) auto; }
}
/* Eight design-system categories: four per row on wide screens. */
@media (min-width: 1024px) {
  .category-health { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The stylesheet the scan used, in a dialog on the canvas. */
.cv-sheet {
  width: min(46rem, calc(100% - 2rem));
  max-height: calc(100dvh - 4rem);
  margin: auto;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  background: var(--cv-surface, var(--card));
  color: var(--foreground);
  box-shadow: 0 24px 60px -16px var(--tint-shade-2);
  padding: 1.25rem;
}
.cv-sheet[open] {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.cv-sheet::backdrop {
  background: var(--scrim);
}
.cv-sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
}
.cv-sheet__title {
  font-size: 1rem;
  font-weight: 500;
}
.cv-sheet__lead {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}
.cv-sheet__summary {
  margin-top: var(--space-xs);
  font-size: 0.85rem;
}
.cv-sheet__code {
  min-height: 0;
  flex: 1;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  background: var(--background);
  padding: 0.85rem var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.6;
  white-space: pre;
  tab-size: 2;
}
.cv-sheet__actions {
  display: flex;
  justify-content: flex-end;
}

/* ---- tokens --------------------------------------------------------------- */

.table__head-cell--right,
.table__cell--right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.scan-form__summary strong {
  color: var(--foreground);
  font-weight: 500;
}
.scan-form__summary--short {
  color: var(--warning);
}

.token-overview {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.token-overview__numbers {
  display: grid;
  gap: var(--space-sm);
}
@media (min-width: 480px) {
  .token-overview__numbers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.token-overview__item {
  padding: 0.875rem var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--background-subtle);
}
.token-overview__label {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.token-overview__value {
  margin-top: var(--space-2xs);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.token-overview__plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.token-overview__plan-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.token-history,
.token-history-empty {
  margin-top: 1.25rem;
}
.token-history__amount {
  font-weight: 500;
  white-space: nowrap;
}
.token-history__amount--plus {
  color: var(--teal);
}

.token-packs {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  scroll-margin-top: 5rem;
}
.token-packs__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
}
.token-packs__title {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.token-packs__description {
  max-width: 40rem;
  margin-top: var(--space-2xs);
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.token-packs__description strong {
  color: var(--foreground);
}
.token-packs__grid {
  display: grid;
  gap: var(--space-sm);
}
@media (min-width: 640px) {
  .token-packs__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.token-pack {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.token-pack__tokens {
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.token-pack__tokens small {
  margin-left: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted-foreground);
}
.token-pack__price {
  font-size: 1rem;
  font-weight: 500;
}
.token-pack__note {
  flex: 1;
  margin-bottom: var(--space-xs);
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.grant-form {
  display: flex;
  gap: 0.375rem;
}
.grant-form .input {
  height: 2rem;
  font-size: 0.8125rem;
}
.grant-form__tokens {
  width: 4.25rem;
  flex-shrink: 0;
}
.grant-form__reason {
  width: 7.5rem;
  flex-shrink: 0;
}

/* ---- options the plan doesn't include ------------------------------------ */

.toggle-option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
  padding: var(--space-sm) 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--background-subtle);
  cursor: pointer;
}
.toggle-option__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.toggle-option__box {
  display: inline-flex;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-3xs);
  border: 1px solid var(--border-strong);
  border-radius: 0.3rem;
  background: var(--card);
  color: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.toggle-option__input:checked + .toggle-option__box {
  border-color: var(--teal);
  background: var(--teal);
  color: var(--teal-foreground);
}
.toggle-option:has(:focus-visible) {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.toggle-option__text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.2rem;
}
.toggle-option__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.875rem;
  font-weight: 500;
}
.toggle-option__description {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}

.style-option--locked,
.toggle-option--locked {
  cursor: not-allowed;
  border-style: dashed;
  background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--foreground) 3%, transparent) 10px 20px), var(--background-subtle);
}
.style-option--locked:hover,
.toggle-option--locked:hover {
  border-color: var(--border-strong);
}
.style-option--locked > :not(.locked-tip, input),
.toggle-option--locked > :not(.locked-tip, input) {
  opacity: 0.5;
}
.style-option--locked:focus-visible,
.toggle-option--locked:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.locked-badge {
  gap: var(--space-2xs);
}
.locked-badge svg {
  width: 0.75rem;
  height: 0.75rem;
}
.locked-tip {
  position: absolute;
  right: 0.75rem;
  bottom: calc(100% - 0.5rem);
  z-index: 20;
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  max-width: min(20rem, calc(100% - 1.5rem));
  padding: 0.625rem var(--space-sm);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--popover, var(--card));
  box-shadow: var(--shadow-lg);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--foreground);
  cursor: default;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
.locked-tip svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--teal);
}
.style-option--locked:hover .locked-tip,
.toggle-option--locked:hover .locked-tip {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--dur-micro) var(--ease-out) 800ms, transform var(--dur-micro) var(--ease-out) 800ms, visibility 0s linear 800ms;
}
.style-option--locked:focus-within .locked-tip,
.toggle-option--locked:focus-within .locked-tip {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
}

/* The cost estimate under the start button. */
.scan-form__submit {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-sm);
  width: 100%;
  margin-left: auto;
}
@media (min-width: 640px) {
  .scan-form__submit {
    width: 22rem;
  }
}
.scan-form__submit .button {
  justify-content: center;
}
.cost-estimate {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: 0.875rem var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--background-subtle);
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
.cost-estimate__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
  color: var(--foreground);
  font-weight: 500;
}
.cost-estimate__total strong {
  font-size: 1rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.cost-estimate__lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin: 0;
  padding: var(--space-xs) 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
}
.cost-estimate__lines li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
}
.cost-estimate__lines li span:last-child {
  flex-shrink: 0;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}
.cost-estimate__note {
  line-height: 1.5;
}
.cost-estimate--short {
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
}
.cost-estimate--short .cost-estimate__note {
  color: var(--warning);
}

/* Tokens in the sidebar, and as a small counter in the header on phones. */
.token-widget {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-2xs);
  padding: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
}
.token-widget--low {
  border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
  background: color-mix(in srgb, var(--warning) 6%, var(--card));
}
.token-widget__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
  color: inherit;
  text-decoration: none;
}
.token-widget__label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
.token-widget__label svg {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--teal);
}
.token-widget--low .token-widget__label svg {
  color: var(--warning);
}
.token-widget__value {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.token-widget__bar {
  height: 0.3125rem;
}
.token-widget__meta {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.token-widget__actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.375rem;
}
.token-widget__actions .button {
  justify-content: center;
}
.token-widget__link {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--teal);
  text-decoration: none;
}
.token-widget__link:hover {
  text-decoration: underline;
}

.token-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 2rem;
  padding: 0 0.625rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
  text-decoration: none;
}
.token-pill svg {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--teal);
}
.token-pill--low {
  border-color: color-mix(in srgb, var(--warning) 50%, var(--border));
}
.token-pill--low svg {
  color: var(--warning);
}
@media (min-width: 768px) {
  .token-pill {
    display: none;
  }
}

/* ---- settings: tabs and house style --------------------------------------- */

.settings-tabs {
  align-self: flex-start;
  margin-top: calc(-1 * var(--space-sm));
}
.settings-tabs .locked-badge {
  margin-left: 0.375rem;
}
.page--branding {
  max-width: 72rem;
}
.branding {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.branding__layout {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
}
@media (min-width: 1100px) {
  .branding__layout {
    grid-template-columns: minmax(0, 1fr) 21rem;
  }
  .branding__preview {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }
}
.branding__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.branding__intro {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.branding__fields,
.branding__fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.branding__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}
.branding__actions .field__hint {
  flex-basis: 100%;
}
.settings-card {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.25rem var(--space-lg) var(--space-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
}
.settings-card__title {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.settings-card__text {
  margin-top: calc(-1 * var(--space-xs));
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}
.form-grid {
  display: grid;
  gap: 0.875rem var(--space-md);
}
@media (min-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .form-grid__wide {
    grid-column: 1 / -1;
  }
}
.color-field {
  display: flex;
  gap: var(--space-xs);
}
.color-field input[type="color"] {
  width: 2.75rem;
  height: 2.5rem;
  flex-shrink: 0;
  padding: var(--space-2xs);
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--background-subtle);
  cursor: pointer;
}
.color-field .input {
  font-family: var(--font-mono);
  text-transform: lowercase;
}
.input[aria-invalid] {
  border-color: var(--destructive);
}
.logo-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}
.logo-field__preview {
  display: flex;
  width: 12rem;
  height: 5rem;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: repeating-conic-gradient(var(--checker) 0 25%, var(--paper-white) 0 50%) 0 0 / 14px 14px;
}
.logo-field__preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.logo-field__empty {
  font-size: 0.8125rem;
  color: var(--paper-white-muted);
}
.logo-field__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}
.logo-field__actions fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Locked: everything visible, nothing usable, and why. */
.branding--locked .branding__layout {
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}
.branding__lock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 1.25rem;
  border: 1px solid color-mix(in srgb, var(--teal) 40%, var(--border));
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--teal) 8%, var(--card));
}
.branding__lock > div {
  min-width: 14rem;
  flex: 1;
}
.branding__lock-icon {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--teal) 18%, transparent);
  color: var(--teal);
}
.branding__lock-icon svg {
  width: 1rem;
  height: 1rem;
}
.branding__lock-title {
  font-weight: 500;
}
.branding__lock-text {
  margin-top: var(--space-3xs);
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

/* The cover preview: a small A4 page, always on white like the PDF. */
.branding__preview-label {
  margin-bottom: var(--space-xs);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
.brand-cover {
  --brand: var(--brand-fallback);
  --brand-accent: var(--brand-accent-fallback);
  --brand-heading: "Inter", system-ui, sans-serif;
  --brand-body: "Inter", system-ui, sans-serif;
  position: relative;
  display: flex;
  aspect-ratio: 210 / 297;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0.5rem;
  background: var(--paper-white);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border);
  color: var(--paper-white-ink);
  font-family: var(--brand-body);
  font-size: 0.5rem;
  line-height: 1.4;
}
.brand-cover__wash {
  display: flex;
  height: 40%;
  flex-direction: column;
  padding: 7% 8.5% 0;
  border-top: 0.2rem solid var(--brand);
  background: color-mix(in srgb, var(--brand) 6%, var(--paper-white));
}
.brand-cover__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18%;
}
.brand-cover__logo {
  display: flex;
  height: 1.6rem;
  max-width: 55%;
  align-items: center;
  font-family: var(--brand-heading);
  font-size: 0.8rem;
  font-weight: 500;
}
.brand-cover__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.brand-cover__date {
  color: var(--paper-white-muted);
}
.brand-cover__eyebrow {
  color: var(--brand);
  font-size: 0.45rem;
  font-weight: 500;
}
.brand-cover__title {
  margin-top: 0.15rem;
  font-family: var(--brand-heading);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.12;
}
.brand-cover__site {
  margin-top: var(--space-2xs);
  color: var(--brand);
  font-family: var(--brand-heading);
  font-size: 0.75rem;
  font-weight: 500;
}
.brand-cover__score {
  display: flex;
  align-items: center;
  gap: 8%;
  margin: 6% 8.5% 0;
  padding: 6% 7%;
  border: 1px solid var(--paper-white-rule);
  border-radius: 0.375rem;
}
.brand-cover__ring {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--brand) 0 74%, color-mix(in srgb, var(--brand) 15%, var(--paper-white)) 74% 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 55%, var(--color-ink) 56%);
          mask: radial-gradient(circle, transparent 0 55%, var(--color-ink) 56%);
}
.brand-cover__ring span {
  display: none;
}
.brand-cover__score-text {
  display: flex;
  flex-direction: column;
}
.brand-cover__score-text b {
  font-family: var(--brand-heading);
  font-size: 0.8rem;
}
.brand-cover__score-text small {
  color: var(--paper-white-muted);
  font-size: 0.5rem;
}
.brand-cover__by {
  display: flex;
  flex-direction: column;
  margin: auto 8.5% 9%;
  padding-top: 5%;
  border-top: 1px solid var(--paper-white-rule);
}
.brand-cover__by small {
  color: var(--paper-white-muted);
  font-size: 0.4rem;
  font-weight: 500;
}
.brand-cover__by b {
  font-family: var(--brand-heading);
  font-size: 0.7rem;
}
.brand-cover__band {
  padding: 3.5% 8.5%;
  background: var(--brand);
  color: var(--paper-white);
  font-size: 0.45rem;
}

/* A canvas action the plan doesn't include: visible, locked, and why on hover. */
.cv-locked {
  position: relative;
  display: inline-flex;
}
.cv-locked .cv-btn {
  cursor: not-allowed;
  opacity: 0.6;
}
.cv-locked__tip {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 50;
  width: 17rem;
  padding: 0.625rem var(--space-sm);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--cv-surface, var(--card));
  box-shadow: var(--shadow-lg);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--foreground);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}
.cv-locked__tip a {
  color: var(--teal);
  font-weight: 500;
}
.cv-locked:hover .cv-locked__tip,
.cv-locked:focus-within .cv-locked__tip {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.15s ease;
}

/* New scan: the full scan's token maximum. */
[data-pages-field] + .toggle-option {
  margin-top: var(--space-md);
}
.full-budget {
  margin-top: var(--space-sm);
  padding-left: 2rem;
}
.full-budget__input {
  max-width: 10rem;
}

/* ---- Release report (a finished AI scan) ------------------------------------ */

.rr {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.rr-meta {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.rr-hero {
  --tone: var(--success);
  display: grid;
  gap: var(--space-lg);
  border: 1px solid color-mix(in srgb, var(--tone) 35%, var(--border));
  border-radius: var(--radius-xl);
  background: var(--card);
  padding: var(--space-lg);
}
.rr-hero--blocked {
  --tone: var(--destructive);
}
.rr-hero--incomplete {
  --tone: var(--warning);
}
@media (min-width: 768px) {
  .rr-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 2rem;
  }
}
.rr-hero__eyebrow {
  margin-bottom: 0.4rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--tone);
}
.rr-hero__verdict {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.rr-hero__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 18%, transparent);
  color: var(--tone);
}
.rr-hero__icon svg {
  width: 1.2rem;
  height: 1.2rem;
}
.rr-hero__lead {
  max-width: 44rem;
  margin-top: 0.6rem;
  font-size: 0.9375rem;
  color: var(--muted-foreground);
}
.rr-hero__counts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}
.rr-count {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  padding: var(--space-2xs) 0.7rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
.rr-count strong {
  font-weight: 500;
  color: var(--foreground);
}
.rr-count::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--subtle-foreground);
}
.rr-count--critical::before {
  background: var(--destructive);
}
.rr-count--important::before {
  background: var(--warning);
}
.rr-count--settled::before {
  background: var(--success);
}
.rr-hero__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}
.rr-hero__score-label {
  max-width: 9rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  text-align: center;
}

.rr-checks {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
}
.rr-check {
  --tone: var(--success);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border: 1px solid var(--border);
  border-top: 3px solid var(--tone);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: var(--space-md);
}
.rr-check--advice {
  --tone: var(--subtle-foreground);
}
.rr-check--blocked {
  --tone: var(--destructive);
}
.rr-check--incomplete {
  --tone: var(--warning);
}
.rr-check__head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.rr-check__icon {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--secondary);
  color: var(--foreground);
}
.rr-check__icon svg {
  width: 1.05rem;
  height: 1.05rem;
}
.rr-check__title {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 500;
}
.rr-state {
  border-radius: 999px;
  background: color-mix(in srgb, var(--tone) 15%, transparent);
  padding: 0.15rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--tone);
}
.rr-state--advice {
  color: var(--muted-foreground);
}
.rr-check__description,
.rr-check__note {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
.rr-check__note {
  margin-top: auto;
  border-top: 1px dashed var(--border);
  padding-top: 0.6rem;
  font-size: 0.75rem;
}
.rr-check__list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rr-sub {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
}
.rr-sub__mark {
  display: inline-flex;
  width: 1.1rem;
  height: 1.1rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--success) 15%, transparent);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--success);
}
.rr-sub--open .rr-sub__mark {
  background: var(--secondary);
  color: var(--muted-foreground);
}
.rr-sub--blocked .rr-sub__mark {
  background: color-mix(in srgb, var(--destructive) 15%, transparent);
  color: var(--destructive);
}
.rr-sub__count {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
}
.rr-sub--blocked .rr-sub__count {
  font-weight: 500;
  color: var(--destructive);
}
.rr-check__open {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--foreground);
  cursor: pointer;
}
.rr-check__open:hover {
  text-decoration: underline;
}
.rr-check__open:disabled {
  color: var(--subtle-foreground);
  cursor: default;
  text-decoration: none;
}

.rr-findings__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.rr-findings__head .scan-section-title {
  margin-bottom: 0;
}
.rr-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}
.rr-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  cursor: pointer;
}
.rr-tabs {
  display: flex;
  gap: var(--space-2xs);
  margin: var(--space-md) 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}
.rr-tab {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  padding: var(--space-xs) 0.65rem 0.6rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--muted-foreground);
  cursor: pointer;
}
.rr-tab:hover {
  color: var(--foreground);
}
.rr-tab--active {
  border-bottom-color: var(--foreground);
  color: var(--foreground);
}
.rr-tab__count {
  min-width: 1.3rem;
  border-radius: 999px;
  background: var(--secondary);
  padding: 0 0.35rem;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.rr-tab__count--blocked {
  background: color-mix(in srgb, var(--destructive) 18%, transparent);
  color: var(--destructive);
}
.rr-group + .rr-group {
  margin-top: var(--space-lg);
}
.rr-group__title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: var(--space-xs);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
.rr-group__count {
  font-weight: 500;
  letter-spacing: 0;
}
.rr-rows {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 0;
  list-style: none;
}
.rr-row + .rr-row {
  border-top: 1px solid var(--border);
}
.rr-row--settled {
  opacity: 0.6;
}
.rr-row__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "sev what chevron" "values values status";
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  list-style: none;
}
.rr-row__summary::-webkit-details-marker {
  display: none;
}
.rr-row__summary:hover {
  background: color-mix(in srgb, var(--secondary) 60%, transparent);
}
.rr-row__summary > :nth-child(1) {
  grid-area: sev;
}
.rr-row__summary > :nth-child(2) {
  grid-area: what;
}
.rr-row__summary > :nth-child(3) {
  grid-area: values;
}
.rr-row__summary > :nth-child(4) {
  grid-area: status;
  justify-self: end;
}
.rr-row__summary > :nth-child(5) {
  grid-area: chevron;
}
@media (min-width: 900px) {
  .rr-row__summary {
    grid-template-columns: 7.5rem minmax(0, 1.3fr) minmax(0, 1.4fr) 7rem 1rem;
    grid-template-areas: none;
  }
  .rr-row__summary > * {
    grid-area: auto !important;
  }
}
.rr-row__details[open] .issue-row__chevron {
  transform: rotate(180deg);
}
.rr-row__what {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.15rem;
}
.rr-row__title {
  font-size: 0.875rem;
  font-weight: 550;
}
.rr-row__where {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.rr-row__values {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.rr-row__values .issue-value {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rr-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  border-radius: 999px;
  background: var(--secondary);
  padding: 0 0.4rem;
  font-size: 0.7rem;
  color: var(--foreground);
}
.rr-status {
  border-radius: 999px;
  background: var(--secondary);
  padding: 0.1rem var(--space-xs);
  font-size: 0.72rem;
  font-weight: 550;
  white-space: nowrap;
}
.rr-status--resolved,
.rr-status--possibly_resolved {
  background: color-mix(in srgb, var(--success) 15%, transparent);
  color: var(--success);
}
.rr-row__body {
  display: grid;
  gap: var(--space-md);
  border-top: 1px dashed var(--border);
  padding: var(--space-md);
}
@media (min-width: 900px) {
  .rr-row__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  }
}
.rr-row__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}
.rr-row__explanation {
  font-size: 0.875rem;
}
.rr-row__quote {
  border-left: 2px solid var(--border-strong);
  padding-left: 0.6rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
.rr-row__facts {
  display: grid;
  width: 100%;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.8125rem;
}
.rr-row__facts > div {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--space-xs);
}
.rr-row__facts dt {
  color: var(--muted-foreground);
}
.rr-row__facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.rr-row__shot {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.rr-pages th[scope="row"] {
  font-weight: 500;
}
.rr-page {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.rr-page__thumb {
  width: 4.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.rr-page__path {
  display: block;
  font-size: 0.875rem;
}
.rr-page__title {
  display: block;
  max-width: 28rem;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted-foreground);
}
.rr-blockers {
  font-weight: 500;
  color: var(--destructive);
}

/* One container: centred and capped; the gutters grow past 1440. */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ===========================================================================
   Marketing pieces the app shares: the point-cloud scan, switches, plan cards (the rest is in marketing.css).
   =========================================================================== */

.ticks {
  position: relative;
}
.ticks::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: var(--rule-hair) solid var(--color-rule-2);
  -webkit-mask: conic-gradient(at var(--tick) var(--tick), transparent 75%, var(--color-ink) 0) 0 0 / calc(100% - var(--tick)) calc(100% - var(--tick));
  mask: conic-gradient(at var(--tick) var(--tick), transparent 75%, var(--color-ink) 0) 0 0 / calc(100% - var(--tick)) calc(100% - var(--tick));
}

.num {
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}
.u {
  color: var(--color-muted);
  font-size: max(0.75em, 0.75rem);
  margin-left: 0.15em;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-md);
  font-weight: 400;
  letter-spacing: -0.01em;
  border-radius: var(--radius-sm);
}
.logo:hover {
  opacity: 1;
}
.logo__mark {
  width: 1.5rem;
  height: 1.5rem;
}
.logo__mark-bg {
  fill: var(--color-ink);
}
.logo__mark-check {
  stroke: var(--color-accent);
}
:root[data-theme=light] .logo__mark-check {
  stroke: var(--color-accent-ink);
}
.logo__word-accent {
  color: var(--color-muted);
  font-weight: 300;
}

/* The scan: the sample page as points inside corner ticks */
.mk-scan {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 520px;
  height: min(66dvh, 640px);
  padding: var(--space-md);
}
.mk-scan__cloud {
  flex: 1;
  width: 100%;
  min-height: 0;
}
.mk-scan__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  padding-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.mk-scan__score {
  color: var(--color-ink-2);
}
.mk-scan__score b {
  font-size: var(--text-lg);
  color: var(--color-ink);
}
.mk-scan__findings {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: min(17rem, 46%);
}
.mk-callout {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-xs) var(--space-sm);
  border-left: var(--rule-hair) solid var(--color-accent);
  background: var(--color-paper-2);
  font-size: var(--text-sm);
}
.mk-callout b {
  font-weight: 400;
  color: var(--color-ink);
}
.mk-callout small {
  font-size: var(--text-xs);
  color: var(--color-muted);
}
/* With the script running, each callout hangs off its point by a leader. */
.mk-scan.is-live .mk-scan__findings {
  inset: 0;
  width: auto;
  pointer-events: none;
}
.mk-scan.is-live .mk-callout {
  position: absolute;
  left: calc(var(--space-md) + var(--ax, 50%));
  top: calc(var(--space-md) + var(--ay, 50%));
  width: max-content;
  max-width: 15rem;
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-card);
  transform: translate(var(--dx, 28px), -50%);
}
.mk-scan.is-live .mk-callout::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: 28px;
  border-top: var(--rule-hair) solid var(--color-accent);
}
.mk-scan.is-live .mk-callout::after {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  right: calc(100% + 26px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
}
.mk-scan.is-live .mk-callout--c {
  --dx: calc(-100% - 28px);
}
.mk-scan.is-live .mk-callout--c::before {
  right: auto;
  left: 100%;
}
.mk-scan.is-live .mk-callout--c::after {
  right: auto;
  left: calc(100% + 26px);
}
.mk-scan--layers {
  height: auto;
  min-height: 480px;
  aspect-ratio: 5 / 4;
}
@media (max-width: 60rem) {
  .mk-scan,
  .mk-scan--layers {
    min-height: 0;
    height: auto;
  }
  .mk-scan__cloud {
    flex: none;
    aspect-ratio: 4 / 3;
  }
  .mk-scan--layers {
    aspect-ratio: auto;
  }
  .mk-scan__findings,
  .mk-scan.is-live .mk-scan__findings {
    position: static;
    width: auto;
    pointer-events: auto;
    margin-top: var(--space-sm);
  }
  .mk-scan.is-live .mk-callout {
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    border: 0;
    border-left: var(--rule-hair) solid var(--color-accent);
    border-radius: 0;
  }
  .mk-scan.is-live .mk-callout::before,
  .mk-scan.is-live .mk-callout::after {
    display: none;
  }
}

/* Layers: the four categories as working switches beside the scan */
.mk-switch {
  position: relative;
  flex-shrink: 0;
  width: 2.75rem;
  height: 1.5rem;
  padding: 0;
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-pill);
  background: var(--color-paper-3);
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.mk-switch::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--space-xs));
}
.mk-switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--color-muted);
  transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.mk-switch[aria-pressed=true] {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.mk-switch[aria-pressed=true] .mk-switch__knob {
  transform: translateX(1.25rem);
  background: var(--color-accent-ink);
}
.mk-switch:hover {
  border-color: var(--color-muted);
}
.mk-switch:active .mk-switch__knob {
  transform: scale(0.9);
}
.mk-switch[aria-pressed=true]:active .mk-switch__knob {
  transform: translateX(1.25rem) scale(0.9);
}
.mk-switch:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
.mk-switch:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  background: var(--color-paper-2);
}

/* Pricing */
.pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-columns);
  align-items: stretch;
}
@media (min-width: 60rem) {
  .pricing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-xl) var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper);
}
.plan-card--featured,
.plan-card--current {
  border-color: var(--color-accent);
}
.plan-card__ribbon {
  position: absolute;
  top: calc(-1 * var(--space-sm));
  left: var(--space-lg);
  padding: var(--space-3xs) var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-size: var(--text-xs);
  font-weight: 400;
}
.plan-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.plan-card__name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
}
.plan-card__name {
  font-size: var(--text-title);
  font-weight: 300;
}
.plan-card__tagline {
  min-height: 2.6em;
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.plan-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}
.plan-card__amount {
  font-size: var(--text-display-s);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.plan-card__period {
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.plan-card__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.plan-card__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.plan-card__feature svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: var(--space-2xs);
  color: var(--color-accent);
}
.plan-card__feature--off,
.plan-card__feature--off svg {
  color: var(--subtle-foreground);
}
.plan-card__action {
  margin-top: auto;
}
.plan-card__action .button {
  height: 3rem;
}
.plan-card__note {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* Meta rows: parts side by side, parted by space, never by dots */
.cv-top__meta,
.rr-row__where {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs) var(--space-sm);
}

@media (prefers-reduced-motion: reduce) {
  .mk-switch__knob,
  .button,
  .button__arrow {
    transition: none;
  }
}

/* App screens (Vantage): light display heads, measured figures, quiet chrome. */
.page-header__title {
  font-weight: 300;
  font-variation-settings: "SHRP" 100;
  letter-spacing: var(--tracking-display);
}
@media (min-width: 640px) {
  .page-header__title {
    font-size: var(--text-3xl);
  }
}
.section-header__title,
.card__title {
  font-weight: 400;
  letter-spacing: -0.01em;
}
.stat-tile__value {
  font-size: var(--text-3xl);
  font-weight: 300;
  letter-spacing: -0.03em;
}
.stat-tile__label {
  font-weight: 400;
}