/* ─────────────────────────────────────────────
   ACE DNTL STUDIO · NEW PATIENT INTAKE
   iPad-first · PORTRAIT ONLY · Helvetica Neue · ink / paper / blush
   ───────────────────────────────────────────── */

/* ───── ROTATE-TO-PORTRAIT OVERLAY ─────
   Shown whenever the device is in landscape orientation.
   The PWA manifest also locks orientation to "portrait" when installed as Home Screen app,
   so this overlay only kicks in for the rare case of viewing in mobile Safari sideways. */
.rotate-prompt {
  display: none;
  position: fixed; inset: 0;
  z-index: 9999;
  background: var(--paper);
  align-items: center; justify-content: center;
  padding: 32px;
}
/* Show prompt whenever the viewport is wider than tall AND below 1400px wide
   (catches every iPad orientation; desktop browsers wider than 1400px keep working) */
@media (orientation: landscape) and (max-width: 1400px) {
  .rotate-prompt { display: flex; }
  body > *:not(.rotate-prompt) { display: none !important; }
}
.rotate-prompt-plate {
  max-width: 380px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.rotate-icon {
  width: 80px; height: 80px;
  color: var(--ink);
  animation: rotateHint 2.6s ease-in-out infinite;
}
@keyframes rotateHint {
  0%, 60%, 100% { transform: rotate(-90deg); opacity: .9; }
  30%           { transform: rotate(0deg);   opacity: 1; }
}
.rotate-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -.008em;
  color: var(--ink);
  margin: 6px 0 0;
}
.rotate-sub {
  font-size: 14px;
  color: var(--ink-60);
  line-height: 1.55;
  margin: 0;
}


:root {
  --ink: #0A0A0A;
  --ink-80: rgba(10,10,10,.82);
  --ink-60: rgba(10,10,10,.6);
  --ink-40: rgba(10,10,10,.4);
  --ink-15: rgba(10,10,10,.15);
  --ink-08: rgba(10,10,10,.08);
  --paper: #FAF7F2;
  --paper-warm: #F2ECE3;
  --blush: #E6C9C1;
  --blush-soft: #F4E0D9;
  --blush-deep: #C8A097;
  --accent: #0A0A0A;
  --ok: #4A6A4A;
  --ok-soft: #E6F0E2;
  --ok-soft-2: #D2E5C8;
  --ok-deep: #2F4A2F;
  --alert: #8B3A2F;
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-lift: 0 24px 60px -28px rgba(10,10,10,.22), 0 8px 24px -14px rgba(10,10,10,.14);
  --font: "Helvetica Neue", Helvetica, Arial, "SF Pro Display", sans-serif;
  --font-serif: "Didot", "Bodoni Moda", "Playfair Display", Georgia, serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overscroll-behavior: none;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(230,201,193,.35), transparent 60%),
    radial-gradient(1000px 700px at -10% 110%, rgba(230,201,193,.18), transparent 55%),
    var(--paper);
  padding-bottom: 80px;
}

input, textarea, button, select {
  font-family: inherit;
  color: inherit;
}

