/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── iOS Safari viewport zoom prevention ───────────────────
   DO NOT REMOVE. Without these, any element wider than the
   viewport (fixed min-width, long words, dynamic content)
   causes iOS Safari to zoom out and show horizontal scroll.
   overflow-x: hidden on html+body is the only reliable fix.  */
html         { overflow-x: hidden; overscroll-behavior: none; }
body         { overflow-x: hidden; width: 100%; overscroll-behavior: none; }

/* ─── Native-iOS scrollbar suppression ────────────────────────
   Cultivar lives on home screens. Native iOS apps don't show a
   persistent vertical scrollbar — the bar appears only while
   actively scrolling and fades. iOS Safari + standalone PWAs
   already do this; these rules suppress the persistent bar in
   every other rendering context (desktop preview, Android, macOS
   with "Always show scrollbars" set). Content still scrolls — only
   the visual chrome is hidden. No-op on iOS. */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ─── Portrait-only lockout (Safari browser mode) ─────────────────────────
   The PWA manifest sets "orientation": "portrait" so home-screen-installed
   users are locked to portrait by iOS. Browser-mode users still rotate, so
   this overlay covers the whole app in landscape on phone-sized devices and
   asks them to rotate back. Tablet and desktop landscape are untouched. */
.rotate-please {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #06111c;
  color: #d2ebd7;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  font-family: var(--font-text, system-ui);
}
.rotate-please-icon {
  font-size: 48px;
  margin-bottom: 16px;
  animation: rotateNudge 2.4s ease-in-out infinite;
}
@keyframes rotateNudge {
  0%, 60%, 100% { transform: rotate(-90deg); }
  30%, 50%      { transform: rotate(0deg); }
}
.rotate-please-title {
  font-family: var(--font-serif, Georgia);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  color: #fff;
}
.rotate-please-sub {
  font-size: 14px;
  color: rgba(210, 235, 215, 0.75);
  line-height: 1.5;
  max-width: 280px;
}
@media (orientation: landscape) and (max-height: 540px) {
  .rotate-please { display: flex; }
  /* Hide everything else so the rotate prompt stands alone */
  body > *:not(.rotate-please) { visibility: hidden !important; }
}
img, video, iframe { max-width: 100%; height: auto; }

/* ─── Static background — black + sage radial glow ──────── */
#yt-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  /* Force GPU compositing layer — prevents iOS PWA repaint bug in safe area */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
  background:
    radial-gradient(ellipse 80% 50% at 50% -5%,  rgba(52, 95, 62, 0.42) 0%, transparent 70%),
    radial-gradient(ellipse 55% 40% at 15% 105%, rgba(36, 72, 46, 0.28) 0%, transparent 65%),
    #07090a;
}
#yt-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.09;
  pointer-events: none;
}

/* ── Welcome active: hide everything except the video ────── */
body.welcome-active .app-header      { display: none !important; }
body.welcome-active .app-footer      { display: none !important; }
body.welcome-active .bottom-tab-bar  { display: none !important; }
body.welcome-active main > *:not(#welcomeScreen) { display: none !important; }
/* Match the welcome screen's bg so any sub-pixel gap or paint-timing
   mismatch at the bottom safe area doesn't reveal a different color
   beneath. Belt-and-suspenders: even if #welcomeScreen's inset:0 fails
   to reach the home-indicator zone for any reason, the body underneath
   is the same #06111c so no visible seam. */
body.welcome-active,
html:has(body.welcome-active) {
  background: #06111c !important;
}

/* ─── Cannabis leaf canvas ───────────────────────────────── */


/* ─── Design tokens ─────────────────────────────────────── */
:root {
  /* RML logo palette */
  --teal:        #1B5F82;
  --teal-light:  #2A85B3;
  --teal-pale:   #1A3A4D;
  --sage:        #7A9B6C;
  --sage-light:  #A0BF92;
  --sage-pale:   #2A3D28;

  /* Dark surfaces */
  --bg:          #0D1B24;
  --surface-1:   #132232;
  --surface-2:   #192C3E;
  --surface-3:   #1F3448;

  /* Accents */
  --gold:        #E8A820;
  --gold-pale:   #2A2010;

  /* Crohn's */
  --crohns-bg:   #0F2A1E;
  --crohns-mid:  #2A6B4A;
  --crohns-fg:   #4DCE87;
  --crohns-dk:   #89E8B4;

  /* Text */
  --text-1:      #F0F4F8;
  --text-2:      #8BA8BE;
  --text-3:      #4A6880;

  /* Borders */
  --sep:         rgba(255,255,255,0.07);
  --sep-bright:  rgba(255,255,255,0.12);

  /* Shadows */
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:   0 6px 24px rgba(0,0,0,0.4);
  --shadow-lg:   0 16px 48px rgba(0,0,0,0.5);

  /* Radii */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  26px;

  /* Fonts */
  --font-display: -apple-system, 'SF Pro Display', BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-text:    -apple-system, 'SF Pro Text',    BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-serif:   'Playfair Display', Georgia, serif;
}

/* ─── Base ──────────────────────────────────────────────── */
/* html bg used to be #060f18 (dark blue), which made sense when the tab bar
   was translucent and composed over it. Tab bar is now fully opaque #070c0a,
   so the blue was leftover — and visible as a band wherever iOS exposed the
   html layer (overscroll, home-indicator zone, sub-pixel gaps below tab bar).
   Set to #070c0a to match the tab bar / body::after underlay exactly. The
   welcome-active rule below still overrides this to #06111c for welcome. */
html { -webkit-text-size-adjust: 100%; min-height: 100dvh; background: #070c0a; }
body {
  font-family: var(--font-text);
  background:  transparent;
  color:       var(--text-1);
  min-height:  100dvh;
  line-height: 1.6;
  font-size:   16px;
  -webkit-font-smoothing: antialiased;
}

/* iOS home-indicator safe-zone underlay.
   Paints the bottom safe area with the tab bar's resolved appearance
   color (rgba(7,12,9,0.92) over html #060f18 = ~#070c0a). The tab bar
   sits above this at z:100 and its backdrop-blur composites cleanly,
   so the safe zone matches the tab bar instead of revealing whatever
   color iOS paints behind a PWA in that region.
   Suppressed on the welcome screen, which has its own opaque bg. */
body::after {
  content:        '';
  position:       fixed;
  bottom:         0; left: 0; right: 0;
  /* Bare env() in browser mode is correct — Safari's own toolbar handles
     the chrome below, so this band stays 0 height and adds no artificial
     lift. The cold-launch 24px floor lives in the standalone-only block
     near the end of this file (search "display-mode: standalone"). */
  height:         env(safe-area-inset-bottom, 0px);
  background:     #070c0a;
  pointer-events: none;
  z-index:        99;
}
/* On welcome, repaint the safe-area underlay to match the welcome bg
   (#06111c) instead of hiding it. Hiding it relied on the body bg behind
   to fill the home-indicator zone, which leaves room for sub-pixel seams.
   Painting it positively kills that. */
body.welcome-active::after { background: #06111c; }

/* ─── Layout ────────────────────────────────────────────── */
.page-wrap {
  max-width:      640px;
  margin:         0 auto;
  /* Bottom padding lives on <main> with a safe-area-inset-aware calc that
     handles iOS PWA cold-launch correctly. A second 80px belt here used to
     stack on top of main's padding, pushing total page height past 100dvh
     and creating phantom scroll on phones that should fit the home view in
     a single viewport (May 9 fix). Don't reintroduce padding-bottom here —
     main's padding is the canonical bottom-safety reservation. */
  padding:        0;
  position:       relative;
  z-index:        2;
  display:        flex;
  flex-direction: column;
  min-height:     100dvh;
  overflow-x:     hidden;
}

main {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  justify-content: flex-start;
  /* Bottom padding clears the fixed bottom-tab-bar (~52px tall) plus the
     iPhone home-indicator safe area. Without this, the homeFactCard (which
     now flex-grows to fill remaining space) would slide behind the tab bar.
     Bare env() in browser mode = no artificial lift. Standalone-mode
     cold-launch 24px floor lives near the end of this file. */
  padding:         1.25rem 1rem calc(70px + env(safe-area-inset-bottom, 0px));
}

/* ─── Header ────────────────────────────────────────────── */
.app-header {
  background:     rgba(8, 16, 12, 0.72);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  text-align:     center;
  z-index:        40;
  /* Push content below the status bar / Dynamic Island in standalone PWA mode */
  padding:        calc(max(env(safe-area-inset-top), 44px) + 0.6rem) 1.5rem 0.5rem; /* floor: was bare env() — could be 0 at cold launch */
  border-bottom:  1px solid var(--sep-bright);
  position:       sticky;
  top:            0;
  overflow:       hidden;
}

.app-header::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse at 50% 0%, rgba(27,95,130,0.25) 0%, transparent 70%);
  pointer-events: none;
}

/* Logo lockup — white C + CULTIVAR stacked */
.header-lockup {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             2px;
  margin:          0 auto;
  width:           100%;
}
.header-c-mark {
  display:     block;
  width:       clamp(70px, 18vw, 100px);
  height:      auto;
  object-fit:  contain;
}

/* Compare panel header */
.compare-panel-header {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 0 18px;
}
.compare-l-logo {
  width: 44px; height: 44px; object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(27,95,130,0.5));
  flex-shrink: 0;
}
.compare-panel-title {
  font-family: var(--font-serif); font-size: 22px; font-weight: 600;
  color: var(--text-1);
}

/* Keep old .app-logo for any legacy refs */
.app-logo {
  width:         100px;
  height:        auto;
  margin-bottom: 14px;
  filter:        drop-shadow(0 4px 16px rgba(27,95,130,0.5));
  position:      relative;
}

.app-eyebrow {
  font-family:    var(--font-display);
  font-size:      9px;
  font-weight:    500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color:          var(--teal-light);
  margin:         0;
  opacity:        0.7;
}

.app-title {
  font-family:    var(--font-serif);
  font-size:      clamp(14px, 4vw, 20px);
  font-weight:    700;
  color:          #ffffff;
  line-height:    1;
  margin:         0;
  position:       static;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  white-space:    nowrap;
  display:        flex;
  align-items:    center;
  gap:            0.6em;
  width:          100%;
}
.app-title::before,
.app-title::after {
  content:    '';
  flex:       1;
  height:     1px;
  min-width:  10px;
}
.app-title::before {
  background: linear-gradient(to right, transparent, rgba(160, 191, 146, 0.45));
}
.app-title::after {
  background: linear-gradient(to left,  transparent, rgba(160, 191, 146, 0.45));
}

.app-title span {
  color: var(--sage-light);
}

.app-sub {
  display: none;
}

/* ─── Welcome / Start screen ──────────────────────────────
   Apr 30 (S6, second pass): reverted to the original flex layout. The grid
   attempt earlier today broke the layout in subtle ways (the CTA button
   collapsed and the C logo went missing). Going back to what was working
   most of the time, with one defensive change: the bottom band is anchored
   to the viewport bottom via `position: absolute; bottom: 0` so iOS PWA
   cold-launch viewport-math drift can't lift it into mid-air.

   The bottom band is OUT of flex flow because of position:absolute. To
   prevent the C logo from visually overlapping the bottom band content,
   .welcome-center-stage has padding-bottom that reserves the bottom band's
   space. The C remains visually centered inside the available area.

   See CULTIVAR-DEV-RULES.md → "iOS PWA viewport math" for the full rule.
*/
#welcomeScreen {
  position:        fixed;
  inset:           0;
  z-index:         150;
  /* Fully opaque to eliminate the iPhone safe-zone discontinuity caused by
     the leaf canvas showing through the rgba body but being blocked by the
     solid bottom band. Solid bg = uniform screen, no ::after needed. */
  background:      #06111c;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  overflow:        hidden;
  padding:         0;
}

.welcome-name-band {
  width:       100%;
  text-align:  center;
  /* safe-area-inset-top covers the status bar; +44px gives a full line of breathing room above the eyebrow */
  padding:     calc(max(env(safe-area-inset-top), 44px) + 44px) 24px 20px;
  position:    relative;
  z-index:     2;
}

.welcome-eyebrow {
  font-family:    var(--font-display);
  font-size:      11px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color:          var(--teal-light);
  margin-bottom:  6px;
}

.welcome-app-title {
  font-family:    var(--font-serif);
  font-size:      clamp(42px, 13vw, 72px);
  font-weight:    700;
  color:          var(--text-1);
  line-height:    1.1;
  margin-bottom:  0;
  text-shadow:    0 2px 14px rgba(0,0,0,0.7);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display:        flex;
  align-items:    center;
  gap:            0.3em;
  width:          100%;
}
.welcome-app-title::before,
.welcome-app-title::after {
  content:  '';
  flex:     1;
  height:   1.5px;
  min-width: 12px;
}
.welcome-app-title::before {
  background: linear-gradient(to right, transparent, rgba(160, 191, 146, 0.45));
}
.welcome-app-title::after {
  background: linear-gradient(to left,  transparent, rgba(160, 191, 146, 0.45));
}

.welcome-app-title span { color: var(--sage-light); }

.welcome-back-greeting {
  font-family:  var(--font-serif);
  font-size:    26px;
  font-weight:  500;
  color:        rgba(210, 235, 215, 0.95);
  margin-top:   10px;
  text-shadow:  0 2px 12px rgba(0,0,0,0.7);
  font-style:   italic;
}

.welcome-center-stage {
  width:           100%;
  flex:            1;         /* grows to fill vertical space between header and tagline */
  position:        relative;
  display:         flex;
  justify-content: center;
  align-items:     center;   /* centers the L vertically as space opens up */
  padding-top:     0;
  /* Reserve space at the bottom for the absolutely-positioned .welcome-below-fold
     so the C logo doesn't sit behind the tagline footer. The reserved area is
     ~120px of content + the safe-area inset on iPhones with home indicator.
     (May 11 S4) Bumped floor 0px → 36px to match the canonical floor in
     CULTIVAR-DEV-RULES.md → "iOS PWA viewport math". With 0px floor, cold
     launch gave 120px padding which then grew to 154px after env() settled
     to ~34px — visible as content "bumping up" the production footer. With
     36px floor, both states resolve to ≥ 156px. Stable. */
  padding-bottom:  calc(120px + max(env(safe-area-inset-bottom), 36px));
}

/* When padding-bottom shifts the C upward via flex centering, the absolutely-
   positioned button at top: 50% would land below the C's visual center. Pull
   the button up by half the reserved padding so they coincide.
   (May 11 S4) Same 36px floor applied here. Bare env() was making the CTA
   button position drift up by ~17px between cold launch and settled. */
.welcome-center-stage .welcome-cta-wrap {
  top: calc(50% - 60px - (max(env(safe-area-inset-bottom), 36px) / 2));
}

/* L is in normal flow — its height defines the stage */
.welcome-l-logo {
  display:     block;
  width:       min(85vw, 380px);
  height:      auto;
  position:    relative;
  z-index:     1;
  opacity:     0.95;
}

/* Button floats over the C, centered vertically in the stage */
.welcome-cta-wrap {
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  left:            0; right: 0;
  z-index:         2;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  padding:         0 32px;
}

.welcome-below-fold {
  /* Anchored to the viewport bottom via absolute positioning instead of riding
     in flex flow. iOS PWA cold launches resolve `100dvh` and similar viewport
     units inconsistently for ~100ms after launch; flex `space-between` against
     a sometimes-wrong container height was lifting this band into mid-air with
     "dead space" below. Anchored to bottom: 0 of #welcomeScreen (which is
     `position: fixed; inset: 0` = viewport-bound), so its position is
     decoupled from any flex math. See CULTIVAR-DEV-RULES.md → "iOS PWA
     viewport math".

     (May 12 S4) Padding-bottom switched from `max(env, 12px)` to a small
     fixed value. Ross's report after v12200: even with env settled, the SPF
     tagline still read as "lifted" with a visible gap above the home
     indicator on iPhone Pro Max — env was resolving larger than the prior
     ~34px assumption (~44-50px). Target layout: SPF sits flush at the
     viewport bottom, the iOS home-indicator overlay floats above on its
     own layer (iOS handles the visual safe area for the indicator itself).
     8px gives a hair of breathing room for older iPhones and browser mode
     without lifting the text on home-indicator devices. */
  position:        absolute;
  bottom:          0;
  left:            0;
  right:           0;
  text-align:      center;
  /* (May 11 S5) padding-bottom must clear the iOS home indicator zone.
     The S4 "fix" to 8px was too small — on iPhone Pro Max the home indicator
     zone is ~34px from the bottom, so 8px put the SPF label behind iOS system
     UI. env(safe-area-inset-bottom) is the right value (~34px on Pro Max);
     the 20px floor covers older iPhones and browser mode where env() is 0. */
  padding:         10px 36px max(env(safe-area-inset-bottom), 20px);
  display:         flex;
  flex-direction:  column;
  gap:             10px;
  flex-shrink:     0;
  z-index:         1;
}

/* placeholder for old .welcome-card — no longer used */
.welcome-card {
  display: none;
}

/* Subtle radial glow behind the card */
.welcome-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(27,95,130,0.18) 0%, transparent 65%);
  pointer-events: none;
}

.welcome-intro {
  font-family: var(--font-serif);
  font-size:   16px;
  font-weight: 500;
  color:       rgba(255, 255, 255, 0.97);
  line-height: 1.55;
  text-shadow: 0 1px 10px rgba(0,0,0,0.9);
}

.welcome-detail { display: none; }

/* Pulsating glow button */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 18px rgba(27,95,130,0.55),
                0 4px 20px rgba(27,95,130,0.4),
                0 0 0 0 rgba(42,133,179,0.0);
  }
  50% {
    box-shadow: 0 0 36px rgba(42,133,179,0.75),
                0 6px 28px rgba(27,95,130,0.6),
                0 0 60px rgba(42,133,179,0.25);
  }
}

@keyframes pulseScale {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.025); }
}

.start-here-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; position: relative;
  width: auto;
  padding: 13px 44px;
  font-family: var(--font-serif); font-size: 20px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-light) 100%);
  color: #fff; border: 2px solid rgba(255,255,255,0.6); border-radius: var(--r-lg);
  cursor: pointer;
  animation: pulseGlow 2.4s ease-in-out infinite,
             pulseScale 2.4s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
  margin-bottom: 14px;
}
.start-here-btn:active { opacity: 0.85; animation: none; transform: scale(0.97); }

.start-here-label { position: relative; text-align: center; line-height: 1.3; font-size: 23px; }
.start-here-icon  { font-size: 22px; line-height: 1; }

.welcome-rml-logo {
  width:      72px;
  opacity:    0.7;
  margin:     0 auto 8px;
  display:    block;
  filter:     drop-shadow(0 1px 6px rgba(0,0,0,0.5));
}

.welcome-spf-label {
  font-family: var(--font-text);
  font-size:   12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:       rgba(160, 191, 146, 0.55);
  text-align:  center;
  margin:      0 auto;
}

.welcome-note {
  font-family: var(--font-text);
  font-size:   14px;
  color:       rgba(200, 225, 210, 0.9);
  text-shadow: 0 1px 8px rgba(0,0,0,0.9);
}

/* ─── Standalone PWA layout override ─────────────────────
   Browser: space-between spreads nicely with the URL bar.
   Standalone: no browser chrome — let the flex column with
   justify-content: space-between handle distribution against
   the full device height. The footer is anchored at the bottom
   via .welcome-below-fold's padding-bottom (safe-area-aware).

   Previously this block added padding-bottom: 6vh on the screen,
   which combined with safe-area-inset-bottom unpredictably across
   iOS PWA cold launches vs resumes — sometimes pushing the SPF
   label way above the home indicator. Removed S5 (Apr 29). The
   name-band keeps a generous top anchor so the title doesn't
   crowd the status bar.
─────────────────────────────────────────────────────────── */
@media (display-mode: standalone) {
  .welcome-name-band {
    padding-top: max(calc(env(safe-area-inset-top) + 16px), 44px); /* fixed floor: was 14vh — burns on iOS cold launch */
  }
}

@media (display-mode: browser) {
  /* In browser mode, Safari's chrome already sits outside the viewport —
     safe-area-inset-top is 0, so the base 44px minimum is phantom space.
     Strip it back to just a small breathing margin. */
  .welcome-name-band {
    padding-top: max(env(safe-area-inset-top) + 10px, 10px);
  }
  /* (May 12 S2) Removed the .welcome-below-fold override that loosened the
     bottom-padding floor from 36px → 16px. iOS PWA cold launches briefly
     match @media (display-mode: browser) before resolving to `standalone`,
     so the 16px floor applied for the first ~150ms, then snapped to the
     base 36px floor — visible as the "SHORT POINT FIVE PRODUCTION" tagline
     jumping up from the home-indicator zone. Aligning both modes on the
     base rule's 36px floor eliminates the race. The cost in actual Safari
     browser mode: 20px more bottom padding above the URL bar, which is
     fine — the SPF line was sitting awkwardly close to Safari's toolbar
     at the old 16px anyway. */
}

/* ─── Main — defined in layout block above ──────────────── */

/* ─── Strain slot ───────────────────────────────────────── */
.strain-slot {
  background:    rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border:        1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--r-lg);
  padding:       16px 16px 4px;
  margin-bottom: 10px;
  box-shadow:    var(--shadow-sm);
}


.compare-slot { border-color: var(--sage); }

/* ── Slot B — sage/green identity ─────────────────────── */
#slotB {
  background: rgba(122, 155, 108, 0.07);
  border-color: rgba(122, 155, 108, 0.28);
}
#slotB .slot-label { color: var(--sage-light) !important; }
#slotB .strain-input:focus {
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(122,155,108,0.18);
}
#slotB .fmt-btn.active {
  background: rgba(122,155,108,0.15);
  color: var(--sage-light);
  border-color: rgba(122,155,108,0.4);
}
#slotB .scan-btn { background: var(--sage-pale); color: var(--sage-light); border-color: rgba(122,155,108,0.35); }
#slotB .scan-btn:hover { background: var(--sage); color: #fff; border-color: var(--sage); }
#slotB .manual-toggle-btn:hover { border-color: var(--sage); color: var(--sage-light); background: var(--sage-pale); }

/* ── Unified compare card ──────────────────────────────── */
#compareWrap.compare-active {
  background:    rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border:        1px solid rgba(160, 191, 146, 0.28);
  border-radius: var(--r-lg);
  overflow:      hidden;
  margin-bottom: 10px;
  box-shadow:    var(--shadow-sm);
}
/* When inside the unified card, slots lose their individual styling */
#compareWrap.compare-active .strain-slot {
  background:    transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border:        none;
  border-radius: 0;
  box-shadow:    none;
  margin-bottom: 0;
  padding:       10px 12px 2px;
}
/* Tighten everything inside compare mode to fit above the fold */
#compareWrap.compare-active .slot-header          { margin-bottom: 4px; }
#compareWrap.compare-active .format-toggle        { margin-top: 4px; gap: 4px; }
#compareWrap.compare-active .fmt-btn              { padding: 5px 4px; min-height: 28px; font-size: 12px; }
#compareWrap.compare-active .divider              { margin: 8px 0; }
#compareWrap.compare-active .scan-manual-row      { gap: 6px; }
#compareWrap.compare-active .scan-btn             { padding: 4px 9px; min-height: 28px; font-size: 13px; }
#compareWrap.compare-active .manual-toggle-btn    { padding: 4px 9px; min-height: 28px; font-size: 13px; }
/* In compare mode: shrink scan button to compact inline, hide sub + divider */
#compareWrap.compare-active .scan-primary-btn     { flex-direction: row; padding: 4px 10px; min-height: 30px; font-size: 13px; gap: 0; border-radius: var(--r-sm); }
#compareWrap.compare-active .scan-primary-title   { font-size: 13px; }
#compareWrap.compare-active .scan-primary-sub     { display: none; }
#compareWrap.compare-active .scan-primary-wrap    { margin-bottom: 6px; }
#compareWrap.compare-active .or-search-divider    { display: none; }

