/* Loaf Logic — app-shell layout (Phase 3A) */
/* Fixed header + viewport-filling view area + fixed bottom tab bar. */
/* Mobile-first. Safe-area padding for iOS notch and bottom home bar. */

:root {
  --ll-header-h: 56px;
  --ll-tabbar-h: 64px;
  --ll-card-radius: 14px;
  --ll-kpi-radius: 12px;
  --ll-view-pad-x: 1rem;
  --ll-view-gap: 1rem;
  --ll-stage-pad-bottom: calc(var(--ll-tabbar-h) + env(safe-area-inset-bottom, 0px) + 1rem);
}

html, body {
  height: 100%;
}

.ll-body {
  min-height: 100dvh;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  overscroll-behavior-y: none;
}

/* ---- Header --------------------------------------------------------- */

.ll-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: calc(var(--ll-header-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--border);
}

.ll-header-inner {
  height: var(--ll-header-h);
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--ll-view-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ll-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--text);
  text-decoration: none;
  font-family: "Playfair Display", "Lora", serif;
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.ll-brand-mark {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  /* Subtle drop shadow so the loaf reads against any header background. */
  filter: drop-shadow(0 1px 2px rgba(122, 62, 21, 0.18));
  /* Gentle "rise" animation on first paint — like dough proofing. */
  animation: ll-loaf-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ll-loaf-rise {
  0%   { opacity: 0; transform: translateY(4px) scale(0.92); }
  60%  { opacity: 1; transform: translateY(0) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ll-brand-mark { animation: none; }
}

.ll-brand-text em {
  color: var(--accent);
  font-style: normal;
}

.ll-header-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ll-icon-btn {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.ll-icon-btn:active { transform: scale(0.95); }

.ll-header .theme-toggle {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: transparent;
}

/* ---- Stage (main content) ------------------------------------------- */

.ll-stage {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--ll-view-pad-x) var(--ll-stage-pad-bottom);
  min-height: calc(100dvh - var(--ll-header-h));
}

.ll-form {
  display: block;
}

/* ---- View sections --------------------------------------------------- */

.ll-view {
  padding-top: 1rem;
}

.ll-view[hidden] { display: none; }

.ll-view-inner {
  display: flex;
  flex-direction: column;
  gap: var(--ll-view-gap);
}

.ll-view-head {
  margin-bottom: 0.25rem;
}

.ll-view-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 0.25rem;
  white-space: nowrap;
}

.ll-view-head h1 {
  font-family: "Playfair Display", "Lora", serif;
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

.ll-view-subtitle {
  margin-top: 0.375rem;
  color: var(--text-secondary);
  font-size: 0.925rem;
  line-height: 1.5;
}

.ll-view-toggle {
  display: inline-flex;
  margin-top: 0.75rem;
  padding: 3px;
  background: var(--bg-secondary);
  border-radius: 999px;
  border: 1px solid var(--border);
}

.ll-view-toggle button {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 0.4rem 0.9rem;
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ll-view-toggle button[aria-pressed="true"] {
  background: var(--bg-card);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ---- KPI strip ------------------------------------------------------- */

.ll-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.ll-kpi {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--ll-kpi-radius);
  padding: 0.625rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  overflow: hidden;
}

.ll-kpi-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.ll-kpi-value {
  font-family: "IBM Plex Mono", monospace;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.ll-kpi.is-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.ll-kpi.is-primary .ll-kpi-label { color: rgba(255, 255, 255, 0.8); }
.ll-kpi.is-primary .ll-kpi-value { color: #fff; }

/* ---- Cards ----------------------------------------------------------- */

.ll-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--ll-card-radius);
  padding: 1rem 1rem 1.125rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ll-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  letter-spacing: -0.005em;
}

.ll-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.ll-card-collapsible > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.ll-card-collapsible > summary::-webkit-details-marker { display: none; }
.ll-card-collapsible > summary .ll-card-title { margin-bottom: 0; }
.ll-card-collapsible > summary::after {
  content: "+";
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--text-secondary);
  transition: transform 0.2s;
}
.ll-card-collapsible[open] > summary::after {
  content: "−";
}
.ll-card-collapsible[open] > :not(summary) {
  margin-top: 0.75rem;
}

.ll-helper {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0.375rem 0 0;
}

/* ---- Fields --------------------------------------------------------- */

.ll-field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.625rem;
  margin-bottom: 0.25rem;
}

.ll-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.ll-field > span {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.ll-field > span em {
  font-style: normal;
  color: var(--text-secondary);
  opacity: 0.75;
}

.ll-field-stacked { grid-column: 1 / -1; }

.ll-field-inline {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
.ll-field-inline > span { order: 2; text-transform: none; letter-spacing: 0; font-size: 0.85rem; color: var(--text); }
.ll-field-inline input[type="checkbox"] {
  width: auto;
  accent-color: var(--accent);
}

.ll-unit-toggle {
  display: inline-flex;
  padding: 2px;
  background: var(--bg-secondary);
  border-radius: 999px;
  border: 1px solid var(--border);
  align-self: start;
  margin-top: 0.25rem;
}

.ll-unit-toggle button {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 0.25rem 0.75rem;
  font-weight: 600;
  font-size: 0.75rem;
  border-radius: 999px;
  cursor: pointer;
}

.ll-unit-toggle button[aria-pressed="true"] {
  background: var(--bg-card);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.ll-link-btn {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0.25rem 0;
}

.ll-inclusions-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0.5rem 0;
}

.ll-accordion {
  margin-top: 0.5rem;
}

/* ---- Empty state ---------------------------------------------------- */

.ll-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 3rem 1rem;
  color: var(--text-secondary);
}

.ll-empty-icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 0.5rem;
  opacity: 0.6;
}

.ll-empty h2 {
  font-family: "Playfair Display", serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}

.ll-empty p {
  max-width: 34ch;
  line-height: 1.55;
  font-size: 0.925rem;
}

/* ---- Bottom tab bar ------------------------------------------------- */

.ll-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(12px);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  height: calc(var(--ll-tabbar-h) + env(safe-area-inset-bottom, 0px));
}

.ll-tab {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  flex: 1;
  max-width: 120px;
  height: var(--ll-tabbar-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 0 0.25rem;
  transition: color 0.15s, transform 0.1s;
}

.ll-tab:active { transform: scale(0.96); }

.ll-tab-icon {
  width: 22px;
  height: 22px;
  color: inherit;
  transition: color 0.15s, transform 0.2s var(--ease-out-back, cubic-bezier(0.34, 1.56, 0.64, 1));
}

.ll-tab[aria-pressed="true"] {
  color: var(--accent);
}

.ll-tab[aria-pressed="true"] .ll-tab-icon {
  transform: translateY(-2px) scale(1.08);
}

/* ---- Help drawer ---------------------------------------------------- */

.ll-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
.ll-scrim.is-visible {
  opacity: 1;
}

.ll-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  max-height: 80vh;
  background: var(--bg-card);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.24);
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.25, 1, 0.5, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow: hidden;
}

.ll-drawer.is-open {
  transform: translateY(0);
}

.ll-drawer-inner {
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}

.ll-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.ll-drawer-head::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
}

.ll-drawer-head h2 {
  font-family: "Playfair Display", serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
}

.ll-drawer-body {
  padding: 1.25rem;
  overflow-y: auto;
  line-height: 1.6;
  font-size: 0.925rem;
  color: var(--text);
}

.ll-drawer-body ul {
  padding-left: 1.25rem;
  margin: 0.75rem 0;
}

.ll-drawer-body li {
  margin-bottom: 0.5rem;
}

.ll-help-item {
  border-top: 1px solid var(--border);
  padding: 0.375rem 0;
}
.ll-help-item:first-of-type { border-top: none; }

.ll-help-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.625rem 0;
  font-weight: 600;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
.ll-help-item > summary::-webkit-details-marker { display: none; }
.ll-help-item > summary::after {
  content: "+";
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--text-secondary);
  transition: transform 0.2s;
}
.ll-help-item[open] > summary::after {
  content: "−";
}

.ll-help-item > p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-secondary);
  padding: 0 0 0.75rem;
  margin: 0;
}

.ll-help-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.25rem 0 0.75rem;
}

.ll-help-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 0.5rem;
}

/* ---- View entry animations ----------------------------------------- */

.ll-view {
  animation: ll-view-in 300ms cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes ll-view-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ll-view { animation: none; }
  .ll-drawer { transition-duration: 0.01ms; }
  .ll-scrim { transition-duration: 0.01ms; }
}

/* ===================================================================
   Tactile slider (Phase 3B)
   Replaces number inputs for the primary controls.
   - Large numeric readout with tap-to-edit (switches to numeric keypad).
   - Custom-styled track + thumb with accent fill to the thumb position.
   =================================================================== */

.ll-slider {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.625rem 0.875rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overscroll-behavior-x: contain;
  touch-action: pan-y;
}

.ll-slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.ll-slider-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
}

.ll-slider-value {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  padding: 0.1rem 0.4rem;
  margin-right: -0.4rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
}
.ll-slider-value:active { transform: scale(0.97); }
.ll-slider-value:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ll-slider-number {
  min-width: 2ch;
  text-align: right;
  color: var(--accent);
}

.ll-slider-unit {
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.ll-slider-number-input {
  appearance: none;
  -moz-appearance: textfield;
  background: var(--bg-secondary);
  border: 2px solid var(--accent);
  border-radius: 6px;
  padding: 0.1rem 0.4rem;
  margin-right: -0.4rem;
  color: var(--accent);
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  width: 5ch;
  text-align: right;
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-light);
}
.ll-slider-number-input::-webkit-outer-spin-button,
.ll-slider-number-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ll-slider-track {
  position: relative;
  height: 28px;
  display: flex;
  align-items: center;
}

.ll-slider-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--bg-secondary);
  border-radius: 999px;
  border: 1px solid var(--border);
}

.ll-slider-bar {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 5px;
  width: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 75%, transparent), var(--accent));
  border-radius: 999px;
  pointer-events: none;
  transition: width 0.06s linear;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 30%, transparent);
}

.ll-slider input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  position: relative;
  z-index: 1;
  height: 28px;
  cursor: pointer;
  touch-action: pan-y;
}

.ll-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
  background: transparent;
  border: none;
}
.ll-slider input[type="range"]::-moz-range-track {
  height: 5px;
  background: transparent;
  border: none;
}
.ll-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent);
  margin-top: -9px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), 0 0 0 0 var(--accent-light);
  transition: box-shadow 0.15s, transform 0.1s;
  cursor: grab;
}
.ll-slider input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.14);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22), 0 0 0 7px var(--accent-light);
  cursor: grabbing;
}
.ll-slider input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.15s, transform 0.1s;
  cursor: grab;
}
.ll-slider input[type="range"]:active::-moz-range-thumb {
  transform: scale(1.14);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22), 0 0 0 7px var(--accent-light);
}

/* Range labels dropped entirely — the thumb position + numeric readout
   already communicate where you are in the range. Saves vertical space. */
.ll-slider-range { display: none; }

[data-theme="dark"] .ll-slider input[type="range"]::-webkit-slider-thumb,
[data-theme="dark"] .ll-slider input[type="range"]::-moz-range-thumb {
  background: var(--bg-card);
  border-color: var(--accent);
}

/* ===================================================================
   iOS-style toggle switch
   =================================================================== */

.ll-switch {
  position: relative;
  display: inline-flex;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
}

.ll-switch input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 1;
}

.ll-switch-track {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 999px;
  transition: background 0.22s cubic-bezier(0.25, 1, 0.5, 1);
}

.ll-switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ll-switch input:checked ~ .ll-switch-track {
  background: var(--accent);
}

.ll-switch input:checked ~ .ll-switch-track::after {
  transform: translateX(20px);
}

.ll-switch input:focus-visible ~ .ll-switch-track {
  box-shadow: 0 0 0 3px var(--accent-light);
}

.ll-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.375rem 0;
}

.ll-toggle-row > span {
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 500;
}

/* ---- Starter & Levain calculator ----------------------------------- */

.ll-levain-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}

.ll-levain .ll-card-head,
.ll-levain-result .ll-card-head {
  align-items: center;
}

