/* Pet memorial lantern designer, in the Christmas shop look (shop.css v4): a cream page, paper cards,
   one brass action, green for "chosen". The lantern sits in a near-black-green panel, the only dark
   place on the page, so its tea-light glow is the light (R1, R9). The pet's name is set big in Lora,
   the face that is actually printed on the hill (R5). Tokens copied from /shop.css :root. */
@font-face { font-family: 'Fraunces Soft'; font-weight: 700; font-display: swap; src: url('/fonts/fraunces-700-soft-subset.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 400 750; font-display: swap; src: url('/fonts/figtree-var-subset.woff2') format('woff2'); }
@font-face { font-family: 'Lora Print'; src: url('./fonts/Lora-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --red: #a3121c;
  --cream: #f6efe3;
  --paper: #fffaf2;
  --green: #1d4d3a;
  --green-deep: #143a2b;
  --brass: #c9a24a;
  --brass-hover: #d8b55f;
  --berry: #9e1b1e;
  --ink: #221c19;
  --ink-soft: #4d4541;
  --line: rgb(34 28 25 / 0.14);
  --on-dark: #f6efe3;
  --on-dark-soft: rgb(246 239 227 / 0.84);
  --scene: #0f2119;
  --scene-2: #1f3a2e;
  --glass-shadow: 0 1px 0 rgb(34 28 25 / 0.05), 0 14px 32px -16px rgb(70 20 20 / 0.28);
  --display: 'Fraunces Soft', 'Iowan Old Style', Georgia, serif;
  --sans: 'Figtree', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --gutter: 16px;
  --radius-card: 28px;
  --radius-btn: 14px;
  --buy-room: calc(96px + env(safe-area-inset-bottom));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  background: var(--cream);
  overflow-x: hidden;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 6px; }
h1, h2, p { margin: 0; }
button { font: inherit; color: inherit; }

/* "glass" is the old class name: now it is one paper card, as in the shop */
.glass { background: var(--paper); border-radius: var(--radius-card); box-shadow: var(--glass-shadow); }

/* ---------- header: cream, the wordmark in berry ---------- */
.top {
  max-width: 1192px;
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.wordmark { font: 700 23px/1.2 var(--display); letter-spacing: -0.02em; color: var(--berry); text-decoration: none; padding: 4px 0; white-space: nowrap; }
.back { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 16px; text-decoration: none; }
.back:hover { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 6px; }

main { max-width: 1192px; margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 16px; }

/* ---------- the lantern, in its dark panel; the glow stays inside it ---------- */
.stage-wrap {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: linear-gradient(var(--scene-2), var(--scene) 70%);
}
.stage-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 50% 52%, rgb(255 168 70 / 0.34), rgb(255 140 50 / 0.1) 55%, transparent 80%);
  pointer-events: none;
  z-index: -1;
}
.stage { height: min(60vh, 520px); min-height: 360px; touch-action: pan-y; cursor: grab; }
.stage:active { cursor: grabbing; }
.stage canvas { display: block; }
.stage.is-flat { display: grid; place-items: center; height: auto; min-height: 0; padding: 32px 16px 40px; }
.flat-panel { width: 100%; max-width: 560px; height: auto; border-radius: 18px; box-shadow: 0 0 60px rgb(255 160 60 / 0.35); }
.stage-hint { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-size: 15px; font-weight: 600; color: var(--on-dark-soft); pointer-events: none; }
.is-flat + .stage-hint { display: none; }

/* ---------- the maker card ---------- */
.maker { position: relative; padding: 28px 20px 24px; }
.big-name {
  font: 700 clamp(44px, 14vw, 84px)/1 'Lora Print', Georgia, serif;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  color: var(--berry);
}
.big-name.is-sample { color: #8a7f79; }
.lede { margin-top: 10px; font-size: 17px; max-width: 36ch; color: var(--ink-soft); }
.banner { margin-top: 14px; padding: 12px 16px; border-radius: 14px; background: var(--green); color: var(--on-dark); font-weight: 700; }
.banner[hidden] { display: none; }

.group { border: 0; margin: 28px 0 0; padding: 0; min-width: 0; }
legend, .label { display: block; font-weight: 700; font-size: 17px; margin: 0 0 10px; padding: 0; }
.label + .field { margin-bottom: 4px; }
.group .label:not(:first-child) { margin-top: 18px; }
.opt { font-weight: 500; color: var(--ink-soft); }

.pets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pet {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 0 0 8px;
  border: 0;
  border-radius: 18px;
  background: var(--cream);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  transition: box-shadow 150ms ease-out, transform 150ms ease-out;
}
.pet img { width: 100%; height: auto; aspect-ratio: 1; display: block; }
.pet[aria-pressed='true'] { box-shadow: inset 0 0 0 3px var(--green); background: rgb(29 77 58 / 0.1); }
.pet:active { transform: scale(0.97); }

.field {
  width: 100%;
  min-height: 54px;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--radius-btn);
  background: #fff;
  box-shadow: inset 0 0 0 1.5px rgb(34 28 25 / 0.3);
  font: 600 18px/1.3 var(--sans);
  color: var(--ink);
}
.field::placeholder { color: #6f6661; }
.field-name { font: 700 24px/1.2 'Lora Print', Georgia, serif; }
.field:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.field[aria-invalid='true'] { box-shadow: inset 0 0 0 2px var(--red); }
.msg { margin-top: 6px; font-size: 16px; font-weight: 600; color: var(--red); }
.msg[hidden] { display: none; }
.hint { margin-top: 6px; font-size: 15px; color: var(--ink-soft); }
.hint:empty { display: none; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.chip, .top-pick, .btn-quiet {
  min-height: 44px;
  padding: 8px 16px;
  border: 0;
  border-radius: 22px;
  background: var(--cream);
  box-shadow: inset 0 0 0 1px rgb(34 28 25 / 0.22);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}
.chip[aria-pressed='true'], .top-pick[aria-pressed='true'] { background: var(--green); color: var(--on-dark); box-shadow: none; }
[data-custom-wrap] { margin-top: 12px; }
[data-custom-wrap][hidden] { display: none; }
.field-line { font: italic 700 20px/1.3 'Lora Print', Georgia, serif; }

.tops { display: flex; gap: 8px; }
.top-pick { flex: 1; min-height: 52px; border-radius: var(--radius-btn); }
.swatches { display: flex; gap: 12px; margin-top: 14px; }
.swatch { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgb(34 28 25 / 0.3); position: relative; }
.swatch span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.swatch[aria-pressed='true'] { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--green); }
.swatch:focus-visible { border-radius: 50%; outline-offset: 6px; }
.sw-white { background: #f1ece2; }
.sw-gold { background: linear-gradient(135deg, #e6c779, #a7802e); }
.sw-red { background: #8c1d2b; }
.sw-silver { background: linear-gradient(135deg, #e3e6ea, #9aa0a8); }

.facts { margin: 28px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; display: grid; gap: 8px; font-size: 16px; color: var(--ink-soft); }
.facts li { padding-left: 18px; position: relative; }
.facts li::before { content: ''; position: absolute; left: 2px; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--brass); }

/* ---------- buy bar, above the keyboard and the gesture bar ---------- */
.buy {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 18px;
  border-radius: 22px;
  max-width: 560px;
  margin: 0 auto;
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 36px -12px rgb(34 28 25 / 0.35);
}
.price { font-weight: 750; font-size: 20px; letter-spacing: -0.01em; color: var(--berry); font-variant-numeric: lining-nums; }
.price[hidden] { display: none; }
.buy-info { flex: 1; min-width: 0; display: grid; }
.buy-note { font-size: 14px; color: var(--ink-soft); line-height: 1.25; }
.buy-note:empty { display: none; }
.buy .btn { white-space: nowrap; }
.btn {
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius-btn);
  background: var(--brass);
  color: var(--ink);
  font: 700 17px/1.1 var(--sans);
  cursor: pointer;
  box-shadow: 0 2px 0 rgb(34 28 25 / 0.22);
  transition: background-color 150ms ease-out, transform 150ms ease-out;
}
.btn:hover:not(:disabled) { background: var(--brass-hover); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { background: #e6dccb; color: var(--ink-soft); box-shadow: none; cursor: default; }
.btn-quiet { min-height: 52px; padding: 0 20px; border-radius: var(--radius-btn); font-weight: 700; }

/* ---------- confirm ---------- */
.confirm {
  width: min(560px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100dvh - 32px);
  border: 0;
  border-radius: var(--radius-card);
  padding: 24px 20px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--glass-shadow);
}
.confirm::backdrop { background: rgb(15 33 25 / 0.66); }
.confirm h2 { font: 700 26px/1.15 var(--display); letter-spacing: -0.02em; color: var(--berry); }
.confirm-pic { display: block; width: 100%; height: auto; margin: 14px 0; border-radius: 16px; background: var(--scene); }
.summary { margin: 0; display: grid; gap: 6px; }
.summary div { display: flex; gap: 12px; }
.summary dt { width: 64px; flex: none; color: var(--ink-soft); }
.summary dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.confirm-price { margin-top: 12px; font-weight: 750; font-size: 19px; color: var(--berry); }
.tick { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; font-size: 16px; }
.tick input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--green); }
.confirm .msg:empty { display: none; }
.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* ---------- footer: the deepest green, with room under it for the buy bar ---------- */
.foot {
  margin-top: 48px;
  padding: 32px var(--gutter) calc(32px + var(--buy-room));
  background: var(--green-deep);
  color: var(--on-dark-soft);
  font-size: 15px;
}
.foot p { max-width: 1160px; margin: 0 auto; }
.foot p + p { margin-top: 6px; }
.foot a { color: var(--on-dark); display: inline-block; padding: 10px 0; }
.foot :focus-visible { outline-color: var(--on-dark); }

@media (min-width: 880px) {
  main { grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: start; padding-top: 8px; }
  .stage-wrap { position: sticky; top: 16px; }
  .stage { height: calc(100vh - 32px); max-height: 760px; }
  .maker { padding: 36px 32px 32px; }
  /* the buy bar sits under the maker card's column, not across the lantern */
  .buy { left: auto; right: max(var(--gutter), calc((100vw - 1160px) / 2)); width: min(526px, calc((100vw - 2 * var(--gutter) - 28px) / 2.15)); margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .pet { transition: none; }
}

/* thanks / cancelled */
.plain main { max-width: 672px; display: block; padding-bottom: 48px; }
.note-card { margin-top: 16px; }
.note-card .lede { margin-top: 14px; }
.note-card .big-name + .lede { margin-top: 18px; }
.note-card a { font-weight: 700; color: var(--green); }