/*  iOS-Native polish layer — loaded LAST, overrides atelier/refine/polish.
    Gemini redesign review items:
      #1  Force SF system sans everywhere (Google Fonts link removed).
      #3  Frosted chrome on .ll-header, .ll-tabbar, .ll-timerbar.
      #4  Large iOS titles on .ll-view-head h1.
      #5  Inset-grouped .ll-card / .sd-panel on iOS system-gray body bg.
      #6  Hairline separators between .sd-insights-grid / .sd-results-grid rows.
      #7  Native segmented-control pill on .ll-segmented (Metric/Imperial etc).
      #8  Tap highlight states on buttons and pressable rows.
      #9  Bottom-sheet polish for #diarySheet (tighter radius, iOS drag handle, spring).
     #10  (JS) Capacitor-aware haptic() in js/sourdough/app.js.
*/

/* ---------- iOS design tokens --------------------------------------------- */
:root {
  --ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
              system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Type ramp (Apple HIG, with tracking baked into letter-spacing) */
  --ios-type-large-title: 700 34px/41px var(--ios-font);
  --ios-track-large-title: 0.37px;
  --ios-type-title1:      700 28px/34px var(--ios-font);
  --ios-track-title1:     0.36px;
  --ios-type-title2:      600 22px/28px var(--ios-font);
  --ios-track-title2:     0.35px;
  --ios-type-headline:    600 17px/22px var(--ios-font);
  --ios-track-headline:  -0.41px;
  --ios-type-body:        400 17px/22px var(--ios-font);
  --ios-track-body:      -0.41px;
  --ios-type-subhead:     400 15px/20px var(--ios-font);
  --ios-track-subhead:   -0.24px;
  --ios-type-footnote:    400 13px/18px var(--ios-font);
  --ios-track-footnote:  -0.08px;

  /* System colors (light) — warmed to kitchen / baking tones (flour, cream,
     warm charcoal) instead of stock-iOS cool gray/white/black. The terracotta
     accent is the brand and stays put. */
  --ios-bg-system:   #ECE3D2;  /* warm flour behind cards */
  --ios-bg-grouped:  #FBF7EF;  /* soft cream card */
  --ios-separator:   rgba(74, 58, 48, 0.22);
  --ios-text-1:      #2A2320;  /* warm charcoal (not pure black) */
  --ios-text-2:      #6E6257;  /* warm taupe — also lifts secondary-text contrast */
  --ios-fill:        rgba(120, 90, 55, 0.10);
  --ios-accent:      #c14628;

  /* Chrome translucency + motion */
  --ios-chrome-bg:   rgba(250, 244, 233, 0.82);  /* warm frosted cream */
  --ios-ease:        cubic-bezier(0.32, 0.72, 0, 1);
  --ios-spring:      cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
[data-theme="dark"] {
  --ios-bg-system:   #000000;
  --ios-bg-grouped:  #1C1C1E;
  --ios-separator:   rgba(84, 84, 88, 0.60);
  --ios-text-1:      #FFFFFF;
  --ios-text-2:      #8E8E93;
  --ios-fill:        rgba(118, 118, 128, 0.24);
  --ios-chrome-bg:   rgba(28, 28, 30, 0.75);
}

/* Rebind the legacy sourdough-v2 palette to iOS tokens so cards that read
   `--bg-card`, `--bg`, `--border`, `--text` natively look iOS. */
:root,
[data-theme="light"],
[data-theme="dark"] {
  --bg:           var(--ios-bg-system);
  --bg-card:      var(--ios-bg-grouped);
  --bg-secondary: var(--ios-fill);
  --border:       var(--ios-separator);
  --text:         var(--ios-text-1);
  --text-secondary: var(--ios-text-2);
  --surface-shadow: none;
}

/* ---------- #1 Force SF system sans everywhere ---------------------------- */
/* atelier.css uses many `!important` rules forcing Fraunces / Instrument Serif /
   JetBrains Mono. Without the Google Fonts link those fell back to generic
   serif/monospace — not what we want for iOS. Override with equal force. */
html,
body.ll-body,
.ll-body input,
.ll-body textarea,
.ll-body select,
.ll-body button,
.ll-body *,
.ll-body *::before,
.ll-body *::after {
  font-family: var(--ios-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Preserve tabular numerals on timers and metric readouts */
.ll-body .ll-timerbar-clock,
.ll-body .ll-ktimers-count,
.ll-body .sd-metric-value,
.ll-body .sd-metric-big,
.ll-body .ll-live-clock,
.ll-body [data-atl-num] {
  font-feature-settings: "tnum" 1, "cv11" 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ---------- #5 Body bg = iOS system gray (light) / black (dark) ----------- */
html, body, body.ll-body {
  background: var(--ios-bg-system) !important;
  background-image: none !important;
  background-attachment: initial !important;
}
body.ll-body { color: var(--ios-text-1) !important; }
/* Kill atelier's paper-grain overlays (fixed SVG noise + radial vignette) */
body.ll-body::before,
body.ll-body::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* ---------- #3 Frosted header --------------------------------------------- */
.ll-body .ll-header {
  background: var(--ios-chrome-bg) !important;
  border-bottom: 0.5px solid var(--ios-separator) !important;
  box-shadow: none !important;
  padding-top: max(env(safe-area-inset-top), 12px) !important;
}
@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .ll-body .ll-header {
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}
/* Remove atelier's decorative header underline */
.ll-body .ll-header-inner::before { display: none !important; }

/* Brand treatment: neat SF pairing, no serif italic */
.ll-body .ll-brand,
.ll-body .ll-brand-text,
.ll-body .ll-brand-text em {
  font-family: var(--ios-font) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}
.ll-body .ll-brand-text em { font-weight: 400 !important; color: var(--ios-text-2); }

/* ---------- #3 Frosted tab bar -------------------------------------------- */
.ll-body .ll-tabbar {
  background: var(--ios-chrome-bg) !important;
  border-top: 0.5px solid var(--ios-separator) !important;
  box-shadow: none !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
}
@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .ll-body .ll-tabbar {
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}
/* iOS tab labels: 10px, tight, no italic */
.ll-body .ll-tabbar button,
.ll-body .ll-tabbar a {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06px !important;
  font-style: normal !important;
}

/* ---------- #3 Frosted bulk-fermentation timer bar ------------------------ */
.ll-body .ll-timerbar {
  background: var(--ios-chrome-bg) !important;
  border-bottom: 0.5px solid var(--ios-separator) !important;
  box-shadow: none !important;
}
@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .ll-body .ll-timerbar {
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}
.ll-body .ll-timerbar-clock {
  letter-spacing: -0.02em !important;
  font-weight: 500 !important;
}

/* ---------- #4 Large title on each view head ------------------------------ */
.ll-body .ll-view-head {
  margin: 4px 0 14px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
/* iOS "eyebrow" — uppercase footnote right above the large title */
.ll-body .ll-view-head .ll-view-eyebrow {
  font: var(--ios-type-footnote) !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--ios-accent) !important;
  margin: 0 0 2px 0 !important;
}
.ll-body .ll-view-head h1 {
  font: var(--ios-type-large-title) !important;
  letter-spacing: var(--ios-track-large-title) !important;
  color: var(--ios-text-1) !important;
  margin: 0 0 6px 0 !important;
  font-style: normal !important;
}
.ll-body .ll-view-head p,
.ll-body .ll-view-head .ll-view-sub,
.ll-body .ll-view-head .ll-view-subtitle {
  font: var(--ios-type-subhead) !important;
  letter-spacing: var(--ios-track-subhead) !important;
  color: var(--ios-text-2) !important;
  font-style: normal !important;
  margin: 0 !important;
}
/* Plain summary (dynamic body copy) — slightly darker than subhead */
.ll-body #plainSummary {
  font: var(--ios-type-body) !important;
  letter-spacing: var(--ios-track-body) !important;
  color: var(--ios-text-2) !important;
  margin: 2px 2px 14px 2px !important;
}

/* ---------- #5 Inset-grouped cards (iOS Settings-style) ------------------- */
.ll-body .ll-card,
.ll-body .sd-panel {
  background: var(--ios-bg-grouped) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  margin: 10px 0 !important;
  padding: 14px 16px !important;
}
/* Strip decorative overlays atelier.css paints on cards */
.ll-body .ll-card::before,
.ll-body .ll-card::after,
.ll-body .sd-panel::before,
.ll-body .sd-panel::after { display: none !important; }
.ll-body .sd-panel-head,
.ll-body .ll-card-head {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 8px !important;
}
/* iOS section-header tone for card titles, no rotated-square bullet */
.ll-body .ll-card-title,
.ll-body .sd-panel h2,
.ll-body .sd-panel h3,
.ll-body .sd-panel-head .sd-panel-title {
  font: var(--ios-type-headline) !important;
  letter-spacing: var(--ios-track-headline) !important;
  color: var(--ios-text-1) !important;
  margin: 0 0 6px 0 !important;
  font-style: normal !important;
}.ll-body .ll-card-title::before, .ll-body .ll-card .ll-card-title::before {
  display: none !important;
  content: none !important;
}

/* Body text inside cards = iOS Body */
.ll-body .ll-card p,
.ll-body .sd-panel p {
  font: var(--ios-type-body) !important;
  letter-spacing: var(--ios-track-body) !important;
  color: var(--ios-text-1) !important;
}

/* ---------- Hero card (#planHero) → flat inset-grouped iOS card ---------- */
.ll-body .ll-hero,
.ll-body #planHero.ll-hero {
  background: var(--ios-bg-grouped) !important;
  color: var(--ios-text-1) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  padding: 16px !important;
  margin: 10px 0 !important;
  overflow: visible !important;
}
.ll-body .ll-hero::before,
.ll-body .ll-hero::after,
.ll-body #planHero.ll-hero::before,
.ll-body #planHero.ll-hero::after { display: none !important; content: none !important; }

.ll-body .ll-hero-label {
  font: var(--ios-type-footnote) !important;
  letter-spacing: var(--ios-track-footnote) !important;
  color: var(--ios-text-2) !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}
.ll-body .ll-hero-value {
  font: var(--ios-type-title1) !important;
  letter-spacing: var(--ios-track-title1) !important;
  color: var(--ios-accent) !important;
  margin: 4px 0 8px 0 !important;
  line-height: 1.1 !important;
}
.ll-body .ll-hero-sub {
  font: var(--ios-type-subhead) !important;
  letter-spacing: var(--ios-track-subhead) !important;
  color: var(--ios-text-2) !important;
  opacity: 1 !important;
  gap: 14px !important;
}
.ll-body .ll-hero-sub strong {
  color: var(--ios-text-1) !important;
  font-weight: 600 !important;
}

/* Kill the "Start" card's accent-gradient background too */
.ll-body .ll-start-card {
  background: var(--ios-bg-grouped) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.ll-body .ll-start-btn {
  background: var(--ios-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}

/* ---------- #9 Bottom sheet polish: #diarySheet --------------------------- */
.ll-body #diarySheet.ll-sheet {
  background: var(--ios-bg-grouped) !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18) !important;
  transition: transform 400ms var(--ios-spring) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
.ll-body #diarySheet.ll-sheet .ll-drawer-head {
  border-bottom: 0.5px solid var(--ios-separator) !important;
  padding: 20px 16px 12px !important;
}
/* iOS-spec drag handle: 36×5, rounded 2.5px, centered */
.ll-body #diarySheet.ll-sheet .ll-drawer-head::before {
  width: 36px !important;
  height: 5px !important;
  border-radius: 2.5px !important;
  top: 6px !important;
  background: var(--ios-separator) !important;
  opacity: 1 !important;
}
.ll-body #diarySheet.ll-sheet .ll-drawer-head h2 {
  font: var(--ios-type-headline) !important;
  letter-spacing: var(--ios-track-headline) !important;
  font-style: normal !important;
  color: var(--ios-text-1) !important;
}

