/* ============================================================
   CSAP – Citizen Science Awareness Platform
   css/style.css  ·  Mobile-first  ·  max-width 420px
   Brand: #1D9E75
   ============================================================

   TABLE OF CONTENTS
   ─────────────────
   1.  Design tokens
   2.  Reset & base
   3.  Screen system & transitions
   4.  Keyframe animations
   5.  Typography helpers
   6.  Buttons
   7.  App header  (Home logo bar)
   8.  Screen header  (back + title + step)
   9.  Screen footer  (CTA row)
   10. Bottom navigation
   11. Home screen  (hero / stats / recent)
   12. Observation type grid
   13. Capture form  (photo / severity / notes / location / weather)
   14. Review screen
   15. AI analysing screen
   16. Success screen
   17. Toast notification
   18. Utilities
   19. Desktop breakpoint
   ============================================================ */


/* ─── 1. DESIGN TOKENS ─────────────────────────────────────── */
:root {
  /* Brand */
  --brand:          #1D9E75;
  --brand-dark:     #16835f;
  --brand-xdark:    #0f5e44;
  --brand-light:    #e5f7f0;
  --brand-mid:      #a3dfc8;
  --brand-glow:     rgba(29, 158, 117, 0.25);

  /* Severity scale */
  --sev-low:        #1D9E75;
  --sev-low-bg:     #e5f7f0;
  --sev-mod:        #F59E0B;
  --sev-mod-bg:     #fef3c7;
  --sev-high:       #F97316;
  --sev-high-bg:    #fff0e6;
  --sev-crit:       #DC2626;
  --sev-crit-bg:    #fee2e2;

  /* Surfaces */
  --bg:             #F2F6F4;
  --surface:        #FFFFFF;
  --border:         rgba(0, 0, 0, 0.07);
  --border-solid:   #E4EAE7;

  /* Text */
  --text-1:   #111827;
  --text-2:   #4B5563;
  --text-3:   #9CA3AF;
  --text-inv: #FFFFFF;

  /* Geometry */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:    0 1px 4px rgba(0,0,0,0.07), 0 0 0 0.5px rgba(0,0,0,0.04);
  --shadow-md:    0 4px 14px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.03);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.12);
  --shadow-brand: 0 4px 16px rgba(29, 158, 117, 0.35);

  /* Dimensions */
  --nav-h:    64px;
  --header-h: 56px;
  --max-w:    420px;

  /* Easing */
  --ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Typography */
  --font:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, monospace;
}


/* ─── 2. RESET & BASE ──────────────────────────────────────── */
*, *::before, *::after {
  box-sizing:              border-box;
  margin:                  0;
  padding:                 0;
  -webkit-tap-highlight-color: transparent;
  -ms-overflow-style:      none;   /* IE/Edge */
  scrollbar-width:         none;   /* Firefox */
}

::-webkit-scrollbar { display: none; } /* Chrome/Safari/WebKit */

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family:    var(--font);
  font-size:      16px;
  line-height:    1.5;
  color:          var(--text-1);
  background:     #b8cdc4;
  min-height:     100%;
  position:       relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

img {
  display:   block;
  max-width: 100%;
}

button {
  font-family: inherit;
  cursor:      pointer;
  border:      none;
  background:  none;
  line-height: 1;
}

fieldset {
  border:    none;
  min-width: 0;
}

ul, ol { list-style: none; }

a { color: var(--brand); text-decoration: none; }

svg { display: block; }


/* ─── 3. SCREEN SYSTEM & TRANSITIONS ──────────────────────── */

/* Every screen hides by default */
.screen {
  display:        none;
  flex-direction: column;
  height:         100dvh;
  height:         100vh;   /* fallback for older browsers */
  overflow-y:     hidden;
  background:     var(--bg);
  max-width:      var(--max-w);
  margin-inline:  auto;
  position:       relative;
  overflow-x:     hidden;
}

/* Active screen fades up into view */
.screen--active {
  display:   flex;
  animation: screenEnter 0.28s var(--ease) both;
}

/* Full-bleed override – analysing & success & welcome */
.screen--fullbleed {
  align-items:     center;
  justify-content: flex-start;
  overflow-y:      auto;
}

#screen-analysing { background: #fff; }
#screen-success   { background: var(--surface); }
#screen-welcome   { background: var(--bg); justify-content: space-between; padding: 0; }

/* Stage — Welcome carousel: hide the bottom-nav while screen-welcome is
   active. Uses :has() (supported in all current Safari iOS + Chrome
   Android, which is our target). */
body:has(#screen-welcome.screen--active) .bottom-nav {
  display: none;
}

/* Toast lives at body level, also centred */
#toast { max-width: var(--max-w); margin-inline: auto; }


/* ─── 4. KEYFRAME ANIMATIONS ───────────────────────────────── */

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

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

/* Analysing pulse rings */
@keyframes pulseRing {
  0%   { transform: scale(0.42); opacity: 0.85; }
  100% { transform: scale(1.9);  opacity: 0;    }
}

@keyframes coreBreath {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 var(--brand-glow); }
  50%       { transform: scale(1.06); box-shadow: 0 0 0 14px transparent;    }
}

@keyframes scanLine {
  0%   { top: 2%;  }
  50%  { top: 82%; }
  100% { top: 2%;  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes stepDone {
  0%   { transform: scale(0.5); }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1);   }
}

/* Success checkmark draw-on */
@keyframes drawStroke {
  to { stroke-dashoffset: 0; }
}

@keyframes checkBounce {
  0%   { opacity: 0; transform: scale(0.7); }
  60%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1);   }
}

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

/* Toast */
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);    }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(-50%) translateY(0);    }
  to   { opacity: 0; transform: translateX(-50%) translateY(10px); }
}


/* ─── 5. TYPOGRAPHY HELPERS ────────────────────────────────── */

.section-heading {
  font-size:      12px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--text-3);
  margin-bottom:  0.75rem;
}


/* ─── 6. BUTTONS ───────────────────────────────────────────── */

.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.4rem;
  font-size:       15px;
  font-weight:     600;
  border-radius:   var(--r-full);
  padding:         0 24px;
  height:          48px;
  transition:      background 0.18s, color 0.18s, box-shadow 0.18s,
                   transform 0.1s ease, opacity 0.18s;
  white-space:     nowrap;
  user-select:     none;
  -webkit-user-select: none;
}

.btn:active         { transform: scale(0.97); transition: transform 0.1s ease; }
.btn:disabled       { opacity: 0.4; pointer-events: none; }

/* Primary */
.btn--primary              { background: var(--brand); color: var(--text-inv); box-shadow: 0 4px 12px rgba(29,158,117,0.35); }
.btn--primary:hover        { background: var(--brand-dark); box-shadow: 0 6px 20px rgba(29,158,117,0.42); }

/* Outline */
.btn--outline              { background: transparent; color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); }
.btn--outline:hover        { background: var(--brand-light); }

/* Ghost */
.btn--ghost                { background: transparent; color: var(--text-2); }
.btn--ghost:hover          { background: rgba(0,0,0,0.05); color: var(--text-1); }

/* Sizes */
.btn--large  { height: 56px; font-size: 16px; font-weight: 700; padding: 0 1.75rem; box-shadow: 0 6px 20px rgba(29,158,117,0.4); }
.btn--small  { height: 34px; font-size: 0.8125rem; padding: 0 0.75rem; }

/* Width */
.btn--full   { width: 100%; border-radius: 50px; }
.btn--half   { flex: 1;     border-radius: 50px; }

/* SVG icon inside button */
.btn svg {
  width:  18px;
  height: 18px;
  stroke: currentColor;
  fill:   none;
  stroke-width:     2;
  stroke-linecap:   round;
  stroke-linejoin:  round;
  flex-shrink: 0;
}


/* ─── 7. APP HEADER (Home) ─────────────────────────────────── */

.app-header {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  padding:        2rem 1.25rem 1.25rem;
  background:     var(--surface);
  border-bottom:  0.5px solid var(--border);
}

.app-header__logo {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
}

.logo-icon {
  width:       40px;
  height:      40px;
  flex-shrink: 0;
}

.logo-wordmark {
  font-size:      1.625rem;
  font-weight:    800;
  color:          var(--brand);
  letter-spacing: -0.03em;
  line-height:    1;
}

.app-header__tagline {
  margin-top:     0.3rem;
  font-size:      0.75rem;
  color:          var(--text-3);
  letter-spacing: 0.03em;
}


/* ─── 8. SCREEN HEADER (Back + Title + Step) ───────────────── */

.screen-header {
  position:      sticky;
  top:           0;
  z-index:       10;
  display:       flex;
  align-items:   center;
  gap:           0.75rem;
  height:        var(--header-h);
  padding:       0 1rem;
  background:    var(--surface);
  border-bottom: 0.5px solid var(--border);
  overflow:      visible;
}

/* Teal progress bar drawn along the bottom edge */
.screen-header::after {
  content:       '';
  position:      absolute;
  bottom:        -0.5px;
  left:          0;
  height:        3px;
  width:         var(--progress, 0%);
  background:    var(--brand);
  border-radius: 0 3px 3px 0;
  transition:    width 0.45s var(--ease);
  z-index:       1;
}

#screen-obs-type .screen-header { --progress: 25%; }
#screen-capture  .screen-header { --progress: 50%; }
#screen-review   .screen-header { --progress: 75%; }

.btn-back {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           38px;
  height:          38px;
  border-radius:   var(--r-full);
  flex-shrink:     0;
  transition:      background 0.15s;
}

.btn-back:hover,
.btn-back:focus-visible { background: rgba(0,0,0,0.06); }

.btn-back svg {
  width:           20px;
  height:          20px;
  stroke:          var(--text-2);
  fill:            none;
  stroke-width:    2.25;
  stroke-linecap:  round;
  stroke-linejoin: round;
}

