/* Calculators.

   The instrument comes first on these pages: the intent behind "heat index
   calculator" is transactional, so the reader gets a working gauge before a
   word of explanation. Everything below the gauge exists to make the number
   trustworthy.

   No JavaScript, no number: the markup ships with the default answer already
   rendered server-side, so the page is useful before the script runs and
   meaningful to a crawler. */

.instrument {
  margin-top: 24px;
  margin-bottom: 36px;
  display: grid;
  gap: 26px;
  padding: 26px clamp(18px, 3vw, 30px) 30px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
}

/* The two-column split exists to put the gauge beside its controls. Ten of the
   thirteen instruments have no gauge, and applying it to those squeezed the whole
   form into a 380px column with half the page empty beside it. `:has()` makes the
   rule say what it always meant. */
@media (min-width: 880px) {
  .instrument:has(.gauge) {
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 44px;
    align-items: start;
  }
}

/* A gauge-less instrument is a form. Forms do not get more readable past about
   this width, they get harder to track across. */
.instrument:not(:has(.gauge)) {
  max-width: 46rem;
}

/* An instrument that is only a toggle row is not an instrument. */
.instrument:not(:has(.gauge)):not(:has(input[type="range"])) {
  box-shadow: none;
  background: none;
  border: 0;
  padding: 0;
  margin-top: 22px;
}

/* ---------------------------------------------------------------- gauge */

.gauge {
  position: relative;
  display: grid;
  justify-items: center;
}

.gauge svg {
  width: 100%;
  max-width: 340px;
  height: auto;
  overflow: visible;
  background: none;
  border: 0;
}

.gauge-track {
  fill: none;
  stroke: var(--paper-sunk);
  /* The coloured bands are butt-capped, so a round cap here sticks out past
     them at both ends of the arc. */
  stroke-linecap: butt;
}

.gauge-tick {
  stroke: var(--hairline-strong);
  stroke-width: 1.4;
}

.gauge-knob {
  fill: var(--surface);
  stroke: var(--ink);
  stroke-width: 2.5;
  filter: drop-shadow(0 1px 2px rgba(23, 20, 15, 0.35));
}

/* The knob is drawn at the start of the arc and rotated about the gauge centre,
   so its position is one number rather than a pair of trigonometric ones. */
.gauge-knob-group {
  transform-origin: 160px 152px;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.gauge-readout {
  position: absolute;
  /* Sits below the arc's crown; at 46% the caption and the number crowded the
     top of the dial. */
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 100%;
  pointer-events: none;
}

.gauge-caption {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

html[lang="ja"] .gauge-caption {
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: 0.875rem;
}

.gauge-number {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  font-size: clamp(3.25rem, 2rem + 6vw, 4.5rem);
  font-weight: 640;
  letter-spacing: -0.045em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}

.gauge-number sup {
  font-size: 0.32em;
  font-weight: 620;
  letter-spacing: 0;
  margin-top: 0.5em;
  top: 0;
}

.gauge-band {
  margin-top: 4px;
}

/* ------------------------------------------------------------- controls */

.controls {
  display: grid;
  gap: 22px;
  /* Without this the widest control sets the grid track, and the track sets the
     page — which is how a five-button control pushed the whole document
     sideways on a phone. */
  min-width: 0;
}

.controls > * {
  min-width: 0;
}

.control {
  display: grid;
  gap: 10px;
}

.control-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.control-head label {
  font-weight: 600;
  font-size: 0.9375rem;
}

.control-value {
  font-variant-numeric: tabular-nums;
  font-weight: 660;
  font-size: 1.0625rem;
}

.control-hint {
  font-size: 0.875rem;
  color: var(--ink-3);
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  margin: 0;
  background: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--paper-sunk);
  border: 1px solid var(--hairline-strong);
}

input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--paper-sunk);
  border: 1px solid var(--hairline-strong);
}

/* The thumb was `--surface` on a `--surface` card with a 1.5:1 border: in dark
   mode it was literally invisible against what it sat on. */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--ink-2);
  box-shadow: var(--shadow-card);
}

input[type="range"]::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--ink-2);
  box-shadow: var(--shadow-card);
}

input[type="range"]:active::-webkit-slider-thumb,
input[type="range"]:focus-visible::-webkit-slider-thumb {
  border-color: var(--accent);
}

