/* Phone first: the code entry happens standing at a table at a card show. */
:root {
  --bg: #12141a; --card: #1b1e26; --line: #2c313d;
  --ink: #e8eaf0; --muted: #949bad; --accent: #6ea8fe;
  --bad: #ff8a8a; --warn: #ffd479;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* Standalone mode has no browser chrome, so the header sits under the notch unless we
   pad for it. env() is 0 in a normal tab, so this is safe everywhere. */
.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; border-bottom: 1px solid var(--line);
  padding: calc(.85rem + env(safe-area-inset-top)) 1rem .85rem;
  padding-left: calc(1rem + env(safe-area-inset-left));
  padding-right: calc(1rem + env(safe-area-inset-right));
}
.brand { color: var(--ink); text-decoration: none; font-weight: 650; letter-spacing: .02em; }
.bar nav { display: flex; align-items: center; gap: 1rem; }
.bar a { color: var(--muted); text-decoration: none; }
.bar a:hover { color: var(--ink); }
main {
  max-width: 60rem; margin: 0 auto;
  padding: 1rem calc(1rem + env(safe-area-inset-right)) 1rem calc(1rem + env(safe-area-inset-left));
}
footer {
  color: var(--muted); font-size: .8rem; text-align: center;
  padding: 2rem 1rem calc(2rem + env(safe-area-inset-bottom));
}
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem;
}
.card.narrow { max-width: 25rem; margin: 3rem auto; }
h1 { font-size: 1.35rem; margin: 0 0 .75rem; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
label { display: block; margin: .9rem 0 .35rem; color: var(--muted); font-size: .85rem; }
input {
  width: 100%; padding: .8rem; font-size: 1rem; color: var(--ink);
  background: #14171e; border: 1px solid var(--line); border-radius: 8px;
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Big and spaced out: typing six digits one-handed shouldn't need care. */
input.code { font-size: 1.9rem; letter-spacing: .35em; text-align: center; padding: .7rem; }
button {
  margin-top: 1rem; width: 100%; padding: .85rem; font-size: 1rem; font-weight: 600;
  color: #0f1116; background: var(--accent); border: 0; border-radius: 8px; cursor: pointer;
}
button.link {
  width: auto; margin: 0; padding: 0; background: none; color: var(--muted);
  font-weight: 400; text-decoration: underline;
}
button.link:hover { color: var(--ink); }
.secondary { margin-top: .75rem; text-align: center; }
a.button { display: inline-block; margin-top: 1rem; padding: .7rem 1.1rem; color: #0f1116;
  background: var(--accent); border-radius: 8px; text-decoration: none; font-weight: 600; }
.muted { color: var(--muted); font-size: .9rem; }
.error { color: var(--bad); border-left: 3px solid var(--bad); padding-left: .7rem; }
.warn { color: var(--warn); border-left: 3px solid var(--warn); padding-left: .7rem; }
.notice { color: var(--accent); border-left: 3px solid var(--accent); padding-left: .7rem; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 500; }
table.kv th { width: 11rem; }
.mono, code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }
@media (max-width: 30rem) { main { padding: .75rem; } .card { padding: 1rem; } }

/* One-handed at a show table: every tap target clears the 44px Apple/WCAG minimum, and
   nothing important sits in the top corners where a thumb cannot reach. */
button, a.button, input { min-height: 44px; }
.bar nav a, button.link { min-height: 44px; display: inline-flex; align-items: center; }
/* iOS zooms the page if an input is under 16px. Never shrink these. */
input, button { font-size: max(1rem, 16px); }

button.link[disabled] { color: var(--muted); text-decoration: none; cursor: default; opacity: .7; }