/**
 * DEPLOY1 design tokens — Single Source of Truth
 * Dual-theme (Light & Dark) architecture with semantic variables.
 */

:root {
  /* Light Mode Palette */
  --d1-bg-base: #f9f9f9;
  --d1-bg-surface: #ffffff;
  --d1-bg-subtle: #f3f3f3;
  --d1-bg-muted: #eeeeee;
  --d1-bg-elevated: #ffffff;
  --d1-bg-slate: #0f172a;

  --d1-text-primary: #0f172a;
  --d1-text-secondary: #45464d;
  --d1-text-muted: #76777d;
  --d1-text-inverse: #ffffff;

  --d1-border-subtle: #e2e8f0;
  --d1-border-strong: #c6c6cd;
  --d1-border-dark: #0f172a;

  --d1-accent-primary: #0051d5;
  --d1-accent-hover: #003ea7;
  --d1-accent-status: #10b981;
  --d1-accent-warning: #ea580c;

  /* Legacy space-separated RGB triplet compatibility */
  --d1-color-navy-950: 15 23 42;
  --d1-color-navy-900: 19 27 46;
  --d1-color-blue-600: 0 81 213;
  --d1-color-blue-700: 0 62 167;
  --d1-color-accent-600: 234 88 12;
  --d1-color-status-500: 16 185 129;

  --d1-color-ink-900: 15 23 42;
  --d1-color-ink-700: 69 70 77;
  --d1-color-ink-600: 118 119 125;
  --d1-color-ink-400: 198 198 205;

  --d1-color-line-200: 226 232 240;
  --d1-color-line-300: 198 198 205;
  --d1-color-border-dark: 15 23 42;

  --d1-color-surface: 249 249 249;
  --d1-color-surface-subtle: 243 243 243;
  --d1-color-surface-muted: 238 238 238;

  --d1-color-text-primary: var(--d1-color-ink-900);
  --d1-color-text-secondary: var(--d1-color-ink-700);
  --d1-color-text-muted: var(--d1-color-ink-600);
  --d1-color-text-inverse: 255 255 255;

  /* Typography Stacks */
  --d1-font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, Roboto, sans-serif;
  --d1-font-display: "Outfit", ui-sans-serif, system-ui, -apple-system, Roboto, sans-serif;
  --d1-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --d1-font-fallback-system: var(--d1-font-sans);

  /* Spacing Scale */
  --d1-space-1: 0.25rem;
  --d1-space-2: 0.5rem;
  --d1-space-3: 0.75rem;
  --d1-space-4: 1rem;
  --d1-space-5: 1.25rem;
  --d1-space-6: 1.5rem;
  --d1-space-8: 2rem;
  --d1-space-10: 2.5rem;
  --d1-space-12: 3rem;
  --d1-space-16: 4rem;
  --d1-space-20: 5rem;
  --d1-space-24: 6rem;

  /* Geometry & Radius */
  --d1-radius-sm: 0.25rem;
  --d1-radius-md: 0.5rem;
  --d1-radius-lg: 0.75rem;
  --d1-radius-xl: 1rem;
  --d1-radius-2xl: 1.25rem;
  --d1-radius-full: 9999px;

  /* Motion */
  --d1-motion-fast: 120ms;
  --d1-motion-base: 180ms;

  --d1-focus-ring: 0 0 0 0.25rem rgba(0, 81, 213, 0.2);
}

/* Dark Mode Override Tokens */
.dark {
  --d1-bg-base: #0f131b;
  --d1-bg-surface: #181c23;
  --d1-bg-subtle: #1c2027;
  --d1-bg-muted: #262a32;
  --d1-bg-elevated: #31353d;
  --d1-bg-slate: #061325;

  --d1-text-primary: #dfe2ed;
  --d1-text-secondary: #bbcabf;
  --d1-text-muted: #86948a;
  --d1-text-inverse: #0f131b;

  --d1-border-subtle: #1f2937;
  --d1-border-strong: #3c4a42;
  --d1-border-dark: #374151;

  --d1-accent-primary: #10b981;
  --d1-accent-hover: #06b6d4;
  --d1-accent-status: #10b981;
  --d1-accent-warning: #ea580c;

  --d1-color-surface: 15 19 27;
  --d1-color-surface-subtle: 24 28 35;
  --d1-color-surface-muted: 28 32 39;

  --d1-color-ink-900: 223 226 237;
  --d1-color-ink-700: 187 202 191;
  --d1-color-ink-600: 134 148 138;
  --d1-color-ink-400: 60 74 66;

  --d1-color-line-200: 31 41 55;
  --d1-color-line-300: 60 74 66;
}

/*!
 * DEPLOY1 base styles.
 *
 * Shared, framework-independent global rules used by the blog. The agency
 * app relies on Tailwind's preflight for its reset and imports only the
 * tokens; rules in this file must therefore never depend on Tailwind and
 * must be safe to include in any order.
 */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--d1-font-sans);
  font-size: var(--d1-type-base);
  line-height: var(--d1-type-base-lh);
  color: rgb(var(--d1-color-text-primary));
  background-color: rgb(var(--d1-color-surface));
  -webkit-font-smoothing: antialiased;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--d1-font-display);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  margin: 0;
}

p + p {
  margin-top: var(--d1-space-4);
}

a {
  color: inherit;
}

button {
  font: inherit;
}

::selection {
  background-color: rgb(var(--d1-color-accent-600));
  color: rgb(var(--d1-color-surface));
}

/* Visible, consistent focus indicator for keyboard users. */
:focus-visible {
  outline: 2px solid rgb(var(--d1-color-blue-600));
  outline-offset: 2px;
}

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

/* Respect users who prefer reduced motion: collapse animation and
   scroll behaviors without removing content or functionality. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/*!
 * DEPLOY1 shared component primitives.
 *
 * Extracted where the agency site and blog genuinely benefit from shared
 * visual language: layout shells, buttons, badges, cards, links, form
 * controls and editorial prose. Keep this file small and intentional.
 *
 * Class names are plain CSS (no Tailwind dependency) so both apps consume
 * the exact same primitives.
 */

/* ---------- Layout shells ---------- */

.container {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: var(--d1-space-6);
}

.container--narrow {
  max-width: 48rem;
}

.section {
  padding-block: var(--d1-space-16) var(--d1-space-20);
}

.section--subtle {
  background-color: rgb(var(--d1-color-surface-subtle));
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--d1-space-2);
  min-height: 2.75rem;
  padding: var(--d1-space-3) var(--d1-space-6);
  border-radius: var(--d1-radius-md);
  border: 1px solid transparent;
  font-family: var(--d1-font-display);
  font-weight: 700;
  font-size: var(--d1-type-sm);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--d1-motion-base) ease,
    border-color var(--d1-motion-base) ease,
    color var(--d1-motion-base) ease,
    box-shadow var(--d1-motion-base) ease;
}

.btn--primary {
  background-color: rgb(var(--d1-color-blue-600));
  color: rgb(var(--d1-color-surface));
}

.btn--primary:hover {
  background-color: rgb(var(--d1-color-blue-700));
}

.btn--dark {
  background-color: rgb(var(--d1-color-navy-950));
  color: rgb(var(--d1-color-surface));
}

.btn--dark:hover {
  background-color: rgb(var(--d1-color-navy-900));
}

.btn--secondary {
  background-color: rgb(var(--d1-color-surface));
  color: rgb(var(--d1-color-text-primary));
  border-color: rgb(var(--d1-color-line-300));
}

.btn--secondary:hover {
  border-color: rgb(var(--d1-color-ink-900));
}

.btn--on-dark {
  background-color: rgb(var(--d1-color-surface));
  color: rgb(var(--d1-color-navy-950));
}

.btn--ghost-dark {
  background-color: transparent;
  color: rgb(var(--d1-color-text-inverse));
  border-color: rgb(255 255 255 / 0.2);
}

.btn--ghost-dark:hover {
  background-color: rgb(255 255 255 / 0.08);
}

