/* Fieldnote Skin — skin check. Direction: "the page is the object" (a printed field note on a walnut ground).
   Palette "Walnut and tan" (two inks, like a two-colour print job), type Bricolage Grotesque, square corners. */
:root {
  --bg: #2b2216;        /* walnut ground */
  --surface: #382d1e;
  --ink: #e4e2da;       /* bone: text on walnut, and the paper colour */
  --muted: #b3aa9b;
  --accent: #bda38b;    /* tan: the one button on walnut */
  --accent-ink: #2b2216;
  --paper: #e4e2da;
  --paper-ink: #2b2216;
  --paper-muted: #5e5243;
  --paper-2: #d8d3c7;   /* one tone step on paper */
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(2.5rem, 1.2rem + 3.6vw, 3.5rem);
  --m: 12px;            /* the one outer margin and gap */
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* the label stripe: 28px walnut bars on paper, 56px tall */
  --stripe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Crect width='28' height='56' fill='%232b2216'/%3E%3C/svg%3E");
  --zigzag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M0 0 H16 L8 10 Z' fill='%23e4e2da'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--step-body)/1.5 "Bricolage Grotesque", system-ui, sans-serif; font-optical-sizing: auto; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.04em; line-height: 0.95; margin: 0; }
img, svg { display: block; }
.small { font-size: var(--step-small); line-height: 1.45; color: var(--muted); margin: 0; }
.lede { font-size: var(--step-lead); line-height: 1.35; margin: 0; }
.card .small { color: var(--paper-muted); }
.note { font-size: var(--step-body); line-height: 1.5; margin: 0; color: var(--paper-ink); max-width: 46ch; }
[hidden] { display: none !important; }

/* ---- top bar ---- */
.top { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; }
.wordmark { color: var(--ink); text-decoration: none; display: flex; align-items: baseline; gap: 10px; }
.logo { font-weight: 600; font-size: 1.5rem; letter-spacing: -0.04em; }
.logo-sub { color: var(--muted); font-size: var(--step-small); }
.bag-btn { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border: 0; background: var(--surface); color: var(--ink); font: 500 var(--step-small) "Bricolage Grotesque", sans-serif; cursor: pointer; transition: background .15s ease; }
.bag-btn:hover { background: #45382a; }
.bag-btn b { display: inline-grid; place-items: center; min-width: 24px; height: 24px; background: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* ---- shared paper ---- */
.card { background: var(--paper); color: var(--paper-ink); position: relative; }
.stripe { height: 56px; background: var(--stripe) repeat-x left top; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border: 0; font: 600 var(--step-body) "Bricolage Grotesque", sans-serif; letter-spacing: -0.01em; cursor: pointer; text-decoration: none; transition: transform .12s ease, background .15s ease, color .15s ease; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .scores button:focus-visible, .slip-total:focus-visible, .bag-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.card .btn.primary { background: var(--paper-ink); color: var(--paper); }
.card .btn.primary:hover { background: #4a3b27; }
.card .btn.ghost { background: var(--paper-2); color: var(--paper-ink); }
.card .btn.ghost:hover { background: #cbc4b5; }
.btn.wide { width: 100%; }

/* ---- 1. intro: printed card beside the plate (50/50, 12px gaps) ---- */
.intro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--m); padding: 0 var(--m) var(--m); min-height: calc(100svh - 76px); }
.intro .card { display: flex; flex-direction: column; }
.card-body { padding: clamp(28px, 4vw, 64px); display: flex; flex-direction: column; gap: 22px; flex: 1; justify-content: center; }
.card-brand { margin: 0; font-weight: 600; font-size: var(--step-lead); letter-spacing: -0.03em; }
.intro h1 { font-size: clamp(3rem, 1.4rem + 4.4vw, 5.75rem); max-width: 10ch; text-wrap: balance; }
.intro .lede { max-width: 36ch; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.tips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--step-body); color: var(--paper-ink); }
.tips li::before { content: "·"; margin-right: 8px; color: var(--paper-ink); }
.plates { margin: 0; position: relative; overflow: hidden; background: var(--paper); min-height: 420px; order: 2; }
.plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: 0; transition: opacity 1.6s ease; }
.plate.is-on { opacity: 1; }
.plates.static .plate { transition: none; }
.error { color: #8a2a17; font-weight: 500; margin: 0; }

/* ---- 2. reading ---- */
.wait { padding: var(--m); min-height: calc(100svh - 76px); display: grid; place-items: center; }
.wait-card { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 40px; align-items: center; padding: 40px; width: min(880px, 100%); }
.wait-card h2 { font-size: var(--step-head); margin-bottom: 14px; }
.scan { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--paper-2); }
.scan img { width: 100%; height: 100%; object-fit: cover; }
.beam { position: absolute; left: 0; right: 0; height: 22%; background: rgba(228, 226, 218, .45); mix-blend-mode: screen; animation: sweep 2.2s var(--ease) infinite; }
@keyframes sweep { 0% { transform: translateY(-100%); } 100% { transform: translateY(460%); } }

/* ---- 3. the field note ---- */
.report { padding: 0 var(--m) 48px; }
.sheet { max-width: 1240px; margin: 0 auto; }
.sheet-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; padding: 36px clamp(20px, 3.5vw, 48px) 28px; }
.sheet-head h2 { font-size: var(--step-head); max-width: 15ch; margin-top: 10px; }
.score { display: grid; justify-items: end; text-align: right; gap: 6px; max-width: 280px; }
.score b { font-size: clamp(4.5rem, 3rem + 5vw, 7.5rem); font-weight: 600; letter-spacing: -0.05em; line-height: .85; font-variant-numeric: tabular-nums; }
.sheet-grid { display: grid; grid-template-columns: minmax(280px, 5fr) 7fr; gap: clamp(20px, 3vw, 48px); padding: 0 clamp(20px, 3.5vw, 48px) 40px; align-items: start; }
.photo { position: relative; margin: 0; aspect-ratio: 4/5; overflow: hidden; background: var(--paper-2); }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo img:first-child { transition: filter .3s ease; }
.photo.dim img:first-child { filter: brightness(.86) saturate(.85); }
.photo figcaption { position: absolute; left: 12px; bottom: 12px; z-index: 1; font-size: var(--step-small); font-weight: 500; background: var(--paper); color: var(--paper-ink); padding: 6px 12px; }
.photo figcaption:empty { display: none; }
/* YouCam detections, shown as-is, recoloured into the walnut ink so they read as part of the print */
.photo .mask { animation: reveal .45s var(--ease) both; }
@keyframes reveal { from { opacity: 0; } }
.photo .m-sheen, .photo .m-tint, .photo .m-map { mix-blend-mode: multiply; filter: grayscale(1) brightness(.7) sepia(1) saturate(2.4) hue-rotate(-12deg) blur(5px); opacity: .68; }
.photo .m-map { opacity: .36; }
.photo .m-glow {  filter: grayscale(1) brightness(3) sepia(.5) blur(2px) drop-shadow(0 0 4px rgba(189, 163, 139, .95)); opacity: .6; } /* taste-skill-ignore: glow keeps YouCam's detection marks readable on skin (a data overlay) */
.photo .m-mark {  filter: grayscale(1) brightness(3) sepia(.45) drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px rgba(189, 163, 139, .95)); opacity: 1; } /* taste-skill-ignore: same reason */