button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ───── TOP BAR ───── */
.topbar {
  position: sticky; top: 0; z-index: 30;
  padding: calc(env(safe-area-inset-top, 0px) + 22px) calc(env(safe-area-inset-right, 0px) + 28px) 22px calc(env(safe-area-inset-left, 0px) + 28px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  background: linear-gradient(to bottom, var(--paper) 70%, transparent);
}
.topbar-side { display: flex; align-items: center; gap: 10px; }
.topbar-side--left  { justify-content: flex-start; }
.topbar-side--right { justify-content: flex-end; }

.brand {
  display: inline-flex; align-items: baseline;
  gap: 18px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .32em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand-bar {
  font-weight: 300;
  color: var(--ink-40);
  letter-spacing: 0;
}
.brand-word--alt { font-weight: 400; color: var(--ink-80); }

.topbar-meta { display: flex; align-items: center; gap: 10px; }
.save-pill {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .4s, transform .4s;
}
.save-pill.visible { opacity: 1; transform: translateY(0); }
.lang-btn {
  border: 1px solid var(--ink-15);
  background: transparent;
  font-size: 11px; letter-spacing: 2px; font-weight: 600;
  padding: 8px 12px; border-radius: 999px;
}

/* ───── BOTTOM PROGRESS + LOCATION FOOTER ───── */
/* Fade scrim — content fades into the paper background as it scrolls under the footer */
body::after {
  content: "";
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: calc(env(safe-area-inset-bottom, 0px) + 100px);
  background: linear-gradient(to bottom, rgba(250,247,242,0) 0%, var(--paper) 55%);
  pointer-events: none;
  z-index: 20;
}
.footer {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 28px);
  right: calc(env(safe-area-inset-right, 0px) + 28px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 24px;
  pointer-events: none;
  z-index: 25;
}
.footer > * { pointer-events: auto; }
.progress {
  display: flex; align-items: center; gap: 14px;
  width: 100%; max-width: 360px;
}
.progress-count {
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--ink-60);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.progress-track {
  flex: 1;
  height: 2px;
  background: var(--ink-08);
  border-radius: 2px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: width .5s var(--ease);
}
.locations {
  grid-column: 2;
  justify-self: center;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10px;
  letter-spacing: .34em;
  color: var(--ink-60);
  font-weight: 700;
}
.locations .dot { color: var(--ink-40); }
/* hide progress on welcome + done; locations always visible */
.footer[data-hide-progress="1"] .progress { visibility: hidden; }

/* Orphaned rail elements from the old design — kept hidden but harmless */
.rail { display: none; }
.rail ol {
  list-style: none; display: flex; gap: 10px; margin: 0; padding: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rail ol::-webkit-scrollbar { display: none; }
.rail li {
  flex: 0 0 auto;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 12px; letter-spacing: 1px; font-weight: 600;
  color: var(--ink-40);
  background: transparent;
  border: 1px solid var(--ink-08);
  transition: all .3s var(--ease);
  white-space: nowrap;
}
.rail li[data-done="1"] { color: var(--ink); border-color: var(--ink-15); }
.rail li[aria-current="step"] {
  background: var(--ink); color: var(--paper);
  border-color: var(--ink);
}

/* ───── STAGE ───── */
.stage {
  /* Bottom padding leaves space for the fixed footer (progress + locations) */
  padding: 8px calc(env(safe-area-inset-right, 0px) + 28px) calc(env(safe-area-inset-bottom, 0px) + 120px) calc(env(safe-area-inset-left, 0px) + 28px);
  position: relative;
}

/* Visible focus ring for keyboard nav across all interactive elements */
:focus-visible {
  outline: 3px solid var(--blush-deep);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.btn:focus-visible, .tile:focus-visible, .chips button:focus-visible,
.chip-toggle:focus-visible, .stepping-tile:focus-visible, .trans-tile:focus-visible,
.design-tile:focus-visible, .meds-none:focus-visible, .path-card:focus-visible {
  outline-offset: 3px;
}
.screen {
  display: none;
  animation: slideIn .5s var(--ease) both;
  max-width: 880px; /* portrait-friendly column — content stays readable, never sprawls */
  margin: 0 auto;
}
/* Center + welcome screens get a wider stage so the path cards breathe */
.screen--center { max-width: 980px; }
.screen.active { display: block; }

@keyframes slideIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── CENTER LAYOUT (welcome + path picker) ─── */
.screen--center {
  display: none;
  min-height: calc(100vh - 280px);
  padding: 40px 24px 80px;
}
.screen--center.active {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeUp .55s var(--ease) both;
}
.center-stack {
  width: 100%;
  max-width: 640px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 26px;
}
.center-stack--wide { max-width: 880px; }
.center-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(40px, 6.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -.012em;
  color: var(--ink);
  margin: 0;
}
.center-sub {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-60);
  max-width: 480px;
  margin: 0;
}
.center-meta {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13.5px;
  color: var(--ink-60);
  margin-top: 6px;
}
.meta-icon { width: 18px; height: 18px; color: var(--ink-40); }

/* Begin-style large pill button */
.btn-pill {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 22px 44px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  margin-top: 22px;
  box-shadow: 0 18px 40px -22px rgba(10,10,10,.5), 0 8px 24px -16px rgba(10,10,10,.3);
  transition: all .25s var(--ease);
}
.btn-pill:hover { transform: translateY(-2px); box-shadow: 0 22px 48px -22px rgba(10,10,10,.6), 0 12px 28px -16px rgba(10,10,10,.4); }
.btn-pill:active { transform: scale(.98); }
.btn-pill-arrow { font-size: 18px; transition: transform .25s var(--ease); }
.btn-pill:hover .btn-pill-arrow { transform: translateX(4px); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── COVER (used by Done) ─── */
.screen--cover {
  display: none;
  min-height: 70vh;
}
.screen--cover.active { display: grid; }
.screen--cover {
  grid-template-columns: 1.4fr .9fr;
  gap: 50px;
  padding-top: 30px;
}
.cover-plate { padding: 50px 0; }
.cover-eyebrow {
  font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--ink-60); font-weight: 600;
  margin-bottom: 28px;
}
.cover-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(48px, 6.4vw, 92px);
  line-height: .98;
  letter-spacing: -.01em;
  margin: 0 0 28px;
}
.cover-title em { font-style: italic; color: var(--ink-80); }
.cover-sub {
  font-size: 19px; line-height: 1.5; color: var(--ink-80);
  max-width: 540px; margin: 0 0 36px;
}
.cover-meta {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 14px; margin: 0 0 40px; max-width: 540px;
}
@media (min-width: 1100px) { .cover-meta { grid-template-columns: repeat(4, 1fr); max-width: 720px; } }
.cover-meta > div {
  padding: 14px 16px;
  border: 1px solid var(--ink-08);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.4);
}
.cover-meta strong {
  display: block; font-size: 13px; font-weight: 700;
}
.cover-meta span {
  display: block; font-size: 11px; color: var(--ink-60);
  letter-spacing: 1px; text-transform: uppercase;
  margin-top: 4px;
}
.rail-skipped { opacity: .3; text-decoration: line-through; }

/* Path picker — standalone screen, big tappable cards */
.path-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 18px; margin: 24px 0 0;
  width: 100%;
}
@media (max-width: 720px) { .path-grid { grid-template-columns: 1fr; } }
.path-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 32px 30px 28px;
  background: #fff;
  border: 1px solid var(--ink-15);
  border-radius: var(--radius-lg);
  text-align: left;
  transition: all .25s var(--ease);
  cursor: pointer;
  min-height: 180px;
}
.path-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 50px -22px rgba(10,10,10,.3), 0 12px 28px -16px rgba(10,10,10,.2);
  border-color: var(--ink);
}
.path-card:active { transform: scale(.98); }
.path-card--blush { background: linear-gradient(135deg, var(--blush-soft), #fff); border-color: var(--blush-deep); }
.path-card--blush:hover { border-color: var(--ink); }
.path-eyebrow {
  font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-60);
}
.path-title {
  font-family: var(--font-serif);
  font-size: 28px; font-weight: 300;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -.005em;
}
.path-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto;
  padding-top: 18px;
}
.path-time {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-60); font-weight: 700;
}
.path-chevron { font-size: 22px; color: var(--ink-40); transition: transform .25s var(--ease); }
.path-card:hover .path-chevron { color: var(--ink); transform: translateX(4px); }

