/* Military Ledger design system, v2 (editorial white identity, 2026-10-15). */

:root {
  --ink: #17191B;
  --paper: #FFFFFF;
  --white: #FFFFFF;
  --accent: #C5362B;
  --muted: #54595F;
  --border: #DADDE0;
  --border-strong: #17191B;
  --surface: #F4F4F5;
  --surface-deep: #E9EAEC;
  --link: #17191B;
  --focus: #C5362B;
  --slate: var(--muted);
  --ink-soft: #2B2E32;

  --max: 1240px;
  --measure: 720px;
  --aside: 300px;
  --aside-home: 250px;
  --gutter: 16px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;
  --r-sm: 2px; --r-md: 3px;
  --t: 150ms;

  --font: "ML Noto Sans", "Noto Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "ML Playfair", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-head: var(--font-serif);
  --head-weight: 800;
  --head-track: -0.012em;
  --head-lh: 1.06;
  --fs-body: 18px;
  --lh-body: 1.65;
  --fs-meta: 13px;
  --fs-standfirst: 18px;
  --fs-card: 19px;
  --fs-row: 17px;
  --fs-page: 30px;
  --fs-lead: 32px;
  --fs-h1: 34px;
  --fs-section: 26px;
  --fs-nav: 15px;
}
@media (min-width: 640px) { :root { --gutter: 24px; --fs-page: 34px; --fs-lead: 34px; --fs-h1: 40px; --fs-section: 28px; } }
@media (min-width: 960px) { :root { --gutter: 32px; --fs-body: 19px; --fs-meta: 13px; --fs-standfirst: 20px; --fs-card: 21px; --fs-page: 38px; --fs-lead: 38px; --fs-h1: 46px; --fs-section: 30px; --fs-nav: 16px; } }
@media (min-width: 1200px) { :root { --fs-h1: 50px; --fs-lead: 46px; } }

/* Script-specific families and metrics. Headlines fall back to the script's sans where Playfair has no glyphs. */
:lang(ar), :lang(fa) { --font: "ML Noto Sans Arabic", "Noto Sans Arabic", "Noto Naskh Arabic", "Segoe UI", Tahoma, Arial, sans-serif; --font-head: var(--font); --head-weight: 800; --head-track: 0; --head-lh: 1.35; --lh-body: 1.85; }
:lang(he) { --font: "ML Noto Sans Hebrew", "Noto Sans Hebrew", "ML Noto Sans", Arial, sans-serif; --font-head: var(--font); --head-weight: 800; --head-track: 0; --head-lh: 1.25; --lh-body: 1.75; }
:lang(ja) { --font: "ML Noto Sans", "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif; --font-head: "Noto Serif CJK JP", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", var(--font); --head-weight: 700; --head-track: 0; --head-lh: 1.35; --lh-body: 1.85; }
:lang(zh-Hant) { --font: "ML Noto Sans", "Noto Sans CJK TC", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; --font-head: "Noto Serif CJK TC", "Noto Serif TC", "Songti TC", "PMingLiU", var(--font); --head-weight: 700; --head-track: 0; --head-lh: 1.35; --lh-body: 1.85; }
:lang(tr), :lang(pl) { --head-track: -0.005em; }

