/* ORIGIN v2 — reusable components */

.pad { padding: 8px var(--pad-screen) 24px; }

/* Typography */
h1.title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.sub { color: var(--body); font-size: 15px; line-height: 1.5; margin-top: 10px; }
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cobalt);
}
.serif-head {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
}

/* Buttons */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: var(--btn-h);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cobalt) 92%, #fff), var(--cobalt));
  color: #fff;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-btn);
  transition: transform 0.12s, filter 0.15s;
}
.btn:active { transform: scale(0.975); }
.btn:hover { filter: brightness(1.04); }
.btn.ghost {
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
  border: 1px solid var(--line);
}
.btn svg { width: 18px; height: 18px; }
.linkrow {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--cobalt);
  padding: 12px;
  cursor: pointer;
}

/* Cards — warm paper material */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.sticky-cta {
  position: sticky;
  bottom: 0;
  padding: 14px var(--pad-screen) 16px;
  background: linear-gradient(180deg, transparent, var(--paper) 28%);
  z-index: 11;
}
.view:has(.sticky-cta) {
  padding-bottom: 132px;
}
.view:has(.sticky-cta:has(.btn + .btn)),
.view:has(.sticky-cta:has(.footer-link)) {
  padding-bottom: 184px;
}
.view:has(> .sticky-cta) > :not(.sticky-cta):last-of-type {
  margin-bottom: 88px;
}
.view:has(> .sticky-cta:has(.btn + .btn)) > :not(.sticky-cta):last-of-type,
.view:has(> .sticky-cta:has(.footer-link)) > :not(.sticky-cta):last-of-type {
  margin-bottom: 120px;
}
.insight-unlock:has(.sticky-cta),
.paywall:has(.sticky-cta),
.future-screen:has(.sticky-cta) {
  padding-bottom: 88px;
}

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--chip-h);
  font-size: 15px;
  font-weight: 500;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--body);
  border: 1.5px solid var(--line);
  cursor: pointer;
  transition: 0.16s;
  user-select: none;
}
.chip .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
  flex: none;
}
.chip.sel {
  background: var(--cobalt);
  color: #fff;
  border-color: var(--cobalt);
  font-weight: 600;
}
.chip.sel .dot {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}
.chipwrap { display: flex; flex-wrap: wrap; gap: 10px; }
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 var(--pad-screen) 12px; }
.filter-chips .chip { min-height: 36px; font-size: 13px; padding: 8px 14px; }
.grouplab {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 20px 0 10px;
}
.helper {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 13px 15px;
  background: var(--cobalt-50);
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.45;
  color: var(--cobalt-deep);
}
.helper svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.helper b { font-weight: 700; }

/* Progress */
.progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px var(--pad-screen) 16px;
}
.progress .bar {
  flex: 1;
  height: 6px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
}
.progress .bar i {
  display: block;
  height: 100%;
  background: var(--cobalt);
  border-radius: 4px;
  transition: width 0.4s var(--ease-out);
}
.progress .step { font-size: 11px; font-weight: 700; color: var(--muted); }

/* App shell */
.app { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.app .body { flex: 1; overflow-y: auto; }
.app .body::-webkit-scrollbar { width: 0; }
.tabbar {
  flex: none;
  display: flex;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  padding: 8px 10px 6px;
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
}
.tab svg { width: 22px; height: 22px; }
.tab.on { color: var(--cobalt); }

/* Icon button */
.iconbtn {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink);
  flex: none;
}
.iconbtn svg { width: 18px; height: 18px; }

