/* ===== Base ===== */
:root {
  /* Original semantic colors — still used by the card body, photo frame,
     editor surfaces etc. The page chrome uses --page-* tokens (below) instead
     of these so we can run a dark backdrop without flipping the card design. */
  --ink: #141210;
  --ink-2: #2b2722;
  --muted: #6b635a;
  --paper: #faf6ee;
  --paper-2: #f1ebdd;
  --line: rgba(20,18,16,.12);
  --line-strong: rgba(20,18,16,.22);

  /* Page chrome — dark backdrop tokens. The aura halo renders over --page-bg. */
  --page-bg: #0c0a08;
  --page-fg: #f5efe2;
  --page-fg-dim: #c9c2b3;
  --page-muted: #8b8478;
  --page-line: rgba(255, 255, 255, 0.12);
  --page-line-strong: rgba(255, 255, 255, 0.22);

  /* per-card theme hooks (overridden inline) */
  --card-bg: #fbf6e9;
  --card-ink: #141210;
  --card-accent: #ff7a3d;
  --card-accent-ink: #141210;
  --card-starburst: #ffd23f;

  /* motion tokens — custom curves carry the punch the built-ins lack */
  --ease-out:     cubic-bezier(0.23, 1, 0.32, 1);          /* responsive UI entries */
  --ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);         /* on-screen movement */
  --ease-drawer:  cubic-bezier(0.32, 0.72, 0, 1);          /* iOS-style settle */
  --ease-back:    cubic-bezier(0.34, 1.56, 0.64, 1);       /* overshoots then settles — the flip bounce */
  --ease-back-soft: cubic-bezier(0.34, 1.32, 0.64, 1);     /* gentler bounce for small accents */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--page-fg);
  background: var(--page-bg);
  min-height: 100vh;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button { font: inherit; color: inherit; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* ===== Top shell ===== */
.shell {
  min-height: 100vh;
  position: relative;
  padding: 28px 32px 120px;
  color: var(--page-fg);
  background: transparent;   /* lets the aura deck show through */
}

.nav {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1440px; margin: 0 auto 28px; gap: 24px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Archivo Black', sans-serif;
  letter-spacing: -0.01em;
  font-size: 20px;
}
.brand .dot {
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--ink);
  display: grid; place-items: center;
  color: var(--paper); font-size: 12px;
  transform: rotate(-6deg);
}
.nav-tabs {
  display: flex; gap: 4px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  padding: 4px; border-radius: 999px;
}
.nav-tabs button {
  border: 0; background: transparent;
  padding: 8px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  color: var(--muted);
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out);
}
.nav-tabs button.active {
  background: var(--ink); color: var(--paper);
}
.nav-tabs button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .nav-tabs button:hover:not(.active) { color: var(--ink); }
}

.nav-right { display: flex; gap: 10px; align-items: center; }
.nav-btn {
  border: 1px solid var(--line-strong);
  background: var(--paper);
  padding: 9px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  transition:
    background-color 180ms var(--ease-out),
    color 180ms var(--ease-out),
    border-color 180ms var(--ease-out),
    transform 140ms var(--ease-out);
}
.nav-btn:active { transform: scale(0.97); }
.nav-btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .nav-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .nav-btn.primary:hover { background: var(--ink-2); }
}

/* ===== Page header ===== */
.page-head {
  max-width: 1440px; margin: 0 auto 40px;
  position: relative; z-index: 2;
}
.page-head h1 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0 0 18px;
  max-width: 14ch;
}
.page-head h1 em {
  font-style: normal;
  background: var(--ink);
  color: var(--paper);
  padding: 0 .18em;
  display: inline-block;
  transform: rotate(-1.5deg);
}
.page-head p {
  font-size: 17px; line-height: 1.5;
  max-width: 54ch; color: var(--ink-2);
  margin: 0;
}
.page-head .meta {
  display: flex; gap: 18px; align-items: center;
  margin-top: 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.page-head .meta .sep { opacity: .5; }

/* ===== Gallery grid ===== */
.gallery {
  max-width: 1440px; margin: 0 auto;
  position: relative; z-index: 1;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 60px 32px;
  padding-top: 40px;
}
.gallery-item {
  display: flex; flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 220ms var(--ease-out);
}
.gallery-item:active { transform: translateY(-2px) scale(0.99); }
@media (hover: hover) and (pointer: fine) {
  .gallery-item:hover { transform: translateY(-6px); }
}
.gallery-item .cap {
  margin-top: 58px; text-align: center;
  font-size: 13px; color: var(--ink-2);
}
.gallery-item .cap b {
  display: block;
  font-family: 'Archivo Black', sans-serif;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 3px;
}

/* ===== Add-yours card ===== */
.add-yours {
  width: 280px; height: 420px;
  border: 2px dashed var(--line-strong);
  background: rgba(255,255,255,.4);
  border-radius: 14px;
  display: grid; place-items: center;
  text-align: center; padding: 30px;
  transition:
    background-color 200ms var(--ease-out),
    border-color 200ms var(--ease-out),
    transform 220ms var(--ease-out);
  align-self: start;
  margin-top: 42px; /* match lanyard drop */
}
.add-yours:active { transform: translateY(-2px) scale(0.99); }
@media (hover: hover) and (pointer: fine) {
  .add-yours:hover {
    border-color: var(--ink);
    background: var(--paper);
    transform: translateY(-4px);
  }
}
.add-yours .plus {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
  font-size: 30px; margin: 0 auto 16px;
  font-family: 'Archivo Black', sans-serif;
}
.add-yours h3 {
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px; margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.add-yours p { margin: 0; font-size: 13px; color: var(--muted); }

/* ===== Card + lanyard ===== */
.card-wrap {
  position: relative;
  width: 280px;
}
.card-wrap.large { width: 360px; }

/* ===== Tilt stage =====
   A 3D wrapper that owns the cursor/gyro tilt transform. The card flip stays
   inside it, so outer rotateX/rotateY (tilt) composes with inner rotateY (flip).
   `transform-style: preserve-3d` propagates the perspective set on .card-wrap.
   When tilt isn't engaged, transform is `none` — zero runtime cost. */
.card-stage {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;        /* written every frame by the physics rig in card.jsx */
}
.card-stage.can-swing { touch-action: pan-y; cursor: grab; }
.card-stage.can-swing:active { cursor: grabbing; }

/* Specular highlight — a soft white spot inside each card face that tracks
   the cursor/gyro position via CSS vars set on the face element directly.
   On the back face the X is mirrored (set by the writer) AND we scaleX(-1) so
   the gradient render is mirrored to match the back's flipped local space. */
.card-face .gloss {
  position: absolute; inset: 0;
  background: radial-gradient(
    280px circle at var(--gloss-x, 50%) var(--gloss-y, 50%),
    rgba(255, 255, 255, 0.48),
    rgba(255, 255, 255, 0) 64%
  );
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 3;
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
  border-radius: inherit;
}
.tilt-active .card-face .gloss { opacity: 1; }

/* The 3D flip — natural two-part motion.
   PART 1 (the bounce): a brief vertical lift kicks in at t=0 and arcs up-then-
   settles-down within 720ms. This reads as the card winding up against gravity
   before turning over — the "slight bounce" you feel before a real card flicks.
   PART 2 (the rotation): rotateY transitions to 180° but with a 140ms DELAY so
   the lift gets a head-start. The curve is a strong ease-in-out (no overshoot)
   — the card lands flat at exactly 180°, the way a real laminate would.
   Bounce lives in the lift, not the rotation. */
.card-3d {
  width: 100%;
  aspect-ratio: 280/420;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 500ms var(--ease-in-out) 140ms;
  cursor: pointer;
  transform-origin: 50% 8%;
  will-change: transform, translate;
}
.card-3d.flipped { transform: rotateY(180deg); }

/* Lift arc — up to -10px, micro-settle at -3px, back to 0. Keyframe is fine
   here because re-flips while a flip is in progress are blocked in the JS, so
   interruptibility isn't a concern. */
@keyframes flip-lift {
  0%   { translate: 0 0; }
  35%  { translate: 0 -10px; }
  72%  { translate: 0 -3px; }
  100% { translate: 0 0; }
}
.card-3d.is-flipping {
  animation: flip-lift 720ms cubic-bezier(0.34, 1.05, 0.64, 1);
}

/* Press feedback — instant tactile squish that the flip transition then overrides */
.card-3d:not(.no-click-flip):active {
  transition: transform 120ms var(--ease-out);
  transform: scale(.985);
}
.card-3d.flipped:not(.no-click-flip):active { transform: rotateY(180deg) scale(.985); }

.card-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0.01px);
  border-radius: 14px;
  background: var(--card-bg);
  color: var(--card-ink);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 20px 40px -16px rgba(0,0,0,.25),
    0 4px 12px -4px rgba(0,0,0,.15);
  padding: 20px 18px 24px;
  display: flex; flex-direction: column;
  border: 1px solid rgba(0,0,0,.06);
}
.card-face.back { transform: rotateY(180deg) translateZ(0.01px); }

