/* Heat Index — site shell.

   The palette is the app's, not a new one: warm paper, white cards, one red
   accent, and the four NWS band colours read off the gauge. Those band colours
   are data, not decoration, so they are the only saturated colour on the page
   and they always appear with a label — a reader who cannot separate orange
   from red still gets the answer in words.

   Dark mode mirrors the app's own dark appearance. */

/* --------------------------------------------------------------- tokens */

:root {
  color-scheme: light dark;

  --paper: #f4f1eb;
  --paper-sunk: #ece7de;
  --surface: #ffffff;
  --surface-2: #faf8f4;
  --ink: #17140f;
  --ink-2: #5d5649;
  /* Tertiary ink carries captions, hints, breadcrumbs and readout labels — all
     small text, so it needs 4.5:1, not the 3:1 large-text allowance. The old
     #8a8375 gave 3.34:1 on paper. */
  --ink-3: #736d61;
  --hairline: rgba(23, 20, 15, 0.11);
  --hairline-strong: rgba(23, 20, 15, 0.2);
  --accent: #c8341a;
  --accent-ink: #ffffff;
  --accent-wash: rgba(200, 52, 26, 0.08);

  /* The bands, in order. Lifted from the app's gauge ramp. */
  --band-none: #a9a196;
  --band-caution: #edbb26;
  --band-extreme-caution: #ee8f18;
  --band-danger: #de3f17;
  --band-extreme-danger: #9d1206;

  --shadow-card: 0 1px 2px rgba(23, 20, 15, 0.04), 0 8px 24px -16px rgba(23, 20, 15, 0.18);
  --shadow-raised: 0 2px 6px rgba(23, 20, 15, 0.06), 0 18px 44px -22px rgba(23, 20, 15, 0.26);

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Recurring spacing decisions, named once. `--gap-panel` is the distance
     between a paragraph and a bordered block that follows it: panels crowding
     the prose above them is the single most common thing to go wrong here. */
  --gap-panel: 44px;
  --gap-section: 72px;
  --shell: 1180px;

  /* One gutter, and one edge derived from it.

     The header and footer are full-bleed while the page content is a centred
     1180px column, so padding them both by `--gutter` put the logo and the
     footer links 130px closer to the window edge than everything they sit above.
     `--edge` is the distance from the viewport edge to that centred column, so
     full-bleed bars line up with it and collapse back to a plain gutter once the
     viewport is narrower than the shell. */
  --gutter: clamp(16px, 4vw, 36px);
  --edge: max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter)));

  /* Two measures, not six. Body text reads at one width; anything that is a
     figure rather than a sentence — tables, the answer card, the h1 — reads at
     the other. Every `ch`/`em` max-width on the site resolved to a different
     fractional pixel value and produced six ragged right edges in one column. */
  --measure: 34rem;
  --measure-wide: 46rem;
  --prose: var(--measure);

  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ja: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP",
    "Meiryo", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14120e;
    --paper-sunk: #0e0c09;
    --surface: #1e1b16;
    --surface-2: #241f19;
    --ink: #f4f0e8;
    --ink-2: #b7ae9e;
    --ink-3: #8e8677;
    --hairline: rgba(244, 240, 232, 0.14);
    --hairline-strong: rgba(244, 240, 232, 0.26);
    --accent: #ff7355;
    --accent-ink: #24170f;
    --accent-wash: rgba(255, 115, 85, 0.12);
    --band-caution: #f0c440;
    --band-extreme-caution: #f59b2c;
    --band-danger: #ef5a30;
    --band-extreme-danger: #c2321f;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px -18px rgba(0, 0, 0, 0.7);
    --shadow-raised: 0 2px 8px rgba(0, 0, 0, 0.45), 0 22px 50px -24px rgba(0, 0, 0, 0.8);
  }
}

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD, U+0100-017F;
}

/* ----------------------------------------------------------------- base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[lang="ja"] body {
  /* Archivo's unicode-range is Latin-only, so it claims "WBGT", "m/s" and the
     digits while every Japanese glyph falls straight through to the JA stack. */
  font-family: "Archivo", var(--font-ja);
  /* Japanese sets need a touch more leading at the same size to stay legible,
     and no letter-spacing tightening anywhere. */
  line-height: 1.9;
  letter-spacing: 0.01em;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
}

a:hover {
  text-decoration-color: currentColor;
}

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

h1,
h2,
h3,
h4 {
  font-weight: 620;
  line-height: 1.15;
  letter-spacing: -0.014em;
  margin: 0;
  text-wrap: balance;
}

html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] h3,
html[lang="ja"] h4 {
  letter-spacing: 0;
  line-height: 1.4;
  font-weight: 700;
}

