/* Direction: a fitment spec sheet. Cool paper ground, graphite text, and one deep green used
   only where a number means "this fits" — the site's whole job is telling you whether a size
   sits inside a tolerance, so the accent carries meaning rather than decoration. No web fonts;
   tabular figures do the work on a page that is mostly a table of measurements. */

:root {
  --ground: #f2f4f5;
  --panel: #ffffff;
  --ink: #12171a;
  --ink-soft: #4d5860;
  --rule: #ccd3d7;
  --mark: #15803d;
  --mark-soft: #eaf4ee;
  --warn: #a2410c;
  --slot: #e9edef;
  --radius: 3px;
  --gap: 1rem;
  --measure: 44rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #10161a;
    --panel: #182027;
    --ink: #e7edf0;
    --ink-soft: #9fadb6;
    --rule: #2c3840;
    --mark: #4ade80;
    --mark-soft: #14251b;
    --warn: #fb923c;
    --slot: #141c21;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 1rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
}

main, .bar, .foot {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gap);
}

.skip { position: absolute; left: -9999px; background: var(--panel); padding: 0.75rem 1rem; }
.skip:focus { left: 0; top: 0; z-index: 10; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--mark); }
:focus-visible { outline: 3px solid var(--mark); outline-offset: 2px; }

/* -- frame ------------------------------------------------------------ */

.bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: baseline;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--ink);
}
.brand { font-weight: 700; text-decoration: none; letter-spacing: -0.02em; }
.bar nav a { font-size: 0.9375rem; }

h1 {
  font-size: clamp(1.4rem, 1.15rem + 1.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 1.75rem 0 1rem;
  max-width: 24ch;
}
h2 {
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 2.25rem 0 0.6rem;
}
h3 { font-size: 1rem; margin: 1.25rem 0 0.25rem; }
p { margin: 0 0 0.85rem; }
.lede, .lead { color: var(--ink); font-size: 1.0625rem; }
section { margin-bottom: 1.5rem; }

/* -- the answer ------------------------------------------------------- */

/* The signature: the headline diameter sits on a ruled baseline with a tick at each end, the way
   a dimension is called out on a drawing, and the accent says the figure is the one that matters. */
.result {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--mark);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.result h2 { margin-top: 0; }
.result .lead {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.5rem;
}
.result .lead [data-out] {
  font-size: clamp(2.25rem, 1.6rem + 3.2vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--mark);
}
.result .lead .unit { font-size: 1rem; color: var(--ink-soft); }

.result dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1rem;
  margin: 0;
}
.result dt { color: var(--ink-soft); font-size: 0.9375rem; }
.result dd { margin: 0; text-align: right; font-weight: 600; }
.unit { font-weight: 400; color: var(--ink-soft); font-size: 0.875rem; }

/* -- the form --------------------------------------------------------- */

.calc fieldset { border: 0; margin: 0 0 1rem; padding: 0; }
.calc legend {
  padding: 0;
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.6rem;
}
.field {
  display: grid;
  grid-template-columns: 1fr 7rem auto;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.5rem;
}
.field label { font-weight: 500; }
.field input {
  min-height: 44px;
  padding: 0.5rem 0.65rem;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.field .unit { min-width: 3rem; }

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

table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: 0.9375rem; }
caption { text-align: left; color: var(--ink-soft); padding-bottom: 0.4rem; }
th, td { padding: 0.45rem 0.4rem; border-bottom: 1px solid var(--rule); }
thead th { text-align: left; color: var(--ink-soft); font-weight: 600; white-space: nowrap; }
tbody th { text-align: left; font-weight: 600; }
td { text-align: right; }
tbody tr:hover { background: var(--mark-soft); }

ul.index { list-style: none; padding: 0; margin: 0; }
ul.index li { padding: 0.5rem 0; border-bottom: 1px solid var(--rule); }
ol { padding-left: 1.2rem; }
ol li { margin-bottom: 0.4rem; }

.formula {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  background: var(--mark-soft);
  border-left: 2px solid var(--mark);
  padding: 0.5rem 0.75rem;
  overflow-x: auto;
}
.note { color: var(--ink-soft); font-size: 0.875rem; }

/* -- ad slots --------------------------------------------------------- */

.ad-slot {
  min-height: var(--ad-reserve);
  margin: 1.5rem 0;
  background: var(--slot);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
}
.ad-slot--anchor { position: sticky; bottom: 0; margin: 0; }

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

.foot {
  border-top: 1px solid var(--rule);
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  padding-bottom: 2.5rem;
  color: var(--ink-soft);
  font-size: 0.875rem;
}
.foot nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 0.85rem; }
.foot a { min-height: 44px; display: inline-flex; align-items: center; }

@media (max-width: 30rem) {
  .field { grid-template-columns: 1fr auto; }
  .field label { grid-column: 1 / -1; margin-bottom: -0.35rem; }
  table { font-size: 0.875rem; }
  th, td { padding: 0.4rem 0.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

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

/* A drawing states nothing the table does not; it shows the proportion the table can only
   list. It is sized in ems so it scales with the text rather than with the viewport, and it
   paints in currentColor so the dark scheme needs no second palette. */
.fig {
  margin: 1.25rem 0;
  padding: 0.75rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.fig svg {
  display: block;
  width: 100%;
  max-width: 26rem;
  height: auto;
  margin: 0 auto;
  color: var(--ink-soft);
  overflow: visible;
}
.fig-rule { stroke: var(--mark); }
.fig-label {
  fill: var(--ink-soft);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.fig-code {
  fill: var(--ink);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* A caption that repeats the heading above its table is noise for a sighted reader and the
   table's only name for a screen reader. Kept, and taken out of the visual flow. */
caption.dup {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A table of measurements is wider than a phone and that is not negotiable — so the table
   scrolls inside its own box rather than taking the page with it. The container is focusable
   because a scroll region a mouse can reach and a keyboard cannot is an accessibility failure,
   not a layout choice. */
.scroll {
  overflow-x: auto;
  max-width: 100%;
}
.scroll:focus-visible { outline: 3px solid var(--mark); outline-offset: 2px; }

@media (max-width: 40rem) {
  thead th { white-space: normal; }
}