/* ==========================================================================
   Site styles — IBM Carbon-inspired. See DESIGN.md for the rules.
   Logical properties (inline/block) are used everywhere so RTL pages flip.
   ========================================================================== */

/* ---------- Fonts (self-hosted, OFL — see /assets/fonts/OFL-LICENSE.txt) ---------- */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }

@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-arabic-300-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

@font-face { font-family: "IBM Plex Sans Devanagari"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-devanagari-devanagari-400-normal.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; }
@font-face { font-family: "IBM Plex Sans Devanagari"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-devanagari-devanagari-600-normal.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; }

/* ---------- Tokens ---------- */
:root {
  --canvas: #ffffff;
  --surface-1: #f4f4f4;
  --surface-2: #e0e0e0;
  --ink: #161616;
  --ink-muted: #525252;
  --ink-subtle: #6f6f6f;
  --hairline: #e0e0e0;
  --hairline-strong: #8d8d8d;
  --primary: #0f62fe;
  --primary-hover: #0050e6;
  --primary-pressed: #002d9c;
  --primary-tint: #edf5ff;
  --on-primary: #ffffff;
  --success: #198038;
  --success-tint: #defbe6;
  --error: #da1e28;
  --error-tint: #fff1f1;
  --warning: #8a5a00;
  --warning-tint: #fcf4d6;
  --footer-bg: #161616;
  --footer-ink: #c6c6c6;
  --focus: #0f62fe;

  --font: "IBM Plex Sans", "IBM Plex Sans Arabic", "IBM Plex Sans Devanagari",
          "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-ja: "IBM Plex Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
             "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, sans-serif;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --radius: 4px;
  --radius-lg: 8px;
  --max: 1120px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #161616;
    --surface-1: #262626;
    --surface-2: #393939;
    --ink: #f4f4f4;
    --ink-muted: #c6c6c6;
    --ink-subtle: #a8a8a8;
    --hairline: #393939;
    --hairline-strong: #6f6f6f;
    --primary: #78a9ff;
    --primary-hover: #a6c8ff;
    --primary-pressed: #d0e2ff;
    --primary-tint: #001d6c;
    --on-primary: #161616;
    --success: #42be65;
    --success-tint: #044317;
    --error: #ff8389;
    --error-tint: #520408;
    --warning: #f1c21b;
    --warning-tint: #3d3000;
    --footer-bg: #000000;
    --focus: #ffffff;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.16px;
  -webkit-font-smoothing: antialiased;
}
:lang(ja) body, body:lang(ja) { font-family: var(--font-ja); letter-spacing: 0.02em; }
:lang(ar) body, body:lang(ar) { letter-spacing: 0; line-height: 1.7; }

img, svg { display: block; max-width: 100%; }
a { color: var(--primary); text-underline-offset: 3px; }
a:hover { color: var(--primary-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; inset-inline-start: var(--s-4); inset-block-start: -100px; background: var(--primary); color: var(--on-primary); padding: var(--s-2) var(--s-4); z-index: 10; }
.skip-link:focus { inset-block-start: var(--s-2); color: var(--on-primary); }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--s-4); }
@media (min-width: 672px) { .wrap { padding-inline: var(--s-6); } }

.num, .tnum { font-variant-numeric: tabular-nums; }
.nowrap { display: inline-block; }

/* ---------- Header ---------- */
.site-header { border-block-end: 1px solid var(--hairline); background: var(--canvas); }
.site-header .wrap { display: flex; align-items: center; gap: var(--s-5); min-height: 48px; }
.brand { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
.brand:hover { color: var(--ink); }
.brand svg { width: 22px; height: 22px; flex: none; }
.tool-nav { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tool-nav::-webkit-scrollbar { display: none; }
/* When the menu is wider than the screen (set by the inline script in the page), fade both edges to show it scrolls */
.tool-nav.is-scrolling { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
                         mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); }
.tool-nav ul { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; }
.tool-nav a {
  display: block; padding: 13px var(--s-3); font-size: 14px; line-height: 22px; color: var(--ink-muted);
  text-decoration: none; white-space: nowrap; border-block-end: 2px solid transparent;
}
.tool-nav a:hover { color: var(--ink); background: var(--surface-1); }
.tool-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; border-block-end-color: var(--primary); }
.tool-nav a:focus-visible { outline-offset: -3px; scroll-margin-inline: 16px; }
.tool-nav:focus-within { scrollbar-width: thin; }

