/* Lystio design system. Token values copied from webapp src/design-system/tokens.css (light mode);
   component rules follow src/components/ds/ui/*.variants.ts and the blog's blog-content.css.
   Page background is always --ds-bg (white): grey surfaces only appear inside components. */
:root {
  --ds-iris-50: #F6ECFF;
  --ds-iris-500: #A540F3;
  --ds-iris-700: #741FAD;
  --ds-ocean-0: #FFFFFF;
  --ds-ocean-50: #FAFAFA;
  --ds-ocean-100: #F5F5F5;
  --ds-ocean-200: #E9EAEB;
  --ds-ocean-300: #D5D7DA;
  --ds-ocean-400: #A4A7AE;
  --ds-ocean-500: #717680;
  --ds-ocean-900: #0A0D12;

  --ds-bg: var(--ds-ocean-0);
  --ds-surface: var(--ds-ocean-0);
  --ds-surface-glass: rgba(255, 255, 255, 0.8);
  --ds-surface-soft: var(--ds-ocean-50);
  --ds-surface-medium: var(--ds-ocean-100);
  --ds-surface-disable: var(--ds-ocean-200);
  --ds-text-high: var(--ds-ocean-900);
  --ds-text-medium: var(--ds-ocean-500);
  --ds-text-low: var(--ds-ocean-400);
  --ds-text-disable: var(--ds-ocean-400);
  --ds-border-high: var(--ds-ocean-300);
  --ds-border-medium: var(--ds-ocean-200);
  --ds-border-light: var(--ds-ocean-100);
  --ds-primary: var(--ds-iris-500);
  --ds-primary-on-primary: var(--ds-ocean-0);
  --ds-primary-surface: var(--ds-iris-50);
  --ds-primary-on-surface: var(--ds-iris-700);
  --ds-success-surface: #DBFCEA;
  --ds-success-on-surface: #00612F;
  --ds-warning-surface: #FFF4E4;
  --ds-warning-on-surface: #AA5A00;
  --ds-error: #E01D1D;
  --ds-error-surface: #FFEDED;
  --ds-error-on-surface: #BD0003;
  --ds-info-surface: #F2F3FF;
  --ds-info-on-surface: #1927BC;

  --ds-state-neutral-hover: rgba(10, 13, 18, 0.04);
  --ds-state-neutral-pressed: rgba(10, 13, 18, 0.1);
  --ds-state-colored-hover: rgba(10, 13, 18, 0.2);
  --ds-state-colored-pressed: rgba(10, 13, 18, 0.32);
  --ds-shadow-sm: 0 1px 3px 0 rgba(10, 13, 18, 0.10), 0 1px 2px -1px rgba(10, 13, 18, 0.10);
  --ds-shadow-surface-md: inset 0 0 100px 0 rgba(0, 0, 0, 0.04);
  --ds-shadow-dropdown: 0px 4px 16px 0px rgba(10, 13, 18, 0.12);

  --ds-radius-input-default: 10px;
  --ds-radius-card-sm: 12px;
  --ds-radius-card-md: 16px;
  --ds-radius-full: 999px;
  --ds-primary-padding: 16px;
  --ds-inner-padding: 12px;

  --ds-font-family-primary: "Inter", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (min-width: 1280px) { :root { --ds-primary-padding: 24px; } }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--ds-bg);
  color: var(--ds-text-high);
  font-family: var(--ds-font-family-primary);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.2px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ds-primary); }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 1px; }

/* State layer (DS pattern: ::before overlay, parent clips) */
.btn, .chip-btn, .card, .tabs a { position: relative; overflow: hidden; }
.btn::before, .chip-btn::before, .card::before, .tabs a::before {
  content: ""; position: absolute; inset: 0; background: transparent; pointer-events: none;
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1);
}

/* Header (DS Header + HeaderMenu) */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--ds-primary-padding);
  height: 80px; padding: 0 var(--ds-primary-padding);
  background: var(--ds-surface);
  border-bottom: 1px solid var(--ds-border-medium);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ds-text-high); }