.btn--block {
  width: 100%;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---------- Badges & labels ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--d1-space-2);
  padding: var(--d1-space-1) var(--d1-space-3);
  border-radius: var(--d1-radius-full);
  border: 1px solid rgb(var(--d1-color-line-200));
  background-color: rgb(var(--d1-color-surface));
  font-family: var(--d1-font-mono);
  font-size: var(--d1-type-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(var(--d1-color-text-secondary));
}

.badge--status {
  color: rgb(var(--d1-color-status-500));
  border-color: rgb(var(--d1-color-status-500));
  background-color: rgb(var(--d1-color-status-500) / 0.08);
}

.badge--accent {
  color: rgb(var(--d1-color-accent-600));
  border-color: rgb(var(--d1-color-accent-600));
  background-color: rgb(var(--d1-color-accent-600) / 0.08);
}

.badge--inverse {
  background-color: rgb(255 255 255 / 0.06);
  border-color: rgb(255 255 255 / 0.12);
  color: rgb(var(--d1-color-surface));
}

.eyebrow {
  font-family: var(--d1-font-mono);
  font-size: var(--d1-type-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--d1-color-blue-600));
}

/* ---------- Cards ---------- */

.card {
  border: 1px solid rgb(var(--d1-color-line-200));
  border-radius: var(--d1-radius-xl);
  background-color: rgb(var(--d1-color-surface));
  box-shadow: var(--d1-shadow-xs);
}

.card--emphasized {
  border-width: 2px;
  border-color: rgb(var(--d1-color-blue-600));
  box-shadow: var(--d1-shadow-md);
}

/* ---------- Links ---------- */

.link-subtle {
  color: rgb(var(--d1-color-text-secondary));
  text-decoration: none;
  transition: color var(--d1-motion-fast) ease;
}

.link-subtle:hover {
  color: rgb(var(--d1-color-text-primary));
}

/* ---------- Forms ---------- */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--d1-space-2);
}

.field__label {
  font-family: var(--d1-font-mono);
  font-size: var(--d1-type-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(var(--d1-color-text-primary));
}

.field__required {
  color: rgb(var(--d1-color-accent-600));
}

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  padding: var(--d1-space-4);
  border: 1px solid rgb(var(--d1-color-line-200));
  border-radius: var(--d1-radius-lg);
  background-color: rgb(var(--d1-color-surface-subtle));
  font-family: inherit;
  font-size: var(--d1-type-sm);
  color: rgb(var(--d1-color-text-primary));
  transition:
    border-color var(--d1-motion-fast) ease,
    background-color var(--d1-motion-fast) ease;
}

.field__input:hover,
.field__select:hover,
.field__textarea:hover {
  border-color: rgb(var(--d1-color-ink-400));
}

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  outline: none;
  border-color: rgb(var(--d1-color-blue-600));
  box-shadow: var(--d1-focus-ring);
  background-color: rgb(var(--d1-color-surface));
}

.field__input[aria-invalid="true"],
.field__select[aria-invalid="true"],
.field__textarea[aria-invalid="true"] {
  border-color: rgb(var(--d1-color-accent-600));
}

.field__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* ---------- Editorial prose (used by the blog and rich content) ---------- */

.prose {
  font-size: var(--d1-type-lg);
  line-height: var(--d1-type-lg-lh);
  color: rgb(var(--d1-color-text-primary));
}

.prose > * + * {
  margin-top: var(--d1-space-6);
}

.prose h2 {
  font-size: var(--d1-type-display-xl);
  line-height: var(--d1-type-display-xl-lh);
  letter-spacing: -0.02em;
  margin-top: var(--d1-space-12);
}

.prose h3 {
  font-size: 1.4rem;
  margin-top: var(--d1-space-10);
}

.prose a {
  color: rgb(var(--d1-color-blue-600));
  text-decoration: underline;
  text-decoration-color: rgb(var(--d1-color-blue-600) / 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--d1-motion-fast) ease;
}

.prose a:hover {
  text-decoration-color: rgb(var(--d1-color-blue-600));
}

.prose ul,
.prose ol {
  padding-left: 1.5rem;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li + li {
  margin-top: var(--d1-space-2);
}

.prose blockquote {
  margin-inline: 0;
  padding: var(--d1-space-4) var(--d1-space-6);
  border-left: 3px solid rgb(var(--d1-color-blue-600));
  background-color: rgb(var(--d1-color-surface-subtle));
  border-radius: 0 var(--d1-radius-lg) var(--d1-radius-lg) 0;
  color: rgb(var(--d1-color-text-secondary));
}

.prose blockquote p {
  margin: 0;
}

.prose code {
  font-family: var(--d1-font-mono);
  font-size: 0.875em;
  padding: 0.15em 0.4em;
  border-radius: 0.25rem;
  background-color: rgb(var(--d1-color-surface-muted));
  border: 1px solid rgb(var(--d1-color-line-200));
}

.prose pre {
  overflow-x: auto;
  padding: var(--d1-space-6);
  border-radius: var(--d1-radius-lg);
  background-color: rgb(var(--d1-color-navy-950));
  border: 1px solid rgb(var(--d1-color-border-dark));
}

.prose pre code {
  display: block;
  padding: 0;
  background: none;
  border: none;
  color: #e2e8f0;
  font-size: var(--d1-type-sm);
  line-height: 1.7;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--d1-type-base);
}

.prose th,
.prose td {
  text-align: left;
  padding: var(--d1-space-3) var(--d1-space-4);
  border-bottom: 1px solid rgb(var(--d1-color-line-200));
}

.prose th {
  font-family: var(--d1-font-display);
  font-weight: 700;
  background-color: rgb(var(--d1-color-surface-subtle));
}

.prose img {
  border-radius: var(--d1-radius-lg);
  border: 1px solid rgb(var(--d1-color-line-200));
}

/* Callouts: out of band notes that should not be confused with body copy. */
.callout {
  padding: var(--d1-space-5) var(--d1-space-6);
  border-radius: var(--d1-radius-lg);
  border-left: 3px solid rgb(var(--d1-color-accent-600));
  background-color: rgb(var(--d1-color-accent-600) / 0.06);
  font-size: var(--d1-type-base);
  color: rgb(var(--d1-color-text-secondary));
}

.callout__title {
  display: block;
  margin-bottom: var(--d1-space-2);
  font-family: var(--d1-font-mono);
  font-size: var(--d1-type-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--d1-color-accent-700));
}

/* Code copy button attached to code blocks (progressive enhancement). */
.code-copy {
  position: relative;
}

.code-copy__button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: var(--d1-radius-sm);
  border: 1px solid rgb(255 255 255 / 0.15);
  background-color: rgb(255 255 255 / 0.06);
  color: #cbd5e1;
  font-family: var(--d1-font-mono);
  font-size: 0.75rem;
  cursor: pointer;
  transition:
    background-color var(--d1-motion-fast) ease,
    color var(--d1-motion-fast) ease;
}

.code-copy__button:hover {
  background-color: rgb(255 255 255 / 0.14);
  color: #ffffff;
}

/**
 * Blog-specific styles, layered on top of the shared design primitives
 * (packages/design: tokens.css, base.css, components.css).
 *
 * Scope is intentionally narrow: layout chrome for the blog shell, the
 * post/listing grids, search, reading progress and code copy affordances.
 * Anything that could be shared with the agency already lives in the design
 * package — do not re-declare tokens or primitives here.
 */

/* ---------- Header ---------- */

.blog-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(var(--d1-color-surface) / 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgb(var(--d1-color-line-200));
}

.blog-header__inner {
  display: flex;
  align-items: center;
  gap: var(--d1-space-6);
  min-height: 4.5rem;
}

.blog-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--d1-space-2);
  font-family: var(--d1-font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: rgb(var(--d1-color-text-primary));
}

.blog-brand__mark {
  width: 1.5rem;
  height: 1.5rem;
  color: rgb(var(--d1-color-navy-950));
}

.blog-brand__tag {
  font-style: normal;
  font-family: var(--d1-font-mono);
  font-size: var(--d1-type-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--d1-color-blue-600));
}