/* ---------- Button & input finish for iOS consistency --------------------- */
.ll-body .btn,
.ll-body .btn-primary,
.ll-body .ll-btn,
.ll-body .ll-btn-primary {
  font-weight: 600 !important;
  font-size: 17px !important;
  letter-spacing: -0.41px !important;
  border-radius: 10px !important;
  transition: opacity 200ms var(--ios-ease), background-color 200ms var(--ios-ease) !important;
}
.ll-body .btn-primary,
.ll-body .ll-btn-primary {
  background: var(--ios-accent) !important;
  color: #fff !important;
  border: none !important;
}
/* (press states live in section #8 — one system, one place) */

/* Inputs: flat iOS style inside inset-grouped cards */
.ll-body input[type="number"],
.ll-body input[type="text"],
.ll-body input[type="search"],
.ll-body input[type="datetime-local"],
.ll-body input[type="date"],
.ll-body select,
.ll-body textarea {
  background: var(--ios-fill) !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--ios-text-1) !important;
  font-size: 17px !important;
  letter-spacing: -0.41px !important;
}

/* iOS-style focus ring */
.ll-body :focus-visible {
  outline: 2px solid var(--ios-accent) !important;
  outline-offset: 2px !important;
  border-radius: 6px !important;
}

/* ---------- #6 Hairline separators inside grid-style cards --------------- */
/* The Formula-analysis + Dough-weights cards each hold a grid of rows.
   Render them as a single inset-grouped list (flat rows + hairlines) rather
   than a grid of mini-cards — matches iOS Settings. */
