/* App layer over the v6 component system (components.css).
   Rule one: never redefine a v6 class here unless the layout demands it —
   the previous version of this file did, and the two systems fought.
   Colour comes from tokens.css only; no raw hex in this file. */

* { box-sizing: border-box; }

/* The hidden attribute's default display:none loses to any explicit display
   rule. Without this, `el.hidden = true` silently does nothing on flex/grid
   components — a bug we hit twice. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

/* ---------- page frame ---------- */

.scr {
  display: none;
  padding: 6px 12px 170px;   /* bottom clears the fixed footer */
  max-width: 480px;
  margin: 0 auto;
}
.scr.on { display: block; }

/* One continuous white sheet per screen, like the reference's phone body. */
.sheet {
  background: var(--surface);
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding-bottom: 16px;
}

/* Sheets made of stacked .card sections: flush, hairline-divided. */
.sheet-sections .card {
  box-shadow: none;
  border-radius: 0;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.sheet-sections .card:last-of-type { border-bottom: 0; }
.sheet-sections .home-top { padding: 14px 16px 8px; }

.card {
  background: var(--surface);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
}

/* ---------- language bar: static, centred, never overlaps content ---------- */

.lang-bar {
  position: static;
  display: flex;
  justify-content: center;
  gap: 8px;
  max-width: 480px;
  margin: 10px auto 8px;
  padding: 0 12px;
}

/* ---------- unified button system ---------- */
/* One primary (green gradient), one secondary (tonal). Same radius, same
   height, same weight everywhere — four competing styles was the main
   source of the "cheap" feel. */

.btn-primary,
.auth-btn,
.log-btn,
.mood-log-btn {
  border: none;
  border-radius: 14px;
  padding: 13px 16px;
  font-size: 13px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  color: var(--surface);
  background: linear-gradient(135deg, var(--green), var(--green-deep));
  box-shadow: 0 4px 14px rgba(11, 143, 108, .24);
  transition: transform .12s ease, box-shadow .12s ease;
}
.mood-log-btn { background: linear-gradient(135deg, var(--violet), var(--purple)); box-shadow: 0 4px 14px rgba(123, 97, 255, .24); }
.btn-primary:active, .auth-btn:active, .log-btn:active, .mood-log-btn:active { transform: translateY(1px); box-shadow: none; }

.btn-secondary {
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  color: var(--text2);
  background: var(--surface);
}
.btn-primary, .btn-secondary { flex: 1; }

.sc-actions { display: flex; gap: 8px; margin-top: 12px; }

/* ---------- forms ---------- */

.form-error {
  display: none;
  margin: 10px 13px 0;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--amber2);
  color: var(--red);
  font-size: 11px;
  font-weight: 600;
}
.auth-wrap .form-error { margin: 10px 0 0; }
.input-field.invalid { border-color: var(--red); }

/* Auth screens read as sheets without a markup change. */
.auth-wrap { border-radius: 28px; border: 1px solid var(--border); box-shadow: var(--shadow); }

/* ---------- home ---------- */

.ht-row { display: flex; justify-content: space-between; align-items: center; }
.ht-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--green2));
  color: var(--surface);
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 14px;
}

.score-wrap { padding: 12px 16px 0; }
.score-line { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; }
.score-line .score-big { font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.score-line .score-band { font-size: 12px; font-weight: 800; }

.score-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 1.5px dashed var(--border);
  border-radius: 16px;
  background: var(--surface2);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.se-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--green3);
  display: grid; place-items: center;
  font-size: 19px;
  flex: none;
}
.se-text { flex: 1; }
.se-title { font-size: 13px; font-weight: 800; color: var(--text); letter-spacing: -.2px; }
.se-sub { font-size: 10px; color: var(--text2); margin-top: 1px; }
.se-arrow { font-size: 22px; color: var(--green); font-weight: 700; }

.daily-feedback {
  margin: 9px 13px 0;
  background: var(--green3);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--text);
}

.diary-wrap { padding: 9px 13px 0; }

/* ---------- scan ---------- */

.scan-pad { padding: 16px 16px 0; }
.scan-wrap > .auth-btn { display: block; width: calc(100% - 26px); margin: 12px 13px 0; }
.scan-wrap > .healthy-plate { margin: 12px 13px 0; }
.scan-wrap > .sc-actions { padding: 0 13px; }