.blog-nav {
  display: flex;
  align-items: center;
  gap: var(--d1-space-5);
  margin-inline-start: var(--d1-space-4);
  font-size: var(--d1-type-sm);
  color: rgb(var(--d1-color-text-secondary));
}

.blog-nav a {
  text-decoration: none;
  color: inherit;
  transition: color var(--d1-motion-fast) ease;
}

.blog-nav a:hover {
  color: rgb(var(--d1-color-text-primary));
}

.blog-header__actions {
  display: flex;
  align-items: center;
  gap: var(--d1-space-4);
  margin-inline-start: auto;
  min-width: 0;
}

.btn--sm {
  min-height: 2.25rem;
  padding: var(--d1-space-2) var(--d1-space-4);
  font-size: var(--d1-type-xs);
}

/* ---------- Search ---------- */

.blog-search {
  position: relative;
}

.blog-search__input {
  width: 12rem;
  padding: var(--d1-space-2) var(--d1-space-4);
  border: 1px solid rgb(var(--d1-color-line-200));
  border-radius: var(--d1-radius-full);
  background-color: rgb(var(--d1-color-surface-subtle));
  font-size: var(--d1-type-sm);
  color: rgb(var(--d1-color-text-primary));
  transition:
    border-color var(--d1-motion-fast) ease,
    background-color var(--d1-motion-fast) ease;
}

.blog-search__input:focus {
  outline: none;
  border-color: rgb(var(--d1-color-blue-600));
  background-color: rgb(var(--d1-color-surface));
  box-shadow: var(--d1-focus-ring);
}

.blog-search__results {
  position: absolute;
  top: calc(100% + var(--d1-space-2));
  right: 0;
  width: min(22rem, 80vw);
  max-height: 24rem;
  overflow-y: auto;
  margin: 0;
  padding: var(--d1-space-2);
  list-style: none;
  background: rgb(var(--d1-color-surface));
  border: 1px solid rgb(var(--d1-color-line-200));
  border-radius: var(--d1-radius-lg);
  box-shadow: var(--d1-shadow-lg);
}

.blog-search__result {
  border-radius: var(--d1-radius-md);
}

.blog-search__result a {
  display: block;
  padding: var(--d1-space-3) var(--d1-space-4);
  text-decoration: none;
}

.blog-search__result:hover,
.blog-search__result[aria-selected="true"] {
  background-color: rgb(var(--d1-color-surface-subtle));
}

.blog-search__result-title {
  display: block;
  font-family: var(--d1-font-display);
  font-weight: 700;
  font-size: var(--d1-type-sm);
  color: rgb(var(--d1-color-text-primary));
}

.blog-search__result-meta {
  display: block;
  margin-top: var(--d1-space-1);
  font-size: var(--d1-type-xs);
  color: rgb(var(--d1-color-text-muted));
}

/* ---------- Sections & headings ---------- */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--d1-space-4);
  margin-bottom: var(--d1-space-8);
}

.section-head h2 {
  font-size: var(--d1-type-display-xl);
  line-height: var(--d1-type-display-xl-lh);
}

.section-head--mt {
  margin-top: var(--d1-space-16);
}

.section-head__count {
  font-family: var(--d1-font-mono);
  font-size: var(--d1-type-xs);
  color: rgb(var(--d1-color-text-muted));
}

/* ---------- Hero ---------- */

.blog-hero {
  padding-block: var(--d1-space-16) var(--d1-space-12);
  border-bottom: 1px solid rgb(var(--d1-color-line-200));
  background-color: rgb(var(--d1-color-surface));
}

.blog-hero h1 {
  max-width: 48rem;
  margin-top: var(--d1-space-5);
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.blog-hero h1 em {
  font-style: normal;
  color: rgb(var(--d1-color-blue-600));
}

.blog-hero__lead {
  max-width: 40rem;
  margin-top: var(--d1-space-5);
  font-size: var(--d1-type-lg);
  color: rgb(var(--d1-color-text-secondary));
}

.listing-hero h1 {
  margin-top: var(--d1-space-4);
}

.listing-hero .badge {
  text-transform: capitalize;
}

/* ---------- Post grid & cards ---------- */

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: var(--d1-space-6);
}

.post-card {
  display: flex;
  border: 1px solid rgb(var(--d1-color-line-200));
  border-radius: var(--d1-radius-xl);
  background: rgb(var(--d1-color-surface));
  box-shadow: var(--d1-shadow-xs);
  transition:
    border-color var(--d1-motion-fast) ease,
    box-shadow var(--d1-motion-fast) ease;
}

.post-card:hover {
  border-color: rgb(var(--d1-color-ink-400));
  box-shadow: var(--d1-shadow-md);
}

.post-card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--d1-space-6);
  text-decoration: none;
  color: inherit;
}

.post-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--d1-space-3);
  font-family: var(--d1-font-mono);
  font-size: var(--d1-type-xs);
  color: rgb(var(--d1-color-text-muted));
}

.post-card__title {
  margin-top: var(--d1-space-4);
  font-family: var(--d1-font-display);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: rgb(var(--d1-color-text-primary));
}

.post-card__excerpt {
  margin-top: var(--d1-space-3);
  font-size: var(--d1-type-sm);
  color: rgb(var(--d1-color-text-secondary));
}

.post-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--d1-space-3);
  margin-top: auto;
  padding-top: var(--d1-space-5);
  font-family: var(--d1-font-mono);
  font-size: var(--d1-type-xs);
  color: rgb(var(--d1-color-text-muted));
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--d1-space-2);
}

.badge-row .badge {
  text-decoration: none;
  transition: border-color var(--d1-motion-fast) ease;
}

.badge--muted {
  color: rgb(var(--d1-color-text-muted));
}

.badge--muted:hover {
  border-color: rgb(var(--d1-color-line-300));
}

/* ---------- Reading progress ---------- */

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: rgb(var(--d1-color-blue-600));
  z-index: 60;
}

/* ---------- Article ---------- */

.post {
  padding-block: var(--d1-space-12) var(--d1-space-20);
}

.post__back {
  display: inline-block;
  margin-bottom: var(--d1-space-8);
  font-size: var(--d1-type-sm);
}

.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--d1-space-3);
  font-family: var(--d1-font-mono);
  font-size: var(--d1-type-xs);
  color: rgb(var(--d1-color-text-muted));
}

.post__updated {
  padding-left: var(--d1-space-3);
  border-left: 1px solid rgb(var(--d1-color-line-200));
}

.post__title {
  margin-top: var(--d1-space-5);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.post__description {
  margin-top: var(--d1-space-5);
  font-size: var(--d1-type-lg);
  color: rgb(var(--d1-color-text-secondary));
}

.post__author {
  display: inline-flex;
  align-items: center;
  gap: var(--d1-space-3);
  margin-top: var(--d1-space-6);
  padding: var(--d1-space-3) var(--d1-space-4);
  background: rgb(var(--d1-color-surface-subtle));
  border: 1px solid rgb(var(--d1-color-line-200));
  border-radius: var(--d1-radius-lg);
}

.post__author-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--d1-radius-full);
  background: rgb(var(--d1-color-navy-950));
  color: rgb(var(--d1-color-surface));
  font-family: var(--d1-font-display);
  font-weight: 800;
}

.post__author strong,
.post__author span {
  display: block;
}

.post__author span {
  font-size: var(--d1-type-xs);
  color: rgb(var(--d1-color-text-muted));
}

.post .prose {
  margin-top: var(--d1-space-12);
}

/* ---------- Table of contents ---------- */

.toc {
  margin-top: var(--d1-space-8);
  padding: var(--d1-space-5) var(--d1-space-6);
  border: 1px solid rgb(var(--d1-color-line-200));
  border-radius: var(--d1-radius-lg);
  background: rgb(var(--d1-color-surface-subtle));
}

.toc h2 {
  font-size: var(--d1-type-lg);
  margin-bottom: var(--d1-space-3);
}

.toc__list {
  display: grid;
  gap: var(--d1-space-2);
  margin: 0;
}

.toc__item a {
  color: rgb(var(--d1-color-text-secondary));
  text-decoration: none;
}

.toc__item a:hover {
  color: rgb(var(--d1-color-blue-600));
  text-decoration: underline;
}