.ll-body .sd-insights-grid,
.ll-body .sd-results-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 -16px !important;   /* bleed to card edge so hairlines match iOS */
}
.ll-body .sd-insights-grid > .sd-insight-card,
.ll-body .sd-results-grid > .sd-result-card {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: baseline !important;
  column-gap: 12px !important;
  padding: 12px 16px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative !important;
}
/* iOS hairline: 0.5 px, inset 16 px from the left */
.ll-body .sd-insights-grid > .sd-insight-card:not(:last-child)::after,
.ll-body .sd-results-grid > .sd-result-card:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 16px; right: 0; bottom: 0;
  height: 0.5px;
  background: var(--ios-separator);
  pointer-events: none;
}
/* Label + value row typography */
.ll-body .sd-insights-grid > .sd-insight-card > span,
.ll-body .sd-results-grid > .sd-result-card > span {
  font: var(--ios-type-body) !important;
  letter-spacing: var(--ios-track-body) !important;
  color: var(--ios-text-1) !important;
  grid-column: 1 !important;
}
.ll-body .sd-insights-grid > .sd-insight-card > strong,
.ll-body .sd-results-grid > .sd-result-card > strong {
  font: var(--ios-type-body) !important;
  letter-spacing: var(--ios-track-body) !important;
  color: var(--ios-text-2) !important;
  font-weight: 400 !important;
  text-align: right !important;
  grid-column: 2 !important;
}
/* Helper paragraph under an insight row goes to its own line under label */
.ll-body .sd-insights-grid > .sd-insight-card > p {
  grid-column: 1 / -1 !important;
  font: var(--ios-type-footnote) !important;
  letter-spacing: var(--ios-track-footnote) !important;
  color: var(--ios-text-2) !important;
  margin: 2px 0 0 0 !important;
}
/* Caution rows get a tint + warning accent on the value */
.ll-body .sd-insight-card.is-caution > strong { color: var(--ios-accent) !important; }