/* vs divider */
.compare-vs-divider {
  display:     none;
  align-items: center;
  gap:         10px;
  padding:     0 16px;
  background:  rgba(160, 191, 146, 0.06);
  border-top:    1px solid rgba(160, 191, 146, 0.18);
  border-bottom: 1px solid rgba(160, 191, 146, 0.18);
}
.compare-vs-divider span {
  font-family:    var(--font-display);
  font-size:      10px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color:          var(--sage-light);
  padding:        5px 0;
  white-space:    nowrap;
}
.compare-vs-divider::before,
.compare-vs-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: rgba(160, 191, 146, 0.2);
}

/* Path A compare layout — vs divider hosts the COMPARE STRAINS button so
   the action sits visually between the two strain slots. The "vs" word
   becomes a small uppercase label above the button. */
.compare-vs-divider.with-button {
  flex-direction: column;
  align-items:    stretch;
  gap:            8px;
  padding:        12px 16px;
  background:     rgba(160, 191, 146, 0.06);
}
.compare-vs-divider.with-button::before,
.compare-vs-divider.with-button::after {
  display: none; /* hide horizontal accent lines when button is in here */
}
.compare-vs-divider.with-button span {
  flex:       0 0 auto;
  text-align: center;
  padding:    0;
}
.compare-vs-divider.with-button .analyze-btn {
  margin: 0;          /* default analyze-btn has top/bottom margin we don't want here */
  width:  100%;
}
/* Prevent the .compare-vs-divider span rule from stomping the button text's font */
.compare-vs-divider .analyze-btn span {
  font-family:    var(--font-serif);
  font-size:      15px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          #fff;
}

.slot-header {
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-bottom:   8px;
  gap:             8px;
}

.slot-label {
  font-size: 13px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color:          var(--teal-light);
  flex:           1;
}

.scan-btn {
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-family:   var(--font-text);
  font-size:     14px;
  font-weight:   500;
  padding:       5px 10px;
  min-height:    32px;
  border-radius: var(--r-sm);
  background:    var(--surface-3);
  border:        1px solid var(--sep-bright);
  color:         var(--text-2);
  cursor:        pointer;
  transition:    background 0.15s, color 0.15s;
  white-space:   nowrap;
}
.scan-btn:hover { background: var(--teal-pale); color: var(--teal-light); }

.remove-compare-btn {
  font-family:   var(--font-text);
  font-size: 16px;
  font-weight:   500;
  padding:       5px 12px;
  min-height:    34px;
  border-radius: var(--r-sm);
  background:    transparent;
  border:        1px solid var(--sep-bright);
  color:         var(--text-3);
  cursor:        pointer;
  transition:    color 0.15s, border-color 0.15s;
  white-space:   nowrap;
}
.remove-compare-btn:hover { color: #e57373; border-color: #e57373; }

.strain-input-wrap {
  position: relative;
}
.strain-input {
  width:          100%;
  font-family:    var(--font-text);
  font-size:      16px;
  font-weight:    400;
  padding:        11px 38px 11px 14px;
  border-radius:  var(--r-sm);
  border:         1px solid rgba(255,255,255,0.15);
  background:     rgba(10, 20, 28, 0.55);
  color:          var(--text-1);
  outline:        none;
  transition:     border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  box-sizing:     border-box;
}
.strain-input-wrap:has(.recents-dropdown:not([style*="display:none"])) .strain-input {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.strain-input:focus {
  border-color: var(--teal-light);
  box-shadow:   0 0 0 3px rgba(42,133,179,0.18);
}
.strain-input::placeholder { color: var(--text-3); }
.strain-clear-btn {
  position:    absolute;
  right:       8px;
  top:         50%;
  transform:   translateY(-50%);
  background:  none;
  border:      none;
  color:       var(--text-3);
  font-size:   15px;
  line-height: 1;
  padding:     4px 6px;
  min-width:   44px;
  min-height:  44px;
  cursor:      pointer;
  border-radius: 50%;
  transition:  color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.strain-clear-btn:hover,
.strain-clear-btn:active { color: var(--text-1); background: rgba(255,255,255,0.08); }

/* Compact thumbnail — appears inline next to "Label ready" badge */
.img-preview-wrap  {
  position: relative; margin-top: 0;
  display: inline-flex; align-items: center; gap: 8px;
}
/* Only show spacing above the preview when an image is actually loaded */
.img-preview-wrap:has(.img-preview.visible) { margin-top: 8px; }
.img-preview {
  width: 52px; height: 52px; object-fit: cover; flex-shrink: 0;
  border-radius: var(--r-sm); display: none;
  border: 1px solid var(--sep);
}
.img-preview.visible { display: block; }

.clear-img {
  position: absolute; top: -5px; right: -5px;
  background: var(--surface-1); border: 1px solid var(--sep-bright);
  border-radius: 50%; width: 20px; height: 20px;
  font-size: 11px; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  color: var(--text-2);
}
/* Expand hit area to 44×44 without changing the visual chip */
.clear-img::after {
  content: ''; position: absolute; inset: -12px; border-radius: 50%;
}
.clear-img.visible { display: flex; }

.extracted-badge {
  display: none; font-size: 13px;
  color: var(--sage-light); background: var(--sage-pale);
  border-radius: var(--r-sm); padding: 3px 8px;
  margin-top: 0; width: fit-content;
}
.extracted-badge.visible { display: inline-block; }

/* ─── Label extraction card ─────────────────────────────── */
.label-extract-card {
  margin-top:    10px;
  background:    var(--surface-1);
  border-radius: var(--r-md);
  border-left:   3px solid var(--teal-light);
  padding:       12px 14px;
  animation:     fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

.extract-reading {
  margin-top: 8px; display: flex; flex-direction: column; gap: 12px;
}
.extract-reading-top {
  font-size: 14px; color: var(--text-3); font-style: italic;
  display: flex; align-items: center; gap: 7px;
}
.extract-reading .spinner { margin: 0; width: 14px; height: 14px; border-width: 2px; }
.extract-reading-fact {
  background: var(--card-bg);
  border: 1px solid var(--sep-bright);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.extract-reading-fact-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--accent); text-transform: uppercase; opacity: 0.7;
}
.extract-reading-fact-text {
  font-size: 12px; color: var(--text-2); line-height: 1.5;
  margin: 0;
}
.extract-reading-fact-source {
  font-size: 10px; color: var(--text-3); font-style: italic; opacity: 0.6;
}

/* Small label thumbnail in the top-right of the extract card (single-mode slot A).
   Sits in a flex row with the strain name on the left. */
.extract-top-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 4px;
}
.extract-top-row-content { flex: 1; min-width: 0; }
/* Right column: format chip stacked above the label thumbnail */
.extract-thumb-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.extract-format-chip {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(42,133,179,0.12);
  border: 1px solid rgba(42,133,179,0.3);
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
}
.extract-format-chip--no-thumb {
  align-self: flex-start;
  margin-bottom: 2px;
}
.extract-thumb-inline {
  width: 62px;
  height: 62px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--sep-bright);
}

/* Fills remaining space in main when homeFactCard is dismissed,
   preventing a void between content and the fixed tab bar. */
.home-bottom-fill { flex: 1 1 auto; }

.extract-header { display: flex; align-items: center; margin-bottom: 8px; }
.extract-header-label {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--teal-light);
}

/* Inline editable strain name on the extract card.
   Renders as a styled text input — typography matches the old display,
   but the user can tap and type directly without hunting for a hidden field. */
.extract-strain-edit-wrap {
  display: flex; flex-direction: column; gap: 4px; margin-bottom: 5px;
}
/* .extract-strain-badge removed — redundant with the card header */
.extract-strain-inline-input {
  font-family: var(--font-serif); font-size: 22px; font-weight: 600;
  color: var(--text-1);
  background: transparent;
  border: 0; border-bottom: 1.5px solid var(--sep-bright);
  border-radius: 0;
  padding: 3px 0 5px;
  width: 100%;
  outline: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease;
  /* textarea-specific: no resize handle, no scrollbar, line-height for multi-line */
  resize: none;
  overflow: hidden;
  line-height: 1.3;
  display: block;
}
.extract-strain-inline-input:focus {
  border-bottom-color: var(--sage-light);
}

.extract-canna { font-size: 17px; color: var(--text-2); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.extract-canna strong { color: var(--text-1); }
.extract-per-dose { font-size: 12px; color: var(--text-3); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 7px; }

.extract-terpenes { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.extract-terp {
  font-size: 15px; padding: 3px 10px; border-radius: 6px;
  background: var(--surface-3); color: var(--text-2);
  border: 1px solid var(--sep-bright);
}

.extract-autofilled { font-size: 14px; color: var(--sage-light); margin-top: 4px; }
.extract-note       { font-size: 14px; color: var(--text-3); margin-top: 4px; font-style: italic; }
.extract-error      { font-size: 16px; color: #e57373; margin-top: 8px; }

/* ── Collapsible product-details accordion on the extract card ──────────
   The raw extracted product description can be long (ingredients, dates,
   employee IDs, barcode, etc.). Hide it by default behind a quiet toggle
   so the ANALYZE button stays close at hand. */
.extract-notes-details { margin-top: 10px; }
.extract-notes-summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  cursor: pointer;
  list-style: none; /* hide default disclosure triangle in Firefox */
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.extract-notes-summary::-webkit-details-marker { display: none; } /* Safari/Chrome */
.extract-notes-summary::marker { display: none; } /* spec-compliant */
.extract-notes-summary:hover {
  background: rgba(42,133,179,0.08);
  border-color: rgba(42,133,179,0.20);
  color: var(--text-2);
}
.extract-notes-summary-label { flex: 1; }
.extract-notes-chevron {
  flex-shrink: 0;
  color: var(--text-3);
  transition: transform 0.2s ease;
}
.extract-notes-details[open] .extract-notes-chevron { transform: rotate(180deg); }
.extract-notes-details[open] .extract-notes-summary { color: var(--text-2); }
.extract-notes-content { margin-top: 8px; }
.extract-terpenes-details { margin-top: 10px; margin-bottom: 4px; }

/* Dispensary found on label */
.extract-dispensary {
  font-family:   var(--font-text);
  font-size:     13px;
  color:         var(--teal-light);
  margin-top:    8px;
  padding-top:   8px;
  border-top:    1px solid var(--sep);
}

/* Dispensary not found — prompt the user */
.extract-dispensary-prompt {
  margin-top:  8px;
  padding-top: 8px;
  border-top:  1px solid var(--sep);
  display:     flex;
  flex-direction: column;
  gap:         5px;
}
.extract-dispensary-label {
  font-family:    var(--font-text);
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color:          var(--text-3);
}
.extract-dispensary-input {
  font-family:   var(--font-text);
  font-size:     14px;
  color:         var(--text-1);
  background:    var(--surface-2);
  border:        1px solid var(--sep-bright);
  border-radius: var(--r-sm);
  padding:       7px 10px;
  width:         100%;
  outline:       none;
}
.extract-dispensary-input:focus {
  border-color: var(--teal-light);
}

/* "Available at" line in strain card header */
.card-dispensary {
  font-family:  var(--font-text);
  font-size:    13px;
  color:        var(--text-3);
  padding:      0 16px 10px;
  margin-top:   -4px;
}
.card-dispensary strong {
  color: var(--text-2);
}

.extract-cta {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 10px 12px;
  background: var(--teal-pale);
  border: 1px solid rgba(42,133,179,0.3);
  border-radius: var(--r-sm);
  animation: ctaPulse 2s ease-in-out infinite;
}
.extract-cta-arrow {
  font-size: 18px; color: var(--teal-light); flex-shrink: 0;
  animation: ctaBounce 1s ease-in-out infinite;
}
.extract-cta-text {
  font-size: 17px; color: var(--teal-light); line-height: 1.4;
}
.extract-cta-text strong { color: #fff; }
@keyframes ctaPulse {
  0%, 100% { border-color: rgba(42,133,179,0.3); }
  50%       { border-color: rgba(42,133,179,0.7); }
}
@keyframes ctaBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(3px); }
}

/* ─── Format toggle ─────────────────────────────────────── */
.format-toggle {
  display: flex; gap: 5px; margin-top: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.fmt-btn {
  flex: 1 1 calc(50% - 5px); text-align: center;
  font-family: var(--font-serif); font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
  padding: 8px 4px; min-height: 44px; border-radius: var(--r-md);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.85); cursor: pointer; white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.fmt-btn:hover  {
  background: rgba(42,133,179,0.12);
  color: var(--teal-light);
  border-color: rgba(42,133,179,0.35);
}
.fmt-btn.active {
  background: rgba(42,133,179,0.15);
  border-color: var(--teal-light);
  border-width: 1.5px;
  color: var(--teal-light);
}
.fmt-btn:active { transform: scale(0.97); }

/* ─── Format nudge — pulses amber when user hits Analyze with no format selected ── */
@keyframes fmt-nudge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,135,90,0); }
  50%       { box-shadow: 0 0 0 5px rgba(212,135,90,0.45); }
}
.format-toggle.fmt-nudge {
  border-radius: var(--r-md);
  animation: fmt-nudge-pulse 1.1s ease-in-out 3;
}
.format-toggle.fmt-nudge .fmt-btn {
  border-color: rgba(212,135,90,0.65);
  color: rgba(212,135,90,0.95);
}

/* (May 11 S3) Saved-analysis chip styles retired — replaced by recents-style
   typed-match dropdown. Tap a matched strain in the recents row to open the
   saved card. See `.recents-dropdown` + `.recent-item` for the styling. */

/* ─── Scan + manual row ─────────────────────────────────── */
.scan-manual-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.scan-manual-row .scan-btn,
.scan-manual-row .manual-toggle-btn {
  flex: 1;
  min-width: 0;
}
.scan-manual-or {
  font-family: var(--font-text);
  font-size: 12px;
  color: var(--text-3);
  align-self: center;
  flex-shrink: 0;
  user-select: none;
}

/* ─── Primary scan block (top of strain card) ──────────── */
.scan-primary-wrap {
  margin-bottom: 0;
}
.scan-primary-btn {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             3px;
  width:           100%;
  font-family:     var(--font-text);
  padding:         11px 16px;
  min-height:      54px;
  border-radius:   var(--r-md);
  background:      rgba(42, 133, 179, 0.14);
  border:          1.5px solid rgba(42, 133, 179, 0.45);
  color:           var(--teal-light);
  cursor:          pointer;
  transition:      background 0.15s, border-color 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.scan-primary-btn:hover,
.scan-primary-btn:active {
  background:    rgba(42, 133, 179, 0.24);
  border-color:  var(--teal-light);
}
.scan-primary-title {
  display:     flex;
  align-items: center;
  font-size:   16px;
  font-weight: 600;
}
.scan-primary-sub {
  font-size:   11px;
  font-weight: 400;
  opacity:     0.65;
  user-select: none;
}

/* ─── "or search by name" divider ──────────────────────── */
.or-search-divider {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin:      12px 0 8px;
}
.or-search-divider::before,
.or-search-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--sep);
}
.or-search-divider span {
  font-family:    var(--font-text);
  font-size:      11px;
  font-weight:    500;
  color:          var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space:    nowrap;
  user-select:    none;
}

/* ─── Manual number entry ───────────────────────────────── */
.manual-toggle-btn {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-text); font-size: 14px; font-weight: 500;
  padding: 5px 10px; min-height: 32px; margin-top: 0; white-space: nowrap;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px dashed var(--sep-bright);
  color: var(--text-3); cursor: pointer; text-align: left;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.manual-toggle-btn:hover { border-color: var(--teal); color: var(--teal-light); background: var(--teal-pale); }

.manual-entry-wrap {
  margin-top: 9px;
  background: var(--surface-1);
  border: 1px solid var(--sep-bright);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-sm);
  padding: 11px 12px;
  animation: fadeIn 0.15s ease;
}
.manual-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.manual-field { display: flex; flex-direction: column; gap: 4px; }
.manual-label {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text-3);
}
.manual-input {
  font-family: var(--font-text); font-size: 16px; font-weight: 500;
  padding: 7px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--sep-bright); background: var(--surface-2);
  color: var(--text-1); outline: none; width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
}
.manual-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,168,32,0.15); }
.manual-input::placeholder { color: var(--text-3); font-size: 15px; }
.manual-hint {
  font-size: 13px; color: var(--sage-light); margin-top: 7px; min-height: 14px;
}

/* ─── Compare toggle ────────────────────────────────────── */
.toggle-compare-btn {
  width: 100%; padding: 12px; min-height: 46px;
  font-family: var(--font-text); font-size: 16px; font-weight: 500;
  color: var(--teal-light);
  background: var(--surface-2);
  border: 1.5px dashed var(--teal-pale);
  border-radius: var(--r-md);
  cursor: pointer; margin-bottom: 10px;
  transition: border-color 0.15s, background 0.15s;
  text-align: center; box-shadow: var(--shadow-sm);
}
.toggle-compare-btn:hover { border-color: var(--teal-light); background: var(--teal-pale); }

/* ─── Hint ──────────────────────────────────────────────── */
.hint { font-size: 16px; color: var(--text-3); text-align: center; margin: 4px 0 14px; line-height: 1.5; }

/* ─── Analyze button ────────────────────────────────────── */
.analyze-btn {
  width: 100%; padding: 12px; min-height: 46px;
  font-family: var(--font-serif); font-size: 16px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-light) 100%);
  border: none; color: #fff;
  transition: opacity 0.15s, transform 0.1s;
  margin: 6px 0 1rem;
  -webkit-appearance: none;
  animation: analyzePulse 2.2s ease-in-out infinite;
}
@keyframes analyzePulse {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(27,95,130,0.45),
                0 0 0 0 rgba(42,133,179,0);
  }
  50% {
    box-shadow: 0 6px 28px rgba(42,133,179,0.7),
                0 0 0 6px rgba(42,133,179,0.12);
  }
}
.analyze-btn:hover  { opacity: 0.9; }
.analyze-btn:active { transform: scale(0.99); animation: none; }
.analyze-btn:disabled { opacity: 0.35; cursor: not-allowed; animation: none; }

/* Label-read state — label is loaded, user MUST tap this to continue.
   Twice the height, larger text, aggressive pulse. Hard to miss. */
.analyze-btn--ready {
  min-height: 92px;
  margin-top: 20px;
  padding: 24px 12px;
  font-size: 18px;
  letter-spacing: 0.12em;
  animation: readyPulse 1.4s ease-in-out infinite;
}
@keyframes readyPulse {
  0%, 100% {
    box-shadow: 0 6px 28px rgba(27,95,130,0.55),
                0 0 0 0 rgba(42,133,179,0);
  }
  50% {
    box-shadow: 0 10px 40px rgba(42,133,179,0.85),
                0 0 0 10px rgba(42,133,179,0.18);
  }
}
.analyze-btn--ready:active { transform: scale(0.98); animation: none; }

/* Loading state — stays bright and prominent, slow pulse continues */
.analyze-btn.loading {
  opacity: 1 !important;
  cursor: wait;
  animation: loadingPulse 1.8s ease-in-out infinite;
}
@keyframes loadingPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(27,95,130,0.5),  0 0 0 0  rgba(42,133,179,0); }
  50%       { box-shadow: 0 6px 32px rgba(42,133,179,0.85), 0 0 0 8px rgba(42,133,179,0.15); }
}

/* Animated three-dot ellipsis after the loading quip */
.btn-dots::after {
  content: '';
  animation: btnDots 1.4s steps(4, end) infinite;
}
@keyframes btnDots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
}

/* ─── Loading / Error ───────────────────────────────────── */
.loading-state {
  display: flex; flex-direction: column;
  color: var(--text-2); line-height: 1.7;
}

/* Wave sweeps left to right across full width — feels like a progress bar.
   The clip-path starts fully masked (right side hidden) and opens to nothing. */
/* Outer wrapper — clips the scan label as it enters from the left,
   and provides the full-bleed negative margin */
.loader-wave-wrapper {
  position: relative;
  overflow: hidden;
  margin-bottom: 4px;
  margin-left: -1rem;
  width: calc(100% + 2rem);
}