.brand-logo { height: 36px; width: auto; display: block; }
.brand-name { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ds-text-medium); padding-left: 12px; border-left: 1px solid var(--ds-border-medium); }
.nav { display: flex; margin-left: auto; }
.nav a {
  display: inline-flex; align-items: center; height: 40px; padding: 0 16px;
  font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none;
  color: var(--ds-text-medium); transition: color 150ms ease-out;
}
.nav a:hover { color: var(--ds-text-high); }
.nav a.active { color: var(--ds-primary); }
.viewer { font-size: 14px; line-height: 20px; color: var(--ds-text-medium); }

main { max-width: 1200px; margin: 0 auto; padding: 40px var(--ds-primary-padding) 96px; }
.page-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.page-head h1 { margin: 0; font-size: 32px; line-height: 46px; font-weight: 600; }
.page-head p { margin: 4px 0 0; color: var(--ds-text-medium); max-width: 640px; }

/* Button (DS Button: solid primary, outline, plain) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 40px; padding: 0 16px; border-radius: var(--ds-radius-full);
  border: 1px solid var(--ds-border-medium); background: var(--ds-surface); color: var(--ds-text-high);
  font-size: 14px; line-height: 20px; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover::before { background: var(--ds-state-neutral-hover); }
.btn:active::before { background: var(--ds-state-neutral-pressed); }
.btn:disabled { border-color: var(--ds-border-light); color: var(--ds-text-disable); cursor: default; }
.btn:disabled::before { background: transparent; }
.btn.primary { background: var(--ds-primary); border-color: var(--ds-primary); color: var(--ds-primary-on-primary); }
.btn.primary:hover::before { background: var(--ds-state-colored-hover); }
.btn.primary:active::before { background: var(--ds-state-colored-pressed); }
.btn.primary:disabled { background: var(--ds-surface-disable); border-color: var(--ds-surface-disable); color: var(--ds-text-disable); }
.btn.plain { border-color: transparent; background: transparent; color: var(--ds-text-high); padding: 0 8px; }
.btn.lg, .page-head .btn { height: 48px; padding: 0 20px; font-size: 16px; line-height: 24px; }
.btn.sm { height: 32px; padding: 0 12px; gap: 2px; }
.btn.sm.plain { padding: 0 8px; }

/* KPI tiles and cards (DS ContentCard: white, 12px radius, 1px border, no shadow) */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 32px; }
.kpi, .panel, .item, .article-sheet, .form, .login-card {
  background: var(--ds-surface); border: 1px solid var(--ds-border-medium); border-radius: var(--ds-radius-card-sm);
}
.kpi { padding: var(--ds-primary-padding); }
.kpi b { display: block; font-size: 28px; line-height: 34px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 14px; line-height: 20px; color: var(--ds-text-medium); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.card {
  display: flex; flex-direction: column; gap: var(--ds-inner-padding);
  background: var(--ds-surface); border: 1px solid var(--ds-border-medium); border-radius: var(--ds-radius-card-sm);
  padding: var(--ds-primary-padding); text-decoration: none; color: inherit;
  transition: border-color 150ms cubic-bezier(0.2, 0, 0, 1);
}
.card:hover { border-color: var(--ds-border-high); }
.card:hover::before { background: var(--ds-state-neutral-hover); }
.card:active::before { background: var(--ds-state-neutral-pressed); }
.card-top { display: flex; align-items: start; gap: var(--ds-inner-padding); }
.card h3 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 500; }
.card p { margin: 0; color: var(--ds-text-medium); font-size: 16px; line-height: 24px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; line-height: 18px; color: var(--ds-text-medium); }