/* ---------- #7 Native segmented control pill (.ll-segmented) ------------- */
.ll-body .ll-segmented {
  display: inline-flex !important;
  padding: 2px !important;
  background: var(--ios-fill) !important;
  border-radius: 9px !important;
  border: none !important;
  gap: 0 !important;
  position: relative !important;
  isolation: isolate;
}
.ll-body .ll-segmented button {
  flex: 1 1 auto !important;
  min-height: 28px !important;
  padding: 4px 14px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 7px !important;
  color: var(--ios-text-1) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -0.08px !important;
  cursor: pointer !important;
  transition: background-color 180ms var(--ios-ease),
              box-shadow 180ms var(--ios-ease),
              font-weight 120ms linear !important;
  position: relative;
  z-index: 1;
}
.ll-body .ll-segmented button[aria-pressed="true"],
.ll-body .ll-segmented button.is-active {
  background: var(--ios-bg-grouped) !important;
  color: var(--ios-text-1) !important;
  font-weight: 600 !important;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.12),
    0 3px 1px rgba(0, 0, 0, 0.04) !important;
}
[data-theme="dark"] .ll-body .ll-segmented button[aria-pressed="true"],
[data-theme="dark"] .ll-body .ll-segmented button.is-active {
  background: #636366 !important;   /* iOS dark pill — slightly lifted gray */
  box-shadow: none !important;
}
/* Thin divider between inactive buttons (iOS shows when neither has pill) */
.ll-body .ll-segmented button + button::before {
  content: "";
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: var(--ios-separator);
  z-index: 0;
  opacity: 0.7;
  transition: opacity 120ms linear;
}
.ll-body .ll-segmented button[aria-pressed="true"]::before,
.ll-body .ll-segmented button[aria-pressed="true"] + button::before,
.ll-body .ll-segmented button.is-active::before,
.ll-body .ll-segmented button.is-active + button::before { opacity: 0; }

/* ---------- #8 Tap highlight / press states ------------------------------- */
/* ONE pressed-state system for every tappable control (native-feel A5).
   All press states live HERE and only here. Legacy :active rules in earlier
   layers (base/motion/app-shell/sourdough-v2) are transform-only and are
   neutralized by the !important declarations below — do not add new :active
   rules outside this section.
     Tier A  every <button> (default)            -> iOS dim (opacity .62)
     Tier B  list rows / chips / <summary> rows  -> iOS cell tint (no dim)
     Tier C  large tappable cards & hero CTAs    -> card squash scale(.98)
   Press-in is instant (transition: none), matching UIKit. If QA ever sees
   :active flashes while flick-scrolling the board/diary/kiosk lists, the
   fix is a `transition: background-color 0s linear 65ms` style delay on
   Tiers B/C (iOS's own delayed-highlight trick) — deliberately not shipped. */

/* Touch-highlight suppression: Safari default is an ugly blue box. */
.ll-body * { -webkit-tap-highlight-color: transparent; }

/* Tier A — generic dim. Covers ALL buttons: tabs, icon-btns, steppers,
   segmented options, live/lane/board/kiosk/pager/nudge/star/swatch/iconpick
   buttons, the .btn family, wizard back/skip, info dots... present and future. */
.ll-body button:active {
  opacity: 0.62 !important;
  transform: none !important;   /* neutralizes legacy scale() press rules in earlier layers */
  transition: none !important;  /* press-in is instant */
}