.toc__item--sub {
  margin-inline-start: var(--d1-space-4);
}

/* ---------- Heading anchors ---------- */

.prose h2,
.prose h3,
.prose h4 {
  scroll-margin-top: 5rem;
}

.heading-anchor {
  display: inline-block;
  margin-inline-start: -1.25rem;
  padding-inline-end: 0.25rem;
  width: 1.25rem;
  color: rgb(var(--d1-color-text-muted));
  text-decoration: none;
}

@media (hover: hover) {
  .heading-anchor {
    opacity: 0;
  }

  .prose h2:hover .heading-anchor,
  .prose h3:hover .heading-anchor {
    opacity: 1;
  }
}

.heading-anchor:focus {
  opacity: 1;
}

/* ---------- 404 ---------- */

.not-found {
  padding-block: var(--d1-space-20);
}

.not-found h1 {
  margin-top: var(--d1-space-4);
  font-size: var(--d1-type-display-3xl);
  line-height: var(--d1-type-display-3xl-lh);
}

.not-found__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--d1-space-3);
  margin-top: var(--d1-space-8);
}

/* ---------- Footer ---------- */

.blog-footer {
  padding-block: var(--d1-space-12);
  background: rgb(var(--d1-color-navy-950));
  color: rgb(var(--d1-color-ink-400));
  border-top: 1px solid rgb(var(--d1-color-border-dark));
}

.blog-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--d1-space-6);
}

.blog-footer__brand strong {
  font-family: var(--d1-font-display);
  color: rgb(var(--d1-color-surface));
}

.blog-footer__brand p {
  margin-top: var(--d1-space-2);
  font-size: var(--d1-type-sm);
  color: rgb(var(--d1-color-ink-400));
}

.blog-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--d1-space-2);
  font-size: var(--d1-type-sm);
}

.blog-footer__links a {
  color: rgb(var(--d1-color-ink-400));
  text-decoration: none;
}

.blog-footer__links a:hover {
  color: rgb(var(--d1-color-surface));
}

.blog-footer__legal {
  width: 100%;
  padding-top: var(--d1-space-6);
  border-top: 1px solid rgb(var(--d1-color-border-dark));
  font-family: var(--d1-font-mono);
  font-size: var(--d1-type-xs);
}

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

@media (max-width: 56rem) {
  .blog-header__inner {
    flex-wrap: wrap;
    padding-block: var(--d1-space-3);
  }

  .blog-nav {
    gap: var(--d1-space-4);
    margin-inline-start: 0;
  }

  .blog-header__actions {
    margin-inline-start: auto;
  }

  .blog-search__input {
    width: 8rem;
  }
}

@media (max-width: 40rem) {
  .blog-search__input {
    width: 6.5rem;
  }

  .blog-header__actions .btn {
    display: none;
  }
}

/* Dual-Theme (Light & Dark) Surface & Typography Binding */

body {
  background-color: var(--d1-bg-base);
  color: var(--d1-text-primary);
  transition:
    background-color var(--d1-motion-base) ease,
    color var(--d1-motion-base) ease;
}

.blog-header {
  background-color: var(--d1-bg-base);
  border-bottom: 1px solid var(--d1-border-subtle);
}

.dark body {
  background-color: #0f131b;
  color: #dfe2ed;
}

.dark .bg-surface {
  background-color: #0f131b;
}

.dark .bg-canvas-base {
  background-color: #181c23;
  color: #dfe2ed;
}

.dark .bg-canvas-subtle {
  background-color: #111827;
}

.dark .bg-canvas-surface {
  background-color: #1f2937;
}

.dark .text-primary {
  color: #4edea3;
}

.dark .text-text-primary {
  color: #dfe2ed;
}

.dark .text-text-secondary {
  color: #bbcabf;
}

.dark .text-text-muted {
  color: #86948a;
}

.dark .border-subtle {
  border-color: #1f2937;
}

.dark .bg-surface-container {
  background-color: #1c2027;
}

.dark .bg-surface-container-low {
  background-color: #181c23;
}

.dark .bg-surface-container-high {
  background-color: #262a32;
}

.dark .bg-surface-container-lowest {
  background-color: #0a0e15;
}

.dark .blog-search__results {
  background-color: #181c23;
  border-color: #374151;
  color: #dfe2ed;
}

.dark .blog-search__results li a {
  color: #dfe2ed;
}

.dark .blog-search__results li a:hover,
.dark .blog-search__results li a:focus {
  background-color: #262a32;
}

/**
 * DEPLOY1.BLOG publication stylesheet — self-hosted, zero third-party.
 *
 * Reproduces the reference editorial design (a11y toolbar, sticky header,
 * hero + telemetry, format pills, flagship paper card, research grid,
 * obsidian knowledge graph, latency sandbox, field notes, audio papers,
 * learning tracks, manifesto + brief, queue drawer, search modal, toast,
 * footer) with system font stacks so no Google Fonts request is needed.
 * employer-approved palette: surface #faf8ff, obsidian #061325,
 * secondary #0051d5, launch orange #C2410C, success #059669.
 */

:root {
  --pub-surface: #faf8ff;
  --pub-canvas: #ffffff;
  --pub-subtle: #f8fafc;
  --pub-container: #eaedff;
  --pub-container-low: #f2f3ff;
  --pub-container-high: #e2e7ff;
  --pub-line: #e2e8f0;
  --pub-line-strong: #cbd5e1;
  --pub-ink: #0a0e1a;
  --pub-primary: #000f22;
  --pub-secondary: #0051d5;
  --pub-secondary-hover: #1d4ed8;
  --pub-orange: #c2410c;
  --pub-orange-soft: #fff7ed;
  --pub-green: #059669;
  --pub-muted: #64748b;
  --pub-body: #334155;
  --pub-obsidian: #061325;
  --pub-radius: 0.75rem;
  --pub-radius-lg: 1rem;
  --pub-font-display: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --pub-font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --pub-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

html {
  scroll-behavior: smooth;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  background: var(--pub-surface);
  color: var(--pub-ink);
  font-family: var(--pub-font-body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
main > :first-child {
  margin-top: 0 !important;
}
main > :last-child {
  margin-bottom: 0 !important;
}

.pub-wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding-inline: 1rem;
}
@media (min-width: 640px) {
  .pub-wrap {
    padding-inline: 1.5rem;
  }
}

/* Skip link + legacy hooks expected by tests */
.skip-to-main {
  position: absolute;
  left: -999px;
  top: 0.5rem;
  z-index: 100;
  background: var(--pub-secondary);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-family: var(--pub-font-mono);
  font-size: 0.75rem;
  font-weight: 700;
}
.skip-to-main:focus {
  left: 0.5rem;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Contrast hook (the shared dock drives the modes) */
html[data-contrast="high"] body {
  filter: contrast(1.18);
}
html[data-contrast="high"] .pub-card {
  border-color: #0a0e1a;
}

/* Header */
.pub-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 248, 255, 0.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--pub-line);
}
.pub-header__bar {
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.pub-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: var(--pub-primary);
}
.pub-brand__mark {
  height: 2rem;
  width: auto;
  flex: none;
}
.pub-brand__name {
  font-family: var(--pub-font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}
.pub-brand__suffix {
  font-family: var(--pub-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--pub-obsidian);
  color: #fff;
  border-radius: 0.25rem;
  padding: 0.125rem 0.375rem;
  font-weight: 700;
}
.pub-issue {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--pub-font-mono);
  font-size: 0.75rem;
  color: var(--pub-body);
}
@media (min-width: 1024px) {
  .pub-issue {
    display: flex;
  }
}
.pub-pill {
  background: #f1f5f9;
  border: 1px solid var(--pub-line);
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
  font-weight: 500;
}
.pub-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pub-searchbtn,
.pub-queuebtn,
.pub-ghostbtn,
.pub-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.375rem 0.75rem;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
}
.pub-searchbtn {
  background: #f1f5f9;
  border-color: var(--pub-line);
  color: #334155;
}
.pub-searchbtn kbd {
  font-family: var(--pub-font-mono);
  font-size: 10px;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 0.25rem;
  padding: 0.125rem 0.375rem;
}
.pub-queuebtn {
  background: rgba(0, 81, 213, 0.1);
  border-color: rgba(0, 81, 213, 0.2);
  color: var(--pub-secondary);
  font-family: var(--pub-font-mono);
  font-weight: 700;
}
.pub-ghostbtn {
  color: #334155;
  font-family: var(--pub-font-mono);
}
.pub-cta {
  background: var(--pub-primary);
  color: #fff;
}
.pub-cats {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  padding-block: 0.5rem;
  border-top: 1px solid rgba(226, 232, 240, 0.7);
  font-family: var(--pub-font-mono);
  font-size: 0.75rem;
}
.pub-cats a {
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
  color: #334155;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.pub-cats a:hover {
  background: rgba(226, 232, 240, 0.6);
  color: #0f172a;
}
.pub-cats a[aria-current="page"] {
  background: #0f172a;
  color: #fff;
  font-weight: 700;
}