/* ---------- Hero ---------- */
.hero { background: var(--surface-1); padding-block: var(--s-6) var(--s-6); }
@media (min-width: 672px) { .hero { padding-block: var(--s-7) var(--s-6); } }
.hero h1 { margin: 0; font-weight: 300; font-size: clamp(32px, 5vw, 42px); line-height: 1.2; letter-spacing: 0; max-width: 30ch; }
:lang(ja) .hero h1 { max-width: none; font-weight: 400; }
:lang(ar) .hero h1, :lang(ar) .age-big { font-weight: 400; }
.hero .lede { margin: var(--s-3) 0 0; font-size: 18px; line-height: 1.5; color: var(--ink-muted); max-width: 60ch; }
.breadcrumb { font-size: 13px; color: var(--ink-muted); margin: 0 0 var(--s-3); }
.breadcrumb a { color: var(--ink-muted); }

/* ---------- Tool layout ---------- */
.tool { padding-block: var(--s-6); }
.tool-grid { display: grid; gap: var(--s-5); align-items: start; }
/* Tablets: two equal columns so the result sits beside the form. Laptops and up: wider result. */
@media (min-width: 720px) { .tool-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); } }
@media (min-width: 1024px) { .tool-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6); } }

.panel { border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--s-5); background: var(--canvas); }
.panel > * + * { margin-block-start: var(--s-5); }

/* ---------- Form controls ---------- */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend, .label { font-size: 14px; font-weight: 600; color: var(--ink); padding: 0; margin-block-end: var(--s-2); }
.hint { font-size: 13px; color: var(--ink-muted); margin: var(--s-1) 0 0; }

.dateparts { display: flex; gap: var(--s-2); align-items: flex-end; }
.dateparts label { display: flex; flex-direction: column; gap: var(--s-1); font-size: 12px; color: var(--ink-muted); }
.dateparts label { min-width: 0; }
.dateparts .p-d, .dateparts .p-m { flex: 0 1 72px; }
.dateparts .p-y { flex: 0 1 96px; }
.dateparts .p-m.is-select { flex: 1 1 150px; }
.dateparts .p-era { flex: 0 1 96px; }
@media (max-width: 420px) { .panel { padding: var(--s-4); } .dateparts { gap: 6px; } }

input[type="text"], input[type="number"], select {
  font: inherit; font-size: 18px; color: var(--ink);
  background: var(--surface-1);
  border: 0; border-block-end: 1px solid var(--hairline-strong);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 11px var(--s-3); min-height: 48px; width: 100%;
  font-variant-numeric: tabular-nums;
}
select { font-size: 16px; appearance: none; -webkit-appearance: none; padding-inline-end: 36px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px; background-size: 5px 5px; background-repeat: no-repeat; }
[dir="rtl"] select { background-position: 13px 21px, 18px 21px; }
input::placeholder { color: var(--ink-subtle); }
input:focus, select:focus { outline: none; box-shadow: inset 0 -2px 0 var(--primary); border-block-end-color: var(--primary); }
input:focus-visible, select:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.has-error input, .has-error select { box-shadow: inset 0 -2px 0 var(--error); border-block-end-color: var(--error); }
.field-error { color: var(--error); font-size: 13px; margin: var(--s-2) 0 0; }