/* Tier B — tinted rows (iOS table-cell highlight; full opacity, no scale). */
.ll-body details > summary:active,
.ll-body .sd-insight-card:active,
.ll-body .sd-result-card:active,
.ll-body .ll-levain-saved-main:active {
  background: rgba(0, 0, 0, 0.05) !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
[data-theme="dark"] .ll-body details > summary:active,
[data-theme="dark"] .ll-body .sd-insight-card:active,
[data-theme="dark"] .ll-body .sd-result-card:active,
[data-theme="dark"] .ll-body .ll-levain-saved-main:active {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Tier B — chips toggle-fill like iOS (covers .ll-notify-chip via .sd-chip). */
.ll-body .sd-chip:active,
.ll-body .ll-chip:active,
.ll-body .ll-preset-chip:active,
.ll-body .ll-slider-value:active {
  background: var(--ios-fill) !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Tier C — card squash for large tappable surfaces (diary cards, board
   lanes, kiosk tiles, wizard choice cards, hero CTAs). Kept at a quiet 0.98
   so a stray :active flash during a scroll flick reads as nothing. */
.ll-body .ll-diary-card:active,
.ll-body .ll-sheet-reuse:active,
.ll-body .ll-sheet-addphoto:active,
.ll-body .ll-timerbar-body:active,
.ll-body .ll-lane-main:active,
.ll-body .ll-kiosk-prod:active,
.ll-body .ll-kiosk-cta:active,
.ll-body .ll-start-bake-cta:active,
.ll-body .ll-start-btn:active,
.ll-body .ll-wizard-card:active,
.ll-body .ll-wizard-bigchip:active,
.ll-body .ll-goal-chip:active,
.ll-body .ll-ts-answer:active,
.ll-body .ll-firstbake-entry:active,
.ll-body .ll-hero-alert-btn:active {
  transform: scale(0.98) !important;
  opacity: 1 !important;
  transition: none !important;
}

/* Reduced motion: cards fall back to the Tier-A dim (opacity is not motion). */
@media (prefers-reduced-motion: reduce) {
  .ll-body .ll-diary-card:active,
  .ll-body .ll-sheet-reuse:active,
  .ll-body .ll-sheet-addphoto:active,
  .ll-body .ll-timerbar-body:active,
  .ll-body .ll-lane-main:active,
  .ll-body .ll-kiosk-prod:active,
  .ll-body .ll-kiosk-cta:active,
  .ll-body .ll-start-bake-cta:active,
  .ll-body .ll-start-btn:active,
  .ll-body .ll-wizard-card:active,
  .ll-body .ll-wizard-bigchip:active,
  .ll-body .ll-goal-chip:active,
  .ll-body .ll-ts-answer:active,
  .ll-body .ll-firstbake-entry:active,
  .ll-body .ll-hero-alert-btn:active {
    transform: none !important;
    opacity: 0.62 !important;
  }
}

/* Disclosure rows keep pointer affordance (press tint handled in Tier B). */
.ll-body details > summary {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- iOS-style slider thumb --------------------------------------- */
/* 28 px white circle with a soft two-step shadow and no orange ring —
   matches the iOS slider from Control Center / Settings. */
.ll-body .ll-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  border: 0.5px solid rgba(0, 0, 0, 0.04) !important;
  margin-top: -11px !important;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.08),
    0 3px 8px rgba(0, 0, 0, 0.12),
    0 0.5px 4px rgba(0, 0, 0, 0.12) !important;
  transition: transform 160ms var(--ios-ease) !important;
  cursor: grab;
}
.ll-body .ll-slider input[type="range"]::-moz-range-thumb {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  border: 0.5px solid rgba(0, 0, 0, 0.04) !important;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.08),
    0 3px 8px rgba(0, 0, 0, 0.12) !important;
  cursor: grab;
}
.ll-body .ll-slider input[type="range"]:active::-webkit-slider-thumb,
.ll-body .ll-slider input[type="range"]:active::-moz-range-thumb {
  transform: scale(1.08) !important;
  cursor: grabbing;
}
[data-theme="dark"] .ll-body .ll-slider input[type="range"]::-webkit-slider-thumb,
[data-theme="dark"] .ll-body .ll-slider input[type="range"]::-moz-range-thumb {
  background: #FFFFFF !important;   /* iOS keeps the thumb white in dark mode */
  border-color: rgba(0, 0, 0, 0.4) !important;
}

/* Slider track: 4 px rounded, filled up to the thumb position.
   The legacy implementation uses a ::before (track) + ::after (fill) on
   .ll-slider-track; we just restyle the colors + radii here. */
.ll-body .ll-slider-track::before {
  height: 4px !important;
  border-radius: 2px !important;
  background: var(--ios-fill) !important;
}
.ll-body .ll-slider-track::after {
  height: 4px !important;
  border-radius: 2px !important;
  background: var(--ios-accent) !important;
}

/* ---------- Hero-sub layout: three stacked rows, no dot separators ------- */
.ll-body .ll-hero-sub {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px 12px !important;
  align-items: start !important;
}
.ll-body .ll-hero-sub > span {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  border: none !important;
}
.ll-body .ll-hero-sub > span::before { display: none !important; content: none !important; }
.ll-body .ll-hero-sub small {
  font: var(--ios-type-footnote) !important;
  letter-spacing: var(--ios-track-footnote) !important;
  color: var(--ios-text-2) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
.ll-body .ll-hero-sub strong {
  font: var(--ios-type-headline) !important;
  letter-spacing: var(--ios-track-headline) !important;
  color: var(--ios-text-1) !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

/* ---------- FAQ accordion: +/- → rotating chevron ------------------------- */
.ll-body .faq-item { border-bottom: 0.5px solid var(--ios-separator) !important; }
.ll-body .faq-question {
  font: var(--ios-type-body) !important;
  letter-spacing: var(--ios-track-body) !important;
  color: var(--ios-text-1) !important;
  padding: 14px 0 !important;
  font-weight: 500 !important;
}
.ll-body .faq-question::after {
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  border-right: 2px solid var(--ios-text-2) !important;
  border-bottom: 2px solid var(--ios-text-2) !important;
  transform: rotate(-45deg) translate(-2px, -2px);
  transition: transform 240ms var(--ios-ease);
  color: transparent;
}
.ll-body .faq-item.open .faq-question::after {
  content: "" !important;
  transform: rotate(45deg) translate(-2px, -2px);
}
.ll-body .faq-answer {
  font: var(--ios-type-subhead) !important;
  letter-spacing: var(--ios-track-subhead) !important;
  color: var(--ios-text-2) !important;
}

/* Help-drawer FAQ variant (uses different markup — <details> or custom) */
.ll-body [role="group"] > [data-expandable],
.ll-body .ll-help-item { border-bottom: 0.5px solid var(--ios-separator) !important; }

/* ---------- Scroll-collapsed header title -------------------------------- */
/* Default (before scroll): brand text visible, header-title invisible.
   On body.is-scrolled: brand fades + the inline title swaps in. */
.ll-body .ll-header-inner { position: relative; }
.ll-body .ll-header-title {
  position: absolute !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 8px));
  opacity: 0;
  font: var(--ios-type-headline) !important;
  letter-spacing: var(--ios-track-headline) !important;
  color: var(--ios-text-1) !important;
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100% - 160px);
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 220ms var(--ios-ease),
              transform 260ms var(--ios-ease);
  z-index: 1;
}
.ll-body.is-scrolled .ll-header-title {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.ll-body .ll-brand-text {
  transition: opacity 200ms var(--ios-ease),
              transform 220ms var(--ios-ease);
}
.ll-body.is-scrolled .ll-brand-text {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
/* Brand mark (the "L" square) stays visible as an app-identity anchor. */

/* ---------- "Using defaults" → iOS disclosure list ----------------------- */
/* Rebuild `.sd-chip-row` as a vertical flat list, one row per default. Kills
   the wrap-to-pill layout and the inline-style background on `.sd-chip`. */
.ll-body .sd-chip-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 -16px !important;
}
.ll-body .sd-chip.ll-default-row {
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  align-items: center !important;
  column-gap: 10px !important;
  padding: 12px 16px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font: var(--ios-type-body) !important;
  letter-spacing: var(--ios-track-body) !important;
  color: var(--ios-text-1) !important;
  text-align: left !important;
  cursor: pointer;
  position: relative;
  width: 100%;
  /* Override the inline background/radius/font-family/font-size injected by
     app.js:465 — inline styles win on specificity, so !important is required. */
  font-family: var(--ios-font) !important;
  font-size: 17px !important;
}
.ll-body .sd-chip.ll-default-row:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 16px; right: 0; bottom: 0;
  height: 0.5px;
  background: var(--ios-separator);
  pointer-events: none;
}
.ll-body .sd-chip.ll-default-row .ll-default-name {
  font: var(--ios-type-body) !important;
  letter-spacing: var(--ios-track-body) !important;
  color: var(--ios-text-1) !important;
}
.ll-body .sd-chip.ll-default-row .ll-default-value {
  font: var(--ios-type-body) !important;
  letter-spacing: var(--ios-track-body) !important;
  color: var(--ios-text-2) !important;
  font-variant-numeric: tabular-nums;
}
/* iOS disclosure chevron ">" on the right of every row */
.ll-body .sd-chip.ll-default-row::before {
  content: "";
  grid-column: 3;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ios-separator);
  border-bottom: 1.5px solid var(--ios-separator);
  transform: rotate(-45deg);
  justify-self: end;
  margin-left: 6px;
  order: 3;
}
.ll-body .sd-chip.ll-default-row:active {
  background: rgba(0, 0, 0, 0.05) !important;
  transition: none !important;
}
[data-theme="dark"] .ll-body .sd-chip.ll-default-row:active {
  background: rgba(255, 255, 255, 0.06) !important;
}
/* Hide the old ✎ pencil icon text since the chevron now signals "tap to edit" */
.ll-body .sd-chip.ll-default-row { font-family: var(--ios-font) !important; }