/* Search combobox (header) */
.blog-search {
  position: relative;
}
.blog-search__input {
  width: 12rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--pub-line-strong);
  border-radius: 999px;
  background: var(--pub-subtle);
  font-size: 0.85rem;
}
.blog-search__results {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: min(22rem, 80vw);
  max-height: 24rem;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--pub-line);
  border-radius: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  z-index: 60;
}
.blog-search__results a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  text-decoration: none;
  color: inherit;
}
.blog-search__results a:hover {
  background: var(--pub-subtle);
}

/* Hero */
.pub-hero {
  padding-block: 1.5rem 1rem;
  border-bottom: 1px solid var(--pub-line);
}
.pub-hero__grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
}
@media (min-width: 1024px) {
  .pub-hero__grid {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}
.pub-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--pub-container-high);
  border: 1px solid var(--pub-line-strong);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-family: var(--pub-font-mono);
  font-size: 0.75rem;
  font-weight: 700;
}
.pub-title {
  font-family: var(--pub-font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  font-size: clamp(1.875rem, 5vw, 3.75rem);
  margin: 0.75rem 0;
}
.pub-lede {
  font-size: 1.125rem;
  color: #1e293b;
  max-width: 48rem;
}
.pub-telemetry {
  background: #fff;
  border: 1px solid var(--pub-line-strong);
  border-radius: var(--pub-radius);
  padding: 1rem;
  min-width: 300px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.pub-telemetry__row {
  display: flex;
  justify-content: space-between;
  font-family: var(--pub-font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
  font-weight: 600;
}
.pub-telemetry__big {
  font-family: var(--pub-font-display);
  font-size: 1.5rem;
  font-weight: 800;
}
.pub-telemetry__meta {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #f1f5f9;
  padding-top: 0.5rem;
  font-family: var(--pub-font-mono);
  font-size: 0.75rem;
}

/* Format pills */
.pub-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--pub-subtle);
  border: 1px solid var(--pub-line);
  border-radius: var(--pub-radius);
  padding: 0.5rem;
}
.pub-pills {
  display: flex;
  gap: 0.375rem;
  overflow-x: auto;
}
.format-pill {
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 0.5rem;
  padding: 0.375rem 0.75rem;
  font-family: var(--pub-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.format-pill[aria-pressed="true"] {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}
.pub-surprise {
  background: var(--pub-container-high);
  border: 1px solid var(--pub-line-strong);
  border-radius: 0.5rem;
  padding: 0.375rem 0.75rem;
  font-family: var(--pub-font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

/* Cards + grids */
.pub-card {
  background: #fff;
  border: 1px solid var(--pub-line-strong);
  border-radius: var(--pub-radius-lg);
  padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.pub-flagship {
  border-width: 2px;
  border-color: rgba(203, 213, 225, 0.8);
  position: relative;
  overflow: hidden;
}
.pub-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .pub-grid--12 {
    grid-template-columns: repeat(12, 1fr);
  }
  .pub-span7 {
    grid-column: span 7;
  }
  .pub-span5 {
    grid-column: span 5;
  }
  .pub-span6 {
    grid-column: span 6;
  }
  .pub-span8 {
    grid-column: span 8;
  }
  .pub-span4 {
    grid-column: span 4;
  }
}
.pub-badge {
  display: inline-block;
  font-family: var(--pub-font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 0.375rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid transparent;
}
.pub-badge--doi {
  background: #fef3c7;
  color: #78350f;
  border-color: #fcd34d;
}
.pub-badge--bench {
  background: #dbeafe;
  color: #1e3a8a;
  border-color: #93c5fd;
}
.pub-badge--audit {
  background: #f3e8ff;
  color: #581c87;
  border-color: #d8b4fe;
}
.pub-badge--ok {
  background: #d1fae5;
  color: #065f46;
  border-color: #6ee7b7;
}
.pub-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-family: var(--pub-font-mono);
  font-size: 0.75rem;
  color: #334155;
}
.pub-h2 {
  font-family: var(--pub-font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin: 0.5rem 0;
}
.pub-h2 a,
.pub-h3 a {
  color: inherit;
  text-decoration: none;
}
.pub-h2 a:hover,
.pub-h3 a:hover {
  color: var(--pub-secondary);
}
.pub-h3 {
  font-family: var(--pub-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0.4rem 0;
}
.pub-abstract {
  background: #f8fafc;
  border-left: 4px solid var(--pub-secondary);
  border-radius: 0.75rem;
  padding: 1rem;
}
.pub-byline {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.pub-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
.pub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.btn--dark {
  background: var(--pub-primary);
  color: #fff;
}
.btn--ghost {
  background: #fff;
  border-color: #cbd5e1;
  color: #1e293b;
  font-size: 0.75rem;
}
.btn--warm {
  background: var(--pub-orange-soft);
  border-color: #fed7aa;
  color: var(--pub-orange);
}

/* Benchmark bars */
.bars {
  background: var(--pub-subtle);
  border: 1px solid var(--pub-line-strong);
  border-radius: var(--pub-radius);
  padding: 1.25rem;
}
.bar {
  height: 0.75rem;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}
.bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
}

/* Obsidian panels */
.pub-obsidian {
  background: var(--pub-obsidian);
  color: #fff;
  border-radius: var(--pub-radius-lg);
  padding: 1.5rem;
  border: 1px solid #1e293b;
}
.pub-obsidian .pub-h2,
.pub-obsidian .pub-h3 {
  color: #fff;
}
.graph-nodes {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.graph-node {
  background: #0f172a;
  color: #bfdbfe;
  border: 1px solid #334155;
  border-radius: 0.5rem;
  padding: 0.5rem 0.875rem;
  font-family: var(--pub-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.graph-node--core {
  background: var(--pub-secondary);
  color: #fff;
  font-family: var(--pub-font-display);
  font-size: 1.125rem;
  font-weight: 800;
  border-radius: 0.75rem;
  padding: 0.75rem 1.5rem;
}
.graph-inspector {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 0.75rem;
  padding: 1.25rem;
}

/* Sandbox */
input[type="range"].pub-range {
  width: 100%;
  accent-color: var(--pub-secondary);
  height: 0.75rem;
}
.pub-metric {
  background: var(--pub-subtle);
  border: 1px solid var(--pub-line);
  border-radius: 0.75rem;
  padding: 1rem;
}
.pub-metric__value {
  font-family: var(--pub-font-display);
  font-size: 1.875rem;
  font-weight: 800;
}

/* Audio */
.audio-card {
  background: var(--pub-subtle);
  border: 1px solid var(--pub-line);
  border-radius: 0.75rem;
  padding: 1.25rem;
}
.audio-bar {
  height: 0.5rem;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
}
.audio-bar > span {
  display: block;
  height: 100%;
  background: var(--pub-secondary);
}

/* Tracks / manifesto / brief */
.track-grid,
.note-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .track-grid,
  .note-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.brief-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.brief-form input {
  flex: 1;
  min-width: 12rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid #cbd5e1;
  background: var(--pub-subtle);
}

/* Drawer / modal / toast */
.pub-drawer {
  position: fixed;
  inset-block: 0;
  right: 0;
  width: min(28rem, 100%);
  background: #fff;
  border-left: 1px solid #cbd5e1;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  z-index: 50;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}
.pub-drawer[data-open="true"] {
  transform: none;
}
.pub-modal {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.6);
  z-index: 50;
  display: flex;
  justify-content: center;
  padding-top: 5rem;
  padding-inline: 1rem;
}
.pub-modal[hidden] {
  display: none;
}
.pub-modal__box {
  background: #fff;
  border-radius: 1rem;
  width: min(36rem, 100%);
  height: fit-content;
  border: 1px solid #cbd5e1;
  overflow: hidden;
}
.pub-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--pub-obsidian);
  color: #fff;
  border: 1px solid #334155;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-family: var(--pub-font-mono);
  font-size: 0.75rem;
  z-index: 50;
  opacity: 0;
  transform: translateY(6rem);
  transition: all 0.3s ease;
  pointer-events: none;
}
.pub-toast[data-show="true"] {
  opacity: 1;
  transform: none;
}

/* Footer */
.pub-footer {
  background: #f1f5f9;
  border-top: 1px solid #cbd5e1;
  margin-top: 4rem;
}
.pub-footer__grid {
  display: grid;
  gap: 2rem;
  padding-block: 3rem 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .pub-footer__grid {
    grid-template-columns: 4fr 8fr;
  }
}
.pub-footer__cols {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) {
  .pub-footer__cols {
    grid-template-columns: repeat(4, 1fr);
  }
}
.pub-footer a {
  color: #475569;
  text-decoration: none;
  font-size: 0.75rem;
}
.pub-footer a:hover {
  color: #0f172a;
}

/* Prose */
.prose {
  line-height: 1.75;
  color: #0f172a;
}
.prose h2,
.prose h3 {
  font-family: var(--pub-font-display);
  scroll-margin-top: 6rem;
}
.prose pre {
  background: #0f172a;
  color: #e2e8f0;
  padding: 1rem;
  border-radius: 0.75rem;
  overflow-x: auto;
}
.prose code {
  font-family: var(--pub-font-mono);
  font-size: 0.85em;
}
.toc {
  background: var(--pub-subtle);
  border: 1px solid var(--pub-line);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
}

/* Format-specific paper vibes */
.format-research .prose {
  font-size: 1.02rem;
}
.format-research .pub-abstract {
  border-left-color: var(--pub-orange);
}
.format-field-note .pub-card {
  border-style: dashed;
}
.format-audio .audio-card {
  border-color: var(--pub-orange);
}
.format-dataset table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.format-dataset th,
.format-dataset td {
  border: 1px solid var(--pub-line);
  padding: 0.5rem;
  text-align: left;
}

/* Layout helpers used by the publication templates */
.pub-brand-group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-width: 0;
}
.pub-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.pub-field label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--pub-ink);
}
.pub-section-head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
@media (min-width: 768px) {
  .pub-section-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
  }
}
.pub-section-head p {
  color: var(--pub-body);
}
.pub-span12 {
  grid-column: span 12;
}
.pub-modal__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--pub-line);
}
.pub-modal__head input {
  flex: 1;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.95rem;
  color: var(--pub-ink);
  min-width: 0;
}
.pub-modal__head input:focus {
  outline: none;
}
.pub-modal__results {
  max-height: 18rem;
  overflow-y: auto;
  padding: 0.5rem;
}
.pub-modal__results a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--pub-ink);
  text-decoration: none;
  font-size: 0.875rem;
}
.pub-modal__results a:hover {
  background: var(--pub-subtle);
}
.pub-footer__brand p {
  color: var(--pub-body);
  font-size: 0.8125rem;
  max-width: 26rem;
  margin: 0.75rem 0 1rem;
}
.pub-footer__brand form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.pub-footer__brand input {
  flex: 1;
  min-width: 10rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--pub-line-strong);
  background: #fff;
  font: inherit;
  font-size: 0.8125rem;
}
.pub-footer__cols h2 {
  font-family: var(--pub-font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pub-ink);
  margin: 0 0 0.625rem;
}
.pub-footer__cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.pub-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  border-top: 1px solid var(--pub-line);
  padding-top: 1.25rem;
  font-family: var(--pub-font-mono);
  font-size: 0.6875rem;
  color: var(--pub-body);
}
.pub-drawer > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
}
.pub-drawer h2 {
  font-family: var(--pub-font-display);
  font-size: 1.25rem;
  font-weight: 800;
}
.pub-drawer #queue-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pub-drawer .pub-card {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.pub-drawer .pub-card h4 {
  font-size: 0.875rem;
  font-weight: 700;
}
.pub-drawer .pub-card span {
  font-family: var(--pub-font-mono);
  font-size: 0.6875rem;
  color: var(--pub-muted);
}
.pub-drawer .pub-card button {
  align-self: flex-start;
  background: none;
  border: 0;
  color: var(--pub-muted);
  font: inherit;
  font-size: 0.6875rem;
  cursor: pointer;
  text-decoration: underline;
}
.pub-toast {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pub-brief-form,
.brief-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.brief-form input {
  flex: 1;
  min-width: 12rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--pub-line-strong);
  background: var(--pub-subtle);
  font: inherit;
  font-size: 0.875rem;
}
.format-research .prose h2 {
  border-bottom: 1px solid var(--pub-line);
  padding-bottom: 0.4rem;
}
.format-blueprint .prose ol {
  padding-left: 1.25rem;
}
.format-field-note .prose {
  font-size: 0.95rem;
}