.score {
  flex: none; width: 48px; height: 48px; border-radius: var(--ds-radius-card-sm);
  display: grid; place-items: center; font-size: 16px; line-height: 24px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.score.top { background: var(--ds-success-surface); color: var(--ds-success-on-surface); }
.score.pass { background: var(--ds-primary-surface); color: var(--ds-primary-on-surface); }
.score.held { background: var(--ds-warning-surface); color: var(--ds-warning-on-surface); }

/* Label (DS Label, size md, tonal) */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--ds-radius-full);
  font-size: 12px; line-height: 18px; font-weight: 500; white-space: nowrap;
  background: var(--ds-surface-glass); box-shadow: var(--ds-shadow-surface-md); color: var(--ds-text-high);
}
.tag.approved, .tag.ready { background: var(--ds-success-surface); box-shadow: none; color: var(--ds-success-on-surface); }
.tag.pending, .tag.held { background: var(--ds-warning-surface); box-shadow: none; color: var(--ds-warning-on-surface); }
.tag.rejected, .tag.failed { background: var(--ds-error-surface); box-shadow: none; color: var(--ds-error-on-surface); }
.tag.brand, .tag.running { background: var(--ds-primary-surface); box-shadow: none; color: var(--ds-primary-on-surface); }
.sev {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--ds-radius-full);
  font-size: 10px; line-height: 16px; font-weight: 500;
}
.sev.P0 { background: var(--ds-error-surface); color: var(--ds-error-on-surface); }
.sev.P1 { background: var(--ds-warning-surface); color: var(--ds-warning-on-surface); }
.sev.P2 { background: var(--ds-surface-glass); box-shadow: var(--ds-shadow-surface-md); color: var(--ds-text-high); }

/* Chip (DS Chip, default type, md) */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip-btn {
  height: 40px; padding: 0 16px; border-radius: var(--ds-radius-full);
  border: 1px solid var(--ds-border-medium); background: var(--ds-surface); color: var(--ds-text-high);
  font-size: 14px; line-height: 20px; font-weight: 500; cursor: pointer;
  transition: border-color 150ms cubic-bezier(0.2, 0, 0, 1), transform 150ms cubic-bezier(0.2, 0, 0, 1);
}
.chip-btn:hover { border-color: var(--ds-border-high); }
.chip-btn:hover::before { background: var(--ds-state-neutral-hover); }
.chip-btn:active { transform: scale(0.97); }
.chip-btn:active::before { background: var(--ds-state-neutral-pressed); }
.chip-btn.active { background: var(--ds-surface-soft); border-color: var(--ds-primary); box-shadow: inset 0 0 0 1px var(--ds-primary); color: var(--ds-primary-on-surface); }

.empty { text-align: center; color: var(--ds-text-medium); padding: 64px 24px; }

/* Article detail */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
@media (max-width: 960px) { .detail { grid-template-columns: minmax(0, 1fr); } .detail > .side { order: -1; position: static; } }
.back { display: inline-flex; align-items: center; height: 40px; margin-bottom: 8px; font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none; color: var(--ds-primary); }

/* Tabs as DS SegmentedControl */
.tabs {
  display: inline-flex; gap: 2px; padding: 4px; margin-bottom: 24px; max-width: 100%; overflow-x: auto;
  background: var(--ds-surface-soft); box-shadow: inset 0 0 0 1px var(--ds-border-medium); border-radius: var(--ds-radius-full);
}
.tabs a {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  height: 40px; min-width: 68px; padding: 0 16px; border-radius: var(--ds-radius-full);
  font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; text-decoration: none; color: var(--ds-text-medium);
}
.tabs a:active::before { background: var(--ds-state-neutral-pressed); }
.tabs a.active { background: var(--ds-surface); color: var(--ds-text-high); box-shadow: var(--ds-shadow-sm); }