/* ---------- reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--paper); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); font-synthesis: none; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; min-height: 100dvh; display: flex; flex-direction: column; }
:lang(ja) body, :lang(zh-Hant) body, :lang(ja), :lang(zh-Hant) { line-break: strict; word-break: normal; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.16em; text-decoration-color: var(--accent); }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-head); font-weight: var(--head-weight); line-height: var(--head-lh); letter-spacing: var(--head-track); overflow-wrap: anywhere; hyphens: manual; }
p, li, td, th, dd, figcaption { min-width: 0; overflow-wrap: anywhere; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { width: 24px; height: 24px; flex: none; }
.icon-sm { width: 18px; height: 18px; }
.icon-xs { width: 14px; height: 14px; }
.sprite { display: none; }
time { white-space: nowrap; }
.time-utc { direction: ltr; unicode-bidi: isolate; }
main { flex: 1 0 auto; }
.caps { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; line-height: 1.3; }
:lang(ar) .caps, :lang(fa) .caps, :lang(he) .caps, :lang(ja) .caps, :lang(zh-Hant) .caps, :lang(ar) .kicker, :lang(fa) .kicker, :lang(he) .kicker, :lang(ja) .kicker, :lang(zh-Hant) .kicker, :lang(ar) .section-label, :lang(fa) .section-label, :lang(he) .section-label, :lang(ja) .section-label, :lang(zh-Hant) .section-label { text-transform: none; letter-spacing: 0; font-size: 13px; }

.skip-link { position: absolute; inset-inline-start: var(--s4); top: -100px; z-index: 100; background: var(--ink); color: var(--white); padding: var(--s3) var(--s4); font-weight: 600; }
.skip-link:focus { top: var(--s4); }

/* ---------- preview banner ---------- */
.preview-banner { background: #5A3A00; color: #FFF3D6; font-size: 14px; line-height: 1.4; }
.preview-banner-inner { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; padding-block: var(--s2); }
.preview-banner a { color: inherit; font-weight: 600; }
.preview-build { margin-inline-start: auto; opacity: .85; }
.fixture-badge { display: inline-block; font-size: 12px; line-height: 1.3; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #5A3A00; background: #FFE8B3; border: 1px solid #E0B65A; padding: 2px 6px; margin-block-end: var(--s2); }
:lang(ar) .fixture-badge, :lang(fa) .fixture-badge, :lang(he) .fixture-badge, :lang(ja) .fixture-badge, :lang(zh-Hant) .fixture-badge { text-transform: none; letter-spacing: 0; }
.fixture-badge-lg { font-size: 14px; }
.draft-state { font-size: 13px; color: #5A3A00; background: #FFF3D6; padding: var(--s1) var(--s2); margin-block-end: var(--s3); }
.preview-panel { background: #FFF8E8; border: 1px solid #E0B65A; border-inline-start: 4px solid #B8860B; padding: var(--s4); margin-block: var(--s6); font-size: 15px; line-height: 1.5; color: #3D2A00; }
.preview-panel p + p { margin-top: var(--s2); }
.preview-panel-title { font-weight: 700; }

/* ---------- masthead ---------- */
.masthead { background: var(--paper); color: var(--ink); }
.masthead-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "brand search menu" "lang lang lang"; align-items: center; column-gap: var(--s1); padding-block: var(--s3) 0; }
.masthead-tagline { grid-area: tagline; display: none; font-size: 14px; color: var(--ink); margin: 0; }
.brand { grid-area: brand; display: block; justify-self: start; padding-block: var(--s1); }
.brand-logo { width: 196px; height: auto; direction: ltr; }
.brand-logo-reversed { width: 220px; }
.masthead-search { grid-area: search; }
.menu-btn { grid-area: menu; }
.lang-switch { grid-area: lang; position: relative; justify-self: start; margin-top: -2px; padding-bottom: var(--s1); }
.tool-btn { display: inline-flex; align-items: center; gap: var(--s2); min-width: 44px; min-height: 44px; padding: var(--s2); background: transparent; border: 1px solid transparent; color: inherit; cursor: pointer; font-size: 14px; font-weight: 500; transition: color var(--t), background var(--t); }
.tool-btn:hover { color: var(--accent); }
.tool-label { display: inline; }
.masthead-search .tool-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lang-btn { min-height: 44px; padding: var(--s1) var(--s2); margin-inline-start: calc(var(--s2) * -1); font-size: 15px; }
.lang-btn .icon { width: 18px; height: 18px; }
.lang-menu { position: absolute; inset-inline-start: 0; top: calc(100% - 4px); z-index: 50; min-width: 260px; max-height: min(70vh, 540px); overflow: auto; background: var(--white); color: var(--ink); border: 1px solid var(--border); box-shadow: 0 10px 28px rgba(23,25,27,.14); padding: var(--s2); }
.lang-menu[hidden] { display: none; }
.lang-menu-title { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: var(--s2) var(--s3); font-weight: 700; }
.lang-menu ul { list-style: none; }
.lang-menu a { display: flex; flex-direction: column; gap: 2px; padding: var(--s2) var(--s3); min-height: 44px; justify-content: center; text-decoration: none; color: var(--ink); }
.lang-menu a:hover { background: var(--surface); color: var(--ink); }
.lang-menu a.is-current { font-weight: 700; box-shadow: inset 3px 0 0 var(--accent); }
[dir="rtl"] .lang-menu a.is-current { box-shadow: inset -3px 0 0 var(--accent); }
.lang-native { font-size: 16px; }
.lang-note { font-size: 12px; color: var(--muted); }
.utility-sep { display: none; width: 1px; height: 18px; background: var(--border); margin-inline: var(--s2); }

.primary-nav { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--border); }
.primary-nav .container { display: flex; align-items: stretch; gap: var(--s2); }
.primary-list { list-style: none; display: flex; gap: 0; flex: 1; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; }
.primary-list::-webkit-scrollbar { display: none; }
.primary-list li { flex: none; }
.primary-list a, .nav-secondary { display: inline-flex; align-items: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s3); color: var(--ink); text-decoration: none; font-size: var(--fs-nav); font-weight: 600; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color var(--t), border-color var(--t); }
.primary-list li:first-child a { padding-inline-start: 0; }
.primary-list a:hover, .nav-secondary:hover { color: var(--accent); }
.primary-list a[aria-current], .nav-secondary[aria-current] { border-bottom-color: var(--accent); color: var(--ink); }
.nav-secondary { flex: none; }
.nav-secondary .icon { width: 18px; height: 18px; color: var(--muted); }
@media (min-width: 640px) { .brand-logo { width: 280px; } }
@media (min-width: 960px) {
  .masthead-grid { grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "tagline tagline lang search" "brand brand brand brand"; column-gap: 0; padding-block: 0; }
  .masthead-tagline { display: block; padding-block: var(--s2); }
  .lang-switch { justify-self: end; margin: 0; padding: 0; }
  .lang-btn { min-height: 36px; margin: 0; font-size: 14px; }
  .lang-menu { inset-inline-start: auto; inset-inline-end: 0; }
  .masthead-search { min-height: 36px; padding-inline: var(--s2) 0; }
  .masthead-search .tool-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .masthead-search::before { content: ""; width: 1px; height: 16px; background: var(--border); margin-inline-end: var(--s3); }
  .masthead-tagline, .lang-switch, .masthead-search { border-bottom: 1px solid var(--border); align-self: stretch; display: flex; align-items: center; }
  .brand { padding-block: var(--s5) var(--s4); }
  .brand-logo { width: 380px; }
  .menu-btn { display: none; }
  .primary-list a { padding: 0 var(--s4); min-height: 50px; }
  .primary-list li:first-child a { padding-inline-start: var(--s1); }
}
@media (min-width: 1200px) { .brand-logo { width: 400px; } .masthead-tagline { font-size: 15px; } }

/* ---------- dialogs (menu, search) ---------- */
.panel { border: 0; padding: 0; background: var(--white); color: var(--ink); max-width: none; max-height: none; width: min(100%, 400px); height: 100dvh; margin: 0; margin-inline-start: auto; inset-inline-end: 0; inset-inline-start: auto; box-shadow: -8px 0 32px rgba(23,25,27,.22); }
.panel::backdrop { background: rgba(23,25,27,.5); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); min-height: 64px; }
.panel-logo { width: 190px; }
.panel-title { font-size: 22px; }
.panel-close { color: var(--ink); }
.panel-close:hover { color: var(--accent); }
.panel-body { padding: var(--s4); overflow: auto; height: calc(100dvh - 64px); }
.panel-group-title { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: var(--s4) 0 var(--s2); font-weight: 700; }
:lang(ar) .panel-group-title, :lang(fa) .panel-group-title, :lang(he) .panel-group-title, :lang(ja) .panel-group-title, :lang(zh-Hant) .panel-group-title, :lang(ar) .lang-menu-title, :lang(fa) .lang-menu-title, :lang(he) .lang-menu-title, :lang(ja) .lang-menu-title, :lang(zh-Hant) .lang-menu-title { text-transform: none; letter-spacing: 0; font-size: 13px; }
.panel-group-title a { color: inherit; text-decoration: none; }
.panel-list { list-style: none; }
.panel-list a { display: flex; align-items: center; gap: var(--s3); min-height: 48px; padding: var(--s2) var(--s2); text-decoration: none; color: var(--ink); font-weight: 600; font-size: 17px; border-bottom: 1px solid var(--border); }
.panel-list li:last-child a { border-bottom: 0; }
.panel-list a:hover { color: var(--accent); }
.panel-list a[aria-current] { box-shadow: inset 3px 0 0 var(--accent); padding-inline-start: var(--s3); }
[dir="rtl"] .panel-list a[aria-current] { box-shadow: inset -3px 0 0 var(--accent); }
.panel-list .icon { color: var(--muted); }
.panel-list-compact a { font-weight: 500; font-size: 16px; min-height: 44px; }
.panel-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s2); }
.search-panel { width: min(100%, 560px); height: auto; max-height: 100dvh; margin-inline: auto; inset: 0; box-shadow: 0 16px 48px rgba(23,25,27,.25); }
.search-form { padding-bottom: var(--s4); }
.search-field { display: flex; gap: var(--s2); padding: var(--s4); }
.search-field input { flex: 1; min-width: 0; min-height: 48px; font: inherit; font-size: 18px; padding: var(--s2) var(--s3); border: 1px solid var(--ink); background: var(--white); color: var(--ink); }
.search-field input:focus-visible { outline-offset: 0; border-color: var(--accent); }

