/* Shared elements: page, buttons, fields, readout tables. Radius 2,
   hairlines 1, no shadows, no gradients, no motion. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--body-size);
  line-height: var(--body-line);
  -webkit-tap-highlight-color: transparent;
}

h1, h2, p, dl, dd { margin: 0; }
h2 { font-size: var(--title-size); line-height: var(--title-line); font-weight: 500; }
.mono { font-family: var(--mono); }
.quiet { color: var(--ink-2); }
.small { font-size: 13px; line-height: 18px; }

.emblem { flex: none; }
.emblem-cell { stroke: var(--ink-2); }
.emblem-needle { stroke: var(--emblem-needle); }

/* Buttons */
.button {
  height: var(--button-height);
  margin: 0;
  padding: 0 var(--s16);
  border: var(--hairline) solid var(--rule-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font: 500 var(--body-size) / 1 var(--sans);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.button.primary { border-color: var(--ink); background: var(--ink); color: var(--on-ink); font-weight: 600; }
.button.primary:disabled { border-color: var(--rule); background: var(--surface); color: var(--ink-3); cursor: default; }
.button.secondary { padding: 0 18px; }
.button.text {
  height: var(--touch);
  padding: 0 var(--s4);
  border: none;
  font-size: 14px;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.button:focus-visible, .axis-readout:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* Fields */
.field { display: flex; flex-direction: column; gap: 6px; }
label, .cond-k, .sheet-kicker {
  font-size: var(--label-size);
  line-height: var(--label-line);
  font-weight: 600;
  letter-spacing: var(--small-tracking);
  color: var(--ink-2);
}
/* 16px, so iOS Safari does not zoom in on focus (it zooms below 16). The
   line height stays 22, so the 48 field and 88 note keep their size. */
input[type='email'], textarea {
  width: 100%;
  margin: 0;
  border: var(--hairline) solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--field-size);
  line-height: var(--body-line);
  outline: none;
}
input[type='email'] { height: var(--field-height); padding: 0 var(--s12); }
input[type='email']:focus, textarea:focus { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
::placeholder { color: var(--ink-3); opacity: 1; }

/* Readout table: label in caps, value beside it */
.readout { display: grid; border-top: var(--hairline) solid var(--rule); }
.readout dt, .readout dd { padding: var(--s8) 0; border-bottom: var(--hairline) solid var(--rule); }
.readout dt { font-size: var(--label-size); font-weight: 600; letter-spacing: var(--small-tracking); color: var(--ink-3); }