.screen-header__title {
  flex:           1;
  font-size:      18px;
  font-weight:    700;
  color:          var(--text-1);
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

.screen-header__step {
  font-size:   0.75rem;
  font-weight: 600;
  color:       var(--text-3);
  flex-shrink: 0;
}

.screen-header__cancel {
  font-size:     0.8125rem;
  font-weight:   600;
  color:         var(--text-3);
  background:    transparent;
  border:        none;
  padding:       6px 8px;
  border-radius: var(--r-md);
  flex-shrink:   0;
  cursor:        pointer;
  transition:    background 0.15s, color 0.15s;
}
.screen-header__cancel:hover,
.screen-header__cancel:focus-visible {
  background: rgba(0,0,0,0.06);
  color:      var(--text-1);
}


/* ─── 9. SCREEN FOOTER ─────────────────────────────────────── */

.screen-footer {
  display:     flex;
  gap:         0.75rem;
  width:       100%;
  padding:     1rem 1.25rem 0;
  flex-shrink: 0;
}


/* ─── 10. BOTTOM NAVIGATION ────────────────────────────────── */

.app-footer {
  position:   fixed;
  bottom:     0;
  left:       50%;
  transform:  translateX(-50%);
  width:      100%;
  max-width:  var(--max-w);
  z-index:    100;
  background: var(--surface);
  border-top: none;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-nav { display: flex; }

.bottom-nav__item {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             3px;
  height:          var(--nav-h);
  font-size:       11px;
  font-weight:     500;
  color:           var(--text-3);
  transition:      color 0.18s;
  position:        relative;
}

/* Active indicator bar at top */
.bottom-nav__item::before {
  content:       '';
  position:      absolute;
  top:           0;
  left:          50%;
  transform:     translateX(-50%);
  width:         0;
  height:        3px;
  border-radius: 0 0 3px 3px;
  background:    var(--brand);
  transition:    width 0.22s var(--ease-spring);
}

.bottom-nav__item--active,
.bottom-nav__item[aria-current="page"] {
  color:       var(--brand);
  font-size:   12px;
  font-weight: 700;
}

.bottom-nav__item--active::before,
.bottom-nav__item[aria-current="page"]::before {
  width: 28px;
}

.bottom-nav__item svg {
  width:           20px;
  height:          20px;
  stroke:          currentColor;
  fill:            none;
  stroke-width:    1.75;
  stroke-linecap:  round;
  stroke-linejoin: round;
}

.bottom-nav__item--active svg,
.bottom-nav__item[aria-current="page"] svg {
  width:        24px;
  height:       24px;
  stroke-width: 2.25;
}


/* ─── 11. HOME SCREEN ──────────────────────────────────────── */

.home-main {
  flex:           1;
  min-height:     0;
  overflow-y:     auto;
  overflow-x:     hidden;
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
  padding:        0.875rem 0.875rem calc(var(--nav-h) + 0.75rem);
  -webkit-overflow-scrolling: touch;
}

/* ── Header ── */
.home-header {
  display:       flex;
  align-items:   center;
  gap:           0.75rem;
  padding:       0.25rem 1rem;
  background:    var(--surface);
  border-bottom: none;
  box-shadow:    0 1px 4px rgba(0,0,0,0.05);
  flex-shrink:   0;
}

.home-header__logo {
  height:      44px;
  width:       auto;
  flex-shrink: 0;
  object-fit:  contain;
}

/* Greeting + subtext stacked */
.home-header__greeting-wrap {
  flex:       1;
  min-width:  0;
  display:    flex;
  flex-direction: column;
  gap:        0.1rem;
  text-align: center;
}

.home-header__greeting {
  font-size:   16px;
  font-weight: 700;
  color:       var(--text-1);
  line-height: 1.25;
  margin:      0;
}

.home-header__subtext {
  font-size:   0.75rem;
  color:       var(--text-3);
  line-height: 1.2;
  margin:      0;
}

/* ── Hero card ── */
.home-hero-card {
  padding:       1.25rem;
  background:    linear-gradient(135deg, #1D9E75 0%, #0F6E56 100%) !important;
  border-radius: 20px;
  box-shadow:    0 4px 16px rgba(29,158,117,0.35);
  flex-shrink:   0;
}

.home-hero-card__title {
  font-size:      22px;
  font-weight:    800;
  color:          #fff;
  line-height:    1.3;
  letter-spacing: -0.02em;
  margin-bottom:  0.5rem;
}

.home-hero-card__sub {
  font-size:     14px;
  color:         rgba(255,255,255,0.85);
  margin-bottom: 1rem;
  line-height:   1.5;
}

.home-hero-card__btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.375rem;
  width:           100%     !important;
  height:          auto;
  background:      #ffffff  !important;
  color:           #1D9E75  !important;
  font-size:       15px     !important;
  font-weight:     600      !important;
  border-radius:   50px     !important;
  border:          none;
  cursor:          pointer;
  padding:         14px 24px !important;
  box-shadow:      0 4px 12px rgba(0,0,0,0.15);
  transition:      transform 0.1s ease, box-shadow 0.18s;
}

.home-hero-card__btn:active { transform: scale(0.97); }

/* ── Live activity feed card ── */
.home-feed-card {
  background:     #fff;
  border-radius:  16px;
  border:         none;
  border-top:     3px solid #1D9E75;
  box-shadow:     0 2px 8px rgba(0,0,0,0.06);
  padding:        0.875rem 0.875rem 0.625rem;
  display:        flex;
  flex-direction: column;
  gap:            0.625rem;
  flex-shrink:    0;
}

/* Card header with live dot */
.home-feed__header {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
}

.home-feed__title {
  font-size:   0.9375rem;
  font-weight: 700;
  color:       var(--text-1);
  flex:        1;
}

/* Location chip */
.home-feed__location-chip {
  display:       inline-block;
  font-size:     0.75rem;
  color:         var(--text-3);
  background:    var(--bg);
  border-radius: var(--r-full);
  padding:       0.2rem 0.625rem;
  line-height:   1.4;
  align-self:    flex-start;
  margin-top:    -0.25rem;
}

/* Pulsing green dot */
.live-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    #22c55e;
  flex-shrink:   0;
  position:      relative;
}

.live-dot::after {
  content:       '';
  position:      absolute;
  inset:         -4px;
  border-radius: 50%;
  background:    #22c55e;
  opacity:       0;
  animation:     livePulse 2s ease-out infinite;
}

@keyframes livePulse {
  0%   { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(2);   opacity: 0; }
}

/* ── Three stat chips ── */
.home-stat-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:     8px;
}

.home-stat-chip {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             0.125rem;
  height:          56px;
  padding:         0 8px;
  background:      #fff;
  border:          none;
  border-radius:   12px;
  box-shadow:      0 2px 8px rgba(0,0,0,0.06);
  text-align:      center;
}

.home-stat-chip--alert .home-stat-chip__num {
  color: #D97706;
}

.home-stat-chip__icon {
  font-size:   1.125rem;
  line-height: 1;
}

.home-stat-chip__num {
  font-size:      1.5rem;
  font-weight:    700;
  color:          var(--brand);
  line-height:    1;
  letter-spacing: -0.02em;
}

.home-stat-chip__label {
  font-size:   0.6875rem;
  color:       var(--text-3);
  line-height: 1.3;
}

/* ── Active alert box ── */
.home-feed__alert {
  background:    #FFF5F5;
  border-radius: var(--r-md);
  border-left:   3px solid #E24B4A;
  overflow:      hidden;
}

/* Collapsed header row — the always-visible tap target */
.home-feed__alert-header {
  display:         flex;
  align-items:     center;
  gap:             0.5rem;
  width:           100%;
  min-height:      56px;
  padding:         0 0.875rem;
  background:      transparent;
  border:          none;
  cursor:          pointer;
  text-align:      left;
  -webkit-tap-highlight-color: rgba(29, 158, 117, 0.1);
}

/* Pulsing red dot — inline in header */
.home-feed__alert-dot {
  flex-shrink:   0;
  width:         10px;
  height:        10px;
  border-radius: 50%;
  background:    #E24B4A;
  animation:     alertPulse 1.5s ease-in-out infinite;
}

@keyframes alertPulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.5); opacity: 0.6; }
}

