/* Cellpostal commits to a single "warm paper" world on purpose: the product
   simulates paper, so it paints its own ground in either host theme rather
   than following the viewer's dark mode. Every colour is explicit. */
:root {
  --paper: #faf6ef;
  --paper-deep: #f2ebdf;
  --card: #ffffff;
  --ink: #1a1512;
  --ink-soft: #6b6259;
  --ink-faint: #a39a8e;
  --rule: #e6ddcd;
  --accent: #2c3e63;
  --accent-ink: #1d2b47;
  --accent-soft: #eaeff7;
  --stamp: #b4462f;
  --good: #2f6b4f;
  --good-soft: #e6f1ea;
  --warn: #8a6a1f;
  --warn-soft: #fbf1d9;

  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100dvh;
}

img { max-width: 100%; }

input, textarea, select, button { font-family: inherit; font-size: 16px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 11rem;
}
@media (min-width: 640px) { .wrap { padding-left: 2rem; padding-right: 2rem; } }

/* ---- header ---- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand {
  font-family: var(--serif);
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stamp);
}
.pill {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.25rem 0.625rem;
  white-space: nowrap;
}

/* ---- stepper ---- */
.stepper { display: flex; gap: 0.5rem; margin-top: 1.5rem; }
.stepper button {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.stepper button:disabled { cursor: default; }
.stepper .tick { height: 4px; border-radius: 999px; background: var(--rule); transition: background 160ms; }
.stepper .tick.on { background: var(--accent); }
.stepper .lbl { font-size: 0.75rem; font-weight: 500; color: var(--ink-faint); }
.stepper .lbl.cur { color: var(--accent); }
.stepper .lbl.done { color: var(--ink-soft); }

/* ---- typography ---- */
h1 { font-family: var(--serif); font-size: 1.875rem; line-height: 1.1; margin: 2rem 0 0; text-wrap: balance; font-weight: 400; }
@media (min-width: 640px) { h1 { font-size: 2.25rem; } }
.lede { color: var(--ink-soft); margin: 0.5rem 0 0; }

.stack { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.5rem; }
label, .lab { display: block; font-size: 0.875rem; font-weight: 500; color: var(--ink-soft); margin-bottom: 0.375rem; }
.hint { font-size: 0.875rem; color: var(--ink-faint); margin: 0.375rem 0 0; }

.field {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 0.75rem;
  background: var(--card);
  padding: 0.875rem 1rem;
  color: var(--ink);
  transition: border-color 120ms, box-shadow 120ms;
}
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field::placeholder { color: var(--ink-faint); }
.field.bad { border-color: var(--stamp); }
textarea.field { resize: none; font-family: var(--serif); font-size: 1.0625rem; line-height: 1.75; min-height: 15rem; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.row .full { grid-column: 1 / -1; }
@media (min-width: 640px) { .row { grid-template-columns: 2fr 1fr 1fr; } .row .full { grid-column: auto; } }

/* ---- choice cards ---- */
.choices { display: flex; flex-direction: column; gap: 0.625rem; }
.choice {
  width: 100%;
  text-align: left;
  border: 1px solid var(--rule);
  background: var(--card);
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  cursor: pointer;
  transition: border-color 140ms, background 140ms;
}
.choice:hover { border-color: var(--accent); }
.choice[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.choice .ch-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.choice .ch-name { font-weight: 500; color: var(--ink); }
.choice .ch-price { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.choice .ch-spec { display: block; font-size: 0.75rem; color: var(--ink-faint); margin-top: 0.125rem; }
.choice .ch-blurb { display: block; font-size: 0.875rem; color: var(--ink-soft); margin-top: 0.25rem; }
.choice .ch-why { display: block; font-size: 0.75rem; color: var(--accent-ink); margin-top: 0.25rem; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: border-color 140ms, background 140ms, color 140ms;
}
.chip:hover { border-color: var(--accent); }
.chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #fff; }

/* ---- signature ----
   Signing happens in a full-screen sheet, never inline. An inline canvas on
   a phone is unusable: dragging a finger across it scrolls the page
   underneath, so you end up pinning the page with one hand and signing with
   the other. The sheet covers the viewport and locks scrolling. */
.sigslot {
  width: 100%; height: 8rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  border: 2px dashed var(--rule); border-radius: 1rem; background: var(--card);
  color: var(--ink-soft); cursor: pointer;
  transition: border-color 140ms, color 140ms;
}
.sigslot:hover { border-color: var(--accent); color: var(--accent); }
.sigslot .big { font-weight: 500; }
.sigslot .small { font-size: 0.875rem; color: var(--ink-faint); }

.sigdone { border: 1px solid var(--rule); border-radius: 1rem; background: var(--card); padding: 1rem; }
.sigdone img { display: block; margin: 0 auto; height: 5rem; width: auto; max-width: 100%; object-fit: contain; }
.sigdone .acts { display: flex; justify-content: center; gap: 1rem; border-top: 1px solid var(--rule); margin-top: 0.75rem; padding-top: 0.75rem; }

.linkbtn { background: none; border: 0; padding: 0; font-size: 0.875rem; font-weight: 500; color: var(--ink-soft); cursor: pointer; text-underline-offset: 4px; }
.linkbtn:hover:not(:disabled) { text-decoration: underline; }
.linkbtn:disabled { opacity: 0.4; cursor: default; }
.linkbtn.accent { color: var(--accent); }

.sheetover {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  background: var(--paper);
  touch-action: none;
  overscroll-behavior: none;
}
.sheetover .head, .sheetover .foot2 {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--rule);
}
.sheetover .foot2 { border-bottom: 0; border-top: 1px solid var(--rule); flex-direction: column; gap: 0.75rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
.sheetover .pens { display: flex; justify-content: center; gap: 0.5rem; }
.sheetover .penbtn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--rule); background: var(--card); color: var(--ink-soft);
  border-radius: 999px; padding: 0.5rem 1rem; font-size: 0.875rem; cursor: pointer;
  transition: border-color 140ms, background 140ms, color 140ms;
}
.sheetover .penbtn:hover { border-color: var(--accent); }
.sheetover .penbtn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.sheetover .pendot { display: block; border-radius: 999px; background: currentColor; flex: none; }
.sheetover .sigtools { display: flex; justify-content: center; gap: 1.5rem; }
.sheetover .title { font-family: var(--serif); font-size: 1.125rem; }
.sheetover .act { background: none; border: 0; padding: 0; font-size: 1rem; font-weight: 500; color: var(--ink-soft); cursor: pointer; }
.sheetover .act.go { color: var(--accent); font-weight: 600; }
.sheetover .act:disabled { opacity: 0.35; cursor: default; }
.sheetover .area { position: relative; flex: 1; background: var(--card); }
.sheetover canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.sheetover .guide { position: absolute; left: 2rem; right: 2rem; bottom: 28%; border-bottom: 1px dashed var(--rule); pointer-events: none; }
.sheetover .ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.375rem; pointer-events: none; color: var(--ink-faint); }
.sheetover .ph .sm { font-size: 0.875rem; }
@media (orientation: landscape) { .sheetover .ph .sm { display: none; } }

/* ---- meters & notices ---- */
.metarow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.75rem; }
.meter { display: flex; align-items: center; gap: 0.625rem; }
.track { width: 4rem; height: 6px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width 200ms, background 200ms; }
.fill.warn { background: var(--warn); }
.fill.over { background: var(--stamp); }
.metertxt { font-size: 0.875rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.metertxt.over { color: var(--stamp); font-weight: 500; }

.mic {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--rule); background: var(--card); color: var(--ink);
  border-radius: 999px; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; cursor: pointer;
  transition: border-color 140ms, background 140ms, color 140ms;
}
.mic:hover { border-color: var(--accent); }
.mic[aria-pressed="true"] { background: var(--stamp); border-color: var(--stamp); color: #fff; }

.notice { border: 1px solid; border-radius: 0.75rem; padding: 0.75rem 1rem; font-size: 0.875rem; margin-top: 0.75rem; }
.notice.good { border-color: rgba(47, 107, 79, 0.25); background: var(--good-soft); color: var(--good); }
.notice.warn { border-color: rgba(138, 106, 31, 0.25); background: var(--warn-soft); color: var(--warn); }
.notice.bad  { border-color: rgba(180, 70, 47, 0.25); background: rgba(180, 70, 47, 0.08); color: var(--stamp); }
.notice.info { border-color: rgba(44, 62, 99, 0.2); background: var(--accent-soft); color: var(--accent-ink); }
.notice button { display: block; margin-top: 0.5rem; background: none; border: 0; padding: 0; font: inherit; font-weight: 500; color: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; text-align: left; }
.notice .glyphs { font-family: var(--serif); font-size: 1rem; }

/* ---- the printed piece ---- */
.sheetbox {
  border: 1px solid var(--rule);
  border-radius: 0.75rem;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 18px 40px -24px rgba(26, 21, 18, 0.45);
}
.sheet { transform-origin: top left; background: #fff; color: #14110f; font-family: var(--serif); position: relative; }
.sheet p { margin: 0 0 var(--pgap) 0; orphans: 2; widows: 2; }
.sheet .sig { display: block; object-fit: contain; object-position: left center; }
.sheet .who { color: #57534e; }

/* The back face of a card carries the code centred, caption under it. The
   code carries its own white quiet zone, so a scanner reads it against the
   paper.

   The code prints dark grey and the caption light grey. That split is
   deliberate: a light grey code loses the contrast a scanner needs off paper.
   Both colours come from qrart.js, which the print renderer reads too. */
.sheet .backface { display: flex; align-items: center; justify-content: center; }
.sheet .qrblock .qrimg { background: #fff; display: block; margin: 0 auto; }
.sheet .qrblock .qrimg svg { display: block; width: 100%; height: 100%; }
.sheet .qrblock .qrcap { text-align: center; color: #9A9A9A; }
/* Truncation already fits each line, so stop the browser wrapping one. */
.sheet .qrblock .qrcap span { display: block; white-space: nowrap; }

/* Names the face under each preview sheet, so front and back read apart. */
.facelabel {
  margin: 0.5rem 0 1rem;
  text-align: center;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* A letter carries no code. It prints the brand address as one quiet line at
   the foot of its last page instead. */
.sheet .brandfoot {
  position: absolute; left: 0; right: 0;
  text-align: center; color: #9A9A9A;
}

/* ---- summary ---- */
.summary { border: 1px solid var(--rule); background: var(--paper-deep); border-radius: 0.75rem; padding: 1.25rem; margin-top: 1.5rem; font-size: 0.875rem; display: flex; flex-direction: column; gap: 0.5rem; }
.sline { display: flex; justify-content: space-between; gap: 1rem; }
.sline dt { color: var(--ink-soft); margin: 0; }
.sline dd { margin: 0; text-align: right; font-weight: 500; }
.sline .sub { display: block; font-size: 0.75rem; font-weight: 400; color: var(--ink-faint); }
.sline.total { border-top: 1px solid var(--rule); padding-top: 0.5rem; }
.sline.total dd { font-size: 1rem; font-weight: 600; }

/* ---- timeline ---- */
.tl { list-style: none; margin: 2rem 0 0; padding: 0; }
.tl li { display: flex; gap: 1rem; }
.tl .gut { display: flex; flex-direction: column; align-items: center; }
.tl .dot { margin-top: 6px; width: 10px; height: 10px; border-radius: 999px; background: var(--accent); flex: none; }
.tl .dot.off { background: var(--paper); border: 1px solid var(--rule); }
.tl .line { width: 1px; flex: 1; background: var(--rule); }
.tl .line.on { background: rgba(44, 62, 99, 0.35); }
.tl .body { padding-bottom: 1.75rem; }
.tl .body.off { opacity: 0.45; }
.tl .t { font-weight: 500; margin: 0; }
.tl .when { font-size: 0.875rem; color: var(--ink-faint); margin: 2px 0 0; }

/* ---- bottom bar ---- */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  border-top: 1px solid var(--rule);
  background: rgba(250, 246, 239, 0.96);
  backdrop-filter: blur(8px);
}
.barin { max-width: 40rem; margin: 0 auto; display: flex; gap: 0.75rem; padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); }
@media (min-width: 640px) { .barin { padding-left: 2rem; padding-right: 2rem; } }
.btn { border-radius: 999px; padding: 0.875rem 1.5rem; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: background 140ms, border-color 140ms, opacity 140ms; }
.btn.primary { flex: 1; background: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--accent-ink); }
.btn.primary:disabled { opacity: 0.35; cursor: not-allowed; }
.btn.ghost { background: var(--card); border-color: var(--rule); color: var(--ink-soft); }
.btn.ghost:hover { border-color: var(--accent); }

.rise { animation: rise 260ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.foot { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); font-size: 0.875rem; color: var(--ink-faint); }
.foot strong { color: var(--ink-soft); font-weight: 500; }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; }
  * { transition-duration: 0.01ms !important; }
}