.healthy-plate {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  text-align: center;
}
.hp-title { font-size: 13px; font-weight: 800; color: var(--green); letter-spacing: -.2px; }
.hp-sub { font-size: 10px; color: var(--text2); margin: 2px 0 12px; }
.hp-diagram {
  width: 160px; height: 160px;
  margin: 0 auto 12px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  box-shadow: 0 0 0 2px var(--border);
}
.hp-half { grid-row: 1 / 3; background: var(--green3); }
.hp-quarter.hp-carb { background: var(--gold2); }
.hp-quarter.hp-protein { background: var(--blue2); }
.hp-half, .hp-quarter { display: grid; place-items: center; font-size: 26px; }
.hp-legend { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.hp-leg { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text2); font-weight: 700; }
.hp-dot { width: 9px; height: 9px; border-radius: 3px; }
.hp-dot.veg { background: var(--green3); }
.hp-dot.carb { background: var(--gold2); }
.hp-dot.protein { background: var(--blue2); }

.scan-busy { text-align: center; padding: 22px; color: var(--text2); font-size: 12px; }
.spinner {
  width: 26px; height: 26px;
  margin: 0 auto 10px;
  border: 3px solid var(--border);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.scan-confirm {
  margin: 12px 13px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
}
.sc-q { font-size: 13px; font-weight: 700; letter-spacing: -.2px; }

/* Portion labels: fixed columns so the bars align in a clean grid. */
.pr-lbl { width: 64px; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-st { width: 60px; flex: none; }
.pr-fill.status-good { background: var(--green); }
.pr-fill.status-low, .pr-fill.status-absent { background: var(--red); }
.pr-fill.status-high { background: var(--amber); }
.pr-st.status-good { color: var(--green); }
.pr-st.status-low, .pr-st.status-absent { color: var(--red); }
.pr-st.status-high { color: var(--amber); }

/* Scan score row colours follow the band, not a fixed amber. */
.score-row.band-well_balanced { background: var(--green3); color: var(--green); }
.score-row.band-generally_balanced { background: var(--green3); color: var(--green2); }
.score-row.band-needs_improvement { background: var(--amber2); color: var(--amber); }
.score-row.band-significantly_unbalanced { background: var(--amber2); color: var(--red); }
.score-row .sr-lbl, .score-row .sr-num, .score-row .sr-sub, .score-row .sr-ring-c { color: inherit; }

/* Sample result — always visibly badged as an example. */
.sample-box {
  margin: 12px 13px 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  background: var(--surface);
}
.sample-badge {
  display: inline-block;
  background: var(--blue2);
  color: var(--blue);
  font-size: 9px;
  font-weight: 800;
  border-radius: 100px;
  padding: 4px 10px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.sample-note { font-size: 10px; color: var(--text3); margin-top: 8px; line-height: 1.5; }

/* Correction editor (spec 18). */
.edit-row { display: flex; gap: 6px; margin-bottom: 7px; align-items: center; }
.edit-name { flex: 1; min-width: 0; }
.edit-grams { width: 64px; }
.edit-row input, .edit-row select {
  padding: 8px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface2);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
}
.edit-group { width: 104px; }
.edit-del {
  border: 0; background: var(--surface2); color: var(--text2);
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 15px; cursor: pointer; flex: none;
}

/* ---------- history extras ---------- */

.week-chart { display: flex; align-items: flex-end; gap: 6px; height: 110px; }
.wk-bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.wk-fill { border-radius: 5px 5px 0 0; min-height: 3px; transition: height .3s ease; }
.wk-day { font-size: 8px; color: var(--text3); text-align: center; margin-top: 4px; font-weight: 600; }

.hist-empty { font-size: 13px; color: var(--text2); margin: 4px 0; }
.empty { color: var(--text3); font-size: 11px; padding: 10px 0; text-align: center; }

.meal-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.meal-row:last-child { border-bottom: 0; }
.meal-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.meal-name { flex: 1; font-size: 12px; font-weight: 600; }
.meal-score { font-weight: 800; font-size: 13px; }

/* ---------- mood ---------- */

.mf.sel { border-color: var(--purple); background: var(--purple2); }
.mf.sel .mlbl { color: var(--purple); }
.s-dot.s1 { background: var(--green2); }
.s-dot.s2 { background: var(--green); }
.s-dot.s3 { background: var(--gold); }
.s-dot.s4 { background: var(--amber); }
.s-dot.s5 { background: var(--red); }
.s-dot.sel { outline: 2.5px solid var(--purple); outline-offset: 1px; }

/* ---------- levels ---------- */

.lhp-fill { transition: width .4s ease; }

/* ---------- rewards ---------- */

.ach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.ach {
  text-align: center;
  padding: 11px 5px;
  border-radius: 13px;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  opacity: .55;
}
.ach.earned { opacity: 1; background: var(--green3); border-color: rgba(11, 143, 108, .2); }
.ach-ico { font-size: 22px; }
.ach-name { font-size: 9.5px; font-weight: 800; margin-top: 4px; line-height: 1.25; letter-spacing: -.1px; }
.ach-prog { font-size: 9px; color: var(--text3); margin-top: 2px; font-weight: 700; }
.ach.earned .ach-prog { color: var(--green); }

.referral-box { display: flex; gap: 8px; align-items: stretch; margin: 10px 0 6px; }
.referral-code {
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 19px; font-weight: 700; letter-spacing: .14em;
  background: var(--surface2);
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  padding: 10px;
  display: grid; place-items: center;
}
.referral-box .btn-secondary { flex: 0 0 88px; }
.referral-count { font-size: 11px; color: var(--text2); font-weight: 600; }
.redeem-row { display: flex; gap: 8px; }
.redeem-row .input-field { flex: 1; text-transform: uppercase; }
.redeem-row .btn-primary { flex: 0 0 96px; }

.share-canvas {
  width: 100%;
  max-width: 230px;
  display: block;
  margin: 12px auto;
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.spi-caption { font-size: 11px; font-weight: 600; line-height: 1.5; margin: 4px 0 6px; }
.spi-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.share-btns { display: flex; flex-direction: column; gap: 6px; }

/* ---------- profile ---------- */

.track-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.track-label { flex: 1; font-size: 11px; color: var(--text2); font-weight: 600; }
.track-input {
  width: 82px;
  padding: 8px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface2);
  color: var(--text);
  text-align: right;
  font-size: 12px;
  font-family: inherit;
}
.track-saved {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--green3);
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 700;
}

.prof-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
  font-size: 11px; color: var(--text2); font-weight: 600;
}
.prof-row:last-child { border-bottom: 0; }
.prof-row b { color: var(--text); font-weight: 800; text-align: right; }