body.ll-body #view-feed .ll-view-head {
  margin-bottom: 0.35rem !important;
}

body.ll-body #view-feed .ll-view-head h1 {
  font-size: 28px !important;
  line-height: 1.04 !important;
  margin-bottom: 3px !important;
}

body.ll-body #view-feed .ll-view-subtitle {
  max-width: 46ch;
  line-height: 1.26 !important;
  font-size: 13px !important;
}

#view-feed .ll-view-head-art {
  width: 72px;
  height: 92px;
}

body.ll-body #view-feed .ll-card.ll-levain {
  padding: 8px 10px !important;
  margin-top: 4px !important;
}

body.ll-body #view-feed .ll-levain .ll-card-head {
  margin-bottom: 4px !important;
}

body.ll-body #view-feed .ll-levain .ll-card-head .btn {
  min-height: 36px !important;
  padding: 0.34rem 0.68rem !important;
  border-radius: 8px !important;
  font-size: 0.86rem !important;
}

.ll-levain-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.22rem;
  margin: 0 0 0.12rem;
  /* Pin the live answer under the app header while the (tall) Build card is
     being adjusted — every slider drag stays visibly consequential without
     scrolling back up. Unsticks naturally past the card. */
  position: sticky;
  top: calc(var(--ll-header-h) + env(safe-area-inset-top, 0px) + 4px);
  z-index: 4;
  background: var(--bg-card);
  border-radius: 8px;
}

.ll-levain-quick > div {
  min-width: 0;
  padding: 0.24rem 0.22rem;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-card) 72%, var(--bg-secondary));
}

.ll-levain-quick span,
.ll-levain-quick strong {
  display: block;
  min-width: 0;
  text-align: center;
}

.ll-levain-quick span {
  color: var(--text-secondary);
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ll-levain-quick strong {
  margin-top: 0.08rem;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ll-levain-quick strong,
.ll-levain-result-row strong,
.ll-levain-temp-readout,
.ll-levain-time-value,
.ll-levain-secondary summary strong,
.ll-levain .sd-inline-affix input {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.ll-levain .ll-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(78px, 100px);
  gap: 0.04rem 0.42rem;
  align-items: start;
  min-width: 0;
  padding: 0.22rem 0;
}

.ll-levain .ll-field + .ll-field {
  padding-top: 0.22rem;
  border-top: 0.5px solid color-mix(in srgb, var(--border) 62%, transparent);
}

.ll-levain .ll-field > span {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  min-width: 0;
  font-size: 0.64rem;
  letter-spacing: 0.055em;
}

.ll-levain .sd-inline-affix {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  justify-self: end;
}

.ll-levain .sd-inline-affix input {
  min-width: 0;
  min-height: 31px;
  padding-inline: 0.45rem;
  font-size: 14px !important;
}

.ll-levain .sd-affix {
  min-width: 2.1rem;
  justify-content: center;
  padding-inline: 0.45rem;
}

.ll-levain-range {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: -0.04rem;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  gap: 0;
}

.ll-levain-range .ll-slider-track {
  height: 22px;
  isolation: isolate;
}

.ll-levain-range input[type="range"] {
  height: 22px;
  min-height: 22px;
}

.ll-levain-range input[type="range"].is-clamped {
  opacity: 0.72;
}

/* Value bubble riding the slider thumb during a drag. Positioned from the
   same --ll-range-pct the fill bar uses; pointer-events none so it never
   steals the drag. */
.ll-slider-bubble {
  position: absolute;
  left: var(--ll-range-pct, 50%);
  bottom: calc(100% + 4px);
  transform: translateX(-50%) translateY(2px);
  padding: 0.14rem 0.5rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg-card);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease-out, transform 140ms ease-out;
  z-index: 3;
}

.ll-slider-bubble.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ± steppers flanking the levain number inputs — tap for one step,
   press-and-hold to repeat. Ghost buttons so the affix box stays calm. */
.ll-affix-stepper {
  display: flex;
  align-items: center;
}

.ll-affix-stepper input {
  flex: 1 1 3.2rem;
  min-width: 2.6rem;
  text-align: right;
}

/* The affix column was sized for input+unit only; give stepper rows the
   extra width the two ± buttons need. */
.ll-levain .ll-field:has(.ll-affix-stepper) {
  grid-template-columns: minmax(0, 1fr) minmax(148px, 156px);
}

.ll-stepper {
  appearance: none;
  flex: 0 0 auto;
  width: 30px;
  min-height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* (stepper press feedback comes from the unified system in ios-native.css #8) */

/* Live numeric readouts never reflow their neighbors mid-drag. */
.ll-levain-quick,
.ll-levain-result-rows,
.ll-levain-meta,
.ll-levain-secondary summary strong,
.ll-levain .sd-inline-affix input,
#levainHydrationClass,
#levainInoculationClass {
  font-variant-numeric: tabular-nums;
}

.ll-levain-range .ll-slider-track::before {
  height: 5px;
  border: none;
  background:
    linear-gradient(90deg, transparent 0 24%, color-mix(in srgb, var(--border) 70%, transparent) 24% 24.75%, transparent 24.75% 49.6%, color-mix(in srgb, var(--border) 70%, transparent) 49.6% 50.4%, transparent 50.4% 75.25%, color-mix(in srgb, var(--border) 70%, transparent) 75.25% 76%, transparent 76% 100%),
    color-mix(in srgb, var(--bg-secondary) 78%, var(--bg-card));
}

.ll-levain-range .ll-slider-bar {
  height: 5px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, #d8c36c), var(--accent));
  box-shadow: none;
  transition: none;
}

.ll-levain-range input[type="range"]:active::-webkit-slider-thumb {
  transform: none;
}

.ll-levain-range input[type="range"]:active::-moz-range-thumb {
  transform: none;
}

.ll-levain-range-scale {
  display: flex;
  justify-content: space-between;
  margin-top: -0.24rem;
  color: color-mix(in srgb, var(--text-secondary) 78%, transparent);
  font-size: 0.49rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.ll-levain-range-scale span:nth-child(2) {
  opacity: 0;
}

.ll-levain .ll-field .ll-helper {
  grid-column: 1 / -1;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0;
  transition: max-height 160ms ease, opacity 160ms ease, margin 160ms ease;
}.ll-levain .ll-field:not(.ll-levain-range-field):focus-within .ll-helper {
  max-height: 3.8rem;
  opacity: 1;
  margin-top: 0.08rem;
}

.ll-levain .ll-field > small:not(.ll-helper) {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  max-width: 45%;
  padding: 0.08rem 0.28rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 9%, var(--bg-secondary));
  color: var(--text-secondary);
  font-size: 0.56rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: right;
}

.ll-levain-secondary {
  border-top: 0.5px solid color-mix(in srgb, var(--border) 62%, transparent);
  padding: 0.14rem 0;
}

.ll-levain-secondary > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.5rem;
  min-height: 26px;
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
}

.ll-levain-secondary > summary::-webkit-details-marker {
  display: none;
}

.ll-levain-secondary > summary span {
  min-width: 0;
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.ll-levain-secondary > summary strong {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
}

.ll-levain-secondary > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--border);
  border-bottom: 1.5px solid var(--border);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.ll-levain-secondary[open] > summary::after {
  transform: rotate(225deg);
}

.ll-levain-nested-field {
  margin-top: 0.2rem;
  padding-bottom: 0.1rem !important;
}

.ll-temp-input {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  gap: 0.18rem;
  min-width: 0;
}

.ll-temp-input .sd-inline-affix {
  grid-column: auto;
  grid-row: auto;
}

.ll-temp-input .ll-segmented {
  max-width: 100%;
  width: 100%;
}

.ll-temp-input .ll-segmented button,
.ll-levain-advanced .ll-segmented button {
  min-height: 26px;
  line-height: 1.15;
  white-space: normal;
}

/* ONE ratio control at every width: a horizontally scrollable chip row on
   phones (momentum scroll, no wrap), wrapping into rows on wide screens. */
.ll-levain-ratios-label {
  margin-top: 0.85rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.ll-levain-ratios-hint {
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.8;
}

.ll-levain-ratios {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.45rem;
  margin-top: 0.4rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Bleed the scroll gutter to the card edge so end chips aren't clipped. */
  padding-bottom: 0.15rem;
}

.ll-levain-ratios::-webkit-scrollbar { display: none; }

.ll-levain-ratios button { flex: 0 0 auto; }

/* First-run self-segmentation sheet: three big tappable persona rows. */
.ll-segment-options {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.75rem;
}

.ll-segment-option {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 64px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-secondary);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

/* (segment-option press feedback comes from the unified system in ios-native.css #8) */

.ll-segment-option__icon {
  flex: 0 0 auto;
  font-size: 1.5rem;
}

.ll-segment-option__text {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.ll-segment-option__text strong {
  font-size: 0.98rem;
}

.ll-segment-option__text small {
  color: var(--text-secondary);
  font-size: 0.8rem;
  line-height: 1.35;
}

.ll-segment-skip {
  display: block;
  margin: 0.8rem auto 0;
  color: var(--text-secondary);
}

/* Advanced group summary: a one-line contents hint while collapsed. */
.ll-advanced-group-hint {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.ll-levain-advanced-group[open] .ll-advanced-group-hint {
  display: none;
}

/* Tap-"?" inline help — the persistent helper prose is hidden by default and
   toggled per field, so the calculator's primary controls stay calm. */
.ll-info {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 0.3rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  vertical-align: text-bottom;
}

.ll-info[aria-expanded="true"] {
  background: var(--accent);
  color: var(--bg-card);
}

.ll-helper-popover {
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-secondary));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  animation: ll-how-it-works-rise 220ms ease-out both;
}

/* Field-name labels live INSIDE the .ll-field > span (explicit for=, not a
   wrapping label) — inherit the span's small-caps styling exactly. */
.ll-field > span > label {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

/* The generic .ll-levain .ll-field .ll-helper collapse rule (0,3,0) keeps
   helpers at max-height:0/opacity:0; the tap-"?" reveal must outrank it or
   the popover renders as an invisible sliver. (0,4,0 + :not([hidden])) */
.ll-levain .ll-field .ll-helper.ll-helper-popover:not([hidden]) {
  max-height: 200px;
  overflow: visible;
  opacity: 1;
  margin: 0.35rem 0 0.15rem;
}

.ll-levain-ratios button {
  appearance: none;
  min-width: 0;
  min-height: 44px;
  padding: 0.45rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.ll-levain-ratios button[aria-pressed="true"],
.ll-levain-ratios button.is-active {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
  color: var(--accent);
}

.ll-levain-result {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
}

body.ll-body #view-feed .ll-levain + .ll-levain-result {
  margin-top: 4px !important;
}

.ll-levain-result-rows {
  display: grid;
  gap: 0.65rem;
}

.ll-levain-result-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.ll-levain-result-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.75rem;
  min-height: 42px;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-secondary);
}

.ll-levain-result-tile {
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  min-height: 84px;
  gap: 0.3rem;
  padding: 0.75rem 0.35rem;
  text-align: center;
  background: color-mix(in srgb, var(--bg-card) 82%, var(--bg-secondary));
}

.ll-levain-result-row span {
  min-width: 0;
  color: var(--text-secondary);
  font-size: 0.86rem;
}

.ll-levain-result-tile span {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ll-levain-result-row strong {
  font-family: "IBM Plex Mono", monospace;
  font-size: 1rem;
  color: var(--text);
  white-space: nowrap;
}

.ll-levain-result-tile strong {
  font-size: 1.18rem;
}

.ll-levain-proportion {
  display: flex;
  min-height: 34px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
}

.ll-levain-proportion span {
  display: grid;
  place-items: center;
  min-width: 2.5rem;
  padding: 0 0.35rem;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.ll-levain-proportion .is-flour,
.ll-levain-legend .is-flour::before {
  background: #d8c36c;
}

.ll-levain-proportion .is-starter,
.ll-levain-legend .is-starter::before {
  background: #31455f;
}

.ll-levain-proportion .is-water,
.ll-levain-legend .is-water::before {
  background: #5d7fa6;
}

.ll-levain-legend {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.ll-levain-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.ll-levain-legend span::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
}

.ll-levain-total-strip {
  min-height: 54px;
  border-color: transparent;
  background: #31455f;
}

.ll-levain-total-strip span,
.ll-levain-total-strip strong {
  color: #fff;
}

.ll-levain-meta {
  margin-top: 0.75rem;
  color: var(--text-secondary);
  font-size: 0.86rem;
  line-height: 1.45;
}

.ll-levain-meta p,
.ll-levain-warnings p,
.ll-levain-suggestion p,
.ll-levain-advanced .ll-helper p {
  margin: 0.35rem 0 0;
}

.ll-levain-time-panel {
  display: grid;
  gap: 0.45rem;
  padding: 0.9rem;
  border-radius: 10px;
  background: color-mix(in srgb, #d8c36c 42%, var(--bg-card));
  color: var(--text);
}

.ll-levain-time-heading {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}

.ll-levain-temp-readout {
  justify-self: start;
  padding: 0.25rem 0.45rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-card) 70%, transparent);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
}

.ll-levain-time-value {
  font-size: 1.35rem;
  line-height: 1.1;
  font-weight: 850;
  color: var(--text);
}

.ll-levain-time-panel p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.84rem;
}

.ll-levain-meta-grid {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.65rem;
}

.ll-levain-meta-grid p {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0;
  padding: 0.45rem 0;
  border-bottom: 0.5px solid color-mix(in srgb, var(--border) 68%, transparent);
}

.ll-levain-meta-grid p:last-child {
  border-bottom: none;
}

.ll-levain-meta-grid span {
  color: var(--text-secondary);
}

.ll-levain-meta-grid strong {
  color: var(--text);
  font-weight: 700;
  text-align: right;
}

.ll-levain-warnings {
  margin-top: 0.65rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--warning, #b98524) 34%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--warning, #b98524) 10%, var(--bg-card));
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.4;
}

.ll-levain-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.ll-levain-actions .btn {
  min-width: 0;
  min-height: 44px;
}

.ll-levain-advanced .ll-segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  border-radius: 12px;
}