/* Visit type badge in topbar (after selection) */
.visit-badge {
  font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--blush-soft);
  color: var(--ink);
  border: 1px solid var(--blush-deep);
}
.visit-badge[data-kind="general"] {
  background: transparent;
  border-color: var(--ink-15);
  color: var(--ink-60);
}

/* Health-screen row */
.section-label {
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-60); font-weight: 700;
  margin: 22px 0 10px;
}
.section-label:first-of-type { margin-top: 6px; }

.health-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 18px;
}
@media (max-width: 720px) { .health-row { grid-template-columns: 1fr; } }

/* Inline hint for field labels */
.field-hint {
  font-weight: 400; font-style: normal; color: var(--ink-40);
  letter-spacing: 0; text-transform: none; font-size: 11px;
  margin-left: 6px;
}

.cover-foot { margin-top: 22px; font-size: 13px; color: var(--ink-60); }
.cover-foot a { color: var(--ink); text-underline-offset: 3px; }

.cover-side {
  display: flex; flex-direction: column; gap: 24px;
  align-self: center;
}
.side-card {
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-lift);
}
.side-card-eyebrow { font-size: 10px; letter-spacing: 3px; opacity: .6; text-transform: uppercase; }
.side-card-name { font-family: var(--font-serif); font-size: 30px; margin-top: 10px; }
.side-card-role { font-size: 13px; opacity: .7; margin-top: 4px; }
.side-card-meta { font-size: 11px; letter-spacing: 2px; opacity: .5; text-transform: uppercase; margin-top: 18px; }

.side-quote {
  padding: 22px 26px;
  font-family: var(--font-serif);
  font-size: 19px; font-style: italic;
  line-height: 1.45;
  border: 1px solid var(--ink-08);
  border-radius: var(--radius-lg);
  background: var(--blush-soft);
  color: var(--ink-80);
}

/* ─── SCREEN HEAD ─── */
.screen-head { margin: 14px 0 28px; }
.screen-eyebrow {
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--ink-60); font-weight: 600;
}
.screen-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1.02;
  letter-spacing: -.01em;
  margin: 10px 0 10px;
}
.screen-sub { font-size: 16px; line-height: 1.5; color: var(--ink-60); max-width: 640px; margin: 0; }

/* ─── GRID & FIELDS ─── */
.grid { display: grid; gap: 14px; }
.grid--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 820px) {
  .grid--2 { grid-template-columns: 1fr; }
  .screen--cover { grid-template-columns: 1fr; }
}

.field {
  display: flex; flex-direction: column; gap: 8px;
}
.field--full { grid-column: 1 / -1; }
.field > span {
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-60); font-weight: 600;
}
.field-label { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-60); font-weight: 600; margin-bottom: 6px; }
.optional { font-weight: 400; color: var(--ink-40); letter-spacing: 1px; margin-left: 6px; text-transform: none; }

.field input, .field textarea, .field select {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--ink-15);
  border-radius: var(--radius-md);
  background: #fff;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}
.field input:focus, .field textarea:focus {
  border-color: var(--ink);
  outline: none;
  box-shadow: 0 0 0 4px rgba(10,10,10,.06);
}

