/* ShieldWave blog. Same system as the landing (src/pages/landing/landing.css):
   after linear.app: #08090a, Inter at 510, greys, light pill buttons.
   A plain article page: no cards, no pills, no glow. */
:root {
  --color-paper: #08090a;
  --color-paper-2: #0f1011;
  --color-paper-3: #1c1d1f;
  --color-ink: #f7f8f8;
  --color-ink-2: #d0d6e0;
  --color-ink-3: #8a8f98;
  --color-rule: rgb(255 255 255 / 0.08);
  --color-rule-strong: rgb(255 255 255 / 0.14);
  --color-accent: #f7f8f8;
  --color-accent-strong: #e5e5e6;
  --color-accent-strong-hover: #ffffff;
  --color-on-ink: #08090a;
  /* Latin in Inter, Arabic in IBM Plex Sans Arabic, as on the /ar/ landing. */
  --font-display: 'Inter', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-body: 'Inter', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem;
  --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4.5rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: 1.125rem; line-height: 1.7; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.b-wrap { max-width: 72.5rem; margin: 0 auto; padding: 0 1.5rem; }
.b-narrow { max-width: 42rem; }
.b-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.b-header .b-wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-top: var(--space-lg); }
.b-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 1.2rem; letter-spacing: -0.02em; }
.b-nav { display: flex; gap: var(--space-lg); font-size: 0.9375rem; }
.b-nav a { color: var(--color-ink); text-underline-offset: 3px; white-space: nowrap; }

.b-article, .b-list { padding: var(--space-2xl) 0 var(--space-2xl); }
.b-crumbs { margin: 0 0 var(--space-md); font-size: 0.9375rem; }
.b-crumbs a { color: var(--color-accent); text-underline-offset: 3px; }
h1 { font-family: var(--font-display); font-weight: 510; font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem); line-height: 1.02; letter-spacing: -0.03em; margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
.b-lead { font-size: 1.3rem; line-height: 1.55; color: var(--color-ink-2); margin: var(--space-md) 0 0; }
.b-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: var(--space-md) 0 0; padding: var(--space-xs) 0; border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); font-size: 0.875rem; color: var(--color-ink-3); }
.b-meta a { color: var(--color-accent); text-underline-offset: 3px; }

.b-toc { margin: var(--space-lg) 0 0; }
.b-toc p { margin: 0 0 var(--space-2xs); font-size: 0.875rem; font-weight: 600; color: var(--color-ink-2); }
.b-toc ol { margin: 0; padding: 0; list-style: none; font-size: 1rem; line-height: 1.8; }
.b-toc a { color: var(--color-ink-2); text-decoration: none; }
.b-toc a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }

.b-prose { margin-top: var(--space-xl); }
.b-prose p { margin: 0 0 1.1em; }
.b-prose h2 { font-family: var(--font-display); font-weight: 510; letter-spacing: -0.025em; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2rem); line-height: 1.2; margin: 2em 0 0.5em; scroll-margin-top: var(--space-lg); }
.b-prose ol, .b-prose ul { margin: 0 0 1.2em; padding-inline-start: 1.4em; }
.b-prose li { margin: 0.4em 0; }
.b-prose strong { font-weight: 600; }
.b-prose a { color: var(--color-accent); text-underline-offset: 3px; }
.b-prose code { font-family: var(--font-mono); font-size: 0.86em; background: var(--color-paper-3); padding: 0.1em 0.35em; border-radius: 3px; overflow-wrap: anywhere; }
.b-prose blockquote { margin: 0 0 1.2em; padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: 10px; color: var(--color-ink-2); font-size: 1rem; line-height: 1.65; }
.b-prose blockquote p:last-child { margin-bottom: 0; }

/* Data articles: tables, bar charts (build-blog.mjs, ```bars blocks) and
   the download line. Numbers in tabular figures so columns line up. */