.ll-levain-advanced .ll-segmented button {
  border-radius: 9px;
  padding-inline: 0.5rem;
}

.ll-levain-suggestion {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.ll-levain-blend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: 0.625rem;
  margin-top: 0.75rem;
}

.ll-levain-advanced ul {
  margin: 0.45rem 0 0;
  padding-left: 1.1rem;
}

.ll-levain-saved {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.ll-levain-saved > p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.ll-levain-saved-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 0.5rem;
  align-items: stretch;
}

.ll-levain-saved-main {
  appearance: none;
  min-width: 0;
  min-height: 48px;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-secondary);
  color: var(--text);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  cursor: pointer;
}

.ll-levain-saved-main strong,
.ll-levain-saved-main span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ll-levain-saved-main span {
  color: var(--text-secondary);
  font-size: 0.78rem;
}

.ll-levain-saved-row .ll-icon-btn {
  align-self: stretch;
  width: 44px;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-secondary);
}

@media (max-width: 360px) {
  .ll-levain-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  body.ll-body #view-feed {
    padding-top: 0.5rem;
  }

  #view-feed .ll-view-head picture {
    display: none;
  }

  body.ll-body #view-feed .ll-view-head {
    margin: 0 0 0.35rem !important;
  }

  body.ll-body #view-feed .ll-view-head .ll-view-eyebrow,
  body.ll-body #view-feed .ll-view-subtitle {
    display: none !important;
  }

  body.ll-body #view-feed .ll-view-head h1 {
    font-size: 24px !important;
    line-height: 1.05 !important;
    margin: 0 !important;
  }
}

@media (min-width: 640px) {
  .ll-levain-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ll-levain-ratios {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

/* ===================================================================
   Styled native selects (consistent iOS/Android look)
   =================================================================== */

.ll-select {
  position: relative;
  display: block;
}

.ll-select select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 0.75rem 2.25rem 0.75rem 0.875rem;
  font-size: 1rem;
  font-family: var(--font);
  background: var(--bg-secondary);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  font-weight: 500;
}

.ll-select::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--text-secondary);
  border-bottom: 2px solid var(--text-secondary);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  transition: border-color 0.15s;
}

.ll-select select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ll-select select:focus ~ .ll-select-caret,
.ll-select:focus-within::after { border-color: var(--accent); }

/* ===================================================================
   Segmented control (used for weight/temp unit toggles)
   =================================================================== */

.ll-segmented {
  display: inline-flex;
  padding: 3px;
  background: var(--bg-secondary);
  border-radius: 999px;
  border: 1px solid var(--border);
  position: relative;
  align-self: start;
}

.ll-segmented button {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 0.3rem 0.85rem;
  font-weight: 600;
  font-size: 0.8rem;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s;
  position: relative;
  z-index: 1;
}

.ll-segmented button[aria-pressed="true"],
.ll-segmented button.is-active {
  color: var(--text);
}

.ll-segmented button[aria-pressed="true"]::before,
.ll-segmented button.is-active::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-card);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  z-index: -1;
  animation: ll-segment-pop 0.22s var(--ease-out-back, cubic-bezier(0.34, 1.56, 0.64, 1));
}

@keyframes ll-segment-pop {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ===================================================================
   Directional view transitions
   =================================================================== */

.ll-view.is-enter-right {
  animation: ll-slide-in-right 280ms cubic-bezier(0.25, 1, 0.5, 1);
}
.ll-view.is-enter-left {
  animation: ll-slide-in-left 280ms cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes ll-slide-in-right {
  from { opacity: 0; transform: translate3d(30px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes ll-slide-in-left {
  from { opacity: 0; transform: translate3d(-30px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ll-view.is-enter-right,
  .ll-view.is-enter-left { animation: none; }
}

/* ===================================================================
   Plan hero / KPI upgrades
   =================================================================== */

.ll-hero {
  background: linear-gradient(140deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 60%, var(--text)) 100%);
  color: #fff;
  border-radius: 18px;
  padding: 1.125rem 1.25rem 1.25rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 30%, transparent);
}

.ll-hero::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.25), transparent 50%);
  pointer-events: none;
}

.ll-hero-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.85;
}

.ll-hero-value {
  font-family: "Playfair Display", "Lora", serif;
  font-size: 2.25rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0.2rem 0 0.5rem;
}

.ll-hero-sub {
  display: flex;
  gap: 0.875rem;
  flex-wrap: wrap;
  opacity: 0.95;
  font-size: 0.8rem;
}

.ll-hero-sub > span {
  display: inline-flex;
  gap: 0.35rem;
  align-items: baseline;
}

.ll-hero-sub strong {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ===================================================================
   Live timer (Phase 3D)
   =================================================================== */

.ll-start-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: linear-gradient(140deg, var(--bg-card), var(--accent-light));
}

.ll-start-card .ll-card-title {
  margin-bottom: 0.125rem;
  font-size: 0.95rem;
}

.ll-start-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent);
  transition: transform 0.1s, box-shadow 0.2s;
}
.ll-start-btn:active { transform: scale(0.97); }

.ll-start-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  font-size: 0.65rem;
  line-height: 1;
  padding-left: 2px;
}

/* Live panel layout */
.ll-live-panel[hidden] { display: none; }
.ll-live-panel {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.ll-live-card {
  position: relative;
  padding: 1.25rem 1.25rem 1rem;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(155deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 55%, var(--text)) 100%);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--accent) 32%, transparent);
  overflow: hidden;
  isolation: isolate;
}

.ll-live-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 85% 0%, rgba(255,255,255,0.3), transparent 55%);
  pointer-events: none;
  z-index: -1;
}

.ll-live-card.is-paused {
  background: linear-gradient(155deg, color-mix(in srgb, var(--accent) 72%, var(--text)) 0%, color-mix(in srgb, var(--accent) 40%, var(--text)) 100%);
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

.ll-live-card.is-overdue {
  background: linear-gradient(155deg, #c34c3b 0%, #8a2e20 100%);
  box-shadow: 0 14px 32px rgba(195, 76, 59, 0.4);
  animation: ll-live-pulse 1.1s ease-in-out infinite;
}

@keyframes ll-live-pulse {
  0%, 100% { box-shadow: 0 14px 32px rgba(195, 76, 59, 0.4); }
  50%      { box-shadow: 0 14px 38px rgba(195, 76, 59, 0.65); }
}

.ll-live-tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.85;
}

.ll-live-title {
  font-family: "Playfair Display", "Lora", serif;
  font-weight: 900;
  font-size: 1.55rem;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0.35rem 0 0.5rem;
}

.ll-live-clock {
  font-family: "IBM Plex Mono", monospace;
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0.5rem 0 0.75rem;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.ll-live-progress {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.ll-live-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0.7), #fff);
  border-radius: 999px;
  transition: width 0.25s linear;
  box-shadow: 0 0 14px rgba(255,255,255,0.6);
}

.ll-live-card.is-overdue .ll-live-progress-bar {
  background: linear-gradient(90deg, #fca5a5, #fff);
}

.ll-live-note,
.ll-live-cue {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0.95;
}

.ll-live-cue {
  opacity: 0.82;
  font-style: italic;
}

.ll-live-controls {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 0.5rem;
  margin-top: 1rem;
}

.ll-live-controls-secondary {
  grid-template-columns: 1fr 1fr;
  margin-top: 0.5rem;
}

.ll-live-btn {
  appearance: none;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  padding: 0.6rem 0.5rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  letter-spacing: -0.01em;
  backdrop-filter: blur(6px);
  transition: background 0.15s, transform 0.1s;
}
.ll-live-btn:active { transform: scale(0.96); }

.ll-live-btn-primary {
  background: #fff;
  color: var(--accent);
  border-color: #fff;
  font-size: 0.95rem;
}

.ll-live-btn-ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.28);
}

.ll-live-btn-danger {
  background: rgba(0,0,0,0.22);
  border-color: rgba(255,255,255,0.15);
}

/* Next-up summary card */
.ll-live-next {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.ll-live-next-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.ll-live-next-body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.ll-live-next-body strong {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

.ll-live-next-body span {
  font-family: "IBM Plex Mono", monospace;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
}

/* ===================================================================
   Persistent timer mini-bar (visible on every view while a bake runs)
   =================================================================== */

.ll-timerbar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(var(--ll-tabbar-h) + env(safe-area-inset-bottom, 0px) + 10px);
  z-index: 55;
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 6px 6px 6px 8px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 65%, var(--text)));
  border-radius: 18px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 32%, transparent), 0 0 0 1px rgba(255,255,255,0.12) inset;
  color: #fff;
  animation: ll-timerbar-in 260ms var(--ease-out-back, cubic-bezier(0.34,1.56,0.64,1));
}

.ll-timerbar[hidden] { display: none; }

@keyframes ll-timerbar-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.ll-timerbar-body {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 14px;
  min-width: 0;
  transition: background 0.15s, transform 0.1s;
}
.ll-timerbar-body:active { transform: scale(0.98); }

.ll-timerbar-ring {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

.ll-timerbar-ring svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
.ll-timerbar-ring-track {
  fill: none;
  stroke: rgba(255,255,255,0.22);
  stroke-width: 3;
}
.ll-timerbar-ring-fill {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 94.25;  /* 2πr where r=15 */
  stroke-dashoffset: 94.25; /* fully empty; JS sets based on progress */
  transition: stroke-dashoffset 0.3s linear;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.6));
}

.ll-timerbar-ring-icon {
  position: relative;
  font-size: 15px;
  line-height: 1;
}

.ll-timerbar-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ll-timerbar-step {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.95;
}

.ll-timerbar-clock {
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.ll-timerbar-action {
  appearance: none;
  background: rgba(255,255,255,0.18);
  border: none;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  flex-shrink: 0;
  cursor: pointer;
  font-size: 1.1rem;
  display: grid;
  place-items: center;
  transition: background 0.15s, transform 0.1s;
}
.ll-timerbar-action:active { transform: scale(0.94); }

.ll-timerbar.is-paused { animation: none; opacity: 0.9; }
.ll-timerbar.is-paused .ll-timerbar-ring-icon { opacity: 0.7; }

.ll-timerbar.is-overdue {
  background: linear-gradient(135deg, #c34c3b, #8a2e20);
  animation: ll-timerbar-pulse 1.2s ease-in-out infinite;
}
@keyframes ll-timerbar-pulse {
  0%, 100% { box-shadow: 0 10px 24px rgba(195,76,59,0.4), 0 0 0 1px rgba(255,255,255,0.12) inset; }
  50%      { box-shadow: 0 14px 32px rgba(195,76,59,0.65), 0 0 0 1px rgba(255,255,255,0.2) inset; }
}

/* ===================================================================
   Badge dot on the Timeline tab icon when a bake is active
   =================================================================== */

.ll-tab-icon-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}

.ll-tab-dot {
  position: absolute;
  top: -2px;
  right: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--bg-card);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s, transform 0.25s var(--ease-out-back, cubic-bezier(0.34,1.56,0.64,1));
  pointer-events: none;
}