/* ---------- buttons, status ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding: var(--s2) var(--s5); border: 1px solid var(--ink); background: var(--white); color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; transition: background var(--t), color var(--t), border-color var(--t); }
.btn:hover { background: var(--ink); color: var(--white); }
.btn-primary { background: var(--ink); color: var(--white); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
.btn-ghost { border-color: var(--border); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); background: transparent; color: var(--ink); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn.is-loading { color: var(--muted); }
.spinner { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.status { display: inline-block; padding: var(--s1) var(--s3); font-size: 15px; font-weight: 600; border: 1px solid; }
.status-success, .form-status.is-success { color: #1F4D2B; background: #E6F1E8; border-color: #9CC3A5; }
.status-error, .form-status.is-error { color: #7A1F1F; background: #F8E6E6; border-color: #D9A0A0; }
.status-info, .form-status.is-info { color: #1D3F5C; background: #E4EDF4; border-color: #9DB8CC; }
.arrow::after { content: "\2192"; display: inline-block; margin-inline-start: var(--s1); }
[dir="rtl"] .arrow::after { content: "\2190"; }
.arrow-back::after { content: "\2190"; margin-inline: 0 var(--s1); }
[dir="rtl"] .arrow-back::after { content: "\2192"; }

/* ---------- kickers, meta, stories ---------- */
.kicker { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: baseline; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--accent); line-height: 1.3; margin-block-end: var(--s2); }
.kicker a { color: inherit; text-decoration: none; }
.kicker a:hover { text-decoration: underline; }
.kicker-sep { color: var(--border); }
.card-meta, .dateline, .credit, .caption-text, .source-pub { font-size: var(--fs-meta); color: var(--muted); line-height: 1.5; }
.card-meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); }
.card-meta > span + span::before { content: "\00b7"; margin-inline-end: var(--s2); color: var(--border); }
.card-meta .kicker-cat { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
:lang(ar) .card-meta .kicker-cat, :lang(fa) .card-meta .kicker-cat, :lang(he) .card-meta .kicker-cat, :lang(ja) .card-meta .kicker-cat, :lang(zh-Hant) .card-meta .kicker-cat { text-transform: none; letter-spacing: 0; font-size: 12px; }
.card { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.row-story, .card-body, .lead-main, .lead-side, .archive-head-text, .article, .text-page { min-width: 0; }
.card-media { display: block; overflow: hidden; background: var(--surface); }
.media { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--surface); }
.card-title { font-size: var(--fs-card); line-height: 1.18; }
.card-title a { color: var(--ink); text-decoration: none; }
.card-title a:hover { color: var(--accent); }
.card-title-lead { font-size: var(--fs-lead); line-height: var(--head-lh); }
.card-standfirst { font-size: var(--fs-standfirst); font-weight: 400; line-height: 1.45; color: var(--ink-soft); }
.card-standfirst-sm { font-size: 15px; line-height: 1.5; color: var(--muted); }
.card-body { display: flex; flex-direction: column; gap: var(--s2); }
.card-body .card-meta { margin-top: auto; }
.row-story { padding-block: var(--s4); border-top: 1px solid var(--border); }
.row-title { font-size: var(--fs-row); line-height: 1.22; }
.row-title a { color: var(--ink); text-decoration: none; }
.row-title a:hover { color: var(--accent); }
.row-story .card-meta { margin-top: var(--s2); }

/* Thumb rows: thumbnail beside the text (desktop: start side; phones: end side, small) */
.story-thumb { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: var(--s3); align-items: start; }
.story-thumb .card-media { order: 2; }
.story-thumb .card-body { order: 1; }
.story-thumb .card-standfirst { display: none; }
.story-thumb .card-title { font-size: var(--fs-row); }
.story-thumb.card-noimg { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .story-thumb { grid-template-columns: 148px minmax(0, 1fr); gap: var(--s4); }
  .story-thumb .card-media { order: 0; }
  .story-thumb .card-standfirst { display: block; }
  .story-thumb .card-title { font-size: 19px; }
}
@media (min-width: 960px) { .story-thumb { grid-template-columns: 160px minmax(0, 1fr); } .story-thumb .card-title { font-size: 20px; } }

/* ---------- section heads ---------- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); border-top: 1px solid var(--ink); padding-top: var(--s4); margin-block-end: var(--s4); }
.section-title { font-size: var(--fs-section); display: flex; align-items: center; gap: var(--s3); }
.section-title::before { content: ""; display: inline-block; width: 28px; height: 4px; background: var(--accent); flex: none; }
.section-title-sm { font-size: 18px; margin: var(--s6) 0 var(--s3); }
.section-title-sm::before { width: 20px; height: 3px; }
.section-more { font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; color: var(--ink); display: inline-flex; align-items: center; gap: var(--s1); }
.section-more:hover { color: var(--accent); }
[dir="rtl"] .section-more .icon { transform: scaleX(-1); }
.section-label { font-family: var(--font); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--accent); margin-block-end: var(--s3); }

/* ---------- homepage ---------- */
.home { display: flex; flex-direction: column; gap: var(--s8); padding-block: var(--s4) var(--s16); }
.lead-cluster { display: grid; gap: var(--s6); }
.lead-main { display: grid; gap: var(--s6); }
.card-lead { gap: var(--s3); }
.card-lead .card-body { gap: var(--s3); }
.card-lead .kicker { color: var(--accent); }
.card-lead .card-media { margin-block: var(--s1); }
.card-lead .card-meta { margin-top: 0; }
.lead-support { display: grid; gap: 0; border-top: 1px solid var(--border); }
.lead-support .card-story { padding-block: var(--s4); border-bottom: 1px solid var(--border); }
.lead-latest { border-top: 1px solid var(--border); padding-top: var(--s4); }
.lead-latest .section-label { margin-block-end: 0; }
.lead-latest .section-label a { color: inherit; text-decoration: none; }
.lead-latest .section-label a:hover { text-decoration: underline; }
.latest-list { display: grid; }
.latest-list .card-story { padding-block: var(--s4); border-top: 1px solid var(--border); }
.latest-list > .card-story:first-child { border-top: 0; }
.latest-list .card-title { font-size: var(--fs-row); line-height: 1.22; }
.latest-list .card-standfirst { display: none; }
.home-section .story-grid { display: grid; gap: 0; }
.story-grid .card-story { padding-block: var(--s4); border-top: 1px solid var(--border); }
.story-grid > .card-story:first-child { border-top: 0; }
.is-feature .story-grid > .card-story:first-child { grid-template-columns: 1fr; }
.is-feature .story-grid > .card-story:first-child .card-media { order: 0; }
.is-feature .story-grid > .card-story:first-child .card-title { font-size: var(--fs-card); }
.is-feature .story-grid > .card-story:first-child .card-standfirst { display: block; }
.is-explainers .story-grid .card-story { grid-template-columns: 1fr; }
.pub-intro { display: grid; gap: var(--s6); align-items: center; border-top: 1px solid var(--ink); padding-top: var(--s6); }
.pub-intro-title { font-size: 26px; }
.pub-intro-tagline { font-weight: 600; font-size: var(--fs-standfirst); color: var(--ink-soft); margin-block: var(--s2) var(--s3); }
.pub-intro-text { font-size: 16px; }
.pub-intro figcaption { font-size: var(--fs-meta); color: var(--muted); padding-top: var(--s2); }
.empty-state { padding: var(--s8); text-align: center; border: 1px dashed var(--border); display: flex; flex-direction: column; gap: var(--s4); align-items: center; }
.empty-inline { padding: var(--s4); }
/* Phones: lead first, latest reports second, supporting stories third */
@media (max-width: 639px) {
  .lead-main { display: contents; }
  .card-lead { order: 1; }
  .lead-latest { order: 2; }
  .lead-support { order: 3; }
  .lead-support .card-story:last-child { border-bottom: 0; }
}
@media (min-width: 640px) {
  .home { gap: var(--s10); padding-block: var(--s6) var(--s16); }
  .lead-support { grid-template-columns: 1fr 1fr; column-gap: var(--s8); }
  .lead-support .card-story { border-bottom: 0; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s3); position: relative; }
  .lead-support .card-story:first-child::after { content: ""; position: absolute; inset-block: var(--s4); inset-inline-end: calc(var(--s8) / -2); width: 1px; background: var(--border); }
  .lead-support .card-story .card-standfirst { display: block; }
  .lead-support .card-story .card-title { font-size: 19px; }
  .card-lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
  .card-lead .card-media { order: 2; margin: 0; }
  .card-lead .card-body { order: 1; }
  .latest-list { grid-template-columns: 1fr 1fr; column-gap: var(--s8); }
  .latest-list .card-story { border-top: 1px solid var(--border); }
  .latest-list > .card-story:nth-child(-n+2) { border-top: 0; }
  .home-section:not(.is-short) .story-grid { grid-template-columns: 1fr 1fr; column-gap: var(--s8); }
  .story-grid > .card-story:nth-child(-n+2) { border-top: 0; }
  .is-feature .story-grid > .card-story:first-child { grid-column: 1 / -1; }
  .is-feature .story-grid > .card-story:nth-child(2), .is-feature .story-grid > .card-story:nth-child(3) { border-top: 1px solid var(--border); }
  .pub-intro { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .lead-cluster { grid-template-columns: minmax(0, 1fr) var(--aside-home); column-gap: var(--s8); }
  .lead-main { gap: var(--s5); }
  .card-lead { grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); gap: var(--s8); }
  .card-lead .card-title { font-size: var(--fs-lead); }
  .lead-latest { border-top: 0; padding-top: 0; border-inline-start: 1px solid var(--border); padding-inline-start: var(--s6); margin-inline-start: calc(var(--s8) / -2); }
  .latest-list { grid-template-columns: 1fr; }
  .latest-list > .card-story:nth-child(-n+2) { border-top: 1px solid var(--border); }
  .latest-list > .card-story:first-child { border-top: 0; padding-top: var(--s3); }
  .latest-list .story-thumb { grid-template-columns: 1fr; }
  .latest-list .story-thumb .card-media { display: none; }
  .latest-list .card-title { font-size: 18px; }
  .home-section:not(.is-short) .story-grid { grid-template-columns: repeat(3, 1fr); column-gap: var(--s6); }
  .story-grid > .card-story:nth-child(-n+3) { border-top: 0; }
  .home-section:not(.is-short) .story-grid .story-thumb { grid-template-columns: 1fr; }
  .story-grid .story-thumb .card-media { order: 0; }
  .is-short .story-grid { grid-template-columns: 1fr; }
  .is-short .story-grid .card-story::after { display: none; }
  .is-short .story-grid .story-thumb { grid-template-columns: 240px minmax(0, 1fr); gap: var(--s6); }
  .is-short .story-grid .story-thumb .card-title { font-size: 24px; }
  .is-short .story-grid .story-thumb .card-standfirst { display: block; }
  .story-grid .story-thumb .card-title { font-size: 21px; }
  .story-grid .card-story { position: relative; }
  .story-grid .card-story:not(:nth-child(3n))::after { content: ""; position: absolute; inset-block: var(--s4); inset-inline-end: calc(var(--s6) / -2); width: 1px; background: var(--border); }
  .is-feature .story-grid > .card-story:first-child { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); }
  .is-feature .story-grid > .card-story:first-child::after { display: none; }
    .is-feature .story-grid > .card-story:first-child .card-title { font-size: 30px; }
  .is-feature .story-grid > .card-story:nth-child(n+2):nth-child(-n+4) { border-top: 1px solid var(--border); }
  .pub-intro { grid-template-columns: 3fr 2fr; }
}
@media (min-width: 1200px) {
  .lead-cluster { column-gap: var(--s10); }
  .lead-latest { margin-inline-start: calc(var(--s10) / -2); }
  .lead-support .card-story { grid-template-columns: 160px minmax(0, 1fr); gap: var(--s4); }
}

