* { box-sizing: border-box; }
/* Component display rules (.row, .panel, .qr) would otherwise beat the browser's [hidden] default. */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: var(--t-md); line-height: 1.5;
  /* People choose names and tables choose titles: one with no break point must wrap, not push the page sideways. */
  overflow-wrap: break-word;
}
.wrap {
  max-width: var(--wrap-max); margin-inline: auto; display: grid; gap: var(--s5);
  padding-block: var(--s5) var(--s6);
  padding-inline: max(var(--s4), env(safe-area-inset-left, 0px)) max(var(--s4), env(safe-area-inset-right, 0px));
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; color: var(--fog); margin: 0; line-height: 1.1; text-wrap: balance; }
h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
a { color: var(--fog); }
a:hover { color: var(--glow); }
.spread { justify-content: space-between; }
select, textarea {
  font: inherit; color: var(--ink); background: var(--paper);
  border: var(--rule) solid var(--line); border-radius: var(--r);
}
select { padding: var(--s1) var(--s2); }
textarea { padding: var(--s2); width: 100%; min-height: var(--notes-min); resize: vertical; }
p { margin: 0; }
.lede { color: var(--muted); font-style: italic; }
.meta { color: var(--muted); font-size: var(--t-sm); }
.label { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-5); color: var(--muted); font-weight: 700; }
.panel {
  background: var(--card); border: var(--rule) solid var(--line); border-radius: var(--r);
  padding: var(--s4); display: grid; gap: var(--s3); align-content: start; min-width: 0;
  grid-template-columns: minmax(0, 1fr); /* one column that can be narrower than its widest child */
}
.panel.narrow { max-width: var(--measure); width: 100%; margin-inline: auto; }
.stack { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); }
.field { display: grid; gap: var(--s1); }
.row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.row > * { min-width: 0; } /* a flex item with a long name (or a select listing one) may shrink to its line */
input[type="text"] {
  font: inherit; color: var(--ink); background: var(--paper);
  border: var(--rule) solid var(--line); border-radius: var(--r); padding: var(--s2) var(--s3); min-width: 0;
}
.btn {
  font: inherit; color: inherit; cursor: pointer; background: var(--paper);
  border: var(--rule) solid var(--line); border-radius: var(--r); padding: var(--s2) var(--s4);
  overflow-wrap: anywhere; /* a long name must wrap inside a phone-width button */
}
.btn:hover { border-color: var(--glow); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--fog); color: var(--card); border-color: var(--fog); font-weight: 700; }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.danger { border-color: var(--bad); color: var(--bad); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: var(--focus-ring) solid var(--glow); outline-offset: var(--focus-ring); }
.message { border-left: var(--rule-strong) solid var(--warn); padding: var(--s2) var(--s3); background: var(--paper); }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.list > li { display: grid; gap: var(--s1); padding-top: var(--s3); border-top: var(--rule) dotted var(--line); }
.list > li:first-child { border-top: 0; padding-top: 0; }
.qr { display: grid; gap: var(--s3); justify-items: start; }
/* The QR image keeps its own dark-on-light colours (account/qr.py) and a fixed size cameras can read. */
.qr svg { width: var(--qr-size); height: auto; max-width: 100%; border-radius: var(--r); }
.shown-once { display: grid; gap: var(--s2); }
.shown-once .row input { flex: 1 1 auto; min-width: 0; }