/* Print + reduced motion (required by tests) */
@media print {
  .a11y-dock,
  .pub-header__actions,
  .pub-drawer,
  .pub-modal,
  .pub-toast {
    display: none !important;
  }
  body {
    background: #fff;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/*!
 * DEPLOY1 accessibility toolkit.
 *
 * Consumer-facing assistive features shared by both products:
 *
 *  - "Accessibility options" toolbar: text-size and high-contrast
 *    preferences (data-attributes on <html>, persisted by each app's small
 *    module) plus client-side text-to-speech ("Listen") via the Web Speech
 *    API.
 *  - Visible focus indicators, forced-colors and reduced-motion support.
 *  - Clean print output for every page.
 *
 * Loaded by the agency (Tailwind) and bundled into the blog. Where a rule
 * must beat a framework utility, scope it to specific selectors and keep
 * toolbar markup free of conflicting utility classes.
 */

:root {
  color-scheme: light;
}

/* ---------- Text size ---------- */

/* Text scaling was removed from the dock: pages always render at 100% and
   these hooks stay inert so nothing can reflow the layout. */

/* ---------- High contrast ---------- */

/* ---------- High contrast ---------- */

/* Token-level overrides drive the shared design primitives (blog + agency
   components that reference tokens). */

:root[data-contrast="high"] {
  --d1-color-text-muted: var(--d1-color-ink-700);
  --d1-color-text-secondary: var(--d1-color-ink-900);
  --d1-color-line-200: var(--d1-color-ink-400);
  --d1-color-line-300: var(--d1-color-ink-500);
}

@media (prefers-contrast: more) {
  :root {
    --d1-color-text-muted: var(--d1-color-ink-700);
    --d1-color-text-secondary: var(--d1-color-ink-900);
    --d1-color-line-200: var(--d1-color-ink-400);
    --d1-color-line-300: var(--d1-color-ink-500);
  }
}

/* Agency Tailwind utilities encode colors literally, so boost them under
   the same two triggers. Higher specificity than a bare utility class. */

:root[data-contrast="high"] .text-ink-muted {
  color: rgb(var(--d1-color-ink-600));
}

:root[data-contrast="high"] .text-ink-secondary {
  color: rgb(var(--d1-color-ink-900));
}

:root[data-contrast="high"] .text-ink-300 {
  color: rgb(var(--d1-color-ink-700));
}

:root[data-contrast="high"] .text-slate-300 {
  color: rgb(var(--d1-color-ink-300));
}

:root[data-contrast="high"] .text-slate-400 {
  color: rgb(var(--d1-color-ink-300));
}

:root[data-contrast="high"] .border-line {
  border-color: rgb(var(--d1-color-ink-400));
}

:root[data-contrast="high"] .border-line-strong {
  border-color: rgb(var(--d1-color-ink-500));
}

@media (prefers-contrast: more) {
  body .text-ink-muted {
    color: rgb(var(--d1-color-ink-600));
  }

  body .text-ink-secondary {
    color: rgb(var(--d1-color-ink-900));
  }

  body .text-ink-300 {
    color: rgb(var(--d1-color-ink-700));
  }

  body .text-slate-300 {
    color: rgb(var(--d1-color-ink-300));
  }

  body .text-slate-400 {
    color: rgb(var(--d1-color-ink-300));
  }

  body .border-line {
    border-color: rgb(var(--d1-color-ink-400));
  }

  body .border-line-strong {
    border-color: rgb(var(--d1-color-ink-500));
  }
}

/* ---------- Focus ---------- */

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

@media (forced-colors: active) {
  :focus-visible {
    outline-color: Highlight;
    outline-offset: 2px;
  }

  .a11y-tools button {
    border: 1px solid ButtonText;
  }
}

/* ---------- Motion ---------- */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* Anchor jumps clear the sticky headers on both sites. */
main [id] {
  scroll-margin-top: 5rem;
}

/* ---------- Accessibility toolbar ---------- */

.a11y-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--d1-space-2);
  padding: var(--d1-space-3) var(--d1-space-6);
  background: rgb(var(--d1-color-surface-subtle));
  border-bottom: 1px solid rgb(var(--d1-color-line-200));
  font-family: var(--d1-font-mono);
  font-size: var(--d1-type-xs);
  color: rgb(var(--d1-color-text-secondary));
}