/* Wave strands reveal left-to-right via clip-path */
.loader-wave-bar {
  position: relative;
  width: 100%;
  height: 38px;
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  animation: waveReveal 18s cubic-bezier(0.05, 0, 0.15, 1) forwards;
}
.loader-wave-bar .wv {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
@keyframes waveReveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

/* Centered loading quip — cycles below the wave with a gentle fade */
.loader-center-quip {
  text-align:   center;
  font-family:  var(--font-serif);
  /* Apr 30: dropped from 1.1rem to 1rem and added text-wrap: balance so longer
     quips like "Correlating effects against compound ratios." don't strand a
     single word ("ratios.") on line 2. Balance distributes the words evenly
     across however many lines wrap. Falls back to normal wrapping in older
     browsers. */
  font-size:    1.25rem;
  font-style:   italic;
  font-weight:  500;
  color:        rgba(255, 255, 255, 0.82);
  letter-spacing: 0.02em;
  line-height:  1.4;
  text-wrap:    balance;
  max-width:    90%;
  margin-left:  auto;
  margin-right: auto;
  padding:      2px 8px 8px;
  opacity:      0;
  transition:   opacity 0.4s ease;
  pointer-events: none;
  /* Reserve space for 2 lines (1.25rem × 1.4 × 2 + padding) so the Analyze
     button never shifts when a short quip cycles to a longer one. */
  min-height:   4rem;
}
.loader-center-quip.visible {
  opacity: 1;
}

/* Fact text sits below the wave with normal padding */
.loader-fact {
  padding: 0 1rem 0.5rem;
}

.joke-setup {
  font-family:   var(--font-serif);
  font-size:     19px;
  color:         var(--text-1);
  line-height:   1.4;
  margin-bottom: 8px;
}
.joke-punchline {
  font-family:        var(--font-serif);
  font-size:          15px;
  font-weight:        600;
  color:              var(--teal-light);
  line-height:        1.55;
  text-align:         left;
  display:            -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow:           hidden;
  animation:          punchlineIn 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes punchlineIn {
  from { opacity:0; transform: scale(0.85) translateY(8px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}

/* Spinner — still used for label-scan card reading state */
.spinner {
  display: block; width: 22px; height: 22px;
  border: 2.5px solid var(--sep-bright); border-top-color: var(--teal-light);
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Strain validation states ───────────────────────────── */
.strain-unverified-banner {
  margin: 0 0 12px;
  padding: 12px 15px;
  font-size: 14px;
  color: #f5c842;
  background: rgba(245, 200, 66, 0.08);
  border: 1px solid rgba(245, 200, 66, 0.25);
  border-radius: var(--r-md);
  line-height: 1.55;
}
.strain-unverified-banner strong { color: #f5d76e; }

/* Softer version — strain is real, just no enrichment data yet */
.strain-no-data-banner {
  margin: 0 0 12px;
  padding: 12px 15px;
  font-size: 14px;
  color: #7ec8a0;
  background: rgba(94, 173, 114, 0.08);
  border: 1px solid rgba(94, 173, 114, 0.2);
  border-radius: var(--r-md);
  line-height: 1.55;
}
.strain-no-data-banner strong { color: #9ddbb8; }

.error-state {
  padding: 14px 16px; font-size: 16px; color: #e57373;
  background: rgba(229,115,115,0.1); border-radius: var(--r-md);
  border: 1px solid rgba(229,115,115,0.25); line-height: 1.55;
}

/* ─── Did You Know home card ─────────────────────────────── */
.home-fact-card {
  margin: 10px 0 8px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--sep-bright);
  /* Card shrinks to its content — homeBottomFill handles the remaining
     vertical space below it. flex: 1 1 auto was causing the card to
     balloon on tall screens (iPhone 16 Pro Max, 17, etc.). */
  flex: 0 0 auto;
}
/* During analysis loading, persona content (mandala, quotes) floats
   directly on the home background — no card box. */
.home-fact-card--persona-loading {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.home-fact-inner { padding: 12px 16px 10px; }
.home-fact-label {
  display: block;
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--teal-light);
  margin-bottom: 8px;
}
.home-fact-text {
  font-family: var(--font-text);
  font-size: 14px;
  color: var(--text-1);
  line-height: 1.6;
  margin: 0;
}
.home-fact-source {
  font-size: 11px;
  color: var(--text-3);
  font-style: italic;
}

/* ─── Sage persona — breathing mandala ─────────────────── */
.sage-breathe-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 22px;
  gap: 16px;
}
.sage-mandala-canvas {
  width: 144px;
  height: 144px;
  display: block;
}
.sage-breathe-cues {
  position: relative;
  height: 1.5rem;
  width: 100%;
  text-align: center;
}
.sage-breathe-cues span {
  position: absolute;
  left: 0; right: 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* ─── Jeff persona — shower thoughts ────────────────────── */
.jeff-thought-label {
  color: var(--text-2) !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
}
.jeff-thought-text {
  font-style: italic;
  line-height: 1.65;
}

/* ─── Weekly Read card ──────────────────────────────────── */
.weekly-read-card {
  margin: 0 0 10px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(126, 200, 160, 0.25);
  overflow: hidden;
  animation: weeklyReadFadeIn 0.4s ease both;
}
@keyframes weeklyReadFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.weekly-read-inner { padding: 14px 16px 16px; }
.weekly-read-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.weekly-read-label {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--teal-light);
}
.weekly-read-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-3);
  font-size: 18px;
  line-height: 1;
  padding: 0 0 0 12px;
  opacity: 0.6;
}
.weekly-read-dismiss:hover { opacity: 1; }
.weekly-read-headline {
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.45;
  margin: 0 0 10px;
}
.weekly-read-findings {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}
.weekly-read-findings li {
  font-family: var(--font-text);
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.55;
  padding: 6px 0;
  border-top: 1px solid var(--sep);
}
.weekly-read-closer {
  font-family: var(--font-text);
  font-size: 13px;
  font-style: italic;
  color: var(--teal-light);
  line-height: 1.5;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(126,200,160,0.2);
}
.weekly-read-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  font-family: var(--font-text);
  font-size: 13px;
  color: var(--text-3);
}
.weekly-read-loading::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid var(--teal-light);
  border-top-color: transparent;
  border-radius: 50%;
  animation: weeklyReadSpin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes weeklyReadSpin {
  to { transform: rotate(360deg); }
}

/* ─── Monthly Read card (Journal V1.4a) ─────────────────────
 * Same structural pattern as the weekly card with slightly more
 * visual weight, signaling the longer arc. Body and head findings
 * split into two labeled sections; optional pattern lines below. */
.monthly-read-card {
  margin: 0 0 10px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(126, 200, 160, 0.4);
  overflow: hidden;
  animation: weeklyReadFadeIn 0.4s ease both;
}
.monthly-read-inner { padding: 16px 18px 18px; }
.monthly-read-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.monthly-read-label {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--teal-light);
}
.monthly-read-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-3);
  font-size: 18px;
  line-height: 1;
  padding: 0 0 0 12px;
  opacity: 0.6;
}
.monthly-read-dismiss:hover { opacity: 1; }
.monthly-read-headline {
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.45;
  margin: 0 0 14px;
}
.monthly-read-section {
  margin: 0 0 12px;
  padding-top: 10px;
  border-top: 1px solid var(--sep);
}
.monthly-read-section-label {
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--teal-light);
  margin: 0 0 6px;
}
.monthly-read-findings {
  list-style: none;
  padding: 0;
  margin: 0;
}
.monthly-read-findings li {
  font-family: var(--font-text);
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.55;
  padding: 4px 0;
}
.monthly-read-patterns {
  margin: 0 0 12px;
  padding-top: 10px;
  border-top: 1px solid var(--sep);
}
.monthly-read-patterns p {
  font-family: var(--font-text);
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0 0 6px;
}
.monthly-read-patterns p:last-child { margin-bottom: 0; }
.monthly-read-closer {
  font-family: var(--font-text);
  font-size: 13.5px;
  font-style: italic;
  color: var(--teal-light);
  line-height: 1.5;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(126,200,160,0.25);
}
.monthly-read-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  font-family: var(--font-text);
  font-size: 13px;
  color: var(--text-3);
}
.monthly-read-loading::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid var(--teal-light);
  border-top-color: transparent;
  border-radius: 50%;
  animation: weeklyReadSpin 0.7s linear infinite;
  flex-shrink: 0;
}

/* ─── Quick chips ───────────────────────────────────────── */
.quick-section { margin-bottom: 18px; }

.chips-label {
  font-size: 13px; font-weight: 600; color: var(--text-3);
  margin-bottom: 9px; text-transform: uppercase; letter-spacing: 1px;
}
.chips-label strong { color: var(--text-2); text-transform: none; letter-spacing: 0; font-size: 17px; }

.quick-chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }

.quick-chip {
  font-family: var(--font-text); font-size: 17px; font-weight: 500;
  padding: 7px 14px; min-height: 36px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--sep-bright);
  cursor: pointer; color: var(--text-2);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.quick-chip:hover { background: var(--teal-pale); color: var(--teal-light); border-color: var(--teal); }

.quick-chip.crohns-chip { background: var(--sage-pale); color: var(--sage-light); border-color: rgba(122,155,108,0.3); }
.quick-chip.crohns-chip:hover { background: var(--sage); color: #fff; border-color: var(--sage); }

/* ─── Session recents dropdown (appears on input focus) ─── */
.recents-dropdown {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  z-index: 50;
  background: #0d1a22;
  border: 1px solid rgba(255,255,255,0.15);
  border-top: none;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.recent-item {
  display: block; width: 100%;
  padding: 11px 14px;
  font-family: var(--font-text); font-size: 15px; font-weight: 400;
  color: var(--text-2); text-align: left;
  background: transparent; border: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s;
}
.recent-item:last-child { border-bottom: none; }
.recent-item:active { background: rgba(255,255,255,0.07); }

/* ─── Journal tab ────────────────────────────────────────── */
.journal-empty {
  text-align: left; padding: 32px 20px;
}
.journal-empty-title {
  font-family: var(--font-serif); font-size: 20px; font-weight: 600;
  color: var(--text-1); margin-bottom: 6px;
}
.journal-empty-sub { font-size: 15px; color: var(--text-3); margin-bottom: 10px; }
.journal-empty-steps {
  list-style: none; padding: 0; margin: 0 0 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.journal-empty-steps li {
  font-size: 16px; color: var(--text-2); line-height: 1.5;
  padding-left: 20px; position: relative;
}
.journal-empty-steps li::before {
  content: '→'; position: absolute; left: 0;
  color: var(--teal-light); font-size: 14px;
}
.journal-empty-bowl {
  font-size: 14px; color: #ffffff; line-height: 1.6;
  border-top: 1px solid var(--sep); padding-top: 14px; margin-top: 4px;
  font-style: italic;
}

.journal-list { display: flex; flex-direction: column; gap: 10px; }

/* ─── Ledger section (Journal tab) ──────────────────────────── */
.ledger-section {
  background: var(--surface-2);
  border: 1px solid var(--sep-bright);
  border-left: 3px solid var(--teal-light);
  border-radius: var(--r-md);
  padding: 14px 16px 12px;
  margin-bottom: 4px;
  cursor: pointer; touch-action: manipulation;
  position: sticky;
  top: var(--hdr-h, 0px);
  z-index: 20;
  box-shadow: 0 4px 16px -4px rgba(0,0,0,0.45);
}
.ledger-section--eligible { border-left-color: var(--gold); }
.ledger-header-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.ledger-title {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--teal-light); text-transform: uppercase;
}
.ledger-gate-note { font-size: 11px; color: var(--text-3); }
.ledger-progress-row { display: flex; gap: 14px; align-items: flex-start; }
.ledger-progress-item { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.ledger-progress-label { font-size: 12px; color: var(--text-2); }
.ledger-bar-track {
  height: 5px; background: var(--surface-3);
  border-radius: 99px; overflow: hidden;
}
.ledger-bar-fill {
  height: 100%; background: var(--teal-light);
  border-radius: 99px; transition: width 0.4s ease;
}
.ledger-bar-fill--gold { background: var(--gold); }
.ledger-progress-row--ready .ledger-progress-label { color: var(--gold); font-weight: 600; }
/* ── Ledger journey dot-track ───────────────────────────── */
.ldot-track {
  display: flex; align-items: center; gap: 5px;
  margin: 10px 0 4px; flex-wrap: nowrap;
}
.ldot {
  flex: 1; border-radius: 50%; aspect-ratio: 1;
  min-width: 0; max-width: 32px;
}
.ldot--milestone     { flex: 1; }
.ldot--blue          { background: #5b9fd6; flex: 0.75; }
.ldot--sage          { background: #8bc4a0; box-shadow: 0 0 8px rgba(139,196,160,0.65); }
.ldot--dim           { background: rgba(255,255,255,0.12); flex: 0.75; }
.ldot--milestone-dim { background: transparent; border: 2px solid rgba(255,255,255,0.22); border-radius: 50%; }
.ledger-track-meta-inline {
  font-size: 11px; color: var(--text-3);
  letter-spacing: 0.02em; flex: 1; text-align: center;
}
.ledger-progress-label { font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.ledger-generate-btn {
  display: block; width: 100%; padding: 10px 14px;
  background: var(--gold-pale); color: var(--gold);
  border: 1px solid rgba(232,168,32,0.3); border-radius: var(--r-sm);
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  cursor: pointer; text-align: left; touch-action: manipulation;
  transition: background 0.15s;
}
.ledger-generate-btn:hover { background: rgba(232,168,32,0.15); }
.ledger-generate-btn:active { transform: scale(0.98); }
.ledger-generate-btn--chip {
  padding: 4px 12px;
  background: var(--gold-pale); color: var(--gold);
  border: 1px solid rgba(232,168,32,0.35); border-radius: 99px;
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  cursor: pointer; touch-action: manipulation;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap; flex-shrink: 0;
}
.ledger-generate-btn--chip:hover  { background: rgba(232,168,32,0.18); }
.ledger-generate-btn--chip:active { transform: scale(0.96); }
.ledger-visit-preview {
  font-size: 12px; color: var(--text-3);
  margin: 0; font-style: italic;
}
.ledger-explain {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--sep);
}
.ledger-explain p {
  font-size: 14px; color: var(--text-2);
  line-height: 1.65; margin: 0 0 10px;
  font-style: italic;
}
.ledger-explain p:last-child { margin-bottom: 0; }
.ledger-explain-closer {
  color: var(--teal-light) !important;
  font-style: italic;
}

/* ─── Journal section headers (Favorites / All Sessions) ────── */
.journal-section-header {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--text-3); text-transform: uppercase;
  padding: 14px 4px 6px;
  cursor: pointer; touch-action: manipulation;
  user-select: none;
}
.journal-section-header:hover { color: var(--text-2); }
.journal-section-chevron {
  font-size: 10px; color: var(--text-3); margin-left: 6px;
}

/* ─── Favorites compact grid + compare button ─────────────────── */
.fav-compare-btn {
  display: block; width: 100%;
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--surface-3); color: var(--text-3);
  border: 1px solid var(--sep);
  text-align: center;
  opacity: 0.45; cursor: default;
  transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
  touch-action: manipulation;
}
.fav-compare-btn--active {
  background: var(--teal-pale); color: var(--teal-light);
  border-color: rgba(42,133,179,0.5); opacity: 1; cursor: pointer;
}
.fav-compare-btn--active:active { transform: scale(0.98); }

.fav-compact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.fav-compact-card {
  background: var(--surface-2);
  border: 1px solid var(--sep);
  border-radius: var(--r-sm);
  display: flex; align-items: stretch;
  overflow: hidden;
  transition: border-color 0.15s;
  min-height: 64px;
}
.fav-compact-card--selected {
  border-color: var(--teal-light);
}
.fav-compact-body {
  flex: 1; padding: 9px 6px 9px 10px;
  display: flex; flex-direction: column; justify-content: space-between;
  cursor: pointer; touch-action: manipulation;
  min-width: 0;
}
.fav-compact-name {
  font-size: 15px; font-weight: 600;
  color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3; margin-bottom: 5px;
}
.fav-compact-meta {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.fav-compact-type {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: 99px;
  text-transform: uppercase;
}
.fav-compact-type--sativa { background: rgba(220,60,60,0.14);  color: #e06060; }
.fav-compact-type--indica { background: rgba(60,100,220,0.14);  color: #6090e0; }
.fav-compact-type--hybrid { background: rgba(60,180,100,0.14);  color: #60c878; }
.fav-compact-type--editable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fav-compact-type--editable:active { opacity: 0.7; }
.fav-type-edit-hint {
  font-size: 9px; opacity: 0.45; margin-left: 1px;
  font-style: normal; vertical-align: middle;
}
.fav-compact-rating {
  font-size: 11px; color: var(--text-3);
}
.fav-compact-check {
  width: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-3);
  border: none; border-left: 1px solid var(--sep);
  color: var(--text-3);
  cursor: pointer; touch-action: manipulation;
  transition: background 0.15s, color 0.15s;
}
.fav-compact-check--checked {
  background: var(--teal-pale); color: var(--teal-light);
}
.fav-compact-check:active { opacity: 0.65; }

/* ─── Strain History two-column compact grid ─────────────────────
   Used in the allStrains sub-view. Cards are tighter than the full
   journal entry — just enough to scan the list fast. The type badge
   sits top-left so sativa/indica/hybrid is readable at a glance.
   The fav star top-right is subtle — it marks saved items without
   competing with the strain name. Note dot (✎) signals "I wrote
   something here" without showing any text. */
.hist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-bottom: 8px;
}
/* Outer card: flex row. Body (left) opens the saved card; check button
   (right) toggles compare selection. Mirrors fav-compact-card structure. */
.hist-card {
  background: var(--surface-2);
  border: 1px solid var(--sep);
  border-left: 3px solid var(--hist-ribbon, transparent);
  border-radius: var(--r-sm);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  transition: border-color 0.15s;
  min-height: 82px;
}
.hist-card--selected {
  border-color: var(--teal-light);
}
.hist-card-body {
  flex: 1;
  padding: 10px 6px 11px 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-width: 0;
}
.hist-card-body:active {
  background: var(--surface-3);
}
.hist-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 18px;
}
.hist-card-star {
  font-size: 13px;
  color: var(--teal-light);
  line-height: 1;
  flex-shrink: 0;
}
.hist-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.hist-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}
.hist-card-rating {
  font-size: 11px;
  color: var(--text-3);
}
.hist-card-note-dot {
  font-size: 11px;
  color: var(--text-3);
  opacity: 0.6;
  line-height: 1;
}
.hist-card-check {
  width: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  border: none;
  border-left: 1px solid var(--sep);
  color: var(--text-3);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s, color 0.15s;
}
.hist-card-check--checked {
  background: var(--teal-pale);
  color: var(--teal-light);
}
.hist-card-check:active { opacity: 0.65; }

/* ─── No-favs hint (shown when user has scan history but no favorites yet) ── */
.journal-no-favs-hint {
  padding: 18px 16px 20px;
  text-align: center;
}
.journal-no-favs-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
  margin: 0 0 6px;
}
.journal-no-favs-sub {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
  margin: 0;
  max-width: 280px;
  margin-inline: auto;
}
.journal-no-favs-star {
  color: var(--gold);
}

/* ─── Divider between Favorites and Strain History ───────────── */
.journal-section-divider {
  height: 1px;
  background: var(--sep-bright);
  margin: 20px 0 16px;
}

/* ─── Searched Strains entry button ───────────────────────────── */
/* (May 12 S10.6) Row holds Strain History on the left (always) and the
   pharmacist export button on the right (when entries >= 3). When the
   pharmacist is hidden, Strain History stays content-sized at the start.
   When both are present, both flex to equal halves so they sit side-by-side
   on every iPhone width without wrapping. */
.journal-actions-row {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: nowrap;
  margin: 8px auto 0;
}
.journal-allstrains-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: auto; margin: 0;
  padding: 12px 18px;
  background: var(--surface-2);
  border: 1px solid var(--sep-bright);
  border-radius: 99px;
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  color: var(--text-2);
  cursor: pointer; touch-action: manipulation;
  transition: background 0.15s, color 0.15s;
  min-width: 0;
}
/* When BOTH buttons are present, share the row evenly and trim sizing so
   "For my pharmacist" fits inside half the row on the narrowest iPhone.
   :only-child keeps Strain History at its full size when it's alone. */
.journal-actions-row > .journal-allstrains-btn:not(:only-child),
.journal-actions-row > .physician-export-btn {
  flex: 1 1 0;
  font-size: 13px;
  padding: 10px 14px;
  white-space: nowrap;
  min-width: 0;
}
/* Tighter icon-text gap in the paired state */
.journal-actions-row > .physician-export-btn { gap: 6px; }
.journal-allstrains-btn:hover,
.journal-allstrains-btn:active { background: var(--surface-3); color: var(--text-1); }
.journal-allstrains-count {
  font-size: 12px; font-weight: 500;
  background: var(--surface-3); color: var(--text-3);
  padding: 2px 8px; border-radius: 99px;
  border: 1px solid var(--sep);
}

/* ─── Searched Strains sub-view header ────────────────────────── */
.journal-subview-header {
  display: flex; align-items: center; gap: 12px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--sep);
  margin-bottom: 14px;
}
.journal-back-btn {
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  color: var(--teal-light); background: none; border: none;
  padding: 4px 0; cursor: pointer; touch-action: manipulation;
  flex-shrink: 0;
}
.journal-back-btn:active { opacity: 0.7; }
.journal-subview-title {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3);
}

/* ─── Favorites section header — static (no collapse) ────────── */
.journal-section-header--static {
  cursor: default; pointer-events: none;
  color: var(--gold);
}

/* ─── Push V1 — opt-in card on the journal tab ─────────────── */
.push-optin-card {
  background: linear-gradient(180deg, rgba(160,191,146,0.07), rgba(42,133,179,0.05));
  border: 1px solid rgba(160,191,146,0.22);
  border-radius: var(--r-md);
  padding: 16px 16px 14px;
  margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 10px;
  animation: pushOptInFadeIn 0.32s ease-out;
}
@keyframes pushOptInFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.push-optin-card.is-busy { opacity: 0.55; pointer-events: none; }
.push-optin-eyebrow {
  font-family: var(--font-text);
  font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage-light);
  margin: 0;
}
.push-optin-title {
  font-family: var(--font-serif);
  font-size: 17px; font-weight: 600; line-height: 1.3;
  color: var(--text-1);
  margin: 0;
}
.push-optin-body {
  font-family: var(--font-text);
  font-size: 13px; line-height: 1.55;
  color: var(--text-2);
  margin: 0;
}
.push-day-row {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 2px;
}
.push-day-label {
  font-family: var(--font-text);
  font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0;
}
.push-day-buttons {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.push-day-btn {
  font-family: var(--font-text);
  font-size: 12px; font-weight: 500;
  padding: 6px 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.62);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  min-width: 0;
}
.push-day-btn:active { transform: scale(0.97); }
.push-day-btn.selected {
  background: rgba(160,191,146,0.22);
  border-color: var(--sage-light);
  color: #C8E0B4;
}
.push-optin-actions {
  display: flex; gap: 8px; margin-top: 4px; align-items: center;
}
.push-optin-primary {
  font-family: var(--font-text);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--sage);
  border: 1px solid var(--sage-light);
  color: #0d1310;
  cursor: pointer;
  transition: filter 0.15s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.push-optin-primary:hover { filter: brightness(1.05); }
