/* tension-index: "broadsheet data desk" layout with the "Weight" palette (adopted 10.11.2026).
   Cool paper and ink, one quiet blue accent for rising numbers, fresh data and the current page, no alarm colours;
   rules instead of boxes, a serif for headlines and numerals (Frank Ruhl Libre) and a grotesk for text and UI
   (IBM Plex Sans Hebrew). Mobile first, logical properties for RTL/LTR. Colour pairs below are checked for WCAG AA
   on --bg and --surface-2. Research and reasoning: docs/DESIGN_RESEARCH.md, design-concepts/CONCEPTS.md (A). */

/* ---------- fonts (self-hosted, SIL OFL 1.1, licences in /fonts) ---------- */
@font-face {
  font-family: "Frank Ruhl Libre";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/fonts/frl-hebrew.woff2) format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Frank Ruhl Libre";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/fonts/frl-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Hebrew";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plex-hebrew-400.woff2) format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "IBM Plex Sans Hebrew";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/plex-hebrew-600.woff2) format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "IBM Plex Sans Hebrew";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plex-latin-400.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Hebrew";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/plex-latin-600.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cyrillic, for Russian (10 November 2026), the same files as the sister app Quiet Moment. Text: IBM Plex Sans
   Cyrillic, the same design as the Plex Latin above. Headlines: Frank Ruhl Libre has no Cyrillic, so its Cyrillic
   letters come from Source Serif 4 (variable weight), the closest match in weight and x-height; digits and punctuation
   stay Frank Ruhl Libre. Each file loads only when Cyrillic text is on screen (unicode-range) and is precached for
   offline use. Licences in /fonts. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plex-cyrillic-400.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/plex-cyrillic-600.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(/fonts/sourceserif4-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  --bg: #f5f6f7;          /* cool paper */
  --surface: #f5f6f7;     /* no raised cards: same paper */
  --surface-2: #e8eaed;   /* table heads, bar tracks */
  --field: #fbfbfc;
  --text: #0f1012;        /* ink */
  --text-2: #383d44;
  --muted: #50565e;       /* 6.9:1 on --bg, 6.2:1 on --surface-2 */
  --line: #c9cdd2;        /* hairline */
  --rule: #0f1012;        /* heavy section rule */
  --axis: #8f959d;
  --accent: #24467e;      /* one quiet blue: rising numbers, fresh data, the current page */
  --accent-ink: #ffffff;
  --accent-soft: #e2e6ec; /* also the fill of the probability plates on /iran/ */
  --series-1: #0f1012;    /* our series in ink */
  --series-2: #6b7280;    /* comparison series and the normal-level line in grey */
  --deemph: #b9bec5;
  --deemph-bar: #868c94;  /* 3.1:1 on --bg: the grey data bars next to the ink one */
  --good: #1f5f33;
  --bad: #9b1c22;
  --warn: #7a4b00;
  --warn-bg: transparent;
  --good-bg: transparent;
  --bad-bg: transparent;
  --focus: #24467e;
  --shadow: none;
  --radius: 2px;
  --gutter: 16px;
  --serif: "Frank Ruhl Libre", "Source Serif 4", "Times New Roman", Georgia, "Noto Serif Hebrew", serif;
  --sans: "IBM Plex Sans Hebrew", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans Hebrew", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0c0d0f;
    --surface: #0c0d0f;
    --surface-2: #1a1d22;
    --field: #131417;
    --text: #eceef0;
    --text-2: #c6cbd2;
    --muted: #a2a9b2;
    --line: #2b2f35;
    --rule: #eceef0;
    --axis: #5b616a;
    --accent: #9db8ea;
    --accent-ink: #0c0d0f;
    --accent-soft: #18202b;
    --series-1: #eceef0;
    --series-2: #8a93a0;
    --deemph: #3a3f46;
    --deemph-bar: #59606a;
    --good: #7fc394;
    --bad: #e8877e;
    --warn: #e2b55a;
    --focus: #9db8ea;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0d0f;
  --surface: #0c0d0f;
  --surface-2: #1a1d22;
  --field: #131417;
  --text: #eceef0;
  --text-2: #c6cbd2;
  --muted: #a2a9b2;
  --line: #2b2f35;
  --rule: #eceef0;
  --axis: #5b616a;
  --accent: #9db8ea;
  --accent-ink: #0c0d0f;
  --accent-soft: #18202b;
  --series-1: #eceef0;
  --series-2: #8a93a0;
  --deemph: #3a3f46;
  --deemph-bar: #59606a;
  --good: #7fc394;
  --bad: #e8877e;
  --warn: #e2b55a;
  --focus: #9db8ea;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable; /* no sideways jump when data makes the page scroll */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
}