/* ---------- archive ---------- */
.breadcrumbs { padding-block: var(--s4); font-size: var(--fs-meta); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); color: var(--muted); }
.breadcrumbs li + li::before { content: "/"; color: var(--border); margin-inline-end: var(--s2); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }
.page-title { font-size: var(--fs-page); line-height: var(--head-lh); }
.page-intro { font-size: var(--fs-standfirst); color: var(--ink-soft); line-height: 1.5; margin-top: var(--s3); max-width: 62ch; }
.archive-head { display: grid; gap: var(--s6); padding-block: var(--s2) var(--s6); border-bottom: 1px solid var(--ink); margin-block-end: 0; }
.archive-art { max-width: 520px; }
.archive-art figcaption { font-size: var(--fs-meta); color: var(--muted); padding-top: var(--s2); }
.archive-list { display: grid; }
.archive-list .card-story { padding-block: var(--s4); border-bottom: 1px solid var(--border); }
@media (min-width: 640px) {
  .archive-list { grid-template-columns: 1fr 1fr; column-gap: var(--s8); }
  .archive-list .card-story { padding-block: var(--s5); }
}
@media (min-width: 960px) {
  .archive-head.has-art { grid-template-columns: 1fr minmax(320px, 480px); align-items: center; }
  .archive-list { grid-template-columns: repeat(3, 1fr); column-gap: var(--s6); }
  .archive-list .story-thumb { grid-template-columns: 1fr; }
  .archive-list .story-thumb .card-media { order: 0; }
}
.pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-block: var(--s8) var(--s16); border-top: 1px solid var(--ink); padding-top: var(--s6); }
.page-numbers { list-style: none; display: flex; gap: var(--s1); }
.page-num, .page-step { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--s3); text-decoration: none; font-weight: 600; color: var(--ink); }
.page-num:hover, .page-step:hover { color: var(--accent); }
.page-num.is-current { background: var(--ink); color: var(--white); }
.page-step.is-disabled { color: var(--muted); opacity: .6; }
.region-index { list-style: none; display: grid; gap: 0; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-block: var(--s2) var(--s10); border-top: 1px solid var(--border); border-inline-start: 1px solid var(--border); }
.region-index a { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: var(--s2) var(--s4); border-bottom: 1px solid var(--border); border-inline-end: 1px solid var(--border); text-decoration: none; font-weight: 600; color: var(--ink); }
.region-index a:hover { color: var(--accent); }
.region-group { margin-block-end: var(--s12); }
.row-grid { display: grid; }
@media (min-width: 640px) { .row-grid { grid-template-columns: 1fr 1fr; column-gap: var(--s8); } }
@media (min-width: 960px) { .row-grid { grid-template-columns: repeat(3, 1fr); column-gap: var(--s6); } }