.push-optin-primary:active { transform: scale(0.97); }
.push-optin-secondary {
  font-family: var(--font-text);
  font-size: 13px;
  padding: 9px 14px;
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.push-optin-secondary:hover { color: var(--text-2); }

/* Profile-screen toggle row variant — same chrome as nav rows. */
.prof-summary-toggle-row .prof-summary-row-value { color: var(--sage-light); }

/* ─── Weekly check-in day picker modal ───────────────────── */
/* Centered modal card, scrim behind, opens from the profile-screen Weekly
   check-in row. Reuses .push-optin-eyebrow / .push-optin-title /
   .push-day-buttons / .push-day-btn styles so the visual language matches
   the Journal-tab opt-in card exactly. */
.push-day-modal-overlay {
  position: fixed; inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(7, 12, 9, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: pushOptInFadeIn 0.18s ease-out;
}
.push-day-modal-overlay.is-visible { display: flex; }
.push-day-modal-card {
  background: linear-gradient(180deg, rgba(160,191,146,0.10), rgba(42,133,179,0.06)), var(--surface-1);
  border: 1px solid rgba(160,191,146,0.28);
  border-radius: var(--r-md);
  padding: 22px 22px 18px;
  width: 100%;
  max-width: 340px;
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,0.55);
  animation: pushOptInFadeIn 0.24s ease-out;
}
.push-day-modal-close {
  position: absolute;
  top: 6px; right: 8px;
  width: 44px; height: 44px;
  background: none; border: none;
  color: var(--text-3);
  font-size: 22px; line-height: 1;
  font-family: var(--font-text);
  cursor: pointer;
  border-radius: 999px;
  transition: color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.push-day-modal-close:hover  { color: var(--text-1); background: rgba(255,255,255,0.04); }
.push-day-modal-close:active { transform: scale(0.94); }
.push-day-modal-actions {
  display: flex; justify-content: center; margin-top: 4px;
}
.push-day-modal-actions .push-optin-secondary {
  padding: 8px 14px;
}

.journal-entry {
  background: var(--surface-2);
  border: 1px solid var(--sep-bright);
  border-left: 3px solid var(--teal);
  border-radius: var(--r-md);
  padding: 12px 14px;
  transition: border-left-color 0.15s;
}
.journal-entry--sativa { border-left-color: #E05A4E; }
.journal-entry--indica { border-left-color: #6B8FD6; }
.journal-entry--hybrid { border-left-color: #5BAD72; }

.journal-entry-header {
  display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px;
}
.journal-entry-name-row {
  display: flex; align-items: center; gap: 8px;
}
.journal-entry-meta-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.journal-strain-name {
  font-family: var(--font-serif); font-size: 16px; font-weight: 600;
  color: var(--text-1); flex: 1;
}
/* When the strain name is the tap target to open the saved card */
button.journal-strain-name {
  background: none; border: none; padding: 0; margin: 0;
  text-align: left; cursor: pointer;
  touch-action: manipulation;
  text-decoration: none;
}
.journal-note {
  font-size: 15px; color: var(--text-2); line-height: 1.6;
  font-style: italic; margin-bottom: 10px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.journal-no-note {
  font-size: 15px; color: var(--text-3); font-style: italic; margin-bottom: 10px;
}
.journal-feelings {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
}
/* touch-action: manipulation removes iOS's 300ms double-tap delay on non-button
   elements — without it, divs/spans with onclick need two taps on iOS. */
.journal-feelings--tappable { cursor: pointer; touch-action: manipulation; }
.journal-tappable            { cursor: pointer; touch-action: manipulation; }
.journal-note-view           { touch-action: manipulation; }
.journal-actions             { touch-action: manipulation; }
.journal-feeling-chip {
  font-size: 12px; font-family: var(--font-text);
  padding: 3px 10px; border-radius: 20px;
  background: var(--teal-pale); color: var(--teal-light);
  border: 1px solid var(--teal-dim);
}
.journal-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.journal-action-btn {
  font-family: var(--font-text); font-size: 15px; font-weight: 500;
  padding: 6px 13px; min-height: 32px; border-radius: var(--r-sm);
  background: var(--surface-3); border: 1px solid var(--sep-bright);
  color: var(--text-2); cursor: pointer;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.journal-action-btn:hover { background: var(--teal-pale); color: var(--teal-light); }

.journal-saved-badge {
  font-size: 12px; font-weight: 500;
  padding: 2px 8px; border-radius: 6px;
  background: rgba(232,168,32,0.12); color: var(--gold);
  border: 1px solid rgba(232,168,32,0.25);
  white-space: nowrap;
}

/* ─── My Strains: inline note editor (Apr 30) ─────────────────
   Read-mode by default, pencil swaps to a textarea + Save button.
   The visual transform back to read-mode IS the save proof, plus
   a brief Saved chip flashes next to the strain name. */
.journal-note-block {
  margin-bottom: 10px;
}
.journal-note-view {
  position: relative;
  padding-right: 32px; /* room for the pencil button */
  cursor: pointer;
}
.journal-note-view.is-empty .journal-no-note {
  margin-bottom: 0;
}
.journal-note-view .journal-note,
.journal-note-view .journal-no-note {
  margin-bottom: 0;
}
.journal-note-edit-btn {
  position: absolute;
  top: 0; right: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--sep-bright);
  border-radius: 6px;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
/* Expand hit area to 44×44 without affecting the visible border/bg */
.journal-note-edit-btn::after {
  content: ''; position: absolute; inset: -9px; border-radius: 10px;
}
.journal-note-edit-btn:hover,
.journal-note-edit-btn:active {
  color: var(--teal-light);
  background: rgba(42,133,179,0.12);
  border-color: var(--teal-light);
}
.journal-note-edit {
  display: flex; flex-direction: column; gap: 8px;
  animation: journalNoteFadeIn 0.18s ease-out;
}
.journal-note-edit-label {
  font-family: var(--font-text);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0;
}
.journal-note-edit-input {
  width: 100%;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.55;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--teal-light);
  background: rgba(255,255,255,0.05);
  color: var(--text-1);
  resize: vertical;
  min-height: 80px;
  outline: none;
  box-shadow: 0 0 0 3px rgba(42,133,179,0.15);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  -webkit-appearance: none;
}
.journal-note-edit-input::placeholder {
  color: var(--text-3);
  font-style: italic;
}
.journal-note-edit-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px;
}
.journal-note-edit-cancel {
  background: none;
  border: none;
  padding: 6px 10px;
  font-family: var(--font-text);
  font-size: 13px;
  color: var(--text-3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.journal-note-edit-cancel:hover { color: var(--text-2); }
.journal-note-edit-save {
  font-family: var(--font-text); font-size: 14px; font-weight: 600;
  padding: 7px 18px; border-radius: var(--r-sm);
  background: var(--teal); color: #fff;
  border: 1px solid var(--teal-light);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.journal-note-edit-save:hover  { background: var(--teal-light); }
.journal-note-edit-save:active { transform: scale(0.97); }

/* Saved confirmation flash next to the strain name. */
.journal-note-saved-flash {
  font-family: var(--font-text); font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(160,191,146,0.18);
  color: #C8E0B4;
  border: 1px solid rgba(160,191,146,0.45);
  white-space: nowrap;
  animation: journalNoteSavedFlash 1.5s ease-out forwards;
}
@keyframes journalNoteSavedFlash {
  0%   { opacity: 0; transform: translateY(-4px) scale(0.9); }
  15%  { opacity: 1; transform: translateY(0)    scale(1);   }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

/* "Open Card" gets primary-button emphasis vs the secondary actions. */
.journal-action-btn.journal-action-primary {
  background: rgba(42,133,179,0.16);
  border-color: var(--teal-light);
  color: var(--teal-light);
  font-weight: 600;
}
.journal-action-btn.journal-action-primary:hover {
  background: rgba(42,133,179,0.28);
}

/* ─── Saved-card slide-up sheet (Apr 30) ──────────────────────
   Modal sheet that opens when the user taps Open Card on a journal
   entry. Holds a re-rendered strainCard (cardSuffix='saved'). The
   slide-up animation + scrim with backdrop blur match the iOS
   convention without using anything iOS-specific. */
.saved-card-sheet {
  position: fixed; inset: 0;
  z-index: 200;
  display: none;
  pointer-events: none;
}
.saved-card-sheet.is-open  { display: block; pointer-events: auto; }
/* is-closing keeps the sheet in the DOM during slide-down so the
   transform transition can play. pointer-events off immediately. */
.saved-card-sheet.is-closing                        { display: block; pointer-events: none; }
.saved-card-sheet.is-closing .saved-card-panel      { transform: translateY(100%); }
.saved-card-sheet.is-closing .saved-card-scrim      { opacity: 0; }

.saved-card-scrim {
  position: absolute; inset: 0;
  background: rgba(7,12,16,0.55);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  opacity: 0;
  transition: opacity 0.22s ease-out;
}
.saved-card-sheet.is-open .saved-card-scrim { opacity: 1; }

.saved-card-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  /* (May 11 S3) Reverted to fixed top:6%/bottom:0 (94vh stable height).
     The intermediate max-height:94% change caused a mid-animation layout
     shift: translateY(100%) → translateY(0) is height-relative, so when
     iOS settled the visualViewport during open + body scroll lock kicked
     in, the panel's resolved height changed, the 100% reference shifted,
     and the panel jumped a frame ("shake") — also leaving a black band
     at the bottom when the post-shake height was smaller than the
     starting height. Fixed dimensions make the translate animation
     stable. The "huge empty space below short cards" issue that drove
     the prior change is addressed with the bottom sage-tinted glow
     below — gives the lower 20% intentional visual weight instead of
     reading as dead space. */
  top: 6%;
  background:
    radial-gradient(ellipse 80% 50% at 50% -5%, rgba(52,95,62,0.42) 0%, transparent 70%),
    radial-gradient(ellipse 100% 30% at 50% 105%, rgba(52,95,62,0.16) 0%, transparent 75%),
    var(--bg, #07090a);
  border-top-left-radius:  20px;
  border-top-right-radius: 20px;
  border-top: 1px solid var(--sep-bright);
  box-shadow: 0 -16px 48px rgba(0,0,0,0.55);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.22, 0.85, 0.35, 1);
  padding: 18px 16px max(env(safe-area-inset-bottom), 24px);
}
.saved-card-sheet.is-open .saved-card-panel { transform: translateY(0); }

/* Drag handle pill — sits at the top center of the sheet, tappable to dismiss.
   Amy's call: this is where every iOS user's thumb goes first.
   Visual is 5px tall but the touch target is 44px tall (iOS HIG minimum).
   The pill itself is a pseudo-element so padding can expand the hit area freely. */
.saved-card-handle {
  width: 80px;
  height: 44px; /* full iOS-minimum touch target */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -10px auto 4px; /* pull up so it doesn't add visual space */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.saved-card-handle::after {
  content: '';
  display: block;
  width: 40px; height: 5px;
  background: rgba(255,255,255,0.22);
  border-radius: 999px;
  transition: background 0.15s;
}
.saved-card-handle:hover::after,
.saved-card-handle:active::after { background: rgba(255,255,255,0.42); }

/* Remove-strain control — sits at the very bottom of the saved-card sheet.
   Requires scrolling to reach: deliberate friction for a destructive action.
   Two-tap confirmation: first tap turns red, second tap executes. */
.saved-card-remove-wrap {
  padding: 24px 20px 8px;
  display: flex;
  justify-content: center;
}
.saved-card-remove-btn {
  font-size: 13px;
  color: var(--text-3);
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 8px 22px;
  cursor: pointer;
  font-family: var(--font-text);
  letter-spacing: 0.02em;
  transition: color 0.18s, border-color 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.saved-card-remove-btn.confirming {
  color: #e05c5c;
  border-color: rgba(224,92,92,0.3);
}
.saved-card-remove-btn:disabled {
  opacity: 0.45;
  pointer-events: none;
}

.saved-card-content { margin-top: 0; }

/* Lock body scroll while the sheet is open. */
body.saved-card-open { overflow: hidden; }

/* ─── Journal V1.2: deep entry (four guided prompts) ──────────────
   Pill button opens four prompted textareas inline on both surfaces:
   My Strains journal list (compact) and strain card / Open Card sheet
   (larger — .journal-deep-pill--card modifier). */

/* ── Shared pill ── */
.journal-deep-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--sep-bright);
  background: transparent;
  color: var(--text-3);
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}

.journal-deep-pill:hover,
.journal-deep-pill:active {
  border-color: var(--teal-light);
  color: var(--teal-light);
}

.journal-deep-pill.has-data {
  border-color: rgba(42,133,179,0.5);
  color: var(--teal-light);
  background: rgba(42,133,179,0.08);
}

/* ── Larger pill for strain card / Open Card surface ── */
.journal-deep-pill--card {
  font-size: 13px;
  padding: 7px 18px;
  margin-top: 14px;
}

/* ── Expanded prompts (shared) ── */
.journal-deep-section,
.journal-deep-expand {
  display: none;
  margin-top: 14px;
}

.journal-deep-section.is-open { display: block; }

.journal-deep-prompt { margin-bottom: 10px; }

.journal-deep-label {
  display: block;
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
}

.journal-deep-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface-2);
  border: 1px solid var(--sep-bright);
  border-radius: var(--r-sm);
  color: var(--text-1);
  font-family: var(--font-serif, Georgia, serif);
  font-size: 13px;
  line-height: 1.5;
  padding: 8px 10px;
  resize: none;
  transition: border-color 0.18s;
}

.journal-deep-input:focus {
  outline: none;
  border-color: var(--teal-light);
}

.journal-deep-input::placeholder { color: var(--text-3); opacity: 0.6; }

/* Larger inputs on the card surface */
.journal-deep-pill--card ~ .journal-deep-section .journal-deep-input {
  font-size: 14px;
  padding: 10px 12px;
}

.journal-deep-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.journal-deep-save {
  background: rgba(42,133,179,0.12);
  border: 1px solid var(--teal-light);
  border-radius: var(--r-sm);
  color: var(--teal-light);
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.18s, transform 0.1s;
}

.journal-deep-save:hover  { background: rgba(42,133,179,0.22); }
.journal-deep-save:active { transform: scale(0.97); }

.journal-deep-saved-flash {
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(160,191,146,0.18);
  color: #C8E0B4;
  border: 1px solid rgba(160,191,146,0.45);
  white-space: nowrap;
}

/* My Strains journal list block — now lives inside the note edit panel */
.journal-deep-block { margin-top: 10px; }
.journal-deep-expand { margin-top: 10px; }

/* ─── Results ───────────────────────────────────────────── */
.vs-badge {
  text-align: center; font-family: var(--font-serif);
  font-size: 15px; color: var(--text-3); margin-bottom: 14px;
}

.results-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 14px; margin-bottom: 14px;
}

/* ─── Strain card ───────────────────────────────────────── */
.strain-card {
  background:    rgba(25, 44, 62, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:        1px solid var(--sep-bright);
  border-top:    3px solid var(--teal-light);
  border-radius: var(--r-xl);
  padding:       20px;
  margin-bottom: 14px;
  box-shadow:    var(--shadow-md);
}
.results-grid .strain-card { margin-bottom: 0; min-width: 0; }

.strain-card-header {
  display: flex; align-items: center;
  justify-content: space-between; gap: 8px; margin-bottom: 2px;
}

.strain-name {
  font-family: var(--font-serif); font-size: 22px; font-weight: 600;
  line-height: 1.25; color: var(--text-1);
}

.source-tag {
  font-family: var(--font-text); font-size: 12px; font-weight: 500;
  padding: 2px 8px; border-radius: 6px; margin-left: 7px;
  vertical-align: middle; display: inline-block; transform: translateY(-2px);
}
.source-real      { background: var(--sage-pale);       color: var(--sage-light); }
.source-leafly    { background: var(--teal-pale);       color: var(--teal-light); }
.source-community { background: rgba(180,140,60,0.13);  color: #c4a035; }
.source-gen       { background: var(--surface-3);       color: var(--text-3); }

/* Format badge on the result card — Vape / Flower / Edible */
.card-format-pill {
  font-family: var(--font-text); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent);
  background: rgba(42,133,179,0.12);
  border: 1px solid rgba(42,133,179,0.2);
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 5px;
  vertical-align: middle;
  display: inline-block;
  transform: translateY(-2px);
  white-space: nowrap;
}

/* ─── Periodic tiles ─────────────────────────────────────── */
.periodic-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 14px 0 16px;
}
.ptile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--sep-bright);
  border-radius: var(--r-sm);
  padding: 8px 4px 9px;
  text-align: center;
  gap: 2px;
}
.ptile-label {
  font-size: 8px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.5px;
  line-height: 1; width: 100%;
}
.ptile-sym {
  font-family: var(--font-display);
  font-size: clamp(14px, 4vw, 20px); font-weight: 600;
  color: var(--text-1); line-height: 1.1;
  word-break: break-all; text-align: center;
}
.ptile-sub {
  font-family: var(--font-text);
  font-size: 8px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--text-2); line-height: 1;
}
.tile-thc   { border-top: 2px solid var(--teal-light); }
.tile-cbd   { border-top: 2px solid var(--sage); }
.tile-type  { border-top: 2px solid var(--gold); }
.tile-crohns { border-top: 2px solid var(--crohns-mid); }
.tile-crohns .ptile-sym { color: var(--crohns-fg); }

/* ─── Effect tags (positives / negatives / helps with) ────── */
.effect-tags-wrap { margin: 12px 0; display: flex; flex-direction: column; gap: 10px; }
.tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; justify-content: flex-start; }
.tag-group-label {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--text-2); white-space: nowrap;
  flex-basis: 100%; margin-bottom: 3px;
}
.etag {
  font-size: 16px; font-weight: 500;
  padding: 3px 9px; border-radius: 6px;
}
.etag-pos  { background: rgba(122,155,108,0.18); color: var(--sage-light); }
.etag-neg  { background: rgba(220,100,80,0.15);  color: #E8957A; }
.etag-help { background: rgba(27,95,130,0.25);   color: var(--teal-light); }

.fav-btn {
  font-size: 22px; background: none; border: none; cursor: pointer;
  color: var(--text-3); padding: 0; line-height: 1;
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 0.15s, transform 0.15s; flex-shrink: 0; margin-top: 2px;
}
/* Hover only on real pointer devices — touch screens retain :hover after tap,
   which causes a yellow hollow star ghost after de-favoriting */
@media (hover: hover) and (pointer: fine) {
  .fav-btn:hover { color: var(--gold); transform: scale(1.18); }
}
.fav-btn.favorited { color: var(--gold); }

.type-badge {
  display: inline-block; font-family: var(--font-text); font-size: 13px; font-weight: 600;
  padding: 4px 12px; border-radius: var(--r-sm); margin-bottom: 14px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.badge-hybrid  { background: rgba(232,168,32,0.15);  color: var(--gold); }
.badge-indica  { background: rgba(130,80,200,0.15);  color: #B899F5; }
.badge-sativa  { background: rgba(230,120,40,0.15);  color: #F0A060; }

.section-label {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--text-3); margin: 16px 0 7px;
}

.divider { border: none; border-top: 1px solid var(--sep); margin: 16px 0; }

/* Vibe check */
.vibe-check-box {
  background: var(--surface-3); border: 1px solid var(--sep-bright);
  border-left: 3px solid var(--sage);
  border-radius: var(--r-md); padding: 12px 14px; margin: 10px 0 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.vibe-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--sage-light); }
.vibe-text  { font-family: var(--font-serif); font-size: 18px; color: var(--text-1); font-style: italic; }

/* Music & food pairings */
.pairings-row {
  display: grid; grid-template-columns: 1fr;
  gap: 10px; margin-top: 4px; margin-bottom: 14px;
}

/* ── Flip card shell ─────────────────────────────────────── */
.flip-card {
  perspective: 1000px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  display: grid;                      /* both faces share one cell — height = tallest face */
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
  grid-area: 1 / 1;                   /* same grid cell → natural overlap */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flip-card-back {
  transform: rotateY(180deg);         /* pre-rotated; backface-visibility handles hide/show */
}

.flip-hint {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  opacity: 0.45;
  letter-spacing: 0.3px;
  align-self: flex-end;
}

.pairing-block {
  border-radius: var(--r-md); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--sep-bright);
}
.pairing-block.music               { background: #0D0A1E; border-color: rgba(130,80,200,0.3); }
.pairing-block.music.music-back    { background: #0A0D1E; border-color: rgba(80,130,220,0.35); }
.pairing-block.food.food-stoner    { background: #1E0E00; border-color: rgba(220,110,30,0.35); }
.pairing-block.food.food-healthy   { background: #071A0D; border-color: rgba(60,180,90,0.35); }

.pairing-icon-label {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
  display: flex; align-items: center; gap: 5px;
}
.pairing-block.music                .pairing-icon-label { color: #9B79E0; }
.pairing-block.music.music-back     .pairing-icon-label { color: #7AABF0; }
.pairing-block.food.food-stoner     .pairing-icon-label { color: #E07030; }
.pairing-block.food.food-healthy    .pairing-icon-label { color: #4DB870; }

.pairing-name { font-family: var(--font-serif); font-size: 17px; font-weight: 500; line-height: 1.3; }
.pairing-song { font-family: var(--font-text); font-size: 15px; font-weight: 400; opacity: 0.7; }
.pairing-block.music                .pairing-name { color: #D4C0FF; }
.pairing-block.music.music-back     .pairing-name { color: #A8CFFF; }
.pairing-block.food.food-stoner     .pairing-name { color: #F09050; }
.pairing-block.food.food-healthy    .pairing-name { color: #6DD890; }

.pairing-why { font-size: 17px; line-height: 1.5; margin-top: 2px; }
.pairing-block.music                .pairing-why { color: rgba(180,155,240,0.6); }
.pairing-block.music.music-back     .pairing-why { color: rgba(140,180,255,0.6); }
.pairing-block.food.food-stoner     .pairing-why { color: rgba(220,120,50,0.7); }
.pairing-block.food.food-healthy    .pairing-why { color: rgba(80,200,110,0.7); }

.recipe-block {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(232,168,32,0.2);
  display: flex; flex-direction: column; gap: 5px;
}
.food-stoner .recipe-block { border-top-color: rgba(220,120,50,0.25); }
.food-healthy .recipe-block { border-top-color: rgba(60,180,90,0.25); }
.food-healthy .recipe-label { color: #4DB870; }
.food-healthy .recipe-steps { color: rgba(80,200,110,0.75); }
.recipe-label {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1px; color: var(--gold);
}
.recipe-steps {
  font-size: 16px; line-height: 1.65;
  color: rgba(232,168,32,0.75);
  font-family: var(--font-text);
}

.apple-music-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-sm);
  padding: 6px 12px;
  color: #fff; font-size: 15px; font-weight: 500;
  text-decoration: none; font-family: var(--font-text);
  transition: background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.apple-music-btn:hover {
  background: rgba(252,60,68,0.2);
  border-color: rgba(252,60,68,0.4);
  color: #fff;
}
.am-icon {
  width: 14px; height: 14px; flex-shrink: 0;
  color: #FC3C44; /* Apple Music red */
}

/* ─── Apple Music inline embed player ───────────────────── */
/* display:contents is broken inside preserve-3d on iOS Safari — use flex instead */
.music-pairing-face { display: flex; flex-direction: column; gap: 4px; }

.music-embed-container {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, margin-bottom 0.35s ease;
  margin-bottom: 0;
}
.music-embed-container.open {
  max-height: 180px;
  margin-bottom: 10px;
}
.music-embed-container iframe {
  border-radius: 10px;
  display: block;
  width: 100%;
  /* Force GPU compositing layer — prevents iOS Safari from
     rendering the iframe below sibling elements inside a
     preserve-3d stacking context */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Embed is always closed before a flip fires (see toggleFlip in app.js),
   so no transform-style override needed here. */

/* ─── Apple Music back-nudge toast ──────────────────────── */
#am-toast {
  position: fixed;
  bottom: 90px; /* sit above the tab bar */
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  background: rgba(30, 30, 40, 0.95);
  border: 1px solid rgba(252, 60, 68, 0.3);
  border-radius: 24px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  z-index: 9999;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  pointer-events: none;
}
#am-toast.am-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.am-toast-icon { font-size: 15px; }
.am-toast-text { font-size: 13px; color: var(--text-2); }
.am-toast-text strong { color: #FC3C44; font-weight: 600; }

/* ─── Ask Dad bottom-sheet overlay ──────────────────────── */
.askdad-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  overscroll-behavior: none;
  touch-action: none;
}
.askdad-overlay.visible {
  opacity: 1;
  pointer-events: all;
}
.askdad-sheet {
  width: 100%;
  max-width: 640px;
  background: rgba(19, 34, 50, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--sep-bright);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 12px 24px calc(env(safe-area-inset-bottom, 0px) + 90px);
  text-align: center;
  transform: translateY(30px);
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.askdad-overlay.visible .askdad-sheet {
  transform: translateY(0);
}
.sheet-handle {
  width: 36px; height: 4px;
  background: var(--sep-bright);
  border-radius: 2px;
  margin: 0 auto 18px;
}

.askdad-brand {
  text-align: center; margin-bottom: 18px;
}
.askdad-logo {
  width: 48px; height: 48px; object-fit: contain;
  margin-bottom: 10px;
  filter: drop-shadow(0 2px 10px rgba(42,133,179,0.4));
}
.askdad-wordmark {
  font-family: var(--font-serif);
  font-size: 28px; font-weight: 700; letter-spacing: 4px;
  color: var(--text-1); margin-bottom: 4px;
  display: flex; align-items: center; gap: 12px;
}
.askdad-wordmark::before,
.askdad-wordmark::after {
  content: ''; flex: 1; height: 1px;
}
.askdad-wordmark::before {
  background: linear-gradient(to right, transparent, rgba(160,191,146,0.45));
}
.askdad-wordmark::after {
  background: linear-gradient(to left, transparent, rgba(160,191,146,0.45));
}
.askdad-pronunciation {
  font-family: var(--font-serif); font-style: italic;
  font-size: 14px; color: var(--text-3); margin-bottom: 6px;
  letter-spacing: 1px;
}
.askdad-byline {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--teal-light);
}
.askdad-tagline {
  font-family: var(--font-serif); font-style: italic;
  font-size: 16px; color: var(--text-2); line-height: 1.5;
  text-align: center; margin-bottom: 22px;
}
.askdad-btns {
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 16px; width: 100%;
}
.askdad-btn {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 12px; padding: 18px 24px; width: 100%;
  border-radius: var(--r-md);
  text-decoration: none;
  font-family: var(--font-text); font-weight: 600;
  transition: transform 0.15s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.askdad-btn:active { transform: scale(0.96); opacity: 0.85; }
.call-btn {
  background: linear-gradient(135deg, #1A5F3A, #2A8C58);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.1);
}
.text-btn {
  background: linear-gradient(135deg, var(--teal), var(--teal-light));
  color: #fff;
  border: 1px solid rgba(255,255,255,0.1);
}
.askdad-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.askdad-btn-label { font-size: 16px; letter-spacing: 0.3px; }
.askdad-note {
  font-size: 13px; color: var(--text-3);
  line-height: 1.6;
}
.build-stamp {
  font-size: 10px; font-family: monospace;
  color: rgba(255,255,255,0.12);
  margin-top: 1.5rem; text-align: center;
  letter-spacing: 0.05em;
  user-select: none;
}

/* ─── Learn (Field Guide) overlay + Terpene Library ──────────
   (May 12 S2) Replaces the Contact bottom-tab. Mirrors askdad's
   overlay/sheet plumbing but with the sheet taking more vertical
   real estate (89vh) because the body content is a scrollable
   grid of terpene cards, not a short call/email panel.
─────────────────────────────────────────────────────────── */
/* (May 11 S1) .learn-overlay and .learn-sheet removed — Guide is now a
   true tab panel (#panel-guide). Content styles below are unchanged. */

/* #panel-guide inherits .tab-panel layout. The brand header and grid
   render inside .tab-panel-inner just like the journal tab does. */
#panel-guide .tab-panel-inner {
  padding: 0 4px;
}

.learn-brand {
  text-align: center;
  margin-bottom: 18px;
  padding: 0 4px;
}
.learn-eyebrow {
  font-family: var(--font-serif);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--teal-light);
  margin: 0 0 6px;
}
.learn-title {
  font-family: var(--font-serif);
  font-size: 28px; font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-1);
  margin: 0 0 8px;
}
.learn-sub {
  font-family: var(--font-text);
  font-size: 14px; line-height: 1.5;
  color: var(--text-3);
  margin: 0 auto;
  max-width: 32em;
}
.learn-grid {
  /* (May 11 post-v12200) Single-column row layout (Option 3b). Each row puts
     emoji on the left, then a content column with name+pron, tag pills, and
     a one-line hero. Tags sit in the eye-flow under the name, not off to the
     right where they get skipped. No 2-col tablet override anymore — rows
     are dense enough that adding a column duplicates information density
     instead of multiplying it. */
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 8px;
}
.learn-disclaimer {
  margin: 22px auto 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-3);
  text-align: center;
  max-width: 32em;
  opacity: 0.75;
  font-style: italic;
}

/* ─── By Symptom condition glossary (May 12 S9) ───────────────────────────
   Sits below the terpene grid and disclaimer in #conditionGlossary.
   Six condition cards, each with a name, one-sentence description, and
   terpene chips that call openTerpeneDetail via data-action.             */
.cgloss-section {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.cgloss-header {
  text-align: center;
  margin-bottom: 6px;
  padding: 0 4px;
}
.cgloss-intro {
  font-family: var(--font-text);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-3);
  margin: 0 auto;
  max-width: 32em;
}
/* (May 12 S10.3) Per-condition color identity. Each card carries
   --cond-accent and --cond-bg as inline custom props (set by the renderer
   from _CONDITION_COLORS). The card uses them for left-ribbon, wash, and
   title color so the six conditions read as distinct, not six dark tiles.
   Falls back to neutral if a card forgets to set the props.              */
.cgloss-card {
  background: var(--cond-bg, rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 3px solid var(--cond-accent, rgba(255,255,255,0.12));
  border-radius: var(--r-md);
  padding: 16px 16px 14px;
}
/* (May 12 S10.2) Condition name is a real card title — 22px Playfair weight 700.
   Was 15px which let the chips visually dominate.
   (May 12 S10.3) Color picks up the condition accent so the card owns its identity. */
.cgloss-name {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--cond-accent, var(--text-1));
  display: block;
  margin-bottom: 6px;
}
.cgloss-desc {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-3);
  margin: 0 0 12px;
}
.cgloss-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cgloss-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-text);
  /* (May 12 S10.2) Eased back to 13/600 now that the card title is at 22px.
     Chips now clearly read as supporting content under a title, not as the
     main event. Sans is kept per design system rule (Playfair = titles only). */
  font-size: 13px;
  font-weight: 600;
  color: var(--chip-color, #7A9B6C);
  background: var(--chip-bg, rgba(122,155,108,0.15));
  border: 1px solid color-mix(in srgb, var(--chip-color, #7A9B6C) 30%, transparent);
  border-radius: 999px;
  padding: 5px 12px 5px 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.cgloss-chip:active {
  opacity: 0.75;
  transform: scale(0.96);
}

/* ─── Field Guide segmented control (May 12 S10) ──────────────────────────
   Two-pill toggle that lives at the top of #panel-guide. Swaps between
   By Terpene (#terpeneLibraryView) and By Symptom (#conditionGlossaryView).
   Sits inside .learn-brand which is text-align:center, so inline-flex
   centers it automatically.                                                */
.guide-segmented {
  display: inline-flex;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 3px;
  margin: 0 0 12px;
}
.guide-seg-pill {
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-3);
  background: transparent;
  border: none;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.18s ease, color 0.18s ease;
}
.guide-seg-pill.active {
  background: var(--sage-pale);
  color: var(--sage-light);
}
.guide-seg-pill:not(.active):hover {
  color: var(--text-2);
}
.guide-seg-pill:not(.active):active {
  opacity: 0.7;
}

/* ─── Physician export button (May 12 S9) ──────────────────────────────────
   Sits at the bottom of the My Strains tab when >= 3 entries exist.        */
/* .physician-export-wrap removed — buttons now live in .journal-actions-row */
.physician-export-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 12px 20px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--sage-light);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.physician-export-btn:active {
  opacity: 0.7;
  transform: scale(0.97);
}
.physician-export-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.physician-export-icon { font-size: 16px; }
.physician-export-arrow { opacity: 0.5; }
.physician-export-sub {
  font-family: var(--font-text);
  font-size: 11px;
  color: var(--text-3);
  margin-top: 6px;
  opacity: 0.7;
}
.physician-export-error {
  font-size: 12px;
  color: #e05c3a;
  margin-top: 8px;
}

/* Individual terpene row (Option 3b, May 11 post-v12200) — links to terpene-{slug}.html.
   Row layout: content column left, emoji right. The text column anchors to
   the left so the reading eye lands on name → tags → hero line in one sweep.
   The tlib-color left-border accent now hugs the text, which is where the
   visual weight belongs. Emoji sits decoratively on the far right.
   (May 11 S5) touch-action: manipulation eliminates the iOS 300ms tap delay
   so navigation to terpene pages fires instantly on touchend. */
.tlib-card {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  background: var(--tlib-bg, rgba(255,255,255,0.04));
  border: 1px solid color-mix(in srgb, var(--tlib-color, #7A9B6C) 35%, transparent);
  border-left: 3px solid var(--tlib-color, #7A9B6C);
  border-radius: var(--r-md);
  padding: 11px 13px 12px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.tlib-card:active {
  transform: scale(0.98);
  opacity: 0.92;
}
/* (May 11 S1) .learn-sheet.is-scrolling rules removed — sheet is gone.
   Scroll guard is now handled via the _learnScrolled JS flag on the grid. */
.tlib-emoji {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  /* (May 11 S5) Emoji is now on the far right. align-self: center keeps it
     vertically centered against the content column regardless of card height. */
  align-self: center;
  margin-left: auto;
  padding-left: 4px;
}
.tlib-content {
  flex: 1;
  min-width: 0;
}
.tlib-namerow {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
/* (May 12 S10.5) Bumped 17→20 so the terpene name reads as the card's
   real title, not a label. Pronunciation lifted 11→12 in step so the
   inline pairing stays proportionate. */
.tlib-name {
  font-family: var(--font-serif);
  font-size: 20px; font-weight: 600;
  color: var(--text-1);
  margin: 0;
  line-height: 1.15;
}
/* Pronunciation — inline next to the terpene name, matches the .hero-pron
   convention on terpene-{slug}.html pages. */
.tlib-pron {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.3px;
  color: var(--text-2);
  margin: 0;
  line-height: 1.15;
}
.tlib-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 5px;
}
.tlib-tag {
  display: inline-block;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--tlib-color, var(--teal-light));
  background: color-mix(in srgb, var(--tlib-color, #7A9B6C) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tlib-color, #7A9B6C) 30%, transparent);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.tlib-line {
  font-family: var(--font-text);
  font-style: italic;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-2);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* ─── Terpene detail view — in-app push from Field Guide grid ──────────────
   Replaces navigation to standalone terpene-*.html pages. Content is fetched
   and injected into .terpene-detail-content; --terpene / --terpene-soft /
   --terpene-border are set inline from TERPENE_COLORS by openTerpeneDetail().
   All selectors are scoped so they can't leak into the rest of the app.    */

.terpene-detail {
  display: none;
  min-height: 100%;
}

/* Back-button row */
.terpene-detail-back {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 0 22px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  background: none;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s;
}
.terpene-detail-back:active { color: var(--sage-light); }
.terpene-detail-back svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Container for the fetched .wrap content */
.terpene-detail-content {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-1);
}

/* Hero */
.terpene-detail-content .hero {
  margin-bottom: 32px;
  text-align: center;
}
.terpene-detail-content .hero-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--terpene-soft, rgba(122,155,108,0.15));
  border: 1px solid var(--terpene-border, rgba(122,155,108,0.32));
  font-size: 32px;
  margin-bottom: 16px;
}
.terpene-detail-content .hero-eyebrow {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sage); margin-bottom: 10px; opacity: 0.85;
}
.terpene-detail-content .hero-title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 8vw, 44px);
  font-weight: 700; color: var(--text-1);
  line-height: 1.05; letter-spacing: 0.04em; text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  gap: 0.4em; width: 100%; margin-bottom: 10px;
}
.terpene-detail-content .hero-title::before,
.terpene-detail-content .hero-title::after {
  content: ''; flex: 1; height: 1.5px; min-width: 12px; max-width: 60px;
}
.terpene-detail-content .hero-title::before {
  background: linear-gradient(to right, transparent, rgba(160,191,146,0.45));
}
.terpene-detail-content .hero-title::after {
  background: linear-gradient(to left,  transparent, rgba(160,191,146,0.45));
}
.terpene-detail-content .hero-pron {
  font-family: var(--font-text); font-size: 13px;
  color: var(--text-3); letter-spacing: 0.02em; margin-bottom: 12px;
}
.terpene-detail-content .hero-pron em { color: var(--text-2); font-style: normal; }
.terpene-detail-content .hero-line {
  font-family: var(--font-display); font-size: 16px; font-style: italic;
  color: var(--terpene, #7A9B6C);
  max-width: 460px; margin: 0 auto; line-height: 1.55;
}

/* Cards */
.terpene-detail-content .card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-lg, 20px);
  padding: 20px 20px; margin-bottom: 12px;
}
.terpene-detail-content .card h2 {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sage-light); margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--sep);
}
.terpene-detail-content .card p {
  color: var(--text-2); margin-bottom: 12px; font-size: 15px; line-height: 1.75;
}
.terpene-detail-content .card p:last-child { margin-bottom: 0; }
.terpene-detail-content .card p strong { color: var(--text-1); font-weight: 600; }

/* Descriptor pills */
.terpene-detail-content .descriptor-list {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;
}
.terpene-detail-content .descriptor {
  background: var(--terpene-soft, rgba(122,155,108,0.1));
  border: 1px solid var(--terpene-border, rgba(122,155,108,0.28));
  color: var(--terpene, #7A9B6C);
  border-radius: 999px; padding: 3px 10px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
}

/* Strain grid */
.terpene-detail-content .strain-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px; margin-top: 12px;
}
.terpene-detail-content .strain-tile {
  background: rgba(255,255,255,0.04); border: 1px solid var(--sep);
  border-radius: var(--r-md, 14px); padding: 12px 14px;
}
.terpene-detail-content .strain-tile-name {
  font-family: var(--font-serif); font-size: 15px; font-weight: 600;
  color: var(--text-1); margin-bottom: 3px;
}
.terpene-detail-content .strain-tile-note {
  font-size: 12px; color: var(--text-3); line-height: 1.4;
}

/* Pair list */
.terpene-detail-content .pair-list { list-style: none; padding: 0; margin: 0; }
.terpene-detail-content .pair-list li {
  padding: 12px 0; border-bottom: 1px solid var(--sep);
  color: var(--text-2); font-size: 15px; line-height: 1.6;
}
.terpene-detail-content .pair-list li:last-child { border-bottom: none; padding-bottom: 0; }
.terpene-detail-content .pair-list li:first-child { padding-top: 0; }
.terpene-detail-content .pair-list li strong { color: var(--text-1); font-weight: 600; }
.terpene-detail-content .pair-list a {
  color: var(--text-1); text-decoration: none;
  border-bottom: 1px solid rgba(160,191,146,0.25); font-weight: 600;
}

/* Evidence rows */
.terpene-detail-content .evidence-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-bottom: 1px solid var(--sep);
}
.terpene-detail-content .evidence-row:last-child { border-bottom: none; padding-bottom: 0; }
.terpene-detail-content .evidence-row:first-child { padding-top: 0; }
.terpene-detail-content .evidence-tag {
  flex-shrink: 0; font-family: var(--font-display);
  font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 600;
  padding: 4px 8px; border-radius: 999px; margin-top: 2px;
}
.terpene-detail-content .evidence-tag.well      { background: rgba(122,155,108,0.18); color: var(--sage-light); border: 1px solid rgba(122,155,108,0.4); }
.terpene-detail-content .evidence-tag.emerging  { background: rgba(42,133,179,0.16);  color: var(--teal-light); border: 1px solid rgba(42,133,179,0.4); }
.terpene-detail-content .evidence-tag.anecdotal { background: rgba(232,168,32,0.14);  color: #E8C57A;           border: 1px solid rgba(232,168,32,0.38); }
.terpene-detail-content .evidence-text { color: var(--text-2); font-size: 14px; line-height: 1.65; }

/* Pharmacist note */
.terpene-detail-content .pharmacist {
  margin-top: 20px; padding: 16px 18px;
  background: rgba(122,155,108,0.08);
  border: 1px solid rgba(122,155,108,0.28);
  border-radius: var(--r-md, 14px);
  color: rgba(200,216,192,0.95); font-size: 14px; line-height: 1.65; text-align: center;
}
.terpene-detail-content .pharmacist strong { color: var(--sage-light); font-weight: 600; }
.terpene-detail-content .pharmacist em { color: rgba(200,216,192,0.85); font-style: italic; }

/* Footer */
.terpene-detail-content .footer {
  margin-top: 32px; padding-top: 16px;
  border-top: 1px solid var(--sep); text-align: center; padding-bottom: 20px;
}
.terpene-detail-content .footer p { font-size: 12px; color: var(--text-3); margin-bottom: 8px; }
.terpene-detail-content .footer-links { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.terpene-detail-content .footer-links a { color: var(--text-2); text-decoration: none; font-size: 12px; }

/* For You card — also used on standalone pages via foryou-* classes */
.foryou {
  background: rgba(122,155,108,0.10);
  border: 1px solid rgba(122,155,108,0.30);
  border-left: 3px solid #A0BF92;
  border-radius: 14px;
  padding: 16px 18px 15px;
  margin-bottom: 12px;
}
.foryou-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 9px;
}
.foryou-label {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-light);
}
.foryou-via { font-size: 11px; color: var(--text-3); font-style: italic; }
.foryou-body { font-size: 14.5px; line-height: 1.7; color: var(--text-2); }
.foryou-body strong { color: var(--text-1); font-weight: 600; }

/* Loading / error states */
.terpene-detail-loading,
.terpene-detail-error {
  text-align: center; color: var(--text-3); font-size: 14px; padding: 48px 0;
}

/* ─── Card swipe indicator bar ──────────────────────────── */
.card-swipe-bar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 8px 0 10px;
}
.card-swipe-pill {
  width: 56px; height: 4px;
  background: rgba(255,255,255,0.28);
  border-radius: 2px; flex-shrink: 0;
}
.card-swipe-arrow {
  font-size: 20px; line-height: 1;
  color: var(--teal-light); opacity: 0.75;
  animation: swipeNudge 1.4s ease-in-out infinite alternate;
}
.card-swipe-arrow:first-child { animation-direction: alternate-reverse; }

/* ─── Card section tabs ──────────────────────────────────── */
.card-tab-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 6px 0 8px;
  margin: 2px -2px 0;
}
.card-tab-nav::-webkit-scrollbar { display: none; }

.ctab {
  font-family: var(--font-text); font-size: 13px; font-weight: 600;
  padding: 6px 8px; min-height: 30px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  border: 1px solid var(--sep);
  color: var(--text-3);
  cursor: pointer;
  white-space: normal;
  word-break: break-word;
  text-align: center;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.ctab:hover  { background: var(--teal-pale); color: var(--teal-light); border-color: var(--teal); }
.ctab.active { background: var(--teal-pale); border-color: var(--teal-light); color: var(--teal-light); }

/* ─── Card slides ────────────────────────────────────────── */
.card-slide-wrap { min-height: 160px; perspective: 600px; }
.card-slide      { padding: 4px 0; transform-origin: center bottom; }

@keyframes cardExit {
  0%   { transform: scale(1)    translateY(0)   ; opacity: 1;   }
  100% { transform: scale(0.86) translateY(12px); opacity: 0;   }
}
@keyframes cardEnter {
  0%   { transform: scale(1.05) translateY(-8px); opacity: 0;   }
  100% { transform: scale(1)    translateY(0)   ; opacity: 1;   }
}
.card-exit  { animation: cardExit  0.22s cubic-bezier(0.4, 0, 0.6, 1) forwards; }
.card-enter { animation: cardEnter 0.25s cubic-bezier(0.2, 0, 0.2, 1) forwards; }

/* ─── Swipe hint ─────────────────────────────────────────── */
.swipe-hint {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 0 2px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease;
}
.swipe-hint.visible { opacity: 1; }
.swipe-hint-text {
  font-family: var(--font-text); font-size: 15px; font-weight: 500;
  color: var(--text-3); letter-spacing: 0.5px; text-transform: uppercase;
}
.swipe-hint-arrow {
  font-size: 15px; color: var(--teal-light); opacity: 0.7;
  animation: swipeNudge 1.2s ease-in-out infinite alternate;
}
.swipe-hint-arrow:first-child { animation-direction: alternate-reverse; }
@keyframes swipeNudge {
  from { transform: translateX(0); opacity: 0.5; }
  to   { transform: translateX(4px); opacity: 1; }
}

/* ─── Swipe dots ─────────────────────────────────────────── */
.swipe-dots {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  padding: 6px 0 14px;
}
.swipe-dot {
  width: 6px; height: 6px; border-radius: 3px;
  background: var(--surface-3); border: none; cursor: pointer;
  padding: 0; transition: background 0.2s, width 0.2s;
}
.swipe-dot.active { background: var(--teal-light); width: 18px; }

/* Persona takes */
.persona-takes { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
.persona-take  { display: flex; flex-direction: column; gap: 3px; }
.persona-name  {
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--teal-light);
}
.persona-text { font-size: 16px; color: var(--text-2); line-height: 1.6; }

/* Effect bars */
.effect-bar-wrap { display: flex; flex-direction: column; gap: 7px; }
.effect-row      { display: flex; align-items: center; gap: 10px; }
.effect-label    { font-size: 16px; color: var(--text-2); min-width: 80px; }
.effect-bar-bg   { flex: 1; height: 5px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.effect-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--teal), var(--teal-light)); }
.effect-val      { font-size: 16px; color: var(--text-3); min-width: 16px; text-align: right; }

/* Terpene bars */
.real-terpene-row      { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.real-terpene-name     { font-size: 16px; min-width: 110px; color: var(--text-1); }
.real-terpene-note     { font-size: 14px; color: var(--text-3); }
.real-terpene-bar-bg   { flex: 1; height: 4px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.real-terpene-bar-fill { height: 100%; border-radius: 3px; background: var(--sage); }
.real-terpene-pct      { font-size: 16px; color: var(--text-3); min-width: 38px; text-align: right; }

/* Terpene tags */
.terpene-list { display: flex; flex-wrap: wrap; gap: 6px; }
.terpene-pill {
  font-size: 15px; padding: 4px 12px; border-radius: 6px;
  background: var(--surface-3); color: var(--text-2); border: 1px solid var(--sep-bright);
}

.body-text   { font-size: 17px; line-height: 1.65; color: var(--text-1); }
.watch-out   { font-size: 15px; color: var(--text-2); line-height: 1.6; border-left: 3px solid var(--surface-3); padding-left: 10px; }
.flavor-note { font-size: 15px; color: var(--text-2); font-style: italic; }

/* Crohn's block */
.crohns-block {
  background: var(--crohns-bg); border: 1px solid rgba(77,206,135,0.2);
  border-radius: var(--r-md); padding: 13px 15px;
}
.crohns-score-row  { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; overflow: hidden; }
.crohns-label      { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--crohns-fg); white-space: nowrap; flex-shrink: 0; }
.crohns-dots       { display: flex; gap: 3px; flex: 1; min-width: 0; overflow: hidden; }
.crohns-dot        { width: 13px; height: 13px; border-radius: 50%; background: rgba(77,206,135,0.12); flex-shrink: 1; }
.crohns-dot.filled { background: var(--crohns-fg); }
.crohns-score-num  { font-size: 15px; font-weight: 600; color: var(--crohns-dk); min-width: 34px; text-align: right; flex-shrink: 0; }
.crohns-insight    { font-size: 15px; color: rgba(137,232,180,0.85); line-height: 1.65; }

/* Dad's fit block (Aria mode only) */
.dad-block {
  background: var(--teal-pale); border: 1px solid rgba(42,133,179,0.3);
  border-radius: var(--r-md); padding: 13px 15px;
  margin-top: 10px;
}
.dad-block .crohns-label  { color: var(--teal-light); }
.dad-block .crohns-dot    { background: rgba(42,133,179,0.15); }
.dad-block .crohns-dot.filled { background: var(--teal-light); }
.dad-block .crohns-score-num  { color: var(--teal-light); }
.dad-block .crohns-insight    { color: rgba(160,200,230,0.9); }

/* Notes */
.strain-notes {
  width: 100%; font-family: var(--font-text); font-size: 15px; line-height: 1.6;
  padding: 11px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--sep-bright); background: var(--surface-1);
  color: var(--text-1); resize: vertical; min-height: 150px; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s; -webkit-appearance: none;
}
.strain-notes:focus { border-color: var(--teal-light); box-shadow: 0 0 0 3px rgba(42,133,179,0.15); }
.strain-notes::placeholder { color: var(--text-3); font-style: italic; }

.note-saved-hint { font-size: 14px; color: var(--sage-light); margin-top: 4px; min-height: 16px; text-align: right; }

/* ─── Made me feel — feeling chips ──────────────────────── */
.feelings-section { margin-bottom: 14px; }
.feelings-label-row {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  margin-bottom:   10px;
}
.feelings-label {
  font-family:    var(--font-text);
  font-size:      13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px;
  color:          var(--teal-light);
  margin-bottom:  0; display: block;
}
.feelings-scroll-hint {
  font-family:  var(--font-text);
  font-size:    11px;
  color:        var(--text-3);
  letter-spacing: 0.4px;
  white-space:  nowrap;
  font-style:   italic;
  opacity:      0.75;
}
.feelings-chips {
  display:               grid;
  grid-template-rows:    auto auto;
  grid-auto-flow:        column;
  gap:                   6px;
  overflow-x:            auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
  margin-bottom: 10px;
}
.feelings-chips::-webkit-scrollbar { display: none; }
.feeling-chip {
  font-family:   var(--font-text);
  font-size:     13px;
  padding:       5px 12px;
  flex-shrink:   0;
  border-radius: 20px;
  border:        1px solid rgba(255,255,255,0.18);
  background:    rgba(255,255,255,0.05);
  color:         var(--text-2);
  cursor:        pointer;
  transition:    background 0.15s, border-color 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.feeling-chip.selected {
  background:   rgba(42,133,179,0.2);
  border-color: var(--teal-light);
  color:        var(--teal-light);
}
.feelings-share-btn {
  display:       block; width: 100%;
  font-family:   var(--font-text); font-size: 14px; font-weight: 500;
  padding:       8px 16px; border-radius: var(--r-sm);
  border:        1px solid var(--teal-light);
  background:    rgba(42,133,179,0.1);
  color:         var(--teal-light); cursor: pointer; margin-top: 6px;
  transition:    background 0.15s;
}
.feelings-share-btn:hover { background: rgba(42,133,179,0.2); }
.feelings-share-btn:disabled { opacity: 0.6; cursor: default; }
.notes-section { margin-top: 4px; }
/* Replaces the share button after a user has packed the bowl. Same shape and
   weight as .feelings-share-btn so it reads as a completed state, not a dim
   afterthought. Sage-green tone signals positive done-ness. */
.bowl-shared-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 0;
}
.bowl-shared-badge {
  display: block; width: 100%;
  font-family: var(--font-text); font-size: 14px; font-weight: 500;
  padding: 8px 16px; border-radius: var(--r-sm);
  border: 1px solid rgba(160,191,146,0.4);
  background: rgba(160,191,146,0.12);
  color: #C8E0B4;
  text-align: center;
  margin: 0;
}
.bowl-update-btn {
  display: block; width: 100%;
  font-family: var(--font-text); font-size: 13px; font-weight: 500;
  padding: 6px 16px; border-radius: var(--r-sm);
  border: 1px solid rgba(160,191,146,0.25);
  background: transparent;
  color: rgba(160,191,146,0.65);
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bowl-update-btn:active { opacity: 0.7; }

/* ─── Community Bowl card (below strain card) ────────────── */
.community-bowl {
  background:    var(--surface-2);
  border:        1px solid rgba(42,133,179,0.2);
  border-radius: var(--r-lg);
  padding:       18px 20px 20px;
  margin-top:    10px;
}
.bowl-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.bowl-icon  { font-size: 18px; line-height: 1; }
.bowl-title {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  color: var(--teal-light); letter-spacing: 0.02em;
}
.bowl-sessions {
  font-family: var(--font-text); font-size: 12px;
  color: var(--text-3); margin-bottom: 12px;
}
.bowl-feelings { display: flex; flex-wrap: wrap; gap: 6px; }
.bowl-feeling-chip {
  font-family:   var(--font-text); font-size: 12px;
  padding:       4px 10px; border-radius: 16px;
  background:    rgba(160,191,146,0.1);
  border:        1px solid rgba(160,191,146,0.3);
  color:         var(--sage-light);
  display:       inline-flex; align-items: center; gap: 5px;
}
.bowl-feeling-pct { font-weight: 700; color: var(--text-1); }

/* Bottom line */
.bottom-line-card {
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--teal-pale) 100%);
  border: 1px solid var(--teal);
  border-radius: var(--r-lg); padding: 20px; margin-bottom: 16px;
  box-shadow: 0 8px 32px rgba(27,95,130,0.3);
}
.bottom-line-card .section-label { margin-top: 0; color: var(--teal-light); }
.bottom-line-card .body-text     { font-size: 15px; color: var(--text-1); line-height: 1.65; }

/* Favorites */
.fav-chip          { background: rgba(232,168,32,0.12) !important; color: var(--gold) !important; border-color: rgba(232,168,32,0.3) !important; display: inline-flex !important; align-items: center; gap: 4px; }
.fav-chip:hover    { background: var(--gold) !important; color: #000 !important; }
.fav-chip-remove   { font-size: 14px; color: rgba(232,168,32,0.4); margin-left: 2px; }
.fav-chip-remove:hover { color: #e57373; }

/* ─── Analyze new strain button (bottom of results) ─────── */
.analyze-new-btn {
  display: block;
  width: 100%;
  min-height: 46px;
  margin: 20px 0 10px;
  padding: 12px 24px;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal-light);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(42, 133, 179, 0.35);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.analyze-new-btn:hover  { background: var(--teal-pale); border-color: var(--teal-light); }
.analyze-new-btn:active { opacity: 0.8; }

/* ─── Footer ────────────────────────────────────────────── */
.app-footer {
  display: none;
}
.app-footer strong { color: var(--teal-light); }
.footer-legal-links {
  margin-top: 6px;
  font-size: 12px;
}
.footer-legal-links a {
  color: var(--text-3);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-legal-links a:hover { color: var(--sage-light); }

/* ─── Bottom tab bar ─────────────────────────────────────── */
.bottom-tab-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  /* Fully opaque + matches body::after safe-zone underlay (#070c0a). Kills the
     iPhone safe-area seam that came from translucent rgba + backdrop-blur
     composing differently against page content vs. the solid underlay below.
     Soft 1px hairline above the bar reads as an intentional surface boundary
     against the slightly-lighter page bg, rather than a stark black void. */
  background: #070c0a;
  border-top: 1px solid var(--sep-bright);
  z-index: 100;
  /* Bare env() in browser mode = bar sits flush against Safari's toolbar,
     no artificial 24px lift. Standalone-mode cold-launch 24px floor lives
     in the @media (display-mode: standalone) block near the end of this file. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tab-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 4px;
  background: none; border: none; cursor: pointer;
  color: var(--text-3);
  border-top: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.tab-btn:hover  { color: var(--text-2); }
.tab-btn.active { color: #ffffff; border-top-color: #2A85B3; }
.tab-label {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 500;
  text-align: center; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* ─── Tab panels ───────────────────────────────────────────
   Apr 30: dropped the wrapping background/border/border-radius. The journal
   entries and compare cards inside these panels already have their own card
   styling — wrapping them in a second visible container created a "frame
   inside a frame" look with extra empty space at the bottom of the page.
   Now the panel is just a transparent positioning shell that animates in. */
.tab-panel {
  margin: 12px 0 0;
  animation: slideDown 0.2s ease;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tab-panel-inner { padding: 0; }

/* Tab-bar clearance lives on <main> via its safe-area-inset-aware
   padding-bottom (calc(70px + max(env(safe-area-inset-bottom, 0px), 24px))
   in standalone PWA mode). The redundant 80px belt that lived here was
   stacking on top of main's padding and creating phantom scroll on the
   home view. May 9 fix — leave this rule out. */

/* ─── Photo nudge (Safari→PWA photo transfer prompt) ───── */
.photo-nudge {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  background: var(--teal-pale);
  border: 1px solid rgba(42,133,179,0.35);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin: 10px 14px 0;
  font-size: 14px; line-height: 1.45;
}
.photo-nudge-text { flex: 1; color: var(--text-1); }
.photo-nudge-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.photo-nudge-btn {
  font-family: var(--font-text); font-size: 13px; font-weight: 600;
  padding: 6px 14px; border-radius: var(--r-sm);
  background: var(--teal); color: #fff; border: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.photo-nudge-btn:hover { background: var(--teal-light); }
.photo-nudge-dismiss {
  font-size: 14px; color: var(--text-3); background: none; border: none;
  cursor: pointer; padding: 4px 6px; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.photo-nudge-dismiss:hover { color: var(--text-1); }

/* ─── Desktop ───────────────────────────────────────────── */
@media (min-width: 600px) {
  main          { padding: 1.75rem 1.5rem 0; }
  .app-title    { font-size: 32px; }
  .app-footer   { padding: 1.5rem 1.5rem 0; }
}

/* Two-column compare grid only on real desktop/tablet — never on phones in landscape */
@media (min-width: 900px) {
  .results-grid { grid-template-columns: 1fr 1fr; }
}

/* ─── Compare: split-screen synchronized layout ─────────────── */

/* Header: both strain names side by side */
.cmp-split-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}
.cmp-split-name {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cmp-split-name-right {
  text-align: right;
  align-items: flex-end;
}
.cmp-split-vs {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--text-3);
  flex-shrink: 0;
  padding-top: 4px;
}
.cmp-split-type {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Two fixed-height cards stacked vertically */
.cmp-split-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

/* Each card: flex column — fixed name bar + horizontal section track */
.cmp-scroll-card {
  display: flex;
  flex-direction: column;
  height: 26vh;
  min-height: 150px;
  max-height: 240px;
  overflow: hidden;
  background: rgba(25, 44, 62, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--sep-bright);
  border-top: 3px solid var(--teal-light);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}
/* Color-coded accent per slot */
.cmp-scroll-card[data-slot="a"] { border-top-color: var(--teal-light); }
.cmp-scroll-card[data-slot="b"] { border-top-color: #e8a020; }

/* Strain name bar — fixed at top of card, not scrolling */
.cmp-card-name-bar {
  flex-shrink: 0;
  padding: 8px 14px 7px;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  background: rgba(20, 38, 55, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cmp-card-name-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-card-name-bar .fav-btn { font-size: 20px; flex-shrink: 0; margin-top: 0; }
.cmp-card-sticky-type {
  font-weight: 400;
  font-size: 11px;
  opacity: 0.55;
  margin-left: 4px;
}

/* Horizontal scroll track — snaps section by section */
.cmp-sections-track {
  display: flex;
  flex-direction: row;
  flex: 1;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cmp-sections-track::-webkit-scrollbar { display: none; }

/* Each section fills the card width, can scroll vertically if needed */
.cmp-section {
  min-width: 100%;
  height: 100%;
  overflow-y: auto;
  scroll-snap-align: start;
  padding: 10px 14px 18px;
  scrollbar-width: none;
  box-sizing: border-box;
}
.cmp-section::-webkit-scrollbar { display: none; }

/* Section indicator — pill dots between the two cards */
.cmp-section-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
}
.cmp-ind-dot {
  width: auto;
  height: 20px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  border: none;
  cursor: pointer;
  padding: 0 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.22s ease;
  -webkit-tap-highlight-color: transparent;
}
.cmp-ind-dot span {
  display: block;
  font-family: var(--font-text);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255,255,255,0.38);
  white-space: nowrap;
}
.cmp-ind-dot.active {
  background: var(--teal-light);
  padding: 0 11px;
}
.cmp-ind-dot.active span {
  color: #0d1f2e;
  letter-spacing: 0.7px;
}

/* Section labels inside scrollable cards */
.cmp-sc-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-3);
  margin: 0 0 8px;
}
.cmp-sc-divider {
  border: none;
  border-top: 1px solid var(--sep-bright);
  margin: 14px 0 12px;
}
.cmp-sc-take { font-size: 13px; line-height: 1.55; margin-top: 8px; }
.cmp-sc-body { font-size: 13px; line-height: 1.5;  margin-top: 8px; }

@media (max-width: 400px) {
  .crohns-dots { gap: 3px; }
  .crohns-dot  { width: 13px; height: 13px; }
  .periodic-tiles { gap: 5px; }
  .ptile { padding: 8px 4px 6px; }
}

/* ─── Header greeting + profile button ──────────────────── */
.header-top-row {
  position: absolute;
  top: calc(max(env(safe-area-inset-top), 0px) + 10px); right: 14px;
  display: flex; align-items: center;
  z-index: 2;
}
.header-profile-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.profile-edit-link {
  background: none; border: none;
  font-family: var(--font-text); font-size: 11px;
  color: var(--text-3); text-decoration: underline;
  cursor: pointer; padding: 0; line-height: 1;
  white-space: nowrap;
}
.profile-edit-link:hover { color: var(--teal-light); }
.profile-icon-btn {
  background: var(--surface-1); border: 1.5px solid var(--sep-bright);
  border-radius: 50%; width: 44px; height: 44px;
  font-size: 20px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.profile-icon-btn:hover { background: var(--teal-pale); border-color: var(--teal-light); }
.profile-photo-thumb {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}

/* ─── Wizard photo upload ────────────────────────────────── */
.wizard-photo-row {
  display: flex; justify-content: center;
  margin-bottom: 10px;
}
.wizard-photo-btns {
  display: flex; gap: 10px; justify-content: center;
  margin-bottom: 20px;
}
.wizard-photo-choice-btn {
  flex: 1; max-width: 140px;
  font-family: var(--font-text); font-size: 14px; font-weight: 500;
  padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--sep-bright);
  color: var(--text-2); cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.wizard-photo-choice-btn:hover { border-color: var(--teal-light); color: var(--text-1); }
.wizard-photo-circle {
  width: 60px; height: 60px; border-radius: 50%;
  border: 2.5px dashed var(--sep-bright);
  background: var(--surface-1);
  cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.wizard-photo-circle:hover { border-color: var(--teal-light); background: var(--teal-pale); }
.wizard-photo-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.wizard-photo-placeholder {
  display: flex; align-items: center; justify-content: center;
}
/* ─── Selfie camera overlay ─────────────────────────────── */
#selfieCameraOverlay {
  position: fixed; inset: 0; z-index: 300;
  background: #000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden;
}
#selfieVideo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* mirror for selfie */
}
.selfie-corner {
  position: absolute; z-index: 3;
  pointer-events: none;
}
.selfie-corner--leaf {
  top: max(env(safe-area-inset-top), 20px); left: 20px;
  width: 64px; height: auto;
  opacity: 0.85;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}
.selfie-corner--l {
  bottom: 100px; right: 20px;
  width: 56px; height: auto;
  opacity: 0.82;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}
.selfie-countdown {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-size: 180px; font-weight: 700;
  color: #fff;
  text-shadow: 0 4px 32px rgba(0,0,0,0.6);
  animation: selfieCountPulse 0.85s ease-out forwards;
}
@keyframes selfieCountPulse {
  0%   { transform: scale(1.4); opacity: 0; }
  20%  { transform: scale(1);   opacity: 1; }
  80%  { transform: scale(1);   opacity: 1; }
  100% { transform: scale(0.8); opacity: 0; }
}
.selfie-flash {
  position: absolute; inset: 0; z-index: 5;
  background: #fff; opacity: 0; pointer-events: none;
  transition: opacity 0.06s ease-out;
}
.selfie-flash.go { opacity: 1; }
.selfie-controls {
  position: absolute; bottom: max(env(safe-area-inset-bottom), 24px);
  left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 36px;
}
.selfie-shutter-btn {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: 4px solid rgba(255,255,255,0.5);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.25), 0 4px 20px rgba(0,0,0,0.4);
  cursor: pointer;
  transition: transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.selfie-shutter-btn:active { transform: scale(0.93); }
.selfie-cancel-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.25);
  color: #fff; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.selfie-preview-wrap {
  position: absolute; inset: 0; z-index: 6;
  background: #000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 20px;
}
.selfie-preview-img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* no mirror — canvas capture already handles it */
}
.selfie-preview-btns {
  position: absolute; bottom: max(env(safe-area-inset-bottom), 24px);
  left: 0; right: 0;
  display: flex; gap: 16px; padding: 0 32px;
}
.selfie-retake-btn, .selfie-accept-btn {
  flex: 1; padding: 14px;
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  border-radius: var(--r-md); border: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.selfie-retake-btn {
  background: rgba(255,255,255,0.15); color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
}
.selfie-accept-btn {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-light) 100%);
  color: #fff;
}

.header-greeting {
  font-family: var(--font-text); font-size: 16px; font-weight: 500;
  color: var(--teal-light); margin-top: 10px; margin-bottom: 4px; display: none;
}
.condition-dots {
  display: inline-grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, 8px);
  gap: 3px;
  margin: 0 4px;
  transform: scaleY(-1);
}
/* Single dot: bypass the 2-row grid so the dot sits dead-center on the line */
.condition-dots.single-dot {
  display: inline-flex;
  align-items: center;
  transform: none;
  vertical-align: middle;
}
.condition-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ─── Dots tooltip ───────────────────────────────────────── */
.dots-wrapper {
  position: relative;
  display: inline-flex; align-items: center;
  vertical-align: middle;
  cursor: pointer;
}
.dots-tooltip {
  display: none;
  flex-direction: row; flex-wrap: nowrap; gap: 0; align-items: flex-start;
  width: max-content; max-width: calc(100vw - 24px);
  position: fixed;
  top: 0; right: 0; /* overridden by JS on open */
  background: rgba(18, 28, 38, 0.96);
  backdrop-filter: blur(16px);
  border: 1px solid var(--sep-bright);
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  z-index: 999;
  pointer-events: none;
}
.dots-tooltip::after {
  content: '';
  position: absolute;
  bottom: 100%; top: auto; right: 10px; left: auto;
  border: 6px solid transparent;
  border-bottom-color: var(--sep-bright);
}
.dots-wrapper.open .dots-tooltip,
.dots-tooltip--open {
  display: flex;
}
.dots-tip-row {
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.dots-tip-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.dots-tip-label {
  font-family: var(--font-text); font-size: 13px;
  color: var(--text-1); white-space: nowrap;
}
.dots-tip-group {
  display: flex; flex-direction: column; gap: 6px;
}
.dots-tip-group:last-child { align-self: flex-end; }
.dots-tip-divider {
  display: block; align-self: stretch;
  width: 1px;
  background: rgba(255,255,255,0.2);
  margin: 0 10px; flex-shrink: 0;
}

.pairings-credit {
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--sep);
}
.pairings-credit a {
  color: var(--text-3);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.2);
}
.pairings-credit a:hover { color: var(--sage-light); }

.greeting-sep {
  color: #ffffff;
  opacity: 0.6;
  font-weight: 300;
  margin: 0 2px;
}

.profile-edit-btn {
  background: none; border: none; font-size: 13px; color: var(--text-3);
  cursor: pointer; text-decoration: underline; margin-left: 8px;
  font-family: var(--font-text);
}
.profile-edit-btn:hover { color: var(--teal-light); }

/* ─── Profile / Onboarding overlay ──────────────────────── */
.profile-overlay {
  position: fixed; inset: 0; z-index: 200;
  /* 180deg (top→bottom) instead of 160deg so the entire bottom EDGE is a
     uniform #0a1a10. Previous 160deg made the bottom edge non-uniform
     (sage-dark on the left, navy-mid on the right), which meant any
     safe-area underlay we matched to one color visibly mismatched the
     other. Straight-down gradient = trivially-matchable bottom edge. */
  background: linear-gradient(180deg, #0a141c 0%, #0d2030 60%, #0a1a10 100%);
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
  display: flex; align-items: flex-start; justify-content: center;
}
.profile-overlay.visible { opacity: 1; pointer-events: all; }

/* ── Cold-launch safe-area defense for the profile overlay ──
   Mirror of the body.welcome-active pattern. iOS resolves safe-area
   insets inconsistently for ~50–200ms during cold launch, so even
   though .profile-overlay is `position: fixed; inset: 0` (which
   normally fills the whole visual viewport including safe areas),
   on a fresh device with no SW cache the overlay can briefly clip
   short of the home-indicator zone. That exposes the body bg below
   as a "black band" — actually the dark base, but it reads as black
   against the gradient.

   Force html and body bg to #0a1a10 (the gradient's bottom-edge
   color) whenever the overlay is open. If inset:0 ever fails to
   reach the safe-area zone, what shows through is the same color
   as the gradient endpoint = invisible seam. Belt-and-suspenders.

   See CULTIVAR-DEV-RULES.md → "iOS PWA viewport math". */
html:has(.profile-overlay.visible),
body:has(.profile-overlay.visible) {
  background: #0a1a10 !important;
}
html:has(.profile-overlay.visible) body::after {
  background: #0a1a10;
}

/* ── Wizard sheet ─────────────────────────────────────── */
.wizard-sheet {
  width: 100%; max-width: 480px;
  /* Top: clear the status bar / Dynamic Island.
     Bottom: clear the home-indicator safe zone (34px on most iPhones)
     plus 24px of breathing room — old value was 20px, which put the
     CONTINUE button *inside* the safe zone and caused the white
     home-indicator bar to cut across it. */
  padding: calc(max(env(safe-area-inset-top), 0px) + 14px) 24px calc(env(safe-area-inset-bottom, 0px) + 24px);
  min-height: unset;
  box-sizing: border-box;
  display: flex; flex-direction: column;
  overflow-x: hidden;
}

/* Brand bar */
.wizard-brand-bar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.wizard-brand-logo {
  width: 34px; height: 34px; border-radius: 8px;
  object-fit: cover; border: 1px solid rgba(255,255,255,0.1);
}
.wizard-brand-name {
  font-family: var(--font-serif); font-size: 15px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--text-1);
}

/* Progress dots */
.wizard-progress {
  display: flex; gap: 8px; margin-bottom: 14px;
}
.wizard-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--surface-3);
  transition: background 0.3s, transform 0.3s;
}
.wizard-dot.active {
  background: var(--teal-light);
  transform: scale(1.25);
}
.wizard-dot.done {
  background: var(--sage);
}