/* Single-line summary text */
.home-feed__alert-summary {
  flex:          1;
  font-size:     0.8125rem;
  font-weight:   600;
  color:         #C0392B;
  line-height:   1.3;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* ↓ / ↑ chevron */
.home-feed__alert-chevron {
  flex-shrink: 0;
  font-size:   0.875rem;
  color:       #E24B4A;
  transition:  transform 0.2s;
}

.home-feed__alert.is-open .home-feed__alert-chevron {
  transform: rotate(180deg);
}

/* Expanded detail area — hidden by default, shown via .is-open */
.home-feed__alert-detail {
  display:        none;
  flex-direction: column;
  gap:            0.2rem;
  padding:        0 0.875rem 0.75rem;
}

.home-feed__alert.is-open .home-feed__alert-detail {
  display: flex;
}

.home-feed__alert-location {
  font-size:   0.9375rem;
  font-weight: 700;
  color:       #1a1a1a;
  line-height: 1.25;
}

.home-feed__alert-body {
  font-size:     0.8125rem;
  color:         #6b7280;
  line-height:   1.35;
  margin-bottom: 0.25rem;
}

/* "View alert →" pill button */
.home-feed__alert-pill {
  align-self:    flex-start;
  display:       inline-flex;
  align-items:   center;
  padding:       0.25rem 0.75rem;
  background:    #E24B4A;
  color:         #fff;
  font-size:     0.75rem;
  font-weight:   600;
  border-radius: var(--r-full);
  border:        none;
  cursor:        pointer;
  line-height:   1.4;
  transition:    opacity 0.15s;
}

.home-feed__alert-pill:active { opacity: 0.75; }

/* ── Feed items list ── */
.home-feed__items {
  display:        flex;
  flex-direction: column;
  gap:            0;
  margin:         0 -0.875rem;
}

.home-feed__item {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
  min-height:  56px;
  padding:     0.625rem 0.875rem;
  cursor:      pointer;
  transition:  background 0.12s;
  border-top:  0.5px solid var(--border);
}

.home-feed__item:first-child { border-top: none; }
.home-feed__item:active      { background: #f8fafb; }

/* Coloured icon circle */
.home-feed__item-icon {
  flex-shrink:     0;
  width:           42px;
  height:          42px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.125rem;
  line-height:     1;
}

.home-feed__item-icon--pest    { background: #fde8e8; }
.home-feed__item-icon--disease { background: #fef3c7; }
.home-feed__item-icon--soil    { background: #f5e6d3; }
.home-feed__item-icon--plant   { background: #d1fae5; }
.home-feed__item-icon--water   { background: #dbeafe; }
.home-feed__item-icon--weather { background: #ede9fe; }

/* Two-line body */
.home-feed__item-body {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            0.1rem;
}

.home-feed__item-type {
  font-size:   14px;
  font-weight: 500;
  color:       var(--text-1);
  line-height: 1.2;
}

.home-feed__item-meta {
  font-size:   12px;
  color:       var(--text-3);
  line-height: 1.3;
}

.home-feed__item-crop {
  display:     block;
  font-size:   0.75rem;
  font-style:  italic;
  color:       var(--text-3);
  line-height: 1.3;
}

.home-feed__item-arrow {
  font-size:   1.125rem;
  color:       var(--text-3);
  flex-shrink: 0;
  line-height: 1;
}

/* ── Community nudge (inside feed card) ── */
.home-nudge {
  font-size:   0.75rem;
  color:       var(--brand);
  text-align:  center;
  font-style:  italic;
  line-height: 1.4;
  padding:     0.375rem 0.5rem 0;
  border-top:  0.5px solid var(--border);
  margin-top:  0.125rem;
}

/* ── Map card ── */
.home-map-card {
  background:    #fff;
  border-radius: 16px;
  border:        1.5px solid #E0E0E0;
  box-shadow:    0 2px 8px rgba(0,0,0,0.06);
  overflow:      hidden;
  flex-shrink:   0;
}

.home-map-container {
  height:        200px;
  border-radius: 14px 14px 0 0;
  overflow:      hidden;
  display:       block;
}

.home-map-caption {
  font-size:   0.8125rem;
  color:       var(--text-2);
  padding:     0.5rem 0.875rem;
  line-height: 1.4;
  margin:      0;
}

/* Pulsing SVG ring on the Leaflet map circle */
.csap-map-pulse {
  animation: csapMapRingPulse 2s ease-in-out infinite;
}

@keyframes csapMapRingPulse {
  0%, 100% { stroke-opacity: 0.8; }
  50%       { stroke-opacity: 0; }
}

/* ── Onboarding overlay ── */
.onboarding-overlay {
  position:        fixed;
  inset:           0;
  z-index:         1000;
  background:      rgba(0, 0, 0, 0.6);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         1.25rem;
}

.onboarding-overlay.hidden { display: none; }

.onboarding-card {
  background:    #fff;
  border-radius: 16px;
  padding:       24px;
  max-width:     360px;
  width:         100%;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           0.75rem;
  box-shadow:    var(--shadow-lg);
}

.onboarding-logo {
  height:      140px;
  width:       auto;
  object-fit:  contain;
}

.onboarding-heading {
  font-size:      1.25rem;
  font-weight:    800;
  color:          var(--text-1);
  letter-spacing: -0.02em;
  text-align:     center;
  margin:         0;
}

.onboarding-sub {
  font-size:   0.8125rem;
  color:       var(--text-3);
  text-align:  center;
  line-height: 1.4;
  margin:      0;
}

.onboarding-features {
  list-style:     none;
  padding:        0;
  margin:         0.25rem 0;
  width:          100%;
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
}

.onboarding-feature {
  display:     flex;
  align-items: flex-start;
  gap:         0.75rem;
}

.onboarding-feature__icon {
  font-size:   1.25rem;
  line-height: 1.3;
  flex-shrink: 0;
}

.onboarding-feature__text {
  font-size:   0.875rem;
  color:       var(--text-2);
  line-height: 1.4;
}


/* ─── 12. OBSERVATION TYPE GRID ────────────────────────────── */

.obs-type-main {
  flex:       1;
  padding:    1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}

.obs-type-intro {
  font-size:     0.875rem;
  color:         var(--text-2);
  margin-bottom: 0.875rem;
  padding:       0 0.25rem;
}

.obs-type-footnote {
  font-size:   0.8125rem;
  color:       var(--text-3);
  margin-top:  1rem;
  padding:     0 0.25rem;
  text-align:  center;
  line-height: 1.4;
}

/* 2x2 grid for the 4 type cards — kept 2-col at all widths so 4 cards
   never render as 3+1 on tablets. */
.type-grid {
  display:               grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap:                   12px !important;
  align-items:           stretch;
}

.type-card {
  display:                  flex;
  flex-direction:           column;
  align-items:              center;
  justify-content:          flex-start;
  text-align:               center;
  height:                   150px;
  min-height:               unset;
  padding:                  16px 8px 12px;
  overflow:                 hidden;
  box-sizing:               border-box;
  -webkit-text-size-adjust: 100%;
  text-size-adjust:         100%;
  background:               #fff;
  border-radius:            16px;
  border:                   none;
  box-shadow:               0 2px 8px rgba(0,0,0,0.06);
  cursor:                   pointer;
  width:                    100%;
  transition:               all 0.15s ease;
}

.type-card:active { transform: scale(0.96); }
.type-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Selected state (toggled by JS via .selected) */
.type-card.selected {
  background:   #E1F5EE;
  border:       2px solid #1D9E75;
  box-shadow:   0 4px 12px rgba(29,158,117,0.2);
}

/* Icon circle — 48px coloured by observation type */
.type-card__icon {
  width:           48px;
  height:          48px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       24px;
  line-height:     1;
  flex-shrink:     0;
  box-shadow:      0 2px 6px rgba(0,0,0,0.08);
  transition:      transform 0.2s var(--ease-spring);
}

.type-card[data-type="pest"]    .type-card__icon { background: #FFF0F0; }
.type-card[data-type="disease"] .type-card__icon { background: #FFF8EC; }
.type-card[data-type="soil"]    .type-card__icon { background: #F0F4E8; }
.type-card[data-type="plant"]   .type-card__icon { background: #E8F5EE; }
.type-card[data-type="water"]   .type-card__icon { background: #EBF4FF; }
.type-card[data-type="weather"] .type-card__icon { background: #F0EEFF; }

.type-card.selected .type-card__icon { transform: scale(1.1); }

.type-card__label {
  font-size:    14px;
  font-weight:  700;
  color:        #1a1a18;
  line-height:  1.2;
  flex-shrink:  0;
  margin-top:   10px;
  margin-bottom: 0;
}

.type-card.selected .type-card__label { color: #085041; }

.type-card__desc {
  display:              -webkit-box !important;
  -webkit-line-clamp:   2;
  -webkit-box-orient:   vertical;
  overflow:             hidden;
  font-size:            12px;
  line-height:          1.4;
  text-align:           center;
  color:                #888780;
  margin-top:           4px;
  max-height:           2.8em;
}

.type-card.selected .type-card__desc { color: #0F6E56; }


/* ─── 13. CAPTURE FORM ─────────────────────────────────────── */

.capture-main {
  flex:           1;
  padding:        1rem 1.25rem 140px;
  overflow-y:     auto;
  display:        flex;
  flex-direction: column;
  gap:            0.875rem;
}

.btn-review-fixed {
  position:  fixed;
  bottom:    70px;
  left:      50%;
  transform: translateX(-50%);
  width:     calc(100% - 2rem);
  max-width: 420px;
  z-index:   100;
}

/* ── Fieldset card ── */
.form-section {
  background:     #fff;
  border-radius:  16px;
  border:         none;
  box-shadow:     0 2px 8px rgba(0,0,0,0.06);
  padding:        16px 18px;
  display:        flex;
  flex-direction: column;
  gap:            0.625rem;
}

.form-section__legend {
  font-size:    15px;
  font-weight:  700;
  color:        var(--text-1);
  float:        left;
  width:        100%;
  margin-bottom: 0.25rem;
}

.legend-optional {
  font-size:   0.6875rem;
  font-weight: 500;
  color:       var(--text-3);
  margin-left: 0.25rem;
}

.form-hint {
  font-size:   0.75rem;
  color:       var(--text-3);
  line-height: 1.4;
}

.form-hint--right { text-align: right; }

/* ── Soil readings card ── */
.soil-readings-card {
  border-left: 3px solid #1D9E75;
}

.soil-readings-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   0.75rem;
}

.soil-reading-cell {
  display:        flex;
  flex-direction: column;
  gap:            0.25rem;
}

.soil-reading-cell__icon {
  font-size:   1rem;
  line-height: 1;
}

.soil-reading-cell__label {
  font-size:   0.6875rem;
  font-weight: 700;
  color:       var(--text-2);
  line-height: 1.2;
}

.soil-reading-cell__input-row {
  display:     flex;
  align-items: center;
  gap:         0.375rem;
}

.soil-reading-cell__input {
  flex:          1;
  min-width:     0;
  padding:       0.5rem 0.625rem;
  font-size:     1.125rem;
  font-weight:   600;
  color:         var(--text-1);
  background:    var(--bg);
  border:        1.5px solid var(--border-solid);
  border-radius: var(--r-sm);
  -moz-appearance: textfield;
  appearance:    textfield;
  width:         100%;
}
.soil-reading-cell__input:focus {
  outline:       none;
  border-color:  var(--brand);
  box-shadow:    0 0 0 3px rgba(29, 158, 117, 0.12);
}
.soil-reading-cell__input::placeholder { color: var(--text-3); }
.soil-reading-cell__input::-webkit-inner-spin-button,
.soil-reading-cell__input::-webkit-outer-spin-button { -webkit-appearance: none; }

.soil-reading-cell__unit {
  font-size:   0.6875rem;
  color:       var(--text-3);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Soil readings on review screen */
.review-row__value--soil {
  font-size:   0.8125rem;
  line-height: 1.5;
}

/* ── Photo upload zone ── */
.photo-upload {
  position:        relative;
  border:          2px dashed rgba(255,255,255,0.2);
  border-radius:   14px;
  min-height:      200px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  overflow:        hidden;
  transition:      border-color 0.2s, background 0.2s;
  background:      #1a1a18;
}

.photo-upload:hover,
.photo-upload:focus-visible {
  border-color: rgba(255,255,255,0.4);
  background:   #222220;
}

.photo-upload.has-photo {
  border-style:  solid;
  border-color:  var(--brand-mid);
  border-width:  2px;
  background:    transparent;
}

.photo-upload__placeholder {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.5rem;
  padding:        1.25rem;
  color:          rgba(255,255,255,0.65);
  text-align:     center;
  pointer-events: none;
}

.photo-upload__placeholder p {
  font-size:   16px;
  font-weight: 700;
  color:       #fff;
}

.photo-upload__placeholder p + p,
.photo-upload__placeholder p:last-child {
  font-size:  13px;
  font-weight: 400;
  color:      rgba(255,255,255,0.65);
}

.photo-upload__icon {
  width:           48px;
  height:          48px;
  stroke:          #fff;
  fill:            none;
  stroke-width:    1.5;
  stroke-linecap:  round;
  stroke-linejoin: round;
}

.photo-upload__preview {
  width:      100%;
  height:     100%;
  object-fit: cover;
  position:   absolute;
  inset:      0;
}

.photo-upload__remove {
  position:        absolute;
  top:             8px;
  right:           8px;
  width:           28px;
  height:          28px;
  border-radius:   var(--r-full);
  background:      rgba(0, 0, 0, 0.55);
  color:           #fff;
  font-size:       0.875rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background 0.15s;
  z-index:         2;
}

.photo-upload__remove:hover { background: rgba(0,0,0,0.75); }

/* ── Photo confirmed (compact state after photo captured) ── */
.photo-confirmed {
  display:       flex;
  align-items:   center;
  gap:           0.75rem;
  padding:       0.625rem 0.875rem;
  background:    #f0fdf4;
  border:        1px solid #bbf7d0;
  border-radius: var(--r-md);
}

.photo-confirmed__thumb {
  width:         48px;
  height:        48px;
  border-radius: 8px;
  object-fit:    cover;
  flex-shrink:   0;
  background:    #e5e7eb;
}

.photo-confirmed__info {
  display:        flex;
  flex-direction: column;
  gap:            0.2rem;
  flex:           1;
}

.photo-confirmed__label {
  font-size:   0.875rem;
  font-weight: 600;
  color:       #166534;
}

.photo-confirmed__retake {
  background:  none;
  border:      none;
  padding:     0;
  font-size:   0.75rem;
  color:       var(--text-3);
  cursor:      pointer;
  text-align:  left;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Photo 2 reveal (slide-down animation via inline styles) ── */
/* photo2-fieldset starts hidden; JS animates in via inline max-height */

/* ── Photo 2 header ── */
.photo2-header {
  margin-bottom: 0.25rem;
}

.photo2-header__title {
  font-size:   0.9375rem;
  font-weight: 700;
  color:       var(--text-1);
  margin:      0 0 0.125rem;
}

.photo2-header__sub {
  font-size:  0.8125rem;
  color:      var(--text-2);
  margin:     0;
}

/* ── Photo summary (both confirmed) ── */
.photo-summary {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.5rem;
  padding:        0.75rem;
  background:     #f0fdf4;
  border:         1px solid #bbf7d0;
  border-radius:  var(--r-md);
}

.photo-summary__row {
  display: flex;
  gap:     0.75rem;
}

.photo-summary__slot {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.25rem;
}

.photo-summary__img {
  width:         64px;
  height:        64px;
  border-radius: 8px;
  object-fit:    cover;
  background:    #e5e7eb;
}

.photo-summary__slot-label {
  font-size: 0.75rem;
  color:     #166534;
}

.photo-summary__text {
  font-size:   0.8125rem;
  font-weight: 600;
  color:       var(--brand);
  margin:      0;
  text-align:  center;
}

/* ── Photo 2 skip link ── */
.photo2-skip-btn {
  background:  none;
  border:      none;
  padding:     0;
  font-size:   0.8125rem;
  color:       var(--text-3);
  cursor:      pointer;
  text-align:  center;
  width:       100%;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Severity chip row ── */
.form-section__label {
  font-size:      12px;
  font-weight:    600;
  color:          var(--text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display:        block;
  margin-bottom:  0.5rem;
}

.severity-row {
  display: flex;
  gap:     8px;
  width:   100%;
}

.severity-chip {
  flex:            1;
  height:          auto     !important;
  min-height:      48px     !important;
  border-radius:   50px     !important;
  border:          1.5px solid #E0E0E0;
  background:      #fff;
  font-size:       14px     !important;
  font-weight:     500      !important;
  color:           var(--text-1);
  cursor:          pointer;
  transition:      all 0.15s ease;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         12px 16px !important;
  white-space:     nowrap;
}

.severity-chip[data-value="low"].selected    { background: #E8F5EE; border-color: #1D9E75; color: #1D9E75; }
.severity-chip[data-value="moderate"].selected { background: #FFF8EC; border-color: #854F0B; color: #854F0B; }
.severity-chip[data-value="high"].selected   { background: #FFF0EC; border-color: #CC4A1D; color: #CC4A1D; }
.severity-chip[data-value="critical"].selected { background: #FFF0F0; border-color: #CC2222; color: #CC2222; }

/* ── Notes textarea ── */
.form-textarea {
  font-family:    var(--font);
  font-size:      15px;
  line-height:    1.55;
  color:          var(--text-1);
  background:     #FAFAFA;
  border:         1.5px solid #E0E0E0;
  border-radius:  12px;
  padding:        14px 16px;
  resize:         vertical;
  width:          100%;
  min-height:     96px;
  transition:     border-color 0.18s, box-shadow 0.18s;
  -webkit-appearance: none;
  appearance:     none;
}

.form-textarea:focus {
  outline:       none;
  border-color:  #1D9E75;
  border-width:  1.5px;
  box-shadow:    0 0 0 3px var(--brand-glow);
  background:    #fff;
}

.form-textarea::placeholder { color: var(--text-3); }

/* ── Field conditions card ── */
/* Campaigns screen */
.campaigns-main {
  flex:           1;
  min-height:     0;
  overflow-y:     auto;
  overflow-x:     hidden;
  padding:        12px 12px calc(var(--nav-h) + 4.5rem) 12px;
  -webkit-overflow-scrolling: touch;
}
.campaigns-card {
  background:    #fff;
  border:        1px solid var(--border);
  border-radius: 14px;
  padding:       14px 16px;
}

/* Home tracking + leaderboard cards — tappable, white rounded, green accent */
.home-tracking-card,
.home-leaderboard-card {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid #1D9E75;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 12px 14px;
  margin-bottom: 16px;
  cursor: pointer;
}
.home-tracking-card__icon,
.home-leaderboard-card__icon  { font-size: 20px; flex-shrink: 0; }
.home-tracking-card__body,
.home-leaderboard-card__body  { flex: 1; font-size: 14px; color: #222; line-height: 1.35; }
.home-tracking-card__arrow,
.home-leaderboard-card__arrow { color: #999; font-size: 20px; flex-shrink: 0; }

.field-conditions-card {
  background:     #F8FFFE;
  border-radius:  16px;
  border-left:    4px solid #1D9E75;
  box-shadow:     0 2px 8px rgba(0,0,0,0.06);
  padding:        12px 14px;
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.field-conditions-card__title-row {
  display:     flex;
  align-items: center;
}

.field-conditions-card__title {
  flex:           1;
  font-size:      0.6875rem;
  font-weight:    600;
  color:          var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.field-conditions-card__refresh {
  background:  none;
  border:      none;
  padding:     4px;
  cursor:      pointer;
  color:       var(--text-3);
  opacity:     0.7;
  display:     flex;
  align-items: center;
  transition:  opacity 0.15s;
}
.field-conditions-card__refresh:active { opacity: 1; }
.field-conditions-card__refresh svg {
  width:           16px;
  height:          16px;
  stroke:          currentColor;
  fill:            none;
  stroke-width:    2;
  stroke-linecap:  round;
  stroke-linejoin: round;
}

.field-conditions-card__cols {
  display:     flex;
  align-items: center;
  gap:         0;
}

.field-conditions-col {
  flex:        1;
  display:     flex;
  align-items: flex-start;
  gap:         8px;
  min-width:   0;
}

/* 24px teal circle — location column */
.field-conditions-col__icon-circle {
  flex-shrink:     0;
  width:           24px;
  height:          24px;
  border-radius:   50%;
  background:      rgba(29, 158, 117, 0.12);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.75rem;
  line-height:     1;
}

/* Standalone emoji — weather column */
.field-conditions-col__wx-icon {
  flex-shrink: 0;
  font-size:   1.375rem;
  line-height: 1;
  width:       24px;
  text-align:  center;
}

.field-conditions-col__body {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.field-conditions-col__label-row {
  display:     flex;
  align-items: center;
  gap:         5px;
}

.field-conditions-col__label {
  font-size:   0.8125rem;
  font-weight: 600;
  color:       var(--text-1);
  line-height: 1.3;
}

.field-conditions-col__sub {
  font-size:   0.6875rem;
  color:       var(--text-3);
  line-height: 1.3;
}

.field-conditions-col__sub--green { color: #059669; }
.field-conditions-col__sub--amber { color: #D97706; }

/* Thin vertical divider between columns */
.field-conditions-divider {
  flex-shrink: 0;
  width:       1px;
  height:      36px;
  background:  var(--border-solid);
  margin:      0 12px;
  align-self:  center;
}

/* Inline loading spinner */
.fc-spinner {
  flex-shrink:    0;
  width:          10px;
  height:         10px;
  border:         1.5px solid var(--border-solid);
  border-top-color: #1D9E75;
  border-radius:  50%;
  animation:      spin 0.7s linear infinite;
}

.fc-spinner.hidden { display: none; }


/* ─── 14. REVIEW SCREEN ────────────────────────────────────── */

/* Make the whole review screen scroll, not just the inner main, so the
   consent + Submit footer flow naturally below the card content.
   padding-bottom keeps Submit clear of the fixed bottom-nav. */
#screen-review {
  overflow-y:     auto;
  padding-bottom: calc(var(--nav-h) + 24px);
}

.review-main {
  flex:           1 0 auto;
  padding:        1rem 1.25rem 0;
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}

.result-main {
  flex:           1;
  padding:        1rem 1.25rem 140px;
  overflow-y:     auto;
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}

/* ── Result banner ── */
.result-banner {
  border-radius: var(--r-md);
  padding:       0.75rem 1rem;
  display:       flex;
  align-items:   center;
}

.result-banner--high   { background: #ecfdf5; border: 1.5px solid #6ee7b7; }
.result-banner--medium { background: #fffbeb; border: 1.5px solid #fcd34d; }
.result-banner--review { background: #fff7ed; border: 1.5px solid #fdba74; }

.result-banner__badge {
  font-size:   0.8125rem;
  font-weight: 700;
  color:       var(--text-2);
  line-height: 1.3;
}

.result-banner--high   .result-banner__badge { color: #065f46; }
.result-banner--medium .result-banner__badge { color: #92400e; }
.result-banner--review .result-banner__badge { color: #9a3412; }

/* ── Classification card ── */
.result-classification-card {
  background:    var(--surface);
  border-radius: var(--r-md);
  border:        0.5px solid var(--border-solid);
  padding:       1rem;
  display:       flex;
  flex-direction: column;
  gap:           0.375rem;
}

.result-name {
  font-size:      1.25rem;
  font-weight:    800;
  color:          var(--text-1);
  line-height:    1.2;
  letter-spacing: -0.02em;
}

.result-scientific {
  font-size:   0.875rem;
  font-style:  italic;
  color:       var(--text-3);
  line-height: 1.3;
}

.result-desc {
  font-size:   0.9375rem;
  color:       var(--text-2);
  line-height: 1.55;
  margin-top:  0.25rem;
}

/* ── Recommended actions ── */
.result-actions-section {
  background:    var(--surface);
  border-radius: var(--r-md);
  border:        0.5px solid var(--border-solid);
  padding:       1rem;
}

.result-actions-heading {
  font-size:     0.6875rem;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--text-3);
  margin-bottom:  0.75rem;
}

.result-actions {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
}

.result-action-item {
  display:     flex;
  align-items: flex-start;
  gap:         0.75rem;
}

.result-action-item__num {
  flex-shrink:     0;
  width:           22px;
  height:          22px;
  border-radius:   50%;
  background:      var(--brand-light);
  color:           var(--brand-dark);
  font-size:       0.75rem;
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  line-height:     1;
  margin-top:      1px;
}

.result-action-item__text {
  font-size:   0.9375rem;
  color:       var(--text-2);
  line-height: 1.45;
  flex:        1;
}

/* ── Expert review notice ── */
.result-expert-note {
  display:       flex;
  align-items:   flex-start;
  gap:           0.625rem;
  background:    #fff7ed;
  border:        1.5px solid #fdba74;
  border-radius: var(--r-md);
  padding:       0.875rem 1rem;
}

.result-expert-note__icon {
  font-size:   1.25rem;
  flex-shrink: 0;
  line-height: 1.3;
}

.result-expert-note p {
  font-size:   0.875rem;
  color:       #9a3412;
  line-height: 1.5;
}

/* ── Points note ── */
.result-points-note {
  font-size:   0.875rem;
  color:       var(--brand);
  font-weight: 600;
  text-align:  center;
}

.review-photo-wrap {
  border-radius: var(--r-lg);
  overflow:      hidden;
  background:    var(--surface);
  border:        0.5px solid var(--border-solid);
  aspect-ratio:  16 / 9;
  flex-shrink:   0;
  position:      relative;
}

.review-photo {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.review-photo-empty {
  width:           100%;
  height:          100%;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             0.5rem;
  color:           var(--text-3);
  font-size:       0.8125rem;
  background:      var(--bg);
  position:        absolute;
  inset:           0;
}

.review-photo-empty svg {
  width:           36px;
  height:          36px;
  stroke:          var(--text-3);
  fill:            none;
  stroke-width:    1.5;
  stroke-linecap:  round;
  stroke-linejoin: round;
  opacity:         0.4;
}

/* ── Detail list ── */
.review-details {
  background:    #fff;
  border-radius: 16px;
  border:        none;
  box-shadow:    0 2px 8px rgba(0,0,0,0.06);
  height:        auto;
}

.review-row {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: space-between;
  gap:             0.75rem;
  min-height:      48px;
  height:          auto;
  padding:         0.625rem 1rem;
  border-bottom:   0.5px solid #F0F0F0;
}

.review-row:last-child { border-bottom: none; }
.review-row--notes     { align-items: flex-start; }

.review-row__label {
  font-size:   12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:       var(--text-3);
  flex-shrink: 0;
  min-width:   5.5rem;
}

.review-row__value {
  font-size:   0.9375rem;
  font-weight: 600;
  color:       var(--text-1);
  text-align:  right;
  flex:        1;
}

.review-row__value--notes {
  text-align:  left;
  color:       var(--text-2);
  line-height: 1.5;
}

/* Severity badge reused in review */
.severity-badge {
  display:       inline-block;
  font-size:     0.75rem;
  font-weight:   700;
  padding:       3px 10px;
  border-radius: var(--r-full);
}

.severity-badge[data-level="low"]      { color: var(--sev-low);  background: var(--sev-low-bg);  }
.severity-badge[data-level="moderate"] { color: var(--sev-mod);  background: var(--sev-mod-bg);  }
.severity-badge[data-level="high"]     { color: var(--sev-high); background: var(--sev-high-bg); }
.severity-badge[data-level="critical"] { color: var(--sev-crit); background: var(--sev-crit-bg); }

/* ── Consent checkbox ── */
.review-consent { padding: 0.25rem 0; }

.checkbox-label {
  display:     flex;
  align-items: flex-start;
  gap:         0.625rem;
  cursor:      pointer;
  font-size:   0.8125rem;
  color:       var(--text-2);
  line-height: 1.5;
}

.checkbox-label input[type="checkbox"] {
  position:       absolute;
  opacity:        0;
  width:          0;
  height:         0;
  pointer-events: none;
}

.checkbox-custom {
  flex-shrink:   0;
  margin-top:    1px;
  width:         20px;
  height:        20px;
  border:        2px solid var(--border-solid);
  border-radius: var(--r-xs);
  background:    var(--surface);
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    border-color 0.18s, background 0.18s;
}

.checkbox-label:has(input:checked) .checkbox-custom {
  background:   var(--brand);
  border-color: var(--brand);
}

.checkbox-label:has(input:checked) .checkbox-custom::after {
  content:       '';
  display:       block;
  width:         10px;
  height:        6px;
  border-left:   2px solid #fff;
  border-bottom: 2px solid #fff;
  transform:     translateY(-1px) rotate(-45deg);
}


/* ─── 15. AI ANALYSING SCREEN ──────────────────────────────── */

.analysis-content {
  width:           100%;
  padding:         2rem 1.5rem;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  min-height:      100dvh;
  min-height:      100vh;
  justify-content: center;
}

/* Photo box */
.analysis-photo-wrap {
  position:      relative;
  width:         100%;
  max-width:     280px;
  aspect-ratio:  4 / 3;
  border-radius: 12px;
  overflow:      hidden;
  background:    #e8ecef;
  margin-bottom: 1.5rem;
  flex-shrink:   0;
}

.analysis-photo {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* Shown when no photo captured */
.analysis-photo-placeholder {
  width:           100%;
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #adb5bd;
}

/* Scanning line */
.scan-line {
  position:   absolute;
  left:       0;
  right:      0;
  height:     2px;
  background: linear-gradient(90deg, transparent, #1D9E75, transparent);
  animation:  scanMove 1.8s ease-in-out infinite;
  z-index:    2;
  top:        0;
}

@keyframes scanMove {
  0%   { top: 0;    opacity: 1;   }
  100% { top: 100%; opacity: 0.3; }
}

/* Corner brackets */
.analysis-bracket {
  position: absolute;
  width:    18px;
  height:   18px;
  z-index:  3;
}
.analysis-bracket--tl { top: 8px;    left:  8px;  border-top:    2px solid #1D9E75; border-left:  2px solid #1D9E75; }
.analysis-bracket--tr { top: 8px;    right: 8px;  border-top:    2px solid #1D9E75; border-right: 2px solid #1D9E75; }
.analysis-bracket--bl { bottom: 8px; left:  8px;  border-bottom: 2px solid #1D9E75; border-left:  2px solid #1D9E75; }
.analysis-bracket--br { bottom: 8px; right: 8px;  border-bottom: 2px solid #1D9E75; border-right: 2px solid #1D9E75; }

/* Title + animated dots */
.analysis-title {
  font-size:     1.125rem;
  font-weight:   700;
  color:         var(--text-1);
  margin-bottom: 0.25rem;
}

.analysis-dots span {
  animation: dotFade 1.5s ease-in-out infinite;
  opacity:   0;
}
.analysis-dots span:nth-child(1) { animation-delay: 0s;   }
.analysis-dots span:nth-child(2) { animation-delay: 0.3s; }
.analysis-dots span:nth-child(3) { animation-delay: 0.6s; }

@keyframes dotFade {
  0%, 80%, 100% { opacity: 0; }
  40%           { opacity: 1; }
}

.analysis-subtitle {
  font-size:     0.875rem;
  color:         var(--text-2);
  margin-bottom: 1.75rem;
}

/* Step list */
.analysis-steps {
  list-style:     none;
  width:          100%;
  max-width:      280px;
  display:        flex;
  flex-direction: column;
  text-align:     left;
  padding:        0;
  margin:         0;
}

.analysis-step {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
  padding:     0.45rem 0;
  font-size:   0.875rem;
  color:       var(--text-3);
  transition:  color 0.3s;
}

.analysis-step.is-done { color: var(--text-1); }

.analysis-step__icon {
  flex-shrink:     0;
  width:           24px;
  height:          24px;
  border-radius:   50%;
  background:      #e8ecef;
  color:           #9ca3af;
  font-size:       0.6875rem;
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background 0.25s ease, color 0.25s ease;
}

.analysis-step.is-done .analysis-step__icon {
  background: #1D9E75;
  color:      #fff;
  animation:  stepDone 0.35s var(--ease-spring) both;
}

.analysis-step__label {
  line-height: 1.3;
}


/* ─── 16. SUCCESS SCREEN ───────────────────────────────────── */

.success-content {
  width:           100%;
  padding:         2.5rem 1.5rem
                   calc(var(--nav-h) + 1.5rem);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
}

/* Animated checkmark SVG */
.success-graphic {
  margin-bottom: 1.25rem;
  animation:     successScaleIn 0.4s ease-out both 0.1s;
}

@keyframes successScaleIn {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1);   }
}

.success-checkmark {
  width:  72px;
  height: 72px;
}

.success-checkmark__circle {
  stroke-dasharray:  226;
  stroke-dashoffset: 226;
  transform-origin:  center;
  transform:         rotate(-90deg);
  animation:         drawStroke 0.7s var(--ease) forwards 0.2s;
  fill:              #E1F5EE;
}

.success-checkmark__tick {
  stroke-dasharray:  66;
  stroke-dashoffset: 66;
  stroke:            #1D9E75;
  stroke-width:      2.5;
  animation:         drawStroke 0.4s var(--ease) forwards 0.85s;
}

/* Titles */
.success-title {
  font-size:      22px;
  font-weight:    800;
  color:          var(--text-1);
  letter-spacing: -0.02em;
  margin-bottom:  0.375rem;
  animation:      slideUp 0.4s var(--ease) both 0.5s;
}

.success-subtitle {
  font-size:     14px;
  color:         var(--text-2);
  margin-bottom: 1.5rem;
  animation:     slideUp 0.4s var(--ease) both 0.6s;
}

/* Stage 1.8a-pt3: personalized line replaces the old subtitle. */
.success-personal-line {
  font-size:     14px;
  color:         var(--text-2);
  margin:        0 0 1.25rem;
  text-align:    center;
  animation:     slideUp 0.4s var(--ease) both 0.6s;
}

/* Stage 1.8a-pt3: split success cards.
   Impact card — light green, celebratory. Hidden by default; revealed by
   _populateImpactStat once a cascade priority matches. */
.success-impact-card {
  width:         100%;
  background:    #ECFDF5;
  border:        1px solid #A7F3D0;
  border-radius: 14px;
  padding:       12px 14px;
  margin:        0 0 0.875rem;
  animation:     slideUp 0.4s var(--ease) both 0.7s;
}
.success-impact-card.hidden { display: none; }
.success-impact-card__stat {
  font-size:    14px;
  font-weight:  600;
  color:        #065F46;
  margin:       0;
  line-height:  1.45;
  text-align:   center;
}

/* AI Status card — white/neutral. Always visible while the obs is in
   pending state (which is always, since AI is async). */
.success-status-card {
  width:         100%;
  background:    #fff;
  border:        1px solid var(--border);
  border-radius: 14px;
  padding:       14px 16px;
  margin:        0 0 0.75rem;
  animation:     slideUp 0.4s var(--ease) both 0.75s;
}
.success-status-card__heading {
  font-size:   15px;
  font-weight: 700;
  color:       var(--text-1);
  margin:      0 0 4px;
}
.success-status-card__body {
  font-size:   13px;
  color:       var(--text-2);
  margin:      0;
  line-height: 1.5;
}

/* Demoted Report ID — small grey strip with a copy button. */
.success-report-id-line {
  display:        flex;
  align-items:    center;
  justify-content: center;
  gap:            6px;
  font-size:      12px;
  color:          #6B7280;
  margin:         0 0 1.25rem;
  font-family:    var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.success-report-id-copy {
  background: transparent;
  border:     none;
  padding:    2px 6px;
  font-size:  13px;
  cursor:     pointer;
  color:      #6B7280;
  line-height: 1;
}
.success-report-id-copy:hover { color: #1f2937; }

/* Teal result card */
.success-card {
  width:         100%;
  background:    linear-gradient(135deg, #1D9E75, #0F6E56);
  border-radius: 16px;
  overflow:      hidden;
  margin-bottom: 1rem;
  box-shadow:    0 4px 16px rgba(29,158,117,0.4);
  animation:     pointsIn 0.45s var(--ease) both 0.7s;
}

.success-card__row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0.75rem 1.125rem;
  border-bottom:   0.5px solid rgba(255, 255, 255, 0.14);
}

.success-card__row:last-child { border-bottom: none; }

.success-card__label {
  font-size:   0.8125rem;
  color:       rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.success-card__value {
  font-size:   0.9375rem;
  font-weight: 700;
  color:       #fff;
  text-align:  right;
}

.success-card__value--status {
  background:    rgba(255, 255, 255, 0.2);
  padding:       3px 10px;
  border-radius: var(--r-full);
  font-size:     0.75rem;
  color:         #fff;
}

/* AI insight block */
.success-ai-note {
  width:         100%;
  background:    var(--surface);
  border-radius: var(--r-md);
  border:        0.5px solid var(--border-solid);
  box-shadow:    var(--shadow-xs);
  padding:       1rem;
  text-align:    left;
  margin-bottom: 1.5rem;
  animation:     slideUp 0.4s var(--ease) both 0.88s;
}

.success-ai-note__heading {
  font-size:      0.6875rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--brand);
  margin-bottom:  0.4rem;
}

.success-ai-note p {
  font-size:   0.875rem;
  color:       var(--text-2);
  line-height: 1.55;
}

/* ── Success AI card ──────────────────────────────── */
.success-ai-card {
  width:         100%;
  background:    #F0FDF8;
  border:        1.5px solid #9FE1CB;
  border-radius: 16px;
  overflow:      hidden;
  cursor:        pointer;
  -webkit-tap-highlight-color: rgba(29, 158, 117, 0.1);
  animation:     slideUp 0.4s var(--ease) both 0.6s;
  /* Smooth height via max-height transition */
  max-height:    56px;
  transition:    max-height 0.3s ease, box-shadow 0.2s ease;
}

.success-ai-card:hover,
.success-ai-card:focus-visible {
  box-shadow: 0 0 0 2px var(--brand);
  outline:    none;
}

/* Expanded state — toggled by JS */
.success-ai-card.ai-card--expanded {
  max-height: 800px;
}

/* Collapsed summary row — always visible */
.success-ai-card__collapsed-row {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  padding:     0 1rem;
  height:      56px;
  min-height:  56px;
}

.success-ai-card__col-icon {
  font-size:   1rem;
  flex-shrink: 0;
}

.success-ai-card__col-text {
  flex:        1;
  font-size:   14px;
  font-weight: 700;
  color:       #085041;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.success-ai-card__col-toggle {
  font-size:   0.75rem;
  font-weight: 700;
  color:       var(--brand);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Expanded content area */
.success-ai-card__expanded {
  padding:    0 1rem 1rem;
  border-top: 1px solid #9FE1CB;
  background: #F0FDF8;
  /* hidden while collapsed (max-height clips it) */
}

.success-ai-card__loading p {
  font-size:  0.875rem;
  color:      var(--text-2);
  margin:     0.75rem 0 0;
  font-style: italic;
  line-height: 1.55;
}

/* Result section — fades in when AI resolves */
#success-ai-result {
  animation: aiSlideIn 0.4s var(--ease) both;
}

@keyframes aiSlideIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Pending / low-confidence copy */
.success-ai-card__pending-heading {
  font-size:   0.9375rem;
  font-weight: 700;
  color:       var(--text-1);
  margin:      0.75rem 0 0.4rem;
}

.success-ai-card__impact-stat {
  font-size:      0.8125rem;
  font-weight:    600;
  color:          var(--brand);
  margin:         0 0 0.5rem;
  letter-spacing: 0.01em;
}

.success-ai-card__pending-body {
  font-size:   0.875rem;
  color:       var(--text-2);
  line-height: 1.6;
  margin:      0;
}

.success-ai-card__result-line {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  flex-wrap:   wrap;
  margin:      0.75rem 0 0.4rem;
}

.success-ai-card__result-label {
  font-size:   1rem;
  font-weight: 700;
  color:       var(--text-1);
}

/* Plant identification row */
.success-ai-card__plant-row {
  display:       flex;
  align-items:   center;
  flex-wrap:     wrap;
  gap:           0.4rem;
  margin:        0.75rem 0 0.5rem;
  padding:       0.4rem 0.5rem;
  background:    #f0fdf4;
  border-radius: var(--r-md);
}

.success-ai-card__plant-label {
  font-size:   0.8rem;
  color:       #166534;
  font-weight: 600;
}

.success-ai-card__plant-name {
  font-size:   0.875rem;
  font-weight: 700;
  color:       #14532d;
}

/* Confidence badge — only rendered for medium/high */
.success-ai-badge {
  font-size:     0.6875rem;
  font-weight:   700;
  padding:       2px 8px;
  border-radius: var(--r-full);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.success-ai-badge--high   { background: #d1fae5; color: #065f46; }
.success-ai-badge--medium { background: #fef3c7; color: #92400e; }
.success-ai-badge--plant  { background: #dcfce7; color: #166534; }

.success-ai-card__desc {
  font-size:   0.875rem;
  color:       var(--text-2);
  line-height: 1.55;
  margin:      0 0 0.5rem;
}

/* Seasonal note */
.success-ai-card__seasonal {
  font-size:   0.8125rem;
  font-style:  italic;
  color:       #0f766e;
  margin:      0 0 0.75rem;
  line-height: 1.5;
}

/* "What to do" heading */
.success-ai-card__actions-heading {
  font-size:   0.8125rem;
  font-weight: 700;
  color:       var(--text-1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin:      0.75rem 0 0.4rem;
}

/* Actions — primary (always shown in expanded) */
.success-ai-card__actions-primary {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
  margin-bottom:  0.25rem;
}

/* Actions toggle */
.success-ai-card__actions-toggle {
  margin-bottom: 0.25rem;
}

.success-ai-card__toggle-btn {
  background:    none;
  border:        none;
  padding:       0;
  font-size:     0.8125rem;
  font-weight:   600;
  color:         var(--brand-dark);
  cursor:        pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Collapsible extra actions list */
.success-ai-card__actions {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
  margin-top:     0.5rem;
}

.result-action-item {
  display:     flex;
  align-items: flex-start;
  gap:         0.625rem;
  font-size:   0.875rem;
  color:       var(--text-1);
  line-height: 1.5;
}

.result-action-item__num {
  flex-shrink:     0;
  width:           1.375rem;
  height:          1.375rem;
  border-radius:   50%;
  background:      var(--brand);
  color:           #fff;
  font-size:       0.75rem;
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-top:      1px;
}

/* Expert review notice */
.success-ai-expert {
  margin-top:    0.75rem;
  padding:       0.625rem 0.75rem;
  background:    #fff7ed;
  border-left:   3px solid #f97316;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size:     0.8125rem;
  color:         #7c2d12;
  line-height:   1.5;
}

/* Action buttons */
.success-actions {
  width:          100%;
  display:        flex;
  flex-direction: column;
  gap:            0.625rem;
  animation:      slideUp 0.4s var(--ease) both 1s;
}


/* ─── 17. TOAST NOTIFICATION ───────────────────────────────── */

.toast {
  position:      fixed;
  bottom:        calc(var(--nav-h) + 0.875rem);
  left:          50%;
  transform:     translateX(-50%);
  z-index:       9999;
  max-width:     calc(var(--max-w) - 2.5rem);
  width:         max-content;
  font-size:     0.875rem;
  font-weight:   500;
  color:         #fff;
  background:    var(--text-1);
  padding:       0.625rem 1.125rem;
  border-radius: var(--r-full);
  box-shadow:    var(--shadow-lg);
  pointer-events: none;
  opacity:       0;
  line-height:   1.4;
  white-space:   nowrap;
}

.toast--visible {
  opacity:   1;
  animation: toastIn 0.25s var(--ease) both;
}

.toast--hiding {
  animation: toastOut 0.25s var(--ease) both;
}

.toast--success { background: var(--brand-dark); }
.toast--error   { background: var(--sev-crit);   }
.toast--warning { background: var(--sev-mod); color: var(--text-1); }


/* ─── 18. UTILITIES ────────────────────────────────────────── */

/* Visually hidden but accessible */
.sr-only {
  position:    absolute;
  width:       1px;
  height:      1px;
  padding:     0;
  margin:      -1px;
  overflow:    hidden;
  clip:        rect(0, 0, 0, 0);
  white-space: nowrap;
  border:      0;
}

/* JS-toggled visibility */
.hidden { display: none !important; }

/* Monospace (reference IDs) */
.mono {
  font-family:    var(--font-mono);
  font-size:      0.8125rem;
  letter-spacing: 0.04em;
}

/* Focus ring – show only on keyboard nav */
:focus-visible {
  outline:        2px solid var(--brand);
  outline-offset: 2px;
  border-radius:  var(--r-xs);
}

:focus:not(:focus-visible) { outline: none; }


/* ─── 19. DESKTOP BREAKPOINT ───────────────────────────────── */

@media (min-width: 480px) {

  /* Full-page centred background */
  body {
    display:         flex;
    justify-content: center;
    align-items:     flex-start;
    background:
      radial-gradient(ellipse at 65% 15%, rgba(29,158,117,0.15) 0%, transparent 55%),
      linear-gradient(155deg, #b2ccc2 0%, #c6d8cf 100%);
    padding:         1.5rem 0;
    min-height:      100vh;
  }

  /* App screens get phone-frame styling */
  .screen {
    border-radius: var(--r-xl);
    overflow:      hidden;
    box-shadow:
      0 0 0 0.5px rgba(0,0,0,0.1),
      0 20px 60px rgba(0,0,0,0.2),
      0 4px 16px rgba(0,0,0,0.08);
    min-height:  820px;
    max-height:  900px;
    height:      90vh;
  }

  .screen--fullbleed {
    border-radius: var(--r-xl);
    overflow:      hidden;
  }

  /* Clip nav inside rounded frame */
  .app-footer {
    border-radius: 0 0 var(--r-xl) var(--r-xl);
    overflow:      hidden;
  }

}

/* Very small phones (≤ 360px) */
@media (max-width: 360px) {

  .home-hero__title { font-size: 1.625rem; }

  /* Drop to 1-col on very small screens if needed */
  .type-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ─── 13. MY LOG SCREEN ────────────────────────────────── */

/* Sticky header bar for screen-mylog */
.screen-header {
  display:         flex;
  align-items:     center;
  gap:             0.75rem;
  padding:         0.75rem 1.25rem;
  background:      var(--surface);
  border-bottom:   0.5px solid var(--border);
  position:        sticky;
  top:             0;
  z-index:         10;
  flex-shrink:     0;
}

.screen-header__title {
  flex:        1;
  font-size:   1rem;
  font-weight: 700;
  margin:      0;
}

/* Badge showing total count */
.mylog-count-badge {
  background:    var(--brand);
  color:         #fff;
  font-size:     0.75rem;
  font-weight:   700;
  padding:       0.2em 0.55em;
  border-radius: 99px;
  min-width:     1.5rem;
  text-align:    center;
  flex-shrink:   0;
}

/* Stat chips row */
.mylog-summary {
  display:         flex;
  gap:             0.75rem;
  padding:         0.875rem 1.25rem;
  background:      var(--surface);
  border-bottom:   0.5px solid var(--border);
  flex-shrink:     0;
}

.mylog-stat-chip {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  background:      var(--bg);
  border:          1px solid var(--border);
  border-radius:   var(--r-lg);
  padding:         0.625rem 0.5rem;
  gap:             0.2rem;
}

.mylog-stat-chip__val {
  font-size:   1.25rem;
  font-weight: 800;
  color:       var(--brand);
  line-height: 1;
}

.mylog-stat-chip__label {
  font-size:  0.7rem;
  color:      var(--muted);
  text-align: center;
}

/* Scrollable list area — fills remaining space */
.mylog-main {
  flex:           1;
  min-height:     0;
  overflow-y:     auto;
  overflow-x:     hidden;
  padding:        1rem 1rem calc(var(--nav-h) + 4.5rem) 1rem;
  -webkit-overflow-scrolling: touch;
}

/* Observation card list */
.mylog-list {
  list-style:     none;
  margin:         0;
  padding:        0;
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
}

/* Stage 1.8e: My Log card status badges + status line + submitted meta */
.mylog-card__status-badge {
  position:      absolute;
  top:           10px;
  right:         10px;
  font-size:     11px;
  font-weight:   600;
  padding:       4px 10px;
  border-radius: 20px;
  line-height:   1.4;
  white-space:   nowrap;
}
.mylog-card__status-badge--ready     { background: #16A34A; color: #fff; }
.mylog-card__status-badge--analysing { background: #E5E7EB; color: #4B5563; }
.mylog-card__status-badge--expert    { background: #FEF3C7; color: #92400E; }

.mylog-card__status-line {
  font-size:    13px;
  font-weight:  500;
  margin:       0;
  padding:      10px 0;
  border-top:   1px solid #f0f4f0;
}
.mylog-card__status-line--analysing { color: #6B7280; }
.mylog-card__status-line--ready     { color: #1D9E75; font-weight: 600; }
.mylog-card__status-line--expert    { color: #92400E; }
.mylog-card__status-line--feedback  { color: #4B5563; }

.mylog-card__submitted-meta {
  display:   block;
  font-size: 12px;
  color:     #888;
  margin:    0 0 4px;
}


/* ─── 20. AUTH SCREENS & PROFILE UI ───────────────────── */

/* ── Home header profile button ── */
.profile-btn {
  flex-shrink:  0;
  display:      flex;
  align-items:  center;
  gap:          0.375rem;
  padding:      0 0.625rem;
  height:       34px;
  border-radius: var(--r-full);
  border:       1.5px solid var(--border-solid);
  font-size:    0.8125rem;
  font-weight:  600;
  color:        var(--text-2);
  background:   transparent;
  transition:   background 0.15s, border-color 0.15s;
  white-space:  nowrap;
}

.profile-btn:active { background: var(--bg); }

/* Teal initials circle shown when logged in */
.profile-btn__avatar {
  width:           38px;
  height:          38px;
  border-radius:   50%;
  background:      var(--brand);
  color:           #fff;
  font-size:       0.8125rem;
  font-weight:     600;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.profile-btn--loggedin {
  border-color: var(--brand-mid);
  padding-left: 0;
}

/* ── Profile dropdown ── */
.profile-dropdown {
  position:      fixed;
  top:           calc(var(--header-h) + 6px);
  right:         max(8px, calc(50vw - var(--max-w) / 2 + 8px));
  background:    var(--surface);
  border:        0.5px solid var(--border-solid);
  border-radius: 12px;
  box-shadow:    var(--shadow-lg);
  z-index:       200;
  overflow:      hidden;
  min-width:     210px;
}

.profile-dropdown__header {
  display:        flex;
  flex-direction: column;
  gap:            0.15rem;
  padding:        0.875rem 1rem 0.75rem;
}

.profile-dropdown__name {
  font-size:   0.9375rem;
  font-weight: 700;
  color:       var(--text-1);
  line-height: 1.2;
}

.profile-dropdown__email {
  font-size: 0.75rem;
  color:     var(--text-3);
}

.profile-dropdown__divider {
  height:     0.5px;
  background: var(--border-solid);
}

.profile-dropdown__item {
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  width:          100%;
  text-align:     left;
  padding:        0.8125rem 1rem;
  font-size:      0.9375rem;
  font-weight:    500;
  color:          var(--text-1);
  background:     none;
  border:         none;
  cursor:         pointer;
  font-family:    inherit;
  line-height:    1;
  transition:     background 0.1s;
}

.profile-dropdown__item:not(:disabled):hover,
.profile-dropdown__item:not(:disabled):active { background: var(--bg); }

.profile-dropdown__item--disabled  { color: var(--text-3); cursor: default; }
.profile-dropdown__item--teal      { color: var(--brand); }
.profile-dropdown__item--danger    { color: #DC2626; }

.profile-dropdown__coming-soon {
  font-size:     0.6875rem;
  font-weight:   600;
  color:         var(--brand);
  background:    var(--brand-bg);
  padding:       2px 7px;
  border-radius: var(--r-full);
  line-height:   1.4;
}

/* ── Auth prompt card (on success screen) ── */
.auth-prompt {
  margin:        1.25rem 0 0.5rem;
  padding:       1.25rem;
  background:    #fff;
  border:        2px solid var(--brand);
  border-radius: var(--r-xl);
  text-align:    center;
}

.auth-prompt__heading {
  font-size:     1.0625rem;
  font-weight:   800;
  color:         var(--text-1);
  margin-bottom: 0.5rem;
}

.auth-prompt__sub {
  font-size:     0.9375rem;
  color:         var(--text-2);
  line-height:   1.5;
  margin-bottom: 1rem;
}

.auth-prompt__btns {
  display: flex;
  gap:     0.625rem;
}

.auth-prompt__btn-main    { flex: 1; }
.auth-prompt__btn-dismiss { flex: 1; }

/* ── Auth screens (signup / signin) ── */
.auth-main {
  flex:           1;
  min-height:     0;
  overflow-y:     auto;
  overflow-x:     hidden;
  padding:        1.75rem 1.25rem 2.5rem;
  -webkit-overflow-scrolling: touch;
}

.auth-logo-wrap {
  display:         flex;
  justify-content: center;
  margin-bottom:   1.25rem;
}

.auth-logo { height: 56px; width: auto; }

.auth-heading {
  font-size:      1.75rem;
  font-weight:    800;
  color:          var(--text-1);
  text-align:     center;
  letter-spacing: -0.02em;
  margin-bottom:  0.375rem;
}

.auth-subheading {
  font-size:     0.9375rem;
  color:         var(--text-2);
  text-align:    center;
  margin-bottom: 1.75rem;
}

.auth-form {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
  margin-bottom:  1.5rem;
}

.form-field {
  display:        flex;
  flex-direction: column;
  gap:            0.375rem;
}

.form-field__label {
  font-size:   0.875rem;
  font-weight: 600;
  color:       var(--text-2);
}

.form-field__input {
  height:        48px;
  padding:       0 0.875rem;
  border:        1.5px solid var(--border-solid);
  border-radius: var(--r-md);
  font-size:     1rem;
  font-family:   var(--font);
  color:         var(--text-1);
  background:    #fff;
  width:         100%;
  transition:    border-color 0.15s, box-shadow 0.15s;
}

.form-field__input:focus {
  outline:      none;
  border-color: var(--brand);
  box-shadow:   0 0 0 3px var(--brand-glow);
}

.form-field__input::placeholder { color: var(--text-3); }

.auth-error {
  font-size:     0.875rem;
  color:         #DC2626;
  background:    #fee2e2;
  border-radius: var(--r-sm);
  padding:       0.625rem 0.875rem;
  line-height:   1.4;
  margin-top:    -0.25rem;
}

.auth-divider {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
  margin:      1.25rem 0;
  color:       var(--text-3);
  font-size:   0.875rem;
}

.auth-divider::before,
.auth-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--border-solid);
}

.auth-google-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             0.5rem;
  width:           100%;
  height:          48px;
  position:        relative;
  opacity:         0.55;
  cursor:          not-allowed;
}

.auth-coming-soon {
  position:      absolute;
  right:         0.75rem;
  font-size:     0.6875rem;
  background:    var(--brand-light);
  color:         var(--brand);
  padding:       0.2em 0.5em;
  border-radius: var(--r-full);
  font-weight:   600;
}

.auth-switch {
  text-align:  center;
  font-size:   0.9375rem;
  color:       var(--text-2);
  margin-top:  1.5rem;
}

.auth-switch__link {
  color:               var(--brand);
  font-weight:         600;
  background:          none;
  border:              none;
  padding:             0;
  font-size:           inherit;
  font-family:         inherit;
  cursor:              pointer;
  text-decoration:     underline;
  text-underline-offset: 2px;
}

/* Prominent variant — sits at the TOP of the sign-up / sign-in screens
   (just below the subheading) so a returning user who landed on the
   wrong screen can pivot without scrolling past the form. Soft
   brand-tinted callout — visible without competing with the primary CTA. */
.auth-switch--prominent {
  margin:        0 0 1.5rem;
  padding:       0.625rem 1rem;
  background:    var(--brand-light);
  border-radius: var(--r-md);
}

.auth-forgot {
  align-self:  flex-end;
  font-size:   0.8125rem;
  color:       var(--text-3);
  background:  none;
  border:      none;
  padding:     0;
  font-family: inherit;
  cursor:      not-allowed;
  margin-top:  0.125rem;
}


/* ─── 21. CROP TYPE AUTOCOMPLETE ──────────────────────── */

.crop-wrap {
  position: relative;
}

/* The input inherits .form-field__input — this just ensures full width */
.crop-wrap .form-field__input { width: 100%; }

.crop-suggestions {
  position:      absolute;
  top:           calc(100% + 4px);
  left:          0;
  right:         0;
  background:    var(--surface);
  border:        1.5px solid var(--border-solid);
  border-radius: var(--r-md);
  box-shadow:    var(--shadow-md);
  z-index:       50;
  overflow:      hidden;
  list-style:    none;
  margin:        0;
  padding:       0;
}

.crop-suggestion-item {
  height:        44px;
  display:       flex;
  align-items:   center;
  padding:       0 0.875rem;
  font-size:     1rem;
  color:         var(--text-1);
  cursor:        pointer;
  border-left:   3px solid transparent;
  border-bottom: 0.5px solid var(--border);
  transition:    background 0.1s, border-color 0.1s;
  user-select:   none;
  -webkit-user-select: none;
}

.crop-suggestion-item:last-child { border-bottom: none; }

.crop-suggestion-item:hover,
.crop-suggestion-item:active {
  background:        var(--brand-light);
  border-left-color: var(--brand);
}


/* ─── 22. OBSERVATION TYPE PILLS ──────────────────────── */
/* Used for soil condition + weather event selectors */

.obs-pills {
  display:    flex;
  flex-wrap:  wrap;
  gap:        0.5rem;
  margin-top: 0.25rem;
}

.obs-pill {
  padding:       0.5rem 0.875rem;
  border:        1.5px solid var(--border-solid);
  border-radius: var(--r-full);
  font-size:     0.9375rem;
  font-weight:   500;
  color:         var(--text-2);
  background:    var(--surface);
  cursor:        pointer;
  line-height:   1;
  white-space:   nowrap;
  font-family:   inherit;
  transition:    background 0.15s, border-color 0.15s, color 0.15s;
}

.obs-pill--selected,
.obs-pill:active {
  background:   var(--brand);
  border-color: var(--brand);
  color:        #fff;
}

/* ── Section 22: Observation detail screen ─────────── */

.obs-detail-main {
  flex:       1;
  overflow-y: auto;
  padding:    0 0 88px;
}

.obs-detail-photo-wrap {
  width: 100%;
}

.obs-detail-photo {
  width:       100%;
  height:      220px;
  object-fit:  cover;
  display:     block;
}

.obs-detail-photo--placeholder {
  display:         flex;
  align-items:     center;
  justify-content: center;
  height:          220px;
  background:      #f3f6f3;
  font-size:       3.5rem;
  color:           #ccc;
}

.obs-detail-card {
  background:    #fff;
  margin:        12px 16px;
  padding:       16px;
  border-radius: 16px;
  box-shadow:    0 2px 12px rgba(0,0,0,0.07);
}

.obs-detail-card--ai {
  border-left: 4px solid var(--brand);
}

.obs-detail-card--pending {
  text-align: center;
}

.obs-detail-card__heading {
  font-size:   16px;
  font-weight: 700;
  color:       #111;
  margin:      0 0 10px;
}

.obs-detail-type-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   14px;
  gap:             8px;
}

.obs-detail-type-badge {
  font-size:     13px;
  font-weight:   600;
  color:         #fff;
  padding:       4px 12px;
  border-radius: 20px;
  line-height:   1.5;
}

.obs-detail-field {
  font-size:   14px;
  color:       #555;
  margin:      0 0 8px;
  display:     flex;
  gap:         8px;
  align-items: baseline;
}

.obs-detail-field__label {
  font-weight: 600;
  color:       #333;
  min-width:   72px;
  flex-shrink: 0;
}

.obs-detail-field--notes {
  font-style:   italic;
  color:        #666;
  display:      block;
  margin-top:   10px;
  border-top:   1px solid #f0f4f0;
  padding-top:  10px;
}

.obs-detail-scientific {
  font-style: italic;
  color:      #555;
  font-size:  14px;
  margin:     0 0 8px;
}

.obs-detail-explanation {
  font-size:   14px;
  color:       #555;
  margin:      12px 0 0;
  line-height: 1.55;
}

.obs-detail-pending {
  font-size: 14px;
  color:     #999;
  margin:    0;
  padding:   4px 0;
}

/* Stage 1.8e: detail-screen state-aware cards */
.obs-detail-photo-wrap { position: relative; }

.obs-detail-scan-line {
  position:   absolute;
  left:       0;
  right:      0;
  top:        0;
  height:     3px;
  background: linear-gradient(90deg, transparent, rgba(29,158,117,0.7), transparent);
  animation:  csap-scan-line 2.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes csap-scan-line {
  0%   { transform: translateY(0);     opacity: 0.9; }
  50%  { opacity: 1; }
  100% { transform: translateY(220px); opacity: 0.9; }
}

.obs-detail-card--analysing { text-align: center; }
.obs-detail-analysing-heading {
  font-size:   17px;
  font-weight: 700;
  color:       #111;
  margin:      0 0 6px;
}
.obs-detail-analysing-sub {
  font-size: 14px;
  color:     #666;
  margin:    0 0 14px;
}
.obs-detail-refresh-btn {
  background:      transparent;
  color:           #1D9E75;
  border:          none;
  font-size:       14px;
  font-weight:     600;
  cursor:          pointer;
  padding:         6px 14px;
  text-decoration: underline;
}

.obs-detail-card--expert {
  border-left: 4px solid #F59E0B;
}
.obs-detail-expert-heading {
  font-size:   16px;
  font-weight: 700;
  color:       #92400E;
  margin:      0 0 8px;
}
.obs-detail-expert-body,
.obs-detail-expert-sub {
  font-size:   14px;
  color:       #555;
  margin:      0 0 4px;
  line-height: 1.5;
}

.obs-detail-card--result {
  border-left: 4px solid var(--brand);
}
.obs-detail-result-heading {
  font-size:   16px;
  font-weight: 700;
  color:       #111;
  margin:      0 0 12px;
  line-height: 1.4;
}
.obs-detail-plant {
  font-size:   18px;
  font-weight: 700;
  color:       #111;
  margin:      0 0 8px;
}
.obs-detail-plant-label {
  font-weight: 600;
  color:       #666;
  font-size:   14px;
  margin-right: 6px;
}
.obs-detail-condition {
  font-size: 15px;
  color:     #333;
  margin:    0 0 12px;
}
.obs-detail-section { margin: 14px 0 0; }
.obs-detail-section-label {
  font-size:      13px;
  font-weight:    700;
  color:          #1D9E75;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin:         0 0 6px;
}
.obs-detail-section-body {
  font-size:   14px;
  color:       #444;
  margin:      0;
  line-height: 1.55;
}
.obs-detail-actions {
  margin:      0;
  padding:     0 0 0 20px;
  font-size:   14px;
  color:       #444;
  line-height: 1.55;
}
.obs-detail-actions li { margin-bottom: 4px; }

.obs-detail-feedback {
  margin-top:  16px;
  padding-top: 14px;
  border-top:  1px solid #eef2ef;
}
.obs-detail-feedback-prompt {
  font-size:   14px;
  font-weight: 600;
  color:       #333;
  margin:      0 0 10px;
}
.obs-detail-feedback-btns {
  display:   flex;
  gap:       8px;
  flex-wrap: wrap;
}
.obs-detail-feedback-btn {
  flex:          1 0 auto;
  min-height:    38px;
  padding:       8px 14px;
  font-size:     14px;
  font-weight:   600;
  border-radius: 10px;
  border:        1.5px solid #d1d5db;
  background:    #fff;
  color:         #1f2937;
  cursor:        pointer;
}
.obs-detail-feedback-btn--yes { border-color: #16A34A; color: #16A34A; }
.obs-detail-feedback-btn--no  { border-color: #DC2626; color: #DC2626; }
.obs-detail-feedback-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Stage 1.8a-pt3 polish (Change 9): stack Submit / Cancel vertically so
   they don't overflow on 393 px viewports. */
.obs-detail-feedback-correction {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  margin-top:     10px;
}
.obs-detail-feedback-input {
  width:         100%;
  padding:       9px 12px;
  font-size:     14px;
  border:        1.5px solid #d1d5db;
  border-radius: 10px;
}
.obs-detail-feedback-submit {
  width:         100%;
  background:    var(--brand);
  color:         #fff;
  border:        none;
  padding:       10px 16px;
  font-size:     14px;
  font-weight:   600;
  border-radius: 10px;
  cursor:        pointer;
}
.obs-detail-feedback-cancel {
  width:         100%;
  background:    transparent;
  color:         #6B7280;
  border:        none;
  padding:       8px;
  font-size:     14px;
  font-weight:   500;
  cursor:        pointer;
  text-align:    center;
  text-decoration: underline;
}
.obs-detail-feedback-cancel:hover { color: #1f2937; }

/* Stage 1.8a-pt3 polish (Change 8): collapsible result card.
   Default is collapsed — .obs-detail-card__expanded-only is hidden until
   the user taps the card. Chevron at bottom-right rotates with state. */
.obs-detail-card--result {
  position:       relative;
  cursor:         pointer;
  padding-bottom: 38px;            /* room for the chevron */
}
.obs-detail-card__expanded-only { display: none; }
.obs-detail-card--expanded .obs-detail-card__expanded-only { display: block; }
.obs-detail-card__chevron {
  position:    absolute;
  right:       12px;
  bottom:      8px;
  background:  transparent;
  border:      none;
  font-size:   18px;
  color:       #6B7280;
  cursor:      pointer;
  padding:     4px 10px;
  line-height: 1;
}
.obs-detail-card__chevron:hover { color: #1f2937; }
.obs-detail-card--expanded .obs-detail-card__chevron { color: #1D9E75; }

/* Seasonal note (new in 1.8a-pt3) — only visible in expanded state. */
.obs-detail-seasonal-note {
  font-size:    13px;
  color:        #4B5563;
  background:   #F3FAF6;
  border-left:  3px solid #1D9E75;
  padding:      8px 12px;
  margin:       14px 0 0;
  border-radius: 6px;
  line-height:  1.5;
}

/* Stage 1.8e fix: separated "Help us improve" card with two feedback
   rows (plant_id + classification). Always visible — not gated by the
   collapsible result card. */
.obs-detail-help-card {
  /* Inherits base .obs-detail-card padding/margin/shadow */
  cursor: default;
}
.obs-detail-help-card__heading {
  font-size:      13px;
  font-weight:    700;
  color:          #1D9E75;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin:         0 0 14px;
}

.hu-feedback-row {
  padding-top: 14px;
  border-top:  1px solid #eef2ef;
  margin-top:  14px;
}
.hu-feedback-row:first-of-type {
  padding-top: 0;
  border-top:  none;
  margin-top:  0;
}
.hu-feedback-row--given {
  font-size: 14px;
  color:     #4B5563;
}
.hu-feedback-row--given p { margin: 0; }

.hu-feedback-question {
  font-size:   14px;
  font-weight: 600;
  color:       #333;
  margin:      0 0 10px;
  line-height: 1.4;
}

.hu-feedback-btns {
  display:   flex;
  gap:       8px;
  flex-wrap: wrap;
}
.hu-feedback-btn {
  flex:          1 0 auto;
  min-height:    38px;
  padding:       8px 14px;
  font-size:     14px;
  font-weight:   600;
  border-radius: 10px;
  border:        1.5px solid #d1d5db;
  background:    #fff;
  color:         #1f2937;
  cursor:        pointer;
}
.hu-feedback-btn--yes { border-color: #16A34A; color: #16A34A; }
.hu-feedback-btn--no  { border-color: #DC2626; color: #DC2626; }
.hu-feedback-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.hu-feedback-correction {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  margin-top:     10px;
}
.hu-feedback-input {
  width:         100%;
  padding:       9px 12px;
  font-size:     14px;
  border:        1.5px solid #d1d5db;
  border-radius: 10px;
}
.hu-feedback-submit {
  width:         100%;
  background:    var(--brand);
  color:         #fff;
  border:        none;
  padding:       10px 16px;
  font-size:     14px;
  font-weight:   600;
  border-radius: 10px;
  cursor:        pointer;
}
.hu-feedback-cancel {
  width:         100%;
  background:    transparent;
  color:         #6B7280;
  border:        none;
  padding:       8px;
  font-size:     14px;
  font-weight:   500;
  cursor:        pointer;
  text-align:    center;
  text-decoration: underline;
}
.hu-feedback-cancel:hover { color: #1f2937; }

.obs-detail-feedback--given {
  font-size: 14px;
  color:     #4B5563;
}
.obs-detail-feedback--given p { margin: 0; }


/* ─── 23. PROFILE SCREEN ───────────────────────────── */

/* Scrollable main */
.profile-main {
  flex:           1;
  min-height:     0;
  overflow-y:     auto;
  overflow-x:     hidden;
  padding:        1rem 1rem calc(var(--nav-h) + 1.5rem);
  -webkit-overflow-scrolling: touch;
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}

/* Profile header card */
.profile-header-card {
  display:       flex;
  align-items:   center;
  gap:           1rem;
  background:    var(--surface);
  border-radius: var(--r-lg);
  box-shadow:    var(--shadow-sm);
  padding:       1.25rem 1.125rem;
}

.profile-avatar {
  flex-shrink:     0;
  width:           64px;
  height:          64px;
  border-radius:   50%;
  background:      var(--brand);
  color:           #fff;
  font-size:       1.5rem;
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  letter-spacing:  -0.02em;
}

.profile-info {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            0.25rem;
}

.profile-name-row {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
}

.profile-name {
  font-size:     1.0625rem;
  font-weight:   700;
  color:         var(--text-1);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  max-width:     180px;
}

.profile-edit-btn {
  font-size:   1rem;
  line-height: 1;
  padding:     2px;
  color:       var(--text-3);
  opacity:     0.5;
  cursor:      default;
  flex-shrink: 0;
}

.profile-email {
  font-size:     0.8125rem;
  color:         var(--text-2);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.profile-district {
  font-size:   0.75rem;
  color:       var(--brand);
  font-weight: 600;
  margin-top:  2px;
}

/* Stats row — 3 equal cards */
.profile-stats-row {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   0.625rem;
}

.profile-stat-card {
  background:     var(--surface);
  border-radius:  var(--r-lg);
  box-shadow:     var(--shadow-sm);
  padding:        0.875rem 0.5rem;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.25rem;
  text-align:     center;
}

.profile-stat-card__num {
  font-size:      1.5rem;
  font-weight:    800;
  color:          var(--brand);
  letter-spacing: -0.02em;
  line-height:    1;
}

.profile-stat-card__label {
  font-size:   0.6875rem;
  font-weight: 500;
  color:       var(--text-3);
  line-height: 1.3;
}

/* Section wrapper + heading */
.profile-section__title {
  font-size:      0.6875rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--text-3);
  margin-bottom:  0.5rem;
}

/* Badges — horizontal scroll row */
.profile-badges-scroll {
  overflow-x:                 auto;
  overflow-y:                 visible;
  -webkit-overflow-scrolling: touch;
  padding-bottom:             6px;
}

.profile-badges-row {
  display: flex;
  gap:     0.625rem;
  width:   max-content;
}

.profile-badge-card {
  width:          112px;
  flex-shrink:    0;
  background:     var(--surface);
  border-radius:  var(--r-md);
  box-shadow:     var(--shadow-sm);
  padding:        0.875rem 0.625rem;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.375rem;
  text-align:     center;
  transition:     transform 0.15s;
  cursor:         default;
}

.profile-badge-card:active { transform: scale(0.96); }

.profile-badge-card--locked {
  opacity: 0.45;
  filter:  grayscale(1);
}

.profile-badge-card__icon {
  font-size:   2rem;
  line-height: 1;
}

.profile-badge-card__name {
  font-size:   0.75rem;
  font-weight: 700;
  color:       var(--text-1);
  line-height: 1.2;
}

.profile-badge-card__desc {
  font-size:   0.625rem;
  color:       var(--text-3);
  line-height: 1.3;
}

/* Connected stations — empty state */
.profile-stations-empty {
  background:     var(--surface);
  border-radius:  var(--r-lg);
  box-shadow:     var(--shadow-sm);
  padding:        2rem 1.25rem;
  text-align:     center;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.625rem;
}

.profile-stations-empty__icon   { font-size: 2.5rem; line-height: 1; }

.profile-stations-empty__heading {
  font-size:   1rem;
  font-weight: 700;
  color:       var(--text-1);
}

.profile-stations-empty__sub {
  font-size:     0.875rem;
  color:         var(--text-2);
  line-height:   1.5;
  max-width:     260px;
  margin-bottom: 0.5rem;
}

/* Station list (when stations exist) */
.profile-stations-list {
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
  margin-bottom:  0.75rem;
}

.profile-station-row {
  background:      var(--surface);
  border-radius:   var(--r-md);
  box-shadow:      var(--shadow-sm);
  padding:         0.875rem 1rem;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             0.75rem;
}

.profile-station-row__info {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            0.2rem;
}

.profile-station-row__name {
  font-size:   0.9375rem;
  font-weight: 700;
  color:       var(--text-1);
}

.profile-station-row__mac {
  font-size:   0.75rem;
  color:       var(--text-3);
  font-family: var(--font-mono);
}

.profile-station-row__last {
  font-size: 0.75rem;
  color:     var(--text-2);
}

.profile-station-row__right {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  flex-shrink: 0;
}

.profile-station-dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  flex-shrink:   0;
}

.profile-station-dot--green { background: #10B981; }
.profile-station-dot--amber { background: #F59E0B; }

.profile-add-station-link {
  display:      block;
  text-align:   center;
  font-size:    0.9375rem;
  font-weight:  600;
  color:        var(--brand);
  padding:      0.75rem;
  background:   none;
  border:       none;
  cursor:       pointer;
  font-family:  inherit;
  width:        100%;
}

/* Preferences card */
.profile-prefs-card {
  background:    var(--surface);
  border-radius: var(--r-lg);
  box-shadow:    var(--shadow-sm);
  overflow:      hidden;
}

.profile-pref-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  padding:         0.9375rem 1rem;
  border-bottom:   0.5px solid var(--border);
}

.profile-pref-row:last-child { border-bottom: none; }

.profile-pref-row__body {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            0.2rem;
}

.profile-pref-row__label {
  font-size:   0.9375rem;
  font-weight: 600;
  color:       var(--text-1);
}

.profile-pref-row__sub {
  font-size: 0.75rem;
  color:     var(--text-3);
}

/* CSS toggle switch */
.profile-toggle {
  position:    relative;
  display:     inline-block;
  width:       44px;
  height:      26px;
  flex-shrink: 0;
  cursor:      pointer;
}

.profile-toggle input {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}

.profile-toggle__track {
  position:      absolute;
  inset:         0;
  background:    #D1D5DB;
  border-radius: var(--r-full);
  transition:    background 0.2s;
  cursor:        pointer;
}

.profile-toggle__track::before {
  content:       '';
  position:      absolute;
  left:          3px;
  top:           3px;
  width:         20px;
  height:        20px;
  background:    #fff;
  border-radius: 50%;
  transition:    transform 0.2s;
  box-shadow:    0 1px 3px rgba(0, 0, 0, 0.2);
}

.profile-toggle input:checked + .profile-toggle__track             { background: var(--brand); }
.profile-toggle input:checked + .profile-toggle__track::before     { transform: translateX(18px); }
.profile-toggle input:focus-visible + .profile-toggle__track       { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Account card */
.profile-account-card {
  background:    var(--surface);
  border-radius: var(--r-lg);
  box-shadow:    var(--shadow-sm);
  padding:       0 1rem 1rem;
}

.profile-account-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0.875rem 0;
  border-bottom:   0.5px solid var(--border);
  font-size:       0.9375rem;
}

.profile-account-row__label { color: var(--text-2); font-weight: 500; }
.profile-account-row__value { color: var(--text-1); font-weight: 600; }

.profile-account-divider {
  height:     0.5px;
  background: var(--border-solid);
  margin:     0.75rem 0;
}

.profile-delete-link {
  display:         block;
  text-align:      center;
  font-size:       0.8125rem;
  color:           var(--text-3);
  background:      none;
  border:          none;
  padding:         0.5rem;
  cursor:          pointer;
  font-family:     inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  width:           100%;
  margin-top:      4px;
}


/* ─── 24. MODALS ────────────────────────────────────── */

.modal-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0, 0, 0, 0.45);
  z-index:         500;
  display:         flex;
  align-items:     flex-end;
  justify-content: center;
}

.modal-overlay.hidden { display: none; }

.modal-card {
  background:    var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow:    var(--shadow-lg);
  width:         100%;
  max-width:     var(--max-w);
  max-height:    90vh;
  overflow-y:    auto;
  padding:       1.5rem 1.25rem 2.5rem;
  -webkit-overflow-scrolling: touch;
}

.modal-card__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   1.25rem;
}

.modal-card__title {
  font-size:   1.125rem;
  font-weight: 800;
  color:       var(--text-1);
}

.modal-card__close {
  font-size:   1.25rem;
  color:       var(--text-3);
  padding:     4px 8px;
  background:  none;
  border:      none;
  cursor:      pointer;
  font-family: inherit;
  line-height: 1;
}

.modal-card form {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
  margin-bottom:  1.25rem;
}

.modal-card__actions {
  display: flex;
  gap:     0.625rem;
}

/* Station help blocks */
.station-help-toggle {
  font-size:       0.8125rem;
  color:           var(--brand);
  background:      none;
  border:          none;
  padding:         0.25rem 0;
  cursor:          pointer;
  font-family:     inherit;
  text-align:      left;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-top:      4px;
}

.station-help-block {
  font-size:     0.8125rem;
  color:         var(--text-2);
  background:    var(--bg);
  border-radius: var(--r-sm);
  padding:       0.75rem;
  line-height:   1.5;
  margin-top:    0.25rem;
}

.station-help-steps {
  list-style:     decimal;
  padding-left:   1.25rem;
  display:        flex;
  flex-direction: column;
  gap:            0.375rem;
}

.station-apikey-wrap {
  display: flex;
  gap:     0.5rem;
}

.station-apikey-wrap .form-field__input { flex: 1; min-width: 0; }

.station-apikey-toggle {
  font-size:     0.8125rem;
  font-weight:   600;
  color:         var(--brand);
  background:    var(--brand-light);
  border:        none;
  border-radius: var(--r-sm);
  padding:       0 0.75rem;
  cursor:        pointer;
  font-family:   inherit;
  flex-shrink:   0;
  height:        44px;
}

.station-error {
  font-size:   0.875rem;
  color:       #DC2626;
  font-weight: 500;
  margin:      0;
}

.station-success {
  font-size:   0.875rem;
  color:       #059669;
  font-weight: 600;
  margin:      0;
}

.modal-delete-body {
  font-size:     0.9375rem;
  color:         var(--text-2);
  line-height:   1.6;
  margin-bottom: 1.25rem;
}


/* ─── 24. WELCOME CAROUSEL (cold-user activation) ─────── */

.welcome-skip {
  position:    absolute;
  top:         18px;
  right:       18px;
  z-index:     10;
  background:  transparent;
  border:      none;
  color:       var(--text-2);
  font-size:   14px;
  font-weight: 600;
  cursor:      pointer;
  padding:     8px 12px;
  border-radius: var(--r-sm);
}
.welcome-skip:hover  { color: var(--text-1); }
.welcome-skip:active { color: var(--text-1); background: rgba(0,0,0,0.04); }

.welcome-carousel {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  width:           100%;
  max-width:       var(--max-w);
  padding:         48px 24px 0;
  overflow:        hidden;
  touch-action:    pan-y;
  -webkit-user-select: none;
  user-select:     none;
}

.welcome-slide {
  display:        none;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  width:          100%;
}
.welcome-slide--active {
  display:   flex;
  animation: welcomeSlideIn 0.35s var(--ease) both;
}

.welcome-slide__art {
  width:         220px;
  height:        220px;
  margin-bottom: 32px;
}
.welcome-svg {
  width:  100%;
  height: 100%;
  display: block;
}

.welcome-slide__headline {
  font-size:      24px;
  font-weight:    800;
  color:          var(--text-1);
  line-height:    1.25;
  margin:         0 0 14px;
  letter-spacing: -0.01em;
  max-width:      340px;
}

.welcome-slide__sub {
  font-size:   15px;
  color:       var(--text-2);
  line-height: 1.55;
  margin:      0;
  max-width:   320px;
}

.welcome-dots {
  display:         flex;
  justify-content: center;
  gap:             8px;
  margin:          32px 0 24px;
}
.welcome-dot {
  width:         8px;
  height:        8px;
  border-radius: var(--r-full);
  background:    rgba(0,0,0,0.15);
  border:        none;
  padding:       0;
  cursor:        pointer;
  transition:    width 0.22s var(--ease), background 0.22s var(--ease);
}
.welcome-dot--active {
  width:         24px;
  border-radius: 4px;
  background:    var(--brand);
}

.welcome-actions {
  width:           100%;
  max-width:       var(--max-w);
  padding:         0 24px 32px;
  padding-bottom:  calc(32px + env(safe-area-inset-bottom, 0px));
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             10px;
}

.btn-text {
  background:     transparent;
  border:         none;
  color:          var(--brand);
  font-size:      15px;
  font-weight:    600;
  padding:        8px 12px;
  cursor:         pointer;
  text-decoration: underline;
}
.btn-text:hover { color: var(--brand-dark); }

/* Slide-1 alert pulse rings — two staggered rings around the alert dot.
   transform-box: fill-box lets the SVG element use its own bounding box
   so transform-origin: center scales around the ring's centre. */
.welcome-pulse-ring {
  transform-box:    fill-box;
  transform-origin: center;
  animation:        welcome-pulse 2.2s ease-out infinite;
  opacity:          0;
}
.welcome-pulse-ring--2 { animation-delay: 1.1s; }

@keyframes welcome-pulse {
  0%   { transform: scale(0.55); opacity: 0.85; }
  100% { transform: scale(2.4);  opacity: 0;    }
}

@keyframes welcomeSlideIn {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: none;             }
}