/* ---------- article ---------- */
.article-layout { display: grid; gap: var(--s10); padding-block: var(--s5) var(--s16); }
.article { max-width: var(--measure); min-width: 0; }
.article-head { display: flex; flex-direction: column; gap: var(--s4); padding-block-end: var(--s4); }
.article-title { font-size: var(--fs-h1); line-height: var(--head-lh); }
.standfirst { font-size: var(--fs-standfirst); font-weight: 400; line-height: 1.5; color: var(--ink-soft); }
.byline-row { display: flex; flex-direction: column; gap: var(--s1); padding-block: var(--s3); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--border); }
.byline { font-size: 14px; font-weight: 700; }
.byline a { color: var(--ink); text-decoration: none; }
.byline a:hover { color: var(--accent); }
.dateline { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); align-items: center; }
.dateline > span { display: inline-flex; align-items: center; gap: var(--s1); }
.dateline .icon { color: var(--muted); }
.figure { margin: 0; }
.figure-hero { margin-block: var(--s2) var(--s8); }
.figure-page { margin-block: var(--s4) var(--s8); max-width: var(--measure); }
.figure-frame { overflow: hidden; background: var(--surface); }
.figure figcaption { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); padding-top: var(--s2); font-size: var(--fs-meta); color: var(--muted); line-height: 1.5; border-bottom: 1px solid var(--border); padding-bottom: var(--s2); }
.provenance { display: inline-flex; align-items: center; gap: var(--s1); font-weight: 600; color: var(--muted); }
.prose { min-width: 0; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 27px; margin-top: 1.6em; line-height: 1.15; }
.prose h3 { font-size: 22px; margin-top: 1.4em; line-height: 1.2; }
.prose ul, .prose ol { padding-inline-start: 1.4em; }
.prose li + li { margin-top: .4em; }
.prose a { text-decoration: underline; }
.prose blockquote { margin: 1.2em 0; padding: var(--s2) var(--s6); border-inline-start: 3px solid var(--accent); color: var(--ink-soft); font-size: 1.05em; }
.prose strong { font-weight: 700; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll:focus-visible { outline-offset: 0; }
table { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 1.5; }
th, td { text-align: start; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-weight: 700; border-bottom: 2px solid var(--ink); }
.toc { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--border); padding: var(--s3) 0; font-size: 15px; }
.toc-inline-wrap { margin-block: var(--s6); }
.toc-inline { margin: 0; }
.toc-title { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink); }
:lang(ar) .toc-title, :lang(fa) .toc-title, :lang(he) .toc-title, :lang(ja) .toc-title, :lang(zh-Hant) .toc-title { text-transform: none; letter-spacing: 0; font-size: 13px; }
.toc ol { padding-inline-start: 1.3em; margin-top: var(--s2); }
.toc li + li { margin-top: var(--s1); }
.toc a { text-decoration: none; color: var(--ink-soft); }
.toc a:hover { color: var(--accent); text-decoration: underline; }
.toc summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 32px; list-style: none; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary .icon { transition: transform var(--t); color: var(--muted); }
.toc[open] summary .icon { transform: rotate(180deg); }
.toc-aside { display: none; }
.translation-note { margin-top: var(--s8); font-size: var(--fs-meta); color: var(--muted); }
.sources, .corrections { margin-top: var(--s8); padding-top: var(--s4); border-top: 1px solid var(--ink); font-size: 15px; }
.sources-title { display: flex; align-items: center; gap: var(--s2); font-family: var(--font); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--ink); margin-block-end: var(--s3); }
:lang(ar) .sources-title, :lang(fa) .sources-title, :lang(he) .sources-title, :lang(ja) .sources-title, :lang(zh-Hant) .sources-title { text-transform: none; letter-spacing: 0; font-size: 13px; }
.sources ol, .corrections ul { padding-inline-start: 1.3em; color: var(--ink-soft); }
.sources li + li, .corrections li + li { margin-top: var(--s2); }
.share { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s8); padding-top: var(--s4); border-top: 1px solid var(--border); }
.share-label { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .09em; margin-inline-end: var(--s2); }
:lang(ar) .share-label, :lang(fa) .share-label, :lang(he) .share-label, :lang(ja) .share-label, :lang(zh-Hant) .share-label { text-transform: none; letter-spacing: 0; font-size: 13px; }
.share-status { font-size: var(--fs-meta); color: var(--accent); font-weight: 600; }
.article-aside { min-width: 0; }
.related-list { border-top: 1px solid var(--border); }
.related-list .card-story { padding-block: var(--s3); border-bottom: 1px solid var(--border); }
.related-list .card-title { font-size: 17px; line-height: 1.25; }
.article-aside .section-title-sm { margin-top: 0; }
@media (min-width: 1100px) {
  .article-layout.has-aside { grid-template-columns: minmax(0, var(--measure)) var(--aside); column-gap: var(--s10); justify-content: start; align-items: start; }
  .toc-aside { display: block; position: sticky; top: var(--s6); margin-block-end: var(--s8); }
  .toc-inline-wrap { display: none; }
  .article-aside { padding-top: var(--s2); }
}
@media (min-width: 1300px) { .article-layout.has-aside { column-gap: var(--s12); } }