main {
  flex: 1 0 auto;
}

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

a {
  color: var(--text);
  text-decoration-line: underline;
  text-decoration-color: var(--axis);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 0;
}

h1,
h2,
h3 {
  margin: 0 0 0.5rem;
  color: var(--text);
}

h1,
h2 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.005em;
}

h1 {
  font-size: clamp(2rem, 1.45rem + 2.6vw, 3.1rem);
  line-height: 1.08;
}

h2 {
  font-size: clamp(1.4rem, 1.22rem + 0.8vw, 1.8rem);
  line-height: 1.2;
}

/* h3 is a small label ("kicker"), not a smaller headline */
h3 {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase; /* Latin only; Hebrew has no case */
  color: var(--text-2);
}

:lang(he) h3 {
  letter-spacing: 0.01em;
  font-size: 0.875rem;
}

p {
  margin: 0 0 0.9rem;
}

strong {
  font-weight: 600;
}

[hidden] {
  display: none !important;
}

.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}

.skip {
  position: absolute;
  inset-inline-start: 16px;
  top: -60px;
  background: var(--text);
  color: var(--bg);
  padding: 8px 14px;
  z-index: 100;
  text-decoration: none;
}

.skip:focus {
  top: 8px;
}

/* ---------- masthead ---------- */
.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
  padding-block: 12px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--text);
  text-decoration: none;
  margin-inline-end: auto;
  min-height: 40px;
}

.brand:hover {
  color: var(--text);
}

.brand svg {
  width: 22px;
  height: 22px;
  flex: none;
}

.mark-peak {
  fill: var(--accent);
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  order: 2;
}

/* Language switch (10 November 2026, as in the sister apps): one button for each of the two other languages, named
   in its own language and marked with its lang, at least 44 x 44 px. On a narrow phone the buttons wrap. */
.lang-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.controls .icon-btn {
  min-height: 44px;
  min-width: 44px;
}

.nav {
  order: 3;
  flex-basis: 100%;
  margin-inline: -6px;
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 2px;
}

.nav a {
  display: inline-block;
  padding: 10px 6px 9px;
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  font-size: 0.875rem;
}

@media (min-width: 480px) {
  .nav a { font-size: 0.9375rem; padding-inline: 8px; }
}

.nav a:hover {
  color: var(--text);
  border-bottom-color: var(--line);
}

.nav a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

@media (min-width: 900px) {
  .site-header .wrap {
    padding-block: 0;
  }

  .nav {
    order: 1;
    flex-basis: auto;
    margin-inline: 0 auto;
  }

  .nav a {
    padding-block: 22px 19px;
  }

  .brand {
    margin-inline-end: 16px;
  }
}

/* ---------- buttons ---------- */
.icon-btn,
.btn {
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
  border-radius: var(--radius);
  min-height: 40px;
  padding: 6px 16px;
  border: 1px solid var(--text);
  background: transparent;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  line-height: 1.2;
}

.icon-btn {
  min-width: 40px;
  padding-inline: 10px;
  border-color: var(--axis);
  font-size: 0.875rem;
}

.btn.primary {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
  font-weight: 600;
}

.btn:hover,
.icon-btn:hover {
  border-color: var(--text);
  background: var(--surface-2);
  color: var(--text);
}

.btn.primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-block: 14px;
}

/* ---------- page head ---------- */
.page-head {
  padding-block: 28px 4px;
}

@media (min-width: 768px) {
  .page-head {
    padding-block: 48px 8px;
  }
}

.page-head p {
  color: var(--text-2);
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.55;
}

/* The disclaimer: an editor's note set between two hairlines. No fill, no coloured stripe. */
.notice {
  background: none;
  color: var(--text-2);
  border: 0;
  border-block: 1px solid var(--line);
  border-radius: 0;
  padding: 10px 0;
  margin-block: 12px 18px;
  font-size: 0.875rem;
  line-height: 1.55;
  max-width: 43rem;
}

.notice a {
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

.prose .notice {
  font-size: 0.9375rem;
}

.status {
  min-height: 1.5em;
  color: var(--text-2);
  margin-block: 8px;
}

.status.error {
  color: var(--bad);
}

.status.ok {
  color: var(--good);
}

/* ---------- sections: rules instead of cards ---------- */
.cards {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
  margin-block: 8px 40px;
}

@media (min-width: 880px) {
  .cards.two {
    grid-template-columns: 1fr 1fr;
    column-gap: 56px;
  }
}

/* signals page: keep space for the list while the data loads, so nothing below it shifts */
#signals:empty {
  min-height: 110vh;
}