.b-table { margin: 0 0 1.4em; overflow-x: auto; }
.b-prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.b-prose th, .b-prose td { padding: 0.55em 1em 0.55em 0; border-bottom: 1px solid var(--color-rule); text-align: start; vertical-align: top; }
.b-prose th:last-child, .b-prose td:last-child { padding-inline-end: 0; }
.b-prose thead th { font-weight: 600; color: var(--color-ink-2); border-bottom-color: var(--color-rule-strong); }
.b-prose th[align='right'], .b-prose td[align='right'] { text-align: end; }
.b-chart { margin: 1.8em 0 2em; }
.b-chart figcaption { font-weight: 600; font-size: 1rem; line-height: 1.45; margin: 0 0 var(--space-xs); }
.b-prose .b-bars { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-rule-strong); }
.b-prose .b-bars li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 7rem; gap: var(--space-sm); align-items: center; margin: 0; padding: 0.55em 0; border-bottom: 1px solid var(--color-rule); font-size: 0.9375rem; line-height: 1.4; }
.b-bar { display: block; width: 100%; height: 0.5rem; }
.b-bar-track { fill: var(--color-paper-3); }
.b-bar-fill { fill: var(--color-ink-2); }
.b-bar-num { text-align: end; font-variant-numeric: tabular-nums; font-weight: 600; }
.b-bar-num span { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--color-ink-3); }
.b-chart-note { margin: var(--space-2xs) 0 0; font-size: 0.875rem; line-height: 1.55; color: var(--color-ink-3); }
.b-data { margin: var(--space-xl) 0 0; padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); font-size: 0.9375rem; line-height: 1.6; color: var(--color-ink-2); }
.b-data a { color: var(--color-accent); text-underline-offset: 3px; }

.b-cta { margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: 2px solid var(--color-rule-strong); }
.b-cta h2 { margin: 0; font-family: var(--font-display); font-weight: 510; letter-spacing: -0.025em; font-size: 1.75rem; line-height: 1.2; }
.b-cta p { margin: var(--space-xs) 0 var(--space-md); color: var(--color-ink-2); }
.b-form { display: flex; gap: var(--space-sm); align-items: flex-end; }
.b-form input { flex: 1 1 auto; min-width: 0; height: 3.25rem; padding: 0 1rem; border: 1px solid var(--color-rule-strong); border-radius: 999px; background: var(--color-paper-2); color: var(--color-ink); font-family: var(--font-body); font-size: 1.125rem; }
.b-form input:focus { outline: none; border-color: var(--color-accent); }
.b-form input::placeholder { color: var(--color-ink-3); opacity: 0.7; }
.b-form button { height: 3.25rem; padding: 0 var(--space-lg); border: 1px solid var(--color-accent-strong); border-radius: 999px; background: var(--color-accent-strong); color: var(--color-on-ink); font-family: var(--font-body); font-size: 1rem; font-weight: 510; cursor: pointer; white-space: nowrap; transition: background-color 180ms var(--ease-out); }
.b-form button:hover { background: var(--color-accent-strong-hover); border-color: var(--color-accent-strong-hover); }
.b-cta { background: var(--color-paper-2); border-top: 0 !important; border-radius: 10px; padding: var(--space-md) !important; }

.b-list ul { list-style: none; margin: var(--space-md) 0 0; padding: 0; border-top: 1px solid var(--color-rule); }
.b-list li a { display: block; padding: var(--space-md) 0; border-bottom: 1px solid var(--color-rule); text-decoration: none; }
.b-list strong { display: block; font-family: var(--font-display); font-weight: 510; letter-spacing: -0.025em; font-size: 1.5rem; line-height: 1.25; }
.b-list li a:hover strong { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.b-list span { display: block; color: var(--color-ink-2); font-size: 1rem; margin-top: 0.25rem; }

.b-footer .b-wrap { padding-top: var(--space-md); padding-bottom: var(--space-xl); border-top: 1px solid var(--color-rule); font-size: 0.875rem; color: var(--color-ink-3); }
.b-footer a { color: var(--color-ink-2); text-decoration: none; }
.b-footer a:hover { text-decoration: underline; }

/* Index: one group per language, each with its own way into the check. */
.b-list-langs { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); margin: var(--space-md) 0 0; font-size: 1rem; }
.b-list-langs a { color: var(--color-accent); text-underline-offset: 3px; }
.b-list-group { margin-top: var(--space-2xl); scroll-margin-top: var(--space-lg); }
.b-list-group h2 { margin: 0; font-family: var(--font-display); font-weight: 510; letter-spacing: -0.02em; font-size: 1.25rem; line-height: 1.3; color: var(--color-ink-2); }
.b-list-check { margin: var(--space-2xs) 0 0; font-size: 1rem; }
.b-list-check a { color: var(--color-accent); text-underline-offset: 3px; }

.b-footer .b-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2xs) var(--space-md); }
.b-footer-links { display: inline-flex; flex-wrap: wrap; gap: var(--space-md); }
.b-footer-cookies { background: none; border: 0; padding: 0; font: inherit; color: var(--color-ink-2); cursor: pointer; }
.b-footer-cookies:hover { text-decoration: underline; }
.b-footer-cookies[hidden] { display: none; }