input[type="number"],
select {
  font: inherit;
  font-size: 1rem;
  /* Long option text truncated mid-word at 380px, hiding the current state. */
  text-overflow: ellipsis;
  padding: 10px 40px 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  color: var(--ink);
  min-height: 44px;
  width: 100%;
}

/* The default control chrome sat at a 6px radius among soft custom controls. */
select {
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 18px top 55%, right 12px top 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

select:focus-visible {
  border-color: var(--accent);
}

/* A segmented control, the way the app does units and sun exposure. */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  padding: 3px;
  gap: 3px;
  background: var(--paper-sunk);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

/* A five-option control cannot sit on one line on a phone. Wrapping the pills
   keeps them legible instead of compressing labels until Japanese breaks one
   character per line. */


.segmented button {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 1 auto;
  /* Equal cells, so the selected thumb is the same size whichever option is
     chosen, and wide enough that a pill radius reads as a stadium not a disc. */
  min-width: 4.25em;
  padding: 8px 16px;
  min-height: 44px;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: none;
  color: var(--ink-2);
  cursor: pointer;
}

.segmented button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-card);
  outline: 1px solid var(--hairline-strong);
  outline-offset: -1px;
}

.segmented button:hover:not([aria-pressed="true"]) {
  color: var(--ink);
}

.control-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* --------------------------------------------------------------- results */

/* Measurements, not cards.

   These used to be filled, bordered, rounded boxes — the same object the site
   uses for a link, a caveat and a worked example. Nested inside the instrument
   they also made cards inside a card. A readout is a number with a label: it
   needs a baseline and some air, not a container. */
.readout-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 36px;
  margin: 4px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}

.readout {
  display: grid;
  gap: 3px;
  align-content: start;
  padding: 4px 0 10px;
  flex: 1 1 132px;
  min-width: 132px;
  max-width: 240px;
}

.readout dt {
  font-size: 0.875rem;
  color: var(--ink-3);
  line-height: 1.35;
  /* Two lines of label must not drop the value below its neighbours' baseline. */
  min-height: 2.7em;
  display: flex;
  align-items: flex-start;
}

.readout dd {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 620;
  letter-spacing: -0.025em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.readout-note {
  font-size: 0.75rem;
  color: var(--ink-3);
}

/* The single headline answer, for calculators without a gauge. */
.answer-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  padding: 22px 0 6px;
  border-top: 2px solid var(--ink);
}

.answer-figure b {
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 3.5rem);
  font-weight: 640;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Direct child only. The headline number is `<b><span>78.8</span><span>°F</span></b>`,
   so a descendant selector shrank the answer itself to caption size. */
.answer-figure > span {
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
  max-width: 40ch;
}

.answer-figure b span {
  font-size: inherit;
  letter-spacing: inherit;
}

/* A verdict line: yes / no / it depends, in words before colour. */
.verdict {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 22px 0 6px;
  border-top: 2px solid var(--ink);
}

.verdict strong {
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  letter-spacing: -0.028em;
  line-height: 1.15;
}