/* Hard hide inactive face as fallback for browsers that bleed backface */
.card-3d:not(.flipped) > .card-face.back { opacity: 0; pointer-events: none; }
.card-3d.flipped > .card-face.front { opacity: 0; pointer-events: none; }
/* Face crossfade fires at the 90° point of the new rotation timing.
   Rotation runs from t=140ms to t=640ms with a strong ease-in-out, so the
   90° (midpoint) is at t≈390ms. Swap centered on that. Linear keeps it
   inconspicuous. */
.card-face { transition: opacity 100ms linear 340ms; }

/* paper texture */
.card-face::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(0,0,0,.04), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(0,0,0,.05), transparent 50%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.008) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.008) 0 1px, transparent 1px 3px);
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 1;
}
/* lanyard hole */
.card-face::after {
  content: "";
  position: absolute;
  top: 10px; left: 50%; transform: translateX(-50%);
  width: 48px; height: 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  box-shadow: 0 1px 0 rgba(255,255,255,.6);
  z-index: 2;
}

/* card content sits above texture */
.card-face > * { position: relative; z-index: 2; }

/* ===== PRO SIDE ===== */
.card-head {
  margin-top: 18px;
  text-align: center;
  font-family: 'Archivo Black', sans-serif;
  line-height: .95;
  letter-spacing: -0.01em;
  font-size: 22px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.card-head .line {
  display: inline-block;
  padding: 2px 6px;
  margin: 1px 0;
}
.card-head .line.hl {
  background: var(--card-ink);
  color: var(--card-bg);
  transform: rotate(-1.2deg);
}
.card-head .line.accent {
  color: var(--card-accent);
  transform: rotate(.8deg);
}

.photo-frame {
  position: relative;
  margin: 6px auto 14px;
  width: 62%;
  aspect-ratio: 1;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background:
    linear-gradient(135deg, #c7c2b8 0%, #e5dfd1 40%, #d1cbbd 100%);
  box-shadow:
    0 4px 12px -4px rgba(0,0,0,.25),
    0 0 0 4px var(--card-bg),
    0 0 0 5px rgba(0,0,0,.12);
}
.photo-frame img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  user-select: none; -webkit-user-drag: none;
  transition: transform 140ms var(--ease-out);
}
.photo-frame .ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(0,0,0,.35);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .1em;
  text-align: center; padding: 10px;
  text-transform: uppercase;
}
.photo-frame .ph svg { opacity: .5; margin-bottom: 8px; }
.photo-frame .upload-btn {
  position: absolute; inset: 0;
  background: rgba(20,18,16,.72);
  color: var(--paper);
  display: grid; place-items: center;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  opacity: 0; transition: opacity 200ms var(--ease-out);
  border: 0;
  border-radius: 50%;
}
.photo-frame:hover .upload-btn,
.editing .photo-frame .upload-btn { opacity: 1; }

/* floating photo tools (replace / zoom in/out) */
.photo-tools {
  position: absolute;
  bottom: 2px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 4px;
  background: rgba(20,18,16,.78);
  border-radius: 20px;
  padding: 3px;
  z-index: 4;
  opacity: 0;
  transition: opacity 160ms var(--ease-out);
}
.photo-frame:hover .photo-tools,
.kid-photo:hover .photo-tools,
.editing .photo-tools { opacity: 1; }
.pt-btn {
  width: 24px; height: 24px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700;
  line-height: 1; padding: 0;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background-color 140ms var(--ease-out), transform 140ms var(--ease-out);
}
.pt-btn:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) {
  .pt-btn:hover { background: rgba(255,255,255,.15); }
}

.name-tag {
  display: inline-block;
  background: var(--card-accent);
  color: var(--card-accent-ink);
  padding: 3px 10px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  letter-spacing: -0.01em;
  transform: rotate(-.8deg);
  margin-bottom: 3px;
}
.name-row { text-align: center; }
.title-row {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 500;
}

.meta-strip {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 2px;
  border-top: 1px dashed rgba(0,0,0,.18);
  border-bottom: 1px dashed rgba(0,0,0,.18);
  margin-bottom: 10px;
}
.meta-strip > div { text-align: center; flex: 1; min-width: 0; }
.meta-strip b {
  display: block;
  font-family: 'Archivo Black', sans-serif;
  font-size: 11px;
  color: var(--card-ink);
  letter-spacing: -0.01em;
  text-transform: none;
  margin-top: 2px;
  word-break: break-word;
}