/* Date input — iOS Safari renders these clumsily by default. Restore brand styling + clean affordance. */
.field input[type=date] {
  position: relative;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  cursor: pointer;
  /* iOS shows placeholder text in faded grey — keep that, but make filled state crisp */
  color: var(--ink);
  min-height: 56px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><line x1='3' y1='10' x2='21' y2='10'/><line x1='8' y1='3' x2='8' y2='7'/><line x1='16' y1='3' x2='16' y2='7'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 20px 20px;
  padding-right: 50px;
}
.field input[type=date]::-webkit-date-and-time-value { text-align: left; }
.field input[type=date]::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  right: 0; top: 0; bottom: 0; left: 0;
  cursor: pointer;
}
/* Empty-state placeholder dimming */
.field input[type=date]:not(:focus):invalid,
.field input[type=date]:not(:focus):not(:placeholder-shown):invalid { color: var(--ink-40); }
textarea { resize: vertical; min-height: 90px; font-family: inherit; }

/* Medications row — input + green "No medications" quick-fill */
.meds-wrap {
  display: flex; gap: 10px; align-items: stretch;
}
.meds-wrap input { flex: 1; }
.meds-none {
  flex: 0 0 auto;
  padding: 0 22px;
  border-radius: var(--radius-md);
  background: var(--ok-soft);
  border: 1px solid var(--ok-soft-2);
  color: var(--ok-deep);
  font-size: 14px; font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  transition: all .15s var(--ease);
  white-space: nowrap;
}
.meds-none:hover { border-color: var(--ok-deep); }
.meds-none:active { transform: scale(.97); }
.meds-none.selected {
  background: var(--ok-deep);
  color: #fff;
  border-color: var(--ok-deep);
  box-shadow: 0 6px 18px -10px rgba(47,74,47,.5);
}
@media (max-width: 600px) {
  .meds-wrap { flex-direction: column; }
  .meds-none { padding: 14px 18px; }
}

.muted-sm { font-size: 13px; color: var(--ink-60); margin: 4px 0 0; line-height: 1.5; }

/* ─── CHIPS (button radios) ─── */
.chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.chips--inline { gap: 6px; }
.chips--wrap { flex-wrap: wrap; }
.chips button {
  border: 1px solid var(--ink-15);
  background: #fff;
  padding: 12px 16px;
  border-radius: 999px;
  font-size: 14px;
  transition: all .15s var(--ease);
}
.chips button.selected {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: translateY(-1px);
}
.chips button:active { transform: scale(.96); }

/* ─── TILES (medical / allergy / attribution / etc.) ─── */
.tiles {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.tiles--compact { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.tile {
  position: relative;
  padding: 16px 18px;
  border: 1px solid var(--ink-15);
  border-radius: var(--radius-md);
  background: #fff;
  text-align: left;
  font-size: 14.5px; line-height: 1.3;
  transition: all .2s var(--ease);
  display: flex; align-items: flex-start; gap: 10px;
  min-height: 60px;
}
.tile::after {
  content: "";
  position: absolute; top: 10px; right: 10px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--blush) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 12 10 18 20 6'/></svg>") center/10px 10px no-repeat;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.tile.selected::after {
  opacity: 1;
  transform: scale(1);
}
/* Green None tile uses an ink-on-green check */
.tile[data-id="none"].selected::after,
.tile[data-id="never"].selected::after {
  background-color: #fff;
}
.tile:active { transform: scale(.98); }
.tile.selected {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: 0 6px 18px -10px rgba(10,10,10,.3);
}
.tile .tile-icon {
  font-size: 15px; color: var(--ink-40);
  transition: color .2s;
}
.tile.selected .tile-icon { color: var(--blush); }

/* "None of the above" / "None known" — soft green to invite the all-good shortcut */
.tile[data-id="none"],
.tile[data-id="never"] {
  background: var(--ok-soft);
  border-color: var(--ok-soft-2);
}
.tile[data-id="none"] .tile-icon,
.tile[data-id="never"] .tile-icon { color: var(--ok-deep); }
.tile[data-id="none"]:hover,
.tile[data-id="never"]:hover { border-color: var(--ok-deep); }
.tile[data-id="none"].selected,
.tile[data-id="never"].selected {
  background: var(--ok-deep);
  color: #fff;
  border-color: var(--ok-deep);
  box-shadow: 0 6px 18px -10px rgba(47,74,47,.5);
}
.tile[data-id="none"].selected .tile-icon,
.tile[data-id="never"].selected .tile-icon { color: var(--ok-soft); }

/* ─── PHOTO ID ─── */
.photo-id {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
  padding: 20px 22px;
  background: #fff;
  border: 1px dashed var(--ink-15);
  border-radius: var(--radius-md);
}
.photo-id-actions { display: flex; gap: 10px; align-items: center; }
.id-preview { width: 70px; height: 70px; border-radius: 10px; overflow: hidden; border: 1px solid var(--ink-15); }
.id-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ─── BUTTONS ─── */
.btn {
  padding: 14px 22px;
  font-size: 14px; font-weight: 600; letter-spacing: .5px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all .2s var(--ease);
  background: transparent;
}
.btn:active { transform: scale(.97); }
.btn--primary {
  background: var(--ink); color: var(--paper);
}
.btn--primary:hover { background: #1a1a1a; }
.btn--ghost {
  background: transparent;
  border-color: var(--ink-15);
  color: var(--ink);
}
.btn--ghost:hover { background: rgba(10,10,10,.04); }
.btn--xl { padding: 18px 32px; font-size: 15px; letter-spacing: 1px; }

.screen-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--ink-08);
}