p {
  margin: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  z-index: 50;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.8vw, 20px);
  padding: 12px var(--edge);
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid var(--hairline);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 10px;
  font-weight: 680;
  letter-spacing: -0.02em;
  text-decoration: none;
  flex: none;
  white-space: nowrap;
}

.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(23, 20, 15, 0.18);
}

.site-header nav {
  display: none;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
}

.site-header nav a {
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 520;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.site-header nav a:hover {
  background: var(--hairline);
  color: var(--ink);
}

.site-header nav a[aria-current="page"] {
  color: var(--ink);
  background: var(--hairline);
  font-weight: 640;
}

.lang-picker {
  position: relative;
  margin-inline-start: auto;
  flex: none;
}

.site-header nav ~ .lang-picker {
  margin-inline-start: 0;
}

.lang-picker summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  font-size: 0.875rem;
  font-weight: 560;
  color: var(--ink-2);
  padding: 6px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  user-select: none;
}

.lang-picker summary::-webkit-details-marker {
  display: none;
}

.lang-picker summary:hover {
  color: var(--ink);
  border-color: var(--hairline-strong);
  background: var(--hairline);
}

.lang-picker[open] summary {
  color: var(--ink);
  border-color: var(--hairline-strong);
  background: var(--hairline);
}

.lang-picker summary .lang-chevron {
  transition: transform 0.18s ease;
  opacity: 0.7;
}

.lang-picker[open] summary .lang-chevron {
  transform: rotate(180deg);
}

.lang-picker-sheet {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 150px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-raised);
  padding: 6px;
  display: grid;
  gap: 2px;
  z-index: 50;
}

.lang-picker-sheet a {
  display: block;
  padding: 8px 12px;
  font-size: 0.875rem;
  font-weight: 520;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background 0.12s ease, color 0.12s ease;
}

.lang-picker-sheet a:hover {
  background: var(--hairline);
  color: var(--ink);
}

.lang-picker-sheet a[aria-current="true"] {
  font-weight: 660;
  color: var(--accent);
  background: var(--accent-wash);
}

/* The pill, as a primitive. `.nav-cta` is this plus the header's own
   responsive behaviour; anything else that needs a solid button uses `.button`
   and is not subject to a rule about the header. */
.button,
.nav-cta {
  display: inline-flex;
  flex: none;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.button:hover,
.nav-cta:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

.nav-cta[aria-disabled="true"] {
  background: var(--paper-sunk);
  color: var(--ink-2);
  cursor: default;
}

.nav-menu {
  margin-inline-start: auto;
  flex: none;
}

.nav-menu summary {
  list-style: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  gap: 5px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.nav-menu summary::-webkit-details-marker {
  display: none;
}

.nav-menu summary span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
}

.nav-menu-sheet {
  position: absolute;
  right: var(--edge);
  margin-top: 10px;
  display: grid;
  min-width: 220px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-raised);
  gap: 2px;
}

.nav-menu-sheet a {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 0.9375rem;
  color: var(--ink-2);
  transition: background 0.12s ease, color 0.12s ease;
}

.nav-menu-sheet a:hover {
  background: var(--hairline);
  color: var(--ink);
}

.nav-menu-lang {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}

.nav-menu-lang-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 680;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 4px 14px 6px;
}

.nav-menu-lang-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.nav-menu-lang-links a {
  padding: 6px 10px;
  font-size: 0.84375rem;
  text-align: center;
}

.nav-menu-lang-links a.active {
  color: var(--accent);
  font-weight: 660;
  background: var(--accent-wash);
}

/* Below 1080px the header collapses into the disclosure sheet menu so
   longer localized navigation labels never truncate or clip the CTA pill. */
@media (max-width: 1079px) {
  .lang-picker {
    display: none;
  }
  .nav-menu {
    margin-inline-start: auto;
  }
}

@media (max-width: 520px) {
  html[lang="ja"] .site-header .nav-cta {
    display: none;
  }
}

@media (min-width: 1080px) {
  .site-header nav {
    display: flex;
  }
  .nav-menu {
    display: none;
  }
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  margin-top: var(--gap-section);
  padding: 44px var(--edge) 56px;
  border-top: 1px solid var(--hairline);
  background: var(--paper-sunk);
  display: grid;
  gap: 18px;
  justify-items: start;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 620;
}