.qr-strip {
  margin-top: auto;
  display: flex; align-items: center; gap: 10px;
  padding-top: 10px;
}
.qr-box {
  width: 52px; height: 52px;
  background: white;
  padding: 3px;
  border-radius: 4px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,.1);
}
.qr-box svg, .qr-box img { width: 100%; height: 100%; display: block; }
.qr-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  line-height: 1.35;
  letter-spacing: .04em;
  color: var(--muted);
  text-transform: uppercase;
  flex: 1;
  min-width: 0;
}
.qr-label b {
  display: block;
  color: var(--card-ink);
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.corner-stamp {
  position: absolute;
  top: 28px; right: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: .15em;
  color: var(--muted);
  text-transform: uppercase;
  transform: rotate(90deg);
  transform-origin: right top;
  z-index: 3;
}

/* ===== CHILDHOOD SIDE ===== */
.card-face.back {
  background:
    linear-gradient(180deg, var(--card-bg) 0%, color-mix(in srgb, var(--card-bg) 92%, #e8c07a) 100%);
}
.kid-head {
  margin-top: 20px;
  text-align: center;
  margin-bottom: 12px;
}
.kid-head .k1 {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: var(--muted);
  display: block;
  transform: rotate(-2deg);
}
.kid-head .k2 {
  font-family: 'Archivo Black', sans-serif;
  font-size: 28px;
  line-height: .95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  transform: rotate(-1deg);
  display: inline-block;
}
.kid-head .k2 span {
  color: var(--card-accent);
}

.kid-photo {
  width: 62%;
  margin: 4px auto 12px;
  aspect-ratio: 1;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,.25), 0 0 0 4px var(--card-bg), 0 0 0 5px rgba(0,0,0,.15);
  background: linear-gradient(135deg, #d4cec0, #ebe5d4);
}
.kid-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kid-photo .ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(0,0,0,.35);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-align: center;
}
.kid-photo .upload-btn {
  position: absolute; inset: 0;
  background: rgba(20,18,16,.72);
  color: var(--paper);
  display: grid; place-items: center;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  opacity: 0; transition: opacity 200ms var(--ease-out);
  border: 0; border-radius: 50%;
}
.kid-photo:hover .upload-btn,
.editing .kid-photo .upload-btn { opacity: 1; }

.editing .photo-frame .ph,
.editing .kid-photo .ph { opacity: 0; }

/* Make editing affordance obvious on childhood side */
.editing .kid-photo { outline: 2px dashed var(--card-accent); outline-offset: 3px; }
.editing .kid-photo::after {
  content: "✎ photo";
  position: absolute;
  top: -10px; right: -6px;
  background: var(--card-accent);
  color: var(--card-accent-ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: .1em;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  z-index: 4;
  pointer-events: none;
}
.editing .photo-frame { outline: 2px dashed var(--card-accent); outline-offset: 3px; }
.editing .photo-frame::after {
  content: "✎ photo";
  position: absolute;
  top: -10px; right: -6px;
  background: var(--card-accent);
  color: var(--card-accent-ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: .1em;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  z-index: 4;
  pointer-events: none;
}
.editing .kid-field {
  background: rgba(255,255,255,.4);
  padding: 5px 8px;
  margin-left: -4px; margin-right: -4px;
  margin-bottom: 8px;
  border-radius: 5px;
  outline: 1px dashed rgba(0,0,0,.25);
  position: relative;
}
.editing .kid-field::before {
  content: "✎";
  position: absolute;
  top: 4px; right: 6px;
  font-size: 11px;
  color: var(--card-accent);
  opacity: .7;
}
.editing .kid-field .val { min-height: 1.3em; }

.kid-field {
  margin-bottom: 10px;
  position: relative;
}
.kid-field .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
  display: flex; align-items: center; gap: 6px;
}
.kid-field .lbl::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--card-accent);
  display: inline-block;
}
.kid-field .val {
  font-family: 'Caveat', cursive;
  font-size: 19px;
  line-height: 1.15;
  color: var(--card-ink);
  font-weight: 600;
  padding: 0 2px;
}
.kid-field .val.small { font-size: 16px; font-weight: 500; }

.kid-foot {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed rgba(0,0,0,.18);
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* tighten kid side to avoid overflow on small card */
.card-face.back { padding-bottom: 22px; }
.card-wrap:not(.large) .kid-head { margin-top: 16px; margin-bottom: 8px; }
.card-wrap:not(.large) .kid-head .k1 { font-size: 14px; }
.card-wrap:not(.large) .kid-head .k2 { font-size: 22px; }
.card-wrap:not(.large) .kid-photo { width: 50%; margin: 2px auto 8px; }
.card-wrap:not(.large) .kid-field { margin-bottom: 6px; }
.card-wrap:not(.large) .kid-field .lbl { font-size: 7.5px; }
.card-wrap:not(.large) .kid-field .val { font-size: 15px; line-height: 1.1; }
.card-wrap:not(.large) .kid-field .val.small { font-size: 13px; }

/* large card kid side — extra bottom padding so kid-foot sits comfortably */
.card-wrap.large .card-face.back { padding: 26px 22px 28px; }
.card-wrap.large .card-face.front { padding: 22px 20px 28px; }
.card-wrap.large .kid-head { margin-top: 14px; margin-bottom: 10px; }
.card-wrap.large .kid-photo { width: 52%; margin: 2px auto 10px; }
.card-wrap.large .kid-field { margin-bottom: 8px; }
.card-wrap.large .kid-field .val { font-size: 20px; line-height: 1.12; }
.card-wrap.large .kid-field .val.small { font-size: 17px; line-height: 1.15; }
.card-wrap.large .kid-field .lbl { font-size: 9px; margin-bottom: 1px; }
.card-wrap.large .kid-foot { padding-top: 10px; }
.card-wrap.large.editing-kid .kid-field { padding: 4px 8px; }

/* breathing room above the bottom strips on front so qr/meta don't kiss the edge */
.qr-strip { padding-bottom: 4px; }
.card-wrap.large .qr-strip { padding-bottom: 6px; }
.card-wrap.large .meta-strip { padding: 8px 2px; }

/* ===== Editable field ===== */
.edit-input {
  background: transparent;
  border: 0;
  border-bottom: 1.5px dashed var(--card-accent);
  outline: 0;
  width: 100%;
  text-align: inherit;
  font: inherit;
  color: inherit;
  padding: 1px 2px;
}
.edit-input:focus { border-bottom-style: solid; background: rgba(255,255,255,.4); }

.inline-edit {
  cursor: text;
  border-radius: 3px;
  transition: background-color 150ms var(--ease-out);
  padding: 1px 2px;
  position: relative;
}
.editing .inline-edit:hover { background: rgba(0,0,0,.05); outline: 1px dashed var(--card-accent); outline-offset: 1px; }

/* ===== Flip button floating ===== */
.flip-hint {
  position: absolute;
  bottom: -46px;
  left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.flip-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  border: 0;
  display: grid; place-items: center;
  transition: transform 320ms var(--ease-back-soft), box-shadow 200ms var(--ease-out);
  box-shadow: 0 4px 10px -4px rgba(0,0,0,.3);
}
.flip-btn:active { transform: scale(0.92); transition: transform 120ms var(--ease-out); }
.flip-btn svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .flip-btn:hover { transform: rotate(180deg); }
}

/* ===== Profile page ===== */
.profile {
  max-width: 1200px; margin: 0 auto;
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 80px;
  align-items: start;
  padding-top: 20px;
}
@media (max-width: 900px) {
  .profile { grid-template-columns: 1fr; gap: 40px; }
  .profile .card-wrap { margin: 0 auto; }
}
.profile-detail h2 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.03em;
  line-height: .95;
  margin: 20px 0 14px;
}
.profile-detail .role {
  font-size: 18px;
  color: var(--muted);
  margin-bottom: 30px;
}
.profile-blocks {
  display: grid; gap: 18px;
}
.profile-block {
  background: rgba(255,255,255,.55);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  backdrop-filter: blur(8px);
}
.profile-block .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.profile-block .lbl::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--card-accent);
}
.profile-block .val {
  font-size: 18px;
  line-height: 1.4;
}
.profile-block .val.big {
  font-family: 'Archivo Black', sans-serif;
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.profile-block .val.kid {
  font-family: 'Caveat', cursive;
  font-size: 26px;
  font-weight: 600;
  color: var(--card-accent);
}

.share-bar {
  margin-top: 24px;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.share-chip {
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  border: 0; display: inline-flex; align-items: center; gap: 8px;
}
.share-chip.ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-strong);
}

.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--muted);
  text-decoration: none;
  margin-bottom: 16px;
  background: transparent; border: 0; padding: 0;
}
.back-link:hover { color: var(--ink); }

/* ===== Editor mode ===== */
.editor-hud {
  position: fixed;
  bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 50;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 12px;
  border-radius: 999px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.4);
}
.editor-hud .pill {
  background: rgba(255,255,255,.12);
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .08em; text-transform: uppercase;
}
.editor-hud .color-swatches { display: flex; gap: 4px; }
.editor-hud .sw {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}
.editor-hud .sw.active { border-color: var(--paper); }
.editor-hud .done-btn {
  background: var(--paper); color: var(--ink);
  padding: 6px 14px; border-radius: 999px;
  border: 0; font-weight: 700; font-size: 12px;
}

/* Make the flip button more prominent when the card is in edit mode */
.editing + .flip-hint .flip-btn,
.card-3d.no-click-flip + .flip-hint .flip-btn {
  background: var(--card-accent);
  color: var(--card-accent-ink);
  transform: scale(1.15);
  box-shadow: 0 6px 14px -4px rgba(0,0,0,.35);
}
.card-3d.no-click-flip + .flip-hint span {
  font-weight: 700;
  color: var(--card-ink);
}

/* Editing mode adds outlined field affordances that take vertical space — give
   both faces extra bottom padding so the qr-strip / kid-foot don't sit on the edge. */
.card-face.editing { padding-bottom: 46px; }
.card-wrap.large .card-face.front.editing { padding-bottom: 56px; }
.card-wrap.large .card-face.back.editing { padding-bottom: 56px; }

/* Belt-and-braces: in editing mode, drop the fixed 280:420 aspect ratio and use
   a min-height instead, so if content ever does overflow the implicit card height
   the card grows to fit instead of clipping the bottom. */
.card-3d.no-click-flip { aspect-ratio: auto; min-height: 420px; }
.card-wrap.large .card-3d.no-click-flip { min-height: 540px; }
button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--card-accent);
  outline-offset: 2px;
}

/* ===== Toast =====
   Transition + @starting-style instead of @keyframes so rapid retriggers
   retarget smoothly instead of restarting from zero. */