/* ---------- text pages, forms ---------- */
.text-page { max-width: var(--measure); padding-block-end: var(--s16); }
.text-head { padding-block: var(--s2) var(--s6); border-bottom: 1px solid var(--ink); margin-block-end: var(--s6); }
.ml-form { margin-top: var(--s8); max-width: 560px; }
.ml-form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s4); }
.ml-form fieldset:disabled { opacity: .55; }
.form-legend { font-size: 20px; font-weight: 700; margin-block-end: var(--s2); }
.form-help { font-size: 15px; color: var(--muted); line-height: 1.5; }
.field { display: flex; flex-direction: column; gap: var(--s1); }
.field label { font-weight: 600; font-size: 15px; }
.field input, .field textarea { font: inherit; font-size: 17px; min-height: 48px; padding: var(--s2) var(--s3); border: 1px solid var(--muted); background: var(--white); color: var(--ink); width: 100%; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--accent); outline-offset: 0; }
.field.is-invalid input, .field.is-invalid textarea, [aria-invalid="true"] { border-color: #A32F2F; border-width: 2px; }
.field-error { font-size: 14px; color: #7A1F1F; min-height: 1.2em; }
.field-error:empty { display: none; }
.field-check { flex-direction: row; align-items: flex-start; gap: var(--s3); }
.field-check input { width: 22px; height: 22px; min-height: 0; margin-top: 2px; flex: none; }
.field-check label { font-weight: 400; font-size: 16px; }
.form-status { margin-top: var(--s3); padding: var(--s2) var(--s3); font-size: 15px; border: 1px solid transparent; }
.form-status:empty { display: none; }
.form-status:not(.is-success):not(.is-error):not(.is-info) { color: var(--muted); background: var(--surface); border-color: var(--border); }
.newsletter-block { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 960px) { .newsletter-block { grid-template-columns: 1fr 1fr; } }
.cookie-banner { background: var(--white); border: 1px solid var(--border); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); font-size: 15px; }

.contact-channels { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--border); }
.contact-btn { unicode-bidi: isolate; }