.footer-brand img {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 0.9375rem;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  color: var(--ink-2);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.footer-locales {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  width: 100%;
}

.footer-locales a {
  color: var(--ink-2);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-locales a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.footer-locales a[aria-current="page"] {
  color: var(--accent);
  font-weight: 640;
}

.site-footer p {
  color: var(--ink-3);
  font-size: 0.875rem;
  max-width: 62ch;
  margin: 0;
}

/* --------------------------------------------------------------- shell */

.prose-page {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 40px var(--gutter) 0;
}

.section-kicker {
  font-size: 0.75rem;
  font-weight: 680;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

html[lang="ja"] .section-kicker {
  letter-spacing: 0.06em;
}

.breadcrumb {
  margin-bottom: 26px;
  font-size: 0.875rem;
  color: var(--ink-3);
}

.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--hairline-strong);
}

.breadcrumb a {
  color: var(--ink-3);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--ink);
}

.lede {
  font-size: 1.1875rem;
  color: var(--ink-2);
  max-width: var(--measure);
  margin-top: 18px;
}

/* --------------------------------------------------------------- bands */

/* One class per band so a colour never appears without the name beside it. */
.band {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 8px;
  padding: 5px 12px 5px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 640;
  letter-spacing: 0.01em;
  background: var(--paper-sunk);
  color: var(--ink);
}

.band::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--band-none);
  flex: none;
}

/* Severity has to be visible in the chip itself, not only in a 10px dot.
   The ground is tinted from the band and the border carries it, so the ramp
   reads as the data it is — while the label still states the level in words for
   anyone who cannot separate the hues. */
.band-caution,
.band-yellow {
  background: color-mix(in srgb, var(--band-caution) 22%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--band-caution) 55%, transparent);
}

.band-extremeCaution {
  background: color-mix(in srgb, var(--band-extreme-caution) 22%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--band-extreme-caution) 55%, transparent);
}

.band-danger,
.band-red {
  background: color-mix(in srgb, var(--band-danger) 24%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--band-danger) 60%, transparent);
  font-weight: 680;
}

.band-extremeDanger,
.band-black {
  background: color-mix(in srgb, var(--band-extreme-danger) 26%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--band-extreme-danger) 65%, transparent);
  font-weight: 700;
}

.band-green {
  background: color-mix(in srgb, #3f9c5a 20%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #3f9c5a 50%, transparent);
}

.band-caution::before {
  background: var(--band-caution);
}
.band-extremeCaution::before {
  background: var(--band-extreme-caution);
}
.band-danger::before {
  background: var(--band-danger);
}
.band-extremeDanger::before {
  background: var(--band-extreme-danger);
}
.band-white::before {
  background: #e8e4dc;
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
}
.band-green::before {
  background: #3f9c5a;
}
.band-yellow::before {
  background: var(--band-caution);
}
.band-red::before {
  background: var(--band-danger);
}
.band-black::before {
  background: #22201c;
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
}

/* --------------------------------------------------------------- panels */

.panel {
  margin-top: var(--gap-panel);
  padding: 24px 26px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.panel > * + * {
  margin-top: 12px;
}

.panel h2,
.panel h3 {
  font-size: 1.0625rem;
}

/* A caveat. Quiet by construction: it has to be readable and impossible to
   mistake for either a control or a result, which a tinted slab with a thick
   accent bar was not. */
.panel-note {
  margin-top: var(--gap-panel);
  padding: 16px 0 0;
  border-top: 1px solid var(--hairline-strong);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: var(--measure);
}

.panel-note strong {
  color: var(--ink);
  font-weight: 620;
}

.panel-note strong:first-child {
  color: var(--accent);
}

/* An estimate is never presented as a measurement. This is the label that
   says so, and it is deliberately hard to miss. */
.estimate-flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  font-weight: 660;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--paper-sunk);
  border: 1px solid var(--hairline);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

html[lang="ja"] .estimate-flag {
  text-transform: none;
  letter-spacing: 0.04em;
}

/* Where `.estimate-flag` warns that a value is modelled, this one reassures that
   it comes from a published source. They used to be the same chip carrying
   opposite meanings. */
.source-flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  font-weight: 560;
  color: var(--ink-2);
  padding: 4px 10px 4px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
}

.source-flag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-3);
  flex: none;
}

/* ---------------------------------------------------------------- lists */

/* Navigation lists.

   These were same-size filled cards, which is the shape this site also used for
   readouts, callouts and examples — so nothing said "this one goes somewhere".
   A link needs an affordance a screenshot can show, not a hover state.

   Rule-separated rows, the title carrying an arrow that moves on hover, the whole
   row a 44px+ target. Flat, so the one raised surface on a page is the instrument. */
.hub-list,
.related-list {
  list-style: none;
  margin: var(--gap-panel) 0 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
  /* Held to the same measure as the text it sits among, so the arrow lands at
     the end of the line rather than stranded half a screen from its title. */
  max-width: var(--measure-wide);
}