.verdict p {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

/* ----------------------------------------------------------- chart table */

/* The heat index chart. Every cell carries its band as a class so the colour
   and the number come from the same source, and the legend names each colour. */
.chart-table {
  font-size: 0.875rem;
}

.chart-table th,
.chart-table td {
  padding: 7px 9px;
  text-align: center;
  border: 1px solid var(--hairline);
  font-variant-numeric: tabular-nums;
}

.chart-table tbody th {
  text-align: center;
}

.chart-table thead th,
.chart-table tbody th {
  background: var(--surface-2);
  font-weight: 660;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.875rem;
  color: var(--ink-2);
  position: static;
}

.chart-table tbody th {
  text-align: right;
  white-space: nowrap;
}

/* The ramp has to get visibly hotter all the way up. It used to peak at a
   muted grey-mauve that read cooler than the oranges below it, so the most
   dangerous cells on the chart looked the least alarming. */
.cell-none {
  background: color-mix(in srgb, var(--band-none) 14%, var(--surface));
}
.cell-caution {
  background: color-mix(in srgb, var(--band-caution) 34%, var(--surface));
}
.cell-extremeCaution {
  background: color-mix(in srgb, var(--band-extreme-caution) 46%, var(--surface));
}
.cell-danger {
  background: color-mix(in srgb, var(--band-danger) 58%, var(--surface));
  color: var(--ink);
}

/* At the top of the ramp the ground is too dark for the body ink to clear
   4.5:1, so the number goes light — the same move the app makes on its DANGER
   pill. */
.cell-extremeDanger {
  background: color-mix(in srgb, var(--band-extreme-danger) 78%, var(--surface));
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  .cell-danger,
  .cell-extremeDanger {
    color: var(--ink);
  }
}

.chart-legend {
  list-style: none;
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  /* Five bands, so the track has to admit five columns on a wide card or the
     last one is orphaned onto its own row. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 18px;
}

.chart-legend li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ink-2);
}

.chart-legend i {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--hairline-strong);
  flex: none;
}

/* The print sheet the chart page exists for: one page, no chrome, black on
   white, with the legend and the caveats intact because a chart taped to a
   noticeboard is read without its website. */
@media print {
  .instrument,
  .controls,
  .no-print {
    display: none !important;
  }

  /* A page carrying a `.printable` block exists to produce that sheet. The
     article around it is for reading on screen, and printing it too is why the
     chart came out over four pages while the page promised one. */
  .prose-page:has(.printable) .answer-block,
  .prose-page:has(.printable) .article-body,
  .prose-page:has(.printable) .sources,
  .prose-page:has(.printable) .updated,
  .prose-page:has(.printable) .section-kicker {
    display: none !important;
  }

  .prose-page:has(.printable) h1 {
    font-size: 15pt;
    margin-bottom: 8pt;
  }

  .printable {
    display: block !important;
    page-break-inside: avoid;
  }

  .chart-table {
    font-size: 8pt;
    width: 100%;
  }

  .chart-table th,
  .chart-table td {
    padding: 2px 1px;
    border: 0.5pt solid #999;
  }

  /* The scroll container is a screen affordance; on paper it would clip the
     grid it exists to reveal. */
  .table-scroll {
    overflow: visible !important;
    border: 0;
  }

  .cell-caution {
    background: #f6e6a8 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .cell-extremeCaution {
    background: #f8d3a2 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .cell-danger {
    background: #f3b0a0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .cell-extremeDanger {
    background: #dd9b93 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ----------------------------------------------------------- plan output */

.plan-table td:first-child,
.plan-table th:first-child {
  white-space: nowrap;
}

.bar {
  display: block;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  min-width: 3px;
}

.bar-track {
  display: block;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--paper-sunk);
  border: 1px solid var(--hairline);
  overflow: hidden;
  min-width: 90px;
}

/* --------------------------------------------------------- no-script note */

.noscript-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline-strong);
  font-size: 0.9375rem;
  color: var(--ink-2);
  max-width: 62ch;
}

/* The row in a published table that produced the answer above it. Marked with a
   left rule and a tinted ground rather than colour alone. */
tbody tr.is-current {
  background: var(--accent-wash);
}

tbody tr.is-current th {
  font-weight: 700;
}

/* 掲示ボード — the nursery notice board. One sheet, readable from across a
   corridor, and it has to survive a printer with no colour. */
.board {
  margin-top: var(--gap-panel);
  padding: 34px 30px 30px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: center;
  display: grid;
  gap: 14px;
  justify-items: center;
}

.board-caption {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}

.board-value {
  font-size: clamp(4rem, 2rem + 12vw, 7rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.board-value small {
  font-size: 0.3em;
  font-weight: 600;
  letter-spacing: 0;
}

.board-verdict {
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.25rem);
  font-weight: 700;
}

.board-detail {
  font-size: 1.0625rem;
  color: var(--ink-2);
  max-width: 34em;
}

.board-note {
  font-size: 0.875rem;
  color: var(--ink-3);
  max-width: 40em;
}

@media print {
  .board {
    border: 2pt solid #000;
    page-break-inside: avoid;
  }
}

/* Inside an instrument the grid gap already separates the blocks, so the
   article-level panel spacing stacks on top of it and opens a hole between the
   result and its caveat. */
.controls > .panel-note {
  margin-top: 6px;
  /* Inside an instrument every rule spans the same column; capping this to the
     text measure left two rules at two different widths in one card. */
  max-width: none;
}

.controls > .readout-grid {
  margin-top: 6px;
}

/* The corner cell labels both axes, so it is the one cell that is neither a
   column heading nor a row heading. */
.chart-corner {
  text-align: left !important;
  font-size: 0.6875rem;
  line-height: 1.3;
  white-space: nowrap;
}