.ll-tab[data-has-badge="true"] .ll-tab-dot {
  opacity: 1;
  transform: scale(1);
  animation: ll-dot-pulse 2.4s ease-in-out infinite;
}

@keyframes ll-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); }
  50%      { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent); }
}

/* ===================================================================
   Method pager (Phase 3E) — one step per viewport, scroll-snap
   =================================================================== */

.ll-method-layout { gap: 0.75rem; }

.ll-method-head {
  margin-bottom: 0;
}

.ll-method-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.ll-method-progress > span {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.ll-method-tips {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
}
.ll-method-tips input[type="checkbox"] { accent-color: var(--accent); }

/* Glossary affordance hint — makes the underlined-terms feature discoverable
   on touch (no hover to reveal it). Sits just under the progress row. */
.ll-method-hint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text-secondary);
}
.ll-method-hint svg { flex: 0 0 auto; color: var(--accent); opacity: 0.85; }
.ll-method-hint-term {
  border-bottom: 1px dashed var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* Horizontal pager with CSS scroll-snap. */
.ll-pager {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;            /* Firefox */
  -webkit-overflow-scrolling: touch;
  gap: 0.75rem;
  padding-bottom: 0.25rem;
  margin: 0 -1rem;                  /* bleed to the viewport edge */
  padding-left: 1rem;
  padding-right: 1rem;
  outline: none;
  border-radius: 0;
}
.ll-pager::-webkit-scrollbar { display: none; }

.ll-method-card {
  scroll-snap-align: center;
  scroll-snap-stop: always;
  flex: 0 0 calc(100vw - 2rem);
  max-width: 600px;
  min-height: 360px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.25rem 1.25rem 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* NOTE: overflow stays visible so glossary tooltips can escape the card;
     the illustration is clipped by its own figure's border-radius instead. */
}

/* When a HERA illustration is present the card drops its own padding so the
   art band can bleed edge-to-edge; the body content carries its own padding. */
.ll-method-card.has-art {
  padding: 0;
  gap: 0;
}

.ll-method-card-art {
  margin: 0;
  position: relative;
  /* R2: trimmed from 16/9 to a shorter cinematic band so step text sits higher
     on short devices (iPhone SE 375x667). A fixed max-height caps the band on
     wide cards too, and shrinks further on short viewports below. */
  aspect-ratio: 5 / 2;
  max-height: 150px;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 12%, var(--bg-card)) 0%, var(--bg-secondary) 100%);
  overflow: hidden;
  flex: 0 0 auto;
  /* Match the card's top corners (card has border-radius:18px, 1px border). */
  border-radius: 17px 17px 0 0;
}
/* Short viewports (iPhone SE class): shave the band further and relax the
   card floor so the first method step's instruction is visible without
   scrolling the carousel card. */
@media (max-height: 700px) {
  .ll-method-card-art { max-height: 120px; }
  .ll-method-card { min-height: 300px; }
}
.ll-method-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}
/* Soft fade from the illustration into the card body so the warm art reads as
   part of the card rather than a pasted-in photo. */
.ll-method-card-art::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(to bottom, transparent, var(--bg-card));
  pointer-events: none;
}

.ll-method-card.has-art .ll-method-card-body-wrap {
  padding: 0.75rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 auto;
}
.ll-method-card:not(.has-art) .ll-method-card-body-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 auto;
}

.ll-method-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Step counter now leads with a filled circular badge for stronger visual
   rhythm + at-a-glance "which step am I on" legibility. */
.ll-method-step-num {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.ll-method-step-badge {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 40%, transparent);
}
.ll-method-step-of { text-transform: uppercase; letter-spacing: 0.06em; }

.ll-method-step-timing {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  font-weight: 600;
}

.ll-method-card-title {
  font-family: "Playfair Display", "Lora", serif;
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0.25rem 0;
}

.ll-method-card-body {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
}

.ll-method-card-cue {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary);
  font-style: italic;
  margin: 0.25rem 0 0;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
}

.ll-method-card-more {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
  line-height: 1.5;
}

.ll-method-card-more > summary {
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  color: var(--accent);
  padding: 0.25rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ll-method-card-more > summary::-webkit-details-marker { display: none; }
.ll-method-card-more > summary::after {
  content: "+";
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--text-secondary);
}
.ll-method-card-more[open] > summary::after { content: "−"; }
.ll-method-card-more[open] p { margin: 0.5rem 0 0; color: var(--text-secondary); }

.ll-method-card-trouble {
  color: var(--text-secondary);
  font-style: italic;
  margin-top: 0.5rem !important;
}

/* Dots indicator */
.ll-pager-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 0.25rem 0;
  flex-wrap: wrap;
  max-height: 32px;
  overflow: hidden;
}

.ll-pager-dot {
  appearance: none;
  background: var(--border);
  border: none;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, width 0.25s var(--ease-out-back, cubic-bezier(0.34,1.56,0.64,1));
}

.ll-pager-dot.is-active {
  background: var(--accent);
  width: 22px;
}

/* Prev/Next nav */
.ll-pager-nav {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.ll-pager-btn {
  flex: 1;
  appearance: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.625rem 0.875rem;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, border-color 0.15s;
}
.ll-pager-btn:active { transform: scale(0.97); }

/* Pin the step dots + Prev/Next above the tab bar so they're always reachable
   without scrolling the (variable-height) method card. Swiping the pager pages
   steps; these controls are the always-visible tap fallback. The warm fade lets
   card content dissolve under the bar instead of clipping against a hard edge. */
.ll-method-controls {
  position: sticky;
  bottom: calc(var(--ll-tabbar-h) + env(safe-area-inset-bottom, 0px) + 0.5rem);
  z-index: 20;
  margin-top: 0.5rem;
  padding-top: 0.85rem;
  background: linear-gradient(
    to top,
    var(--bg) 58%,
    color-mix(in srgb, var(--bg) 70%, transparent)
  );
}
.ll-method-controls .ll-pager-dots { margin-top: 0; }

/* ===================================================================
   Production board (R13a) — many named concurrent bakes as color-coded
   swimlanes. Shown only when Production mode is ON.
   =================================================================== */
.ll-production-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.06rem 0.4rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  border-radius: 6px;
  vertical-align: middle;
}
.ll-board { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
.ll-board-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ll-board-title { font-family: "Playfair Display", "Lora", serif; font-size: 1.15rem; font-weight: 800; margin: 0; }
.ll-board-add {
  appearance: none; border: 1px solid var(--accent); background: var(--accent); color: #fff;
  font-weight: 700; font-size: 0.85rem; padding: 0.42rem 0.7rem; border-radius: 10px; cursor: pointer;
  transition: transform 0.1s;
}
.ll-board-add:active { transform: scale(0.97); }
.ll-board-next { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--text-secondary); min-height: 1.1rem; }
.ll-board-next-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lane, var(--accent)); flex: 0 0 auto; }
.ll-board-lanes { display: flex; flex-direction: column; gap: 0.5rem; }