.row-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.btn {
  font: inherit; font-size: 14px; letter-spacing: 0.16px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 9px var(--s-4); border-radius: var(--radius);
  border: 1px solid transparent; text-decoration: none;
}
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); color: var(--on-primary); }
.btn-primary:active { background: var(--primary-pressed); }
.btn-ghost { background: transparent; color: var(--primary); }
.btn-ghost:hover { background: var(--surface-1); }
.btn-tertiary { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-tertiary:hover { background: var(--primary); color: var(--on-primary); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-link { font: inherit; font-size: inherit; background: none; border: 0; padding: 0; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.btn-link:hover { color: var(--primary-hover); }

/* Segmented switch (calendar choice) */
.switch { display: inline-flex; border: 1px solid var(--hairline-strong); border-radius: var(--radius); overflow: hidden; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch label { padding: 9px var(--s-4); font-size: 14px; cursor: pointer; color: var(--ink-muted); min-height: 44px; display: inline-flex; align-items: center; }
.switch label:not(:first-of-type) { border-inline-start: 1px solid var(--hairline-strong); }
.switch input:checked + label { background: var(--ink); color: var(--canvas); }
.switch input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: -2px; }

.check { display: flex; gap: var(--s-2); align-items: flex-start; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--primary); flex: none; }

details.more { border-block-start: 1px solid var(--hairline); padding-block-start: var(--s-4); }
details.more > summary { cursor: pointer; font-size: 14px; font-weight: 600; list-style: none; display: flex; align-items: center; gap: var(--s-2); }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--hairline-strong); border-radius: 2px; font-weight: 400; }
details.more[open] > summary::before { content: "\2212"; }
details.more > .more-body { margin-block-start: var(--s-4); display: grid; gap: var(--s-4); }
.inline-fields { display: flex; gap: var(--s-3); }
.inline-fields label { display: flex; flex-direction: column; gap: var(--s-1); font-size: 12px; color: var(--ink-muted); flex: 0 0 110px; }

/* ---------- Result ---------- */
.result { background: var(--surface-1); border-radius: var(--radius-lg); padding: var(--s-5); min-height: 280px; scroll-margin-top: var(--s-3); }
@media (min-width: 672px) { .result { padding: var(--s-6); } }
.result[data-state="empty"] .result-body { display: none; }
.result[data-state="ready"] .result-empty { display: none; }
.result-empty { color: var(--ink-muted); margin: 0; max-width: 40ch; }
.result-empty strong { display: block; color: var(--ink); font-weight: 600; margin-block-end: var(--s-1); }