/* Steps */
.wizard-step {
  display: none;
  flex-direction: column;
  flex: 1;
  animation: wizardFadeUp 0.32s ease;
}
.wizard-step.active { display: flex; }

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

/* Step content — rope wave banner */
.wizard-soundwave {
  position: relative;
  width: 100%;
  height: 44px;
  overflow: hidden;
  margin-bottom: 12px;
}
.wv {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.wave-path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Rope-wave: animation handled via SMIL <animate> in SVG (iOS Safari compatible) */

.wizard-leaf-icon {
  width: 52px; height: 52px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 16px rgba(122,155,108,0.5));
}

/* Heading: three-stacker layout */
.wizard-heading {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  margin-bottom: 8px;
  gap: 0;
}
.wizard-heading-eyebrow {
  font-family: var(--font-text); font-size: 15px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); line-height: 1.2;
  display: block;
  margin-bottom: 4px;
}
.wizard-heading-brand {
  font-family: var(--font-serif); font-size: 38px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-1); line-height: 1.0;
  display: flex;
  align-items: center;
  gap: 0.3em;
  width: 100%;
}
.wizard-heading-brand::before,
.wizard-heading-brand::after {
  content:   '';
  flex:      1;
  height:    1.5px;
  min-width: 10px;
}
.wizard-heading-brand::before {
  background: linear-gradient(to right, transparent, rgba(160, 191, 146, 0.45));
}
.wizard-heading-brand::after {
  background: linear-gradient(to left,  transparent, rgba(160, 191, 146, 0.45));
}
.wizard-heading-tagline {
  font-family: var(--font-serif); font-size: 16px; font-weight: 500;
  color: var(--sage-light); line-height: 1.3;
  display: block;
  margin-top: 4px;
  font-style: italic;
}
.wizard-question {
  font-family: var(--font-serif); font-size: 26px; font-weight: 700;
  color: var(--text-1); line-height: 1.25; text-align: center;
  margin: 0 0 10px 0;
}
.wizard-sub {
  font-family: var(--font-text); font-size: 15px; color: var(--text-2);
  line-height: 1.5; margin-bottom: 0; text-align: center;
}
/* Optional quieter second line under .wizard-sub — used for reassurances like
   "you can change this later" without competing with the primary instruction. */
