/* Tick's first stylesheet: warm paper (D26), until the Tailwind + daisyUI build lands. */
:root {
  --paper: #fefcf7; --paper-2: #f6f3ed; --edge: #ebe7df; --ink: #1f1915; --grey: #5c554e;
  --error: #a3261b;
  color-scheme: light;
  font-family: "Roboto Flex", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper-2); color: var(--ink); line-height: 1.5; }
.top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--paper);
  border-bottom: 1px solid var(--edge); }
.brand { display: flex; }
.brand img { display: block; height: 29px; width: auto; }
.stage { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--grey); color: var(--grey); border-radius: 4px; padding: 1px 6px; }
.push { margin-left: auto; }
main { max-width: 960px; margin: 0 auto; padding: 24px 16px 56px; display: flex;
  flex-direction: column; gap: 16px; }
h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; margin: 0; }
h2 { font-size: 1.1rem; font-weight: 800; margin: 0 0 12px; }
p { margin: 0; }
.muted { color: var(--grey); }
.small { font-size: 14px; }
a { color: var(--ink); }
.card { background: var(--paper); border: 1px solid var(--edge); border-radius: 4px; padding: 18px 20px; }
.narrow { max-width: 440px; width: 100%; margin: 24px auto 0; display: flex; flex-direction: column;
  gap: 14px; }
form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.top form { flex-direction: row; }
label { font-weight: 600; }
input { font: inherit; font-size: 18px; padding: 10px 12px; border: 1px solid var(--grey);
  border-radius: 4px; background: var(--paper); color: var(--ink); width: 100%; }
input.code { letter-spacing: .3em; font-variant-numeric: tabular-nums; }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--ink);
  outline-offset: 2px; }
button { font: inherit; font-weight: 600; padding: 10px 16px; border-radius: 4px; border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper); cursor: pointer; margin-top: 6px; }
button.quiet { background: transparent; color: var(--ink); padding: 6px 12px; margin: 0; }
.error { border-left: 4px solid var(--error); padding: 8px 12px; background: #fbeeec; color: var(--error); }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
figure { margin: 0; border-radius: 4px; padding: 24px; min-height: 150px; display: flex; gap: 18px;
  flex-wrap: wrap; align-items: center; justify-content: center; }
figure img { max-width: 100%; height: auto; }
.on-paper { background: var(--paper); border: 1px solid var(--edge); }
.on-ink { background: var(--ink); }
.row { display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap; }
.icon { border-radius: 22%; }