.card {
  background: none;
  border: 0;
  border-top: 2px solid var(--rule);
  border-radius: 0;
  padding: 14px 0 4px;
  box-shadow: none;
  margin-block: 0 32px;
  min-width: 0;
}

.cards > .card {
  margin-block: 0;
}

.card > h2:first-child,
.card > h3:first-child {
  margin-top: 0;
}

.card .question {
  color: var(--text-2);
  font-size: 0.9375rem;
  margin-bottom: 18px;
  max-width: 33rem;
}

.card h3 {
  margin-top: 28px;
  margin-bottom: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.card .chart-head + * {
  margin-top: 2px;
}

.card details {
  margin-top: 22px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.card details summary {
  cursor: pointer;
  color: var(--text-2);
  padding-block: 8px;
  min-height: 24px;
}

.card details p {
  font-size: 0.9375rem;
  color: var(--text-2);
}

/* "to the signals" link at the end of a question block: a full-width, tappable line */
.card > p:last-child > a {
  display: inline-block;
  padding-block: 10px;
  font-weight: 600;
}

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

.small {
  font-size: 0.875rem;
}

.meta {
  color: var(--muted);
  font-size: 0.8125rem;
  margin-block: 4px 16px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* ---------- the numbers ---------- */
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-block: 4px 8px;
}

.stat {
  background: none;
  border-radius: 0;
  padding: 2px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.stat + .stat {
  border-inline-start: 1px solid var(--line);
  padding-inline-start: 18px;
}

.stat:first-child {
  padding-inline-end: 18px;
}

.stat .label {
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 600;
}

.stat .value {
  font-family: var(--serif);
  font-size: clamp(3rem, 2.3rem + 3.2vw, 4.4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  margin-block: 4px 6px;
}

.stat .delta {
  font-size: 0.8125rem;
  color: var(--text-2);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.stat .delta.up {
  color: var(--accent);
  font-weight: 600;
}

.stat .delta.down {
  color: var(--text-2);
}

.stat .base {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.35;
}

/* ---------- charts ---------- */
.chart {
  position: relative;
  margin-block: 4px 8px;
}

.chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.chart-head h3 {
  margin: 28px 0 6px;
  flex: 1 1 100%;
}

.chart-plot {
  position: relative;
  width: 100%;
}

.chart svg,
.chart-plot svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  touch-action: pan-y;
}

.chart svg:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

.chart svg text {
  fill: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.chart svg .label-strong {
  fill: var(--text);
  font-weight: 600;
}

.chart svg .baseline-label {
  fill: var(--text-2);
  font-weight: 400;
}

.chart .grid line {
  stroke: var(--line);
  stroke-width: 1;
}

.chart .axis-line {
  stroke: var(--text);
  stroke-width: 1;
}

.chart .line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart .line.s1 {
  stroke: var(--series-1);
}

.chart .line.s2 {
  stroke: var(--series-2);
  stroke-width: 1.5;
}

.chart .area.s1 {
  fill: var(--series-1);
  opacity: 0.05;
}

.chart .dot {
  stroke: var(--bg);
  stroke-width: 2;
}

.chart .dot.s1 {
  fill: var(--series-1);
}

.chart .dot.s2 {
  fill: var(--series-2);
}

.chart .bar {
  fill: var(--deemph);
}

.chart .bar.peak {
  fill: var(--series-1);
}

.chart .crosshair {
  stroke: var(--text-2);
  stroke-width: 1;
}

.chart .hit {
  fill: transparent;
  pointer-events: all;
}

.chart .baseline-mark {
  stroke: var(--text-2);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 1;
}

.tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--text);
  border-radius: 0;
  box-shadow: none;
  padding: 6px 10px;
  font-size: 0.8125rem;
  white-space: nowrap;
  max-width: 260px;
  min-width: 120px;
  line-height: 1.45;
}

.tip .v {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tip .tip-t,
.tip .tip-s {
  color: var(--text-2);
}

.tip .tip-t {
  font-size: 0.75rem;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 0.8125rem;
  color: var(--text-2);
  margin-block: 8px 2px;
  list-style: none;
  padding: 0;
}

.k.line,
.legend .k,
.tip .k {
  display: inline-block;
  width: 16px;
  height: 0;
  border-top: 2px solid var(--series-1);
  vertical-align: middle;
  margin-inline-end: 6px;
}

.k.line.s2,
.legend .k.s2,
.tip .k.s2 {
  border-top-color: var(--series-2);
}

.toggle-table {
  font: inherit;
  font-size: 0.8125rem;
  background: none;
  border: 0;
  color: var(--text-2);
  text-decoration: underline;
  text-decoration-color: var(--axis);
  text-underline-offset: 0.2em;
  cursor: pointer;
  padding: 4px 0;
  min-height: 32px;
}

.toggle-table:hover {
  color: var(--accent);
}

.chart-table {
  margin-block: 8px;
}

/* ---------- danger-window bars ---------- */
.wbars {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.wbars li {
  display: grid;
  grid-template-columns: minmax(84px, 7.5rem) 1fr 3.2rem;
  align-items: center;
  gap: 12px;
  padding-block: 6px;
  border-bottom: 1px solid var(--line);
}

.wbars li:last-child {
  border-bottom: 0;
}

.wbars .wl {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.wbars .wl-r {
  font-size: 0.875rem;
  color: var(--text);
}

.wbars .wl-d {
  font-size: 0.75rem;
  color: var(--muted);
}

.wbars .track {
  display: block;
  height: 10px;
  background: none;
  overflow: hidden;
}

.wbars .fill {
  display: block;
  height: 100%;
  background: var(--deemph-bar);
}

.wbars li.peak .fill {
  background: var(--series-1);
}

.wbars li.peak .wl-r,
.wbars li.peak .wv {
  font-weight: 600;
}

.wbars .wv {
  text-align: end;
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
}

.window-peak {
  margin-block: 10px 0;
  font-size: 0.9375rem;
}

.window-note {
  margin-block: 6px 0;
  font-size: 0.8125rem;
  color: var(--muted);
  max-width: 36rem;
}

/* ---------- prose blocks inside question sections ---------- */
.rationale {
  margin-block: 4px 0;
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 34rem;
}

.rationale p {
  margin-bottom: 6px;
}

/* ---------- key/value lists (markets, indicators) ---------- */
.kv-list,
.markets {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kv-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-block: 10px;
  border-top: 1px solid var(--line);
}

.kv-list li:first-child {
  border-top: 0;
}

.kv-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.kv-name {
  font-size: 0.9375rem;
  line-height: 1.45;
}

.kv-note {
  font-size: 0.8125rem;
  color: var(--text-2);
}

.kv-meta {
  font-size: 0.75rem;
  color: var(--muted);
}

.kv-val {
  flex: none;
  text-align: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.kv-num {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  font-variant-numeric: lining-nums tabular-nums;
}

.kv-unit {
  font-size: 0.75rem;
  color: var(--muted);
  max-width: 10rem;
}

/* ---------- signals: a ruled list, not boxes ---------- */
.sig-list {
  list-style: none;
  margin: 8px 0 32px;
  padding: 0;
  border-top: 2px solid var(--rule);
}

.sig {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 16px 0 18px;
}

.sig-top {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  align-items: baseline;
  font-size: 0.8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.sig-q {
  font-weight: 600;
  color: var(--text-2);
}

.sig-sum {
  margin: 6px 0 8px;
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.45;
  font-weight: 500;
}

.sig-sum a {
  color: var(--text);
  text-decoration-color: var(--line);
}

.sig-sum a:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

.sig-src {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  align-items: baseline;
  font-size: 0.8125rem;
  color: var(--text-2);
}

.sig-src-name {
  font-weight: 600;
  color: var(--text);
}

.sig-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px dotted var(--line);
  font-size: 0.8125rem;
}

.sig-facts > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sig-facts dt {
  color: var(--muted);
  font-size: 0.75rem;
}

.sig-facts dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.pos {
  color: var(--accent);
}

.neg {
  color: var(--text-2);
}

.neg-status {
  color: var(--bad);
}

@media (min-width: 900px) {
  .sig {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 34%);
    grid-template-areas: "top facts" "sum facts" "src facts";
    column-gap: 32px;
  }

  .sig-top { grid-area: top; }
  .sig-sum { grid-area: sum; }
  .sig-src { grid-area: src; }

  .sig-facts {
    grid-area: facts;
    border-top: 0;
    padding-top: 2px;
    margin-top: 0;
    padding-inline-start: 24px;
    border-inline-start: 1px solid var(--line);
    align-content: start;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- labels (formerly pills): small set text ---------- */
.badge {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-2);
  white-space: nowrap;
}

.badge.official {
  background: none;
  color: var(--text);
  border: 0;
  border-bottom: 1px solid var(--text);
}

.badge.up {
  color: var(--accent);
}

.badge.down {
  color: var(--text-2);
}

/* ---------- tables: hairlines, tabular numerals ---------- */
.table-wrap {
  margin-block: 12px 28px;
}

.scroll-x {
  overflow-x: auto;
  max-width: 100%;
  border: 0;
  border-top: 2px solid var(--rule);
  border-radius: 0;
  background: none;
  -webkit-overflow-scrolling: touch;
}

.scroll-x:focus-visible {
  outline-offset: 2px;
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: none;
  border: 0;
  border-radius: 0;
}

.scroll-x table.data {
  min-width: 100%;
  width: max-content;
}

table.data caption {
  text-align: start;
  font-weight: 600;
  padding: 8px 0;
  color: var(--text-2);
  font-size: 0.8125rem;
}

table.data th,
table.data td {
  text-align: start;
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  vertical-align: top;
  white-space: nowrap;
}

table.data thead th {
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--bg);
  border-top: 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: bottom;
}

table.data th:first-child,
table.data td:first-child {
  padding-inline-start: 0;
}

table.data td.num,
table.data th.num {
  font-variant-numeric: lining-nums tabular-nums;
  text-align: end;
  white-space: nowrap;
}

table.data tbody th {
  border-top: 1px solid var(--line);
  background: var(--bg);
  text-align: start;
  vertical-align: top;
}

table.data tbody tr:first-child th,
table.data tbody tr:first-child td {
  border-top: 0;
}

table.data tbody th[scope="row"] {
  font-weight: 600;
  color: var(--text);
}

table.data td:has(a),
table.data th[scope="row"] {
  white-space: normal;
  min-width: 9rem;
  max-width: 16rem;
}

table.data .pos {
  color: var(--accent);
}

table.data .neg {
  color: var(--text-2);
}

table.sticky-first tbody th[scope="row"],
table.sticky-first thead th:first-child {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  background: var(--bg);
  box-shadow: inset -1px 0 0 var(--line);
}

[dir="rtl"] table.sticky-first tbody th[scope="row"],
[dir="rtl"] table.sticky-first thead th:first-child {
  box-shadow: inset 1px 0 0 var(--line);
}

table.sticky-first thead th:first-child {
  z-index: 2;
}

/* static tables written in the HTML (accessibility page): wrap text, keep readable widths */
.prose table.data th,
.prose table.data td {
  white-space: normal;
  min-width: 7rem;
}

@media (max-width: 640px) {
  .prose .scroll-x { overflow: visible; }
  .prose table.data, .prose table.data tbody, .prose table.data tr, .prose table.data th, .prose table.data td { display: block; width: 100%; }
  .prose table.data { width: 100% !important; }
  .prose table.data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .prose table.data tr { border-top: 1px solid var(--line); padding-block: 8px; }
  .prose table.data tbody tr:first-child { border-top: 0; }
  .prose table.data th, .prose table.data td { border: 0; padding: 2px 0; min-width: 0; }
  .prose table.data td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 0.8125rem; }
  .prose table.data caption { display: block; width: 100%; }
}

/* ---------- filters and forms ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: end;
  margin-block: 16px 4px;
  padding-block: 4px 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-block: 10px;
}

.field label,
fieldset legend {
  font-weight: 600;
  font-size: 0.875rem;
}

.field .hint {
  color: var(--muted);
  font-size: 0.8125rem;
}

input[type="text"],
input[type="email"],
select,
textarea {
  font: inherit;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--muted); /* 3:1+ boundary for form controls */
  border-radius: var(--radius);
  padding: 8px 10px;
  min-height: 40px;
  max-width: 100%;
}

input[type="text"]:hover,
select:hover,
textarea:hover {
  border-color: var(--text-2);
}

textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  line-height: 1.55;
}

select {
  min-width: 10ch;
}

fieldset {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 10px 0 8px;
  margin-block: 12px;
  min-width: 0;
}

fieldset legend {
  padding: 0 0 0;
  float: inline-start;
  width: 100%;
  margin-bottom: 4px;
}

fieldset legend + * {
  clear: both;
}

.choice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding-block: 6px;
}

.choice input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--text);
}