.age-caption { font-size: 14px; color: var(--ink-muted); margin: 0; }
.age-big { margin: var(--s-1) 0 0; font-weight: 300; font-size: clamp(44px, 9vw, 64px); line-height: 1.1; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.age-big .unit { font-size: 0.5em; letter-spacing: 0; margin-inline-start: 0.15em; color: var(--ink-muted); }
.age-sub { font-size: 20px; margin: var(--s-1) 0 0; font-variant-numeric: tabular-nums; }
.age-alt { margin-block-start: var(--s-5); padding-block-start: var(--s-4); border-block-start: 1px solid var(--hairline); }
.age-alt .age-big { font-size: clamp(32px, 6vw, 40px); }
.age-alt .hint { margin-block-start: var(--s-2); }

/* The year-of-life ruler: 12 segments = 12 months between birthdays */
.ruler { margin-block-start: var(--s-5); }
.ruler-track { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; height: 14px; }
.ruler-track span { background: var(--surface-2); border-radius: 1px; position: relative; overflow: hidden; }
.ruler-track span.full { background: var(--primary); }
.ruler-track span.part::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--fill, 0%); background: var(--primary); }
.ruler-legend { display: flex; justify-content: space-between; gap: var(--s-3); margin-block-start: var(--s-2); font-size: 13px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ruler-legend b { color: var(--ink); font-weight: 600; }

.callout { margin-block-start: var(--s-5); padding: var(--s-3) var(--s-4); border-inline-start: 3px solid var(--primary); background: var(--canvas); font-size: 15px; }
.callout.ok { border-inline-start-color: var(--success); }
.callout.bad { border-inline-start-color: var(--error); }
.callout p { margin: 0; }
.callout p + p { margin-block-start: var(--s-1); color: var(--ink-muted); font-size: 14px; }

.stats { margin: var(--s-5) 0 0; display: grid; grid-template-columns: 1fr; }
.stats div { display: flex; justify-content: space-between; gap: var(--s-3); padding-block: 10px; border-block-end: 1px solid var(--hairline); font-size: 15px; }
.stats dt { color: var(--ink-muted); }
.stats dd { margin: 0; font-weight: 600; text-align: end; font-variant-numeric: tabular-nums; }
.stats dt, .stats dd { min-width: 0; overflow-wrap: anywhere; }

.share-row { margin-block-start: var(--s-5); display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.share-row .copied { font-size: 13px; color: var(--success); }

/* Long text results (converted dates, school grades) */
.age-big.conv-big { font-size: clamp(30px, 6vw, 44px); line-height: 1.15; }

/* Today's Nepali date, above the converter */
.today-strip { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); background: var(--primary-tint); border-radius: var(--radius); font-size: 13px; color: var(--ink-muted); }
.today-strip strong { font-size: 18px; font-weight: 600; color: var(--ink); }
.today-strip:empty { display: none; }

/* Optional name above a date field */
.name-field { display: flex; flex-direction: column; gap: var(--s-1); font-size: 12px; color: var(--ink-muted); margin-block-end: var(--s-3); max-width: 280px; }
.name-field input { font-size: 16px; }

/* Exam age-limit calculators */
.x-row[hidden] { display: none; }
.select-field { display: flex; flex-direction: column; gap: var(--s-1); font-size: 12px; color: var(--ink-muted); }
.status-note { margin: 0; font-size: 13px; line-height: 1.5; padding: var(--s-3) var(--s-3); background: var(--surface-1); border-inline-start: 3px solid var(--hairline-strong); border-radius: 0; border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); color: var(--ink-muted); }
.cal-note { margin-block-start: var(--s-3); }
.status-note strong { color: var(--ink); }
.status-note.official { border-inline-start-color: var(--success); }
.status-note.expected { border-inline-start-color: var(--warning); }
.verdict.is-ok { color: var(--success); }
.verdict.is-bad { color: var(--error); }
.tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; vertical-align: middle; margin-inline-start: var(--s-2); }
.tag.official { background: var(--success-tint); color: var(--success); }
.tag.expected { background: var(--warning-tint); color: var(--warning); }
table.data.wrap-cells td { white-space: normal; min-width: 120px; }
table.data.wrap-cells td.nw { white-space: nowrap; }
.table-wrap.auto { max-height: none; }

/* Ad slots: reserve space only once an ad unit is placed inside (prevents layout shift). */
.ad-slot { display: none; }
.ad-slot.is-active { display: block; min-height: 280px; margin-block: var(--s-6); }

/* ---------- Content ---------- */
.content { padding-block: var(--s-6) var(--s-8); border-block-start: 1px solid var(--hairline); }
.prose { max-width: 68ch; }
:lang(ja) .prose { max-width: 40em; }
.prose h2 { font-weight: 400; font-size: 28px; line-height: 1.25; margin: var(--s-7) 0 var(--s-3); }
.prose h2:first-child { margin-block-start: 0; }
.prose h3 { font-weight: 600; font-size: 18px; margin: var(--s-5) 0 var(--s-2); }
.prose p, .prose li { font-size: 16px; line-height: 1.6; }
:lang(ar) .prose p, :lang(ar) .prose li { font-size: 17px; line-height: 1.8; }
.prose ul, .prose ol { padding-inline-start: 1.25em; }
.prose li + li { margin-block-start: var(--s-1); }
.prose code { font-size: 0.95em; background: var(--surface-1); padding: 1px 4px; border-radius: 2px; }

.faq { margin-block-start: var(--s-3); border-block-start: 1px solid var(--hairline); }
.faq details { border-block-end: 1px solid var(--hairline); }
.faq summary { cursor: pointer; padding-block: var(--s-4); font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: var(--s-4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--ink-muted); flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding-block-end: var(--s-4); color: var(--ink-muted); }
.faq .answer p { margin: 0; }