.toast {
  position: fixed;
  bottom: 80px; left: 50%;
  transform: translate(-50%, 0);
  opacity: 1;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  z-index: 100;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.4);
  transition:
    transform 320ms var(--ease-back-soft),
    opacity 240ms var(--ease-out);
}
@starting-style {
  .toast {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
}
/* Fallback for browsers without @starting-style: tiny scale instead of full opacity */
@supports not (selector(:where(*) > *)) {
  .toast { animation: toast-in 320ms var(--ease-back-soft); }
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ===== Reduced motion =====
   Don't kill transitions outright — Emil: reduced motion means fewer/gentler,
   not zero. Keep opacity/color transitions that aid comprehension, remove
   position/scale movement and the flip bounce. */
@media (prefers-reduced-motion: reduce) {
  .card-3d,
  .card-3d.is-flipping {
    transition: opacity 200ms linear;
    translate: 0 0 !important;
  }
  .card-stage {
    transform: none !important;
    transition: none;
  }
  .card-face .gloss { opacity: 0 !important; }
  .sw.aura { animation: none !important; }
  .gallery-item:hover,
  .add-yours:hover,
  .ep-share-btn:hover,
  .flip-btn:hover {
    transform: none !important;
  }
  .toast {
    transition: opacity 200ms linear;
  }
  @starting-style {
    .toast { transform: translate(-50%, 0); }
  }
}

/* ===== Dark page chrome =====
   The card and editor panel still use the original light/dark conventions.
   These overrides only touch the page shell — nav, brand, page-head, toast,
   editor-hud, gallery captions, add-yours — so they read on the dark base. */
.brand { color: var(--page-fg); }
.brand .dot { background: var(--page-fg); color: var(--page-bg); }

.nav-tabs {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--page-line);
}
.nav-tabs button { color: var(--page-fg-dim); }
.nav-tabs button.active { background: var(--page-fg); color: var(--page-bg); }
@media (hover: hover) and (pointer: fine) {
  .nav-tabs button:hover:not(.active) { color: var(--page-fg); }
}

.nav-btn {
  background: transparent;
  color: var(--page-fg);
  border-color: var(--page-line-strong);
}
@media (hover: hover) and (pointer: fine) {
  .nav-btn:hover { background: var(--page-fg); color: var(--page-bg); border-color: var(--page-fg); }
}
.nav-btn.primary { background: var(--page-fg); color: var(--page-bg); border-color: var(--page-fg); }
@media (hover: hover) and (pointer: fine) {
  .nav-btn.primary:hover { background: var(--page-fg-dim); }
}

.page-head h1 { color: var(--page-fg); }
.page-head h1 em { background: var(--page-fg); color: var(--page-bg); }
.page-head p { color: var(--page-fg-dim); }
.page-head .meta { color: var(--page-muted); }
.page-head .meta .sep { opacity: 0.4; }

/* HUD pill in preview mode — translucent elevated card on dark background */
.editor-hud {
  background: rgba(20, 18, 16, 0.7);
  color: var(--page-fg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--page-line);
}

/* Toast — translucent dark so it reads on the dark backdrop */
.toast {
  background: rgba(20, 18, 16, 0.92);
  color: var(--page-fg);
  border: 1px solid var(--page-line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Gallery + add-yours card — adapt to the dark page */
.gallery-item .cap { color: var(--page-fg-dim); }
.gallery-item .cap b { color: var(--page-fg); }
.add-yours {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--page-line-strong);
}
.add-yours .plus { background: var(--page-fg); color: var(--page-bg); }
.add-yours h3 { color: var(--page-fg); }
.add-yours p { color: var(--page-fg-dim); }
@media (hover: hover) and (pointer: fine) {
  .add-yours:hover {
    border-color: var(--page-fg);
    background: rgba(255, 255, 255, 0.08);
  }
}

/* Preview-mode subheader (in app.jsx) uses var(--muted) / var(--ink-2) inline —
   redirect those references in the preview context to the page tokens by
   targeting the wrapper. Note: the card itself uses --ink/--paper for its
   faces and is unaffected. */


/* =====================================================================
   Refresh: backdrop, hanging rig + woven strap, stage layout, settings tray
   ===================================================================== */

/* ----- Backdrop canvas (bg.jsx) ----- */
.backdrop {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}
.shell { transition: color 500ms var(--ease-out); }
.nav { position: relative; z-index: 3; }

/* ----- Hanging rig -----
   .rig swings as a whole from the top of the page (transform + origin are set
   by the physics loop). It owns the perspective so the card inside can tilt
   and flip in 3D while the lanyard stays flat on top of it. */
.rig { position: relative; perspective: 1400px; will-change: transform; }
.lanyard {
  position: relative;
  width: 100%;
  pointer-events: none;
  display: flex; flex-direction: column; align-items: center;
  z-index: 4;
  margin-bottom: -20px;             /* hook tip lands in the card's slot */
}
.card-wrap.large .lanyard { margin-bottom: -22px; }

/* ----- Stage layout: copy · card · tray ----- */
.stage-layout {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 320px) auto;
  grid-template-areas: "copy card" "tray card";
  grid-template-rows: auto 1fr;
  justify-content: center;
  align-items: start;
  gap: 22px 44px;
}
.stage-copy { grid-area: copy; padding-top: 34px; }
.stage-card { grid-area: card; padding: 64px 0 96px; }
.tray { grid-area: tray; }
@media (min-width: 1180px) {
  .stage-layout {
    grid-template-columns: minmax(0, 320px) auto minmax(0, 340px);
    grid-template-areas: "copy card tray";
    grid-template-rows: auto;
    gap: 22px 56px;
  }
  .stage-copy { padding-top: 96px; }
  .tray { margin-top: 70px; }
}
@media (max-width: 760px) {
  .stage-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "card" "copy" "tray"; justify-items: center; }
  .stage-copy { padding-top: 0; text-align: center; }
}
.stage-copy .eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--page-muted); margin-bottom: 12px;
}
.stage-copy h1 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(34px, 4.4vw, 54px);
  letter-spacing: -0.03em; line-height: .98; margin: 0 0 14px;
  color: var(--page-fg);
  text-wrap: balance;
}
.stage-copy h1 em {
  font-style: normal; background: var(--page-fg); color: var(--page-bg);
  padding: 0 .15em; display: inline-block;
  transition: background-color 500ms var(--ease-out), color 500ms var(--ease-out);
}
.stage-copy h1 em.tilted { transform: rotate(-1.5deg); }
.stage-copy p { color: var(--page-fg-dim); font-size: 15px; line-height: 1.5; margin: 0 0 10px; max-width: 42ch; }
.stage-copy p.hint { font-family: 'Caveat', cursive; font-size: 21px; line-height: 1.15; color: var(--page-fg); margin-top: 16px; }
.flip-hint, .card-3d.no-click-flip + .flip-hint span { color: var(--page-fg-dim); }