.hub-list > li,
.related-list > li {
  border-bottom: 1px solid var(--hairline);
}

.hub-list a,
.related-list a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 20px;
  row-gap: 6px;
  padding: 20px 12px 21px;
  margin-inline: -12px;
  text-decoration: none;
  transition: background-color 0.16s ease;
}

.hub-list a:hover,
.related-list a:hover {
  background: var(--accent-wash);
}

.hub-list strong,
.related-list strong {
  font-weight: 620;
  font-size: 1.0625rem;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.16s ease;
}

.hub-list a:hover strong,
.related-list a:hover strong {
  text-decoration-color: var(--accent);
}

/* The arrow is the affordance. It is present at rest, not revealed on hover, so a
   still image of this list still reads as a set of links. */
.hub-list a::after,
.related-list a::after {
  content: "→";
  grid-column: 2;
  grid-row: 1;
  color: var(--accent);
  font-size: 1.0625rem;
  line-height: 1;
  transform: translateX(0);
  transition: transform 0.16s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hub-list a:hover::after,
.related-list a:hover::after {
  transform: translateX(4px);
}

.hub-list span,
.related-list span {
  grid-column: 1 / -1;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
  .hub-list a,
  .related-list a,
  .hub-list a::after,
  .related-list a::after {
    transition: none;
  }
}

.hub-group {
  margin-top: var(--gap-section);
}

.hub-group h2 {
  font-size: 1.375rem;
}

.hub-group > p {
  color: var(--ink-2);
  margin-top: 10px;
  max-width: 60ch;
}

.hub-empty {
  margin-top: var(--gap-panel);
  color: var(--ink-3);
}

/* ------------------------------------------------------------------ CTA */

.product-cta {
  margin-top: 64px;
  margin-bottom: 64px;
  padding: 34px clamp(24px, 4vw, 42px);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 16px;
  justify-items: start;
}

.product-cta h2 {
  font-size: 1.35rem;
  margin: 0;
}

.product-cta p {
  color: var(--ink-2);
  max-width: 58ch;
  line-height: 1.6;
  margin: 0;
}

.app-store-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 12px 16px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  margin-top: 4px;
}

.app-store-button:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

.app-store-button svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.app-store-button span {
  display: grid;
  font-weight: 640;
  font-size: 1.0625rem;
  line-height: 1.1;
}

.app-store-button small {
  font-size: 0.6875rem;
  font-weight: 500;
  opacity: 0.78;
  letter-spacing: 0.02em;
}

/* Until the listing is released the button is not a link. A dead App Store
   link would claim a release status the product does not have. */
.app-store-pending {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  border: 1px dashed var(--hairline-strong);
  color: var(--ink-2);
  font-weight: 600;
}

.attribution,
.disclaimer {
  font-size: 0.875rem;
  color: var(--ink-3);
  max-width: 62ch;
  line-height: 1.5;
}

.updated {
  margin: 56px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: 0.875rem;
  color: var(--ink-3);
}

/* ------------------------------------------------------------------ FAQ */

#faq {
  margin-top: 72px;
  margin-bottom: 20px;
  font-size: clamp(1.45rem, 1.15rem + 1.2vw, 1.95rem);
  line-height: 1.25;
}

.faq-list {
  margin-top: 18px;
  margin-bottom: 64px;
  display: grid;
  gap: 12px;
}