/* Score ring */
.ring-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0 4px;
  position: relative;
}
.ring-wrap .halo {
  position: absolute;
  top: 12px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cobalt-glow), transparent 62%);
  filter: blur(18px);
  animation: haloPulse 3.6s ease-in-out infinite;
}
.ring { position: relative; width: 218px; height: 218px; }
.ring svg { width: 100%; height: 100%; }
.ring .center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.foru-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cobalt);
  display: flex;
  align-items: center;
  gap: 4px;
}
.foru-badge svg { width: 11px; height: 11px; }
.ring .num {
  font-family: var(--serif);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 64px;
  line-height: 0.96;
  margin-top: 2px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ring .of { font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 1px; }
.verdict-tag {
  font-size: 12px;
  font-weight: 800;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  margin-top: 10px;
  letter-spacing: 0.04em;
}
.verdict-tag.good { background: var(--good-soft); color: var(--good); }

/* Micro-bar legend */
.micro-legend {
  display: flex;
  gap: 6px;
  padding: 12px var(--pad-screen) 4px;
  width: 100%;
}
.micro-bar {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
}
.micro-bar__track {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.micro-bar__fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  min-width: 2px;
}
.micro-bar__fill--exc { background: var(--exc); }
.micro-bar__fill--good { background: var(--good); }
.micro-bar__fill--fair { background: var(--fair); }
.micro-bar__fill--poor { background: var(--poor); }
.micro-bar__label {
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.02em;
}

/* Dual score card */
.vs-card {
  margin: 12px var(--pad-screen) 0;
  border: 1px solid rgba(35, 72, 230, 0.15);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-card);
  background: var(--surface);
  opacity: 1;
}
.vs-card.is-revealing { opacity: 0; }
.vs-card .vsn { text-align: center; flex: none; }
.vs-card .vsn .big {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.vs-card .vsn .lab {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}
.vs-card .vsn.you .big { color: var(--cobalt); }
.vs-card .arrow { color: var(--cobalt); flex: none; }
.vs-card .arrow svg { width: 18px; height: 18px; }
.vs-card .vstext { font-size: 13px; line-height: 1.45; color: var(--body); flex: 1; }
.vs-card .vstext b { color: var(--cobalt-deep); }

/* Benefit / watch chips */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px var(--pad-screen) 0;
}
.benefit-chip, .watch-chip {
  font-size: 12px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
}
.benefit-chip { background: var(--success-soft); color: var(--success); }
.watch-chip { background: var(--warn-soft); color: #9A7A20; }

/* Photo helpers */
.photo {
  object-fit: cover;
  filter: saturate(1.02) contrast(1.02);
}
.prodthumb, .rthumb, .polaroid__img, .cmpthumb, .altthumb, .hist-thumb, .share-card__photo {
  background-size: cover;
  background-position: center;
  filter: saturate(1.02) contrast(1.02);
}
.prodthumb {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  flex: none;
  box-shadow: var(--shadow-ambient);
}

/* CTA rows */
.cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px var(--pad-screen) 0;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform 0.14s;
}
.cta-row:active { transform: scale(0.98); }
.cta-row.alt { background: var(--cobalt-50); color: var(--cobalt-deep); }
.cta-row.recipe { background: var(--ink); color: var(--paper); }
.cta-row b { font-size: 14px; font-weight: 600; }
.cta-row svg { width: 18px; height: 18px; }

/* Stat cards */
.stat-row {
  display: flex;
  gap: 10px;
  padding: 0 20px 12px;
}
.stat-card {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 11px 13px;
  box-shadow: var(--shadow-ambient);
}
.stat-card .sl {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stat-card .sv {
  font-size: 18px;
  font-weight: 800;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.stat-card .sv.up { color: var(--success); font-size: 12px; font-weight: 700; }

/* Shutter */
.shutter-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 4px 0 2px;
}
.shutter {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  cursor: pointer;
  border: 5px solid var(--cobalt);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cobalt) 88%, #fff), var(--cobalt));
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--cobalt), 0 10px 28px -8px var(--cobalt-glow);
  display: grid;
  place-items: center;
  color: #fff;
  transition: transform 0.12s;
}
.shutter:active { transform: scale(0.92); }
.shutter.tap-glow { animation: tapGlow 1.7s ease-in-out infinite; }
.shutter svg { width: 30px; height: 30px; }
.miniact {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--body);
  cursor: pointer;
}
.miniact svg { width: 20px; height: 20px; }

/* Micro interactions */
.chip, .tab, .iconbtn, .miniact, .cta-row, .shutter, .feelopt, .plan, .hist-row, .polaroid {
  transition: transform 0.14s var(--ease-out), background 0.16s, border-color 0.16s;
}
.chip:active, .tab:active, .iconbtn:active, .miniact:active, .cta-row:active, .shutter:active { transform: scale(0.965); }

/* Outcome pill — cross-cutting value metric */
.outcome-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-ambient);
}
.outcome-pill__num {
  font-family: var(--serif);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--cobalt);
}
.outcome-pill--up .outcome-pill__num { color: var(--success); }

/* Outcome eyebrow — "what you gained" on hero screens */
.outcome-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px var(--pad-screen) 4px;
  flex-wrap: wrap;
}
.outcome-eyebrow__type {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cobalt);
  background: var(--cobalt-50);
  padding: 4px 8px;
  border-radius: var(--radius-pill);
}
.outcome-eyebrow__sep {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1;
}
.outcome-eyebrow__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--body);
}