.wizard-sub-fine {
  font-family: var(--font-text); font-size: 12px; color: var(--text-3);
  line-height: 1.45; margin: 4px 0 0; text-align: center;
  letter-spacing: 0.01em;
}

/* Text inputs (Step 1) */
.wizard-fields { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; margin-bottom: 12px; max-width: 100%; }
.wizard-text-input {
  flex: 1; min-width: 0; font-family: var(--font-text); font-size: 17px;
  font-weight: 400; padding: 12px 16px;
  border-radius: var(--r-md); border: 1.5px solid var(--sep-bright);
  background: var(--surface-1); color: var(--text-1); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
}
.wizard-text-input:focus {
  border-color: var(--teal-light);
  box-shadow: 0 0 0 3px rgba(42,133,179,0.18);
}
.wizard-text-input::placeholder { color: var(--text-3); }
.wizard-age-input { flex: 0 0 130px; }
.wizard-age-hint {
  font-family: var(--font-text);
  font-size: 13px;
  color: var(--text-3);
  text-align: center;
  margin: -8px 0 12px;
  line-height: 1.4;
}

/* Big choice buttons (Step 2) */
.wizard-choice-col {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 16px;
}
.wizard-choice-btn {
  width: 100%; font-family: var(--font-text); font-size: 19px; font-weight: 600;
  padding: 14px 18px; border-radius: var(--r-md);
  border: 2px solid var(--sep-bright);
  background: var(--surface-1); color: var(--text-1);
  cursor: pointer; text-align: left;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.wizard-choice-btn:active { transform: scale(0.98); }
.wizard-choice-btn.selected {
  border-color: var(--sage-light); background: var(--sage-pale); color: var(--sage-light);
}
.med-no-x {
  color: #E85050; font-weight: 700;
}
.med-yes-check {
  color: #4CAF50; font-weight: 700;
}

/* ─── Condition list (replaces tile grid) ────────────────── */
.cond-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 16px;
}
.cond-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--sep-bright);
  background: var(--surface-1);
  color: var(--text-2);
  cursor: pointer;
  text-align: left;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  -webkit-appearance: none;
  appearance: none;
}
.cond-row-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* legacy — no longer used */
.cond-row-icon {
  font-size: 17px;
  flex-shrink: 0;
  line-height: 1;
  width: 22px;
  text-align: center;
}
.cond-row-label {
  flex: 1;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-2);
  transition: color 0.12s;
}
.cond-row-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--sep-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: transparent;
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.cond-row.active {
  border-color: var(--teal-light);
  background: var(--teal-pale);
}
.cond-row.active .cond-row-label {
  color: var(--teal-light);
}
.cond-row.active .cond-row-check {
  background: var(--teal-light);
  border-color: var(--teal-light);
  color: #fff;
}

