/* (c) 2026 Zero Mile Contract Limited. All rights reserved. */
/* The unit converter: /units/ and its sixteen family pages share this one file. Shared pieces (.intro,
   .rules-line, .sheet, .sheet-h, .field, .chips, .btn, .spec, table, .sr, focus ring) come from site.css.
   One sheet: the line and its answer on top, the families under it, the link at the foot; then the family's
   own text (definitions, a table) and the links to every family. Narrow first; the line and the answer side
   by side, and the family's groups in columns, from 821px. */

/* Two signs the site's Plex files lack, the approximately-equal sign and pi, from IBM's official Plex release
   (OFL). Plex's licence reserves the name "Plex" for the unmodified fonts, so these subsets carry their own name,
   ZM Signs. Only the converter's pages know them: this file comes after site.css, so its --sans and --mono below
   replace the site's and add ZM Signs after Plex; every other page keeps site.css's stacks and never asks for
   these files, whatever text a visitor types there. page.js asks for the three at load. Sources: fonts/ZM-SIGNS.txt. */
@font-face {
  font-family: "ZM Signs Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/fonts/zm-signs-sans.woff2") format("woff2");
  unicode-range: U+03C0, U+2248;
}
@font-face {
  font-family: "ZM Signs Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/zm-signs-mono-400.woff2") format("woff2");
  unicode-range: U+03C0, U+2248;
}
@font-face {
  font-family: "ZM Signs Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/zm-signs-mono-500.woff2") format("woff2");
  unicode-range: U+03C0, U+2248;
}
:root {
  --sans: "IBM Plex Sans", "ZM Signs Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "ZM Signs Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* The line and its answer */
.uc-top { display: grid; grid-template-columns: minmax(0, 1fr); }
.uc-ask { min-width: 0; padding: 14px 14px 12px; }
.uc-ans { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 16px; border-top: 1px solid var(--rule); }
.lab { display: block; margin: 0 0 6px; font: 500 13px var(--mono); color: var(--mute); }
.field.q { width: 100%; min-height: 56px; font-size: 22px; letter-spacing: -.01em; }
.help { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--mute); }
.ex { font: 500 13px var(--mono); color: var(--ink); background: var(--code); padding: 0 4px; white-space: nowrap; }
.ro-lab { margin: 0; font: 500 13px var(--mono); color: var(--mute); }
.ans { margin: 0; font: 500 clamp(30px, 3.4cqi, 44px)/1.15 var(--mono); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ans .sign { color: var(--mute); font-weight: 400; }
.ans .val.long { font-size: .72em; letter-spacing: -.02em; }
.ans .val.ask { font: 600 22px/1.3 var(--sans); letter-spacing: 0; }
.also { margin: -2px 0 2px; font: 500 20px/1.3 var(--mono); color: var(--ink); letter-spacing: -.01em; }
#fams.stale { opacity: .45; }
.read { margin: 0; font: 500 13.5px/1.5 var(--mono); color: var(--mute); overflow-wrap: anywhere; }
.read:empty { display: none; }
.msg { margin: 0; padding: 8px 12px; font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--note-bg); border-left: 3px solid var(--note); }
.caveat { margin: 0; padding: 6px 10px; font-size: 14px; line-height: 1.5; color: var(--ink); background: var(--warn-bg); border-left: 3px solid var(--warn); }

/* The region the defaults follow, and the five to choose from */
.region { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--mute); }
.region strong { font-weight: 500; color: var(--ink); }
.linkish { padding: 0; border: 0; background: none; color: var(--blue); font: inherit; text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
.linkish:hover { text-decoration-thickness: 2px; }
.rg-chips { margin-top: 6px; }
.rg-chips button { min-height: 36px; font-size: 13px; }

/* A word with several meanings: each reading with its own answer, one click to change */
.choices { display: grid; gap: 10px; margin-top: 2px; }
.ch-l { margin: 0 0 6px; font-size: 14px; color: var(--ink); }
.choice .chips button { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-height: 40px; padding: 7px 12px; text-align: left; font: 500 14px var(--mono); }
.choice .o-a { color: var(--mute); font-weight: 400; }
.choice .chips button[aria-pressed="true"] .o-a { color: var(--chip); }
.choice .chips button:hover { border-color: var(--ink); }

/* The families */
.uc-fams { border-top: 1px solid var(--ink); }
.fam-bar { padding: 12px 14px; border-bottom: 1px solid var(--rule); background: var(--tint); }
.fam-cap { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--mute); }
.fam-chips button { min-height: 40px; padding: 7px 13px; font-size: 14px; }
.fam-chips button:hover, .fam-opt .chips button:hover, .rg-chips button:hover { border-color: var(--ink); }
.fam { padding: 4px 14px 14px; }
.fam-opt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 0 4px; }
.fam-opt .lab { margin: 0; }
.fam-opt .chips button { min-height: 36px; font-size: 13.5px; }
.fam-opt details.pick-more { flex-basis: 100%; margin-top: 2px; border-top: 0; }
.fam-opt details.pick-more > summary { padding: 4px 0 6px; font-size: 13.5px; }
.grps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; }
.grp { min-width: 0; padding-top: 10px; }
.grp-h { margin: 0; padding: 4px 0 6px; border-bottom: 1px solid var(--ink); font: 600 13px var(--mono); color: var(--ink); }
.rows { display: grid; grid-template-columns: minmax(0, 1fr); }
details.more { margin-top: 12px; border-top: 1px solid var(--rule); }
details.more > summary { cursor: pointer; padding: 10px 0 2px; font: 500 14px var(--mono); color: var(--ink); list-style-position: inside; }
details.more > summary:hover { color: var(--blue); }

/* One unit: its name (and size), the sign, the field, the answer mark */
.u-row { display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1.05fr) 34px; align-items: center; gap: 6px; padding: 5px 6px; margin: 0 -6px; border-bottom: 1px solid var(--rule); }
.u-lab { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; cursor: pointer; }
.u-row.comp .u-lab { cursor: default; }
.u-name { font-size: 15px; color: var(--ink); }
.u-sym { font: 400 12.5px var(--mono); color: var(--mute); }
.u-tag { align-self: flex-start; margin-top: 3px; padding: 0 5px; font: 600 11.5px/1.5 var(--mono); color: var(--sheet); background: var(--blue); }
.u-eq { font: 500 16px var(--mono); color: var(--mute); text-align: center; }
.u-cell { min-width: 0; display: block; }
.u-cell.has-pm { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 4px; }
.u-in { width: 100%; min-height: 42px; padding: 7px 10px; font-size: 16px; text-overflow: ellipsis; }
.u-pm { min-width: 0; min-height: 42px; padding: 0; border: 1px solid var(--rule); background: var(--chip); color: var(--ink); font: 500 17px var(--mono); cursor: pointer; }
.u-pm:hover { border-color: var(--ink); }
/* the answer mark: a ring; the answer's mark is filled */
.u-mark { position: relative; width: 34px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer; }
.u-mark::before { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -9px 0 0 -9px; border: 2px solid var(--field); border-radius: 50%; background: var(--sheet); }
.u-mark:hover::before { border-color: var(--ink); }
.u-mark[aria-pressed="true"]::before { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 3px var(--sheet); }
/* feet and inches, stone and pounds: the label column gives way so the small part shows 10.8661 whole */
.u-row.comp { grid-template-columns: minmax(0, .75fr) 14px minmax(0, 1.3fr) 34px; }
.u-pair { display: grid; grid-template-columns: minmax(0, 2fr) auto minmax(0, 3fr) auto; align-items: center; gap: 4px; min-width: 0; }
.u-pair .u-in { padding: 7px 6px; font-size: 15px; }
.u-suf { font: 500 13px var(--mono); color: var(--mute); }
/* a value longer than its field: smaller text, so it shows whole (page.js fitFields); past the smallest it ends in "…" */
.u-in.fit1 { font-size: 14px; }
.u-in.fit2 { font-size: 12.5px; }
.u-in.fit3 { padding-left: 5px; padding-right: 5px; font-size: 11px; }
.u-row.is-from .u-in { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.u-row.is-to { background: var(--press); }
.u-row.is-to .u-tag { background: var(--ink); }
.fam-msg { margin: 10px 0 0; padding: 6px 10px; font-size: 14px; line-height: 1.5; color: var(--ink); background: var(--note-bg); border-left: 3px solid var(--note); }
.fam-note { margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--mute); max-width: 60em; }

/* The link */
.uc-link { min-width: 0; display: grid; gap: 8px; padding: 14px; border-top: 1px solid var(--ink); }
.ro-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.copy-st { font-size: 14px; color: var(--ok); }
.field.link { width: 100%; font-size: 13px; padding: 8px 10px; }
.ro-help { margin: 0; font-size: 13px; line-height: 1.5; color: var(--mute); }

.dl-trust { margin: 0; font-size: 14.5px; color: var(--ink); max-width: 70em; }

/* A family's own text: its definitions, its table of round values, the links to every family */
.uc-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.uc-table { background: var(--sheet); border: 1px solid var(--ink); min-width: 0; }
.uc-table > h2 { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--ink); font: 600 13px var(--mono); color: var(--ink); }
.uc-table .tw { overflow-x: auto; }
.uc-table table { font-size: 14.5px; }
.uc-table td, .uc-table tbody th { padding: 8px 14px; }
.uc-table tbody th { font: 500 14px var(--mono); color: var(--ink); white-space: nowrap; }
.uc-table td { font: 400 14px var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.uc-table td.tx { font: 400 14px var(--sans); }
.uc-table > p { margin: 0; padding: 10px 14px; font-size: 13.5px; line-height: 1.5; color: var(--mute); border-top: 1px solid var(--rule); }
.spec dd .src { display: block; margin-top: 4px; font-size: 13px; color: var(--mute); }
.fam-links { background: var(--sheet); border: 1px solid var(--ink); }
.fam-links > h2 { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--ink); font: 600 13px var(--mono); color: var(--ink); }
.fam-links ul { margin: 0; padding: 10px 14px 12px; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.fam-links a { font-size: 15px; }
.fam-links a[aria-current="page"] { color: var(--ink); font-weight: 600; text-decoration: none; }

@media (max-width: 640px) {
  .spec dl { grid-template-columns: minmax(0, 1fr); }
  .spec dt { border-right: 0; border-bottom: 0; padding-bottom: 0; }
  .uc-table td, .uc-table tbody th { padding: 8px 10px; }
}

@media (min-width: 821px) {
  .uc-top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .uc-ask { padding: 18px 20px 18px; }
  .uc-ans { border-top: 0; border-left: 1px solid var(--ink); padding: 18px 22px 18px; }
  .fam-bar { padding: 12px 20px; }
  .fam { padding: 4px 20px 18px; }
  .grps.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grps.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grps.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 22px; }
  .grp.flow .rows { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
  .grps.n1 .grp:not(.flow) .rows { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
  .grps.n1 .grp:not(.flow) .rows:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
  .uc-link { padding: 14px 20px 18px; }
  .uc-text.two { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}

/* Forced colours (Windows contrast themes): the chosen ring and the pressed chips keep a mark of their own */
@media (forced-colors: active) {
  .u-mark::before { forced-color-adjust: none; border-color: CanvasText; background: Canvas; }
  .u-mark[aria-pressed="true"]::before { background: CanvasText; box-shadow: inset 0 0 0 3px Canvas; }
  .uc .chips button[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .uc .chips button[aria-pressed="true"] .o-a { color: HighlightText; }
}