.logout-wrap { padding: 8px 16px 2px; }
.logout-wrap .btn-secondary { width: 100%; }

/* ---------- onboarding ---------- */

.onb-optional-note {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--blue2);
  color: var(--text2);
  font-size: 10.5px;
  line-height: 1.55;
}

/* ---------- fixed footer: nav + disclaimer as ONE stacked block ---------- */
/* Previously the nav (bottom: 34px) and the disclaimer (bottom: 0) were two
   independent fixed elements that overlapped by ~18px. */

.app-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  max-width: 480px;
  margin: 0 auto;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .06);
}
.app-footer .bnav {
  position: static;
  border-top: 0;
  box-shadow: none;
  padding: 7px 0 4px;
  background: transparent;
}
.wellness-disclaimer {
  padding: 6px 16px calc(7px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  color: var(--text3);
  font-size: 8.5px;
  line-height: 1.45;
  text-align: center;
  border-top: 1px solid var(--border);
}

/* ---------- icon system ---------- */
/* One SVG stroke set (icons.js), tinted from tokens. Replaces the mixed
   emoji, which rendered differently on every platform. */

[data-ico] { display: inline-flex; align-items: center; justify-content: center; }
[data-ico] svg, .hc-ico svg, .ach-ico svg, .li-badge svg, .dm-dot svg, .drop svg, .tut-ico svg { display: block; }
.inl-ico { vertical-align: -1px; }
.inl-ico svg { display: inline-block; vertical-align: middle; }

.pb-icon, .lr-icon, .auth-logo-icon { color: var(--surface); }
.lhc-badge { color: var(--surface); }

.bn-i svg { width: 20px; height: 20px; }
.bn { color: var(--text3); }
.bn.on { color: var(--green); }
.bn.on .bn-i { color: var(--green); }

/* Habit icon chips: each habit gets its own tint, like the reference. */
.hc-ico.ico-water { background: var(--blue2); color: var(--blue); }
.hc-ico.ico-vegetables { background: var(--green3); color: var(--green); }
.hc-ico.ico-protein { background: var(--gold2); color: var(--gold); }
.hc-ico.ico-exercise { background: var(--purple2); color: var(--purple); }
.hc-ico.ico-sleep { background: var(--blue2); color: var(--violet); }
.hc-ico.ico-stress { background: var(--amber2); color: var(--amber); }
.hc.done .hc-ico { color: var(--green); }

.drop { color: var(--text3); }
.drop.f { color: var(--blue); }

.dm-dot { color: var(--text3); }
.dm-dot.logged { color: var(--green); }

.ach { color: var(--text3); }
.ach.earned { color: var(--green); }

.li-badge.lb-done { color: var(--green); }
.li-badge.lb-current { color: var(--purple); }
.li-badge.lb-locked { color: var(--text3); }

.wc-ic { color: var(--blue); margin-right: 2px; }
.fp-tag svg { vertical-align: -1px; margin-right: 2px; }

/* ---------- first-run tutorial ---------- */

.tut-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(17, 24, 39, .55);
  display: grid;
  place-items: end center;
  padding: 16px;
}
.tut-card {
  background: var(--surface);
  border-radius: 24px;
  padding: 26px 20px 20px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
  box-shadow: var(--shadow-lg);
}
.tut-ico {
  width: 64px; height: 64px;
  border-radius: 20px;
  background: var(--green3);
  color: var(--green);
  display: grid; place-items: center;
  margin: 0 auto 14px;
}
.tut-title { font-size: 16px; font-weight: 800; letter-spacing: -.3px; }
.tut-body { font-size: 12px; color: var(--text2); line-height: 1.65; margin-top: 6px; min-height: 58px; }
.tut-dots { display: flex; gap: 6px; justify-content: center; margin: 14px 0; }
.tut-dot { width: 7px; height: 7px; border-radius: 100px; background: var(--border); transition: all .2s; }
.tut-dot.on { background: var(--green); width: 18px; }
.tut-actions { display: flex; gap: 8px; }