/* ─── ASPIRATION ─── */
.aspire-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.aspire-card {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--ink-08);
  border-radius: var(--radius-lg);
}
.aspire-card--wide { grid-column: 1 / -1; }
.aspire-label { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; color: var(--ink-60); margin-bottom: 14px; }
.aspire-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-60); margin-top: 8px; }
.aspire-scale .val, #smile-index-value { color: var(--ink); font-weight: 700; font-size: 16px; }

input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: linear-gradient(to right, var(--blush), var(--blush-deep));
  border-radius: 999px;
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--paper);
  box-shadow: 0 4px 12px rgba(10,10,10,.3);
  cursor: pointer;
}

/* ─── ATTRIBUTION (How did you find us) ─── */
.screen-head--center { text-align: center; }
.screen-head--center .screen-sub { margin: 0 auto; }

.attr-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 760px;
  margin: 18px auto 0;
}
@media (max-width: 600px) { .attr-grid { grid-template-columns: 1fr; } }

.attr-tile {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--ink-15);
  border-radius: var(--radius-lg);
  text-align: left;
  cursor: pointer;
  transition: all .2s var(--ease);
  position: relative;
}
.attr-tile:hover { border-color: var(--ink-40); transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.attr-tile.selected {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: 0 16px 40px -18px rgba(10,10,10,.55);
}
.attr-icon {
  font-size: 22px;
  color: var(--blush-deep);
  line-height: 1;
  padding-top: 2px;
  flex: 0 0 auto;
}
.attr-tile.selected .attr-icon { color: var(--blush); }
.attr-body { display: flex; flex-direction: column; gap: 4px; }
.attr-body strong { font-size: 15.5px; font-weight: 700; }
.attr-body span { font-size: 12.5px; color: var(--ink-60); line-height: 1.4; }
.attr-tile.selected .attr-body span { color: rgba(250,247,242,.7); }

.attr-other-wrap {
  max-width: 760px;
  margin: 18px auto 0;
}
.attr-other-wrap[hidden] { display: none; }

/* ─── COMFORT ─── */
.comfort-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}
.comfort-card {
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--ink-08);
  border-radius: var(--radius-lg);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.comfort-card:hover { transform: translateY(-1px); border-color: var(--ink-15); }
.comfort-card--wide { grid-column: 1 / -1; background: linear-gradient(135deg, #fff, var(--blush-soft) 180%); }
.comfort-card--wide input[type=range] { margin-top: 14px; }
.comfort-card--wide .aspire-scale { margin-top: 10px; }
.comfort-icon {
  font-size: 22px;
  color: var(--blush-deep);
  margin-bottom: 10px;
  letter-spacing: 1px;
}
.comfort-name { font-weight: 700; font-size: 15px; }
.comfort-desc { font-size: 13px; color: var(--ink-60); margin: 4px 0 14px; line-height: 1.45; }
.chip-toggle {
  background: transparent;
  border: 1px solid var(--ink-15);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  transition: all .15s var(--ease);
}
.chip-toggle:hover { border-color: var(--ink-40); }
.chip-toggle.selected {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -8px rgba(10,10,10,.4);
}

/* ─── SMILE DESIGN (Natural / Soft / Hollywood) — magazine-card stack ─── */
.design-grid {
  display: flex; flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.design-tile {
  display: block;
  width: 100%;
  padding: 0;
  background: #000;
  border: 2px solid var(--ink-15);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.design-tile img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .4s var(--ease);
}
.design-tile:hover {
  border-color: var(--ink-40);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}
.design-tile:hover img { transform: scale(1.01); }
.design-tile.selected {
  border-color: var(--ink);
  box-shadow: 0 16px 40px -18px rgba(10,10,10,.55), 0 0 0 3px var(--blush);
}

/* Guide tile — no photo, blush invitation card */
.design-tile--guide {
  background: linear-gradient(135deg, var(--blush-soft), var(--blush));
  display: flex; align-items: center; gap: 24px;
  padding: 24px 28px;
  text-align: left;
  border-color: var(--blush-deep);
}
.design-tile--guide:hover { border-color: var(--ink); }
.design-guide-mark {
  font-family: var(--font-serif);
  font-size: 56px; font-weight: 300; color: var(--ink);
  line-height: 1; flex: 0 0 auto;
}
.design-guide-body strong {
  display: block; font-size: 16px; font-weight: 700; color: var(--ink);
}
.design-guide-body span {
  display: block; font-size: 13px; color: var(--ink-80); margin-top: 4px; line-height: 1.45;
}

/* ─── TRANSLUCENCY (visual swatch picker) ─── */
.trans-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 920px) { .trans-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .trans-grid { grid-template-columns: 1fr; } }

.trans-tile {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--ink-15);
  border-radius: var(--radius-lg);
  text-align: left;
  transition: all .2s var(--ease);
  overflow: hidden;
  cursor: pointer;
}
.trans-tile:hover { transform: translateY(-2px); border-color: var(--ink-40); box-shadow: var(--shadow-lift); }
.trans-tile.selected {
  border-color: var(--ink);
  box-shadow: 0 16px 36px -18px rgba(10,10,10,.5), 0 0 0 3px rgba(10,10,10,.04);
}
.trans-body { padding: 14px 16px 18px; }
.trans-body strong { display: block; font-size: 14.5px; font-weight: 700; }
.trans-body span { display: block; font-size: 12.5px; color: var(--ink-60); margin-top: 5px; line-height: 1.4; }

/* Swatch panel — black cinema background, holds the Estepona magazine reference photo.
   object-fit:contain so the full tooth (label + gum + body + translucent edge) is visible — never cropped. */
.trans-swatch {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 5 / 7;
  background: #0A0A0A;
  position: relative;
  overflow: hidden;
}
.trans-swatch img {
  max-width: 100%; max-height: 100%;
  width: auto; height: 100%;
  object-fit: contain; object-position: center;
  display: block;
  transition: transform .4s var(--ease);
}
.trans-tile:hover .trans-swatch img { transform: scale(1.03); }
.trans-tile.selected .trans-swatch::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 3px var(--blush);
  pointer-events: none;
}