.choice .hint {
  display: block;
  color: var(--muted);
  font-size: 0.8125rem;
}

.inline-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
}

.inline-fields label {
  font-weight: 400;
}

/* ---------- rumour verdict ---------- */
.verdict {
  border-top: 3px solid var(--axis);
  margin-block: 20px;
}

.verdict .head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
}

.verdict .head h2 {
  margin: 0;
}

.verdict .icon {
  width: 24px;
  height: 24px;
  flex: none;
  align-self: center;
}

.verdict.verified { border-top-color: var(--good); }
.verdict.verified .icon { color: var(--good); }
.verdict.refuted { border-top-color: var(--bad); }
.verdict.refuted .icon { color: var(--bad); }
.verdict.unverified { border-top-color: var(--warn); }
.verdict.unverified .icon { color: var(--warn); }

.verdict ul {
  padding-inline-start: 20px;
}

/* ---------- prose pages ---------- */
.prose {
  max-width: 42rem;
  padding-block: 16px 40px;
}

.prose > div > h1:first-child,
.prose > h1:first-child {
  margin-top: 28px;
  margin-bottom: 18px;
}

@media (min-width: 768px) {
  .prose > div > h1:first-child,
  .prose > h1:first-child {
    margin-top: 44px;
  }
}

.prose h2 {
  margin-top: 2.4rem;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: clamp(1.3rem, 1.18rem + 0.6vw, 1.6rem);
}