/* ---------- profile hero ---------- */

.prof-hero {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px 16px 12px;
  background: linear-gradient(135deg, var(--green), var(--green-deep));
  color: var(--surface);
}
.ph-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  border: 2px solid rgba(255, 255, 255, .5);
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 20px;
  flex: none;
}
.ph-main { flex: 1; min-width: 0; }
.ph-name-row { display: flex; align-items: center; gap: 7px; }
.ph-name { font-size: 17px; font-weight: 800; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-name.ghost { opacity: .65; font-weight: 600; font-style: italic; }
.ph-edit {
  border: 0;
  background: rgba(255, 255, 255, .2);
  color: var(--surface);
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  flex: none;
}
.ph-email { font-size: 10px; opacity: .75; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-level {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255, 255, 255, .18);
  border-radius: 100px;
  padding: 3px 10px;
  font-size: 10px; font-weight: 800;
  margin-top: 6px;
}
.ph-edit-row { display: flex; gap: 8px; padding: 10px 16px 0; }
.ph-edit-row .input-field { flex: 1; }
.ph-edit-row .btn-primary { flex: 0 0 84px; }

.ph-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}
.ph-stat { background: var(--surface); text-align: center; padding: 11px 4px; }
.ph-v { font-size: 17px; font-weight: 800; letter-spacing: -.5px; }
.ph-l { font-size: 9px; color: var(--text2); font-weight: 700; margin-top: 1px; }

/* ---------- tracking steppers ---------- */

.stp { display: flex; align-items: center; gap: 9px; padding: 7px 0; }
.stp-ico {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: grid; place-items: center;
  flex: none;
  background: var(--surface2);
  color: var(--text2);
}
.stp-lbl { flex: 1; font-size: 11px; font-weight: 700; color: var(--text); }
.stp-btn {
  width: 30px; height: 30px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  display: grid; place-items: center;
  cursor: pointer;
  flex: none;
}
.stp-btn:active { background: var(--surface2); }
.stp-val { width: 40px; text-align: center; font-size: 13px; font-weight: 800; }