/* GUIDE — neutral blush panel with a serif question mark */
.trans-swatch--guide {
  background: linear-gradient(135deg, var(--blush-soft), var(--blush));
}
.trans-swatch-help {
  font-family: var(--font-serif);
  font-size: 76px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1;
}

/* ─── AESTHETIC REFERENCE PHOTO ─── */
.aspire-photo {
  display: flex; align-items: center; gap: 16px;
  margin-top: 12px;
}
.aspire-photo-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 22px;
  background: #fff;
  border: 1px dashed var(--ink-15);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all .2s var(--ease);
  font-size: 14px; font-weight: 600;
}
.aspire-photo-btn:hover { border-color: var(--ink); border-style: solid; }
.aspire-photo-icon { font-size: 22px; color: var(--blush-deep); line-height: 1; }
.aspire-preview {
  display: flex; align-items: center; gap: 12px;
}
.aspire-preview[hidden] { display: none; }
.aspire-preview img {
  width: 96px; height: 96px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--ink-15);
  display: block;
}
.aspire-preview-hint {
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-60); font-weight: 600;
}

/* ─── CONSENTS ─── */
.consent-list { display: flex; flex-direction: column; gap: 10px; }
.consent {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid var(--ink-08);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all .15s;
}
.consent:hover { border-color: var(--ink-15); }
.consent input { margin-top: 4px; transform: scale(1.3); accent-color: var(--ink); }
.consent-body { flex: 1; }
.consent-title { font-weight: 700; font-size: 15px; }
.consent-title .req { color: var(--alert); font-size: 11px; margin-left: 8px; letter-spacing: 1px; }
.consent-title .opt { color: var(--ink-40); font-size: 11px; margin-left: 8px; letter-spacing: 1px; }
.consent-desc { font-size: 13.5px; color: var(--ink-60); line-height: 1.5; margin-top: 6px; }
.consent-desc a { color: var(--ink); }
.consent-detail {
  max-height: 0; overflow: hidden;
  transition: max-height .3s var(--ease);
  font-size: 13px; color: var(--ink-60); line-height: 1.55;
}
.consent[data-expanded="1"] .consent-detail { max-height: 300px; margin-top: 10px; }
.consent-toggle {
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-60); font-weight: 600;
  background: none; border: none; padding: 0; margin-top: 8px;
}

/* ─── SIGNATURE PAD ─── */
.sig-wrap {
  position: relative;
  background: #fff;
  border: 1px solid var(--ink-15);
  border-radius: var(--radius-lg);
  padding: 40px 44px 28px;
  margin-bottom: 20px;
  box-shadow: 0 12px 32px -22px rgba(10,10,10,.18);
}
#sig-pad {
  width: 100%;
  height: 300px;
  background: transparent;
  border-radius: var(--radius-md);
  touch-action: none;
  cursor: crosshair;
}
.sig-line {
  position: absolute; bottom: 70px; left: 48px; right: 48px;
  border-top: 1px solid var(--ink-15);
  font-family: var(--font-serif);
  font-size: 13px;
  font-style: italic;
  color: var(--ink-40);
  padding-top: 10px;
  letter-spacing: .02em;
  text-transform: none;
  pointer-events: none;
}
.sig-actions { display: flex; justify-content: flex-end; margin-top: 14px; }