/* ─── Dietary list (replaces tile grid) ─────────────────── */
.diet-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 16px; /* breathing room below the "Skip if none apply" lead-in */
  margin-bottom: 14px;
}
.diet-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--sep-bright);
  background: var(--surface-1);
  color: var(--text-2);
  cursor: pointer;
  text-align: left;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  -webkit-appearance: none;
  appearance: none;
}
.diet-row-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* legacy — no longer used */
.diet-row-icon {
  font-size: 17px;
  flex-shrink: 0;
  line-height: 1;
  width: 22px;
  text-align: center;
}
.diet-row-label {
  flex: 1;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-2);
  transition: color 0.12s;
}
.diet-row-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--sep-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: transparent;
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.diet-row.active {
  border-color: var(--gold);
  background: rgba(232,168,32,0.1);
}
.diet-row.active .diet-row-label {
  color: var(--gold);
}
.diet-row.active .diet-row-check {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

/* Primary next/proceed button */
.wizard-next-btn {
  display: block; width: 100%;
  font-family: var(--font-serif); font-size: 15px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 14px 20px; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-light) 100%);
  border: none; color: #fff; cursor: pointer;
  box-shadow: 0 4px 20px rgba(27,95,130,0.4);
  transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
  margin-bottom: 10px;
}
.wizard-next-btn:hover  { opacity: 0.92; box-shadow: 0 6px 24px rgba(27,95,130,0.5); }
.wizard-next-btn:active { transform: scale(0.98); }

/* Back button */
.wizard-back-btn {
  display: block; width: 100%;
  font-family: var(--font-text); font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: transparent; border: 1px solid var(--sep);
  color: var(--text-3); cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.wizard-back-btn:hover { color: var(--text-2); border-color: var(--sep-bright); }

/* ── Save & done (edit mode secondary action) ─────────── */
.wizard-save-done-btn {
  display: block; width: 100%;
  font-family: var(--font-text); font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid rgba(42, 133, 179, 0.35);
  color: var(--teal-light);
  cursor: pointer; margin-bottom: 10px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.wizard-save-done-btn:hover {
  background: rgba(42, 133, 179, 0.1);
  border-color: var(--teal-light);
}

/* ── Step 0: Profile Summary ──────────────────────────── */
.prof-summary {
  display: flex; flex-direction: column;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md);
  overflow: hidden;
}
/* Legal footer below the profile summary card.
   Quiet by default, accessible via tap. About goes external to the marketing
   site; Terms and Privacy open the in-app HTML pages in a new tab so the
   user's app state is preserved. */
.prof-legal-footer {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 22px auto 4px;
  padding: 0 16px;
  font-family: var(--font-text);
  font-size: 13px;
  letter-spacing: 0.01em;
  text-align: center;
}
.prof-legal-footer a {
  color: var(--text-3);
  text-decoration: none;
  padding: 6px 4px; /* enlarges tap target without visibly bulking the link */
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.prof-legal-footer a:hover,
.prof-legal-footer a:focus-visible { color: var(--sage-light); outline: none; }
.prof-legal-sep {
  color: rgba(255,255,255,0.18);
  font-size: 13px;
  user-select: none;
}
.prof-legal-tagline {
  margin: 4px auto 8px;
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(160, 191, 146, 0.45);
  text-align: center;
}
.prof-summary-hero-row {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 16px;
  background: rgba(255,255,255,0.04);
  border: none; border-bottom: 1px solid rgba(255,255,255,0.08);
  color: var(--text-1); cursor: pointer; text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.prof-summary-hero-row:hover { background: rgba(255,255,255,0.07); }
.prof-summary-photo-wrap {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.prof-summary-photo-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.prof-summary-name-block {
  flex: 1; display: flex; flex-direction: column; gap: 3px;
}
.prof-summary-name {
  font-size: 1.05rem; font-weight: 600; color: var(--text-1);
}
.prof-summary-hint {
  font-size: 0.75rem; color: var(--text-3);
}
.prof-summary-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 15px 16px;
  background: transparent;
  border: none; border-bottom: 1px solid rgba(255,255,255,0.06);
  color: var(--text-1); cursor: pointer; text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.prof-summary-row:last-child { border-bottom: none; }
.prof-summary-row:hover { background: rgba(255,255,255,0.04); }
.prof-summary-row-label {
  font-size: 0.82rem; color: var(--text-3);
  min-width: 96px; flex-shrink: 0;
}
.prof-summary-row-value {
  flex: 1; font-size: 0.82rem; color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prof-summary-chevron {
  color: var(--text-3); flex-shrink: 0;
}

.med-card-nudge {
  background:    rgba(27, 95, 130, 0.12);
  border:        1px solid rgba(42, 133, 179, 0.28);
  border-radius: var(--r-md);
  padding:       16px;
  margin-top:    16px;
  text-align:    left;
}
.nudge-text {
  font-family:   var(--font-text);
  font-size:     15px;
  color:         var(--text-2);
  line-height:   1.65;
  margin-bottom: 14px;
}

.profile-sheet {
  max-width: 480px; margin: 0 auto;
  padding: 40px 24px 60px;
  min-height: 100%;
}

.profile-header-art {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 28px;
}
.profile-logo-L {
  width: 64px; height: 64px; border-radius: 14px;
  object-fit: cover; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.1);
}
.profile-app-name {
  font-family: var(--font-display); font-size: 18px; font-weight: 600;
  color: var(--text-1); line-height: 1.3; margin-bottom: 4px;
}
.profile-app-tagline {
  font-family: var(--font-text); font-size: 14px; color: var(--sage-light);
}

.profile-intro {
  font-family: var(--font-text); font-size: 14px; color: var(--text-2);
  line-height: 1.6; margin-bottom: 28px;
  padding-bottom: 24px; border-bottom: 1px solid var(--sep);
}

.profile-field { margin-bottom: 22px; }

.profile-label {
  display: block; font-family: var(--font-text); font-size: 14px;
  font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 8px;
}
.profile-optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-3); }

.profile-sublabel {
  font-family: var(--font-text); font-size: 14px; color: var(--text-3);
  margin-bottom: 10px; margin-top: -4px;
}

.profile-input {
  width: 100%; font-family: var(--font-text); font-size: 16px;
  padding: 11px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--sep-bright); background: var(--surface-1);
  color: var(--text-1); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
}
.profile-input:focus { border-color: var(--teal-light); box-shadow: 0 0 0 3px rgba(42,133,179,0.2); }
.profile-input::placeholder { color: var(--text-3); }
.profile-input-sm { max-width: 120px; }

.med-card-btn {
  font-family: var(--font-text); font-size: 14px; font-weight: 500;
  padding: 10px 16px; border-radius: var(--r-sm);
  border: 1.5px solid var(--sep-bright);
  background: var(--surface-1); color: var(--text-2);
  cursor: pointer; width: 100%; text-align: left;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.med-card-btn.active {
  border-color: var(--sage-light); background: var(--sage-pale); color: var(--sage-light);
}

/* Tile grid classes removed — replaced by .cond-list/.cond-row and .diet-list/.diet-row */

/* ── Music genre picker (wizard step 5) ─────────────────── */
/* 2-col grid mirrors .diet-list / .cond-list pattern: 8 genres = 2 columns of 4. */
.music-genre-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 8px 0 16px;
}
.music-genre-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 9px 10px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--sep-bright);
  background: var(--surface-1);
  color: var(--text-2); cursor: pointer; text-align: left;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: border-color 0.12s, background 0.12s;
  -webkit-appearance: none; appearance: none;
  min-width: 0; /* allow long labels to shrink/wrap inside the cell */
}
.music-genre-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.music-genre-label {
  flex: 1; font-family: var(--font-text);
  font-size: 14px; font-weight: 500; line-height: 1.2;
  color: var(--text-2); transition: color 0.12s;
  min-width: 0; /* prevent flex overflow on long labels */
}
.music-genre-check {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--sep-bright);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  color: transparent; flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.music-genre-row.active {
  border-color: rgba(160,191,146,0.6);
  background: rgba(122,155,108,0.1);
}
.music-genre-row.active .music-genre-label { color: var(--sage); }
.music-genre-row.active .music-genre-check {
  background: var(--sage); border-color: var(--sage); color: #fff;
}

/* Other — write-in field */
.diet-other-wrap {
  grid-column: 1 / -1;
  margin-top: 2px;
}
.diet-other-input {
  width: 100%; font-family: var(--font-text); font-size: 15px;
  padding: 12px 14px; border-radius: var(--r-sm);
  border: 1.5px solid var(--gold); background: rgba(232,168,32,0.06);
  color: var(--text-1); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.diet-other-input:focus { box-shadow: 0 0 0 3px rgba(232,168,32,0.15); }
.diet-other-input::placeholder { color: var(--text-3); }


.profile-save-btn {
  display: block; width: 100%; margin-top: 32px;
  font-family: var(--font-text); font-size: 16px; font-weight: 600;
  padding: 15px; border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-light) 100%);
  border: none; color: #fff; cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.profile-save-btn:hover  { opacity: 0.9; }
.profile-save-btn:active { transform: scale(0.98); }