/* Cross-batch shopping list (P1d) — read-only, collapsed by default. */
.ll-board-shop {
  margin-top: 0.6rem; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--ll-card-radius, 14px); overflow: hidden;
}
.ll-shop-summary {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.85rem;
  cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
}
.ll-shop-summary::-webkit-details-marker { display: none; }
.ll-shop-summary::after {
  content: '⌄'; margin-left: 0.15rem; opacity: 0.5; transition: transform 0.2s;
  font-size: 1.1rem; line-height: 1;
}
.ll-board-shop[open] .ll-shop-summary::after { transform: rotate(180deg); }
.ll-shop-title { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.ll-shop-meta { margin-left: auto; font-size: 0.8rem; color: var(--text-secondary); font-weight: 500; }
.ll-shop-body { padding: 0 0.85rem 0.7rem; display: flex; flex-direction: column; }
.ll-shop-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.32rem 0; font-size: 0.9rem;
}
.ll-shop-row span { color: var(--text-secondary); min-width: 0; }
.ll-shop-row strong { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ll-shop-subtotal span, .ll-shop-subtotal strong { font-weight: 700; }
.ll-shop-divider { height: 1px; background: var(--border); margin: 0.3rem 0; opacity: 0.7; }

/* Cost & price panel (P2a) — read-only readout + manual pricing form. */
.ll-board-cost {
  margin-top: 0.6rem; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--ll-card-radius, 14px); overflow: hidden;
}
.ll-board-cost .ll-shop-summary { cursor: pointer; }
.ll-cost-body { padding: 0 0.85rem 0.85rem; }
.ll-cost-readout {
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px;
  padding: 0.75rem 0.85rem; margin-bottom: 0.85rem;
}
.ll-cost-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.1rem; }
.ll-cost-hero-label { font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }
.ll-cost-hero-val { font-size: 1.9rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.ll-cost-hero-sub { font-size: 0.78rem; color: var(--text-secondary); }
.ll-cost-breakdown { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; margin: 0.6rem 0 0.2rem; }
.ll-cost-chip {
  font-size: 0.72rem; padding: 0.18rem 0.5rem; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ll-cost-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.3rem 0; font-size: 0.9rem; border-top: 1px solid var(--border);
}
.ll-cost-breakdown + .ll-cost-row { border-top: 0; }
.ll-cost-row span { color: var(--text-secondary); }
.ll-cost-row strong { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ll-cost-row.is-below strong { color: var(--danger, #A83E3E); }
.ll-cost-warn {
  margin: 0.5rem 0 0; padding: 0.5rem 0.6rem; font-size: 0.82rem; line-height: 1.35;
  color: var(--danger, #A83E3E); background: color-mix(in srgb, var(--danger, #A83E3E) 10%, transparent);
  border-radius: 10px;
}
.ll-cost-group-title { margin: 0.7rem 0 0.35rem; font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.ll-cost-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.ll-cost-field { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.ll-cost-flabel { font-size: 0.76rem; color: var(--text-secondary); }
.ll-cost-input { display: flex; align-items: center; gap: 0.25rem; }
.ll-cost-input input {
  width: 100%; min-width: 0; padding: 0.42rem 0.5rem; font-size: 0.95rem;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-secondary);
  color: var(--text); font-variant-numeric: tabular-nums;
}
.ll-cost-suffix { font-size: 0.85rem; color: var(--text-secondary); }
.ll-cost-note { margin: 0.7rem 0 0; font-size: 0.75rem; color: var(--text-secondary); text-align: center; }
.ll-lane {
  display: flex; align-items: center; gap: 0.6rem; position: relative; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--ll-card-radius, 14px); padding: 0.6rem 0.75rem 0.6rem 0.9rem;
}
.ll-lane-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--lane, var(--accent)); }
.ll-lane-main {
  display: flex; align-items: center; gap: 0.6rem; flex: 1 1 auto; min-width: 0;
  background: none; border: 0; margin: 0; padding: 0; font: inherit; color: inherit;
  text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.1s;
}
.ll-lane-main:active { transform: scale(0.99); }
.ll-lane.is-overdue { border-color: var(--lane, var(--accent)); }
.ll-lane-icon { font-size: 1.3rem; flex: 0 0 auto; }
.ll-lane-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ll-lane-title { font-weight: 700; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ll-lane-step { font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ll-lane-step em { color: var(--lane, var(--accent)); font-style: normal; font-weight: 600; }
.ll-lane-chip { flex: 0 0 auto; font-size: 0.68rem; font-weight: 700; color: var(--lane, var(--accent)); border: 1px solid var(--lane, var(--accent)); border-radius: 999px; padding: 0.05rem 0.4rem; white-space: nowrap; opacity: 0.85; }
/* P3.3 batch-identity editor: colour + icon swatch pickers (≥44px tap targets).
   The editor is the app's only NESTED sheet — it opens over the batch-focus
   drawer, which stays open beneath — so its scrim/sheet pair sits one z-tier
   above the shared .ll-scrim(55)/.ll-drawer(60) contract. */
.ll-scrim-top { z-index: 65; }
.ll-batch-edit { z-index: 70; }
.ll-swatch-row, .ll-iconpick-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ll-swatch { width: 44px; height: 44px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
.ll-swatch.is-selected { border-color: var(--text, #111); box-shadow: 0 0 0 2px var(--bg-card, #fff), 0 0 0 4px var(--text, #111); }
.ll-iconpick { width: 44px; height: 44px; font-size: 1.3rem; line-height: 1; border-radius: 12px; border: 1px solid var(--border, rgba(0,0,0,0.15)); background: var(--bg-card, transparent); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.ll-iconpick.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.ll-swatch.is-taken:not(.is-selected), .ll-iconpick.is-taken:not(.is-selected) { opacity: 0.4; }
.ll-batch-edit-hint { font-size: 0.78rem; color: var(--text-secondary); margin: 0.1rem 0 0; }
.ll-batch-edit-save { width: 100%; min-height: 44px; font-size: 0.95rem; margin-top: 0.35rem; }

/* P4b cottage-food labels panel: reuses the costing form grid; the preview is
   a dashed "cut-out" card mirroring the printed PDF label. */
.ll-board-labels { margin-top: 0.6rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--ll-card-radius, 14px); overflow: hidden; }
.ll-label-preview {
  margin: 0.6rem 0 0.3rem; padding: 0.7rem 0.8rem; border: 1.5px dashed var(--border);
  border-radius: 10px; font-size: 0.8rem; line-height: 1.45; background: var(--bg-card);
}
.ll-label-preview .ll-label-name { font-size: 0.95rem; }
.ll-label-preview .ll-label-est { font-size: 0.72rem; color: var(--text-secondary); font-style: italic; }
.ll-label-preview .ll-label-disc { font-size: 0.72rem; color: var(--text-secondary); }
.ll-board-labels .ll-cost-input select { width: 100%; min-height: 34px; }
.ll-board-labels .ll-board-plan { margin-top: 0.5rem; }

/* Label artwork slot (her designs, stored on-device) + print-variant row. */
.ll-label-artwork { margin-top: 0.6rem; }
.ll-label-artwork-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
}
.ll-label-artwork-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
}
.ll-artwork-pick { position: relative; overflow: hidden; cursor: pointer; }
.ll-artwork-mode { margin-top: 0.5rem; }
.ll-label-print-row {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.ll-label-print-row .ll-board-plan { flex: 1 1 auto; }

/* A3 Get-paid panel: market-stand payment QRs (Stripe link / Venmo) + cash
   change helper. QRs render as inline SVG from the vendored encoder. */
.ll-board-paid { margin-top: 0.6rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--ll-card-radius, 14px); overflow: hidden; }
.ll-board-paid[open] .ll-shop-summary::after { transform: rotate(180deg); }
.ll-paid-qrs { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 0.7rem; }
.ll-paid-qr { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.ll-paid-qr-svg { width: min(46vw, 220px); aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: #ffffff; }
.ll-paid-qr-svg svg { display: block; width: 100%; height: 100%; }
.ll-paid-qr-label { font-size: 0.78rem; color: var(--text-secondary); text-align: center; max-width: 220px; }
.ll-paid-cash { margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.3rem; }
.ll-paid-cash-row { display: flex; align-items: center; gap: 0.5rem; }
.ll-paid-cash-row .sd-inline-affix { flex: 1 1 0; min-width: 0; }
.ll-paid-change { font-size: 0.95rem; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--success, #2E7D32); }
.ll-paid-change.is-short { color: var(--danger, #A83E3E); }

/* P5 orders panel: 7-day demand strip + compact order/par rows. */
.ll-board-orders { margin-top: 0.6rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--ll-card-radius, 14px); overflow: hidden; }
.ll-week-strip { display: flex; gap: 0.35rem; margin: 0.2rem 0 0.5rem; }
.ll-week-chip {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  padding: 0.35rem 0.1rem; border: 1px solid var(--border); border-radius: 10px;
  font-size: 0.7rem; color: var(--text-secondary);
}
.ll-week-chip.has-demand { border-color: var(--accent); color: var(--text); }
.ll-week-chip.has-demand .ll-week-chip-qty { color: var(--accent); font-weight: 700; }
.ll-week-chip.is-today { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ll-week-chip-qty { font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.ll-week-line { font-size: 0.8rem; margin: 0.15rem 0; }
.ll-week-par { color: var(--text-secondary); font-size: 0.72rem; }
.ll-order-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
.ll-order-row:last-of-type { border-bottom: none; }
.ll-order-row.is-overdue .ll-order-when { color: var(--accent); font-weight: 700; }
.ll-order-main { flex: 1; display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.ll-order-when { font-size: 0.72rem; color: var(--text-secondary); }
.ll-order-what { font-size: 0.85rem; overflow-wrap: anywhere; }
.ll-order-row .ll-icon-btn { flex: 0 0 auto; width: 38px; height: 38px; }
.ll-order-row.is-done { opacity: 0.65; }
.ll-orders-done > summary { cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.ll-order-weekly { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; margin: 0.45rem 0 0.1rem; }

/* A4 notify-customer chips: a momentary picker expanded under one order row.
   Chips hand a template body to the OS share sheet (nothing sent by the app). */
.ll-order-notify {
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
  padding: 0.45rem 0 0.55rem; border-bottom: 1px solid var(--border);
}
.ll-order-notify[hidden] { display: none; }
.ll-notify-chip { font-size: 0.78rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ll-notify-plan { border-color: var(--accent); color: var(--accent); }
.ll-order-notify .ll-cost-note { flex: 1 1 100%; margin: 0.1rem 0 0; text-align: left; }
.ll-lane-clock { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.95rem; flex: 0 0 auto; }
.ll-lane.is-overdue .ll-lane-clock { color: var(--lane, var(--accent)); }
.ll-lane-actions { display: flex; align-items: center; gap: 0.35rem; flex: 0 0 auto; }
.ll-lane-btn {
  appearance: none; border: 1px solid var(--border); background: transparent; color: var(--text);
  border-radius: 8px; padding: 0.28rem 0.5rem; font-size: 0.78rem; cursor: pointer; transition: transform 0.1s;
}
.ll-lane-btn-ready { border-color: var(--lane, var(--accent)); background: var(--lane, var(--accent)); color: #fff; font-weight: 700; }
.ll-lane-btn-x { color: var(--text-secondary); line-height: 1; }
.ll-lane-btn:active { transform: scale(0.95); }

/* Batch focus — full-screen baker's display for one Production lane (R13a W4).
   Extends the .ll-drawer bottom-sheet with a taller, centered "big countdown"
   layout; reuses the .ll-live-btn action styles from the single-bake card. */
.ll-batch-focus { max-height: 94vh; }
.ll-batch-focus .ll-drawer-inner { max-height: 94vh; min-height: 58vh; }
.ll-batch-focus .ll-drawer-head h2 { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.ll-batch-focus .ll-drawer-head h2 .ll-bf-icon { font-size: 1.15rem; flex: 0 0 auto; }
.ll-bf {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0.5rem; padding: 1.5rem 0.5rem 0.5rem;
}
.ll-bf-stepmeta { font-size: 0.78rem; color: var(--text-secondary); letter-spacing: 0.05em; text-transform: uppercase; margin: 0; }
.ll-bf-step { font-family: "Playfair Display", "Lora", serif; font-size: 1.5rem; font-weight: 800; margin: 0; line-height: 1.15; }
.ll-bf-cue { color: var(--lane, var(--accent)); font-family: inherit; font-size: 0.95rem; font-weight: 700; }
.ll-bf-clock {
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 3.4rem; line-height: 1.05;
  margin: 0.4rem 0; color: var(--text); letter-spacing: -0.01em;
}
.ll-bf-clock.is-over { color: var(--lane, var(--accent)); }
.ll-bf-hint { font-size: 0.85rem; color: var(--text-secondary); max-width: 30ch; margin: 0 auto; line-height: 1.5; }
.ll-bf-next { font-size: 0.85rem; color: var(--text-secondary); margin: 0.3rem 0 0; }
.ll-bf-actions { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; max-width: 22rem; margin: 1.3rem auto 0.4rem; }
/* The .ll-live-btn styles are tuned for the dark live card (white text on a
   tinted surface). The batch-focus overlay uses the light drawer surface, so
   restyle to theme tokens here for legible contrast. */
.ll-bf-actions .ll-live-btn {
  width: 100%; justify-content: center; display: flex;
  background: transparent; border: 1px solid var(--border); color: var(--text); backdrop-filter: none;
}
.ll-bf-actions .ll-live-btn-primary,
.ll-bf-actions .ll-live-btn-ready {
  background: var(--lane, var(--accent)); border-color: var(--lane, var(--accent)); color: #fff;
}
.ll-bf-remove { color: var(--text-secondary); border-color: transparent; }
.ll-bf-done { justify-content: center; min-height: 42vh; }
.ll-bf-done-emoji { font-size: 3rem; }
.ll-bf-done-title { font-family: "Playfair Display", "Lora", serif; font-size: 1.6rem; font-weight: 800; margin: 0.3rem 0 0; }
/* Paused batch — frozen clock + a quiet chip; the lane dims on the board. */
.ll-bf-paused {
  display: inline-block; margin-left: 0.4rem; vertical-align: middle;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-secondary); border: 1px solid var(--border); border-radius: 6px; padding: 0.04rem 0.35rem;
}
.ll-bf.is-paused .ll-bf-clock { opacity: 0.5; }
.ll-lane.is-paused { opacity: 0.72; }
.ll-lane.is-paused .ll-lane-clock { color: var(--text-secondary); font-weight: 600; }

/* Scheduled (queued, not-yet-started) lane — a muted "waiting to begin" look,
   visibly distinct from a running lane: dashed accent bar + a subtly tinted,
   lower-emphasis card. The "Starts H:MM" text sits in .ll-lane-step; the clock
   slot is blank (updateBoardCountdowns clears it for inactive timers). */
.ll-lane.is-scheduled {
  background: color-mix(in srgb, var(--lane, var(--accent)) 4%, var(--bg-card));
  border-style: dashed;
}
.ll-lane.is-scheduled .ll-lane-bar {
  background: repeating-linear-gradient(
    to bottom,
    var(--lane, var(--accent)) 0 4px,
    transparent 4px 8px
  );
}
.ll-lane.is-scheduled .ll-lane-title { color: var(--text-secondary); }
.ll-lane.is-scheduled .ll-lane-step { color: var(--text-secondary); font-weight: 600; }
.ll-lane-btn-start {
  border-color: var(--lane, var(--accent));
  color: var(--lane, var(--accent));
  font-weight: 700;
}

/* Plan-the-day (R13b W4): a secondary board-head button + the deadline sheet +
   the feasibility verdict banner (3 states). All only visible with Production ON. */
.ll-board-head-actions { display: flex; align-items: center; gap: 0.4rem; flex: 0 0 auto; }
.ll-board-plan {
  appearance: none; border: 1px solid var(--accent); background: transparent; color: var(--accent);
  font-weight: 700; font-size: 0.85rem; padding: 0.42rem 0.7rem; border-radius: 10px; cursor: pointer;
  transition: transform 0.1s;
}
.ll-board-plan:active { transform: scale(0.97); }

.ll-board-verdict {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem;
  border: 1px solid var(--border); border-radius: 12px; padding: 0.55rem 0.7rem;
  font-size: 0.85rem; font-weight: 600;
}
.ll-board-verdict-main { flex: 1 1 auto; min-width: 0; }
.ll-board-verdict.is-feasible {
  background: color-mix(in srgb, #3f9a52 12%, var(--bg-card)); border-color: color-mix(in srgb, #3f9a52 55%, var(--border));
  color: color-mix(in srgb, #2e7a3e 85%, var(--text));
}
.ll-board-verdict.is-tight {
  background: color-mix(in srgb, #d99a2b 14%, var(--bg-card)); border-color: color-mix(in srgb, #d99a2b 60%, var(--border));
  color: color-mix(in srgb, #9a6a12 82%, var(--text));
}
.ll-board-verdict.is-infeasible {
  background: color-mix(in srgb, #c34c3b 13%, var(--bg-card)); border-color: color-mix(in srgb, #c34c3b 60%, var(--border));
  color: color-mix(in srgb, #9a3125 82%, var(--text));
}
.ll-board-verdict-fix {
  appearance: none; border: 1px solid currentColor; background: transparent; color: inherit;
  font-weight: 700; font-size: 0.8rem; padding: 0.28rem 0.55rem; border-radius: 8px; cursor: pointer;
  flex: 0 0 auto; transition: transform 0.1s;
}
.ll-board-verdict-fix:active { transform: scale(0.96); }
.ll-board-verdict-warn {
  flex: 1 1 100%; font-weight: 500; font-size: 0.78rem; opacity: 0.85;
}

/* Plan-the-day sheet — inherits the .ll-drawer bottom-sheet; a compact form. */
.ll-plan-day .ll-drawer-body { display: flex; flex-direction: column; gap: 0.7rem; }
.ll-plan-day-solve { align-self: stretch; text-align: center; margin-top: 0.3rem; padding: 0.6rem; font-size: 0.95rem; }

/* Progressive-unlock nudge — one-time "turn on Production" banner. */
.ll-nudge {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--bg-card); border: 1px solid var(--accent);
  border-radius: 14px; padding: 0.7rem 0.85rem; margin-top: 0.5rem; max-width: 440px;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--accent) 22%, transparent);
  opacity: 0; transform: translateY(8px); transition: opacity 0.25s, transform 0.25s;
}
.ll-nudge.is-in { opacity: 1; transform: translateY(0); }
.ll-nudge-icon { font-size: 1.4rem; flex: 0 0 auto; }
.ll-nudge-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ll-nudge-body strong { font-size: 0.88rem; }
.ll-nudge-body span { font-size: 0.78rem; color: var(--text-secondary); }
.ll-nudge-actions { display: flex; align-items: center; gap: 0.35rem; flex: 0 0 auto; }
.ll-nudge-on {
  appearance: none; border: 0; background: var(--accent); color: #fff; font-weight: 700;
  font-size: 0.8rem; padding: 0.4rem 0.7rem; border-radius: 9px; cursor: pointer;
}
.ll-nudge-x { appearance: none; border: 0; background: transparent; color: var(--text-secondary); font-size: 0.95rem; cursor: pointer; padding: 0.2rem 0.3rem; }

/* Start-card wraps on narrow screens. */
@media (max-width: 420px) {
  .ll-start-card { flex-direction: column; align-items: stretch; }
  .ll-start-btn { justify-content: center; }
}

/* ===================================================================
   Kitchen timers (concurrent countdown stack)
   =================================================================== */

.ll-ktimers { display: flex; flex-direction: column; gap: 0.75rem; }

.ll-ktimers-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.ll-ktimers-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ll-ktimers-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.ll-preset-chip {
  appearance: none;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.ll-preset-chip:active { transform: scale(0.96); }

.ll-ktimers-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 36px;
}

.ll-ktimers-empty {
  padding: 0.875rem 1rem;
  background: var(--bg-secondary);
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--text-secondary);
  font-size: 0.88rem;
  text-align: center;
}

/* One timer row */
.ll-ktimer {
  position: relative;
  display: grid;
  grid-template-columns: 5px 1fr;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem 0.75rem 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.15s;
  animation: ll-ktimer-in 260ms var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
}

@keyframes ll-ktimer-in {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: none; }
}

.ll-ktimer-strip {
  background: var(--ktimer-color, var(--accent));
  border-radius: 0 2px 2px 0;
}

.ll-ktimer-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.25rem 0;
  min-width: 0;
}

.ll-ktimer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
}

.ll-ktimer-label {
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.ll-ktimer-x {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 1.1rem;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.ll-ktimer-clock {
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ktimer-color, var(--accent));
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-top: 0.125rem;
}

.ll-ktimer.is-idle .ll-ktimer-clock { color: var(--text-secondary); }
.ll-ktimer.is-paused .ll-ktimer-clock { opacity: 0.7; }
.ll-ktimer.is-done .ll-ktimer-clock { color: var(--success, #5a8a4a); }
.ll-ktimer.is-overdue .ll-ktimer-clock {
  color: var(--error, #c45a3c);
  animation: ll-ktimer-flash 0.9s ease-in-out infinite;
}
.ll-ktimer.is-done .ll-ktimer-strip { background: var(--success, #5a8a4a); }
.ll-ktimer.is-overdue .ll-ktimer-strip {
  background: var(--error, #c45a3c);
  animation: ll-ktimer-flash 0.9s ease-in-out infinite;
}

@keyframes ll-ktimer-flash {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.ll-ktimer.is-overdue {
  border-color: color-mix(in srgb, var(--error, #c45a3c) 40%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--error, #c45a3c) 18%, transparent);
}

.ll-ktimer-progress {
  height: 4px;
  background: var(--bg-secondary);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 0.125rem;
}
.ll-ktimer-bar {
  height: 100%;
  background: var(--ktimer-color, var(--accent));
  border-radius: 999px;
  transition: width 0.3s linear;
  box-shadow: 0 0 8px color-mix(in srgb, var(--ktimer-color, var(--accent)) 45%, transparent);
}

.ll-ktimer-controls {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr 1.2fr;
  gap: 0.375rem;
  margin-top: 0.375rem;
}

.ll-ktimer-btn {
  appearance: none;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.35rem 0.3rem;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.1s;
}
.ll-ktimer-btn:active { transform: scale(0.96); }
.ll-ktimer-btn-main {
  background: var(--ktimer-color, var(--accent));
  border-color: var(--ktimer-color, var(--accent));
  color: #fff;
  font-size: 0.9rem;
}
.ll-ktimer-btn-ghost { background: transparent; }

/* Add-custom form */
.ll-ktimers-add {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.5rem;
  align-items: center;
}

.ll-ktimers-add input[type="text"] {
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  font-size: 0.9rem;
  min-width: 0;
}

.ll-ktimers-add-duration {
  display: inline-flex;
  align-items: stretch;
}

.ll-ktimers-add-duration input[type="number"] {
  width: 68px;
  padding: 0.55rem 0.4rem;
  border-radius: 10px 0 0 10px;
  border: 1px solid var(--input-border);
  border-right: none;
  background: var(--input-bg);
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  text-align: right;
}

.ll-ktimers-add-duration .sd-affix {
  border-radius: 0 10px 10px 0;
  padding: 0 0.75rem;
}

.ll-ktimers-add-btn {
  appearance: none;
  background: var(--accent);
  border: none;
  color: #fff;
  padding: 0 1rem;
  min-height: 40px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, filter 0.15s;
}
.ll-ktimers-add-btn:active { transform: scale(0.97); }

@media (max-width: 420px) {
  .ll-ktimers-add { grid-template-columns: 1fr 1fr; }
  .ll-ktimers-add input[type="text"] { grid-column: 1 / -1; }
}

/* ===================================================================
   Toasts (Phase 3 QOL)
   =================================================================== */

.ll-toasts {
  position: fixed;
  left: 50%;
  bottom: calc(var(--ll-tabbar-h) + env(safe-area-inset-bottom, 0px) + 90px);
  transform: translateX(-50%);
  z-index: 70;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  max-width: 90vw;
}

.ll-toast {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: var(--text);
  color: var(--bg-card);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255,255,255,0.06) inset;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  white-space: nowrap;
  max-width: 88vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ll-toast.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.ll-toast.is-out {
  opacity: 0;
  transform: translateY(-4px) scale(0.97);
  transition-duration: 0.18s;
}

.ll-toast-icon {
  font-size: 1rem;
  line-height: 1;
}

.ll-toast-success { background: var(--success, #5a8a4a); color: #fff; }
.ll-toast-warn    { background: var(--warning, #ad7b1b); color: #fff; }
.ll-toast-error   { background: var(--error, #c45a3c); color: #fff; }

/* ===================================================================
   Disabled pager buttons
   =================================================================== */

.ll-pager-btn:disabled,
.ll-pager-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  border-color: var(--border);
  color: var(--text-secondary);
}

/* ===================================================================
   Dough Diary (Phase 4)
   =================================================================== */

/* Log-this-bake card on Plan view. */
.ll-log-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: linear-gradient(135deg, var(--bg-card), color-mix(in srgb, var(--accent) 10%, var(--bg-card)));
}
.ll-log-card .ll-card-title { margin-bottom: 0.125rem; font-size: 0.95rem; }
.ll-log-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 25%, transparent);
  transition: transform 0.1s, box-shadow 0.2s;
}
.ll-log-btn:active { transform: scale(0.96); }
.ll-log-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.ll-log-icon { font-size: 1.05rem; line-height: 1; }

/* Diary list + cards. */
.ll-diary-stage { display: flex; flex-direction: column; gap: 0.75rem; }

.ll-diary-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.125rem 0.25rem 0.25rem;
}
.ll-diary-count {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 600;
}
.ll-diary-clear {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.82rem;
  padding: 0.25rem 0.4rem;
  border-radius: 8px;
  cursor: pointer;
}

.ll-diary-list { display: flex; flex-direction: column; gap: 0.65rem; }
.ll-diary-card {
  appearance: none;
  text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.85rem 0.95rem;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title  date"
    "meta   meta"
    "stars  badge";
  gap: 0.3rem 0.6rem;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.15s, box-shadow 0.15s;
  color: inherit;
}
.ll-diary-card.has-photo {
  grid-template-columns: 72px 1fr auto;
  grid-template-areas:
    "thumb  title  date"
    "thumb  meta   meta"
    "thumb  stars  badge";
  gap: 0.3rem 0.75rem;
}
.ll-diary-card-thumb {
  grid-area: thumb;
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--text-secondary) 10%, transparent) center/cover no-repeat;
  align-self: center;
  flex-shrink: 0;
}
.ll-diary-card:active { transform: scale(0.985); }

.ll-diary-card-title {
  grid-area: title;
  font-family: "Playfair Display", serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.ll-diary-card-date {
  grid-area: date;
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
  align-self: center;
}
.ll-diary-card-meta {
  grid-area: meta;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.4;
}
.ll-diary-card-meta strong { color: var(--text); font-weight: 600; }
.ll-diary-card-stars { grid-area: stars; display: flex; gap: 1px; }
.ll-diary-card-badge {
  grid-area: badge;
  justify-self: end;
  align-self: center;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-secondary) 8%, transparent);
}

/* ---- Diary: compare mode + actions (R2) ------------------------------ */
.ll-diary-head-actions { display: flex; align-items: center; gap: 0.35rem; }
.ll-diary-compare-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.ll-diary-head-compare .ll-diary-clear { color: var(--accent); font-weight: 700; }

.ll-diary-card-pick {
  grid-area: badge;
  justify-self: end;
  align-self: center;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--text-secondary) 35%, transparent);
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
  background: transparent;
}
.ll-diary-card-pick.is-picked { background: var(--accent); border-color: var(--accent); }
.ll-diary-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* "Re-use this recipe" — primary-ish action inside the detail sheet. */
.ll-sheet-reuse {
  appearance: none;
  width: 100%;
  margin: 0.85rem 0 0.25rem;
  padding: 0.7rem 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-card));
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: background 0.15s, transform 0.1s;
}
.ll-sheet-reuse:active { transform: scale(0.99); }

/* Captured-formula read-only JSON disclosure. */
.ll-sheet-formula { margin: 0.5rem 0 0.25rem; }
.ll-sheet-formula > summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 0.4rem 0;
  list-style: none;
}
.ll-sheet-formula > summary::-webkit-details-marker { display: none; }
.ll-sheet-formula > summary::after { content: " +"; font-weight: 800; }
.ll-sheet-formula[open] > summary::after { content: " −"; }
.ll-sheet-formula-hint { font-weight: 400; opacity: 0.7; }
.ll-sheet-formula-json {
  margin: 0.4rem 0 0;
  padding: 0.7rem 0.8rem;
  background: color-mix(in srgb, var(--text-secondary) 7%, transparent);
  border-radius: 10px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-secondary);
  white-space: pre;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- Diary: compare 50/50 split drawer ------------------------------- */
.ll-cmp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}
.ll-cmp-pane { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.ll-cmp-photo {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: color-mix(in srgb, var(--text-secondary) 10%, transparent) center/cover no-repeat;
}
.ll-cmp-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed color-mix(in srgb, var(--text-secondary) 30%, transparent);
}
.ll-cmp-photo-empty span { font-size: 0.74rem; color: var(--text-secondary); }
.ll-cmp-pane-head { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.ll-cmp-pane-name {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--text);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ll-cmp-pane-date { font-size: 0.74rem; color: var(--text-secondary); }
.ll-cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.ll-cmp-table th {
  text-align: right;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  font-weight: 700;
  padding: 0.25rem 0.4rem;
}
.ll-cmp-table th:first-child { text-align: left; }
.ll-cmp-table td {
  padding: 0.4rem;
  border-top: 1px solid var(--border);
  text-align: right;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ll-cmp-row-label { text-align: left !important; color: var(--text-secondary) !important; font-weight: 600; }
.ll-cmp-table tr.is-diff td { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.ll-cmp-table tr.is-diff .ll-cmp-row-a,
.ll-cmp-table tr.is-diff .ll-cmp-row-b { color: var(--accent); font-weight: 700; }
.ll-cmp-legend { margin-top: 0.7rem; font-size: 0.76rem; }

/* Star rows — display (non-interactive) and picker (interactive). */
.ll-stars { display: inline-flex; gap: 1px; line-height: 1; }
.ll-stars-star {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  font-size: 1rem;
  color: color-mix(in srgb, var(--text-secondary) 45%, transparent);
  line-height: 1;
  letter-spacing: 1px;
}
.ll-stars-star.is-on { color: #f5b23a; }
.ll-stars-picker .ll-stars-star {
  font-size: 1.75rem;
  padding: 0.1rem 0.2rem;
  cursor: pointer;
  transition: transform 0.08s;
}
.ll-stars-picker .ll-stars-star:active { transform: scale(0.92); }

/* Diary detail sheet — reuses .ll-drawer pattern. */
.ll-sheet .ll-drawer-head h2 {
  font-family: "Playfair Display", serif;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.ll-sheet-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem 1rem;
  margin: 0.5rem 0 1rem;
}
.ll-sheet-stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.ll-sheet-stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  font-weight: 600;
}
.ll-sheet-stat-value {
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 600;
}
.ll-sheet-section-label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  font-weight: 600;
  margin: 0.75rem 0 0.35rem;
}
.ll-sheet-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}
.ll-sheet-notes {
  width: 100%;
  min-height: 96px;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.5;
  resize: vertical;
}
.ll-sheet-notes:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  outline-offset: 1px;
  border-color: var(--accent);
}
/* Photo block — shown when an entry has a photo. */
.ll-sheet-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 240px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--text-secondary) 12%, transparent) center/cover no-repeat;
  margin: 0.25rem 0 0.75rem;
  overflow: hidden;
}
.ll-sheet-photo-remove {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(6px);
}

.ll-sheet-addphoto {
  appearance: none;
  background: transparent;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 40%, var(--border));
  color: var(--accent);
  padding: 0.9rem 1rem;
  border-radius: 14px;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin: 0.25rem 0 0.75rem;
  transition: background 0.15s, border-color 0.15s;
}
.ll-sheet-addphoto:active { transform: scale(0.985); }

.ll-sheet-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.ll-sheet-delete {
  appearance: none;
  background: transparent;
  border: 1px solid color-mix(in srgb, #c53f3f 35%, var(--border));
  color: #c53f3f;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}
.ll-sheet-done {
  appearance: none;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 0.55rem 1.25rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}

/* ---- Hide legacy shell bits we no longer render -------------------- */

.site-header,
.site-footer,
.page-wrapper,
.content-grid {
  all: unset;
  display: contents;
}

/* ---- R10 "Trust the Timer" layer ------------------------------------ */

/* Inputs must never overflow their grid column — datetime-local especially
   has a large intrinsic width that used to overlap the neighboring field on
   the Starter tab at 390px. */
.ll-field > input,
.ll-field > select,
.ll-field .sd-inline-affix input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* While the floating mini timer bar is visible it needs its own share of
   bottom padding — --ll-stage-pad-bottom only accounts for the tab bar, so
   the bar used to occlude the last ~56px of every view. */
body.has-timerbar .ll-stage {
  padding-bottom: calc(var(--ll-stage-pad-bottom) + 62px);
}

/* Live-card banner shown when Android's exact-alarm permission is off. */
.ll-live-exact-warn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  font-size: 0.82rem;
  line-height: 1.35;
}
.ll-live-exact-warn .ll-live-btn { flex: 0 0 auto; }

/* "Bake in progress" state of the Plan-tab CTA — same button, calmer job. */
.ll-start-bake-cta.is-live .ll-start-bake-cta__icon {
  animation: ll-cta-live-pulse 2.4s ease-in-out infinite;
}
@keyframes ll-cta-live-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* ---- "What if…?" panel (previously completely unstyled) --------------- */

.ll-whatif {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin: 0 0 0.9rem;
  overflow: hidden;
}

.ll-whatif__summary {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.8rem 0.9rem;
  min-height: 48px;
  cursor: pointer;
  list-style: none;
}
.ll-whatif__summary::-webkit-details-marker { display: none; }
.ll-whatif__summary::marker { content: ''; }

.ll-whatif__summary-icon { font-size: 1.15rem; flex: 0 0 auto; }

.ll-whatif__summary-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}

.ll-whatif__summary-title { font-weight: 700; font-size: 0.95rem; }

.ll-whatif__summary-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

.ll-whatif__summary-chev {
  flex: 0 0 auto;
  font-size: 1.3rem;
  color: var(--text-secondary);
  transition: transform 0.18s ease;
}
.ll-whatif[open] .ll-whatif__summary-chev { transform: rotate(90deg); }

.ll-whatif__body { padding: 0 0.9rem 0.4rem; }

.ll-whatif__lead {
  margin: 0 0 0.7rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.ll-whatif-group { margin-bottom: 0.9rem; }

.ll-whatif-group__title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.ll-whatif-row {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.6rem 0.7rem;
  margin-bottom: 0.5rem;
}

.ll-whatif-row__head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.ll-whatif-row__badge {
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.1rem 0.45rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

.ll-whatif-row__feel {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

.ll-whatif-row__deltas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.ll-whatif-delta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.82rem;
}

.ll-whatif-delta__k {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--text-secondary);
}
.ll-whatif-delta__k::after { content: ':'; }

.ll-whatif-delta__v { text-align: right; }

.ll-whatif-delta__arrow { margin-right: 0.2rem; }

.ll-whatif-delta.is-faster .ll-whatif-delta__v { color: var(--accent); }
.ll-whatif-delta.is-slower .ll-whatif-delta__v { color: var(--text-secondary); }

.ll-whatif-row__rise {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

.ll-whatif__foot {
  margin: 0;
  padding: 0.6rem 0.9rem 0.8rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.4;
  border-top: 1px solid var(--border);
}

/* ---- Cue-based checkpoints (live card) ------------------------------- */
/* Bulk/proof/retard are dough-decided: the card reframes from a countdown
   into "watch the dough", and once past the estimate offers a clear ready
   call instead of silently marching to the next step. */
.ll-live-cue-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.ll-live-checkpoint-hint {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text-secondary);
}
.ll-live-card.is-checkpoint.is-overdue .ll-live-checkpoint-hint {
  color: var(--text);
  font-weight: 600;
}
/* The overdue checkpoint's countdown reads as "over estimate", not "late" —
   keep it calm (accent) rather than alarm-red. */
.ll-live-card.is-checkpoint.is-overdue .ll-live-clock {
  color: var(--accent);
}
.ll-live-btn-ready {
  flex: 1;
  min-height: 48px;
  font-weight: 700;
}

/* ---- Print: Starter & Levain build sheet ---------------------------- */

@media print {
  @page {
    margin: 0.55in;
  }

  .ll-header,
  .ll-tabbar,
  .ll-drawer,
  .ll-scrim,
  .ll-view:not(#view-feed),
  #view-feed .ll-view-inner > :not(.ll-view-head):not(.ll-levain):not(.ll-levain-result),
  #view-feed .ll-view-head picture,
  .ll-levain .ll-card-head button,
  .ll-levain-range,
  .ll-levain-ratios-label,
  .ll-levain-ratios,
  .ll-levain-actions {
    display: none !important;
  }

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

  .ll-stage {
    max-width: none;
    min-height: 0;
    padding: 0;
    margin: 0;
  }

  .ll-view {
    padding: 0;
  }

  .ll-view-inner {
    gap: 0.6rem;
  }

  .ll-view-head {
    margin: 0 0 0.35rem;
  }

  .ll-view-eyebrow,
  .ll-view-subtitle,
  .ll-levain-meta,
  .ll-levain-result-row span {
    color: #333 !important;
  }

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

  .ll-levain-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ll-temp-input .ll-segmented {
    display: none !important;
  }

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

  .ll-levain-result-row strong {
    color: #111 !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-brand:hover { text-decoration: none; color: var(--text); }
.ll-icon-btn:hover { background: var(--bg-secondary); color: var(--text); }
.ll-header .theme-toggle:hover { background: var(--bg-secondary); }
.ll-link-btn:hover { color: var(--accent-hover); }
.ll-slider-value:hover { background: var(--bg-secondary); }
.ll-levain .ll-field:not(.ll-levain-range-field):hover .ll-helper {
  max-height: 3.8rem;
  opacity: 1;
  margin-top: 0.08rem;
}
.ll-start-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 35%, transparent); }
.ll-live-btn:hover { background: rgba(255,255,255,0.24); }
.ll-live-btn-primary:hover { background: #fff; }
.ll-timerbar-body:hover { background: rgba(255,255,255,0.1); }
.ll-timerbar-action:hover { background: rgba(255,255,255,0.28); }
.ll-pager-btn:hover { border-color: var(--accent); color: var(--accent); }
.ll-bf-actions .ll-live-btn:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.ll-preset-chip:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
.ll-ktimer-x:hover { background: var(--bg-secondary); color: var(--error); }
.ll-ktimer-btn:hover { border-color: var(--accent); color: var(--accent); }
.ll-ktimer-btn-main:hover { color: #fff; filter: brightness(1.05); }
.ll-ktimers-add-btn:hover { filter: brightness(1.05); }
.ll-log-btn:hover { transform: translateY(-1px); }
.ll-diary-clear:hover { color: var(--accent); }
.ll-diary-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 12%, transparent); }
.ll-diary-compare-btn:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.ll-sheet-reuse:hover { background: color-mix(in srgb, var(--accent) 16%, var(--bg-card)); }
.ll-stars-picker .ll-stars-star:hover { transform: scale(1.15); }
.ll-sheet-photo-remove:hover { background: rgba(0, 0, 0, 0.75); }
.ll-sheet-addphoto:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: var(--accent);
}
.ll-sheet-delete:hover { background: color-mix(in srgb, #c53f3f 10%, transparent); }
}

/* A5 native-feel: app chrome is not selectable text. A long-press on a tab,
   button, or card must never raise the OS text-selection/callout UI. Form
   fields and genuinely copyable readouts opt back in below; the main copy
   flows already have explicit Copy buttons. */
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
input, textarea, select, [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}
.sd-result-card, .ll-label-preview, .ll-levain-quick, .sd-term-tip,
.ll-bf-clock, .ll-paid-change {
  -webkit-user-select: text;
  user-select: text;
}
/* Kill the 300ms-legacy double-tap heuristics on the controls people mash. */
button, [role="tab"], .sd-chip, .ll-icon-btn, .ll-tab, summary, a {
  touch-action: manipulation;
}

/* ---- A2 Market Stand kiosk ------------------------------------------------
   Customer-facing full-screen ordering on a tablet. Big type, big targets
   (child-proof 64px minimum), no app chrome. body.is-kiosk hides the shell. */
body.is-kiosk .ll-tabbar,
body.is-kiosk .ll-header,
body.is-kiosk .ll-timerbar { display: none !important; }
/* Full-bleed: the kiosk ignores the app column, and its view must carry NO
   transform — an (even identity) transformed ancestor would turn the fixed
   cart bar and lock button into column-relative elements. */
body.is-kiosk main.ll-stage { max-width: none; padding: 0; }
body.is-kiosk .ll-view[data-view="kiosk"] { transform: none !important; animation: none !important; }

.ll-kiosk { min-height: 100dvh; display: flex; flex-direction: column; position: relative; }
.ll-kiosk-center {
  flex: 1; min-height: 80dvh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1rem; text-align: center; padding: 2rem 1.5rem;
}
.ll-kiosk-h1 { font-size: clamp(2rem, 6vw, 3.2rem); margin: 0; }
.ll-kiosk-sub { font-size: clamp(1rem, 2.6vw, 1.3rem); color: var(--text-secondary); max-width: 34ch; margin: 0; }
.ll-kiosk-error { color: var(--danger, #A83E3E); font-weight: 600; margin: 0; }
.ll-kiosk-check { font-size: clamp(3rem, 10vw, 5rem); line-height: 1; }

.ll-kiosk-attract {
  flex: 1; min-height: 100dvh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1.2rem; border: 0; background: transparent; color: var(--text);
  cursor: pointer; -webkit-tap-highlight-color: transparent; font: inherit;
}
.ll-kiosk-brand { font-family: Lora, Georgia, serif; font-size: clamp(2.2rem, 7vw, 4rem); font-weight: 700; }
.ll-kiosk-attract-icon { font-size: clamp(3.5rem, 12vw, 6rem); line-height: 1; animation: ll-kiosk-bob 2.4s ease-in-out infinite; }
@keyframes ll-kiosk-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.ll-kiosk-attract-cta {
  font-size: clamp(1.2rem, 3.4vw, 1.7rem); font-weight: 700; color: var(--accent);
  border: 2px solid var(--accent); border-radius: 999px; padding: 0.7rem 2.2rem;
}

.ll-kiosk-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 4.25rem 0.5rem 1.25rem; /* right inset clears the fixed lock */
}
.ll-kiosk-head-brand { font-family: Lora, Georgia, serif; font-size: 1.35rem; font-weight: 700; }

.ll-kiosk-grid {
  flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.9rem; padding: 0.75rem 1.25rem 7.5rem; align-content: start;
}
.ll-kiosk-prod {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem;
  min-height: 108px; padding: 1rem; border-radius: 18px; border: 1.5px solid var(--border);
  background: var(--bg-card); color: var(--text); font: inherit; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.08s;
}
.ll-kiosk-prod:active { transform: scale(0.97); }
.ll-kiosk-prod.has-qty { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent) inset; }
.ll-kiosk-prod-name { font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
.ll-kiosk-prod-price { font-size: 0.95rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ll-kiosk-prod-qty {
  position: absolute; top: -10px; right: -10px; min-width: 32px; height: 32px; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 8px;
}

.ll-kiosk-cartbar {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  background: var(--bg-card); border-top: 1px solid var(--border);
}
body:not(.is-kiosk) .ll-kiosk-cartbar { display: none; }
.ll-kiosk-cart-sum { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.ll-kiosk-cta {
  min-height: 64px; padding: 0.9rem 2rem; border-radius: 16px; border: 0;
  background: var(--accent); color: #fff; font-size: 1.2rem; font-weight: 800; font-family: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.08s;
}
.ll-kiosk-cta:active { transform: scale(0.97); }
.ll-kiosk-cta:disabled { opacity: 0.4; cursor: default; }
.ll-kiosk-quiet {
  border: 0; background: transparent; color: var(--text-secondary); font: inherit;
  font-size: 1rem; padding: 0.6rem 0.9rem; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ll-kiosk-lock {
  position: fixed; top: calc(0.6rem + env(safe-area-inset-top)); right: 0.75rem; z-index: 5;
  width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent;
  font-size: 1.1rem; opacity: 0.35; cursor: pointer; -webkit-tap-highlight-color: transparent;
}

.ll-kiosk-lines { padding: 0.5rem 1.25rem; max-width: 640px; width: 100%; margin: 0 auto; }
.ll-kiosk-line {
  display: flex; align-items: center; gap: 1rem; padding: 0.7rem 0;
  border-bottom: 1px solid var(--border); font-size: 1.15rem;
}
.ll-kiosk-line-name { flex: 1; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.ll-kiosk-line-price { min-width: 76px; text-align: right; font-variant-numeric: tabular-nums; }
.ll-kiosk-stepper { display: inline-flex; align-items: center; gap: 0.6rem; }
.ll-kiosk-stepper button {
  width: 52px; height: 52px; border-radius: 14px; border: 1.5px solid var(--border);
  background: var(--bg-card); color: var(--text); font-size: 1.5rem; font-weight: 700;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ll-kiosk-stepper button:active { transform: scale(0.94); }
.ll-kiosk-stepper strong { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.ll-kiosk-total {
  display: flex; justify-content: space-between; padding: 0.9rem 0; font-size: 1.3rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ll-kiosk-namelabel { display: block; text-align: center; margin: 0.75rem 0 0.35rem; font-size: 1.05rem; color: var(--text-secondary); }
.ll-kiosk-name, .ll-kiosk-pin {
  display: block; margin: 0 auto; width: min(90vw, 420px); min-height: 60px; text-align: center;
  font-size: 1.5rem; font-family: inherit; color: var(--text);
  border: 1.5px solid var(--border); border-radius: 16px; background: var(--bg-card); padding: 0.5rem 1rem;
}
.ll-kiosk-pin { letter-spacing: 0.5em; width: min(70vw, 260px); }
.ll-kiosk-place { display: block; margin: 1rem auto calc(1.25rem + env(safe-area-inset-bottom)); width: min(90vw, 420px); }

/* ---- A2-POS: kiosk branding, product photos, checkout payment ------------- */
/* Product cards carry a 4:3 photo (or a warm linen placeholder). The card is
   the tap target; the qty badge rides the photo corner. */
.ll-kiosk-prod { padding: 0; overflow: hidden; align-items: stretch; }
.ll-kiosk-prod-media {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3;
  background:
    radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    var(--bg-secondary);
  overflow: hidden;
}
.ll-kiosk-prod-media .ll-kiosk-prod-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: clamp(2rem, 6vw, 3rem); opacity: 0.55;
}
.ll-kiosk-prod-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.ll-kiosk-prod-media.has-photo .ll-kiosk-prod-fallback { display: none; }
.ll-kiosk-prod-body { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 0.9rem 0.85rem; }
.ll-kiosk-prod .ll-kiosk-prod-qty { top: 8px; right: 8px; }

/* Her logo: the welcome screen's centerpiece; a small mark in the order head. */
.ll-kiosk-logo-wrap { display: block; max-width: min(46vw, 300px); }
.ll-kiosk-logo { display: block; width: 100%; max-height: 34dvh; object-fit: contain; }
.ll-kiosk-head-brandrow { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0; }
.ll-kiosk-head-logo { height: 40px; width: auto; max-width: 120px; object-fit: contain; }
.ll-kiosk-attract-sub { font-size: clamp(0.95rem, 2.4vw, 1.2rem); color: var(--text-secondary); }

/* Review thumbs */
.ll-kiosk-line-thumb {
  position: relative; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 12px;
  overflow: hidden; background: var(--bg-secondary); border: 1px solid var(--border);
}
.ll-kiosk-line-thumb .ll-kiosk-prod-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; opacity: 0.55;
}
.ll-kiosk-line-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ll-kiosk-line-thumb.has-photo .ll-kiosk-prod-fallback { display: none; }

/* Checkout payment on the confirm screen */
.ll-kiosk-confirm { justify-content: flex-start; padding-top: clamp(1.5rem, 6dvh, 4rem); overflow-y: auto; }
.ll-kiosk-number-label { margin: 0; font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.ll-kiosk-number { font-family: Lora, Georgia, serif; font-size: clamp(3.2rem, 11vw, 5.5rem); margin: 0; line-height: 1.05; }
.ll-kiosk-pay { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.ll-kiosk-pay-title { margin: 0; font-size: 1.1rem; }
.ll-kiosk-pay-title strong { font-variant-numeric: tabular-nums; }
.ll-kiosk-pay .ll-paid-qrs { margin-top: 0.2rem; }
.ll-kiosk-pay .ll-paid-qr-svg { width: min(38vw, 190px); }

/* Kiosk settings rows: photo/logo thumbs */
.ll-kiosk-set-thumb {
  position: relative; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px;
  overflow: hidden; background: var(--bg-secondary); border: 1px solid var(--border);
}
.ll-kiosk-set-thumb .ll-kiosk-prod-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; opacity: 0.55;
}
.ll-kiosk-set-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ll-kiosk-set-thumb.has-photo .ll-kiosk-prod-fallback { display: none; }
.ll-artwork-pick { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

/* Label print queue chip on the Orders panel */
.ll-label-queue {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin: 0.5rem 0; padding: 0.55rem 0.7rem; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
}
.ll-label-queue-sum { flex: 1 1 auto; font-size: 0.85rem; font-weight: 600; }
.ll-label-queue .ll-board-plan { margin: 0; }

/* ---- Discover sheet (feature tour) ---------------------------------------- */
.ll-discover .ll-drawer-inner { max-height: 92vh; }
.ll-discover-grid { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
@media (min-width: 640px) { .ll-discover-grid { grid-template-columns: 1fr 1fr; } }
.ll-discover-card {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto;
  column-gap: 0.65rem; row-gap: 0.15rem; align-items: start;
  padding: 0.75rem 0.85rem; border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg-card);
}
.ll-discover-icon { grid-row: 1 / span 3; font-size: 1.6rem; line-height: 1.2; }
.ll-discover-card strong { font-size: 0.95rem; line-height: 1.25; }
.ll-discover-card p { margin: 0; font-size: 0.82rem; color: var(--text-secondary); line-height: 1.4; }
.ll-discover-card small { font-size: 0.72rem; color: var(--accent); font-weight: 600; }

/* ---- A2-POS Sell sheet (baker-facing register) ----------------------------- */
.ll-sell .ll-drawer-inner { max-height: 92vh; }
.ll-sell-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.5rem; }
.ll-sell-prod {
  position: relative; display: flex; flex-direction: column; gap: 0.1rem; align-items: flex-start;
  min-height: 60px; padding: 0.55rem 0.7rem; border-radius: 12px;
  border: 1.5px solid var(--border); background: var(--bg-card); color: var(--text);
  font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ll-sell-prod.has-qty { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent) inset; }
.ll-sell-prod-name { font-weight: 700; font-size: 0.9rem; line-height: 1.2; }
.ll-sell-prod-price { font-size: 0.8rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ll-sell-prod .ll-kiosk-prod-qty { top: -8px; right: -8px; min-width: 26px; height: 26px; font-size: 0.85rem; }
.ll-sell-lines { margin-top: 0.7rem; }
.ll-sell-line {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.45rem 0;
  border-bottom: 1px solid var(--border); font-size: 0.95rem;
}
.ll-sell-line-name { flex: 1; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ll-sell-line-price { min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.ll-sell-stepper button { width: 40px; height: 40px; font-size: 1.2rem; border-radius: 10px; }
.ll-sell-total { font-size: 1.05rem; }
.ll-sell-total-edit { display: inline-flex; align-items: center; gap: 0.2rem; }
.ll-sell-total-edit input {
  width: 6.5rem; text-align: right; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-secondary);
  color: var(--text); padding: 0.3rem 0.5rem;
}
.ll-sell-methods { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.ll-sell-method.is-active { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.ll-sell-methodhelp { margin-top: 0.55rem; display: flex; justify-content: center; }
.ll-sell-methodhelp .ll-paid-qr-svg { width: min(50vw, 180px); }
.ll-sell-record { display: block; width: 100%; min-height: 54px; font-size: 1.05rem; margin-top: 0.8rem; }
.ll-sell-orderline { margin: 0 0 0.6rem; font-size: 0.9rem; color: var(--text-secondary); }
.ll-sell-today { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.5rem; }
.ll-sell-split { margin: 0.1rem 0 0.4rem; font-size: 0.85rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }