/* Tililt.
   Mobile-first — base rules are the phone, min-width blocks add the desktop.
   System font stack on purpose: renders instantly, needs no CDN, cannot be
   blocked by a CSP. Everything numeric is tabular so digits line up as they
   change; on a page whose whole job is numbers that is not a detail.
   Themes: OS preference by default, explicit toggle wins in both directions. */

:root {
  --paper:   #fbfbfc;
  --surface: #ffffff;
  --sunken:  #f1f2f6;
  --line:    #e2e4ea;
  --line-2:  #cdd1db;
  --ink:     #11131a;
  --ink-2:   #414652;
  --muted:   #6c7280;
  --accent:  #07845c;
  --accent-2:#056348;
  --accent-soft: #e3f5ee;
  --warn:    #9a5b06;
  --radius:  12px;
  --shadow:  0 1px 2px rgba(15,20,30,.06), 0 8px 28px -16px rgba(15,20,30,.28);
  --sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #0b0d12;
    --surface: #141821;
    --sunken:  #0f131a;
    --line:    #222836;
    --line-2:  #333c4d;
    --ink:     #e9ebf0;
    --ink-2:   #bcc2ce;
    --muted:   #868e9e;
    --accent:  #3ddc9a;
    --accent-2:#6bebb6;
    --accent-soft: #10281f;
    --warn:    #e0a25a;
    --shadow:  0 1px 2px rgba(0,0,0,.5), 0 10px 30px -18px rgba(0,0,0,.9);
  }
}

:root[data-theme="light"] {
  --paper:#fbfbfc; --surface:#ffffff; --sunken:#f1f2f6; --line:#e2e4ea;
  --line-2:#cdd1db; --ink:#11131a; --ink-2:#414652; --muted:#6c7280;
  --accent:#07845c; --accent-2:#056348; --accent-soft:#e3f5ee; --warn:#9a5b06;
  --shadow:0 1px 2px rgba(15,20,30,.06), 0 8px 28px -16px rgba(15,20,30,.28);
}
:root[data-theme="dark"] {
  --paper:#0b0d12; --surface:#141821; --sunken:#0f131a; --line:#222836;
  --line-2:#333c4d; --ink:#e9ebf0; --ink-2:#bcc2ce; --muted:#868e9e;
  --accent:#3ddc9a; --accent-2:#6bebb6; --accent-soft:#10281f; --warn:#e0a25a;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -18px rgba(0,0,0,.9);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

a { color: inherit; }
h1, h2, h3 { line-height: 1.2; margin: 0; text-wrap: balance; }
h1 { font-size: 1.8rem; letter-spacing: -.024em; font-weight: 700; }
h2 { font-size: 1.14rem; letter-spacing: -.012em; font-weight: 650; }
p  { margin: 0 0 .85em; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }

.skip { position: absolute; left: -9999px; background: var(--ink); color: var(--paper); padding: 10px 16px; }
.skip:focus { left: 8px; top: 8px; z-index: 99; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px;
}

/* ---------------------------------------------------------------- topbar */

.topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.bar { display: flex; align-items: center; gap: 12px; height: 56px; }

.brand {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  font-weight: 700; letter-spacing: -.022em; text-decoration: none; color: var(--ink);
}
.brand svg { color: var(--accent); flex: none; }

.mainnav { display: none; gap: 2px; margin-left: auto; }
.mainnav a {
  padding: 7px 9px; border-radius: 7px; font-size: .85rem;
  text-decoration: none; color: var(--ink-2);
  white-space: nowrap;          /* seven entries must never wrap the topbar */
}
.mainnav a:hover { background: var(--sunken); color: var(--accent); }

/* Language switcher. Rendered only where a translation exists, so it can never
   point at a page that is not there. */
.langs {
  display: flex; gap: 2px; flex: none; margin-left: auto;
  border: 1px solid var(--line); border-radius: 8px; padding: 2px;
}
.langs + .theme, .mainnav + .langs { margin-left: 4px; }
.lang {
  display: grid; place-items: center; min-width: 34px; height: 36px;
  padding: 0 7px; border-radius: 6px; font-size: .74rem; font-weight: 700;
  letter-spacing: .04em; text-decoration: none; color: var(--muted);
}
a.lang:hover { color: var(--accent); background: var(--sunken); }
.lang.on { background: var(--accent-soft); color: var(--accent); }

/* Category strip — the phone's navigation. A scrollable row beats a hamburger
   for seven items: one tap, no menu state, and the options stay visible. */
.catstrip {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  padding: 0 16px 10px; margin: 0 auto; max-width: 1120px;
  -webkit-overflow-scrolling: touch;
}
.catstrip::-webkit-scrollbar { display: none; }
.catstrip a {
  flex: none; padding: 8px 14px; border-radius: 18px; font-size: .84rem;
  text-decoration: none; color: var(--ink-2); white-space: nowrap;
  background: var(--sunken); border: 1px solid var(--line);
}
.catstrip a:hover, .catstrip a:focus-visible { border-color: var(--accent); color: var(--accent); }

.theme {
  flex: none; margin-left: auto; width: 40px; height: 40px;
  display: grid; place-items: center;
  background: none; border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink-2); cursor: pointer; padding: 0;
}
.mainnav + .theme, .langs + .theme { margin-left: 4px; }
.theme:hover { color: var(--accent); border-color: var(--accent); }
.theme .moon { display: none; }
@media (prefers-color-scheme: dark) {
  .theme .sun { display: none; } .theme .moon { display: inline; }
}
:root[data-theme="dark"]  .theme .sun  { display: none; }
:root[data-theme="dark"]  .theme .moon { display: inline; }
:root[data-theme="light"] .theme .sun  { display: inline; }
:root[data-theme="light"] .theme .moon { display: none; }

/* ------------------------------------------------------------------ main */

main { padding-bottom: 56px; }

.crumbs {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: .78rem; color: var(--muted); padding: 14px 0 0;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { opacity: .4; }

.lede { color: var(--ink-2); max-width: 62ch; }
.note {
  font-size: .8rem; color: var(--muted); margin: 14px 0 0;
  padding-top: 12px; border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------------ hero */

.hero { padding: 34px 0 4px; }
.hero h1 { font-size: 2.05rem; margin-bottom: .32em; }
.hero .lede { font-size: 1.03rem; margin-bottom: 1.3em; }

.searchbox { position: relative; }
.searchbox input {
  width: 100%; font: inherit; font-size: 1rem;
  padding: 13px 16px; border-radius: 10px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow);
}
.searchbox input::placeholder { color: var(--muted); }
.searchbox input:focus { border-color: var(--accent); }

/* ---------------------------------------------------------------- blocks */

.block { margin-top: 38px; }
.block[hidden] { display: none; }
.ghead { margin-bottom: 16px; }
.ghead h2 { margin-bottom: 3px; }
.ghead h2 a { text-decoration: none; }
.ghead h2 a:hover { color: var(--accent); }
.ghead p { font-size: .86rem; color: var(--muted); margin: 0; max-width: 66ch; }
.block > h2:only-child, .prose > h2, .block > h2:first-child {
  padding-bottom: 9px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.more { margin-top: 16px; }
.more a { color: var(--accent); text-decoration: none; font-weight: 600; }

.grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ccard {
  display: block; padding: 14px 16px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .12s, transform .12s;
}
.ccard[hidden] { display: none; }
.ccard:hover { border-color: var(--accent); transform: translateY(-1px); }
.cname { display: block; font-weight: 650; font-size: .98rem; }
.cblurb { display: block; font-size: .82rem; color: var(--muted); margin-top: 3px; }

.empty {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 10px; padding: 14px 16px; color: var(--muted); font-size: .9rem;
}
.empty[hidden] { display: none; }

/* ------------------------------------------------------------ calculator */

.chead { padding: 20px 0 0; }
.chead h1 { margin-bottom: .3em; }

.calc { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 22px; }

/* On a phone the answer sits above the controls and stays put while you type. */
.output {
  order: -1;
  position: sticky; top: 56px; z-index: 10;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow);
}

.primary { display: grid; gap: 4px; position: relative; }
.plabel {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); font-weight: 650;
}
.pvalue {
  font-size: clamp(1.9rem, 7vw, 2.7rem); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.1; color: var(--accent);
  word-break: break-word;
}
.pvalue.multiline {
  font-size: 1rem; font-weight: 600; letter-spacing: 0; line-height: 1.7;
  white-space: pre-line; font-family: var(--mono);
}
.copy {
  position: absolute; top: 0; right: 0;
  font: inherit; font-size: .72rem; font-weight: 600;
  padding: 5px 10px; border-radius: 6px; cursor: pointer;
  background: var(--sunken); border: 1px solid var(--line); color: var(--muted);
}
.copy:hover { color: var(--accent); border-color: var(--accent); }

.secondary {
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr; gap: 9px;
}
.secondary > div {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 1px 14px; align-items: baseline;
}
.secondary dt { font-size: .84rem; color: var(--muted); }
/* A long value (a binary mask, a factorisation) drops onto its own line rather
   than overflowing the column. */
.secondary dd {
  margin: 0 0 0 auto; font-size: .92rem; font-weight: 620;
  text-align: right; word-break: break-word; overflow-wrap: anywhere;
}

.reset {
  margin-top: 16px; font: inherit; font-size: .8rem;
  background: none; border: 1px solid var(--line); color: var(--muted);
  padding: 7px 13px; border-radius: 7px; cursor: pointer;
}
.reset:hover { border-color: var(--accent); color: var(--accent); }

.inputs {
  display: grid; gap: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px;
}
.field { display: grid; gap: 6px; }
.field[hidden] { display: none; }
.field label {
  font-size: .78rem; font-weight: 620; color: var(--ink-2);
}
.control { display: flex; align-items: stretch; }
.control input, .control select, .control textarea {
  /* 16px minimum. Below it, iOS Safari zooms the viewport on focus and the
     user has to pinch back out after every field. */
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 1rem;
  padding: 10px 12px; color: var(--ink);
  background: var(--sunken); border: 1px solid var(--line-2);
  border-radius: 8px;
}
.control textarea { resize: vertical; font-family: var(--mono); font-size: 1rem; line-height: 1.6; }
.control input:focus, .control select:focus, .control textarea:focus {
  border-color: var(--accent); background: var(--surface);
}
.control input[type="number"] { -moz-appearance: textfield; }
.control input[type="number"]::-webkit-outer-spin-button,
.control input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.control:has(.unit) input, .control:has(.unit) select {
  border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0;
}
.unit {
  flex: none; display: grid; place-items: center;
  padding: 0 12px; font-size: .82rem; color: var(--muted);
  background: var(--sunken); border: 1px solid var(--line-2); border-left: 0;
  border-radius: 0 8px 8px 0;
}
.help { font-size: .74rem; color: var(--muted); margin: 0; }

/* ----------------------------------------------------------------- tools */

.tool { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
.ctag {
  margin-left: 7px; font-size: .6rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent);
  background: var(--accent-soft); border-radius: 4px; padding: 2px 6px;
  vertical-align: 2px;
}

.ghost {
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  background: var(--sunken); border: 1px solid var(--line-2); color: var(--ink-2);
  padding: 8px 13px; border-radius: 8px;
}
.ghost:hover { border-color: var(--accent); color: var(--accent); }

.gr-side {
  display: grid; gap: 12px; align-content: start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px;
}
.gr-plot { display: grid; gap: 10px; align-content: start; }

.gr-fns { display: grid; gap: 7px; }
.gr-fn { display: flex; align-items: center; gap: 8px; }
.gr-sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.gr-fn input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-family: var(--mono);
  font-size: 1rem; padding: 8px 10px; color: var(--ink);
  background: var(--sunken); border: 1px solid var(--line-2); border-radius: 7px;
}
.gr-fn input:focus { border-color: var(--accent); background: var(--surface); }
.gr-fn input.bad { border-color: var(--crit, #b91c1c); }
.gr-x {
  flex: none; width: 28px; height: 28px; line-height: 1; font-size: 1.1rem;
  background: none; border: 1px solid var(--line); border-radius: 7px;
  color: var(--muted); cursor: pointer;
}
.gr-x:hover { color: var(--accent); border-color: var(--accent); }

.gr-win { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.gr-win label {
  display: grid; gap: 4px; font-size: .72rem; color: var(--muted); font-weight: 600;
}
.gr-win input {
  font: inherit; font-size: 1rem; padding: 7px 9px; color: var(--ink);
  background: var(--sunken); border: 1px solid var(--line-2); border-radius: 7px;
  min-width: 0;
}
.gr-acts { display: flex; flex-wrap: wrap; gap: 8px; }

#grCanvas {
  width: 100%; height: min(62vh, 520px); display: block; touch-action: none;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); cursor: crosshair;
}
.gr-read {
  min-height: 1.2em; font-family: var(--mono); font-size: .8rem; color: var(--muted);
}

.gear-view {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 14px; color: var(--ink);
}
.gear-view svg { display: block; width: 100%; height: auto; max-height: 60vh; }

.drop {
  display: grid; gap: 5px; place-items: center; text-align: center;
  padding: 34px 20px; cursor: pointer;
  border: 2px dashed var(--line-2); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-2);
}
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop strong { font-size: 1rem; }
.drop span { font-size: .84rem; color: var(--muted); }

.opts { display: grid; grid-template-columns: 1fr; gap: 14px; }
.imout { display: grid; gap: 8px; }
.imcard {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px;
}
.imname { font-size: .9rem; font-weight: 600; overflow-wrap: anywhere; }
.imstat { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.imcard .ghost { margin-left: auto; }

.io2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
.iopane { display: grid; gap: 6px; }
.iopane > label { font-size: .78rem; font-weight: 620; color: var(--ink-2); }
.iopane textarea {
  width: 100%; font: inherit; font-family: var(--mono); font-size: 1rem;
  line-height: 1.6; padding: 11px 12px; resize: vertical; color: var(--ink);
  background: var(--sunken); border: 1px solid var(--line-2); border-radius: 8px;
}
.iopane textarea:focus { border-color: var(--accent); background: var(--surface); }
.iopane .help.bad, .help.bad { color: var(--crit, #b91c1c); }

/* ----------------------------------------------------------- value pages */

.qhead { padding: 22px 0 0; }
.qhead h1 { font-size: 1.6rem; letter-spacing: -.022em; }

/* The answer is the page. Everything below it is the justification, and it is
   ordered that way because that is the sentence a snippet or an AI summary
   lifts. */
.answer {
  margin-top: 18px; padding: 22px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.alabel {
  display: block; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted); font-weight: 700;
}
.avalue {
  display: block; margin-top: 4px;
  font-size: clamp(2.2rem, 8.5vw, 3.3rem); font-weight: 700;
  letter-spacing: -.035em; line-height: 1.06; color: var(--accent);
  overflow-wrap: anywhere;
}
.asentence { margin: 12px 0 0; font-size: 1.02rem; color: var(--ink-2); max-width: 60ch; }
.apills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pill {
  display: inline-block; font-size: .82rem; font-weight: 600;
  text-decoration: none; padding: 8px 14px; border-radius: 20px;
  border: 1px solid var(--line-2); color: var(--ink-2); background: var(--sunken);
}
.pill:hover { border-color: var(--accent); color: var(--accent); }

.steps { margin: 0; padding: 0 0 0 1.35em; display: grid; gap: 13px; }
.sname { display: block; font-size: .88rem; color: var(--ink-2); }
.swork {
  display: inline-block; margin-top: 5px; padding: 7px 11px;
  background: var(--sunken); border: 1px solid var(--line); border-radius: 7px;
  font-family: var(--mono); font-size: .88rem; color: var(--ink);
  overflow-wrap: anywhere;
}
.formula { margin: 16px 0 0; }
.formula code {
  display: inline-block; font-family: var(--mono); font-size: .84rem;
  color: var(--muted); background: var(--sunken);
  border: 1px solid var(--line); padding: 6px 10px; border-radius: 6px;
}

.notes { margin: 0; display: grid; gap: 13px; }
.note-row dt {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); font-weight: 700;
}
.note-row dd { margin: 3px 0 0; font-size: .93rem; color: var(--ink-2); max-width: 68ch; }

.vgrid { display: grid; grid-template-columns: 1fr; gap: 6px; }
.vrow {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 10px 14px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
}
.vrow:hover { border-color: var(--accent); }
.vlabel { font-size: .88rem; color: var(--ink-2); }
.vval { font-size: .92rem; font-weight: 650; white-space: nowrap; }

/* ----------------------------------------------------------------- prose */

.prose p { max-width: 68ch; font-size: .95rem; color: var(--ink-2); }

.q {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; margin-bottom: 8px;
}
.q > summary {
  cursor: pointer; padding: 13px 16px; font-weight: 620; font-size: .93rem;
  list-style: none; display: flex; align-items: center; gap: 10px;
}
.q > summary::-webkit-details-marker { display: none; }
.q > summary::after { content: "+"; margin-left: auto; color: var(--muted); font-size: 1.2rem; line-height: 1; }
.q[open] > summary::after { content: "\2212"; }
.q > p {
  padding: 0 16px 15px; margin: 0; font-size: .9rem; color: var(--ink-2); max-width: 70ch;
}

/* ------------------------------------------------------------------- all */

.allgrid { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: 26px; }
.allcol h2 { padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.allcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.allcol a { text-decoration: none; font-size: .9rem; color: var(--ink-2); }
.allcol a:hover { color: var(--accent); }

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

/* Each slot carries its own reserved height, set inline by the server, so the
   box is already the right size before the network's script fills it. Without
   that the page reflows under the reader mid-sentence, which Google measures.
   A slot with two units carries both heights and the viewport picks. */
.ad {
  margin: 26px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: var(--ad-h, 250px);
}
@media (max-width: 767px) {
  .ad { min-height: var(--ad-hn, var(--ad-h, 250px)); }
}
.ad:empty { display: none; min-height: 0; }
/* An ad unit wider than a phone must not widen the page around it. */
.ad > * { max-width: 100%; }

/* --------------------------------------------------------- back to top */

.totop {
  position: fixed; right: 14px; z-index: 25;
  bottom: calc(14px + env(safe-area-inset-bottom));
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: var(--shadow);
  opacity: 0; transform: translateY(8px); transition: opacity .18s, transform .18s;
}
.totop[hidden] { display: none; }
.totop.show { opacity: 1; transform: none; }
.totop:hover { color: var(--accent); border-color: var(--accent); }

/* ---------------------------------------------------- touch ergonomics */

/* Anything tapped with a thumb gets a 44px target. Applies by pointer type
   rather than width, so a touchscreen laptop is treated as touch. */
@media (pointer: coarse) {
  .copy, .reset, .ghost, .gr-x, .pill, .vinrow button, .quick button,
  .theme, .lang, .totop {
    min-height: 44px;
  }
  .copy { padding: 0 14px; }
  .gr-x, .theme { width: 44px; }
  .lang { min-width: 40px; }
  .vrow, .row, .ccard { min-height: 48px; }
  .crumbs { gap: 8px; font-size: .8rem; }
  .footnav a, .ends a { padding: 6px 0; display: inline-block; }
}

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

.foot {
  border-top: 1px solid var(--line); background: var(--surface);
  margin-top: 48px; padding: 26px 0 32px;
}
.footnav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 16px; }
.footnav a { font-size: .86rem; text-decoration: none; color: var(--ink-2); }
.footnav a:hover { color: var(--accent); }
.disc { font-size: .78rem; color: var(--muted); max-width: 76ch; }
.ends { font-size: .78rem; color: var(--muted); margin: 0; }

/* --------------------------------------------------------------- desktop */

@media (min-width: 700px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .secondary { grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
  .allgrid { grid-template-columns: repeat(2, 1fr); }
  .vgrid { grid-template-columns: repeat(2, 1fr); }
  .qhead h1 { font-size: 2rem; }
  .opts { grid-template-columns: repeat(3, 1fr); }
  .io2 { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 52px 0 6px; }
  .hero h1 { font-size: 2.6rem; }
  h1 { font-size: 2.1rem; }
}

@media (min-width: 900px) {
  /* Category nav appears once seven entries actually fit on one line; below
     this the scrollable strip under the header does the same job. */
  .mainnav { display: flex; }
  .catstrip { display: none; }
  .theme { margin-left: 4px; }
  /* Desktop can afford tighter fields — the 16px minimum only exists to stop
     iOS zooming on focus. */
  .control input, .control select, .control textarea { font-size: .95rem; }
  .gr-fn input, .gr-win input, .iopane textarea { font-size: .9rem; }
  .quick input { font-size: .9rem; }
}

@media (min-width: 960px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .allgrid { grid-template-columns: repeat(4, 1fr); }
  .vgrid { grid-template-columns: repeat(4, 1fr); }
  /* Controls on the left, the drawing on the right — the drawing is the point,
     so it gets the room. */
  .grapher, .gear { grid-template-columns: 330px minmax(0, 1fr); gap: 20px; }

  /* Inputs left, answer parked on the right where it stays visible. */
  .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: start; gap: 22px; }
  .output { order: 0; position: sticky; top: 76px; }
  .secondary { grid-template-columns: 1fr; }
  .inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; padding: 22px; }
  .field:has(textarea) { grid-column: 1 / -1; }
}

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

/* ------------------------------------------------------------- tools, part 2
   Layouts for the QR, hash, password, JSON, Base64, JWT, UUID and timestamp
   tools. Everything here reuses the existing tokens, so both themes and the
   reduced-motion rule above apply without restating them. */

.chip {
  display: inline-block; font-size: .72rem; line-height: 1.5;
  padding: 0 .45rem; border-radius: 999px; vertical-align: 1px;
  border: 1px solid var(--line-2); color: var(--muted); background: var(--sunken);
  font-weight: 500; white-space: nowrap;
}
.chip.bad { border-color: #d03b3b; color: #d03b3b; background: transparent; }

/* Hashes: name, value, copy — the value wraps rather than scrolling, because
   a 128-character SHA-512 has to be readable to be checkable. */
.hashrow {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto;
  gap: .75rem; align-items: start; padding: .6rem 0;
}
.hashrow + .hashrow { border-top: 1px solid var(--line); }
.hashname { font-size: .82rem; color: var(--ink-2); font-weight: 600; padding-top: .1rem; }
.hashval {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem; word-break: break-all; color: var(--ink); line-height: 1.5;
}
@media (max-width: 620px) {
  .hashrow { grid-template-columns: minmax(0, 1fr) auto; }
  .hashname { grid-column: 1 / -1; }
}

/* The password output is the answer, so it gets the same weight as a
   calculator's primary result. */
.pw-out {
  background: var(--sunken); border: 1px solid var(--line);
  border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.pw-out .pvalue {
  display: block; width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.15rem; line-height: 1.6; word-break: break-all;
  white-space: pre-wrap; margin-bottom: .75rem;
}

/* A parse error is only useful if the caret lines up with the character it is
   pointing at, so this must stay monospaced and must not wrap. */
.jsonerr {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem; line-height: 1.5; margin: .6rem 0 0;
  padding: .7rem .9rem; border-radius: 10px; overflow-x: auto;
  background: var(--sunken); border: 1px solid var(--line); color: var(--ink-2);
  white-space: pre;
}

.ts-now {
  background: var(--sunken); border: 1px solid var(--line);
  border-radius: 12px; padding: .9rem 1.1rem; margin-bottom: 1rem;
}
.ts-now .avalue {
  display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.05rem; margin: .25rem 0 .7rem; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.tablewrap { overflow-x: auto; margin-top: 1rem; }
.tablewrap table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tablewrap th, .tablewrap td {
  text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.tablewrap th { color: var(--muted); font-weight: 600; white-space: nowrap; }
.tablewrap td:last-child {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem; word-break: break-word;
}

/* The QR preview is always black on white in both themes: a themed QR code is
   a QR code that sometimes will not scan. */
#qrView svg { max-width: 320px; width: 100%; height: auto; border-radius: 8px; }
#qrView { display: flex; justify-content: center; padding: .5rem 0 1rem; }

/* ---------------------------------------------------------- tools, part 3 */

.imrow {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto;
  gap: .9rem; align-items: center; padding: .7rem 0;
}
.imrow + .imrow { border-top: 1px solid var(--line); }
.imthumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px;
           border: 1px solid var(--line); }
.imeta { min-width: 0; font-size: .88rem; }
.imeta strong { display: block; overflow: hidden; text-overflow: ellipsis;
                white-space: nowrap; }

.wc-stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.cc-grid { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.cc-grid button[aria-pressed="true"] {
  background: var(--ink); color: var(--surface); border-color: var(--ink);
}

/* The diff needs a monospaced grid or the line numbers do not line up, and it
   must scroll inside itself rather than pushing the page sideways. */
.diffout { margin-top: 1rem; }
.difflines, .diffinline {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem; line-height: 1.6; border: 1px solid var(--line);
  border-radius: 10px; overflow-x: auto; background: var(--sunken);
}
.diffinline { padding: .8rem 1rem; white-space: pre-wrap; word-break: break-word; }
.difflines > div { display: flex; white-space: pre; padding: 0 .4rem; }
.dnum { flex: none; width: 3.2em; text-align: right; padding-right: .8em;
        color: var(--muted); user-select: none; }
.dsign { flex: none; width: 1.4em; color: var(--muted); user-select: none; }
.dtext { flex: 1 1 auto; }
.dadd { background: color-mix(in srgb, #0ca30c 14%, transparent); }
.ddel { background: color-mix(in srgb, #d03b3b 14%, transparent); }
.diffinline .dadd, .diffinline .ddel { border-radius: 3px; padding: 0 .1em; }
.diffinline .ddel { text-decoration: line-through; opacity: .75; }