/* ─── APP HANDOFF ─── */
.app-grid {
  display: grid; grid-template-columns: 280px 1fr 320px; gap: 26px;
  align-items: start;
}
@media (max-width: 1100px) { .app-grid { grid-template-columns: 1fr 1fr; } .app-signup { grid-column: 1 / -1; } }
@media (max-width: 720px) { .app-grid { grid-template-columns: 1fr; } }

.app-qr {
  background: #fff; padding: 24px; border-radius: var(--radius-lg);
  border: 1px solid var(--ink-08); text-align: center;
}
#qr-box { width: 220px; height: 220px; margin: 0 auto; display: grid; place-items: center; }
#qr-box canvas, #qr-box img { display: block; }
.app-qr-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-60); margin-top: 14px; font-weight: 600; }
.app-qr-sub { font-size: 11px; color: var(--ink-40); margin-top: 6px; }

/* Offer banner — €50 free check-up incentive */
.offer-banner {
  display: flex; align-items: center; gap: 20px;
  padding: 20px 24px;
  margin: 0 0 24px;
  background: linear-gradient(135deg, var(--blush-soft), var(--blush));
  border: 1px solid var(--blush-deep);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}
.offer-badge {
  flex: 0 0 auto;
  background: var(--ink); color: var(--paper);
  padding: 14px 18px;
  border-radius: 14px;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 1px;
  line-height: 1;
  text-align: center;
  min-width: 96px;
}
.offer-badge::after {
  content: "VALUE"; display: block;
  font-family: var(--font); font-size: 9px; letter-spacing: 3px;
  opacity: .5; margin-top: 6px; font-weight: 600;
}
.offer-text strong {
  display: block; font-size: 16px; font-weight: 700; color: var(--ink);
  line-height: 1.3;
}
.offer-text span {
  display: block; font-size: 13.5px; color: var(--ink-80); margin-top: 6px;
  line-height: 1.4;
}

.app-benefits {
  display: flex; flex-direction: column; gap: 14px;
}
.bene {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.6);
  border: 1px solid var(--ink-08);
}
.bene > span { color: var(--blush-deep); font-size: 20px; line-height: 1; }
.bene strong { display: block; font-size: 14.5px; }
.bene span:last-child { font-size: 13px; color: var(--ink-60); margin-top: 4px; display: block; }

.app-signup {
  background: var(--ink); color: var(--paper);
  padding: 24px; border-radius: var(--radius-lg);
}
.app-signup-head { font-family: var(--font-serif); font-size: 22px; margin-bottom: 14px; }
.app-signup .chips button {
  background: rgba(255,255,255,.1); color: var(--paper);
  border-color: rgba(255,255,255,.2);
}
.app-signup .chips button.selected {
  background: var(--paper); color: var(--ink);
  border-color: var(--paper);
}
.app-signup .muted-sm { color: rgba(255,255,255,.6); }
.app-pass input { background: rgba(255,255,255,.08); color: var(--paper); border-color: rgba(255,255,255,.2); }
.app-pass > span { color: rgba(255,255,255,.7); }

/* ─── €50 CLAIM = MARKETING CONSENT ───── */
.claim-consent {
  margin: 28px 0 0;
  padding: 28px 32px;
  background: #fff;
  border: 1px solid var(--ink-08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}
.claim-head {
  font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--ink-60); font-weight: 700;
  margin-bottom: 14px;
}
.claim-list {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px;
}
@media (max-width: 820px) { .claim-list { grid-template-columns: 1fr; } }
.claim-list li {
  padding-left: 22px;
  position: relative;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-80);
}
.claim-list li::before {
  content: "◦";
  position: absolute; left: 0; top: 0;
  color: var(--blush-deep);
  font-size: 18px;
  line-height: 1.2;
}
.claim-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.claim-yes {
  background: var(--ok-deep);
  color: #fff;
  border: 1px solid var(--ok-deep);
  padding: 16px 28px;
  font-size: 14.5px; font-weight: 700;
  letter-spacing: .3px;
  flex: 0 0 auto;
  box-shadow: 0 10px 26px -14px rgba(47,74,47,.5);
}
.claim-yes:hover { background: #243a24; border-color: #243a24; transform: translateY(-1px); }
.claim-yes--done {
  background: var(--ok-soft);
  color: var(--ok-deep);
  border-color: var(--ok-deep);
  box-shadow: none;
}
.claim-no {
  background: transparent;
  border: 1px solid var(--ink-15);
  color: var(--ink-60);
  padding: 16px 22px;
  font-size: 13px; font-weight: 600;
  flex: 0 0 auto;
}
.claim-no:hover { border-color: var(--ink); color: var(--ink); }
.claim-no--done {
  background: var(--ink-08);
  color: var(--ink-60);
  border-color: var(--ink-15);
}
.claim-note {
  margin: 0;
  font-size: 12px;
  color: var(--ink-40);
  line-height: 1.5;
}

/* ─── DONE ─── */
.done-actions {
  display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 40px;
}
.done-meta {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; max-width: 540px;
}
.done-meta > div {
  padding: 14px 16px;
  border: 1px solid var(--ink-08);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.4);
}
.done-meta strong { display: block; font-size: 13px; font-family: var(--font-serif); }
.done-meta span { display: block; font-size: 10.5px; color: var(--ink-60); letter-spacing: 2px; text-transform: uppercase; margin-top: 4px; }