.prose h3 {
  margin-top: 1.4rem;
}

.prose p,
.prose li,
.prose dd {
  font-size: 1.0625rem;
  line-height: 1.68;
}

.prose ul,
.prose ol {
  padding-inline-start: 22px;
}

.prose ol li::marker {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--text-2);
}

.prose li {
  margin-bottom: 6px;
}

.prose dl dt {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.15rem;
  margin-top: 18px;
}

.prose dl dd {
  margin-inline-start: 0;
}

.prose .card {
  margin-block: 20px;
}

.apps-list {
  list-style: none;
  padding: 0;
}

.apps-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.apps-list img,
.apps-list svg {
  width: 48px;
  height: 48px;
  flex: none;
  margin-top: 6px;
}

.apps-list h2 {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

/* long tokens from users or the API */
.sig-sum,
.kv-name,
.prose a,
.verdict li,
.rationale {
  overflow-wrap: anywhere;
}

/* ---------- footer ---------- */
.site-footer {
  margin-top: 48px;
  border-top: 2px solid var(--rule);
  background: var(--bg);
  color: var(--text-2);
  font-size: 0.8125rem;
}

.site-footer .wrap {
  padding-block: 18px 32px;
}

.site-footer .disclaimer {
  margin-bottom: 12px;
  max-width: 43rem;
}

.site-footer .disclaimer a {
  color: var(--text);
  font-weight: 600;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
}

.footer-links a {
  color: var(--text-2);
  display: inline-block;
  padding-block: 8px;
}

.footer-links a:hover {
  color: var(--accent);
}

/* maker credit: footer line on every page, full card on /about and /apps */
.maker-line {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.maker-line a {
  display: inline-block;
  padding-block: 8px;
  color: var(--accent);
  font-weight: 600;
}

.maker {
  margin-block: 40px 32px;
  padding: 20px 0 8px;
  border-top: 4px solid var(--accent);
}

.maker-kicker {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.maker h2 {
  border-top: 0;
  padding-top: 0;
  margin: 0;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
  line-height: 1.1;
}

.maker-role {
  margin: 6px 0 14px;
  color: var(--text-2);
  font-size: 1.0625rem;
}

.maker-cta {
  margin-top: 18px;
}

.maker-cta .btn {
  min-height: 44px;
  padding-inline: 20px;
}

.maker-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
}

.maker-head .maker-role {
  margin-bottom: 0;
}

.maker-photo {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--surface-2);
}

@media (max-width: 380px) {
  .maker-photo {
    width: 72px;
    height: 72px;
  }
}

/* my sites, apps and groups (bottom of /about): one line per category */
.mine {
  margin-block: 8px 32px;
  padding-top: 14px;
  border-top: 2px solid var(--rule);
}

.mine h2 {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.mine h3 {
  margin: 22px 0 6px;
  font-size: 1.0625rem;
}

.mine-line {
  margin: 6px 0;
  line-height: 1.9;
}

.mine-line a {
  white-space: normal;
}

/* ---------- motion and print ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header .controls,
  .nav,
  .btn-row,
  .skip,
  .toggle-table {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* first element under a section rule never draws a second line */
.card > h3:first-child,
.card > .chart-head:first-child h3,
.card > fieldset:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 4px;
}

/* accuracy page: hold the space of the first two blocks while the data loads */
#brier:empty {
  min-height: 240px;
}