/* Article body: same rules as the blog's blog-content.css */
.article-sheet { padding: 32px 40px; }
.prose { max-width: 720px; font-size: 16px; }
.prose h1 { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.5px; margin: 0 0 16px; }
.prose h2 { font-size: 24px; line-height: 34px; font-weight: 600; margin: 40px 0 12px; }
.prose h3 { font-size: 20px; line-height: 28px; font-weight: 600; margin: 28px 0 8px; }
.prose p { margin: 0 0 0.75em; line-height: 1.7; }
.prose ul, .prose ol { margin: 0 0 0.75em 20px; padding: 0; line-height: 1.7; }
.prose li { margin-bottom: 0.5em; padding-left: 6px; }
.prose strong, .prose b { font-weight: 600; }
.prose a { color: var(--ds-primary); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--ds-primary-on-surface); }
.prose blockquote {
  margin: 0 0 0.75em; padding: 8px 16px; background: var(--ds-primary-surface); color: var(--ds-text-high);
  border-left: 3px solid var(--ds-primary); border-radius: var(--ds-radius-card-sm);
}
.prose blockquote p { margin-bottom: 0; }
.prose blockquote ul { margin-bottom: 0; }
.prose code { font-family: var(--mono); font-size: 0.88em; }
.table-scroll { max-width: 100%; overflow-x: auto; margin: 1.5em 0; border: 1px solid var(--ds-border-medium); border-radius: var(--ds-radius-card-sm); }
.table-scroll table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.table-scroll th, .table-scroll td { padding: 16px 4px; text-align: left; vertical-align: top; }
.table-scroll th:first-child, .table-scroll td:first-child { padding-left: 28px; }
.table-scroll th:last-child, .table-scroll td:last-child { padding-right: 28px; }
.table-scroll thead th { background: var(--ds-primary-surface); color: var(--ds-primary-on-surface); font-weight: 500; }
.table-scroll tbody tr { border-top: 1px solid var(--ds-border-medium); }
.table-scroll tbody td { color: var(--ds-text-high); font-variant-numeric: tabular-nums; }
.table-scroll tbody td:first-child { font-weight: 500; }
@media (min-width: 1024px) {
  .table-scroll table { font-size: 16px; line-height: 24px; }
  .table-scroll thead th { font-weight: 600; padding-top: 16px; padding-bottom: 16px; }
  .table-scroll tbody td { padding-top: 24px; padding-bottom: 24px; }
}