.health-det { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.health-det summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  color: var(--text2);
  list-style: none;
}
.health-det summary::before { content: '▸ '; }
.health-det[open] summary::before { content: '▾ '; }
.health-det .btn-secondary { width: 100%; margin-top: 8px; }

/* ---------- mobile (real phones: 320-430px) ---------- */
/* Touch feel everywhere: no tap flash, no 300ms double-tap-zoom delay. */
html { -webkit-tap-highlight-color: transparent; }
button, .bn, .drop, .mf, .s-dot, .wp, .hc, .stp-btn, .level-row, .score-empty {
  touch-action: manipulation;
}

@media (max-width: 430px) {
  /* Full-bleed sheets: on a phone the app IS the screen — no card-on-desk
     framing eating 26px of a 375px viewport. */
  .scr { padding: 0 0 170px; }
  .sheet, .auth-wrap {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }
  .lang-bar { margin: 8px auto 6px; }

  /* iOS zooms the page when a focused input's font is under 16px. */
  .input-field, .track-input, .edit-row input, .edit-row select { font-size: 16px; }

  /* Tap targets up to comfortable thumb size (~44px guideline). */
  .stp-btn { width: 40px; height: 40px; }
  .stp { padding: 8px 0; }
  .stp-val { width: 44px; }
  .drop { height: 38px; }
  .bn { padding: 9px 0; }
  .ph-edit { width: 30px; height: 30px; }
  .lang-btn { padding: 9px 20px; }
  .hc { padding: 12px 11px; }
  .edit-del { width: 34px; height: 34px; }

  /* Tutorial becomes a true bottom sheet. */
  .tut-overlay { padding: 0; }
  .tut-card { max-width: none; border-radius: 24px 24px 0 0; margin-bottom: 0; }

  .app-footer { max-width: none; }
}

/* ---------- landing (login / register) ---------- */

.landing-hero {
  background: linear-gradient(150deg, var(--green-dark), var(--green) 55%, var(--green2));
  color: var(--surface);
  border-radius: 28px;
  padding: 26px 22px 30px;
  position: relative;
  overflow: hidden;
}
/* Soft glow accents, pure CSS. */
.landing-hero::before, .landing-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .09);
  pointer-events: none;
}
.landing-hero::before { width: 220px; height: 220px; top: -90px; right: -70px; }
.landing-hero::after { width: 140px; height: 140px; bottom: -60px; left: -40px; }

.lh-brand { display: flex; align-items: center; gap: 8px; }
.lh-logo {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .18);
  display: grid; place-items: center;
  color: var(--surface);
}
.lh-name { font-size: 17px; font-weight: 800; letter-spacing: -.4px; }
.lh-name span { color: var(--gold2); }
.lh-tag { font-size: 10px; opacity: .75; font-weight: 600; margin: 4px 0 18px 40px; }
.lh-head {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.8px;
  line-height: 1.18;
  max-width: 300px;
}
.lh-sub { font-size: 12px; opacity: .82; line-height: 1.6; margin-top: 8px; max-width: 300px; }

.hero-visual { display: flex; gap: 10px; margin-top: 20px; align-items: center; }
.hv-card {
  background: var(--surface);
  border-radius: 15px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
  display: flex; align-items: center; gap: 6px;
  padding: 9px 11px;
}
.hv-a { transform: rotate(-4deg); }
.hv-b { transform: rotate(2deg) translateY(6px); }
.hv-c { transform: rotate(-2deg); }
.hv-drop { color: var(--text3); display: inline-flex; }
.hv-drop.f { color: var(--blue); }
.hv-chk {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--green);
  color: var(--surface);
  display: grid; place-items: center;
  flex: none;
}
.hv-bar { width: 44px; height: 8px; border-radius: 5px; background: var(--green3); position: relative; overflow: hidden; }
.hv-bar::after { content: ''; position: absolute; inset: 0 30% 0 0; background: var(--green); border-radius: 5px; }

/* Auth card overlaps the hero. */
.landing-card { margin: -22px 12px 0; position: relative; z-index: 2; }
.lh-compact { padding-bottom: 40px; }
.lh-compact .lh-head { font-size: 21px; }