/* Cookie banner (content/blog/consent.js), the app's choices in the blog's look. */
.b-consent {
  position: fixed; z-index: 50; left: 50%; bottom: 1rem; transform: translateX(-50%);
  width: min(40rem, calc(100% - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto;
  padding: var(--space-md); background: var(--color-paper-2); color: var(--color-ink);
  border: 1px solid var(--color-rule-strong); border-radius: 12px; box-shadow: 0 20px 50px -20px rgb(0 0 0 / 0.8);
  font-size: 0.9375rem; line-height: 1.55; animation: b-consent-in 400ms var(--ease-out) both;
}
@keyframes b-consent-in { from { opacity: 0; transform: translate(-50%, 12px); } }
.b-consent-title { margin: 0; font-size: 1rem; font-weight: 600; }
.b-consent-text { margin: var(--space-2xs) 0 0; color: var(--color-ink-2); }
.b-consent-details { margin-top: var(--space-sm); border-top: 1px solid var(--color-rule); }
.b-consent-details[hidden] { display: none; }
.b-consent-option { display: flex; gap: var(--space-xs); align-items: flex-start; padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); cursor: pointer; }
.b-consent-option input { margin-top: 0.3rem; accent-color: var(--color-accent-strong); }
.b-consent-option strong { display: block; font-weight: 600; font-size: 0.875rem; }
.b-consent-option span span { display: block; color: var(--color-ink-3); font-size: 0.8125rem; }
.b-consent-actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-sm); }
.b-consent-btn {
  height: 2.5rem; padding: 0 var(--space-sm); border-radius: 999px; cursor: pointer;
  border: 1px solid var(--color-rule-strong); background: transparent; color: var(--color-ink);
  font: 510 0.875rem var(--font-body);
}
.b-consent-btn[hidden] { display: none; }
.b-consent-btn:hover { background: var(--color-paper-3); }
.b-consent-btn--primary { margin-inline-start: auto; background: var(--color-accent-strong); border-color: var(--color-accent-strong); color: var(--color-on-ink); }
.b-consent-btn--primary:hover { background: var(--color-accent-strong-hover); }

@media (max-width: 600px) {
  body { font-size: 1.0625rem; }
  .b-consent-actions { flex-direction: column; }
  .b-consent-btn, .b-consent-btn--primary { width: 100%; margin-inline-start: 0; }
  .b-wrap { padding: 0 1rem; }
  .b-form { flex-direction: column; align-items: stretch; }
  .b-form button { width: 100%; }
  .b-prose .b-bars li { grid-template-columns: minmax(0, 1fr) 6.5rem; gap: 0.35rem var(--space-sm); }
  .b-bar-label { grid-column: 1 / -1; }
}
/* Arabic, right to left. Arabic script is cursive: no tracking, and taller
   lines for the dots and marks above and below. Code, DNS records and
   addresses stay left to right inside the text (build-blog.mjs marks them
   dir="ltr"); isolate keeps the punctuation around them in place. */
[dir='rtl'], [dir='rtl'] * { letter-spacing: 0 !important; }
/* Headings at 510 would pick Plex 600 (loaded for <strong>); the landing's
   Arabic headings render at 500, so the blog does too. */
[dir='rtl'] h1, [dir='rtl'] h2, .b-list-group[dir='rtl'] strong { font-weight: 500; }
[dir='rtl'] body { line-height: 1.85; }
[dir='rtl'] h1 { line-height: 1.3; }
[dir='rtl'] .b-lead { line-height: 1.75; }
[dir='rtl'] .b-prose { line-height: 1.9; }
[dir='rtl'] .b-prose h2, [dir='rtl'] .b-cta h2 { line-height: 1.45; }
[dir='rtl'] .b-toc ol { line-height: 2; }
[dir='rtl'] code { direction: ltr; unicode-bidi: isolate; }
/* One box per value: a domain or a DNS record never breaks across two
   right-to-left lines, and a long one wraps inside its own box. */
[dir='rtl'] .b-prose code { display: inline-block; max-width: 100%; line-height: 1.5; }
[dir='rtl'] .b-form input { text-align: right; }
/* Bars grow from the right, where the reader starts. */
[dir='rtl'] .b-bar { transform: scaleX(-1); }
.b-list-group[dir='rtl'] strong { line-height: 1.45; }
.b-list-group[dir='rtl'] span { line-height: 1.8; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .b-consent { animation: none; } }