/* Share sheet mock */
.share-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 20px 24px 32px;
  box-shadow: 0 -8px 32px rgba(14, 18, 46, 0.12);
  transform: translateY(100%);
  transition: transform 0.4s var(--ease-out);
  z-index: 20;
}
.share-sheet.is-open { transform: translateY(0); }
.share-sheet__handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  margin: 0 auto 16px;
}
.share-sheet__opts {
  display: flex;
  gap: 16px;
  justify-content: center;
}
.share-sheet__opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.share-sheet__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--cobalt-50);
  display: grid;
  place-items: center;
  color: var(--cobalt);
}
.share-sheet__icon svg { width: 22px; height: 22px; }

.demo-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  z-index: 9999;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(20, 22, 28, 0.92);
  color: #fff;
  font: 500 13px/1.4 var(--sans);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.demo-toast.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.cmprow[data-go] {
  cursor: pointer;
}
.cmprow[data-go]:active {
  opacity: 0.92;
}

.scan-skip {
  position: absolute;
  bottom: 28px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 4;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
}

.insight-unblur-target .blur {
  filter: blur(8px);
  opacity: 0.45;
  display: inline-block;
}
.insight-unblur-target.is-revealed .blur {
  animation: insightUnblur 0.9s ease forwards;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Diff preview card */
.diff-card {
  margin: 12px var(--pad-screen);
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--cobalt-50);
  border: 1px solid rgba(35, 72, 230, 0.15);
  font-size: 14px;
  color: var(--body);
}
.diff-card b { color: var(--ink); }

/* Settings rows */
.settings-group { padding: 8px var(--pad-screen) 4px; }
.settings-group h3 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.settings-row svg { width: 18px; height: 18px; color: var(--muted); }

/* Hub grid */
.hub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 var(--pad-screen) 16px;
}
.hub-card {
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hub-card--wide { grid-column: 1 / -1; }
.hub-card__icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--cobalt-50);
  display: grid;
  place-items: center;
  color: var(--cobalt);
}
.hub-card__icon svg { width: 18px; height: 18px; }
.hub-card b { font-size: 14px; color: var(--ink); }
.hub-card span { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* Grocery columns */
.grocery-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 var(--pad-screen) 16px;
}
.grocery-col h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
  text-align: center;
}
.grocery-col--buy h4 { color: var(--success); }
.grocery-col--skip h4 { color: var(--poor); }
.grocery-col--try h4 { color: var(--cobalt); }
.grocery-item {
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 6px;
  font-size: 12px;
}
.grocery-item__thumb {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  margin-bottom: 6px;
}
.grocery-item__thumb--icon {
  display: grid;
  place-items: center;
  background: var(--cobalt-50);
}
.grocery-item__thumb--icon svg {
  width: 22px;
  height: 22px;
  color: var(--cobalt);
}
.grocery-item b { display: block; font-size: 11px; color: var(--ink); }
.grocery-item span { font-size: 10px; color: var(--muted); }

/* Journal timeline */
.journal-timeline { padding: 0 var(--pad-screen) 20px; }
.journal-entry {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-left: 2px solid var(--line);
  margin-left: 8px;
  padding-left: 20px;
  position: relative;
}
.journal-entry::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 18px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cobalt);
  border: 2px solid var(--paper);
}
.journal-entry__time {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  min-width: 58px;
  font-variant-numeric: tabular-nums;
}
.journal-entry__body { flex: 1; }
.journal-entry__meal {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cobalt);
}
.journal-entry__name { font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.journal-entry__score {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--cobalt);
}
.journal-entry__feel {
  font-size: 11px;
  font-weight: 600;
  color: var(--success);
  margin-top: 4px;
}