/* ----- Settings tray: quiet, neutral, minimal ----- */
.tray {
  width: 100%; max-width: 320px;
  background: #fff; color: #111;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 16px 40px -16px rgba(0,0,0,.28);
  padding: 14px;
  font-family: 'Inter', system-ui, sans-serif;
  display: flex; flex-direction: column;
}
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; background: #f1f1f0; border-radius: 9px; padding: 2px; }
.seg button {
  border: 0; background: transparent; border-radius: 7px; padding: 7px 8px;
  font-size: 12.5px; font-weight: 500; color: #6b6b6b;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.seg button.on { background: #fff; color: #111; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); }
@media (hover: hover) and (pointer: fine) { .seg button:not(.on):hover { color: #111; } }

.tray-sec { margin-top: 18px; }
.tray-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.tray-row h3 { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: -.005em; color: #111; }
.tray-val { font-size: 12px; color: #8a8a8a; }
.tray-tip { font-size: 11.5px; line-height: 1.45; color: #8a8a8a; margin: 10px 0 0; }

.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.sw {
  position: relative; width: 26px; height: 26px; padding: 0; border-radius: 50%;
  border: 0; background: var(--c); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
  outline: 2px solid transparent; outline-offset: 2px;
  transition: outline-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.sw.on { outline-color: #111; }
.sw:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) { .sw:not(.on):hover { outline-color: rgba(0,0,0,.2); } }
.sw.aura {
  background: linear-gradient(135deg, var(--a), var(--b) 50%, var(--c2)) 0 0 / 220% 220%;
  animation: sw-drift 7s ease-in-out infinite alternate;
}
@keyframes sw-drift { to { background-position: 100% 100%; } }
.sw.custom { display: grid; place-items: center; overflow: hidden; }
.sw.custom:not(.on) { background: #f1f1f0; animation: none; }
.sw.custom span { font-size: 15px; line-height: 1; color: #6b6b6b; }
.sw.custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.rows { display: grid; gap: 6px; }
.row-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: 9px; border: 1px solid rgba(0,0,0,.09);
  background: #fff; color: #111; font-size: 12.5px; font-weight: 500; text-align: left;
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.row-btn svg { color: #6b6b6b; flex: none; }
.row-btn span { flex: 1; }
.row-btn em { font-style: normal; font-size: 11.5px; color: #8a8a8a; }
.row-btn:disabled { opacity: .5; cursor: default; }
@media (hover: hover) and (pointer: fine) { .row-btn:not(:disabled):hover { background: #f7f7f6; border-color: rgba(0,0,0,.16); } }

.toggle { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-size: 12.5px; color: #111; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle i { width: 30px; height: 18px; border-radius: 999px; background: #d9d9d7; position: relative; flex: none; transition: background-color 200ms var(--ease-out); }
.toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform 200ms var(--ease-out); }
.toggle input:checked + i { background: #111; }
.toggle input:checked + i::after { transform: translateX(12px); }
.toggle input:focus-visible + i { outline: 2px solid #111; outline-offset: 2px; }

.tray-preview {
  margin-top: 18px; border: 0; background: #111; color: #fff;
  border-radius: 10px; padding: 11px 14px; font-size: 13px; font-weight: 600;
  transition: background-color 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.tray-preview:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) { .tray-preview:hover { background: #2b2b2b; } }

/* ----- Preview bar ----- */
.hud {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 50;
  display: flex; align-items: center; gap: 4px;
  max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none;
  background: #fff; color: #111; padding: 5px;
  border: 1px solid rgba(0,0,0,.08); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 16px 40px -14px rgba(0,0,0,.35);
  font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 500;
}
.hud button { flex: none; white-space: nowrap; border: 0; background: transparent; color: #111; padding: 8px 11px; border-radius: 8px; font-weight: 500; transition: background-color 160ms var(--ease-out); }
.hud button.ghost { color: #6b6b6b; }
.hud button:disabled { opacity: .5; cursor: default; }
@media (hover: hover) and (pointer: fine) { .hud button:not(:disabled):hover { background: #f1f1f0; } }
.hud-sep { flex: none; width: 1px; height: 18px; background: rgba(0,0,0,.1); margin: 0 3px; }

/* Preview bar: keep it on one line, scroll sideways if it can't fit */
.editor-hud { max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; }
.editor-hud .nav-btn, .editor-hud .pill { white-space: nowrap; flex: none; }
.card-stage.can-swing, .card-stage.can-swing * { user-select: none; -webkit-user-select: none; }


/* ----- Lanyard: real strap, D-ring and swivel hook -----
   All three come from one reference photo (assets/lanyard-*.png, strap-tile.png).
   Fabric is a neutral texture multiplied by the card colour; `mask` keeps the
   colour inside the fabric's silhouette. Sizes are fractions of the card width
   taken from the photo, so the pieces line up at any size. */
.lanyard, .card-wrap.large .lanyard { margin-bottom: -12.3%; }      /* hook tip lands in the slot */
.lan-end { position: relative; width: 42.8%; aspect-ratio: 160 / 226; }
.lan-fabric, .strap {
  background-color: var(--card-accent);
  background-blend-mode: multiply;
  transition: background-color 300ms var(--ease-out);
}
.lan-fabric {
  position: absolute; inset: 0;
  background-image: url(assets/lanyard-fabric.png);
  background-size: 100% 100%;
  -webkit-mask: url(assets/lanyard-fabric.png) center / 100% 100% no-repeat;
          mask: url(assets/lanyard-fabric.png) center / 100% 100% no-repeat;
}
.lan-metal {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  transform-origin: 50% 19.6%;               /* pivots where the ring passes through the strap */
  user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.28));
}
.strap {
  position: absolute; left: 49.7%; transform: translateX(-50%);
  top: -160vh; bottom: calc(100% - 1px);     /* runs off the top of the page, meets the photo's strap */
  width: 30%;
  background-image: url(assets/strap-tile.png);
  background-size: 100% auto; background-repeat: repeat-y; background-position: center bottom;
  -webkit-mask: url(assets/strap-tile.png) center bottom / 100% auto repeat-y;
          mask: url(assets/strap-tile.png) center bottom / 100% auto repeat-y;
}
.lanyard { filter: drop-shadow(0 3px 4px rgba(0,0,0,.22)); }
/* the slot is a real hole */
.card-face::after { top: 9px; width: 58px; height: 15px; background: rgba(10,10,12,.5); box-shadow: inset 0 2px 3px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.6); }

/* ----- Real ID-card proportions (CR80, 54 x 85.6 mm) in every mode -----
   The card never grows or clips: the photo is the one flexible element and
   takes whatever height the text leaves over. */
.card-3d, .card-3d.no-click-flip, .card-wrap.large .card-3d.no-click-flip { aspect-ratio: 54 / 85.6; min-height: 0; }
.card-face { border-radius: 5.9% / 3.72%; }
.card-face.editing,
.card-wrap.large .card-face.front, .card-wrap.large .card-face.front.editing { padding: 22px 20px 18px; }
.card-wrap.large .card-face.back, .card-wrap.large .card-face.back.editing { padding: 24px 22px 18px; }
.photo-slot { flex: 1 1 0; min-height: 0; display: grid; place-items: center; container-type: size; padding: 8px 0 10px; }
.photo-slot .photo-frame, .photo-slot .kid-photo,
.card-wrap.large .photo-slot .kid-photo, .card-wrap:not(.large) .photo-slot .kid-photo {
  width: min(64cqw, 100cqh); height: min(64cqw, 100cqh); aspect-ratio: auto; margin: 0; flex: none;
}
.card-head { margin-bottom: 4px; }
.kid-head, .card-wrap.large .kid-head { margin-bottom: 2px; }
.editing .kid-field, .card-wrap.large.editing-kid .kid-field { padding: 3px 8px; margin-bottom: 6px; }
/* the note fields grow with what you type, so edit and preview stay the same size */
.kid-field .edit-input { min-height: 1.25em !important; line-height: 1.15; overflow: hidden; display: block; field-sizing: content; }
@supports not (field-sizing: content) { .kid-field .edit-input { height: 2.4em; } }
.kid-foot, .card-wrap.large .kid-foot { margin-top: 6px; padding-top: 8px; }

/* two QR codes side by side */
.qr-strip, .card-wrap.large .qr-strip { margin-top: 0; padding: 0; gap: 10px; }
.qr-item { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 7px; }
.qr-box { width: 44px; height: 44px; }
.qr-label { font-size: 7.5px; }
.qr-label b { font-size: 9.5px; }
.meta-strip, .card-wrap.large .meta-strip { margin-bottom: 10px; }

/* off-screen clean copy used for every export */
.capture-rig { position: fixed; left: -10000px; top: 0; pointer-events: none; }


/* ----- Save video dialog ----- */
.modal-veil {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px;
  background: rgba(10,10,12,.45); backdrop-filter: blur(6px);
  animation: veil-in 180ms var(--ease-out);
}
@keyframes veil-in { from { opacity: 0; } }
.modal {
  width: 100%; max-width: 380px; background: #fff; color: #111; border-radius: 16px; padding: 20px;
  font-family: 'Inter', system-ui, sans-serif;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.5);
  animation: modal-in 260ms var(--ease-out);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.modal h2 { margin: 0 0 4px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.modal p { margin: 0 0 16px; font-size: 12.5px; line-height: 1.45; color: #6b6b6b; }
.modal-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modal-opt {
  padding: 8px 8px 10px; background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 12px;
  font-size: 12.5px; font-weight: 500; color: #111; text-align: center;
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.modal-opt:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .modal-opt:hover { border-color: #111; background: #fafafa; } }
.modal-thumb {
  position: relative; display: block; aspect-ratio: 9 / 13; border-radius: 8px; margin-bottom: 9px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.modal-thumb::before { content: ""; position: absolute; left: 50%; top: 0; width: 12%; height: 34%; transform: translateX(-50%); background: var(--strap); }
.modal-thumb::after { content: ""; position: absolute; left: 50%; top: 32%; width: 44%; aspect-ratio: 54 / 85.6; transform: translateX(-50%); background: #fbf6e9; border-radius: 6% / 4%; box-shadow: 0 6px 14px -4px rgba(0,0,0,.4); }
.modal-cancel { display: block; margin: 14px auto 0; border: 0; background: none; font-size: 12.5px; color: #6b6b6b; padding: 6px 10px; border-radius: 8px; }
@media (hover: hover) and (pointer: fine) { .modal-cancel:hover { color: #111; background: #f1f1f0; } }


/* ----- Shorter strap: the nav floats over the top corners so the badge can hang higher ----- */
.nav { position: absolute; top: 28px; left: 32px; right: 32px; margin: 0; }
.stage-card { padding-top: 34px; }
.stage-copy { padding-top: 96px; }
@media (min-width: 1180px) { .stage-copy { padding-top: 120px; } .tray { margin-top: 84px; } }
@media (max-width: 760px) { .stage-copy { padding-top: 0; } }


/* ----- Links ----- */
.link-box { width: 100%; margin-bottom: 6px; padding: 8px 10px; border: 1px solid rgba(0,0,0,.09); border-radius: 9px; background: #f7f7f6; font: 12px 'JetBrains Mono', monospace; color: #444; outline: 0; }
.row-btn.strong { background: #111; color: #fff; border-color: #111; }
.row-btn.strong svg { color: #fff; }
@media (hover: hover) and (pointer: fine) { .row-btn.strong:not(:disabled):hover { background: #2b2b2b; border-color: #2b2b2b; } }
.view-cta { display: inline-block; margin-top: 18px; padding: 10px 16px; border-radius: 10px; background: var(--page-fg); color: var(--page-bg); font-size: 13px; font-weight: 600; text-decoration: none; transition: background-color 500ms var(--ease-out), color 500ms var(--ease-out); }
.view-msg { position: relative; z-index: 1; min-height: 80vh; display: grid; place-content: center; text-align: center; }
.view-msg h1 { font-family: 'Archivo Black', sans-serif; font-size: 28px; letter-spacing: -.02em; margin: 0 0 8px; }
.view-msg p { margin: 0; color: var(--page-fg-dim); }


/* toast: always light text on its dark pill, whatever the page colour */
.toast { color: #f5efe2; border-color: rgba(255,255,255,.14); }
/* custom solid-colour swatch */
.sw.custom.solid.on { background: var(--c); }
/* longer upload label on the childhood photo */
.kid-photo .upload-btn { padding: 0 18%; line-height: 1.35; text-align: center; }

/* ----- The lanyard slot is a real hole -----
   The face is masked with a pill-shaped cut-out, so the page behind (office
   colour or northern lights) shows through it. A mask would also cut off the
   card's drop shadow, so the shadow moves to its own layer behind the faces. */
.card-face {
  --slot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 20'%3E%3Crect width='80' height='20' rx='10'/%3E%3C/svg%3E");
  -webkit-mask: var(--slot) center 3.4% / 22.4% auto no-repeat, linear-gradient(#000 0 0);
          mask: var(--slot) center 3.4% / 22.4% auto no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}
.card-face::after { display: none; }
.card-3d::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: 5.9% / 3.72%;
  box-shadow: 0 20px 40px -16px rgba(0,0,0,.25), 0 4px 12px -4px rgba(0,0,0,.15);
}


/* childhood side: four prompts, no footer */
.card-wrap.large .card-face.back, .card-wrap.large .card-face.back.editing { padding-bottom: 14px; }
.kid-field:last-child, .card-wrap.large .kid-field:last-child, .editing .kid-field:last-child { margin-bottom: 0; }
.kid-field .val .edit-input:not(textarea) { height: auto; }


/* room for the lanyard slot (it sits 23-43px down the card) */
.card-wrap.large .card-face.front, .card-wrap.large .card-face.front.editing { padding-top: 50px; }
.card-wrap.large .card-face.back, .card-wrap.large .card-face.back.editing { padding-top: 40px; padding-bottom: 26px; }
.corner-stamp { top: 50px; }


/* ----- Childhood side handwriting: one font, one weight, one size ----- */
.kid-head .k1 { font-family: 'Kalam', 'Patrick Hand', cursive; font-weight: 400; font-size: 15.5px; }
.kid-field .val, .kid-field .val.small,
.card-wrap.large .kid-field .val, .card-wrap.large .kid-field .val.small {
  font-family: 'Kalam', 'Patrick Hand', cursive; font-weight: 400; font-size: 15.5px; line-height: 1.25;
}
/* view-only page copy */
.stage-copy p.lead { font-size: 16px; color: var(--page-fg); max-width: 36ch; }


/* clear the lanyard slot above "but before all that," */
.card-wrap.large .card-face.back, .card-wrap.large .card-face.back.editing { padding-top: 54px; }
.kid-head, .card-wrap.large .kid-head { margin-top: 0; }
.kid-head .k1 { line-height: 1.3; padding-bottom: 2px; }
/* example text in unanswered prompts */
.kid-field .val .is-empty { opacity: .45; }
.kid-field .edit-input::placeholder { color: currentColor; opacity: .45; }


/* ----- "Almost there" checklist and locked preview bar ----- */
.row-btn.todo i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #b9b9b6; flex: none; }
.hud-note { padding: 0 10px 0 12px; color: #444; white-space: nowrap; }
.hud button.solid { background: #111; color: #fff; }
@media (hover: hover) and (pointer: fine) { .hud button.solid:hover { background: #2b2b2b; } }


/* =====================================================================
   Phones
   The badge hangs from the top edge of the screen; the settings are a
   sheet that slides up from the bottom; the copy sits under the badge.
   ===================================================================== */
.tray-handle { display: none; }
.tray-scroll { display: flex; flex-direction: column; }

@media (max-width: 760px) {
  .shell { padding: 0 14px 150px; }
  .nav { top: 12px; left: 12px; right: 12px; }
  .nav-tabs { padding: 3px; }
  .nav-tabs button, .nav-btn { padding: 6px 10px; font-size: 12px; }

  .stage-layout { display: block; }
  .stage-card { padding: 0 0 78px; display: grid; justify-content: center; }
  .stage-card .card-wrap { zoom: .8; }
  .stage-copy { padding: 0 6px; text-align: center; }
  .stage-copy h1 { font-size: 32px; }
  .stage-copy p { margin-left: auto; margin-right: auto; font-size: 14.5px; }
  .stage-copy p.hint { font-size: 19px; }
  .flip-hint { bottom: -52px; white-space: nowrap; }

  /* settings: bottom sheet */
  .tray {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    max-width: none; margin: 0;
    border-radius: 18px 18px 0 0; border-bottom: 0;
    padding: 0 14px calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 40px -12px rgba(0,0,0,.4);
  }
  .tray-handle { display: grid; place-items: center; width: 100%; height: 22px; border: 0; background: none; padding: 0; }
  .tray-handle i { width: 36px; height: 4px; border-radius: 4px; background: #d0d0cd; }
  .tray-scroll { max-height: min(46vh, 380px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 2px; }
  .tray.is-collapsed .tray-scroll { display: none; }
  .tray.is-collapsed .seg button.on { background: transparent; box-shadow: none; color: #6b6b6b; }
  .seg button { padding: 9px 8px; font-size: 13px; }
  .sw { width: 30px; height: 30px; }
  .swatches { gap: 12px; }
  .row-btn { padding: 11px 12px; font-size: 13.5px; }

  /* preview bar: full width, wraps instead of scrolling */
  .hud { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); transform: none; max-width: none; flex-wrap: wrap; justify-content: center; overflow: visible; }
  .hud-sep { display: none; }
  .hud-note { white-space: normal; text-align: center; padding: 6px 8px; }
  .stage-layout.is-preview, .stage-layout.is-view { padding-bottom: 40px; }
  .toast { bottom: 150px; max-width: calc(100vw - 32px); text-align: center; border-radius: 16px; }
  .view-cta { margin-bottom: 30px; }
}

@media (max-width: 760px) {
  /* badge first, copy under it; a short strap so the card sits near the top of the screen */
  .stage-layout { display: flex; flex-direction: column; }
  .stage-card { order: 1; margin-top: -84px; }
  .stage-copy { order: 2; }
  .tray-scroll { scrollbar-width: none; }
  .tray-scroll::-webkit-scrollbar { display: none; }
}
@media (max-width: 760px) {
  .stage-card { display: block; margin-top: -34px; }
  .stage-card .card-wrap { margin: 0 auto; }
}
@media (max-width: 760px) {
  /* a zoomed box still lays out at its unzoomed width, so centre it by hand */
  .stage-card .card-wrap { margin: 0 0 0 calc((100vw - 28px - 288px) / 2 / .8); }
}


/* ----- Phones: title on top, badge hanging beneath it -----
   The copy block is dissolved so its parts can be ordered separately:
   small line + headline first, then the badge, then the rest of the text.
   The strap rises behind the headline and fades out, so the words stay
   sharp and readable while the badge still appears to hang from the top. */
@media (max-width: 760px) {
  .stage-layout { padding-top: 62px; }
  .stage-copy { display: contents; }
  .stage-copy > * { order: 3; text-align: center; margin-left: auto; margin-right: auto; }
  .stage-copy .eyebrow { order: 0; position: relative; z-index: 6; margin-bottom: 8px; font-size: 10px; }
  .stage-copy h1 { order: 0; position: relative; z-index: 6; margin-bottom: 0; }
  .stage-card { order: 1; margin-top: 26px; }
  .stage-copy .view-cta { display: table; }
  .strap {
    top: -230px;
    -webkit-mask: url(assets/strap-tile.png) center bottom / 100% auto repeat-y, linear-gradient(transparent 0, rgba(0,0,0,.25) 110px, #000 190px);
            mask: url(assets/strap-tile.png) center bottom / 100% auto repeat-y, linear-gradient(transparent 0, rgba(0,0,0,.25) 110px, #000 190px);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
}


/* ----- Phones: smaller title so the whole badge fits above the settings sheet ----- */
@media (max-width: 760px) {
  .stage-layout { padding-top: 54px; }
  .stage-copy .eyebrow { font-size: 9px; margin-bottom: 5px; }
  .stage-copy h1 { font-size: 21px; letter-spacing: -.02em; line-height: 1.1; }
  .stage-card { margin-top: 14px; padding-bottom: 70px; }
  .stage-card .card-wrap { zoom: .76; margin-left: calc((100vw - 28px - 273.6px) / 2 / .76); }
  .flip-hint { bottom: -50px; }
}



/* ----- Phones: centred, larger title; shorter strap; how-to as a pop-up ----- */
.modal.intro ul { margin: 10px 0 0; padding: 0 0 0 18px; font-size: 14px; line-height: 1.5; color: #333; }
.modal.intro li + li { margin-top: 6px; }
.modal.intro .tray-preview { width: 100%; }
@media (max-width: 760px) {
  .stage-copy .eyebrow, .stage-copy h1 { width: 100%; max-width: none; margin-left: 0; margin-right: 0; text-align: center; }
  .stage-copy h1 { font-size: 27px; line-height: 1.05; text-wrap: balance; padding: 0 8px; }
  .stage-card { margin-top: -22px; }                       /* title overlaps the top of the strap: less strap showing */
  .strap { top: -200px; }
  .stage-layout.is-edit .stage-copy p { display: none; }   /* shown in the pop-up instead */
}

/* ----- Readability pass on the professional side (the photo gives up the space) ----- */
.card-wrap.large .name-tag { font-size: 15.5px; padding: 4px 14px; }
.card-wrap.large .title-row { font-size: 13px; margin-bottom: 9px; }
.card-wrap.large .meta-strip { font-size: 9.5px; padding: 8px 2px; }
.card-wrap.large .meta-strip b { font-size: 13px; margin-top: 3px; }
.card-wrap.large .qr-label { font-size: 8.5px; }
.card-wrap.large .qr-label b { font-size: 11px; }
.card-wrap.large .qr-box { width: 46px; height: 46px; }
/* "WORK · ID" runs down the right edge, fully inside the card */
.corner-stamp { top: 52px; right: 9px; transform: none; writing-mode: vertical-rl; white-space: nowrap; line-height: 1; }
/* childhood side: a little more air between the slot and "but before all that," */
.card-wrap.large .card-face.back, .card-wrap.large .card-face.back.editing { padding-top: 64px; }
.card-wrap.large .meta-strip b { font-size: 12px; }
.card-wrap.large .meta-strip > div:nth-child(2) { flex: 1.5; }
.card-wrap.large .name-tag { padding: 4px 12px; }


/* ----- Phones: the badge sizes itself to the screen (--card-zoom is set by fitBadge in app.jsx) ----- */
@media (max-width: 760px) {
  .stage-card .card-wrap,
  .stage-card .card-wrap:is(.large) { zoom: var(--card-zoom, .8); margin: 0 0 0 calc((100vw - 28px) / 2 / var(--card-zoom, .8) - 180px); }
  /* the flip button moves up beside the hook, clear of the settings sheet */
  .flip-hint { top: 96px; right: 6px; bottom: auto; left: auto; transform: none; z-index: 5; }
  .flip-hint span { display: none; }
  .flip-btn, .card-3d.no-click-flip + .flip-hint .flip-btn { width: 46px; height: 46px; transform: none; }
  .flip-btn svg { width: 20px; height: 20px; }
  .stage-card { padding-bottom: 16px; }
}

/* short phones: drop the small line and shrink the title so the badge gets the room */
@media (max-width: 760px) and (max-height: 699px) {
  .stage-copy .eyebrow { display: none; }
  .stage-copy h1 { font-size: 20px; }
}
@media (max-width: 760px) { .tray-scroll { max-height: min(34vh, 300px); } }

/* Link name field */
.link-name { display: flex; align-items: center; margin-bottom: 6px; border: 1px solid rgba(0,0,0,.14); border-radius: 9px; background: #fff; overflow: hidden; font: 12px 'JetBrains Mono', monospace; }
.link-name:focus-within { border-color: #111; }
.link-name span { padding: 8px 0 8px 10px; color: #8a8a8a; white-space: nowrap; flex: none; }
.link-name input { flex: 1; min-width: 0; padding: 8px 10px 8px 0; border: 0; outline: 0; background: transparent; font: inherit; color: #111; }
.link-name input::placeholder { color: #b5b5b5; }
.tray-tip.link-warn { margin: 0 0 6px; color: #a4501a; }
@media (max-width: 760px) { .link-name input { font-size: 16px; } }

/* Example text in any empty card field is greyed, on both sides */
.card-face .edit-input::placeholder { color: currentColor; opacity: .45; }
.card-face .is-empty { opacity: .45; }

/* Years, company and base: semi-bold instead of the heavy display face */
.meta-strip b, .meta-strip b .edit-input { font-family: 'Archivo', sans-serif; font-weight: 600; letter-spacing: 0; }

/* A browser's autofill paints its own pale-blue box behind a field. Keep card fields clean. */
.edit-input:-webkit-autofill, .edit-input:-webkit-autofill:hover, .edit-input:-webkit-autofill:focus, .edit-input:autofill {
  -webkit-text-fill-color: currentColor;
  caret-color: currentColor;
  transition: background-color 999999s 0s, color 999999s 0s;
  background-clip: text; -webkit-background-clip: text;
}

/* Childhood side: intro line 6px higher, heading and photo pulled up, the freed room goes to the answers */
.card-wrap.large .card-face.back, .card-wrap.large .card-face.back.editing { padding-top: 58px; }
.kid-head .k2 { display: inline-block; margin-top: -8px; }
.card-wrap.large .card-face.back .photo-slot { padding-top: 12px; padding-bottom: 16px; }
.kid-field, .card-wrap.large .kid-field, .editing .kid-field, .card-wrap.large.editing-kid .kid-field { margin-bottom: 9px; }
.kid-field:last-child, .card-wrap.large .kid-field:last-child, .editing .kid-field:last-child { margin-bottom: 0; }

/* Softer glare: a faint sheen on the card, and none over the photos so faces stay clear */
.card-face .gloss {
  background: radial-gradient(260px circle at var(--gloss-x, 50%) var(--gloss-y, 50%), rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 62%);
}
.card-face .photo-slot { position: relative; z-index: 4; }

/* Dark card background: grey labels, hairlines and answer boxes switch to light versions */
.card-face.dark-face { --muted: color-mix(in srgb, var(--card-ink) 62%, transparent); border-color: rgba(255,255,255,.08); }
.card-face.dark-face .meta-strip, .card-face.dark-face .qr-strip { border-color: rgba(255,255,255,.22); }
.card-face.dark-face .kid-field { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); }
.card-face.dark-face [style*="dashed"], .card-face.dark-face hr { border-color: rgba(255,255,255,.22); }

/* ----- Laptops and desktops: everything fits the window height (--card-zoom and --tray-max come from fitBadge) ----- */
@media (min-width: 761px) {
  .shell { padding-bottom: 12px; }
  .stage-card { padding-bottom: 50px; }
  .stage-card .card-wrap, .stage-card .card-wrap:is(.large) { zoom: var(--card-zoom, 1); }
  .tray { max-height: var(--tray-max, none); }
  .tray-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; margin-right: -6px; padding-right: 6px; }
}
/* Short laptop windows: a more compact title block leaves room for the settings panel */
@media (min-width: 761px) and (max-height: 860px) {
  .stage-copy { padding-top: 76px; }
  .stage-copy h1 { font-size: clamp(30px, 3.6vw, 44px); margin-bottom: 10px; }
  .stage-copy p { font-size: 14px; margin-bottom: 6px; }
  .stage-copy p.hint { font-size: 19px; margin-top: 8px; }
  .stage-layout { row-gap: 14px; }
}
@media (min-width: 1180px) and (max-height: 860px) { .stage-copy { padding-top: 96px; } .tray { margin-top: 70px; } }
@media (min-width: 761px) and (max-height: 700px) {
  .stage-copy { padding-top: 64px; }
  .stage-copy .eyebrow { display: none; }
  .stage-copy p:not(.hint) { display: none; }
}

/* Style panel: room for the selected-swatch ring, and no sideways scroll */
.tray-scroll { margin-left: -6px; margin-right: -6px; padding-left: 6px; padding-right: 6px; overflow-x: hidden; }

/* Age picker in the childhood heading */
.age-pick {
  appearance: none; -webkit-appearance: none; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  background: transparent; border: 0; border-bottom: 2px dashed var(--card-accent); border-radius: 0;
  padding: 0 .05em; margin: 0; cursor: pointer; text-align: center; text-align-last: center; field-sizing: content; min-width: .9em;
}
.age-pick:focus-visible { outline: 2px solid var(--card-accent); outline-offset: 2px; }
.age-pick option { font: 500 14px 'Inter', sans-serif; color: #111; text-transform: none; }
.kid-or { font: 500 7.5px 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; text-align: center; color: var(--muted); opacity: .8; margin: -5px 0 4px; }

/* The clip is drawn in two parts: the ring stays, the hook below the swivel turns with the card */
div.lan-metal > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.lan-ring { clip-path: inset(0 0 51.7% 0); }
.lan-hook { clip-path: inset(48.3% 0 0 0); transform-origin: 48.8% 50%; transition: transform 500ms var(--ease-in-out) 140ms; }
.lan-metal.turned .lan-hook { transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) { .lan-hook { transition: none; } }

/* ----- Print file only: small text is enlarged so it stays readable at 55 x 85 mm ----- */
.capture-rig.for-print .title-row { font-size: 15px; }
.capture-rig.for-print .meta-strip, .capture-rig.for-print .card-wrap.large .meta-strip { font-size: 11px; letter-spacing: .04em; }
.capture-rig.for-print .meta-strip b, .capture-rig.for-print .card-wrap.large .meta-strip b { font-size: 15px; }
.capture-rig.for-print .qr-item span, .capture-rig.for-print .qr-item b { font-size: 12.5px; }
.capture-rig.for-print .qr-label { font-size: 10px; }
.capture-rig.for-print .kid-field .lbl, .capture-rig.for-print .card-wrap.large .kid-field .lbl { font-size: 10.5px; letter-spacing: .06em; }
.capture-rig.for-print .kid-field .val, .capture-rig.for-print .kid-field .val span { font-size: 16.5px; }
.capture-rig.for-print .kid-head .k1 { font-size: 16.5px; }
.capture-rig.for-print .card-face.back .photo-slot { padding-top: 6px; padding-bottom: 8px; }

/* ----- Page heading: the highlighted word keeps clear of the lines above and below ----- */
.stage-copy h1 { line-height: 1.12; }
.stage-copy h1 em { line-height: 1; padding: .02em .15em .06em; }
/* the small line above the heading stays readable on any page colour */
.stage-copy .eyebrow { color: var(--page-fg); opacity: .78; }

/* ----- Professional side, top lines: more air between them, first line a little higher ----- */
.card-head, .card-wrap.large .card-head { margin-top: 8px; margin-bottom: 8px; line-height: 1; }
.card-head .line { margin: 4px 0; max-width: 100%; white-space: nowrap; }
.name-row { margin-bottom: 9px; }

/* Example text in empty card fields: one grey that shows on the card, the dark bar and the name tag */
.card-face .edit-input::placeholder { color: #ACACAC; opacity: 1; }
.card-face .is-empty { color: #ACACAC; opacity: 1; }
.kid-field .edit-input::placeholder { color: #ACACAC; opacity: 1; }
.kid-field .val .is-empty { color: #ACACAC; opacity: 1; }

/* Age picker: the big number is plain text; a small invisible menu sits over it, so the list that
   opens is normal menu size instead of heading size. */
.age-wrap { position: relative; display: inline-block; border-bottom: 1.5px dashed var(--card-accent); padding: 0 .12em; cursor: pointer; }
.age-wrap .age-pick { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; padding: 0; border: 0;
  font: 400 13px 'Inter', system-ui, sans-serif; letter-spacing: 0; text-transform: none; }
.age-wrap:focus-within { outline: 2px solid var(--card-accent); outline-offset: 2px; }
.kid-head .k2 .age-wrap, .kid-head .k2 .age-num, .card-wrap.large .kid-head .k2 .age-wrap, .card-wrap.large .kid-head .k2 .age-num { color: var(--card-ink); }
/* Phones: a bigger area to tap for the age, and 16px so iPhones don't zoom the page when it opens */
@media (max-width: 760px) {
  .age-wrap .age-pick { inset: -10px -12px; width: calc(100% + 24px); height: calc(100% + 20px); font-size: 16px; }
}

/* ----- In-app colour picker (Android, whose own picker only offers eight fixed colours) ----- */
.sw.custom .cp-open { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; cursor: pointer; }
.cp-veil { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.28); display: flex; align-items: flex-end; justify-content: center; }
.cp { width: min(100%, 420px); background: #fff; color: #111; border-radius: 22px 22px 0 0; padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -16px 50px -10px rgba(0,0,0,.45); font-family: 'Inter', system-ui, sans-serif; touch-action: none; }
.cp-head { display: flex; align-items: center; justify-content: center; position: relative; height: 34px; margin-bottom: 12px; font-size: 15px; }
.cp-x { position: absolute; right: -4px; top: 0; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #f1f1f0; color: #333; font-size: 13px; }
.cp-sv { position: relative; height: 190px; border-radius: 14px; touch-action: none; cursor: crosshair;
  background-image: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent) !important; background-blend-mode: normal; }
.cp-hue { position: relative; height: 26px; border-radius: 13px; margin: 16px 0; touch-action: none; cursor: pointer;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.cp-sv i, .cp-hue i { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.45); pointer-events: none; }
.cp-hue i { top: 50%; }
.cp-foot { display: flex; align-items: center; gap: 10px; }
.cp-chip { width: 44px; height: 44px; border-radius: 12px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.cp-hex { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid rgba(0,0,0,.16); border-radius: 12px; font: 500 16px 'JetBrains Mono', monospace; color: #111; background: #fff; outline: 0; text-transform: lowercase; }
.cp-done { height: 44px; padding: 0 20px; border: 0; border-radius: 12px; background: #111; color: #fff; font: 600 14px 'Inter', sans-serif; }

/* ----- Phones: the heading sits to the left of the strap, so the strap never runs through the words ----- */
@media (max-width: 760px) {
  .stage-layout { position: relative; }
  .stage-copy .eyebrow { display: none; }
  .stage-copy h1 {
    position: absolute; top: 60px; left: 4px; z-index: 6;
    width: calc(50vw - 22px - 62px * var(--card-zoom, .8)); max-width: none; margin: 0; padding: 0;
    text-align: left; font-size: 19px; line-height: 1.16; letter-spacing: -.02em; text-wrap: balance; overflow-wrap: anywhere;
  }
  .stage-card { margin-top: 55px; }
}
@media (max-width: 760px) and (max-height: 699px) {
  .stage-copy h1 { font-size: 17px; top: 56px; }
  .stage-card { margin-top: 23px; }
}

/* ----- Professional side, top lines: bigger type, the job-title strip the biggest, more air between ----- */
.card-head, .card-wrap.large .card-head { margin-top: 4px; margin-bottom: 10px; }
.card-head .line { margin: 6px 0; padding: 2px 7px; }
.card-head .line.hl { padding: 4px 9px 3px; }

/* the + stays on the "pick your own" swatch after a colour is chosen, so it still reads as the picker */
.sw.custom.on span { color: #fff; text-shadow: 0 0 2px rgba(0,0,0,.9), 0 0 5px rgba(0,0,0,.55); position: relative; z-index: 1; pointer-events: none; }

/* ----- Phones: heading a little bigger and lower, clear of the Edit / Preview buttons ----- */
@media (max-width: 760px) {
  .stage-copy h1 { top: 80px; font-size: calc((50vw - 22px - 62px * var(--card-zoom, .8)) * .185); }
}
@media (max-width: 760px) and (max-height: 699px) {
  .stage-copy h1 { top: 70px; font-size: calc((50vw - 22px - 62px * var(--card-zoom, .8)) * .17); }
}

/* ----- Photo circle: sized by PhotoArea in card.jsx (see there), not by container units ----- */
.photo-slot { container-type: normal; }
.photo-slot .photo-frame, .photo-slot .kid-photo,
.card-wrap.large .photo-slot .kid-photo, .card-wrap:not(.large) .photo-slot .kid-photo {
  width: var(--photo-pct, 64%); height: auto; aspect-ratio: 1 / 1;
}

/* ----- Words on the card print exactly as typed: no forced capitals ----- */
.card-head, .card-head .line, .card-head .edit-input, .name-tag, .name-tag .edit-input { text-transform: none; }

/* ----- Childhood answers: the boxes are an editing aid only, never on the finished badge or in a file ----- */
.card-face:not(.editing) .kid-field, .card-face.dark-face:not(.editing) .kid-field { background: none; outline: 0; border-color: transparent; }
.card-face:not(.editing) .kid-field::before { content: none; }

/* ----- Finished badge: QR codes carry the links, so only their names are printed ----- */
.qr-label.done { text-transform: none; letter-spacing: .02em; font-size: 8.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-label.done b { font-size: 11px; margin-bottom: 1px; }
.card-wrap.large .qr-label.done { font-size: 9.5px; }
.card-wrap.large .qr-label.done b { font-size: 12.5px; }
.capture-rig.for-print .qr-label.done { font-size: 11px; }
.capture-rig.for-print .qr-label.done b { font-size: 14px; }

/* ----- Childhood side, while editing: a line above the heading says the age can be changed ----- */
.kid-head { position: relative; }
.age-help { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 5px; white-space: nowrap;
  font: 500 8.5px 'JetBrains Mono', monospace; letter-spacing: .04em; text-transform: none;
  background: var(--card-accent); color: var(--card-accent-ink); padding: 3px 8px; border-radius: 20px; }
.age-help::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--card-accent); }

/* ----- Photos, while editing: the tag says what a tap does ----- */
.editing .photo-frame::after, .editing .kid-photo::after { content: "tap to change photo"; }