.related { list-style: none; padding: 0; margin: var(--s-3) 0 0; border-block-start: 1px solid var(--hairline); max-width: none; }
.related li { margin: 0; border-block-end: 1px solid var(--hairline); }
.related a { display: grid; gap: 2px; padding: var(--s-4) var(--s-2); text-decoration: none; color: var(--ink); }
.related a:hover { background: var(--surface-1); }
.related a strong { font-weight: 600; color: var(--primary); }
.related a span { color: var(--ink-muted); font-size: 15px; }

.page-meta { font-size: 13px; color: var(--ink-muted); margin-block-start: var(--s-6); }

/* ---------- Table (年齢早見表) ---------- */
.table-tools { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: end; justify-content: space-between; margin-block-end: var(--s-3); }
.find-field { display: flex; flex-direction: column; gap: var(--s-1); font-size: 12px; color: var(--ink-muted); }
.find-field input { width: 140px; }
.year-nav { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: flex-end; }
.year-nav .find-field input { width: 108px; }
.year-nav .btn { min-height: 48px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius-lg); max-height: 70vh; }
table.data { border-collapse: collapse; width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; }
table.data th, table.data td { padding: 10px var(--s-4); text-align: start; border-block-end: 1px solid var(--hairline); white-space: nowrap; }
table.data thead th { position: sticky; top: 0; background: var(--surface-1); font-weight: 600; font-size: 14px; z-index: 1; }
table.data tbody tr:hover { background: var(--surface-1); }
table.data tr.is-you { background: var(--primary-tint); }
table.data td.era-change { color: var(--ink-muted); font-size: 13px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer-bg); color: var(--footer-ink); font-size: 14px; padding-block: var(--s-7) var(--s-6); }
.site-footer a { color: #ffffff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: #ffffff; }
.footer-grid { display: grid; gap: var(--s-6); }
@media (min-width: 672px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-grid h2 { font-size: 14px; font-weight: 600; color: #ffffff; margin: 0 0 var(--s-3); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.footer-grid p { margin: 0; max-width: 46ch; }
.footer-base { margin-block-start: var(--s-7); padding-block-start: var(--s-4); border-block-start: 1px solid #393939; font-size: 13px; }

/* ---------- Simple pages (about, privacy…) ---------- */
.page { padding-block: var(--s-6) var(--s-8); }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
@media print { .site-header, .site-footer, .tool-nav, .share-row, .ad-slot { display: none !important; } }

/* ==========================================================================
   Phones (one-column layout, < 720px)
   ========================================================================== */
.result-edit { display: none; }
@media (max-width: 480px) {
  /* Long localized dates and calendar labels must not overflow the viewport. */
  .stats div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .stats dd { text-align: start; }
}

@media (max-width: 719px) {
  /* Shorter title band so the form starts higher on small screens */
  .hero { padding-block: var(--s-5) var(--s-5); }
  .hero h1 { font-size: 28px; line-height: 1.2; }
  .hero .lede { font-size: 16px; line-height: 1.45; margin-block-start: var(--s-2); }
  .tool { padding-block: var(--s-4) var(--s-6); }
  .tool-grid { gap: var(--s-4); }
  /* No tall empty grey box before anything is entered */
  .result[data-state="empty"] { min-height: 0; padding-block: var(--s-4); }
  .result-edit { display: block; float: right; font-size: 14px; margin: 0 0 var(--s-2) var(--s-3); line-height: 20px; }
  [dir="rtl"] .result-edit { float: left; margin: 0 var(--s-3) var(--s-2) 0; }
  /* Menu scrolls sideways: fade both edges so it's clear there's more */
  .tool-nav a { padding-inline: 10px; }
  .brand span { font-size: 14px; }
  .site-header .wrap { gap: var(--s-3); }
  /* Denser table */
  table.data { font-size: 14px; }
  table.data th, table.data td { padding: 9px var(--s-3); }
  .content { padding-block: var(--s-5) var(--s-7); }
  .prose h2 { font-size: 24px; margin-block-start: var(--s-6); }
}
@media (hover: none) { a, button, summary, label { -webkit-tap-highlight-color: transparent; } }