/* Biology tiles */
.bio-tiles { padding: 0 var(--pad-screen) 16px; display: flex; flex-direction: column; gap: 10px; }
.bio-tile {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
}
.bio-tile__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.bio-tile__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.bio-tile__value { font-size: 15px; font-weight: 600; color: var(--ink); }
.bio-tile__note { font-size: 12px; color: var(--muted); margin-top: 4px; }
.bio-conf {
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.bio-conf i {
  display: block;
  height: 100%;
  background: var(--cobalt);
  border-radius: 2px;
  transition: width 0.6s var(--ease-out);
}

/* Methodology */
.method-dims { padding: 0 var(--pad-screen) 16px; }
.method-dim {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.method-dim:last-child { border-bottom: 0; }
.method-dim__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.method-dim__name { font-size: 15px; font-weight: 600; color: var(--ink); }
.method-dim__wt {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--cobalt);
}
.method-dim__desc { font-size: 13px; color: var(--body); line-height: 1.45; }
.method-dim__bar {
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  margin-top: 8px;
  overflow: hidden;
}
.method-dim__bar i {
  display: block;
  height: 100%;
  background: var(--cobalt);
  border-radius: 2px;
}

/* Score changed */
.score-diff {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px var(--pad-screen);
}
.score-diff__num {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.score-diff__num--before { color: var(--muted); text-decoration: line-through; opacity: 0.6; }
.score-diff__num--after { color: var(--cobalt); }
.score-diff__arrow svg { width: 28px; height: 28px; color: var(--cobalt); }

/* Swap tracker */
.swap-timeline { padding: 0 var(--pad-screen) 16px; }
.swap-step {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
}
.swap-step__thumb {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  flex: none;
  border: 1px solid var(--border);
}
.swap-step__body { flex: 1; }
.swap-step__label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.swap-step__name { font-size: 15px; font-weight: 600; color: var(--ink); }
.swap-step__score {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--cobalt);
}

/* Action check */
.action-prompt {
  text-align: center;
  padding: 24px var(--pad-screen);
}
.action-prompt h1 { font-family: var(--serif); font-size: 24px; color: var(--ink); }
.action-opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 var(--pad-screen) 16px;
}
.action-opt {
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1.5px solid var(--line);
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
}
.action-opt--yes {
  background: var(--cobalt);
  color: #fff;
  border-color: var(--cobalt);
}

/* Saved shelf */
.saved-list { padding: 0 var(--pad-screen) 16px; }
.saved-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 8px;
  cursor: pointer;
}
.saved-item__thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--cobalt-50);
  background-size: cover;
  background-position: center;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 18px;
}
.saved-item__thumb svg {
  width: 20px;
  height: 20px;
  color: var(--cobalt);
}
.saved-item__body { flex: 1; }
.saved-item__name { font-size: 14px; font-weight: 600; color: var(--ink); }
.saved-item__note { font-size: 12px; color: var(--muted); }
.saved-item__score {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--cobalt);
}

/* Notification rows */
.notif-list { padding: 0 var(--pad-screen) 16px; }
.notif-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 8px;
  cursor: pointer;
}
.notif-row--alert { border-color: rgba(35, 72, 230, 0.25); background: var(--cobalt-50); }
.notif-row__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--cobalt-50);
  display: grid;
  place-items: center;
  color: var(--cobalt);
  flex: none;
}
.notif-row__icon svg { width: 18px; height: 18px; }
.notif-row__text { font-size: 14px; font-weight: 600; color: var(--ink); }
.notif-row__sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Insight unlock */
.insight-unlock {
  padding: var(--pad-screen);
  text-align: center;
}
.insight-unlock .lockcard {
  filter: none;
  opacity: 1;
  margin: 16px 0;
}
.insight-unlock .blur { filter: none !important; opacity: 1 !important; }
.insight-unlock__stat {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 600;
  color: var(--success);
  margin: 12px 0;
}

/* Compare stat */
.compare-stat {
  text-align: center;
  padding: 8px var(--pad-screen) 4px;
}
.compare-stat__num {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 600;
  color: var(--cobalt);
}
.compare-stat__label { font-size: 13px; color: var(--muted); }

/* Exposure strip */
.exposure-strip {
  margin: 0 var(--pad-screen) 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
  font-size: 13px;
  color: var(--body);
}
.exposure-strip b { color: var(--ink); }

/* Histamine preview (diet screen) */
.histamine-preview {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--cobalt-50);
  border: 1px solid rgba(35, 72, 230, 0.15);
  display: flex;
  gap: 12px;
  align-items: center;
}
.histamine-preview__thumbs {
  display: flex;
  gap: 6px;
}
.histamine-preview__thumb {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border);
}
.histamine-preview p { font-size: 13px; color: var(--body); line-height: 1.45; }
.histamine-preview b { color: var(--ink); }

/* Full-size ring in proto mode */
.mode-proto .device.is-active:not([data-id="result"]) .ring-wrap .ring { width: 220px; height: 220px; }
.mode-proto .device.is-active .ring-wrap .ring > #ringSvg { width: 100%; height: 100%; }

/* Loser desaturate on compare */
.cmprow:not(.win) { filter: saturate(0.88); opacity: 0.92; }
.cmprow.win.is-revealed { animation: winReveal 0.5s var(--ease-out) both; }

/* Share card scale-in */
.share-card--poster.is-entering {
  animation: shareScaleIn 0.5s var(--ease-out) both;
}

/* Digestibility pulse on vs-card */
.vs-card.seg-pulse .vsn.you .big {
  animation: segPulse 0.6s ease 1.2s 2;
}

/* Pending feel pulse */
.insight-chip--alert.is-pulse {
  animation: chipPulse 1.2s ease 0.8s 1;
}