/* ---------- iOS-styled <select> rows ------------------------------------- */
/* Wrap each ll-field that contains a <select> as a row: label left, select
   value + chevron right. Hide native dropdown arrow in favor of our chevron. */
.ll-body .ll-card .ll-field:has(> select),
.ll-body .ll-card .ll-field:has(> input[type="datetime-local"]),
.ll-body .ll-card .ll-field:has(> input[type="date"]) {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: center !important;
  column-gap: 12px !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  position: relative;
  min-height: 44px;
  font: var(--ios-type-body) !important;
  letter-spacing: var(--ios-track-body) !important;
}
.ll-body .ll-card .ll-field:has(> select) > span,
.ll-body .ll-card .ll-field:has(> input[type="datetime-local"]) > span,
.ll-body .ll-card .ll-field:has(> input[type="date"]) > span {
  font: var(--ios-type-body) !important;
  letter-spacing: var(--ios-track-body) !important;
  color: var(--ios-text-1) !important;
  margin: 0 !important;
  grid-column: 1;
}
.ll-body .ll-card .ll-field > select,
.ll-body .ll-card .ll-field > input[type="datetime-local"],
.ll-body .ll-card .ll-field > input[type="date"] {
  grid-column: 2;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--ios-text-2) !important;
  padding: 6px 24px 6px 8px !important;
  text-align: right !important;
  font: var(--ios-type-body) !important;
  letter-spacing: var(--ios-track-body) !important;
  min-height: 32px !important;
  cursor: pointer;
  /* Align the text right so it sits next to the chevron, like iOS Settings. */
  text-align-last: right !important;
  direction: ltr;
  /* Firefox needs this to right-align option text in closed state. */
  background-repeat: no-repeat;
  background-position: right 4px center;
}
/* iOS chevron > after the select value */
.ll-body .ll-card .ll-field:has(> select)::after,
.ll-body .ll-card .ll-field:has(> input[type="datetime-local"])::after,
.ll-body .ll-card .ll-field:has(> input[type="date"])::after {
  content: "";
  position: absolute;
  right: 2px; top: 50%;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--ios-separator);
  border-bottom: 1.5px solid var(--ios-separator);
  transform: translateY(-60%) rotate(-45deg);
  pointer-events: none;
}
/* Hairline between stacked select-rows inside the same card */
.ll-body .ll-card > .ll-field:has(> select) + .ll-field:has(> select),
.ll-body .ll-card > .ll-field:has(> select) + .ll-field:has(> input[type="datetime-local"]),
.ll-body .ll-card > .ll-field:has(> input[type="datetime-local"]) + .ll-field:has(> select) {
  border-top: 0.5px solid var(--ios-separator) !important;
}