.observations h3 { font-size: var(--step-lead); letter-spacing: -0.03em; margin-bottom: 10px; }
.scores { list-style: none; margin: 0 0 14px; padding: 0; }
.scores button { width: 100%; display: grid; grid-template-columns: auto 1fr auto auto; align-items: baseline; gap: 10px; padding: 11px 10px; border: 0; background: transparent; color: var(--paper-ink); font: 400 var(--step-body) "Bricolage Grotesque", sans-serif; text-align: left; cursor: pointer; transition: background .15s ease, color .15s ease; }
.scores button:hover { background: var(--paper-2); }
.scores button:disabled { cursor: default; }
.scores .lead { border-bottom: 4px dotted rgba(43, 34, 22, .35); transform: translateY(-5px); }
.scores b { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.scores em { font-style: normal; font-size: var(--step-small); color: var(--paper-muted); min-width: 4.6em; text-align: right; }
.scores li.focus span { font-weight: 600; }
.scores li.focus em { color: var(--paper-ink); font-weight: 600; }
.scores li.active button { background: var(--paper-ink); color: var(--paper); }
.scores li.active em { color: var(--paper); }
.scores li.active .lead { border-color: rgba(228, 226, 218, .45); }

/* ---- the routine: a printed slip beside the shelf ---- */
.routine-wrap { max-width: 1240px; margin: 72px auto 0; display: grid; grid-template-columns: 1fr minmax(320px, 480px); gap: clamp(24px, 5vw, 88px); align-items: start; }
.routine-intro { position: sticky; top: 24px; }
.routine-intro h2 { font-size: var(--step-head); margin-bottom: 16px; }
.routine-intro .lede { max-width: 30ch; color: var(--ink); }
.shelf { display: flex; align-items: end; gap: 6px; margin-top: 40px; padding: 0 12px; min-height: 220px; border-bottom: 10px solid var(--accent); }
.shelf .pack, .shelf img { width: clamp(80px, 10vw, 136px); height: auto; }
.shelf img { aspect-ratio: 3/4; object-fit: contain; background: var(--paper); }
#missing { margin-top: 14px; }
.slip { background: var(--paper); color: var(--paper-ink); padding: 28px 28px 0; position: relative; margin-bottom: 10px; }
.slip::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: var(--zigzag) repeat-x; }
.slip h3 { font-size: var(--step-body); letter-spacing: -0.01em; margin: 6px 0 8px; }
.slip h3 + ol + h3 { margin-top: 28px; }
.slip ol { list-style: none; margin: 0; padding: 0; }
.slip li { display: grid; grid-template-columns: 44px auto 1fr auto; gap: 4px 12px; align-items: baseline; padding: 8px 0; }
.slip li .thumb { grid-row: span 2; align-self: start; }
.slip li .thumb svg, .slip li .thumb img { width: 44px; height: auto; }
.slip li .thumb img { aspect-ratio: 3/4; object-fit: contain; }
.slip li .name { font-weight: 600; font-size: var(--step-body); }
.slip li .lead { border-bottom: 4px dotted rgba(43, 34, 22, .35); transform: translateY(-5px); }
.slip li .price { font-variant-numeric: tabular-nums; font-weight: 600; }
.slip li .why { grid-column: 2 / -1; font-size: var(--step-small); color: var(--paper-muted); }
.slip-total { display: flex; justify-content: space-between; align-items: center; width: calc(100% + 56px); margin: 24px -28px 0; min-height: 56px; padding: 0 28px; border: 0; background: var(--paper-ink); color: var(--paper); font: 600 var(--step-body) "Bricolage Grotesque", sans-serif; cursor: pointer; transition: background .15s ease; }
.slip-total:hover { background: #4a3b27; }
.slip-total strong { font-variant-numeric: tabular-nums; margin-left: 8px; }
.restart { display: flex; margin: 56px auto 0; background: var(--surface); color: var(--ink); }
.restart:hover { background: #45382a; }

/* ---- bag ---- */
.drawer { position: fixed; inset: 0; background: rgba(20, 15, 9, .6); display: flex; justify-content: flex-end; z-index: 10; }
.drawer-in { width: min(420px, 100%); height: 100%; overflow: auto; }
.drawer-body { padding: 28px; display: grid; gap: 14px; }
.drawer-body h3 { font-size: var(--step-lead); }
#bagList { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
#bagList li { display: grid; grid-template-columns: 36px 1fr auto 32px; gap: 12px; align-items: center; }
#bagList svg, #bagList img { width: 36px; height: auto; }
#bagList button { border: 0; background: none; font-size: 22px; color: var(--paper-muted); cursor: pointer; }
.total { display: flex; justify-content: space-between; margin: 6px 0 0; padding-top: 12px; border-top: 4px dotted rgba(43, 34, 22, .35); font-size: var(--step-lead); }

/* ---- merchant page (same print system) ---- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.m-intro h1 { font-size: clamp(2.75rem, 1.4rem + 3.8vw, 5rem); max-width: 11ch; text-wrap: balance; }
.m-intro .plates { background: #fff; }
.m-intro .plate { object-fit: contain; padding: 6%; }
.store-form { display: grid; gap: 12px; max-width: 560px; }
.store-form input { min-height: 56px; padding: 0 18px; border: 0; background: #fff; color: var(--paper-ink); font: 500 var(--step-lead) "Bricolage Grotesque", sans-serif; }
.store-form input:focus-visible { outline: 3px solid var(--paper-ink); outline-offset: 2px; }
.summary { display: flex; flex-wrap: wrap; gap: 8px; justify-content: end; }
.summary span { background: var(--paper-2); padding: 8px 12px; font-size: var(--step-small); }
.summary .gap { background: var(--paper-ink); color: var(--paper); }
.table-wrap { overflow-x: auto; padding: 0 clamp(20px, 3.5vw, 48px); }
.merchant table { border-collapse: collapse; width: 100%; min-width: 680px; font-size: var(--step-small); }
.merchant th, .merchant td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--paper-2); vertical-align: top; }
.merchant th { font-weight: 500; color: var(--paper-muted); }
.merchant td strong { font-size: var(--step-body); font-weight: 600; }
.merchant td small { color: var(--paper-muted); font-size: var(--step-small); }
.merchant td select { font: 500 var(--step-small) "Bricolage Grotesque", sans-serif; padding: 6px 8px; border: 0; background: var(--paper-2); color: var(--paper-ink); }
.merchant td input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--paper-ink); }
.chip { display: inline-block; margin: 2px 6px 4px 0; padding: 4px 8px; background: var(--paper-2); }
.chip b { font-weight: 600; }
.none { color: var(--paper-muted); font-style: italic; }
.merchant tr[data-off="true"] td { opacity: .45; }
.sheet-foot { padding: 18px clamp(20px, 3.5vw, 48px) 36px; max-width: 80ch; }
.golive h3 { font-size: var(--step-body); }
.embed { margin: 12px 0 0; padding: 16px; background: #fff; color: var(--paper-ink); font: 13px/1.6 ui-monospace, Consolas, monospace; white-space: pre-wrap; word-break: break-all; }
a.slip-total { text-decoration: none; }

/* ---- footer ---- */
.foot { max-width: 1240px; margin: 72px auto 0; padding: 0 24px 32px; display: grid; gap: 8px; }
.foot p { max-width: 62ch; }
.foot p { margin: 0; font-size: var(--step-body); color: var(--muted); }

/* ---- entrances (content never depends on them) ---- */
.intro .card-body > *, .intro .stripe { animation: rise .7s var(--ease) both; }
.intro .stripe { animation-name: wipe; }
.intro .card-body > :nth-child(2) { animation-delay: 70ms; }
.intro .card-body > :nth-child(3) { animation-delay: 140ms; }
.intro .card-body > :nth-child(4) { animation-delay: 210ms; }
.intro .card-body > :nth-child(5) { animation-delay: 280ms; }
.intro .card-body > :nth-child(6) { animation-delay: 350ms; }
.intro .plate.is-on { animation: settle 2.4s var(--ease) both; }
@keyframes wipe { from { transform: scaleX(.2); transform-origin: left; opacity: 0; } }
@keyframes settle { from { transform: scale(1.06); } }
.rise { animation: rise .6s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }

/* ---- phone ---- */
@media (max-width: 860px) {
  .top { padding: 12px 16px; }
  .intro { grid-template-columns: 1fr; padding: 0 var(--m) var(--m); gap: 0; }
  .plates { order: -1; min-height: 0; height: 40svh; }
  .intro .card { margin: -24px 12px 0; }
  .card-body { text-align: left; }
  .stripe { height: 40px; background-size: 40px 40px; }
  .wait-card { grid-template-columns: 1fr; padding: 24px; gap: 20px; }
  .scan { max-width: 260px; }
  .sheet-head { flex-direction: column; align-items: start; gap: 16px; padding: 24px 20px; }
  .score { justify-items: start; text-align: left; }
  .sheet-grid { grid-template-columns: 1fr; padding: 0 20px 24px; }
  .routine-wrap { grid-template-columns: 1fr; margin-top: 48px; }
  .routine-intro { position: static; }
  .shelf { margin-top: 28px; overflow-x: auto; min-height: 0; }
  .slip { padding: 22px 20px 0; }
  .slip-total { width: calc(100% + 40px); margin: 20px -20px 0; padding: 0 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .plate { transition: none; }
  .beam { animation: none; transform: translateY(150%); }
  .rise, .photo .mask, .intro .card-body > *, .intro .stripe, .intro .plate.is-on { animation: none; }
}