/* ---------- search ---------- */
.search-page { padding-block: var(--s6) var(--s16); max-width: 860px; }
.search-form-page .search-field { padding: var(--s4) 0; }
.search-summary { font-size: var(--fs-meta); color: var(--muted); margin-block: var(--s2) var(--s4); }
.search-results { list-style: none; display: grid; }
.search-results .row-story { border-top: 1px solid var(--border); }
.search-results mark { background: #FBE9E7; color: inherit; padding: 0 1px; }
.search-standfirst { font-size: 16px; color: var(--ink-soft); margin-top: var(--s1); }
.error-page { padding-block: var(--s12) var(--s16); max-width: 640px; }
.error-page p + p { margin-top: var(--s4); }
.error-page .page-title { margin-top: var(--s2); }
.error-page .btn { margin-inline-end: var(--s2); }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #E6E7E9; margin-top: auto; padding-block: var(--s10) var(--s8); border-top: 4px solid var(--accent); }
.footer-grid { display: grid; gap: var(--s8); }
.footer-logo { width: 220px; direction: ltr; }
.footer-desc { margin-top: var(--s4); font-size: 15px; max-width: 42ch; color: #B9BCC1; }
.footer-nav { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.footer-title { font-family: var(--font); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #FFFFFF; margin-block-end: var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid rgba(255,255,255,.18); }
:lang(ar) .footer-title, :lang(fa) .footer-title, :lang(he) .footer-title, :lang(ja) .footer-title, :lang(zh-Hant) .footer-title { text-transform: none; letter-spacing: 0; font-size: 14px; }
.footer-nav ul { list-style: none; display: flex; flex-direction: column; gap: var(--s1); }
.footer-nav a { color: #E6E7E9; text-decoration: none; display: inline-block; padding-block: var(--s1); min-height: 32px; font-size: 15px; }
.footer-nav a:hover { color: #FFFFFF; text-decoration: underline; text-decoration-color: var(--accent); }
.footer-nav a:focus-visible, .site-footer :focus-visible { outline-color: #FFFFFF; }
.footer-base { margin-top: var(--s8); padding-top: var(--s4); border-top: 1px solid rgba(255,255,255,.18); font-size: 13px; color: #B9BCC1; }
@media (min-width: 960px) { .footer-grid { grid-template-columns: 1fr 2fr; } }

/* ---------- component review page ---------- */
.components { padding-block: var(--s6) var(--s16); }
.c-section { margin-block: var(--s12); padding-top: var(--s6); border-top: 1px solid var(--ink); }
.c-section > .section-title { margin-block-end: var(--s4); }
.c-table { font-size: 14px; }
.swatch { display: inline-block; width: 18px; height: 18px; border: 1px solid var(--border); vertical-align: middle; margin-inline-end: var(--s2); }
.c-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-block: var(--s3); }
.c-scripts { list-style: none; display: grid; gap: var(--s2); font-size: 18px; }
.c-icons { display: flex; flex-wrap: wrap; gap: var(--s3); color: var(--ink); }
.c-icons span { display: inline-flex; padding: var(--s2); background: var(--white); border: 1px solid var(--border); }
.components .lead-main { max-width: 760px; }

/* ---------- print ---------- */
@media print { .masthead, .site-footer, .share, .preview-banner, .panel { display: none; } body { background: #fff; } }

/* ---------- military spending and war costs tool ---------- */
.milex { scroll-margin-top: var(--s6); }
.milex [hidden] { display: none !important; }
.milex-intro { font-size: 16px; color: var(--ink-soft); max-width: 70ch; margin-block-end: var(--s4); }
.milex-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--ink); margin-block-end: var(--s5); }
.milex-tab { font: inherit; font-size: 15px; font-weight: 700; min-height: 44px; padding: var(--s2) var(--s4); background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; color: var(--muted); cursor: pointer; }
.milex-tab:hover { color: var(--accent); }
.milex-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.milex-view-title { font-size: 22px; margin-block-end: var(--s2); }
.milex-sub { font-size: 15px; color: var(--muted); margin-block-end: var(--s4); max-width: 80ch; }
.milex-note { font-size: 13px; color: var(--muted); line-height: 1.5; }
.milex-label { font-weight: 700; }
.milex-controls { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s4); align-items: end; margin-block-end: var(--s3); }
.milex-field { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.milex-field label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
:lang(ar) .milex-field label, :lang(fa) .milex-field label, :lang(he) .milex-field label, :lang(ja) .milex-field label, :lang(zh-Hant) .milex-field label { text-transform: none; letter-spacing: 0; font-size: 13px; }
.milex-field input[type="search"], .milex-field select { font: inherit; font-size: 15px; min-height: 44px; padding: var(--s2) var(--s3); border: 1px solid var(--ink); background: var(--white); color: var(--ink); width: 100%; border-radius: 0; }
.milex-field select { appearance: none; -webkit-appearance: none; padding-inline-end: var(--s8); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2317191B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 18px; background-position: right var(--s2) center; }
[dir="rtl"] .milex-field select { background-position: left var(--s2) center; }
.milex-field input:focus-visible, .milex-field select:focus-visible { border-color: var(--accent); outline-offset: 0; }
.milex-field-search { grid-column: 1 / -1; }
.milex-field-check { flex-direction: row; align-items: center; gap: var(--s2); min-height: 44px; }
.milex-field-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex: none; }
.milex-field-check label { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.milex-hint { font-size: 13px; color: var(--muted); margin-block-end: var(--s3); }
.milex-count { font-weight: 700; color: var(--ink); }
.milex-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.milex-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.milex-table th, .milex-table td { padding: var(--s2) var(--s2); border-bottom: 1px solid var(--border); vertical-align: middle; text-align: start; }
.milex-table thead th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); border-bottom: 1px solid var(--ink); }
:lang(ar) .milex-table thead th, :lang(fa) .milex-table thead th, :lang(he) .milex-table thead th, :lang(ja) .milex-table thead th, :lang(zh-Hant) .milex-table thead th { text-transform: none; letter-spacing: 0; font-size: 12px; }
.milex-table tbody th { font-weight: 700; white-space: nowrap; }
.milex-rank { display: inline-block; min-width: 1.6em; color: var(--muted); font-weight: 400; font-size: 12px; font-variant-numeric: tabular-nums; }
.milex-col-check { width: 32px; padding-inline-end: 0; }
.milex-col-check input { width: 20px; height: 20px; margin: 0; display: block; accent-color: var(--accent); }
.milex-col-bar { width: 40%; }
.milex-bar { display: block; height: 14px; background: var(--surface); position: relative; }
.milex-bar-fill { display: block; height: 100%; background: var(--ink); min-width: 2px; transition: width var(--t); }
.milex-amount { white-space: nowrap; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; text-align: start; }
[dir="rtl"] .milex-amount { direction: rtl; }
.milex-amount span[data-milex-value], .milex-compare-value, .milex-card-amount, .milex-total dd strong { unicode-bidi: isolate; }
.milex-est { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
:lang(ar) .milex-est, :lang(fa) .milex-est, :lang(he) .milex-est, :lang(ja) .milex-est, :lang(zh-Hant) .milex-est { text-transform: none; letter-spacing: 0; font-size: 12px; }
.milex-col-region, .milex-col-status { color: var(--muted); font-size: 13px; white-space: nowrap; }
.milex.is-enhanced .milex-col-status { display: none; }
.milex tr.is-selected th, .milex tr.is-selected td { background: #FBF3F2; }
.milex-empty { padding: var(--s4) 0; color: var(--muted); }
.milex-actions { margin-block: var(--s3); }
.milex-compare { border: 1px solid var(--ink); padding: var(--s4); margin-block: var(--s4); }
.milex-compare-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-block-end: var(--s3); }
.milex-compare-title { font-size: 18px; }
.milex-compare-caption { display: block; font-family: var(--font); font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
:lang(ar) .milex-compare-caption, :lang(fa) .milex-compare-caption, :lang(he) .milex-compare-caption, :lang(ja) .milex-compare-caption, :lang(zh-Hant) .milex-compare-caption { text-transform: none; letter-spacing: 0; }
.milex-compare-list { list-style: none; display: grid; gap: var(--s3); }
.milex-compare-list li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
.milex-compare-name { font-weight: 700; font-size: 15px; }
.milex-bar-lg { height: 22px; }
.milex-compare-value { font-size: 14px; font-variant-numeric: tabular-nums; }
.milex-total { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); align-items: baseline; margin-block: var(--s4); padding-block: var(--s3); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--border); font-size: 15px; }
.milex-total dt { font-weight: 700; }
.milex-total dd { margin: 0; }
.milex-total dd strong { font-size: 18px; }
.milex-disclosure { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.milex-disclosure summary { cursor: pointer; font-weight: 700; color: var(--ink); min-height: 32px; display: flex; align-items: center; }
.milex-disclosure p + p { margin-top: var(--s2); }
.milex-disclosure a { color: var(--ink); }
.milex-group-title { font-family: var(--font); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-block: var(--s5) var(--s3); padding-top: var(--s3); border-top: 1px solid var(--ink); }
:lang(ar) .milex-group-title, :lang(fa) .milex-group-title, :lang(he) .milex-group-title, :lang(ja) .milex-group-title, :lang(zh-Hant) .milex-group-title { text-transform: none; letter-spacing: 0; font-size: 13px; }
.milex-cards { display: grid; gap: var(--s4); }
.milex-card { border: 1px solid var(--border); padding: var(--s4); min-width: 0; }
.milex-card-unavailable { border-style: dashed; }
.milex-card-title { font-size: 19px; margin-block-end: var(--s2); }
.milex-card-amount { font-size: 20px; font-weight: 700; margin-block-end: var(--s3); font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; gap: var(--s2); align-items: baseline; }
.milex-class { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; border: 1px solid var(--accent); padding: 1px 6px; }
:lang(ar) .milex-class, :lang(fa) .milex-class, :lang(he) .milex-class, :lang(ja) .milex-class, :lang(zh-Hant) .milex-class { text-transform: none; letter-spacing: 0; font-size: 12px; }
.milex-card-facts { display: grid; gap: var(--s2); font-size: 14px; line-height: 1.5; }
.milex-card-facts > div { display: grid; grid-template-columns: 1fr; gap: 2px; }
.milex-card-facts dt { font-weight: 700; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
:lang(ar) .milex-card-facts dt, :lang(fa) .milex-card-facts dt, :lang(he) .milex-card-facts dt, :lang(ja) .milex-card-facts dt, :lang(zh-Hant) .milex-card-facts dt { text-transform: none; letter-spacing: 0; font-size: 13px; }
.milex-card-facts dd { margin: 0; }
.milex-card-facts a { color: var(--ink); }
@media (max-width: 639px) {
  .milex-table .milex-col-region { display: none; }
  .milex.is-enhanced .milex-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .milex.is-enhanced .milex-table, .milex.is-enhanced .milex-table tbody { display: block; }
  .milex.is-enhanced .milex-table tr { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "check name amount" "check bar bar"; column-gap: var(--s2); row-gap: 4px; align-items: center; padding-block: var(--s2); border-bottom: 1px solid var(--border); }
  .milex.is-enhanced .milex-table tr[hidden] { display: none; }
  .milex.is-enhanced .milex-table th, .milex.is-enhanced .milex-table td { display: block; border: 0; padding: 0; }
  .milex.is-enhanced .milex-col-check { grid-area: check; }
  .milex.is-enhanced .milex-name { grid-area: name; font-size: 15px; white-space: normal; }
  .milex.is-enhanced .milex-col-bar { grid-area: bar; width: auto; }
  .milex.is-enhanced .milex-amount { grid-area: amount; font-size: 14px; }
  .milex.is-enhanced .milex-table .milex-col-status, .milex.is-enhanced .milex-table .milex-col-region { display: none; }
  .milex-table th, .milex-table td { padding: var(--s2) var(--s1); }
  .milex-table tbody th { white-space: normal; font-size: 14px; }
  .milex-bar { height: 10px; }
}
@media (min-width: 640px) {
  .milex-controls { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
  .milex-field-search { grid-column: auto; }
  .milex-compare-list li { grid-template-columns: 160px minmax(0, 1fr) auto; align-items: center; gap: var(--s3); }
  .milex-cards { grid-template-columns: 1fr 1fr; }
  .milex-card-facts > div { grid-template-columns: 140px minmax(0, 1fr); gap: var(--s3); }
}
@media (min-width: 960px) {
  .milex-cards { grid-template-columns: repeat(2, 1fr); }
  .milex-table { font-size: 16px; }
}