/* ---------- Help-drawer FAQ: +/- → rotating chevron ---------------------- */
/* Override app-shell.css:587–596 which draws +/- via `content`. */
.ll-body .ll-help-item { border-top: 0.5px solid var(--ios-separator) !important; }
.ll-body .ll-help-item:first-of-type { border-top: none !important; }
.ll-body .ll-help-item > summary {
  font: var(--ios-type-body) !important;
  letter-spacing: var(--ios-track-body) !important;
  font-weight: 500 !important;
  color: var(--ios-text-1) !important;
  padding: 14px 0 !important;
}
.ll-body .ll-help-item > summary::after {
  content: "" !important;
  width: 9px !important;
  height: 9px !important;
  border-right: 2px solid var(--ios-text-2) !important;
  border-bottom: 2px solid var(--ios-text-2) !important;
  transform: rotate(-45deg) translate(-2px, -2px);
  transition: transform 240ms var(--ios-ease);
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  flex-shrink: 0;
}
.ll-body .ll-help-item[open] > summary::after {
  content: "" !important;
  transform: rotate(45deg) translate(-2px, -2px);
}
.ll-body .ll-help-item > p {
  font: var(--ios-type-subhead) !important;
  letter-spacing: var(--ios-track-subhead) !important;
  color: var(--ios-text-2) !important;
}

/* ---------- Status bar color = system background ------------------------- */
/* (index.html theme-color is already synced to the iOS system bg.) */

/* ---------- Store screenshot polish: first-viewport action density -------- */
/* 2026-06-06: The primary bake action now lives directly after the goal row in
   index.html. These final-layer overrides make that action obvious in phone
   screenshots while preserving the existing planner engine and click handler. */
.ll-body .ll-start-bake-cta.ll-start-bake-cta--priority {
  min-height: 64px !important;
  margin: 8px 0 12px !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(193, 70, 40, 0.24) !important;
}
.ll-body .ll-start-bake-cta__icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
}
.ll-body .ll-start-bake-cta__text {
  min-width: 0 !important;
}
.ll-body .ll-start-bake-cta__title,
.ll-body .ll-start-bake-cta__sub {
  letter-spacing: 0 !important;
}
.ll-body .ll-start-bake-cta__sub {
  white-space: normal !important;
  line-height: 1.25 !important;
}

/* Larger tap targets and more legible active states for the top goal controls. */
.ll-body .ll-goal-row {
  margin: 2px 0 8px !important;
  gap: 8px !important;
}
.ll-body .ll-goal-prompt {
  letter-spacing: 0 !important;
}
.ll-body .ll-goal-chips {
  gap: 8px !important;
}
.ll-body .ll-goal-chip {
  min-height: 44px !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}
.ll-body .ll-goal-chip.is-active,
.ll-body .ll-goal-chip[aria-pressed="true"] {
  background: var(--ios-accent) !important;
  border-color: var(--ios-accent) !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px rgba(193, 70, 40, 0.18) !important;
}
.ll-body .ll-goal-wizard-btn {
  min-height: 48px !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
}
.ll-body .ll-goal-wizard-text {
  letter-spacing: 0 !important;
}

/* Compress first-run education so it supports the workflow without pushing the
   main action out of screenshot range. */