.a11y-tools button {
  min-height: 2.25rem;
  padding: var(--d1-space-1) var(--d1-space-3);
  border: 1px solid rgb(var(--d1-color-line-300));
  border-radius: var(--d1-radius-md);
  background: rgb(var(--d1-color-surface));
  font: inherit;
  color: rgb(var(--d1-color-text-primary));
  cursor: pointer;
  transition:
    background-color var(--d1-motion-fast) ease,
    border-color var(--d1-motion-fast) ease,
    color var(--d1-motion-fast) ease;
}

.a11y-tools button:hover {
  border-color: rgb(var(--d1-color-blue-600));
}

.a11y-tools button[aria-pressed="true"] {
  background: rgb(var(--d1-color-blue-600));
  border-color: rgb(var(--d1-color-blue-600));
  color: rgb(var(--d1-color-surface));
}

.a11y-tools button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Skip link ---------- */

.skip-to-main {
  position: absolute;
  top: -9999px;
  left: 1rem;
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  border-radius: var(--d1-radius-md);
  background: rgb(var(--d1-color-blue-600));
  color: rgb(var(--d1-color-surface));
  font-weight: 700;
  text-decoration: none;
}

.skip-to-main:focus {
  top: 1rem;
}

/* ---------- Print ---------- */

@page {
  margin: 1.5cm;
}

@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }

  * {
    background: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    color: #000;
  }

  .skip-to-main,
  .a11y-tools,
  .reading-progress,
  .code-copy,
  .blog-search,
  .blog-header__actions {
    display: none !important;
  }

  header,
  footer {
    position: static !important;
  }

  details {
    display: block;
  }

  details > :not(summary) {
    display: block !important;
  }

  details > summary {
    display: none !important;
  }

  main a[href]:not([href^="#"])::after,
  .prose a[href]:not([href^="#"])::after {
    content: " (" attr(href) ")";
    font-size: 0.9em;
    word-break: break-all;
  }

  h1,
  h2,
  h3,
  h4 {
    page-break-after: avoid;
    break-after: avoid;
  }

  pre,
  blockquote,
  li,
  table,
  figure {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  pre {
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }
}

/**
 * DEPLOY1 shared accessibility dock.
 *
 * One bar, one controller, two products (agency + blog). The stylesheet is
 * deliberately built around a single non-wrapping row: the dock never
 * collapses onto a second line, it shrinks its own labels and can scroll
 * horizontally inside the one row if a viewport is extremely narrow.
 *
 * Every control is sized in px (never rem) so increasing the page text scale
 * cannot resize or reflow the dock itself.
 */

.a11y-dock {
  --a11y-bg: #061325;
  --a11y-fg: #e2e8f0;
  --a11y-muted: #94a3b8;
  --a11y-line: rgba(255, 255, 255, 0.14);
  --a11y-chip: rgba(255, 255, 255, 0.06);
  --a11y-chip-hover: rgba(255, 255, 255, 0.14);
  --a11y-active: #0051d5;
  --a11y-height: 34px;
  background: var(--a11y-bg);
  color: var(--a11y-fg);
  border-bottom: 1px solid var(--a11y-line);
  font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1;
  position: relative;
  z-index: 60;
}

.a11y-dock *,
.a11y-dock *::before,
.a11y-dock *::after {
  font-size: inherit;
  line-height: inherit;
}

.a11y-dock__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  height: var(--a11y-height);
  padding: 0 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.a11y-dock__row::-webkit-scrollbar {
  display: none;
}

.a11y-dock__lead,
.a11y-dock__controls,
.a11y-dock__group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.a11y-dock__lead {
  flex: 0 0 auto;
  min-width: 0;
  flex-shrink: 0;
}

/* Mobile disclosure: the controls live in a dropdown panel under the bar.
   The row-qualified selector outranks .a11y-btn so the button stays hidden
   on desktop. */
.a11y-dock__row > .a11y-dock__access {
  display: none;
}

@media (max-width: 1023px) {
  .a11y-dock__row > .a11y-dock__access {
    display: inline-flex;
    margin-left: auto;
  }

  .a11y-dock__controls {
    display: none;
  }

  .a11y-dock[data-open="true"] .a11y-dock__controls {
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--a11y-bg);
    border-bottom: 1px solid var(--a11y-line);
    padding: 8px 10px 10px;
    gap: 6px;
    overflow: visible;
    z-index: 61;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  }

  /* the open panel stretches its tools across full rows (the Access
     button itself keeps its size at the end of the main row) */
  .a11y-dock[data-open="true"] .a11y-dock__controls .a11y-btn,
  .a11y-dock[data-open="true"] .a11y-dock__controls .a11y-dock__group,
  .a11y-dock[data-open="true"] .a11y-dock__controls .dock-dropdown {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
  }
}

.a11y-dock__controls {
  flex: 1 1 auto;
  justify-content: flex-end;
  overflow: hidden;
}

/* Dropdown popups (language, currency) are absolutely positioned inside the
   row, which clips so the density fitter can scroll it. While a popup is open
   the clip is dropped: a clipped popup is invisible, and focusing an option
   would scroll the bar itself out of view. */
.a11y-dock[data-dropdown-open] .a11y-dock__row,
.a11y-dock[data-dropdown-open] .a11y-dock__controls {
  overflow: visible;
}

.a11y-dock__group {
  flex: 0 0 auto;
  padding: 2px;
  border: 1px solid var(--a11y-line);
  border-radius: 7px;
  background: var(--a11y-chip);
}

@keyframes a11y-pulse {
  50% {
    opacity: 0.35;
  }
}

/* Every control shares one box: identical height, padding, radius and type. */
.a11y-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 0 0 auto;
  height: 24px;
  min-width: 24px;
  padding: 0 7px;
  margin: 0;
  border: 1px solid var(--a11y-line);
  border-radius: 6px;
  background: var(--a11y-chip);
  color: var(--a11y-fg);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
}

.a11y-btn:hover {
  background: var(--a11y-chip-hover);
  color: #ffffff;
}

.a11y-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 1px;
}

.a11y-btn[aria-pressed="true"],
.a11y-btn.is-active {
  background: var(--a11y-active);
  border-color: #93c5fd;
  color: #ffffff;
  font-weight: 700;
}

.a11y-btn__icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  display: block;
}

.a11y-btn__label {
  white-space: nowrap;
}

