/* Ross's Postcards — the scribes.net look (same tokens as scribes.net/ross-post-cards),
   sized for an iPad and an iPhone held in one hand. No new fonts. */
:root {
  --color-ink: #1a1a1a;
  --color-ink-soft: #555;
  --color-paper: #fafaf7;
  --color-card: #ffffff;
  --color-rule: #e5e2d8;
  --color-accent: #b34d3a;
  --color-accent-soft: #f6e9e5;
  --color-ok: #3a7a4d;
  --font-frame: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-body: "Source Serif 4", Georgia, "Iowan Old Style", serif;
  --font-display: "Lora", Georgia, serif;
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 1rem; --s-4: 1.5rem; --s-5: 2.5rem; --s-6: 4rem;
  --content-max: 38rem;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-body); font-size: 1.125rem; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
main { max-width: var(--content-max); margin: 0 auto; padding: var(--s-4) var(--s-3) var(--s-6); }
h1 { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 2rem; margin: 0 0 var(--s-2); line-height: 1.15; }
h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; margin: var(--s-5) 0 var(--s-2); }
p { margin: 0 0 var(--s-3); }
a { color: var(--color-accent); }
.frame { font-family: var(--font-frame); font-size: 0.875rem; color: var(--color-ink-soft); letter-spacing: 0.02em; }
.muted { color: var(--color-ink-soft); }
.hidden { display: none !important; }

/* buttons: big enough for a thumb */
.btn, button.btn {
  display: block; width: 100%; padding: 0.9rem 1.1rem; margin: 0 0 var(--s-2);
  font: inherit; font-size: 1.125rem; text-align: center; text-decoration: none;
  color: var(--color-ink); background: var(--color-card); border: 1.5px solid var(--color-rule);
  border-radius: 10px; cursor: pointer; -webkit-appearance: none;
}
.btn.primary { background: var(--color-accent); border-color: var(--color-accent); color: #fff; font-weight: 600; }
.btn.quiet { background: transparent; border-color: transparent; color: var(--color-accent); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.small { width: auto; display: inline-block; padding: 0.5rem 0.9rem; font-size: 1rem; margin: 0; }

label { display: block; font-weight: 600; margin: var(--s-4) 0 var(--s-2); }
/* a field and the button that acts on it do not touch (Joe, 11/4/2026) */
form .btn { margin-top: var(--s-4); }
section + section, #step-start form { margin-top: var(--s-4); }
#last-line { margin-bottom: var(--s-3); }
#btn-passkey { margin-bottom: var(--s-4); }
input[type=text], input[type=email], input[type=date], textarea {
  width: 100%; padding: 0.8rem 0.9rem; font: inherit; font-size: 1.125rem;
  color: var(--color-ink); background: var(--color-card);
  border: 1.5px solid var(--color-rule); border-radius: 10px; -webkit-appearance: none;
}
input.code { font-family: var(--font-frame); font-size: 1.75rem; letter-spacing: 0.35em; text-align: center; }
textarea { min-height: 5rem; resize: vertical; }

.card { background: var(--color-card); border: 1.5px solid var(--color-rule); border-radius: 12px; padding: var(--s-3); margin: 0 0 var(--s-3); }
.notice { background: var(--color-accent-soft); border-radius: 10px; padding: var(--s-2) var(--s-3); margin: 0 0 var(--s-3); }
.error { color: var(--color-accent); font-weight: 600; }
.ok { color: var(--color-ok); font-weight: 600; }

.nav { display: flex; gap: var(--s-3); flex-wrap: wrap; margin: 0 0 var(--s-4); }
.nav a { font-family: var(--font-frame); font-size: 0.875rem; }

/* name picker */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-2) 0 var(--s-3); }
.chip { padding: 0.5rem 0.8rem; border: 1.5px solid var(--color-rule); border-radius: 999px; background: var(--color-card); font: inherit; font-size: 1rem; cursor: pointer; }
.chip.on { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.seg { display: flex; border: 1.5px solid var(--color-rule); border-radius: 10px; overflow: hidden; margin: 0 0 var(--s-3); }
.seg button { flex: 1; padding: 0.8rem; font: inherit; font-size: 1.125rem; background: var(--color-card); border: 0; cursor: pointer; }
.seg button.on { background: var(--color-accent); color: #fff; font-weight: 600; }

/* photo slots */
.shot { display: block; position: relative; border: 2px dashed var(--color-rule); border-radius: 12px; padding: var(--s-4) var(--s-3); text-align: center; background: var(--color-card); cursor: pointer; margin: 0 0 var(--s-3); }
.shot input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.shot img { display: block; max-width: 100%; max-height: 18rem; margin: 0 auto var(--s-2); border-radius: 8px; }
.shot .label { font-weight: 600; }

/* the card list */
/* each side keeps its own shape: a vertical card stands up, a horizontal one lies down (Joe, 11/4/2026) */
.cardrow .thumbs { display: flex; gap: var(--s-2); align-items: flex-start; flex-wrap: wrap; margin-bottom: var(--s-2); }
.cardrow .thumbs img { display: block; height: 9rem; width: auto; max-width: 100%; border-radius: 6px; background: var(--color-rule); }
.cardrow .thumbs img.tall { height: 12rem; }
.shot img.tall { max-height: 26rem; }
/* the name search */
.namelist { border: 1.5px solid var(--color-rule); border-radius: 10px; background: var(--color-card); max-height: 18rem; overflow-y: auto; margin: var(--s-2) 0; }
.namelist button { display: block; width: 100%; text-align: left; padding: 0.7rem 0.9rem; font: inherit; background: none; border: 0; border-bottom: 1px solid var(--color-rule); cursor: pointer; }
.namelist button:last-child { border-bottom: 0; }
.namelist button .frame { display: block; }
.namelist .letter { padding: 0.3rem 0.9rem; background: var(--color-paper); font-family: var(--font-frame); font-size: 0.875rem; color: var(--color-ink-soft); position: sticky; top: 0; }
.cardrow .who { font-weight: 600; }
.devrow { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--color-rule); }