.ll-body .ll-how-it-works {
  margin: 0 0 8px !important;
  padding: 12px 14px 10px !important;
  border-radius: 12px !important;
}
.ll-body .ll-how-it-works__dismiss {
  width: 44px !important;
  height: 44px !important;
  top: 2px !important;
  right: 4px !important;
}
.ll-body .ll-how-it-works__title {
  margin: 0 40px 6px 0 !important;
  letter-spacing: 0 !important;
}
.ll-body .ll-how-it-works__steps {
  gap: 6px !important;
  margin-bottom: 8px !important;
}
.ll-body .ll-how-it-works__step {
  gap: 8px !important;
}
.ll-body .ll-how-it-works__num {
  width: 28px !important;
  height: 28px !important;
}
.ll-body .ll-how-it-works__footer {
  padding-top: 8px !important;
}
.ll-body .ll-how-it-works__link,
.ll-body .ll-how-it-works__cta {
  min-height: 44px !important;
  letter-spacing: 0 !important;
}

/* R4: the decorative hero is reduced to a thin warm motif strip — keeps a
   touch of brand character but reclaims ~160px of first-screen height. The
   full photo is cropped to a band; the crumb overlay is dropped (no room). */
.ll-body .ll-hero-photo {
  height: 56px !important;
  margin: 2px 0 10px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.ll-body .ll-hero-photo picture,
.ll-body .ll-hero-photo > img:not(.ll-hero-photo__crumb) {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 42% !important;
}
.ll-body .ll-hero-photo .ll-hero-photo__crumb {
  display: none !important;
}

/* R3: collapsed "Formula & weights" summary — a muted one-line readout
   ("900 g · 72% hydration") sits opposite the title so the key numbers show
   without expanding. Reuses the collapsible-card primitive; tabular figures
   keep the grams aligned. */
.ll-body #formulaDetails > summary {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
.ll-body .ll-card-readout {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--ios-text-secondary, #6E6257) !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}
.ll-body .ll-card-subtitle {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--ios-text-secondary, #6E6257) !important;
}
.ll-body .ll-formula-subhead {
  margin-top: 14px !important;
}
/* Align the grams/percent figures across the weight + hero readouts. */
.ll-body #formulaDetails .sd-result-card strong,
.ll-body #formulaDetails .sd-insight-card strong,
.ll-body .ll-hero-value,
.ll-body .ll-hero-sub strong {
  font-variant-numeric: tabular-nums !important;
}

/* Stronger bottom-tab selection semantics for screenshots and accessibility. */
.ll-body .ll-tab {
  min-height: 48px !important;
  border-radius: 12px !important;
  margin: 4px 3px !important;
  letter-spacing: 0 !important;
}
.ll-body .ll-tab[aria-pressed="true"] {
  background: rgba(193, 70, 40, 0.12) !important;
  color: var(--ios-accent) !important;
  font-weight: 700 !important;
}
.ll-body .ll-tab[aria-pressed="true"] .ll-tab-icon {
  transform: translateY(-1px) scale(1.04) !important;
}

/* Print must stay a plain levain build sheet even though this file loads last. */
@media print {
  :root,
  [data-theme="light"],
  [data-theme="dark"],
  body.ll-body {
    --ios-bg-system: #fff !important;
    --bg: #fff !important;
  }

  html,
  body.ll-body,
  body.ll-body .ll-stage,
  body.ll-body .ll-view,
  body.ll-body .ll-view-inner,
  body.ll-body .ll-card,
  body.ll-body .ll-levain-result-row {
    background-color: #fff !important;
    background-image: none !important;
    color: #111 !important;
    box-shadow: none !important;
  }

  body.ll-body .ll-timerbar,
  body.ll-body .ll-header,
  body.ll-body .ll-tabbar,
  body.ll-body .ll-drawer,
  body.ll-body .ll-scrim {
    display: none !important;
  }

  body.ll-body .ll-card {
    border: 1px solid #c9c9c9 !important;
    border-radius: 8px !important;
  }

  body.ll-body .ll-levain-result-row {
    border-color: #d7d7d7 !important;
  }

  html body.ll-body {
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
  }
}

/* ===================================================================
   Advanced group (Starter view, v1.1): the five pro panels render as
   ROWS inside one grouped card, not as nested cards. Lives here because
   the generic .ll-body .ll-card grouped-card chrome above is !important.
   =================================================================== */
.ll-body .ll-levain-advanced-group .ll-card {
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 10px 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent) !important;
  box-shadow: none !important;
}

.ll-body .ll-levain-advanced-group .ll-card:first-of-type {
  border-top: none !important;
  margin-top: 2px !important;
}

/* A5 native-feel: hover styling only on devices that can truly hover.
   On touch, WebView :hover 'sticks' after a tap - every hover rule was
   moved here mechanically (bodies unchanged) so taps stay clean. */
@media (hover: hover) {
.ll-body .ll-card:hover > .ll-card-title::before {
  display: none !important;
  content: none !important;
}
/* Iconified/inactive segmented buttons should still read as tappable */
.ll-body .ll-segmented button:hover:not([aria-pressed="true"]):not(.is-active) {
  color: var(--ios-text-1) !important;
  background: transparent !important;
}
}