.profile-cancel-btn {
  display: block; width: 100%; margin-top: 12px;
  font-family: var(--font-text); font-size: 14px;
  padding: 10px; border-radius: var(--r-sm);
  background: transparent; border: 1px solid var(--sep-bright);
  color: var(--text-3); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.profile-cancel-btn:hover { color: var(--text-2); border-color: var(--sep-bright); }

/* Ask Dad — email button */
.email-btn { background: linear-gradient(135deg, #1a3a4d 0%, #1B5F82 100%) !important; color: #fff !important; }
.email-btn:hover { background: linear-gradient(135deg, #1B5F82 0%, #2A85B3 100%) !important; }

/* ── Photo crop overlay ──────────────────────────────────── */
.photo-crop-overlay {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(0,0,0,0.93);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 24px;
  padding: 32px 24px;
  /* Block iOS Safari's page-level pinch-zoom anywhere inside the overlay so
     two-finger gestures only drive the cropper, never the underlying page. */
  touch-action: none;
  overscroll-behavior: contain;
}
.crop-hint {
  color: rgba(255,255,255,0.65);
  font-family: var(--font-serif);
  font-size: 15px; font-style: italic;
  margin: 0; text-align: center;
}
.crop-stage {
  position: relative;
  width: 280px; height: 280px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.25),
              0 0 0 9999px rgba(0,0,0,0.55);
  touch-action: none;
  cursor: grab;
}
.crop-stage:active { cursor: grabbing; }
#cropSrc {
  position: absolute;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  /* Override the global `img { max-width: 100%; height: auto; }` rule.
     The cropper sets width/height inline based on baseScale * zoom; if the
     global cap kicks in, the width gets clamped while the height stays large
     and the image distorts on zoom. Explicit none keeps our inline sizing
     authoritative. */
  max-width: none;
  max-height: none;
  min-width: 0;
  min-height: 0;
}
.crop-zoom {
  -webkit-appearance: none;
  appearance: none;
  width: 240px;
  height: 4px;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  outline: none;
  margin: 0;
  padding: 0;
  touch-action: manipulation;
  accent-color: var(--teal-light);
}
.crop-zoom::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--teal-light);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  cursor: pointer;
}
.crop-zoom::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--teal-light);
  border: 2px solid #fff;
  cursor: pointer;
}
.crop-actions {
  display: flex; gap: 14px;
}
.crop-btn {
  padding: 13px 30px;
  border-radius: 999px;
  font-size: 15px; font-weight: 600;
  border: none; cursor: pointer;
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  -webkit-tap-highlight-color: transparent;
}
.crop-cancel  { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); }
.crop-confirm { background: var(--teal); color: #fff; }

/* ── Ask Sage trigger button ─────────────────────────────── */
.slot-header {
  display: flex; align-items: center; justify-content: space-between;
}
.sage-trigger-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; padding: 0;
  color: #A0BF92;
  font-size: 18px; font-family: var(--font-serif);
  font-style: italic; letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(160,191,146,0.35);
  opacity: 0.9;
  transition: opacity 0.15s;
  padding-right: 6px;
}
.sage-trigger-btn:active { opacity: 1; }
.sage-trigger-btn.buddy { color: #2A85B3; text-decoration-color: rgba(42,133,179,0.35); }
.sage-trigger-btn.botanist { color: #E8B84B; text-decoration-color: rgba(232,184,75,0.3); }

/* Right column: [Ask Sage | star] on top row, format badge centered below */
.card-header-right {
  display: flex; flex-direction: column; align-items: flex-end;
  flex-shrink: 0; gap: 4px;
}
.card-fmt-below-star {
  display: flex; justify-content: flex-end;
}
.card-fmt-below-star .card-format-pill { margin-left: 0; }

/* Persona icon + star stacked in card header right column */
.card-header-actions {
  display: flex; flex-direction: row; align-items: center;
  gap: 8px; flex-shrink: 0;
}
.card-header-divider {
  color: rgba(255,255,255,0.18); font-size: 18px;
  font-weight: 300; line-height: 1; user-select: none;
}
.card-sage-icon-btn {
  background: none; border: none; cursor: pointer; padding: 4px 4px;
  display: flex; flex-direction: row; align-items: center; gap: 4px;
  opacity: 0.85; transition: opacity 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.card-sage-icon-btn img {
  width: 32px; height: 32px; object-fit: contain;
}
.card-sage-icon-label {
  font-size: 15px; font-family: var(--font-serif);
  font-style: italic; letter-spacing: 0.02em;
  color: #A0BF92; white-space: nowrap; line-height: 1;
}
.card-sage-icon-btn.buddy .card-sage-icon-label  { color: #2A85B3; }
.card-sage-icon-btn.botanist .card-sage-icon-label { color: #C8930A; }
.card-sage-icon-btn:active { opacity: 1; }
.card-header-actions .fav-btn { font-size: 28px; }

/* Rating row at bottom of results card — Journal V1.0 (the tap) */
.rating-row {
  padding: 14px 16px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.rating-label {
  font-family: var(--font-text);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0;
  transition: color 0.2s;
}
.rating-buttons {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
}
.rating-btn {
  font-family: var(--font-text);
  font-size: 13px; font-weight: 500;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.62);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.rating-btn:active { transform: scale(0.97); }
.rating-btn-loved.selected {
  background: rgba(160,191,146,0.22);
  border-color: #A0BF92;
  color: #C8E0B4;
}
.rating-btn-liked.selected {
  background: rgba(42,133,179,0.22);
  border-color: var(--teal-light);
  color: var(--teal-light);
}
.rating-btn-didnt_land.selected {
  background: rgba(192,132,108,0.18);
  border-color: rgba(192,132,108,0.55);
  color: rgba(232,180,160,0.95);
}

/* Journal V1.1 — the note.
   Apr 30 redesign: lives inside the Notes tab right under the feelings tiles,
   open by default. The original disclosure-under-rating pattern was burying
   the field. The legacy .journal-note-toggle styles below are kept for
   anything that still references them, but the new always-open layout doesn't
   render the toggle button. */
.journal-note-row {
  padding: 4px 0 0;
  margin-top: 10px;
  border-top: 1px solid var(--sep);
  padding-top: 14px;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
}
.journal-note-row.is-always-open {
  /* Visual separator from the feelings/share block above. */
  margin-top: 14px;
}
.journal-note-toggle {
  align-self: center;
  background: none;
  border: none;
  padding: 6px 10px;
  font-family: var(--font-text);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-3);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px;
  transition: color 0.18s, background 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.journal-note-toggle:hover,
.journal-note-toggle:active {
  color: var(--text-2);
  background: rgba(255,255,255,0.04);
}
.journal-note-toggle-plus {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  opacity: 0.7;
}
.journal-note-field {
  display: flex; flex-direction: column; gap: 4px;
}
.journal-note-field.is-open {
  animation: journalNoteFadeIn 0.22s ease-out;
}
@keyframes journalNoteFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.journal-note-label {
  font-family: var(--font-text);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 2px;
}
.journal-note-input {
  width: 100%;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.55;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: var(--text-1);
  resize: vertical;
  min-height: 72px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  -webkit-appearance: none;
}
.journal-note-input:focus {
  border-color: var(--teal-light);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 0 0 3px rgba(42,133,179,0.15);
}
.journal-note-input::placeholder {
  color: var(--text-3);
  font-style: italic;
}
.journal-note-row .note-saved-hint {
  font-size: 12px;
  margin-top: 2px;
}

/* Journal entry — rating chip mirrors the rating-btn selected states */
.journal-rating-chip {
  font-family: var(--font-text);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
}
.journal-rating-loved {
  background: rgba(160,191,146,0.18);
  color: #C8E0B4;
  border: 1px solid rgba(160,191,146,0.35);
}
.journal-rating-liked {
  background: rgba(42,133,179,0.18);
  color: var(--teal-light);
  border: 1px solid var(--teal-dim);
}
.journal-rating-didnt_land {
  background: rgba(192,132,108,0.14);
  color: rgba(232,180,160,0.95);
  border: 1px solid rgba(192,132,108,0.4);
}

/* Share button at bottom of results card */
.card-share-row {
  padding: 6px 16px 16px;
  display: flex; justify-content: center;
}
.card-share-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 9px 22px;
  color: rgba(255,255,255,0.55);
  font-size: 13px; font-family: var(--font-text);
  letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.card-share-btn:hover, .card-share-btn:active {
  background: rgba(160,191,146,0.1);
  border-color: rgba(160,191,146,0.4);
  color: #A0BF92;
}
.card-share-btn:disabled {
  opacity: 0.5; cursor: default;
}

/* Sage pill inside results card */
.card-sage-pill-wrap {
  padding: 12px 16px 4px;
}
.card-sage-pill-wrap .sage-trigger-btn {
  width: 100%; justify-content: center;
  font-size: 13px; padding: 8px 14px;
  background: rgba(122,155,108,0.13);
  border: 1px solid rgba(160,191,146,0.35);
  border-radius: 999px;
  text-decoration: none;
  opacity: 1;
}
.card-sage-pill-wrap .sage-trigger-btn.buddy {
  background: rgba(27,95,130,0.13); border-color: rgba(42,133,179,0.35);
}
.card-sage-pill-wrap .sage-trigger-btn.botanist {
  background: rgba(200,147,10,0.1); border-color: rgba(232,184,75,0.35);
}

/* ── Sage overlay ────────────────────────────────────────── */
.sage-overlay {
  position: fixed; inset: 0; z-index: 9200;
  background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
  /* Top padding respects iOS Dynamic Island / notch safe-area so the close
     button never sits flush with the battery/signal indicators on a long
     chat. 16px on top of the inset gives a comfortable tap zone. Bottom uses
     the bottom inset (home indicator) plus the same 24px floor that the rest
     of the app uses for overlay margins. (May 10 2026 S2 — Ross noted the X
     was hard to tap when Jeff/Sage chat scrolled long.) */
  padding: max(24px, calc(env(safe-area-inset-top) + 16px))
           16px
           max(24px, calc(env(safe-area-inset-bottom) + 16px));
  touch-action: none;
  overscroll-behavior: contain;
}
.sage-modal {
  width: 100%; max-width: 380px;
  background: #0d1f2d;
  border-radius: 20px;
  border: 1px solid rgba(122,155,108,0.35);
  overflow: hidden;
  display: flex; flex-direction: column;
  /* Cap at 84vh (was 88vh) so even on long chats the modal can't overflow
     the new safe-area-aware overlay padding above. The 4vh trim is invisible
     on most chats and prevents the close button from squeezing the status bar. */
  max-height: 84vh;
}
.sage-wave-header {
  position: relative; height: 96px; overflow: hidden; background: #071520; flex-shrink: 0;
}
.sage-header-waves {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 44px; overflow: hidden;
}
.sage-header-content {
  position: absolute; top: 0; left: 0; right: 0; bottom: 44px;
  display: flex; align-items: center;
  padding: 8px 14px 0; gap: 12px;
}
.sage-header-icon { width: 42px; height: 42px; flex-shrink: 0; }
.sage-header-icon img { width: 42px; height: 42px; object-fit: contain; }
.sage-header-icon svg { width: 42px; height: 42px; }
.sage-header-name {
  color: white; font-size: 22px; font-weight: 600;
  font-family: var(--font-serif); letter-spacing: 0.03em;
}
.sage-header-sub {
  color: rgba(160,191,146,0.8); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
}
.sage-header-sub.buddy  { color: rgba(42,133,179,0.85); }
.sage-header-sub.botanist { color: rgba(232,184,75,0.85); }
.sage-close-btn {
  margin-left: auto; background: none; border: none;
  color: rgba(255,255,255,0.4); font-size: 18px; cursor: pointer;
  padding: 13px 14px; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.sage-body {
  flex: 1; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  -webkit-overflow-scrolling: touch;
}
.sage-messages { display: flex; flex-direction: column; gap: 10px; }
.sage-msg {
  border-radius: 14px; padding: 11px 15px;
  font-size: 16px; line-height: 1.55; max-width: 92%;
}
.sage-msg.user {
  align-self: flex-end;
  background: rgba(27,95,130,0.35);
  border: 1px solid rgba(42,133,179,0.25);
  color: rgba(255,255,255,0.9);
}
.sage-msg.sage {
  align-self: flex-start;
  background: rgba(122,155,108,0.18);
  border: 1px solid rgba(160,191,146,0.2);
  color: rgba(255,255,255,0.88);
}
.sage-msg.sage.buddy-mode {
  background: rgba(27,95,130,0.18);
  border-color: rgba(42,133,179,0.2);
}
.sage-msg.sage.botanist-mode {
  background: rgba(200,147,10,0.14);
  border-color: rgba(232,184,75,0.2);
}
.sage-thinking {
  align-self: flex-start; display: flex; gap: 5px;
  padding: 10px 14px; align-items: center;
}
.sage-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(160,191,146,0.6);
  animation: sageDotPulse 1.4s ease-in-out infinite;
}
.sage-dot:nth-child(2) { animation-delay: 0.2s; }
.sage-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes sageDotPulse {
  0%,80%,100% { opacity: 0.3; transform: scale(0.8); }
  40%          { opacity: 1;   transform: scale(1); }
}
.sage-input-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,0.07);
  background: rgba(0,0,0,0.2); flex-shrink: 0;
}
.sage-input {
  flex: 1; background: rgba(255,255,255,0.07);
  border: 1px solid rgba(160,191,146,0.25);
  border-radius: 20px; padding: 10px 16px;
  color: rgba(255,255,255,0.85); font-size: 16px;
  font-family: var(--font-text);
  -webkit-appearance: none;
}
.sage-input::placeholder { color: rgba(255,255,255,0.3); font-style: italic; }
.sage-input:focus { outline: none; border-color: rgba(160,191,146,0.5); }
.sage-mic-btn, .sage-send-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: none; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.sage-mic-btn { background: rgba(255,255,255,0.1); }
.sage-mic-btn.listening { background: #c0392b; animation: micPulse 1s ease-in-out infinite; }
.sage-send-btn { background: #7A9B6C; }
.sage-send-btn.buddy  { background: #1B5F82; }
.sage-send-btn.botanist { background: #a07a10; }
@keyframes micPulse { 0%,100%{opacity:1} 50%{opacity:0.6} }

/* ── Persona picker (wizard step 5) ─────────────────────── */
.persona-picker {
  display: flex; flex-direction: column; gap: 16px;
  margin: 8px 0 20px;
}
.persona-pick-card {
  display: flex; flex-direction: column; gap: 0;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 16px; padding: 20px 18px;
  cursor: pointer; transition: border-color 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.persona-pick-top {
  display: flex; align-items: center; gap: 16px;
}
.persona-pick-card.active { background: rgba(122,155,108,0.12); border-color: rgba(160,191,146,0.5); }
.persona-pick-card.active.buddy { background: rgba(27,95,130,0.15); border-color: rgba(42,133,179,0.5); }
.persona-pick-card.active.botanist { background: rgba(200,147,10,0.12); border-color: rgba(232,184,75,0.45); }
.persona-pick-icon { width: 64px; height: 64px; flex-shrink: 0; }
.persona-pick-icon img, .persona-pick-icon svg { width: 64px; height: 64px; object-fit: contain; }
.persona-pick-info { flex: 1; }
.persona-pick-name {
  font-size: 24px; font-weight: 600; font-family: var(--font-serif);
  color: rgba(255,255,255,0.92); margin-bottom: 6px; letter-spacing: 0.02em;
}
.persona-pick-desc {
  font-size: 17px; color: rgba(255,255,255,0.6); line-height: 1.55;
}
.persona-pick-check {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all 0.2s;
}
.persona-pick-card.active .persona-pick-check {
  background: #7A9B6C; border-color: #7A9B6C;
}
.persona-pick-card.active.buddy .persona-pick-check { background: #1B5F82; border-color: #1B5F82; }
.persona-pick-card.active.botanist .persona-pick-check { background: #a07a10; border-color: #a07a10; }
.persona-pick-check::after {
  content: '✓'; color: white; font-size: 14px; font-weight: 700;
  opacity: 0; transition: opacity 0.15s;
}
.persona-pick-card.active .persona-pick-check::after { opacity: 1; }

/* Sample Q&A preview in persona picker */
.persona-pick-sample {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.persona-sample-q {
  font-size: 15px; font-style: italic;
  color: rgba(255,255,255,0.45);
  margin-bottom: 12px; line-height: 1.45;
}
.persona-sample-q::before { content: 'Q: '; font-style: normal; }
.persona-sample-a {
  font-size: 16px; line-height: 1.7;
  color: rgba(255,255,255,0.78);
  background: rgba(122,155,108,0.08);
  border-left: 3px solid rgba(160,191,146,0.4);
  border-radius: 0 10px 10px 0;
  padding: 12px 16px;
}
.persona-pick-sample.buddy .persona-sample-a {
  background: rgba(27,95,130,0.1);
  border-left-color: rgba(42,133,179,0.45);
}
.persona-pick-sample.botanist .persona-sample-a {
  background: rgba(200,147,10,0.08);
  border-left-color: rgba(200,147,10,0.4);
}

/* ─── Reflection card (wizard step 7 — mirror beat) ──────── */
.reflection-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: rgba(13, 27, 36, 0.5);
  border: 1px solid var(--sep-bright, rgba(255,255,255,0.12));
  border-radius: 14px;
  padding: 20px 22px;
  margin: 22px 0 28px;
}
.reflection-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.reflection-row:first-child { padding-top: 4px; }
.reflection-row:last-child  { border-bottom: none; padding-bottom: 4px; }

.reflection-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7A9B6C;
  opacity: 0.85;
}
.reflection-value {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 400;
  color: var(--text-1, #F0F4F8);
  line-height: 1.45;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.reflection-value strong {
  font-weight: 600;
  color: var(--sage-light, #A0BF92);
}
.reflection-row--persona .reflection-value strong {
  color: var(--persona-color, #A0BF92);
}
.reflection-persona-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  padding: 3px;
  flex-shrink: 0;
}

.reflection-promise {
  margin-top: 10px;
  padding: 16px 18px;
  background: rgba(122, 155, 108, 0.08);
  border: 1px solid rgba(122, 155, 108, 0.28);
  border-radius: 12px;
}
.reflection-promise-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #B8D4AA;
  margin-bottom: 10px;
}
.reflection-promise-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reflection-promise-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #C8D8E0;
}
.reflection-promise-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 1.5px;
  background: rgba(160, 191, 146, 0.7);
  border-radius: 2px;
}

@media (max-width: 480px) {
  .reflection-card { padding: 16px 18px; }
  .reflection-value { font-size: 16px; }
}

/* ─── Strain of the Day card (home tab feature) ──────────── */
.strain-of-day-card {
  position: relative;
  display: block;
  margin: 16px 16px 18px;
  padding: 18px 20px 20px;
  background: linear-gradient(160deg, rgba(122,155,108,0.10) 0%, rgba(27,95,130,0.08) 100%);
  border: 1px solid rgba(160,191,146,0.28);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
.strain-of-day-card:active {
  transform: scale(0.99);
  border-color: rgba(160,191,146,0.5);
}
.strain-of-day-card::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(160,191,146,0.18) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.strain-of-day-card > * { position: relative; z-index: 1; }

.sotd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #B8D4AA;
  margin-bottom: 10px;
}
.sotd-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #A0BF92;
  box-shadow: 0 0 8px rgba(160,191,146,0.7);
  animation: whatsNewPulse 2.4s ease-in-out infinite;
}
.sotd-name {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--text-1, #F0F4F8);
  letter-spacing: -0.005em;
  margin-bottom: 6px;
  line-height: 1.15;
}
.sotd-meta {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--text-2, #8BA8BE);
  margin-bottom: 12px;
}
.sotd-terpene-chip {
  display: inline-block;
  padding: 4px 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid rgba(160,191,146,0.4);
  background: rgba(160,191,146,0.12);
  color: #A0BF92;
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}
.sotd-why {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 14.5px;
  color: var(--text-2, #8BA8BE);
  line-height: 1.55;
  margin-bottom: 14px;
}
.sotd-cta {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #A0BF92;
  letter-spacing: 0.04em;
}

@media (max-width: 480px) {
  .strain-of-day-card { margin: 12px 12px 14px; padding: 16px 18px; }
  .sotd-name { font-size: 22px; }
}

/* ─── Strain of the Day — top-left header icon (V2) ──────── */
.sotd-icon-btn {
  position: absolute;
  top: calc(max(env(safe-area-inset-top), 0px) + 10px);
  left: 14px;
  z-index: 4;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(232, 168, 32, 0.6);
  background: rgba(232, 168, 32, 0.14);
  color: #E8C57A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s ease, background 0.2s ease, border-color 0.2s ease;
  animation: sotdIconPulse 2.1s ease-in-out infinite;
}
.sotd-icon-btn:hover {
  background: rgba(232, 168, 32, 0.22);
  border-color: rgba(232, 197, 122, 0.8);
}
.sotd-icon-btn:active { transform: scale(0.94); }
.sotd-icon-btn[hidden] { display: none !important; }

.sotd-icon-leaf {
  width: 22px;
  height: 22px;
  display: block;
}

/* Expanding gold ring — the eye-grabber. Sits behind the icon, ripples outward. */
.sotd-icon-btn::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(232, 168, 32, 0.7);
  pointer-events: none;
  animation: sotdIconRing 2.1s ease-out infinite;
}

@keyframes sotdIconPulse {
  0%, 100% {
    box-shadow: 0 0 0 0   rgba(232, 168, 32, 0.55),
                0 2px 12px rgba(232, 168, 32, 0.25);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(232, 168, 32, 0),
                0 2px 16px rgba(232, 168, 32, 0.45);
  }
}
@keyframes sotdIconRing {
  0%   { transform: scale(1);    opacity: 0.85; }
  70%  { transform: scale(1.45); opacity: 0;    }
  100% { transform: scale(1.45); opacity: 0;    }
}
@media (prefers-reduced-motion: reduce) {
  .sotd-icon-btn         { animation: none; }
  .sotd-icon-btn::after  { animation: none; opacity: 0; }
  .sotd-icon-btn         { transition: none; }
}

/* ─── Strain of the Day — modal (V2) ─────────────────────── */
.sotd-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 9, 10, 0.74);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: sotdFadeIn 220ms ease-out;
}
@keyframes sotdFadeIn { from { opacity: 0; } to { opacity: 1; } }

.sotd-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: linear-gradient(165deg, rgba(19, 34, 50, 0.96) 0%, rgba(13, 27, 36, 0.96) 100%);
  border: 1px solid rgba(160, 191, 146, 0.32);
  border-radius: 18px;
  padding: 30px 26px 26px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6),
              0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  animation: sotdSlideUp 280ms cubic-bezier(0.18, 0.89, 0.32, 1.18);
  overflow: hidden;
}
.sotd-modal::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -25%;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(160, 191, 146, 0.16) 0%, transparent 65%);
  pointer-events: none;
}
.sotd-modal > * { position: relative; z-index: 1; }
@keyframes sotdSlideUp {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sotd-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, color 0.15s ease;
  z-index: 2;
}
.sotd-close-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-1, #F0F4F8);
}

.sotd-modal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #B8D4AA;
  margin-bottom: 16px;
}
.sotd-modal-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #A0BF92;
  box-shadow: 0 0 8px rgba(160, 191, 146, 0.85);
  animation: whatsNewPulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sotd-modal-dot { animation: none; }
}

.sotd-modal-name {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 6vw, 32px);
  font-weight: 600;
  color: var(--text-1, #F0F4F8);
  letter-spacing: -0.005em;
  line-height: 1.15;
  margin-bottom: 14px;
}
.sotd-modal-chip-row { margin-bottom: 16px; }
.sotd-modal-chip-row:empty { margin-bottom: 0; }

.sotd-modal-why {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--text-2, #8BA8BE);
  line-height: 1.55;
  margin-bottom: 24px;
}

.sotd-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sotd-analyze-btn {
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, #2A85B3 0%, #1B5F82 100%);
  border: none;
  border-radius: 12px;
  color: #ffffff;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 6px 18px rgba(27, 95, 130, 0.35);
}
.sotd-analyze-btn:hover  { box-shadow: 0 8px 22px rgba(27, 95, 130, 0.5); }
.sotd-analyze-btn:active { transform: scale(0.985); }

.sotd-later-btn {
  width: 100%;
  padding: 11px 20px;
  background: transparent;
  border: none;
  color: var(--text-3, #4A6880);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease;
}
.sotd-later-btn:hover { color: var(--text-2, #8BA8BE); }

@media (max-width: 380px) {
  .sotd-modal { padding: 26px 20px 20px; }
  .sotd-modal-name { font-size: 24px; }
}

/* ─── Standalone PWA cold-launch defense ──────────────────────────
   The 24px floor on env(safe-area-inset-bottom) lives ONLY here, not
   in the base rules. Reasoning:

   - Standalone mode (after Add to Home Screen) is where the cold-launch
     fragility actually bites: iOS resolves env() to 0 momentarily during
     the 50-200ms launch window, which makes the tab bar's bg fail to
     extend into the home-indicator zone. The 24px floor keeps a defensive
     band painted at all times so any inset:0 shortfall is invisible.

   - Browser mode (Safari before Add to Home Screen) doesn't have this
     problem — Safari's own bottom toolbar handles the chrome. Applying
     the floor in browser mode would just lift the tab bar 24px above
     Safari's toolbar with no benefit, looking like an artificial gap.

   The base rules above use bare env() so browser mode looks tight and
   natural. This block layers on the standalone defense.

   Per CULTIVAR-DEV-RULES.md → "iOS PWA viewport math": bare env will
   burn you, but only in standalone mode. Browser mode is a different
   beast. Scope the defense accordingly. */
@media (display-mode: standalone) {
  /* (May 11 S3) Floor bumped 24px → 36px to match the canonical floor in
     CULTIVAR-DEV-RULES.md → "iOS PWA viewport math". The old 24px floor
     was below typical iPhone home-indicator height (~34px), so on cold
     launch env(safe-area-inset-bottom) resolves to 0 → max(0, 24) = 24,
     then settles to 34 → max(34, 24) = 34 — a visible 10px lift after
     the first navigation. With a 36px floor, max(0, 36) = 36 on cold
     launch and max(34, 36) = 36 after settling. Stable, no lift. This
     is the recurring "bottom bumps up after a deploy" symptom Ross has
     flagged multiple times. */
  body::after {
    height: max(env(safe-area-inset-bottom, 0px), 36px);
  }
  main {
    padding: 1.25rem 1rem calc(70px + max(env(safe-area-inset-bottom, 0px), 36px));
  }
  .bottom-tab-bar {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 36px);
  }
}

/* ─── Backup email — inline in profile summary ───────────── */
.prof-summary-row-sublabel {
  display: block;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.35);
  font-weight: 400;
  margin-top: 2px;
  letter-spacing: 0;
}
.backup-email-inline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px 8px;
}
.backup-email-inline-label {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
  margin: 0;
}
.backup-email-inline-label strong {
  color: rgba(255,255,255,0.85);
  font-weight: 500;
}
.backup-inline-email {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  color: #fff;
  font-size: 1rem;
  padding: 13px 16px;
  width: 100%;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.backup-inline-email::placeholder { color: rgba(255,255,255,0.28); }
.backup-inline-email:focus { border-color: rgba(130, 175, 130, 0.5); }
.backup-inline-submit {
  background: #4e7f4e;
  color: #fff;
  border: none;
  border-radius: 99px;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 13px 24px;
  cursor: pointer;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}
.backup-inline-submit:disabled { opacity: 0.55; }
.backup-inline-step { display: flex; flex-direction: column; gap: 10px; }
.backup-inline-sent {
  font-size: 0.85rem;
  color: #7fbf7f;
  text-align: center;
  margin: 2px 0 0;
}
.backup-inline-confirmed {
  font-size: 0.85rem;
  color: #7fbf7f;
  text-align: center;
  margin: 4px 0 0;
}
.backup-inline-resend {
  background: none;
  border: none;
  color: rgba(255,255,255,0.35);
  font-size: 0.8rem;
  cursor: pointer;
  align-self: center;
  padding: 2px 8px;
  -webkit-tap-highlight-color: transparent;
}

.backup-inline-error {
  color: #ff6b6b;
  font-size: 0.8rem;
  margin: 6px 0 0;
  text-align: center;
}

/* Sign-out / management panel inside the wstep-0 backup row */
.backup-inline-managelabel {
  margin: 4px 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.45);
}
.backup-inline-signout {
  margin-top: 8px;
  align-self: stretch;
  background: transparent;
  color: rgba(255,180,170,0.85);
  border: 1px solid rgba(255,107,107,0.25);
  border-radius: var(--r-sm, 10px);
  padding: 9px 14px;
  font-family: var(--font-text);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s, color 0.15s, opacity 0.15s;
}
.backup-inline-signout:hover  { color: #ff8b8b; border-color: rgba(255,107,107,0.5); }
.backup-inline-signout:active { opacity: 0.85; }
.backup-inline-signout:disabled { opacity: 0.55; }

/* ── First-save backup modal ─────────────────────────────────────── */
.save-modal-overlay {
  position: fixed; inset: 0;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  padding: 24px;
  animation: fadeIn 0.2s ease-out;
}
.save-modal-overlay[style*="flex"] { display: flex !important; }
body.save-modal-open { overflow: hidden; }

.save-modal-card {
  max-width: 400px; width: 100%;
  background: var(--surface, #1a1f1c);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-lg, 20px);
  padding: 24px 22px 18px;
  box-shadow: 0 28px 70px rgba(0,0,0,0.6);
  display: flex; flex-direction: column; gap: 14px;
  animation: saveModalIn 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
  max-height: 90vh; overflow-y: auto;
}
@keyframes saveModalIn {
  from { transform: translateY(10px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.save-modal-icon {
  align-self: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(122,155,108,0.12);
  border: 1px solid rgba(122,155,108,0.25);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 2px;
}
.save-modal-title {
  margin: 0;
  font-family: var(--font-display, var(--font-text));
  font-size: 1.45rem; font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.01em;
  text-align: center;
}
.save-modal-sub {
  margin: 0;
  font-size: 0.98rem; line-height: 1.5;
  color: var(--text-2);
  text-align: center;
}
.save-modal-step {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 4px;
}
.save-modal-input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-1);
  font-family: var(--font-text);
  font-size: 1rem;
  padding: 13px 14px;
  border-radius: var(--r-sm, 10px);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
  -webkit-appearance: none;
}
.save-modal-input:focus {
  border-color: rgba(122,155,108,0.55);
  background: rgba(255,255,255,0.07);
}
.save-modal-input::placeholder { color: rgba(255,255,255,0.32); }
.save-modal-primary {
  width: 100%;
  background: linear-gradient(180deg, #7A9B6C 0%, #5F8254 100%);
  color: #fff; border: none;
  font-family: var(--font-text);
  font-size: 1rem; font-weight: 600;
  letter-spacing: 0.02em;
  padding: 13px 16px;
  border-radius: var(--r-sm, 10px);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(95,130,84,0.35);
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s, transform 0.08s;
}
.save-modal-primary:hover  { opacity: 0.92; }
.save-modal-primary:active { transform: scale(0.98); }
.save-modal-primary:disabled { opacity: 0.55; }

.save-modal-sent {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-2);
  text-align: center;
}
.save-modal-resend {
  align-self: center;
  background: transparent; border: none;
  color: rgba(255,255,255,0.45);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px 10px;
  -webkit-tap-highlight-color: transparent;
}
.save-modal-resend:hover { color: rgba(255,255,255,0.7); }
.save-modal-error {
  margin: 0;
  color: #ff6b6b;
  font-size: 0.85rem;
  text-align: center;
}
.save-modal-confirmed {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #7A9B6C;
  text-align: center;
  padding: 8px 0;
}
.save-modal-skip {
  align-self: center;
  background: transparent; border: none;
  color: rgba(255,255,255,0.45);
  font-family: var(--font-text);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px;
  padding: 8px 12px;
  margin-top: 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s;
}
.save-modal-skip:hover { color: rgba(255,255,255,0.7); }
.save-modal-skip:active { color: rgba(255,255,255,0.85); }

/* ── My Strains empty-state Restore CTA ─────────────────────────── */
.journal-empty-restore {
  display: block; width: 100%;
  background: rgba(122,155,108,0.08);
  border: 1px solid rgba(122,155,108,0.22);
  border-radius: var(--r-md, 14px);
  color: var(--text-2);
  font-family: var(--font-text);
  font-size: 0.95rem;
  line-height: 1.45;
  padding: 14px 16px;
  margin: 16px 0 18px;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.08s;
}
.journal-empty-restore strong {
  color: #9BB686;
  font-weight: 600;
  white-space: nowrap;
}
.journal-empty-restore:hover  { background: rgba(122,155,108,0.13); border-color: rgba(122,155,108,0.4); }
.journal-empty-restore:active { transform: scale(0.99); }

/* ── Verify-later nudge (Path B) ──────────────────────────────────
   Sits above the favorites grid when an OTP was started but never
   verified. Dismissible by completing the verify flow. */
.verify-later-nudge {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  background: rgba(200,147,10,0.08);
  border: 1px solid rgba(200,147,10,0.28);
  border-radius: var(--r-md, 14px);
  padding: 12px 14px;
  margin: 8px 0 14px;
  color: var(--text-2);
  font-family: var(--font-text);
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.08s;
}
.verify-later-nudge:hover  { background: rgba(200,147,10,0.13); border-color: rgba(200,147,10,0.45); }
.verify-later-nudge:active { transform: scale(0.99); }
.verify-later-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(200,147,10,0.22);
  border-radius: 50%;
  font-size: 0.95rem;
  color: #E0B340;
}
.verify-later-text {
  flex: 1;
  color: var(--text-2);
}
.verify-later-text strong {
  color: var(--text-1);
  font-weight: 600;
  word-break: break-all;
}
.verify-later-chev {
  flex-shrink: 0;
  color: rgba(255,255,255,0.4);
  font-size: 1.05rem;
}

/* ── Reflection step recovery line — quiet text link ─────────────── */
.wizard-restore-link {
  display: block; width: 100%;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.5);
  font-family: var(--font-text);
  font-size: 0.82rem;
  line-height: 1.4;
  padding: 8px 14px;
  margin: 10px 0 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s;
  text-align: center;
}
.wizard-restore-link strong {
  color: rgba(155, 182, 134, 0.9);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(155, 182, 134, 0.45);
}
.wizard-restore-link:hover strong  { color: #B8CFA5; text-decoration-color: rgba(184, 207, 165, 0.7); }
.wizard-restore-link:active strong { color: #B8CFA5; }