.feat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 12px 0;
}
.feat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 9px;
  text-align: center;
}
.feat-ico {
  width: 34px; height: 34px;
  border-radius: 11px;
  display: grid; place-items: center;
  margin: 0 auto 7px;
}
.fi-g { background: var(--green3); color: var(--green); }
.fi-b { background: var(--blue2); color: var(--blue); }
.fi-p { background: var(--purple2); color: var(--purple); }
.feat-t { font-size: 10.5px; font-weight: 800; letter-spacing: -.1px; }
.feat-s { font-size: 9px; color: var(--text2); margin-top: 2px; line-height: 1.4; }

@media (max-width: 430px) {
  .landing-hero { border-radius: 0; }
  .landing-card { margin: -22px 10px 0; border-radius: 24px; border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
  .feat-row { margin: 12px 10px 0; }
}

/* ---------- scan animation + result reveal ---------- */

.busy-photo-box {
  position: relative;
  height: 200px;
  margin: 12px 13px 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--ink);
}
.busy-photo-box img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.scan-beam {
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: var(--green2);
  box-shadow: 0 0 14px 3px rgba(19, 184, 133, .75);
  animation: beam 1.5s ease-in-out infinite alternate;
}
.scan-beam::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 3px;
  height: 46px;
  background: linear-gradient(to bottom, rgba(19, 184, 133, .28), transparent);
}
@keyframes beam { from { top: 6%; } to { top: 90%; } }
.busy-txt {
  text-align: center;
  padding: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

#scanResult .score-row { animation: pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
#scanResult .verdict, #scanResult .nexts .ns { animation: rise .45s ease both; }
#scanResult .nexts .ns:nth-child(2) { animation-delay: .08s; }
#scanResult .nexts .ns:nth-child(3) { animation-delay: .16s; }
@keyframes rise { from { transform: translateY(10px); opacity: 0; } }
.pr-fill { transition: width .7s cubic-bezier(.2, .8, .2, 1); }
#srArc { transition: stroke-dasharray .8s ease; }

/* The result headline is the moment — make it unmissable. */
.sr-num { font-size: 38px !important; }
.sr-ring { width: 54px; height: 54px; }

@media (prefers-reduced-motion: reduce) {
  .scan-beam, .busy-txt, #scanResult .score-row, #scanResult .verdict, #scanResult .nexts .ns { animation: none; }
  .pr-fill, #srArc { transition: none; }
}

/* ---------- language: floating chip pre-login, setting in profile ---------- */

.lang-bar {
  position: fixed;
  top: 10px; right: 10px;
  margin: 0;
  padding: 0;
  gap: 5px;
  z-index: 70;
  max-width: none;
}
.lang-bar .lang-btn {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(6px);
  border-color: transparent;
  padding: 7px 12px;
}
.lang-row { display: flex; gap: 8px; margin-top: 8px; }
.lang-row .lang-btn { flex: 1; padding: 12px 8px; font-size: 14px; text-align: center; }

/* ---------- accessibility type scale ---------- */
/* The v6 mockup uses 8-11px text throughout — too small for older eyes.
   This raises every text class to a >=10.5px floor with body copy at 13px+,
   keeping the layout rhythm. Loads after components.css, so it wins. */

.ht-greet { font-size: 13px; }
.ht-name { font-size: 22px; }
.pb-pts { font-size: 22px; }
.pb-lbl { font-size: 11px; opacity: .8; }
.pb-streak { font-size: 12px; }
.lr-title { font-size: 13px; }
.lr-sub { font-size: 11px; opacity: .8; }
.lr-pct { font-size: 14px; }
.lr-plbl { font-size: 10px; }
.ri-title { font-size: 15px; }
.ri-sub { font-size: 13px; }
.ri-cta { font-size: 12px; }
.rw-num { font-size: 24px; }
.rw-den { font-size: 11px; }
.wc-title { font-size: 13px; }
.wc-count { font-size: 12px; }
.hw-title { font-size: 15px; }
.hw-pts { font-size: 12px; }
.hc-title { font-size: 13.5px; }
.hc-sub { font-size: 11px; }
.hc-pts { font-size: 11px; }
.wp { font-size: 11px; }
.wp-lbl { font-size: 9px; }
.ds-t, .pw-title, .ns-t { font-size: 11px; }
.dm-lbl { font-size: 10px; }
.ds-pill { font-size: 11px; }
.sr-lbl { font-size: 11px; }
.sr-sub { font-size: 12px; }
.pr-lbl { font-size: 12px; width: 76px; }
.pr-st { font-size: 11px; width: 66px; }
.v-title { font-size: 13px; }
.v-body { font-size: 12.5px; }
.ns-main { font-size: 13px; }
.ns-sub { font-size: 12px; }
.fp-tag { font-size: 11px; }
.auth-title { font-size: 20px; }
.auth-sub { font-size: 13px; }
.input-label { font-size: 13px; }
.input-field { font-size: 15px; padding: 13px 14px; }
.forgot-link { font-size: 12.5px; }
.auth-switch { font-size: 13px; }
.btn-primary, .auth-btn, .log-btn, .mood-log-btn { font-size: 15px; padding: 15px 16px; }
.btn-secondary { font-size: 14px; padding: 14px 16px; }
.form-error { font-size: 12.5px; }
.bn-l { font-size: 10.5px; }
.daily-feedback { font-size: 12.5px; }
.se-title { font-size: 15px; }
.se-sub { font-size: 12px; }
.sc-q { font-size: 15px; }
.hp-title { font-size: 15px; }
.hp-sub { font-size: 12px; }
.hp-leg { font-size: 11px; }
.sample-badge { font-size: 10.5px; }
.sample-note { font-size: 11.5px; }
.mood-hero-title { font-size: 20px; }
.mood-hero-sub { font-size: 13px; }
.mlbl { font-size: 10.5px; }
.stress-title { font-size: 13px; }
.stress-ends { font-size: 11px; }
.mood-pts-note { font-size: 12px; }
.week-title { font-size: 15px; }
.week-avg { font-size: 12px; }
.wb-day { font-size: 10px; }
.ins-title { font-size: 13px; }
.ins-sub { font-size: 12px; }
.lh-label, .rhr-lbl { font-size: 11px; }
.lhc-name { font-size: 20px; }
.lhc-sub { font-size: 12px; }
.lhp-labels { font-size: 11px; }
.ll-title { font-size: 15px; }
.li-name { font-size: 14px; }
.li-sub { font-size: 12px; }
.li-req { font-size: 10.5px; }
.li-status { font-size: 10.5px; }
.rhr-pts { font-size: 38px; }
.rhr-sub { font-size: 12px; }
.rhr-next { font-size: 11px; }
.ach-name { font-size: 11px; }
.ach-prog { font-size: 10.5px; }
.referral-count { font-size: 12.5px; }
.spi-caption { font-size: 13px; }
.spi-tag { font-size: 12px; }
.share-btn { font-size: 14px; padding: 13px; }
.ph-name { font-size: 19px; }
.ph-email { font-size: 12px; }
.ph-level { font-size: 11px; }
.ph-v { font-size: 20px; }
.ph-l { font-size: 10.5px; }
.stp-lbl { font-size: 13.5px; }
.stp-val { font-size: 15px; }
.track-label { font-size: 13px; }
.track-input { font-size: 14px; }
.track-saved { font-size: 12.5px; }
.health-det summary { font-size: 12.5px; }
.prof-row { font-size: 13px; }
.onb-optional-note { font-size: 12px; }
.tut-title { font-size: 19px; }
.tut-body { font-size: 14px; }
.empty { font-size: 12.5px; }
.meal-name { font-size: 13.5px; }
.meal-score { font-size: 15px; }
.hist-empty { font-size: 14px; }
.lh-tag { font-size: 11.5px; }
.lh-sub { font-size: 13.5px; }
.feat-t { font-size: 12px; }
.feat-s { font-size: 10.5px; }
.wellness-disclaimer { font-size: 10px; }
.busy-txt { font-size: 14px; }

/* ---------- beautify & share ---------- */

.beautify-cta { margin-top: 12px; cursor: pointer; }
.bc-title { font-size: 14px; }
.bc-sub { font-size: 11.5px; }
.bc-chip { font-size: 11px; }
.fp-bfy {
  position: absolute;
  top: 9px; right: 9px;
  z-index: 2;
  border: 0;
  background: rgba(123, 97, 255, .9);
  color: var(--surface);
  border-radius: 9px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
}
.bfy-card { text-align: left; max-height: 88vh; overflow-y: auto; }
.bfy-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.bfy-preview {
  width: 100%;
  max-width: 280px;
  display: block;
  margin: 0 auto 10px;
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.chips-row { margin-bottom: 10px; }
.chip { font-size: 12px; padding: 8px 14px; }