.receipt {
  background: #fff; border-radius: var(--radius-lg);
  border: 1px solid var(--ink-08);
  padding: 24px 26px;
  font-size: 13px;
}
.receipt-head { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--ink-60); font-weight: 600; margin-bottom: 14px; }
.receipt-row {
  display: flex; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px dashed var(--ink-08);
}
.receipt-row:last-child { border-bottom: none; }
.receipt-row strong { font-weight: 700; color: var(--ink-80); }
.receipt-row span { color: var(--ink-60); text-align: right; max-width: 60%; }

/* ─── CLINIC SETUP (first-boot overlay, fullscreen) ─── */
.clinic-setup {
  position: fixed; inset: 0; z-index: 100;
  background: linear-gradient(135deg, var(--paper) 0%, var(--paper-warm) 100%);
  display: grid; place-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 40px) 40px calc(env(safe-area-inset-bottom, 0px) + 40px);
  animation: slideIn .4s var(--ease) both;
}
.clinic-setup[hidden] { display: none; }
.clinic-setup-plate { max-width: 920px; width: 100%; }
.clinic-setup-brand {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 36px;
}
.clinic-setup-brand svg { width: 130px; height: 22px; }
.clinic-setup-brand svg text { fill: var(--ink); }
.clinic-setup-sub {
  font-size: 10.5px; letter-spacing: 3px; font-weight: 600;
  color: var(--ink-60); text-transform: uppercase;
}
.clinic-setup-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.04;
  letter-spacing: -.01em;
  margin: 0 0 18px;
}
.clinic-setup-note {
  font-size: 15px; color: var(--ink-60);
  line-height: 1.55;
  max-width: 580px;
  margin: 0 0 40px;
}
.clinic-setup-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width: 820px) { .clinic-setup-grid { grid-template-columns: 1fr; } }
.clinic-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 32px 28px;
  background: #fff;
  border: 1px solid var(--ink-15);
  border-radius: var(--radius-lg);
  text-align: left;
  cursor: pointer;
  transition: all .2s var(--ease);
  min-height: 140px;
}
.clinic-card:hover {
  transform: translateY(-3px);
  border-color: var(--ink);
  box-shadow: var(--shadow-lift);
}
.clinic-card:active { transform: scale(.98); }
.clinic-card-name {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
}
.clinic-card-email {
  font-size: 12.5px;
  color: var(--ink-60);
  letter-spacing: .2px;
  word-break: break-all;
}

/* ─── KIOSK AUTO-RESET (Done screen banner) ─── */
.kiosk-reset {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 22px;
  padding: 14px 18px;
  border: 1px solid var(--ink-08);
  border-radius: 999px;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(8px);
  font-size: 12px;
  color: var(--ink-60);
}
.kiosk-reset-label { letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; }
.kiosk-reset-count {
  font-family: var(--font-serif); font-size: 20px; font-weight: 400;
  color: var(--ink); min-width: 28px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.kiosk-reset-sub { color: var(--ink-40); font-size: 11.5px; }
.kiosk-reset-now {
  margin-left: 4px;
  padding: 8px 14px;
  border: 1px solid var(--ink-15);
  border-radius: 999px;
  background: transparent;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: all .15s var(--ease);
}
.kiosk-reset-now:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Build stamp — proves the iPad is on the latest version */
.build-stamp {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  font-size: 9px; letter-spacing: 1px;
  color: var(--ink-15);
  font-family: ui-monospace, "SF Mono", monospace;
  z-index: 5;
  pointer-events: none;
  user-select: none;
}

/* ─── RESET (discreet, bottom-right corner; hidden on welcome + done) ─── */
.reset-btn {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  right: calc(env(safe-area-inset-right, 0px) + 18px);
  padding: 8px 14px;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  border: 1px solid transparent;
  background: rgba(255,255,255,0);
  color: var(--ink-40);
  border-radius: 999px;
  font-weight: 700;
  z-index: 40;
  transition: all .2s var(--ease);
}
.reset-btn:hover {
  color: var(--ink);
  border-color: var(--ink-15);
  background: rgba(255,255,255,.7);
}
/* Hide on welcome + path + done — these screens are intro/setup, kiosk-reset handles Done */
body:has(.screen[data-step="welcome"].active) .reset-btn,
body:has(.screen[data-step="path"].active)    .reset-btn,
body:has(.screen[data-step="done"].active)    .reset-btn { display: none; }

/* ─── ALLERGY tiles override ─── */
.tile-emoji { font-size: 16px; }

/* ─── iPad polish ─── */
@media (min-width: 1024px) {
  .stage { padding-top: 12px; }
}
@media (pointer: coarse) {
  .tile, .chips button, .btn { min-height: 48px; }
}