#charts:empty {
  min-height: 720px;
}

@media (min-width: 880px) {
  #charts:empty {
    min-height: 330px;
  }
}

/* ---------- alert channels: segmented radio groups ---------- */
.channels {
  margin-block: 4px 8px;
}

fieldset.seg {
  border-top: 0;
  padding: 0;
  margin-block: 14px 18px;
}

.seg-opts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--text);
  border-radius: var(--radius);
}

.seg-opt {
  position: relative;
  display: flex;
  min-width: 0;
}

.seg-opt + .seg-opt {
  border-inline-start: 1px solid var(--axis);
}

.seg-opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.seg-opt span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 44px;
  padding: 6px 4px;
  font-size: 0.8125rem;
  line-height: 1.2;
  color: var(--text-2);
}

@media (min-width: 480px) {
  .seg-opt span { font-size: 0.875rem; padding-inline: 8px; }
}

.seg-opt:hover span {
  color: var(--text);
  background: var(--surface-2);
}

.seg-opt input:checked + span {
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
}

.seg-opt input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}

.seg-desc {
  margin: 8px 0 0;
  font-size: 0.875rem;
  color: var(--text-2);
  max-width: 33rem;
}

.seg-freq {
  display: block;
  color: var(--muted);
  font-size: 0.8125rem;
}