.faq-list details {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.faq-list details:hover {
  border-color: var(--hairline-strong);
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  font-weight: 620;
  font-size: 1.0625rem;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary span {
  color: var(--ink-3);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1;
  flex: none;
  transition: transform 0.18s ease;
}

.faq-list details[open] summary span {
  transform: rotate(45deg);
}

.faq-list details p {
  padding: 0 22px 22px;
  color: var(--ink-2);
  font-size: 0.96875rem;
  line-height: 1.65;
  max-width: 66ch;
}

/* --------------------------------------------------------------- tables */

.table-scroll {
  margin-top: var(--gap-panel);
  margin-bottom: var(--gap-panel);
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

caption {
  caption-side: bottom;
  padding: 14px 18px 2px;
  color: var(--ink-3);
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: left;
  max-width: var(--measure);
}

th,
td {
  padding: 12px 18px;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
}

thead th {
  font-size: 0.78125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 650;
  background: var(--surface-2);
  border-bottom: 1px solid var(--hairline-strong);
  position: sticky;
  top: 0;
}

/* Only a grid that actually scrolls needs its row labels pinned; on a table
   that fits, the tint just left an unfinished block beside the caption. */
.table-scroll .chart-table tbody th[scope="row"] {
  position: sticky;
  left: 0;
  background: var(--surface-2);
  z-index: 1;
}

/* #8: a range must not break across lines mid-value. Row headers are short
   labels; below the stacking breakpoint this is reset. */
@media (min-width: 641px) {
  .table-scroll th[scope="row"] {
    white-space: nowrap;
  }
}

/* An ordinary article table fits its column and wraps its cells. It was briefly
   given `min-width: max-content` to stop Japanese headings breaking one
   character per line at 380px, which fixed that and broke everything else: every
   table on every article became too wide for its column and got clipped, and
   nobody scrolls a table sideways to read a two-column list.

   Only genuinely dense grids — the heat index chart, the 早見表 — keep their
   natural width and scroll, because wrapping a 17-column numeric matrix makes it
   unreadable rather than merely wide. */
.table-scroll table {
  width: 100%;
}

.table-scroll .chart-table {
  /* Fills the card when it fits and scrolls when it does not. `width: auto` sized
     it to max-content and left a gutter down the right of the whole grid. */
  width: 100%;
  min-width: max-content;
}

.table-scroll .chart-table th {
  white-space: nowrap;
}

/* Row headers are short labels by nature. A floor stops them being squeezed to
   two characters wide in a narrow first column. */
.table-scroll th[scope="row"] {
  min-width: 4.5em;
}

html[lang="ja"] thead th {
  text-transform: none;
  letter-spacing: 0.03em;
  font-size: 0.875rem;
}

/* The last row keeps its rule: without it the final cells bled into the
   caption underneath. */
tbody tr:last-child td,
tbody tr:last-child th {
  border-bottom: 1px solid var(--hairline);
}

/* Below this width a three- or four-column table cannot be shown by wrapping
   alone: the columns run out of room and the container clips. Rather than ask
   for a sideways scroll nobody performs, each row becomes a block and each cell
   carries its column heading, generated at build time.

   Dense numeric grids keep scrolling — a 17-column matrix stacked into two
   hundred labelled lines is not a chart any more. */
@media (max-width: 640px) {
  .table-scroll:not(:has(.chart-table)) {
    border: 0;
    background: none;
    overflow-x: visible;
  }

  .table-scroll:not(:has(.chart-table)) table,
  .table-scroll:not(:has(.chart-table)) tbody,
  .table-scroll:not(:has(.chart-table)) tr,
  .table-scroll:not(:has(.chart-table)) td,
  .table-scroll:not(:has(.chart-table)) th,
  .table-scroll:not(:has(.chart-table)) caption {
    display: block;
    width: auto;
  }

  /* The heading row is replaced by the per-cell labels below. */
  .table-scroll:not(:has(.chart-table)) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .table-scroll:not(:has(.chart-table)) tr {
    padding: 16px 18px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--surface);
  }

  .table-scroll:not(:has(.chart-table)) tr + tr {
    margin-top: 10px;
  }

  .table-scroll:not(:has(.chart-table)) th[scope="row"] {
    /* The sticky first-column treatment is a scrolling affordance; there is no
       scrolling here. */
    position: static;
    background: none;
    min-width: 0;
    padding: 0 0 10px;
    border: 0;
    font-size: 1.0625rem;
    font-weight: 640;
    color: var(--ink);
    text-align: left;
  }

  .table-scroll:not(:has(.chart-table)) td {
    padding: 8px 0 0;
    border: 0;
  }

  .table-scroll:not(:has(.chart-table)) td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 0.75rem;
    font-weight: 640;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  html[lang="ja"] .table-scroll:not(:has(.chart-table)) td[data-label]::before {
    text-transform: none;
    letter-spacing: 0.03em;
    font-size: 0.875rem;
  }

  .table-scroll:not(:has(.chart-table)) caption {
    padding: 12px 2px 0;
  }
}

/* --------------------------------------------------------------- figures */

figure {
  margin: var(--gap-panel) 0 0;
}

figure svg {
  width: 100%;
  height: auto;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

figcaption {
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--ink-3);
  max-width: 62ch;
}

/* ------------------------------------------------------------ utilities */

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

@media print {
  .site-header,
  .site-footer,
  .breadcrumb,
  .product-cta,
  .related-list,
  .faq-list,
  .no-print {
    display: none !important;
  }

  :root {
    --paper: #ffffff;
    --surface: #ffffff;
    --ink: #000000;
    --ink-2: #333333;
    --ink-3: #555555;
    --hairline: #bbbbbb;
    --hairline-strong: #888888;
  }

  body {
    font-size: 10.5pt;
  }

  .prose-page {
    padding: 0;
    max-width: none;
  }
}