.a11y-btn--reset {
  background: rgba(190, 24, 93, 0.22);
  border-color: rgba(251, 113, 133, 0.4);
  color: #fecdd3;
}

.a11y-btn--reset:hover {
  background: rgba(190, 24, 93, 0.34);
  color: #ffffff;
}

.a11y-dock__skip {
  display: inline-flex;
  color: #ffffff !important;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--a11y-active);
  color: #ffffff;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
}

.a11y-dock__skip:hover {
  background: #1d4ed8;
  color: #ffffff;
  text-decoration: underline;
}

.a11y-dock__skip:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 1px;
}

/* Links stay white: never browser-default blue, never the visited colour. */
.a11y-dock a,
.a11y-dock a:link,
.a11y-dock a:visited,
.a11y-dock a:hover,
.a11y-dock a:active,
.a11y-dock a:focus {
  color: #ffffff;
}

.a11y-dock__group > .a11y-btn:only-of-type {
  padding: 0 7px;
}

/* Pre-hints only: the controller measures the real overflow and escalates.
   The desktop toolbar has room by construction — its controls grow to fill the
   row rather than needing it — so the secondary labels are only dropped once
   the controls have moved into the mobile panel. */
@media (max-width: 1023px) {
  .a11y-dock[data-density="full"] .a11y-btn__label--secondary,
  .a11y-dock[data-density="full"] .a11y-btn__label--tertiary {
    display: none;
  }
}

/* Compact: icons only, labels available to assistive tech. */
.a11y-dock[data-density="compact"] .a11y-btn__label,
.a11y-dock[data-density="tiny"] .a11y-btn__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.a11y-dock[data-density="compact"] .a11y-btn {
  padding: 0 5px;
  gap: 0;
}

.a11y-dock[data-density="compact"] .a11y-dock__skip,
.a11y-dock[data-density="tiny"] .a11y-dock__skip {
  height: 22px;
  min-height: 22px;
  padding: 0 6px;
  font-size: 10px;
}

/* Tiny: last-resort density. Still one row, still readable. */
.a11y-dock[data-density="tiny"] {
  --a11y-height: 30px;
  font-size: 11px;
}

.a11y-dock[data-density="tiny"] .a11y-dock__row {
  gap: 4px;
  padding-inline: 6px;
}

.a11y-dock[data-density="tiny"] .a11y-btn,
.a11y-dock[data-density="tiny"] .a11y-dock__skip {
  height: 22px;
  min-height: 22px;
  min-width: 22px;
  padding: 0 4px;
  font-size: 10px;
}

.a11y-dock[data-density="tiny"] .a11y-dock[data-density="tiny"] .a11y-btn__icon,
.a11y-dock[data-density="tiny"] .a11y-dock__skip svg {
  width: 13px;
  height: 13px;
}

.a11y-dock__ruler {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 38px;
  display: none;
  background: rgba(254, 240, 138, 0.24);
  border-top: 1px dashed #ca8a04;
  border-bottom: 1px dashed #ca8a04;
  pointer-events: none;
  z-index: 99999;
}

.d1-ruler .a11y-dock__ruler {
  display: block;
}

/* Shared display modes. Legacy class names are kept for the agency stylesheet. */
.d1-contrast,
.high-contrast-mode {
  filter: contrast(1.28) saturate(1.05);
}

.d1-contrast .a11y-dock,
.high-contrast-mode .a11y-dock {
  filter: none;
}

.d1-grayscale,
.grayscale-mode {
  filter: grayscale(1);
}

.d1-dyslexia,
.d1-dyslexia *,
.dyslexia-font,
.dyslexia-font * {
  font-family: "Comic Sans MS", "Trebuchet MS", "Arial Rounded MT Bold", sans-serif !important;
  letter-spacing: 0.04em !important;
  word-spacing: 0.1em !important;
}

/*
 * Link spotlight. Deliberately written at maximum specificity and with
 * !important on every link state: a utility such as `text-text-secondary`
 * must not be able to keep a link looking unhighlighted, and in dark mode the
 * highlight has to read as white (a dark blue is invisible on a dark surface,
 * and invisible entirely once monochrome is applied).
 */
html.d1-links.d1-links body a,
html.highlight-links-mode.highlight-links-mode body a {
  color: #003ea8 !important;
  -webkit-text-fill-color: currentcolor !important;
  text-decoration: underline 2px solid #003ea8 !important;
  text-decoration-color: #003ea8 !important;
  text-underline-offset: 2px !important;
  background-color: rgba(254, 240, 138, 0.25) !important;
  outline: 2px dashed #0051d5 !important;
  outline-offset: 2px !important;
}

html.dark.d1-links.d1-links body a,
html.dark.highlight-links-mode.highlight-links-mode body a,
html.grayscale-mode.d1-links.d1-links body a,
html.grayscale-mode.highlight-links-mode.highlight-links-mode body a,
html.d1-links.d1-links.dark body a,
html.highlight-links-mode.highlight-links-mode.dark body a {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration-color: #ffffff !important;
  background-color: rgba(147, 197, 253, 0.22) !important;
  outline-color: #93c5fd !important;
}

/* The dock is chrome, not page content: its links stay white and unchipped. */
html.d1-links.d1-links .a11y-dock a,
html.highlight-links-mode.highlight-links-mode .a11y-dock a,
html.d1-links.d1-links .a11y-dock button,
html.highlight-links-mode.highlight-links-mode .a11y-dock button {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background-color: transparent !important;
  outline: none !important;
}

html.d1-links.d1-links .a11y-dock a:hover,
html.highlight-links-mode.highlight-links-mode .a11y-dock a:hover {
  background-color: rgba(255, 255, 255, 0.14) !important;
}

.d1-motion,
.d1-motion *,
.reduce-motion-mode,
.reduce-motion-mode * {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
@media (forced-colors: active) {
  .a11y-dock,
  .a11y-btn,
  .a11y-dock__skip,
  .a11y-btn[aria-pressed="true"] {
    background: Highlight;
    color: HighlightText;
  }
}

/* On a full-width bar the controls become one continuous run rather than a set
   of chips scattered across a wide band: no gaps, and every control taking an
   equal share of the distance from "Skip to main" to the right edge. Because
   they grow to fit, the row never overflows, which is what lets the labels
   stay on at desktop widths instead of being dropped by the pre-hints.

   The share has to be applied to the buttons as well as to their wrappers:
   `.a11y-btn` is `flex: 0 0 auto` so it can never outgrow its label, and the
   language and currency dropdowns are wrappers around exactly such a button.
   Without this the two dropdowns absorb the whole row and the rest stay at
   their intrinsic width.

   This block has to follow the rules above: a media query adds no specificity,
   so a `.a11y-dock__group` declared after it would win.

   Scoped to the desktop layout. Below 1024px the controls sit in the
   disclosure panel, which lays itself out separately and is untouched. */
@media (min-width: 1024px) {
  /* A few pixels between controls, not none: at zero the segmented row reads
     as one fused block and the individual tools stop being countable. Narrower
     than the 6px the row uses on mobile, because at desktop the controls are
     wide enough that a 6px seam is harder to see rather than easier. */
  .a11y-dock__row,
  .a11y-dock__controls,
  .a11y-dock__group,
  .a11y-dock__lead,
  .a11y-dock__controls .dock-dropdown {
    gap: 4px;
  }

  .a11y-dock__controls {
    justify-content: flex-start;
  }

  /* `flex: 1 1 auto`, not `1 1 0`. The controls' content already fills a wide
     row, so the free space is negative and flex-grow never applies at all —
     which left the two dropdowns, the only children with a zero basis, at
     zero width and their labels spilling out over their neighbours. Equal
     widths would need a zero basis on everything, and a control is then
     narrower than its own label. Growing from the content basis instead adds
     the same width to every control: they all touch, none of them clips, and
     it holds at any viewport width. */
  .a11y-dock__controls > * {
    flex: 1 1 auto;
    min-width: 0;
  }

  .a11y-dock__controls .dock-dropdown {
    display: flex;
  }

  .a11y-dock__controls .dock-dropdown > .a11y-btn {
    flex: 1 1 auto;
  }
}