/* Side panels */
.side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 104px; }
.panel { padding: var(--ds-primary-padding); }
.side h4 { margin: 0 0 12px; font-size: 16px; line-height: 24px; font-weight: 500; }
.big-score { display: flex; align-items: baseline; gap: 6px; }
.big-score b { font-size: 36px; line-height: 50px; font-weight: 700; font-variant-numeric: tabular-nums; }
.big-score span { color: var(--ds-text-medium); }
.journey { font-size: 14px; line-height: 20px; color: var(--ds-text-medium); margin: 4px 0 0; }
.bars { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.bar-row { display: grid; grid-template-columns: 92px 1fr 44px; gap: 12px; align-items: center; font-size: 14px; line-height: 20px; }
.bar-row span:first-child { color: var(--ds-text-high); }
.bar-track { height: 4px; background: var(--ds-surface-disable); overflow: hidden; }
.bar-fill { height: 100%; background: var(--ds-primary); transition: width 300ms ease-in-out; }
.bar-row span:last-child { font-size: 12px; line-height: 18px; color: var(--ds-text-medium); text-align: right; font-variant-numeric: tabular-nums; }
.facts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.facts li b { display: block; font-size: 20px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.facts li span { font-size: 12px; line-height: 18px; color: var(--ds-text-medium); }
.gate-reasons { margin: 12px 0 0; padding: 12px 12px 12px 30px; font-size: 14px; line-height: 20px; color: var(--ds-text-high); background: var(--ds-warning-surface); border-radius: var(--ds-radius-card-sm); }

.decision textarea {
  width: 100%; min-height: 96px; resize: vertical; padding: 12px; margin: 12px 0;
  border: 1px solid var(--ds-border-medium); border-radius: var(--ds-radius-input-default); background: transparent;
  font-size: 14px; line-height: 20px;
}
.decision textarea:hover { border-color: var(--ds-border-high); }
.decision textarea:focus { outline: none; border-color: var(--ds-primary); box-shadow: inset 0 0 0 1px var(--ds-primary); }
.decision textarea::placeholder { color: var(--ds-text-low); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.status-line { font-size: 12px; line-height: 18px; color: var(--ds-text-medium); margin: 12px 0 0; }

/* Lists */
.list { display: flex; flex-direction: column; gap: 12px; }
.item { padding: var(--ds-primary-padding); }
.item .row { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.item small { color: var(--ds-text-medium); font-size: 12px; line-height: 18px; }
.item p { margin: 6px 0 0; color: var(--ds-text-medium); font-size: 14px; line-height: 20px; }
.ok { color: var(--ds-success-on-surface); font-weight: 500; white-space: nowrap; }
.bad { color: var(--ds-error); font-weight: 500; }
pre.code {
  font-family: var(--mono); font-size: 13px; line-height: 20px; margin: 0;
  background: var(--ds-surface); border: 1px solid var(--ds-border-medium); border-radius: var(--ds-radius-card-sm);
  padding: 16px; overflow-x: auto; white-space: pre;
}
h3 { font-size: 20px; line-height: 28px; font-weight: 600; margin: 28px 0 12px; }

/* Text input (DS TextInput: 48px, floating title inside the box) */
.form { max-width: 640px; display: flex; flex-direction: column; gap: 20px; padding: 24px; }
.float-field { position: relative; display: flex; flex-direction: column; gap: 4px; }
.float-field input, .float-field select, .float-field textarea {
  width: 100%; height: 48px; padding: 22px 12px 4px; margin: 0;
  border: 1px solid var(--ds-border-medium); border-radius: var(--ds-radius-input-default); background: transparent;
  font-size: 14px; line-height: 20px; color: var(--ds-text-high); appearance: none;
}
.float-field textarea { height: auto; min-height: 112px; padding-top: 26px; resize: vertical; }
.float-field select {
  padding-right: 40px; cursor: pointer;
  background: no-repeat right 12px center / 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23717680' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5l5 5 5-5'/%3E%3C/svg%3E");
}
.float-field label {
  position: absolute; left: 13px; top: 14px; pointer-events: none;
  font-size: 14px; line-height: 20px; color: var(--ds-text-medium);
  transition: top 200ms ease-out, font-size 200ms ease-out, line-height 200ms ease-out;
}
.float-field :is(input, textarea)::placeholder { color: transparent; }
.float-field :is(input, textarea):focus::placeholder { color: var(--ds-text-low); }
.float-field :is(input, textarea):focus + label,
.float-field :is(input, textarea):not(:placeholder-shown) + label,
.float-field select + label { top: 4px; font-size: 12px; line-height: 18px; }
.float-field :is(input, select, textarea):hover { border-color: var(--ds-border-high); }
.float-field :is(input, select, textarea):focus { outline: none; border-color: var(--ds-primary); box-shadow: inset 0 0 0 1px var(--ds-primary); }
.float-field .hint { padding: 0 12px; font-size: 12px; line-height: 18px; color: var(--ds-text-medium); }

/* Banner (DS Banner: 12px radius, 12px padding, no border) */
.notice { margin: 0; padding: 12px; border-radius: var(--ds-radius-card-sm); font-size: 14px; line-height: 20px; color: var(--ds-text-high); }
.notice.info { background: var(--ds-info-surface); }
.notice.good { background: var(--ds-success-surface); }
.notice.warning { background: var(--ds-warning-surface); }
.notice.error { background: var(--ds-error-surface); }
.notice a { font-weight: 500; }
.running-banner { display: block; text-decoration: none; margin-bottom: 20px; font-weight: 500; }

/* Progress (DS LinearProgress: 4px, square ends, primary fill) */
.progress { margin-top: 12px; }
.progress-track { height: 4px; background: var(--ds-surface-disable); overflow: hidden; }
.progress-fill { height: 100%; background: var(--ds-primary); transition: width 1s linear; }
.progress-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--ds-text-medium); }

/* Login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--ds-bg); }
.login-card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 16px; padding: 32px 24px; border-radius: var(--ds-radius-card-md); }
.login-card .brand { justify-content: center; margin-bottom: 8px; }
.login-card h1 { margin: 0; font-size: 24px; line-height: 34px; font-weight: 600; text-align: center; }
.login-card > p { margin: -8px 0 8px; text-align: center; color: var(--ds-text-medium); font-size: 14px; line-height: 20px; }
.login-card .btn { width: 100%; }

@media (max-width: 640px) {
  .topbar { height: auto; padding: 12px var(--ds-primary-padding) 4px; gap: 8px; flex-wrap: wrap; }
  .brand-name, .viewer { display: none; }
  #logout { margin-left: auto; }
  .nav { margin-left: -16px; order: 3; width: calc(100% + 16px); overflow-x: auto; }
  main { padding: 24px var(--ds-primary-padding) 80px; }
  .page-head h1 { font-size: 24px; line-height: 34px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kpi b { font-size: 24px; line-height: 34px; }
  .grid { grid-template-columns: 1fr; }
  .article-sheet { padding: 20px 16px; }
  .prose h1 { font-size: 24px; line-height: 34px; }
}

/* How it works */
.how-section { max-width: 820px; margin-bottom: 40px; }
.how-section h2 { margin: 0 0 8px; font-size: 24px; line-height: 34px; font-weight: 600; }
.how-lead { margin: 0 0 16px; color: var(--ds-text-medium); }
.how-section .notice { max-width: 820px; }
.how-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.how-steps .item { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.step-badge {
  width: 32px; height: 32px; border-radius: var(--ds-radius-full); display: grid; place-items: center;
  background: var(--ds-primary-surface); color: var(--ds-primary-on-surface); font-size: 14px; line-height: 20px; font-weight: 600;
}
.how-list { margin: 0; padding-left: 20px; line-height: 1.7; }
.how-list li { margin-bottom: 0.5em; padding-left: 6px; }
.how-section .table-scroll { margin-top: 0; }
.how-section .tags .tag { height: auto; min-height: 24px; padding-top: 3px; padding-bottom: 3px; white-space: normal; }
.side .row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hint-link { font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none; }

/* Checkbox (DS Checkbox, sm: 16px, 4px radius, primary when checked) */
.check { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; font-size: 14px; line-height: 20px; color: var(--ds-text-high); cursor: pointer; }
.check input {
  appearance: none; flex: none; width: 16px; height: 16px; margin: 2px 0 0; border: 1px solid var(--ds-border-high); border-radius: 4px;
  background: transparent; cursor: pointer; transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.check input:checked {
  border-color: transparent;
  background: var(--ds-primary) no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9'/%3E%3C/svg%3E");
}

/* Source badges in the article and the popover that explains them */
.evidence-summary { margin-bottom: 16px; }
.fact-badge {
  display: inline-grid; place-items: center; width: 18px; height: 18px; margin: 0 1px 0 3px; padding: 0; vertical-align: 1px;
  border: 0; border-radius: var(--ds-radius-full); cursor: pointer; position: relative; overflow: hidden;
  font-size: 11px; line-height: 1; font-weight: 700; text-decoration: none;
}
.fact-badge.ok { background: var(--ds-success-surface); color: var(--ds-success-on-surface); }
.fact-badge.missing { background: var(--ds-warning-surface); color: var(--ds-warning-on-surface); }
.fact-badge::before { content: ""; position: absolute; inset: 0; background: transparent; transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1); }
.fact-badge:hover::before { background: var(--ds-state-neutral-hover); }
.fact-badge:active::before { background: var(--ds-state-neutral-pressed); }
.fact-pop {
  position: absolute; z-index: 20; width: min(380px, calc(100vw - 32px)); max-height: 60vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px; padding: var(--ds-primary-padding);
  background: var(--ds-surface); border: 1px solid var(--ds-border-medium); border-radius: var(--ds-radius-card-sm); box-shadow: var(--ds-shadow-dropdown);
  font-size: 14px; line-height: 20px;
}
.fact-pop.sheet { position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-height: 70vh; border-radius: var(--ds-radius-card-md) var(--ds-radius-card-md) 0 0; border-width: 1px 0 0; }
.fact-pop p { margin: 0; }
.fact-pop .journey { margin: 0; }
.fact-pop-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fact-pop-close { width: 32px; height: 32px; margin: -6px -6px -6px 0; border: 0; border-radius: var(--ds-radius-full); background: transparent; font-size: 20px; line-height: 1; color: var(--ds-text-medium); cursor: pointer; }
.fact-pop-close:hover { background: var(--ds-state-neutral-hover); }
.fact-entry { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--ds-border-medium); }
.fact-entry-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; font-weight: 500; }
.fact-entry-head .tag { flex: none; }
.fact-entry p { color: var(--ds-text-high); }

/* Google & CMS tab */
.cms h3.first { margin-top: 0; }
.cms-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 32px 0 12px; }
.cms-head h3 { margin: 0; }
.cms .list + .cms-head { margin-top: 32px; }
.cms > .journey { margin: -4px 0 16px; }
/* Google's own result colours and font, so the preview looks like the real result */
.serp { max-width: 600px; padding: var(--ds-primary-padding); border: 1px solid var(--ds-border-medium); border-radius: var(--ds-radius-card-sm); font-family: Arial, sans-serif; letter-spacing: 0; }
.serp-site { display: flex; align-items: center; gap: 12px; }
.serp-favicon { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 1px solid var(--ds-border-medium); border-radius: var(--ds-radius-full); }
.serp-favicon img { width: 18px; height: 18px; }
.serp-site-text { display: flex; flex-direction: column; min-width: 0; }
.serp-name { font-size: 14px; line-height: 20px; color: #202124; }
.serp-url { font-size: 12px; line-height: 18px; color: #4d5156; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.serp-title { margin-top: 8px; font-size: 20px; line-height: 26px; color: #1a0dab; }
.serp-desc { margin-top: 4px; font-size: 14px; line-height: 22px; color: #4d5156; }
.seo-checks { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 600px; font-size: 14px; line-height: 20px; }
.seo-checks li { display: flex; gap: 8px; align-items: flex-start; }
.seo-icon { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: var(--ds-radius-full); font-size: 12px; font-weight: 700; }
.ok-line .seo-icon { background: var(--ds-success-surface); color: var(--ds-success-on-surface); }
.warn-line .seo-icon { background: var(--ds-warning-surface); color: var(--ds-warning-on-surface); }
.cms-field .row { align-items: flex-start; flex-wrap: wrap; }
.cms-field .row > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.cms-field .actions { flex: none; justify-content: flex-end; }
.field-name { font-family: var(--mono); font-size: 12px; line-height: 18px; color: var(--ds-text-medium); }
.item p.cms-value { color: var(--ds-text-high); overflow-wrap: anywhere; }
.cms-block-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cms-html { margin-top: 8px; font-size: 14px; color: var(--ds-text-high); }
.cms-html p, .cms-html ul, .cms-html ol { margin-bottom: 0.5em; line-height: 1.6; }
.cms-html table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 14px; }
.cms-html th, .cms-html td { padding: 6px 12px 6px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ds-border-medium); }
.cms-html.clamp { max-height: 168px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
.cms-field small { display: block; margin-top: 6px; }

/* Revision panel and history */
.revisions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.revisions li { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--ds-border-medium); }
.revisions li:first-child { padding-top: 0; border-top: 0; }
.revisions p { margin: 0; font-size: 14px; line-height: 20px; color: var(--ds-text-high); }
.revisions small { font-size: 12px; line-height: 18px; color: var(--ds-text-medium); }
.revisions .revision-reason { color: var(--ds-warning-on-surface); }

/* Request page */
.request-layout { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 960px) { .request-layout { grid-template-columns: minmax(0, 1fr); } }
.suggestions h4 { margin: 0 0 4px; font-size: 16px; line-height: 24px; font-weight: 500; }
.suggestions ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; }
.suggestions li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--ds-border-medium); font-size: 14px; line-height: 20px; }
.suggestions li .btn { flex: none; }
.suggestion-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.suggestion-text small {
  font-size: 12px; line-height: 18px; color: var(--ds-text-medium);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.suggestion-group { display: flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 12px; line-height: 18px; font-weight: 500; color: var(--ds-text-medium); }
.suggestion-group + ul { margin-top: 4px; }
.ai-tag { height: 20px; padding: 0 6px; font-size: 11px; }
.empty-suggestions { margin: 12px 0 0; }
.suggestions-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ds-border-medium); }
.suggestions-foot .status-line { margin-top: 8px; }
.overlap:empty { display: none; }