/* wellbeing note under the alert levels (level 2 and above) */
.seg-calm {
  margin: 14px 0 0;
  padding-inline-start: 12px;
  border-inline-start: 3px solid var(--line);
  font-size: 0.875rem;
  color: var(--text-2);
  max-width: 33rem;
}

.seg-calm[hidden] {
  display: none;
}

#push-card .channels {
  max-width: 560px;
}

/* phones: the six sections as a fixed 3 x 2 index, so the masthead height never depends on font metrics */
@media (max-width: 599px) {
  .nav ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 4px;
  }

  .nav a {
    display: block;
    padding-block: 8px 7px;
  }
}

/* hint lines filled by script (character counter) keep their line from the start */
.field .hint:empty::before {
  content: "\00a0";
}

/* ---------- family circle (/circle) ---------- */
.circle-page .ok-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 8px 0 20px; }
.circle-page .btn-big { min-height: 64px; min-width: 220px; font-size: 1.35rem; font-weight: 600; }
.circle-page .circle-st { font-size: .95rem; }
.circle-page .st-ok { color: var(--text); font-weight: 600; }
.circle-page .st-help { color: var(--accent); font-weight: 600; }
.circle-page input { width: 100%; max-width: 28rem; min-height: 44px; }
@media (max-width: 480px) { .circle-page .btn-big { width: 100%; } }
.circle-page .area-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.circle-page .area-list li { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); padding: 2px 4px 2px 10px; }
.circle-page .area-list .btn.small { min-width: 44px; min-height: 44px; padding: 0 8px; }

/* ---------- content pages: nuclear tracker, sensitive dates, markets history (/iran/nuclear, /iran/dates, /iran/markets-history) ---------- */
.xp-page .xp-list { list-style: none; margin: 8px 0 0; padding: 0; max-width: 46rem; }
.xp-page .xp-list > li { display: flex; flex-direction: column; gap: 2px; padding-block: 12px; border-top: 1px solid var(--line); }
.xp-page .xp-list > li:first-child { border-top: 0; }
.xp-page .xp-date { font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.xp-page .xp-kind { font-weight: 400; color: var(--muted); font-size: 0.875rem; }
.xp-page .xp-title { font-size: 1.0625rem; }
.xp-page .xp-text { color: var(--text); }
.xp-page .xp-src, .xp-page .xp-heb { font-size: 0.875rem; color: var(--text-2); overflow-wrap: anywhere; }
.xp-page .xp-src a { color: var(--text-2); }
.xp-page .xp-tag { margin: 0 0 4px; font-size: 0.8125rem; font-weight: 600; color: var(--text-2); }
.xp-page .xp-tag.est { color: var(--warn); }
.xp-page .xp-lead { font-family: var(--serif); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.4; max-width: 38rem; }
.xp-page .xp-who { font-weight: 600; }
.xp-page .xp-quote { margin: 4px 0; padding-inline-start: 12px; border-inline-start: 2px solid var(--line); font-family: var(--serif); text-align: start; }
.xp-page .xp-quote p { margin: 0; }
[dir="rtl"] .xp-page .xp-quote { border-inline-start: 0; border-inline-end: 2px solid var(--line); padding-inline-start: 0; padding-inline-end: 12px; text-align: left; }
.xp-page .xp-notes { max-width: 46rem; padding-inline-start: 1.2em; }
.xp-page .xp-notes li { margin-block: 6px; }
.xp-page .xp-sources dt { font-weight: 600; margin-top: 10px; }
.xp-page .xp-sources dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.xp-page .xp-hbars { max-width: 46rem; margin-top: 12px; }
.xp-page .xp-hbars svg { overflow: hidden; }
.xp-page .xp-bar { fill: var(--deemph-bar); }
.xp-page .xp-bar.last { fill: var(--text); }
.xp-page .mh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 8px 28px; margin-top: 8px; }
.xp-page .mh-panel { margin: 0; padding-top: 10px; border-top: 1px solid var(--line); min-width: 0; }
.xp-page .mh-panel .mh-h { margin: 0; padding: 0; border: 0; font-size: 1rem; }
.xp-page .mh-what { margin: 2px 0 4px; font-size: 0.8125rem; color: var(--text-2); min-height: 2.6em; }
.xp-page .mh-cap { font-size: 0.8125rem; color: var(--text-2); margin-top: 2px; }
.xp-page .mh-plot svg { max-width: 360px; }
.xp-page .scroll-x { position: relative; } /* keeps visually hidden cell text inside the scroll box */

/* rumor check: ready-to-send post */
.share-preview {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 8px 0 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-inline-start: 3px solid var(--accent);
  max-width: 36rem;
}

.share-row {
  flex-wrap: wrap;
  align-items: center;
}

/* footer credit card (every page): photo, "designed and built by", name, pitch, Facebook button */
.credit {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 18px 0 0;
  padding: 18px 0 2px;
  border-top: 1px solid var(--line);
  color: var(--text-2);
}

.credit p {
  margin: 0;
}

.credit-photo {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--surface-2);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--accent);
}

.credit-by {
  font-size: 0.875rem;
}

.credit-name {
  display: block;
  margin-top: 2px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1.1;
  color: var(--text);
}

.credit-pitch {
  margin-top: 6px !important;
  font-size: 0.875rem;
  line-height: 1.6;
  max-width: 36rem;
}

.credit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 12px !important;
}

/* Facebook-style button, darker than Facebook's own blue so white text passes WCAG AA (5.9:1) */
.credit-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding-block: 8px;
  padding-inline: 14px 18px;
  border-radius: 999px;
  background: #0b5fcc;
  color: #fff;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.25;
  text-decoration: none;
}

.credit-cta:hover {
  background: #0a52b0;
  color: #fff;
}

.credit-cta:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 3px;
}

.credit-cta svg {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 6px;
}

.credit-more {
  display: inline-block;
  padding-block: 10px;
  color: var(--text);
  font-weight: 600;
  font-size: 0.875rem;
}

@media (max-width: 420px) {
  .credit-photo {
    width: 60px;
    height: 60px;
  }
  .credit-name {
    font-size: 1.375rem;
  }
}

/* feedback form */
.fb-form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 14px;
}

.fb-kinds label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}

.fb-form textarea,
.fb-form input[type="text"] {
  width: 100%;
  max-width: 36rem;
}

/* honeypot for bots: off-screen, never focusable */
.fb-hp {
  position: absolute;
  inset-inline-start: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* links that open in a new tab: a small arrow (mirrored in Hebrew) */
/* word joiner (U+2060) keeps the arrow on the same line as the last word */
a[data-ext]:not(.btn):not(.credit-cta)::after {
  content: "\2060\00a0↗";
  font-size: 0.8em;
  text-decoration: none;
}

[dir="rtl"] a[data-ext]:not(.btn):not(.credit-cta)::after {
  content: "\2060\00a0↖";
}

/* footer credit, level 2: small photo + line + Facebook icon */
.maker-line {
  display: flex;
  align-items: center;
  gap: 6px 10px;
}

.maker-line .maker-who {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 0;
}

.maker-mini {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent);
}

.maker-line .maker-fb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin-inline-start: -6px;
}

.maker-line .maker-fb svg {
  width: 26px;
  height: 26px;
  border-radius: 6px;
}

.maker-line .maker-fb::after {
  content: none !important;
}

/* ---------- language note (12.11.2026) ----------
   One quiet line under the header that offers this page in the reader's language (their earlier choice on the site,
   otherwise the browser's). It is written in that language, nobody is moved automatically, and closing it keeps it
   closed. Built by i18n.js only when the page exists in that language. */
.lang-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 2px var(--gutter);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}

.lang-note p {
  margin: 0;
}

.lang-note a {
  font-weight: 600;
}

.lang-note-close {
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
}

.lang-note-close:hover {
  background: var(--bg);
}

@media print {
  .lang-note {
    display: none;
  }
}