/* Queue actions */
.queue-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.confirm-text { font-size: 14px; line-height: 20px; color: var(--ds-text-high); margin-right: 4px; }

/* Letter templates in articles: wrap like body text instead of one long line */
.prose pre {
  margin: 0 0 1em; padding: 16px; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--ds-surface); border: 1px solid var(--ds-border-medium); border-radius: var(--ds-radius-card-sm);
}
.prose pre code { font-family: var(--ds-font-family-primary); font-size: 15px; line-height: 1.6; }

/* Loading skeletons (as the webapp's: surface-medium blocks, pill radius, pulse), staggered by --i */
.sk {
  display: block; height: 12px; background: var(--ds-surface-medium); border-radius: var(--ds-radius-full);
  animation: sk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; animation-delay: calc(var(--i, 0) * 70ms);
}
.sk.box { border-radius: var(--ds-radius-card-sm); }
.sk.input { height: 48px; border-radius: var(--ds-radius-input-default); }
.sk-stack { display: flex; flex-direction: column; gap: 10px; }
.sk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sk-tags { display: flex; gap: 6px; }
.sk-page[aria-busy="true"] { pointer-events: none; }
@keyframes sk-pulse { 50% { opacity: 0.45; } }

/* Route loading bar: DS LinearProgress, indeterminate, light weight, on the header's bottom edge */
.top-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; opacity: 0; transition: opacity 150ms ease-out; pointer-events: none; }
.top-progress.on { opacity: 1; }
.top-progress span { position: absolute; top: 0; bottom: 0; background: var(--ds-primary); }
.top-progress .bar1 { animation: lp-1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }
.top-progress .bar2 { animation: lp-2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite; }
@keyframes lp-1 { 0% { left: -35%; right: 100%; } 60%, 100% { left: 100%; right: -90%; } }
@keyframes lp-2 { 0% { left: -200%; right: 100%; } 60%, 100% { left: 107%; right: -8%; } }

/* Content arriving */
.page-enter { animation: page-in 240ms cubic-bezier(0.2, 0, 0, 1) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Button busy state (DS Button loading: label hidden, spinner centered) */
.btn.loading { color: transparent; }
.btn.loading:disabled { color: transparent; border-color: var(--ds-border-medium); }
.btn.primary.loading:disabled { background: var(--ds-primary); border-color: var(--ds-primary); }
.btn.loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--ds-primary); border-right-color: transparent; animation: spin 700ms linear infinite;
}
.btn.primary.loading::after { border-color: var(--ds-primary-on-primary); border-right-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .sk, .page-enter, .top-progress span { animation: none; }
  .btn.loading::after { animation-duration: 1.6s; }
  .bar-fill { transition: none; }
}