/* ============================================================================
   Pomario facelift - the component contract (handoff_facelift, board 3e)
   Tokens from README.md. Nothing outside this list is a colour, radius, shadow
   or type size in the facelift screens. Parts: Surface, Pill, Stepper, Chip,
   PlantGlyph, YearStrip, JobRow, GlyphTile, SheetHeader.
   ============================================================================ */
:root {
  --fl-paper: #F4EFE3; --fl-inset: #EAE4D2; --fl-card: #FFFDF6;
  --fl-ink: #1F2A1C; --fl-muted: #66735F; --fl-faint: #8F988A;
  --fl-moss: #3E5B2C; --fl-leaf: #67A03A; --fl-lime: #A3E635;
  --fl-apricot: #E8863C; --fl-apricot-soft: #FBE9DA;
  --fl-sky: #5B87A8; --fl-sky-soft: #E4EEF5;
  --fl-water: #178F82; --fl-water-soft: #DDF0EC;
  --fl-alert: #C8402F; --fl-alert-soft: #F7E4DF;
  --fl-gold: #A87E1B; --fl-gold-soft: #FBF0D9;
  --fl-plum: #7C5FD8; --fl-plum-soft: #EFE8FB;
  --fl-soil: #7A4E26; --fl-green-soft: #DDEEC6; --fl-line: #E6DFCB;
  --fl-cream: #FFFDF6; --fl-cream-80: rgba(255,253,246,.8); --fl-cream-16: rgba(255,253,246,.16); --fl-cream-12: rgba(255,253,246,.12);
  --fl-nav-idle: #9AA894;
  --fl-c-fruit: #D06A32; --fl-c-nut: #A67C4A; --fl-c-berry: #A75BBE; --fl-c-veg: #3F8F4E; --fl-c-melon: #1F9AA8; --fl-c-vine: #7C5FD8; --fl-c-herb: #7E9B3E;
  --fl-sh: 0 6px 18px rgba(58,50,32,.06); --fl-sh-float: 0 8px 24px rgba(58,50,32,.12); --fl-sh-pill: 0 3px 12px rgba(58,50,32,.10); --fl-sh-btn: 0 2px 8px rgba(58,50,32,.10);
  --fl-r-card: 24px; --fl-r-card-lg: 28px; --fl-r-hero: 30px; --fl-r-sheet: 36px; --fl-r-tile: 20px; --fl-r-row: 22px;
  --fl-display: "Fraunces", "Pomario Brand", "Iowan Old Style", Palatino, Georgia, serif;
  --fl-ui: -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --fl-scrim: rgba(31,42,28,.45);
}

/* ---- type ---- */
.fl-h1 { font-family: var(--fl-display); font-weight: 700; font-size: 30px; letter-spacing: -.3px; color: var(--fl-ink); line-height: 1.1; }
.fl-h2 { font-family: var(--fl-display); font-weight: 600; font-size: 26px; color: var(--fl-ink); line-height: 1.2; }
.fl-h3 { font-family: var(--fl-display); font-weight: 600; font-size: 20px; color: var(--fl-ink); line-height: 1.2; }
.fl-h4 { font-family: var(--fl-display); font-weight: 600; font-size: 18px; color: var(--fl-ink); line-height: 1.25; }
.fl-big { font-family: var(--fl-display); font-weight: 700; font-size: 44px; color: var(--fl-ink); line-height: 1; }
.fl-big.xl { font-size: 56px; }
.fl-body { font-size: 15px; color: var(--fl-ink); line-height: 1.45; }
.fl-sub { font-size: 13.5px; color: var(--fl-muted); line-height: 1.4; }
/* the small spaced capitals that used to sit over titles are gone (house rule, Oct 2026): what was an eyebrow is now a
   section heading in the display face, or it was removed where a title already stood under it */
.fl-eyebrow { font-family: var(--fl-display); font-weight: 600; font-size: 18px; line-height: 1.25; color: var(--fl-ink); letter-spacing: 0; text-transform: none; }
.fl-eyebrow.lime { color: var(--fl-cream); }
.fl-eyebrow.apricot { color: var(--fl-ink); }
.fl-sec { display: flex; align-items: baseline; justify-content: space-between; margin: 0 4px 10px; }
.fl-sec .fl-link { font-size: 13px; font-weight: 800; color: var(--fl-leaf); background: none; border: 0; padding: 0; cursor: pointer; }

/* ---- Surface ---- */
.fl-card { background: var(--fl-card); border-radius: var(--fl-r-card); padding: 18px; box-shadow: var(--fl-sh); }
.fl-card.lg { border-radius: var(--fl-r-card-lg); box-shadow: var(--fl-sh-float); }
.fl-card.row { border-radius: var(--fl-r-row); padding: 14px 16px; }
.fl-inset { background: var(--fl-inset); border-radius: var(--fl-r-card); }
.fl-hero { position: relative; overflow: hidden; background: var(--fl-moss); border-radius: var(--fl-r-hero); padding: 22px 22px 20px; color: var(--fl-cream); }
.fl-hero.soil { background: var(--fl-ink); }
.fl-hero .fl-h1, .fl-hero .fl-h2, .fl-hero .fl-h3 { color: var(--fl-cream); }
.fl-hero .fl-body { color: var(--fl-cream-80); font-size: 14px; }
.fl-hero .fl-watermark { position: absolute; right: -30px; top: -20px; opacity: .12; pointer-events: none; }

/* ---- Pill ---- */
.fl-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; border-radius: 999px; font-family: var(--fl-ui); font-weight: 800; font-size: 15px; padding: 15px 24px; line-height: 1.2; text-align: center; white-space: nowrap; transition: transform .12s ease-out, background-color .12s ease-out; -webkit-tap-highlight-color: transparent; }
.fl-pill:active { transform: scale(.97); }
.fl-pill.primary { background: var(--fl-ink); color: var(--fl-cream); }
.fl-pill.dark { background: var(--fl-lime); color: var(--fl-ink); }
.fl-pill.on-dark { background: var(--fl-cream-16); color: var(--fl-cream); padding: 15px 20px; }
.fl-pill.secondary { background: var(--fl-card); color: var(--fl-moss); box-shadow: var(--fl-sh-pill); }
.fl-pill.secondary.danger { color: var(--fl-alert); }
.fl-pill.small { padding: 9px 14px; font-size: 12.5px; box-shadow: var(--fl-sh-btn); }
.fl-pill.close { background: rgba(255,253,246,.9); color: var(--fl-ink); padding: 8px 14px; font-size: 13px; }
.fl-pill.quiet { background: var(--fl-card); color: var(--fl-muted); padding: 9px 16px; font-size: 13.5px; font-weight: 700; box-shadow: var(--fl-sh-btn); }
.fl-pill.tab { background: var(--fl-card); color: var(--fl-muted); padding: 7px 13px; font-size: 12.5px; }
.fl-pill.tab.on { background: var(--fl-ink); color: var(--fl-cream); }
.fl-pill.grow { flex: 1; }
.fl-pill:disabled { opacity: .45; cursor: default; }
.fl-pills { display: flex; gap: 8px; }
.fl-pills.wrap { flex-wrap: wrap; }
.fl-pills.scroll { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.fl-pills.scroll::-webkit-scrollbar { display: none; }
.fl-pills.scroll > * { flex-shrink: 0; }
.fl-seg { display: inline-flex; background: var(--fl-inset); border-radius: 999px; padding: 4px; }
.fl-seg button { border: 0; background: none; cursor: pointer; border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 700; color: var(--fl-muted); font-family: var(--fl-ui); }
.fl-seg button.on { background: var(--fl-ink); color: var(--fl-cream); font-weight: 800; padding: 7px 14px; }

/* ---- Stepper ---- */
.fl-stepper { display: flex; align-items: center; justify-content: center; gap: 22px; }
.fl-stepper button { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--fl-card); color: var(--fl-ink); box-shadow: var(--fl-sh-pill); font-size: 26px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.fl-stepper button:active { transform: scale(.97); }
.fl-stepper .fl-num { font-family: var(--fl-display); font-weight: 700; font-size: 56px; color: var(--fl-ink); line-height: 1; min-width: 96px; text-align: center; }
.fl-stepper .fl-num small { font-family: var(--fl-ui); font-size: 15px; font-weight: 700; color: var(--fl-muted); margin-inline-start: 6px; }

/* ---- Chip ---- */
.fl-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 800; white-space: nowrap; font-family: var(--fl-ui); }
.fl-chip.ripe, .fl-chip.sow { background: var(--fl-green-soft); color: var(--fl-moss); }
.fl-chip.sick { background: var(--fl-alert-soft); color: var(--fl-alert); }
.fl-chip.unconfirmed { background: var(--fl-inset); color: var(--fl-muted); }
.fl-chip.due { background: var(--fl-apricot-soft); color: var(--fl-apricot); }
.fl-chip.later { background: var(--fl-sky-soft); color: var(--fl-sky); }
.fl-chip.planted { background: var(--fl-plum-soft); color: var(--fl-plum); }
.fl-chip.source { background: var(--fl-card); color: var(--fl-moss); box-shadow: var(--fl-sh-btn); }
.fl-chip.count { background: var(--fl-inset); color: var(--fl-ink); }
.fl-chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- PlantGlyph ---- */
.fl-glyph { display: inline-block; flex-shrink: 0; vertical-align: middle; }
.fl-glyph.s24 { width: 24px; height: 24px; } .fl-glyph.s30 { width: 30px; height: 30px; } .fl-glyph.s34 { width: 34px; height: 34px; }
.fl-glyph.s40 { width: 40px; height: 40px; } .fl-glyph.s44 { width: 44px; height: 44px; } .fl-glyph.s52 { width: 52px; height: 52px; }

/* ---- YearStrip ---- */
.fl-year { position: relative; }
.fl-year .fl-yrow { display: grid; grid-template-columns: 58px repeat(12, 1fr); gap: 4px; align-items: center; margin-bottom: 6px; }
.fl-year .fl-yrow > span:first-child { font-size: 12px; font-weight: 700; color: var(--fl-muted); }
.fl-year .fl-yrow i { display: block; height: 14px; border-radius: 5px; background: var(--fl-inset); }
.fl-year .fl-yrow i.on { background: var(--fl-c); }
.fl-year .fl-ymonths { display: grid; grid-template-columns: 58px repeat(12, 1fr); gap: 4px; }
.fl-year .fl-ymonths span { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--fl-faint); }
.fl-year .fl-ymonths span.now { color: var(--fl-ink); font-weight: 800; }
.fl-year .fl-today { position: absolute; top: -4px; bottom: 18px; width: 2px; background: var(--fl-soil); border-radius: 1px; pointer-events: none; }
.fl-year .fl-today::before { content: ""; position: absolute; top: -4px; left: -4px; width: 10px; height: 8px; background: var(--fl-soil); border-radius: 2px 6px 6px 2px; }
.fl-year .fl-ysentence { font-size: 13.5px; color: var(--fl-muted); margin-top: 10px; line-height: 1.4; }

/* ---- JobRow ---- */
.fl-job { background: var(--fl-card); border-radius: var(--fl-r-row); padding: 14px 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--fl-sh); text-align: start; border: 0; width: 100%; cursor: pointer; font-family: var(--fl-ui); }
.fl-job .fl-ring { width: 26px; height: 26px; border: 2.4px solid var(--fl-apricot); border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; transition: background-color .18s ease-out, border-color .18s ease-out; }
.fl-job .fl-ring svg { width: 14px; height: 14px; opacity: 0; }
.fl-job.done .fl-ring { background: var(--fl-leaf); border-color: var(--fl-leaf); }
.fl-job.done .fl-ring svg { opacity: 1; }
.fl-job.done .fl-jtitle { text-decoration: line-through; color: var(--fl-muted); }
.fl-job.collapse { animation: fl-collapse .26s ease-out forwards; }
@keyframes fl-collapse { to { opacity: 0; transform: translateY(-6px) scaleY(.6); margin-bottom: -60px; } }
.fl-job .fl-jmain { flex: 1; min-width: 0; }
.fl-job .fl-jtitle { font-size: 15px; font-weight: 800; color: var(--fl-ink); line-height: 1.3; }
.fl-job .fl-jsub { font-size: 12.5px; color: var(--fl-muted); margin-top: 2px; }
.fl-job .fl-jglyphs { display: flex; gap: 4px; flex-shrink: 0; }
.fl-job .fl-chev { color: var(--fl-faint); font-size: 18px; flex-shrink: 0; }
.fl-jobs { display: flex; flex-direction: column; gap: 10px; }
/* the big ring on the "next up" card */
.fl-ring-lg { width: 30px; height: 30px; border: 2.6px solid var(--fl-apricot); border-radius: 50%; flex-shrink: 0; margin-top: 2px; }

/* ---- GlyphTile (a fact tile: label, big value, one line) ---- */
.fl-tiles { display: flex; gap: 8px; }
.fl-tile { flex: 1; min-width: 0; border-radius: var(--fl-r-tile); padding: 12px 13px; background: var(--fl-inset); }
.fl-tile .fl-tlabel { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--fl-muted); }
.fl-tile .fl-tvalue { font-family: var(--fl-display); font-weight: 700; font-size: 20px; color: var(--fl-ink); margin-top: 2px; line-height: 1.15; }
.fl-tile .fl-tsub { font-size: 11.5px; color: var(--fl-muted); margin-top: 1px; }
.fl-tile.water { background: var(--fl-water-soft); } .fl-tile.water .fl-tlabel { color: var(--fl-water); }
.fl-tile.gold { background: var(--fl-gold-soft); } .fl-tile.gold .fl-tlabel { color: var(--fl-gold); }
.fl-tile.plum { background: var(--fl-plum-soft); } .fl-tile.plum .fl-tlabel { color: var(--fl-plum); }
.fl-tile.apricot { background: var(--fl-apricot-soft); } .fl-tile.apricot .fl-tlabel { color: var(--fl-apricot); }
.fl-tile.sky { background: var(--fl-sky-soft); } .fl-tile.sky .fl-tlabel { color: var(--fl-sky); }
.fl-tile.alert { background: var(--fl-alert-soft); } .fl-tile.alert .fl-tlabel { color: var(--fl-alert); }
.fl-tile.green { background: var(--fl-green-soft); } .fl-tile.green .fl-tlabel { color: var(--fl-moss); }
/* a glyph tile in a horizontal strip: glyph, name, one line */
.fl-gtiles { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.fl-gtiles::-webkit-scrollbar { display: none; }
.fl-gtile { flex: 0 0 108px; background: var(--fl-card); border-radius: var(--fl-r-card); padding: 12px; box-shadow: var(--fl-sh-float); border: 0; text-align: start; cursor: pointer; font-family: var(--fl-ui); }
.fl-gtile .fl-gname { font-size: 14.5px; font-weight: 800; color: var(--fl-ink); margin-top: 8px; }
.fl-gtile .fl-gsub { font-size: 12px; color: var(--fl-muted); margin-top: 1px; }
/* the count tiles ("Later · 18") */
.fl-ctile { flex: 0 0 100px; background: var(--fl-card); border-radius: var(--fl-r-tile); padding: 12px 14px; box-shadow: var(--fl-sh); border: 0; text-align: start; cursor: pointer; font-family: var(--fl-ui); }
.fl-ctile i { display: block; width: 10px; height: 10px; border-radius: 50%; }
.fl-ctile b { display: block; font-family: var(--fl-display); font-weight: 700; font-size: 22px; color: var(--fl-ink); margin-top: 8px; }
.fl-ctile span { font-size: 12px; font-weight: 700; color: var(--fl-muted); }

/* ---- Sheet + SheetHeader ---- */
.fl-scrim { position: fixed; inset: 0; z-index: 82; background: var(--fl-scrim); display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .26s ease-out; }
.fl-scrim.open { opacity: 1; }
.fl-sheet { position: relative; width: 100%; max-height: 92vh; background: var(--fl-paper); border-radius: var(--fl-r-sheet) var(--fl-r-sheet) 0 0; padding: 0 20px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; transform: translateY(24px); transition: transform .26s ease-out; box-shadow: 0 -12px 40px rgba(31,42,28,.25); }
.fl-scrim.open .fl-sheet { transform: none; }
.fl-sheet.photo { padding-top: 0; }
.fl-handle { display: block; width: 44px; height: 5px; border-radius: 3px; background: rgba(31,42,28,.18); margin: 12px auto 0; }
.fl-sheet.photo .fl-handle, .fl-hero .fl-handle { background: rgba(255,253,246,.6); }
.fl-sheethead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 0 4px; }
.fl-sheethead .fl-h2 { margin: 0; }
.fl-sheethead .fl-sub { margin-top: 3px; }
.fl-sheetfoot { display: flex; gap: 10px; position: sticky; bottom: 0; padding: 14px 0 4px; background: linear-gradient(to bottom, rgba(244,239,227,0), var(--fl-paper) 34%); }
.fl-sheetfoot .fl-pill { flex: 1; }
.fl-sheetfoot .fl-pill.secondary, .fl-sheetfoot .fl-pill.quiet { flex: 0 0 auto; }
@media (min-width: 900px) {
  .fl-scrim { align-items: center; }
  .fl-sheet { width: 520px; max-height: 86vh; border-radius: var(--fl-r-card-lg); padding-bottom: 20px; transform: translateY(12px) scale(.98); }
  .fl-handle { display: none; }
}

/* ---- toast (3c/3d): above the nav, dark moss, 4 s, always with Undo ---- */
.fl-toast { position: fixed; left: 16px; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 90; background: var(--fl-moss); color: var(--fl-cream); border-radius: 22px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--fl-sh-float); font-size: 14px; font-weight: 700; transform: translateY(12px); opacity: 0; transition: transform .26s ease-out, opacity .26s ease-out; }
.fl-toast.open { transform: none; opacity: 1; }
.fl-toast b { font-weight: 800; }
.fl-toast small { display: block; font-weight: 500; color: var(--fl-cream-80); font-size: 12.5px; margin-top: 1px; }
.fl-toast .fl-undo { margin-inline-start: auto; background: none; border: 0; color: var(--fl-lime); font-weight: 800; font-size: 14px; cursor: pointer; padding: 6px 4px; }
@media (min-width: 900px) { .fl-toast { left: auto; right: 24px; bottom: 24px; width: 420px; } }

/* ---- empty and error states (3d): never a red background, apricot tint for errors ---- */
.fl-state { text-align: center; padding: 26px 20px; border-radius: var(--fl-r-card); background: var(--fl-card); box-shadow: var(--fl-sh); }
.fl-state.error { background: var(--fl-apricot-soft); box-shadow: none; }
.fl-state .fl-glyph { margin-bottom: 10px; }
.fl-state .fl-h3 { margin: 0; }
.fl-state .fl-sub { margin: 6px auto 14px; max-width: 300px; }

/* ---- phone chrome: header + the dark pill nav (1a) ---- */
.fl-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 0; }
.fl-head .fl-brand { display: flex; align-items: center; gap: 8px; font-family: var(--fl-display); font-weight: 700; font-size: 20px; color: var(--fl-ink); }
.fl-head .fl-brand svg { width: 22px; height: 24px; }
.fl-head .fl-actions { display: flex; gap: 8px; }
.fl-round { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--fl-card); box-shadow: var(--fl-sh-btn); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--fl-ink); }
.fl-round svg { width: 16px; height: 16px; }
.fl-head.on-dark .fl-brand { color: var(--fl-cream); }
.fl-head.on-dark .fl-round { background: var(--fl-cream-16); color: var(--fl-cream); }
.fl-title { padding: 14px 20px 0; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.fl-title > div:first-child { min-width: 0; }
/* grid tiles take the column they are given: a long word wraps inside the tile instead of widening the page */
[style*="minmax(0,1fr)"] > * { min-width: 0; overflow-wrap: anywhere; }
.fl-title .fl-sub { font-size: 14px; margin-top: 3px; }
.fl-nav { position: fixed; left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); height: 68px; z-index: 80; background: var(--fl-ink); border-radius: 999px; display: flex; align-items: center; justify-content: space-around; padding: 0 10px; box-shadow: 0 12px 30px rgba(31,42,28,.35); }
.fl-nav .fl-tab { width: 64px; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; cursor: pointer; color: var(--fl-nav-idle); font-family: var(--fl-ui); font-size: 10.5px; font-weight: 700; padding: 0; }
.fl-nav .fl-tab svg { width: 22px; height: 22px; stroke: currentColor; }
.fl-nav .fl-tab.on { color: var(--fl-lime); font-weight: 800; }
.fl-nav .fl-tab.fl-desk { display: none; }
.fl-nav .fl-tree { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--fl-lime); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(163,230,53,.45); cursor: pointer; }
.fl-nav .fl-tree svg { width: 30px; height: 33px; }
.fl-nav .fl-tree:active { transform: scale(.97); }
/* ---- desktop chrome: the 84 px icon rail (2a) ---- */
@media (min-width: 900px) {
  .fl-nav { left: 0; top: 0; bottom: 0; right: auto; width: 84px; height: auto; border-radius: 0; flex-direction: column; justify-content: flex-start; gap: 6px; padding: 18px 0; box-shadow: none; }
  .fl-nav .fl-tab { width: 60px; height: 56px; border-radius: 16px; justify-content: center; gap: 3px; }
  .fl-nav .fl-tab.on { background: rgba(163,230,53,.14); }
  .fl-nav .fl-tree { order: -1; margin-bottom: 14px; width: 48px; height: 48px; }
  .fl-nav .fl-tree svg { width: 26px; height: 28px; }
  .fl-nav .fl-tab.fl-desk { display: flex; }
  .fl-nav .fl-tab[data-tab="settings"] { margin-top: auto; }
}
/* right-to-left: the rail stands on the right, the page beside it */
@media (min-width: 900px) {
  [dir="rtl"] .fl-nav { left: auto; right: 0; }
  [dir="rtl"] main { margin-left: 0; margin-right: 84px; }
}
/* pressed feedback everywhere in the facelift */
.fl-press:active { transform: scale(.97); transition: transform .12s ease-out; }

/* ---- Today (1a): the twin is the wallpaper ---- */
main { position: relative; }
/* the header stays put: fixed under the status bar, clear over a hero, and on paper once the page has scrolled */
#fl-chrome .fl-head { position: fixed; top: 0; left: 0; right: 0; z-index: 70; padding: calc(16px + env(safe-area-inset-top)) 20px 10px; pointer-events: none; transition: background-color .18s ease-out, box-shadow .18s ease-out; }
body.fl-scrolled #fl-chrome .fl-head { background: var(--fl-paper); box-shadow: 0 1px 0 var(--fl-line); pointer-events: auto; }
body.fl-scrolled #fl-chrome .fl-head .fl-brand { color: var(--fl-ink) !important; }
body.fl-scrolled #fl-chrome .fl-head .fl-round { background: var(--fl-card) !important; color: var(--fl-ink) !important; box-shadow: var(--fl-sh-btn); }
#fl-chrome .fl-head > * { pointer-events: auto; }
body[data-tab="today"] #fl-chrome .fl-head .fl-brand { color: var(--fl-cream); }
body[data-tab="today"] #fl-chrome .fl-head .fl-round { background: var(--fl-cream-16); color: var(--fl-cream); }
main { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
#view-today { padding: 0; }
#today { padding: 0; }
/* board 1a on the phone: the twin runs edge to edge and under the status bar; main's 12px/14px padding is pulled back */
.fl-today-hero { position: relative; height: calc(424px + env(safe-area-inset-top)); margin: calc(-12px - env(safe-area-inset-top)) -14px 0; border-radius: 0 0 var(--fl-r-hero) var(--fl-r-hero); background: var(--fl-ink); overflow: hidden; cursor: pointer; }
.fl-hero-3d { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .95; }
.fl-hero-3d #three-container { position: absolute; inset: 0; width: 100%; height: 100%; }
.fl-hero-3d #three-container canvas { width: 100% !important; height: 100% !important; display: block; }
.fl-hero-3d .three-hint, .fl-hero-3d .time-panel, .fl-hero-3d .wx-badge, .fl-hero-3d #wx3d, .fl-hero-3d .three-reset, .fl-hero-3d .three-designer, .fl-hero-3d .tp-fold { display: none !important; }
.fl-hero-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,42,28,.1) 0%, rgba(31,42,28,0) 35%, rgba(31,42,28,.85) 100%); pointer-events: none; }
.fl-hero-foot { position: absolute; left: 20px; right: 20px; bottom: 20px; }
.fl-hero-foot .fl-h1 { font-weight: 600; line-height: 1.15; } /* board 1a sets the hero headline at Fraunces 600 */
.fl-hero-head { color: var(--fl-cream); font-weight: 600; margin: 6px 0 0; line-height: 1.15; letter-spacing: 0; }
.fl-wxrow { display: flex; gap: 6px; margin-top: 12px; }
.fl-wx { flex: 1; background: var(--fl-cream-12); border-radius: 16px; padding: 8px 0; text-align: center; }
.fl-wx small { display: block; font-size: 10.5px; font-weight: 800; color: rgba(255,253,246,.7); }
.fl-wx b { display: block; font-size: 15px; font-weight: 800; color: var(--fl-cream); }
.fl-wx.now { background: rgba(255,253,246,.92); }
.fl-wx.now small { color: var(--fl-muted); } .fl-wx.now b { color: var(--fl-ink); }
.fl-ask { display: flex; gap: 8px; margin-top: 12px; }
.fl-ask input { flex: 1; min-width: 0; border: 0; border-radius: 999px; background: var(--fl-cream-16); color: var(--fl-cream); padding: 0 18px; font-size: 14.5px; height: 46px; }
.fl-ask input::placeholder { color: rgba(255,253,246,.6); }
.fl-ask input:focus-visible { outline: none; background: rgba(255,253,246,.24); }
.fl-ask .fl-pill { padding: 0 22px; height: 46px; }
.fl-today-body { padding: 14px 16px 0; display: flex; flex-direction: column; gap: 14px; }
.fl-today-body > :empty { display: none; }
.fl-next-row { display: flex; align-items: flex-start; gap: 12px; }
.fl-next-main { flex: 1; min-width: 0; }
.fl-next-title { font-size: 18px; font-weight: 800; color: var(--fl-ink); margin-top: 4px; line-height: 1.3; }
.fl-next .fl-sub { margin-top: 4px; }
.fl-answer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fl-ask-lead { font-family: var(--fl-display); font-weight: 600; font-size: 22px; color: var(--fl-ink); line-height: 1.25; margin-top: 8px; }
.fl-ask-rule { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--fl-line); }
.fl-ask-rule .fl-h4 { margin-bottom: 4px; }
.fl-answer-src { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.fl-dg-lines { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
@media (min-width: 900px) {
  /* on a wide screen the header starts beside the rail (or before it, right to left) */
  #fl-chrome .fl-head { left: 84px; right: 0; padding-left: 36px; padding-right: 36px; }
  [dir="rtl"] #fl-chrome .fl-head { left: 0; right: 84px; }
  main { margin-left: 84px; padding-bottom: 24px; }
  .fl-today-hero { height: 62vh; min-height: 460px; border-radius: 0 0 var(--fl-r-hero) var(--fl-r-hero); }
  .fl-today-body { max-width: 720px; margin: 0 auto; padding: 18px 24px 0; }
}

/* ---- Garden / Map (1b): title, Map | 3D, the search pill, one chip row, the map as a card ---- */
#view-map { padding: calc(56px + env(safe-area-inset-top)) 0 0; }
.fl-title .fl-h1 { letter-spacing: -.3px; }
.fl-search { margin: 14px 20px 0; background: var(--fl-card); border-radius: 999px; box-shadow: var(--fl-sh-pill); padding: 0 18px; height: 46px; display: flex; align-items: center; gap: 10px; }
.fl-search input { flex: 1; min-width: 0; border: 0; background: none; padding: 0; font-size: 14.5px; color: var(--fl-ink); height: 100%; border-radius: 0; }
.fl-search input::placeholder { color: var(--fl-faint); }
.fl-search input:focus-visible { outline: none; background: none; }
#fl-map-chips { margin: 12px 0 0; padding: 0 20px; gap: 6px; }
#kind-bar { margin: 12px 16px 0; }
.map-wrap { padding: 14px 16px 0; }
.fl-map-card { position: relative; border-radius: var(--fl-r-card-lg); overflow: hidden; box-shadow: 0 8px 24px rgba(58,50,32,.10); background: #DCE5C4; }
.fl-map-card #map-container { border-radius: 0; box-shadow: none; }
.fl-map-hint { position: absolute; top: 12px; left: 12px; background: var(--fl-ink); color: var(--fl-cream); font-size: 11.5px; font-weight: 800; border-radius: 999px; padding: 6px 12px; pointer-events: none; z-index: 3; }
.fl-map-hint[hidden] { display: none; }
.fl-map-card .map-zoom { right: 12px; bottom: 12px; gap: 6px; }
.fl-map-card .map-zoom button { width: 38px; height: 38px; background: var(--fl-card); border: 0; border-radius: 12px; font-weight: 800; font-size: 18px; color: var(--fl-ink); box-shadow: 0 3px 10px rgba(58,50,32,.18); }
.fl-map-card .map-hint, .fl-map-card .wheel-hint { display: none !important; }
.fl-map-legend { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; z-index: 3; pointer-events: none; }
.fl-lg { background: var(--fl-card); border-radius: 999px; padding: 6px 10px 6px 7px; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; color: var(--fl-ink); }
.fl-lg i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.fl-lg i.ripe { background: var(--fl-lime); box-shadow: 0 0 0 3px rgba(163,230,53,.35); }
.fl-lg i.sick { border: 2px solid var(--fl-alert); box-sizing: border-box; }
.fl-head-edit { height: 38px; padding: 0 14px; font-size: 13px; font-weight: 800; color: var(--fl-moss); }
/* board 1b: Edit sits in the header next to the launcher on the phone too */
#map-legacy, #garden-modes[hidden] { display: none !important; }
/* the old map controls that used to sit under the plot head are gone from the flow */
.plot-head, .map-toolbar, .map-legend, .tw-live, #walk-promo { display: none !important; }
@media (min-width: 900px) {
  .map-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; padding: 14px 24px 0; }
  #view-map { padding-top: calc(56px + env(safe-area-inset-top)); }
}

/* ---- Plant card (1c): photo first, two actions, three facts, the calendar ---- */
#plant-sheet .ms-panel { background: var(--fl-paper); border-radius: var(--fl-r-sheet) var(--fl-r-sheet) 0 0; padding: 0; max-height: 92vh; }
#plant-sheet .ms-panel .ms-grab, #plant-sheet .ps-x { display: none; }
/* the sheet scrolls clear of the floating tab bar: its last row (Details) must be reachable */
#plant-sheet .ps-body { padding: 0 0 calc(112px + env(safe-area-inset-bottom)); }
#detail { background: var(--fl-paper); border-radius: var(--fl-r-card-lg); overflow: hidden; padding: 0; }
.fl-ph-hero { position: relative; height: 300px; background: var(--fl-inset) center / cover no-repeat; overflow: hidden; }
.fl-ph-hero.nophoto { background: radial-gradient(ellipse at 50% 40%, #3E5B2C 0%, #1F2A1C 75%); }
.fl-ph-glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: .9; transform: translateY(-20px) scale(1.6); }
.fl-ph-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,42,28,0) 40%, rgba(31,42,28,.8) 100%); }
.fl-ph-hero .fl-handle { position: absolute; top: 12px; left: 50%; margin: 0; transform: translateX(-50%); background: rgba(255,253,246,.6); }
.fl-ph-close { position: absolute; top: 22px; right: 18px; }
.fl-ph-foot { position: absolute; left: 20px; right: 20px; bottom: 18px; }
.fl-ph-title { font-family: var(--fl-display); font-weight: 700; font-size: 34px; color: var(--fl-cream); margin-top: 8px; line-height: 1.1; }
.fl-ph-title span { font-size: 20px; font-weight: 600; opacity: .75; }
.fl-ph-sub { font-size: 13.5px; color: rgba(255,253,246,.8); margin-top: 2px; }
.fl-ph-body { padding: 16px 20px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; }
.fl-ph-section .fl-card { padding: 14px 16px; border-radius: var(--fl-r-row); }
.fl-ph-acts { margin-top: -2px; }
.fl-fold { background: var(--fl-card); border-radius: var(--fl-r-row); box-shadow: var(--fl-sh); }
.fl-fold > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; cursor: pointer; }
.fl-fold > summary::-webkit-details-marker { display: none; }
.fl-fold > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--fl-muted); border-bottom: 2px solid var(--fl-muted); transform: rotate(45deg); margin-inline-start: auto; margin-right: 4px; transition: transform .2s ease-out; }
.fl-fold[open] > summary::after { transform: rotate(-135deg); }
.fl-fold > summary .fl-chip { margin-inline-start: 10px; margin-inline-end: auto; }
.fl-fold-body { padding: 0 16px 16px; }
.fl-input { width: 100%; border: 0; border-radius: 16px; background: var(--fl-card); box-shadow: var(--fl-sh); padding: 14px 16px; font-size: 15px; color: var(--fl-ink); margin-top: 12px; }
.fl-input::placeholder { color: var(--fl-faint); }
.fl-input:focus-visible { outline: 2px solid var(--fl-leaf); outline-offset: 0; background: var(--fl-card); }
textarea.fl-input { resize: vertical; min-height: 96px; font-family: var(--fl-ui); }
.fl-file { margin-top: 10px; cursor: pointer; } .fl-file.on { background: var(--fl-green-soft); }
.fl-harvest-glyph { display: flex; justify-content: center; margin: 10px 0 6px; }
.fl-harvest-quick { justify-content: center; margin-top: 16px; }
.fl-harvest-which { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; }

/* ---- Jobs (1d) ---- */
#view-tasks { padding: calc(56px + env(safe-area-inset-top)) 0 0; }
.fl-jobs-body { padding: 16px 16px 0; display: flex; flex-direction: column; gap: 20px; }
.fl-jobs-hero .fl-glyphrow { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
.fl-jobs-hero .fl-glyphrow span { font-size: 12.5px; font-weight: 700; color: var(--fl-cream-80); margin-inline-start: 4px; }
.fl-jobs-list .fl-sec { margin: 0 4px 10px; }
.fl-ctiles { gap: 8px; }
.fl-ctile.on { outline: 2px solid var(--fl-ink); outline-offset: -2px; }
.tasks-cols, .tasks-head, .page-sub-line, .tk-head, .jb-note { display: none !important; }

/* ---- Kitchen (1e, 4q) ---- */
#view-kitchen { padding: calc(56px + env(safe-area-inset-top)) 0 0; } #kitchen.grid { display: block; gap: 0; }
.fl-kit-tabs { padding: 14px 20px 0; gap: 6px; }
.fl-kit-body { padding: 16px 16px 0; }
.fl-kit-sec { display: flex; flex-direction: column; gap: 12px; }
.fl-job.noring { cursor: pointer; }
.fl-glyphrow-lg { display: flex; gap: 6px; }
.fl-wide { width: 100%; }
.fl-select { appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px; background: var(--fl-card); box-shadow: var(--fl-sh-btn); padding: 11px 36px 11px 16px; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--fl-moss); max-width: 100%; }
.fl-stock { display: flex; align-items: center; gap: 12px; }
.fl-stock-n { font-family: var(--fl-display); font-weight: 700; font-size: 26px; color: var(--fl-ink); min-width: 40px; text-align: center; }
.fl-stock-btns { display: flex; gap: 6px; align-items: center; }
.fl-stock-btns button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--fl-card); box-shadow: var(--fl-sh-pill); font-size: 20px; font-weight: 700; color: var(--fl-ink); cursor: pointer; }
.fl-stock-btns .fl-x, .fl-job .fl-x { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--fl-inset); color: var(--fl-muted); font-size: 16px; cursor: pointer; box-shadow: none; }
.fl-shelf { margin: 2px 0; }
.pj.empty .pj-fill { display: none; } .pj.empty .pj-jar { background: rgba(255,253,246,.6); }
.fl-lp .fl-big { font-size: 44px; }
/* the kitchen sheets (4r-4v) on the contract: paper panel, top radius 36, handle, display titles, pill feet */
.ms-panel.bw { background: var(--fl-paper); border-radius: var(--fl-r-sheet) var(--fl-r-sheet) 0 0; }
.ms-panel.bw .ms-grab { width: 44px; height: 5px; border-radius: 3px; background: rgba(31,42,28,.18); }
.ms-panel.bw .bw-t { font-family: var(--fl-display); font-weight: 600; font-size: 26px; color: var(--fl-ink); }
.ms-panel.bw .bw-h .bw-t { font-size: 22px; }
.ms-panel.bw .bw-row { background: var(--fl-card); border-radius: var(--fl-r-row); box-shadow: var(--fl-sh); padding: 14px 16px; }
.ms-panel.bw .bw-row .bw-main b { font-size: 15px; font-weight: 800; }
.ms-panel.bw .lr-step2 button, .ms-panel.bw .stu-step button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--fl-card); box-shadow: var(--fl-sh-pill); font-size: 20px; font-weight: 700; color: var(--fl-ink); }
.ms-panel.bw .lr-step2 b { font-family: var(--fl-display); font-size: 22px; }
.ms-panel.bw .sh-rec, .ms-panel.bw .sh-name { border: 0; }
.ms-panel.bw .sh-rec { background: var(--fl-card); color: var(--fl-muted); border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 800; box-shadow: var(--fl-sh-btn); }
.ms-panel.bw .sh-rec.on { background: var(--fl-ink); color: var(--fl-cream); }
.ms-panel.bw .sh-name, .ms-panel.bw input:not([type=range]):not([type=checkbox]), .ms-panel.bw textarea { border-radius: 16px; background: var(--fl-card); box-shadow: var(--fl-sh); padding: 14px 16px; font-size: 15px; color: var(--fl-ink); }
.ms-panel.bw .ac-label { font-size: 12px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--fl-muted); font-family: var(--fl-ui); }
.ms-panel.bw .bw-foot { background: linear-gradient(to bottom, rgba(244,239,227,0), var(--fl-paper) 34%); }
.ms-panel.bw .bw-foot .btn-acc { flex: 1; background: var(--fl-ink); color: var(--fl-cream); border: 0; border-radius: 999px; padding: 15px 24px; font-size: 15px; font-weight: 800; }
.ms-panel.bw .bw-foot .ghost-btn, .ms-panel.bw .ghost-btn { background: var(--fl-card); color: var(--fl-muted); border: 0; border-radius: 999px; padding: 15px 20px; font-size: 14px; font-weight: 700; box-shadow: var(--fl-sh-btn); }
.ms-panel.bw .btn-acc { background: var(--fl-ink); color: var(--fl-cream); border: 0; border-radius: 999px; font-weight: 800; }
.ms-panel.bw .pf-fold > summary { font-size: 12px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--fl-muted); }

/* ---- Journal (1f, 4o, 4p) ---- */
#view-journal { padding: calc(56px + env(safe-area-inset-top)) 0 0; } #journal.grid { display: block; }
.fl-bars { display: flex; align-items: flex-end; gap: 4px; margin-top: 14px; height: 66px; }
.fl-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.fl-bar i { display: block; width: 100%; border-radius: 5px; background: var(--fl-inset); }
.fl-bar.now i { background: var(--fl-apricot); }
.fl-bar span { font-size: 10.5px; font-weight: 700; color: var(--fl-faint); }
.fl-bar.now span { color: var(--fl-ink); font-weight: 800; }
.fl-care-old .card { background: var(--fl-card); border-radius: var(--fl-r-row); box-shadow: var(--fl-sh); border: 0; }
.fl-activity .fa-day { font-size: 12px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--fl-muted); margin: 14px 4px 8px; }
.fl-activity .card { background: none; box-shadow: none; padding: 0; border: 0; }
.fl-activity .fa-row { background: var(--fl-card); border-radius: var(--fl-r-row); box-shadow: var(--fl-sh); padding: 12px 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 12px; }
.fl-activity .fa-who { width: 34px; height: 34px; border-radius: 50%; background: var(--fl-ink); color: var(--fl-cream); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }
.fl-activity .fa-who.house { background: var(--fl-inset); color: var(--fl-ink); }
.fl-activity .fa-main { flex: 1; font-size: 14px; color: var(--fl-ink); }
.fl-activity .fa-time { font-size: 12px; color: var(--fl-faint); flex: none; }
/* the harvest picker (3a) */
.fl-pickgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fl-pickgrid .fl-gtile { flex: none; width: auto; }
.fl-pickgrid .fl-gtile.on { outline: 2.4px solid var(--fl-ink); outline-offset: -2px; }
/* the sheets rendered by the contract inherit the panel padding */
.fl-sheet > .fl-search { margin-left: 0; margin-right: 0; }

/* ---- Season (1g), Library (1h, 1i), Settings (1j), Plants (4n), map states (4a-4g) ---- */
#view-planner, #view-library, #view-settings, #view-inventory { padding: calc(56px + env(safe-area-inset-top)) 0 0; }
#planner.grid, #settings.grid { display: block; }
.fl-moon { width: 34px; height: 34px; flex: none; } .fl-moon svg { width: 34px; height: 34px; }
.fl-lib-head { display: flex; align-items: flex-start; gap: 14px; }
.fl-lib-head .fl-h1 { margin-top: 4px; }
#library .fl-search, #inventory .fl-search { margin-top: 14px; }
.fl-setcard .card { background: none; box-shadow: none; padding: 0; border: 0; }
.fl-setcard .card::after, .fl-setcard .card::before { display: none; }   /* the old card frame would draw a stray outline inside the sheet */
.fl-setcard .card h3 { display: none; }
#map-suggest { background: none; box-shadow: none; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0 !important; left: 20px !important; right: 20px; width: auto; }
#map-suggest .sg-row .fl-jmain { flex: 1; }
#map-suggest .sg-foot, #map-suggest .sg-none { background: var(--fl-card); border-radius: var(--fl-r-row); padding: 12px 16px; font-size: 13px; color: var(--fl-muted); box-shadow: var(--fl-sh); }
.fl-tray { flex-direction: column; align-items: stretch; margin: 0 20px; }
#fl-map-chips .fl-tray { width: 100%; }
/* the kind sheet and kind bar (4b, 4c) on the contract */
#kind-sheet .kd-row { background: var(--fl-card); border-radius: var(--fl-r-row); box-shadow: var(--fl-sh); margin-bottom: 8px; padding: 12px 14px; border: 0; }
#kind-sheet .kd-n { background: var(--fl-inset); }
#kind-sheet .badge { border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 800; border: 0; }
#kind-sheet .badge.attention { background: var(--fl-alert-soft); color: var(--fl-alert); }
#kind-sheet .badge.ok { background: var(--fl-green-soft); color: var(--fl-moss); }
.kind-bar { background: var(--fl-card); border: 0; border-radius: var(--fl-r-card); box-shadow: var(--fl-sh); }
.kn-chip { border-color: var(--fl-ink); }

/* ---- 3D twin (1k, 4j), walk (4h, 4i), designer states (4k-4m) ---- */
#view-three { padding: calc(56px + env(safe-area-inset-top)) 0 0; position: relative; }
#view-three .three-wrap { padding: 14px 16px 0; }
#view-three #three-container { border-radius: var(--fl-r-card-lg); overflow: hidden; }
#view-three #time3d, #view-three #wx3d, #view-three .three-hint, #view-three #three-reset, #view-three .tw-live { display: none !important; }
@media (max-width: 899px) { #view-three #detail3d { display: none; } }
#fl-three-ui { position: absolute; left: 28px; right: 28px; top: 96px; pointer-events: none; }
.fl-three-chip { display: inline-block; background: rgba(255,253,246,.92); color: var(--fl-ink); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 800; box-shadow: var(--fl-sh-btn); }
.fl-three-pills { position: fixed; left: 16px; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); display: flex; gap: 8px; justify-content: center; pointer-events: auto; z-index: 6; }
#fl-three-card { position: fixed; left: 16px; right: 16px; bottom: calc(150px + env(safe-area-inset-bottom)); z-index: 7; }
#fl-three-card[hidden] { display: none; }
.fl-viewpanel .time-panel { position: static; background: none; border: 0; box-shadow: none; padding: 0; width: auto; backdrop-filter: none; }
.fl-viewpanel .time-panel .tp-fold { display: none; }
.fl-viewpanel .time-panel.collapsed .tp-body { display: block; }
.fl-viewpanel .tp-row span { font-size: 12px; font-weight: 800; letter-spacing: 1.6px; color: var(--fl-muted); width: auto; min-width: 58px; }
.fl-viewpanel .ghost-btn { background: var(--fl-card); border: 0; border-radius: 999px; color: var(--fl-muted); font-weight: 800; box-shadow: var(--fl-sh-btn); }
.fl-viewpanel .ghost-btn.on-acc { background: var(--fl-ink); color: var(--fl-cream); }
@media (min-width: 900px) { .fl-three-pills { left: auto; right: 40px; bottom: 40px; } #fl-three-card { left: auto; right: 40px; width: 360px; bottom: 100px; } }
/* walk mode HUD (4h): the chip, the Stop pill, the quest card */
#walk-hud .wk-hint { background: rgba(255,253,246,.92); color: var(--fl-ink); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 800; border: 0; }
#walk-hud .wk-exit { background: var(--fl-card); color: var(--fl-alert); border: 0; border-radius: 999px; padding: 10px 18px; font-size: 14px; font-weight: 800; box-shadow: var(--fl-sh-pill); }
#walk-hud .wk-quest { background: var(--fl-card); border-radius: var(--fl-r-card); padding: 16px 18px; box-shadow: var(--fl-sh-float); border: 0; display: block; }
#walk-hud .wk-quest .fl-h4 { color: var(--fl-ink); }
/* an empty quest card stays hidden (display:block above outranked the hidden attribute) */
#walk-hud .wk-quest[hidden] { display: none; }
/* the hint chip keeps to one line beside the camera and layer buttons */
#walk-hud .wk-hint { max-width: calc(100vw - 190px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* designer (4k): the palette is a row of glyph tiles */
.ds-pal-list.fl-gtiles { flex-direction: row; flex-wrap: nowrap; max-height: none; overflow-x: auto; }
.fl-gtile.ds-pal.on { outline: 2.4px solid var(--fl-ink); outline-offset: -2px; }
.fl-gtile.ds-pal .ds-info { position: absolute; top: 8px; right: 8px; }
.fl-gtile.ds-pal { position: relative; }
@media (max-width: 899px) { .ds-palette { padding: 12px; } .ds-pal-list.fl-gtiles { flex-direction: row; } }
.irr-pal .fl-job { margin-bottom: 8px; }

/* board 2g only: the All / In my garden / Not grown yet segments exist on desktop, not on the phone list (1h) */
.fl-desk-only { display: none; }
/* ===== desktop (2a–2h, 5a–5e): the same parts, laid out for 1280 ===== */
@media (min-width: 900px) {
  body { display: block; }
  .fl-desk-only { display: flex; }
  main { width: calc(100% - 84px); max-width: none; margin: 0 0 0 84px; padding: 0 0 24px; }
  /* the old dashboard grids on the view roots would split a screen in two; every desktop board is one flowing column with its own grid inside */
  #today, #task-list, #kitchen.grid, #journal.grid, #planner.grid, #settings.grid, #library, #inventory { display: block; grid-template-columns: none; max-width: none; margin: 0; }
  #view-today, #today { padding: 0; }
  .fl-head { left: 36px; right: 36px; }
  .fl-ph-sub button { background: none; color: #FFFDF6; border: 0; padding: 0; font: 600 14px var(--fl-ui); cursor: pointer; }
  main > section { max-width: none; overflow-x: hidden; }
  .fl-jobs-body > *, .fl-kit-body > * { min-width: 0; }
  .fl-title, #fl-map-title { padding: 28px 36px 0; }
  #view-map > .fl-search, #library > .fl-search, #inventory > .fl-search, #fl-map-chips, .fl-kit-tabs { margin-left: 36px; margin-right: 36px; }
  .fl-kit-body, .fl-jobs-body, .fl-today-body { padding-left: 36px; padding-right: 36px; }
  /* 2a: the twin fills the screen, the day's column floats on the right */
  #view-today { position: relative; min-height: 100vh; }
  .fl-today-hero { height: 100vh; border-radius: 0; margin: 0; }
  .fl-hero-foot { left: 40px; right: auto; width: 520px; bottom: 36px; }
  .fl-today-body { position: absolute; right: 36px; top: 36px; width: 480px; max-height: calc(100vh - 72px); overflow: auto; padding: 0; }
  .fl-today-body .fl-card, .fl-today-body .fl-gtiles { background: rgba(255,253,246,.96); }
  /* 2b: map card with the plant card docked on the right */
  #view-map .map-wrap { display: flex; gap: 18px; align-items: stretch; margin: 16px 36px 0; height: calc(100vh - 230px); min-height: 520px; }
  #view-map .fl-map-card { flex: 1; min-width: 0; height: auto; }
  #view-map #detail { width: 360px; flex: none; position: static; height: auto; max-height: none; border-radius: 28px; overflow: auto; }
  /* 2c: the next job on the left, the week on the right */
  .fl-jobs-body { display: grid; grid-template-columns: 460px 1fr; gap: 20px; align-items: start; }
  .fl-jobs-body .fl-jobs-hero { grid-row: 1 / 4; }
  /* 2d, 5e: recipes in three columns, the shelf beside its jars */
  #kit-make .fl-jobs, #kit-plan .fl-jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  #kit-make .fl-jobs .fl-job, #kit-plan .fl-jobs .fl-job { flex-direction: column; align-items: flex-start; height: 100%; }
  #kit-make .fl-jobs .fl-job .fl-chev, #kit-plan .fl-jobs .fl-job .fl-chev { display: none; }
  #kit-larder { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: start; }
  #kit-larder > .fl-card:first-child { grid-row: 1 / 4; }
  /* 2e, 5d: the log card left, the year and the entries right */
  #journal .fl-kit-body { display: grid; grid-template-columns: 480px 1fr; gap: 20px; align-items: start; }
  #journal .fl-kit-body > :first-child { grid-row: 1 / 9; }
  /* 2f: frost, moon and water on the left, the months on the right */
  #planner .fl-kit-body { display: grid; grid-template-columns: 420px 1fr; gap: 20px; align-items: start; }
  #planner .fl-kit-body > .fl-hero, #planner .fl-kit-body > .fl-job.noring, #planner .fl-kit-body > .fl-tiles { grid-column: 1; }
  #planner .fl-kit-body > div:not([class]) { grid-column: 2; grid-row: 1 / 8; }
  /* 2g: sow now in eight, browse in six */
  #library .fl-gtiles { grid-template-columns: repeat(8, 1fr); }
  #library .fl-jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  #library .fl-kit-body, #library .fl-lib-head { max-width: 1180px; }
  /* 2h: three columns, eyebrow over its card */
  #settings .fl-kit-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 960px; align-items: start; }
  /* 5c: the collection in three columns */
  #inventory .fl-jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  #inventory .fl-kit-body > .fl-card:first-child { max-width: 640px; }
  /* 5a: the view panel is a drawer on the right, not a centred card */
  #fl-viewsheet .fl-sheet { position: fixed; right: 0; top: 0; bottom: 0; left: auto; width: 380px; max-width: none; max-height: none; height: auto; border-radius: 0; transform: none; margin: 0; overflow: auto; }
  #fl-viewsheet .fl-handle { display: none; }
}
/* TODO(design): extends board 5b - the designer palette keeps the phone tray on desktop; the docked 320px palette has no built structure yet */

/* board 1i: the species page folds read as pills in a row; an open one shows its body below the row */
/* board 1i: the folds are one row of pills that scrolls sideways; the open pill goes ink, its content is a card below */
.fl-libfolds { display: flex; gap: 8px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.fl-libfolds::-webkit-scrollbar { display: none; }
.fl-libfolds button { flex: 0 0 auto; border: 0; cursor: pointer; background: #FFFDF6; color: #66735F; border-radius: 99px; padding: 9px 16px; font: 700 13.5px var(--fl-ui); white-space: nowrap; box-shadow: 0 2px 8px rgba(58,50,32,.08); }
.fl-libfolds button.on { background: #1F2A1C; color: #FFFDF6; }
.fl-libfold-body { margin-top: 10px; padding: 16px; }

/* boards 1b, 1h, 1l: the search is one white pill; the input inside it carries no box of its own */
.fl-search input, .fl-search input:focus, .fl-search input[type="search"], .fl-search input[type="text"] { background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none; padding: 0 !important; margin: 0; height: auto; font: 16px var(--fl-ui); color: var(--fl-ink); flex: 1; min-width: 0; -webkit-appearance: none; border-radius: 0; }
.fl-search input::placeholder { color: var(--fl-faint); }
/* board 4p: an apricot day label, one card per day with hairline dividers, the house as a brown avatar */
.fl-activity .fa-day { color: var(--fl-apricot); margin: 16px 4px 8px; }
.fl-activity .card, .fl-activity .fa-group { background: var(--fl-card) !important; border-radius: 28px !important; box-shadow: var(--fl-sh) !important; padding: 0 16px !important; border: 0 !important; }
.fl-activity .fa-row { background: none; box-shadow: none; border-radius: 0; padding: 14px 0; margin: 0; border-top: 1px solid var(--fl-line); }
.fl-activity .fa-row:first-of-type { border-top: 0; }
.fl-activity .fa-who { width: 44px; height: 44px; font-size: 14px; font-weight: 800; background: #7C5FD8; color: #fff; }
.fl-activity .fa-who.house { background: #7A4E26; color: #fff; }
.fl-activity .fa-main { font-size: 15px; }
.fl-activity .fa-main b { color: var(--fl-ink); }
/* board 4o: the record sections open from their pills; the fold itself has no row of its own */
#fl-care-fold > summary { display: none; }
#fl-care-fold:not([open]) { display: none; }

/* board 1c: the sub-line under the name is plain text on the photo, even when it opens the kind sheet */
.fl-ph-sub button { background: none !important; color: rgba(255,253,246,.9) !important; border: 0; padding: 0; font: 600 14px var(--fl-ui); cursor: pointer; }

/* board 1j: the rows of a group sit in one card; the first row carries no hairline; the group eyebrow sits above it */
#settings .fl-kit-body .fl-jobs { display: block; background: #FFFDF6; border-radius: 22px; box-shadow: var(--fl-sh); padding: 0 20px; margin-top: 8px; }
#settings .fl-kit-body .fl-jobs .fl-setrow:first-child { border-top: 0; }

/* board 1k: the twin runs edge to edge under the masthead; the controls stay out of the way */
@media (max-width: 899px) {
  #view-three { background: #1F2A1C; margin: calc(-12px - env(safe-area-inset-top)) -14px 0; padding: 0; min-height: 100vh; }
  #view-three .three-wrap { padding: 0; }
  #view-three #three-container { border-radius: 0; height: 100vh; min-height: 100vh; }
  #view-three .three-designer, #view-three .ds-exit { display: none !important; }
  #fl-three-ui { position: fixed; left: 20px; right: 20px; top: calc(74px + env(safe-area-inset-top)); z-index: 5; } /* board 1k: the Map | 3D row sits 74px under the top edge, measured on the screen */
  .fl-three-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; pointer-events: auto; }
  .fl-three-chip { background: rgba(255,253,246,.14); color: #FFFDF6; box-shadow: none; }
  body[data-tab="three"] #fl-chrome .fl-head .fl-brand { color: var(--fl-cream); }
  body[data-tab="three"] #fl-chrome .fl-head .fl-round { background: var(--fl-cream-16); color: var(--fl-cream); }
}

/* board 4k: the designer on the phone - dark twin, chips at the top, the tray at the foot */
@media (max-width: 899px) {
  #view-design { background: #1F2A1C; margin: calc(-12px - env(safe-area-inset-top)) -14px 0; padding: 0; min-height: 100vh; }
  #view-design .ds-head, #view-design .ds-hint, #view-design .ds-cats, #view-design .ds-pal-h, #view-design .ds-modeseg, #view-design .ds-exit, #view-design #ds-side { display: none !important; }
  #view-design .ds-wrap { display: block; }
  #view-design #ds-3d-host { position: relative; height: 100vh; border-radius: 0; }
  .fl-ds-top { position: absolute; left: 20px; right: 20px; top: calc(84px + env(safe-area-inset-top)); display: flex; justify-content: space-between; z-index: 5; }
  #view-design .ds-palette { position: fixed; left: 16px; right: 16px; bottom: calc(98px + env(safe-area-inset-bottom)); background: #FFFDF6; border-radius: 28px; padding: 14px 16px !important; box-shadow: 0 12px 30px rgba(0,0,0,.35); max-height: none; z-index: 6; }
  #view-design .ds-pal-list.fl-gtiles { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; grid-template-columns: none; }
  #view-design .fl-gtile.ds-pal { flex: 0 0 60px; background: #F4EFE3; border-radius: 20px; padding: 6px 2px; box-shadow: none; min-height: 60px; }
  #view-design .fl-gtile.ds-pal.on { background: #A3E635; outline: 3px solid #1F2A1C; }
  #view-design .fl-gtile.ds-pal .fl-gname { font-size: 11px; }
  #view-design .fl-gtile.ds-pal .fl-gsub, #view-design .fl-gtile.ds-pal .ds-info { display: none; }
  .fl-ds-actions #ds-designs, .fl-ds-actions #ds-save { flex: 1; border: 0; background: #F4EFE3; color: #1F2A1C; border-radius: 99px; padding: 14px 12px; font: 800 14px var(--fl-ui); }
  .fl-ds-actions #ds-apply { flex: 1.4; border: 0; background: #1F2A1C; color: #fff; border-radius: 99px; padding: 14px 12px; font: 800 14px var(--fl-ui); }
  body[data-tab="design"] #fl-chrome .fl-head .fl-brand { color: var(--fl-cream); }
  body[data-tab="design"] #fl-chrome .fl-head .fl-round { background: var(--fl-cream-16); color: var(--fl-cream); }
}
/* TODO(design): extends board 4k - Save keeps a pill between My designs and Apply; the board has two actions and no save */

/* board 4h: walk mode - the chip and Stop float over the map card's top edge; the quest card sits above the nav */
#walk-ov { position: fixed; left: 0; right: 0; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 60; padding: 0 16px; pointer-events: none; background: none; border: 0; }
#walk-ov .walk-card { display: contents; }
#fl-map-card .fl-walk-top { position: absolute; left: 14px; right: 14px; top: 14px; display: flex; justify-content: space-between; align-items: center; z-index: 6; }
body.walking #fl-map-card #fl-map-hint { display: none; }
#walk-ov #walk-body { pointer-events: auto; }
body.walking #fl-map-hint, body.walking .fl-map-legend { display: none; }
/* board 5c: the collection's kind cards run six across on desktop */
/* board 1a/3f: the Ask field is a translucent pill on the dark hero; typed text is cream. The generic input rule in styles.css outranks the class, hence the !important */
.fl-ask input, .fl-ask input:focus { background: rgba(255,253,246,.16) !important; color: #FFFDF6 !important; -webkit-text-fill-color: #FFFDF6; caret-color: #A3E635; border: 0 !important; box-shadow: none !important; }
.fl-ask input::placeholder { color: rgba(255,253,246,.6) !important; -webkit-text-fill-color: rgba(255,253,246,.6); }

/* board 3f: with an answer the hero grows; the card sits under the Ask bar on the dark */
.fl-today-hero.answered { height: auto !important; min-height: 470px; }
.fl-today-hero.answered .fl-hero-foot { position: relative; padding: 200px 20px 20px; left: 0; right: 0; bottom: auto; }
.fl-today-hero.answered .fl-hero-3d, .fl-today-hero.answered .fl-hero-veil { position: absolute; inset: 0; }
#ask-ans:not(:empty) { margin-top: 14px; }
#ask-ans .fl-answer { border-radius: 28px; }

/* board 1a (6 Sep revision): the body starts 12px under the hero with 10px between cards; the pick strip hides its scrollbar */
.fl-today-body { margin-top: 12px !important; gap: 10px !important; padding-top: 0 !important; }
#fl-pick::-webkit-scrollbar { display: none; }
.fl-next-ring { display: inline-flex; align-items: center; justify-content: center; }
/* the hidden attribute must win over the flex display of the Ask bar and the pick strip wrapper */
.fl-ask[hidden] { display: none !important; }
/* board 1a: the pick strip runs to the screen edge; its paper fade must not be clipped by the body */
@media (max-width: 899px) { #today, #view-today, .fl-today-body { overflow: visible !important; } .fl-today-body > div[style*="margin-right:-16px"] { margin-right: -14px !important; width: calc(100% + 14px) !important; } }
/* walk HUD (4h/1k): Exit on the left; layers, camera and Quests in one row on the right, never overlapping */
#walk-hud .wk-exit { top: calc(16px + env(safe-area-inset-top, 0px)) !important; inset-inline-start: 16px !important; inset-inline-end: auto !important; }
#walk-hud .wk-jobs { top: calc(16px + env(safe-area-inset-top, 0px)) !important; inset-inline-end: 16px !important; }
#walk-hud .wk-photo { top: calc(16px + env(safe-area-inset-top, 0px)) !important; inset-inline-end: 168px !important; }
#walk-hud .wk-cam { top: calc(16px + env(safe-area-inset-top, 0px)) !important; inset-inline-end: 222px !important; bottom: auto !important; }

/* board 1a layout law (phone): the hero fills what the pinned stack leaves; never empty paper under the job card */
@media (max-width: 899px) {
  #view-today.active, #today { display: flex !important; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
  #today { flex: 1; }
  .fl-today-hero { flex: 1 1 auto !important; height: auto !important; min-height: 320px; }
  .fl-today-body { flex: 0 0 auto; padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
  body[data-tab="today"] main { padding-bottom: 0 !important; }
}

/* board 4h·b: the tapped plant as a bottom sheet in the walk - edge to edge, top radius 36, on the safe area; minimap and joystick hide */
#walk-hud .wk-ring { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; transform: none !important; width: auto !important; max-width: none !important; background: #F4EFE3 !important; border-radius: 36px 36px 0 0 !important; padding: 10px 20px calc(34px + env(safe-area-inset-bottom)) !important; box-shadow: 0 -12px 40px rgba(0,0,0,.35) !important; z-index: 40; border: 0 !important; text-align: left !important; }
#walk-hud .wk-ring .wk-grab { width: 44px; height: 5px; border-radius: 3px; background: #C8C0A8; margin: 0 auto 16px; }
#walk-hud.sheet-open .wk-map, #walk-hud.sheet-open .wk-pad, #walk-hud.sheet-open .wk-quest, #walk-hud.sheet-open .wk-jobs, #walk-hud.sheet-open .wk-cam, #walk-hud.sheet-open .wk-photo { display: none !important; }
#walk-hud.sheet-open::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.45)); pointer-events: none; z-index: 39; }
#walk-hud .wk-acts button svg { width: 28px; height: 28px; }
.wk-plantname { background: #FFFDF6 !important; color: #1F2A1C !important; border-radius: 99px !important; padding: 8px 16px !important; font: 800 15px var(--fl-ui) !important; box-shadow: 0 6px 18px rgba(0,0,0,.25); display: inline-flex; align-items: center; }
/* board 1a layout law: the stack ends 14px above the nav; the hero spans the full width inside the flex column */
@media (max-width: 899px) { .fl-today-body { padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important; } .fl-today-hero { width: calc(100% + 28px); } }

/* board 1a (pulse grid version): the hero is fixed at 362px, the column scrolls under the nav behind a 40px paper fade */
@media (max-width: 899px) {
  #view-today.active, #today { display: block !important; min-height: 0; }
  .fl-today-hero { flex: none !important; height: calc(362px + env(safe-area-inset-top)) !important; min-height: 0 !important; }
  .fl-today-body { display: flex; flex-direction: column; gap: 10px !important; margin-top: 12px !important; padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important; }
  .fl-today-fade { position: fixed; left: 0; right: 0; bottom: calc(82px + env(safe-area-inset-bottom)); height: 40px; background: linear-gradient(180deg, rgba(244,239,227,0), #F4EFE3); pointer-events: none; z-index: 70; }
  body:not([data-tab="today"]) .fl-today-fade { display: none; }
  .fl-ask input { background: rgba(255,253,246,.12) !important; border: 1.5px solid rgba(255,253,246,.25) !important; }
}

/* board 1j·b: the launcher sheet is paper with a 36px top radius over the dimmed scene */
#more-sheet .ms-panel { background: #F4EFE3 !important; border-radius: 36px 36px 0 0 !important; padding-top: 12px !important; }
#more-sheet .ms-grid { display: none; }

/* ===== moving between pages =====
   The old 250 ms fade started the moment the tab was swapped, which is exactly when the heavy
   render runs, so it played through the jank and read as a cut. The view now animates after its
   content is built, and the first cards rise one after another. */
.view.active { animation: none; }
@keyframes fl-view-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fl-rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.view.fl-in { animation: fl-view-in .24s ease-out both; }
.view.fl-in .fl-title,
.view.fl-in .fl-today-body > *:nth-child(-n+5),
.view.fl-in .fl-kit-body > *:nth-child(-n+5),
.view.fl-in .fl-jobs-body > *:nth-child(-n+4),
.view.fl-in #inventory > .fl-card,
.view.fl-in .fl-search { animation: fl-rise-in .34s cubic-bezier(.22,.61,.36,1) both; }
.view.fl-in .fl-today-body > *:nth-child(2), .view.fl-in .fl-kit-body > *:nth-child(2), .view.fl-in .fl-jobs-body > *:nth-child(2) { animation-delay: .04s; }
.view.fl-in .fl-today-body > *:nth-child(3), .view.fl-in .fl-kit-body > *:nth-child(3), .view.fl-in .fl-jobs-body > *:nth-child(3) { animation-delay: .08s; }
.view.fl-in .fl-today-body > *:nth-child(4), .view.fl-in .fl-kit-body > *:nth-child(4), .view.fl-in .fl-jobs-body > *:nth-child(4) { animation-delay: .12s; }
.view.fl-in .fl-today-body > *:nth-child(5), .view.fl-in .fl-kit-body > *:nth-child(5) { animation-delay: .16s; }
/* the chrome follows the page instead of snapping: the nav lights up, the wordmark changes shade */
.fl-nav .fl-tab { transition: color .22s ease, background .22s ease, transform .12s ease-out; }
.fl-nav .fl-tab svg { transition: transform .28s cubic-bezier(.22,.61,.36,1); }
.fl-nav .fl-tab.on svg { transform: translateY(-1px) scale(1.08); }
.fl-nav .fl-tab:active { transform: scale(.94); }
.fl-nav .fl-tree { transition: transform .12s ease-out, box-shadow .22s ease; }
.fl-head .fl-brand, .fl-head .fl-round { transition: color .28s ease, background .28s ease; }
.fl-pill, .fl-job, .fl-gtile { transition: transform .12s ease-out, background .18s ease; }
.fl-pill:active, .fl-job:active, .fl-gtile:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .view.fl-in, .view.fl-in *, .fl-nav .fl-tab, .fl-nav .fl-tab svg { animation: none !important; transition: none !important; } }

/* a section change inside a page (Journal tabs, Kitchen tabs, Library drill, Plants filter) */
.fl-swap { animation: fl-rise-in .26s cubic-bezier(.22,.61,.36,1) both; }
@media (prefers-reduced-motion: reduce) { .fl-swap { animation: none !important; } }

/* arriving from a row that named this job: the row it landed on says so for a moment */
.fl-job.fl-focus, .fl-hero.fl-focus { outline: 3px solid #A3E635; outline-offset: 2px; transition: outline-color .6s; }

/* board 1k: four pills on one line on a 390 px phone */
@media (max-width: 400px) { .fl-three-pills button { padding: 12px 15px !important; font-size: 13.5px !important; } }
/* a view-only account: the controls that write are not offered */
body[data-role="viewer"] #fl-tree, body[data-role="viewer"] .fl-head-edit, body[data-role="viewer"] [data-jhgo], body[data-role="viewer"] [data-jnsearch],
body[data-role="viewer"] [data-setcard="8"], body[data-role="viewer"] [data-setcard="4"], body[data-role="viewer"] [data-setcard="7"], body[data-role="viewer"] [data-setcard="6"], body[data-role="viewer"] [data-setcard="3"],
body[data-role="viewer"] [data-movep], body[data-role="viewer"] [data-removep], body[data-role="viewer"] [data-intake-edit], body[data-role="viewer"] [data-tray] { display: none !important; }
/* board 1c: the "row 2 · one of 6" line is cream text on the dark band. It is a control (opens the kind
   sheet), so the generic button rules gave it a grey pill nobody could read - the text wins. */
.fl-ph-sub.fl-ph-kind, button.fl-ph-kind { background: none !important; border: 0 !important; padding: 0 !important; margin-top: 2px;
  color: rgba(255,253,246,.88) !important; font: 600 13.5px var(--fl-ui) !important; box-shadow: none !important; text-align: left; cursor: pointer; border-radius: 0 !important; }
/* the sign-in card's secondary doors (create an account, forgot, back to sign in) are text links, not pills */
.au-card .fl-link { background: none !important; border: 0 !important; padding: 0 !important; color: #3E5B2C !important; font: 700 14px var(--fl-ui) !important; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; box-shadow: none !important; }

/* a view-only member of a garden: the controls that write are not offered, as for a viewer account */
body[data-garden="view"] #fl-tree, body[data-garden="view"] .fl-head-edit, body[data-garden="view"] [data-jhgo], body[data-garden="view"] [data-jnsearch],
body[data-garden="view"] [data-movep], body[data-garden="view"] [data-removep], body[data-garden="view"] [data-intake-edit], body[data-garden="view"] [data-tray] { display: none !important; }

/* ===== the planting board (board.js) ===== */
body.board-open { overflow: hidden; }
.bd { position: fixed; inset: 0; z-index: 2000; background: #4F7A36; touch-action: none; user-select: none; -webkit-user-select: none; font-family: var(--fl-ui); }
.bd-canvas { position: absolute; inset: 0; display: block; touch-action: none; cursor: crosshair; }
.bd[data-mode="look"] .bd-canvas { cursor: grab; }
.bd-top { position: absolute; left: 12px; right: 12px; top: calc(10px + env(safe-area-inset-top)); display: flex; align-items: center; gap: 10px; pointer-events: none; }
.bd-top > * { pointer-events: auto; }
.bd-done { border: 0; cursor: pointer; background: #1F2A1C; color: #FFFDF6; border-radius: 99px; padding: 11px 20px; font: 800 14px var(--fl-ui); box-shadow: 0 4px 14px rgba(0,0,0,.22); }
.bd-title { flex: 1; min-width: 0; display: grid; }
.bd-name { min-width: 0; color: #FFFDF6; font: 600 19px var(--fl-display); text-shadow: 0 1px 6px rgba(0,0,0,.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-tally { color: #E9F7CF; font: 700 12.5px var(--fl-ui); text-shadow: 0 1px 4px rgba(0,0,0,.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* phase 2: the season row - the month the board shows, and the scrubber that previews the coming year */
.bd-season { position: absolute; left: 50%; transform: translateX(-50%); top: calc(116px + env(safe-area-inset-top)); display: grid; justify-items: center; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.bd-season > * { pointer-events: auto; }
.bd[data-mode="look"] .bd-season { top: calc(62px + env(safe-area-inset-top)); }
.bd:not([data-mode="plant"]):not([data-mode="look"]) .bd-season { display: none; }
.bd-month { border: 0; cursor: pointer; background: rgba(255,253,246,.94); color: #1F2A1C; border-radius: 99px; padding: 9px 16px 9px 18px; font: 800 13.5px var(--fl-ui); box-shadow: 0 4px 14px rgba(0,0,0,.18); display: inline-flex; align-items: center; gap: 8px; }
.bd-month::after { content: ''; width: 7px; height: 7px; border-right: 2.2px solid currentColor; border-bottom: 2.2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.bd-month[aria-expanded="true"]::after { transform: translateY(1px) rotate(225deg); }
.bd-month:hover { background: #FFFDF6; }
.bd-month.on { background: #A3E635; color: #1F2A1C; }
.bd-scrub { width: 100%; box-sizing: border-box; background: rgba(255,253,246,.96); border-radius: 22px; padding: 12px 14px 10px; box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.bd-scrub input { width: 100%; margin: 0; accent-color: #3E5B2C; height: 28px; cursor: pointer; touch-action: none; }
.bd-mlabs { display: grid; grid-template-columns: repeat(12, 1fr); margin-top: 2px; }
.bd-mlabs span { text-align: center; font: 800 10px var(--fl-ui); color: #8F988A; letter-spacing: .02em; white-space: nowrap; }
.bd-mlabs span:first-child { text-align: left; }
.bd-mlabs span.on { color: #1F2A1C; }
.bd[data-mode="plant"] .bd-hint { top: calc(164px + env(safe-area-inset-top)); }
.bd[data-mode="look"] .bd-hint { top: calc(110px + env(safe-area-inset-top)); }
.bd[data-season="open"] .bd-hint { display: none; }
/* phase 2: the seasonal goal at the head of the planting tray */
.bd-goal { border: 0; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 10px; background: #ECF6D8; color: #1F2A1C; border-radius: 18px; padding: 7px 14px 7px 8px; font: 800 14px var(--fl-ui); text-align: left; }
.bd-goal:hover { background: #E1F0C6; }
.bd-goal > span { flex: 1; min-width: 0; }
.bd-goal i { font-style: normal; font-size: 20px; color: #3E5B2C; }
[dir="rtl"] .bd-goal i { transform: scaleX(-1); }
.bd-goal .fl-glyph { flex: 0 0 auto; }
.bd-top-r { display: flex; gap: 8px; }
.bd-round { width: 42px; height: 42px; border: 0; cursor: pointer; border-radius: 50%; background: rgba(255,253,246,.94); color: #1F2A1C; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.bd-round:disabled { opacity: .45; cursor: default; }
.bd-tabs { position: absolute; left: 50%; transform: translateX(-50%); top: calc(62px + env(safe-area-inset-top)); display: flex; gap: 3px; padding: 4px; background: rgba(255,253,246,.94); border-radius: 99px; box-shadow: 0 4px 16px rgba(0,0,0,.18); }
.bd-tabs button { border: 0; cursor: pointer; background: none; color: #66735F; border-radius: 99px; padding: 9px 15px; font: 800 13.5px var(--fl-ui); }
.bd-tabs button[aria-selected="true"] { background: #1F2A1C; color: #FFFDF6; }
.bd-hint { position: absolute; left: 50%; transform: translateX(-50%); top: calc(116px + env(safe-area-inset-top)); max-width: min(92vw, 520px); text-align: center; background: rgba(31,42,28,.82); color: #FFFDF6; border-radius: 14px; padding: 9px 14px; font: 600 13px/1.4 var(--fl-ui); pointer-events: none; }
.bd-hint.warn { background: #B4472F; }
.bd-tray { position: absolute; left: 0; right: 0; bottom: 0; background: #F4EFE3; border-radius: 26px 26px 0 0; box-shadow: 0 -8px 26px rgba(0,0,0,.2); padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); display: grid; gap: 10px; max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; }
/* a grid child takes its content's width unless told otherwise: long Russian or Italian labels pushed the cards past the screen */
.bd-tray > * { min-width: 0; }
.bd-tray:empty { display: none; }
.bd-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; align-items: center; }
.bd-row::-webkit-scrollbar { display: none; }
.bd-row button { flex: 0 0 auto; border: 0; cursor: pointer; background: #FFFDF6; color: #3E5B2C; border-radius: 99px; padding: 10px 16px; font: 800 13.5px var(--fl-ui); box-shadow: 0 2px 8px rgba(58,50,32,.08); display: inline-flex; align-items: center; gap: 8px; }
.bd-row button.on { background: #1F2A1C; color: #FFFDF6; }
.bd-row button:focus-visible, .bd-sp:focus-visible { outline: 3px solid #A3E635; outline-offset: 2px; }
.bd-brush i { width: 18px; height: 18px; border-radius: 6px; display: inline-block; }
.bd-brush.b-b i { background: #7C4F2D; } .bd-brush.b-p i { background: #D8CBA8; } .bd-brush.b-g i { background: #86B853; }
.bd-sizes span { font: 800 12px var(--fl-ui); letter-spacing: .08em; text-transform: uppercase; color: #8F988A; margin-right: 2px; }
.bd-struct i { width: 20px; height: 20px; border-radius: 6px; display: inline-block; }
.bd-struct i.s-greenhouse { background: #DCEEEA; border: 2px solid #fff; } .bd-struct i.s-shed { background: #9A6B3F; } .bd-struct i.s-tap { background: #3B6E9C; border-radius: 50%; } .bd-struct i.s-compost { background: #7A5530; } .bd-struct i.s-gate { background: #C79A62; }
.bd-search input { width: 100%; box-sizing: border-box; border: 0; border-radius: 99px; padding: 12px 18px; background: #FFFDF6; font: 500 15px var(--fl-ui); color: #1F2A1C; box-shadow: 0 2px 8px rgba(58,50,32,.08); }
.bd-sps { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 92px; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.bd-sps::-webkit-scrollbar { display: none; }
.bd-sp { border: 0; cursor: pointer; background: #FFFDF6; border-radius: 18px; padding: 6px 4px 8px; display: grid; justify-items: center; gap: 2px; box-shadow: 0 2px 8px rgba(58,50,32,.08); }
.bd-sp.on { outline: 3px solid #1F2A1C; background: #ECF6D8; }
.bd-sp img, .bd-sp .bd-gly { width: 62px; height: 62px; object-fit: contain; display: block; }
.bd-sp .bd-gly svg { width: 100%; height: 100%; }
.bd-sp span { font: 800 12px/1.15 var(--fl-ui); color: #1F2A1C; text-align: center; }
.bd-sp small { font: 600 10.5px var(--fl-ui); color: #8F988A; }
.bd-empty { margin: 6px 4px; color: #66735F; font: 500 14px var(--fl-ui); }
.bd-chosen { display: flex; align-items: center; gap: 12px; }
.bd-chosen img { width: 56px; height: 56px; object-fit: contain; }
.bd-chosen div { flex: 1; min-width: 0; display: grid; }
.bd-chosen b { font: 600 18px var(--fl-display); color: #1F2A1C; }
.bd-chosen small { font: 600 13px var(--fl-ui); color: #66735F; }
.bd-chosen button { border: 0; cursor: pointer; background: #FFFDF6; color: #3E5B2C; border-radius: 99px; padding: 11px 16px; font: 800 13.5px var(--fl-ui); box-shadow: 0 2px 8px rgba(58,50,32,.08); }
.bd-bin { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(24px + env(safe-area-inset-bottom)); background: rgba(31,42,28,.88); color: #FFFDF6; border-radius: 99px; padding: 14px 22px; display: flex; align-items: center; gap: 10px; font: 800 14px var(--fl-ui); z-index: 3; transition: transform .15s, background .15s; }
.bd-bin.over { background: #B4472F; transform: translateX(-50%) scale(1.08); }
.bd-toast { position: absolute; left: 12px; right: 12px; bottom: calc(46vh + 12px); max-width: 520px; margin: 0 auto; background: #1F2A1C; color: #FFFDF6; border-radius: 18px; padding: 12px 12px 12px 16px; display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.28); z-index: 4; }
.bd[data-mode="look"] .bd-toast, .bd[data-mode="shape"] .bd-toast { bottom: calc(24px + env(safe-area-inset-bottom)); }
.bd-toast div { flex: 1; min-width: 0; display: grid; } .bd-toast b { font: 800 14px var(--fl-ui); } .bd-toast small { font: 500 12.5px var(--fl-ui); opacity: .8; }
.bd-toast button { border: 0; cursor: pointer; background: rgba(255,253,246,.14); color: #A3E635; border-radius: 99px; padding: 9px 14px; font: 800 13px var(--fl-ui); }
/* the Designer keeps only its irrigation layout; its plants button now opens the board */
#ds-mode-plants { display: none !important; }
@media (prefers-reduced-motion: reduce) { .bd-bin { transition: none; } }
/* a sheet opened from the board (planting details) sits above it */
body.board-open .fl-scrim, body.board-open #dlg, body.board-open .dlg-ov { z-index: 2100 !important; }
.bd-bin[hidden], .bd-toast[hidden], .bd-hint[hidden] { display: none !important; }
/* the app's own toasts (errors, approvals sent) show above the board */
body.board-open #toast, body.board-open .toast, body.board-open #fl-toast { z-index: 2300 !important; }

/* ---- milestones (planting board phase 2): one card, a short burst, announced once ---- */
.ms-ov { position: fixed; inset: 0; z-index: 2600; display: grid; place-items: center; padding: 24px; background: rgba(31,42,28,0); transition: background .22s; }
.ms-ov.open { background: rgba(31,42,28,.42); }
.ms-card { position: relative; width: min(340px, 100%); box-sizing: border-box; background: #FFFDF6; border-radius: 30px; padding: 30px 22px 20px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.28); transform: translateY(18px) scale(.94); opacity: 0; transition: transform .32s cubic-bezier(.2,1.4,.4,1), opacity .2s; }
.ms-ov.open .ms-card { transform: none; opacity: 1; }
.ms-icon { position: relative; display: grid; place-items: center; height: 76px; }
.ms-mark { width: 72px; height: 72px; border-radius: 50%; background: #ECF6D8; color: #3E5B2C; display: grid; place-items: center; box-shadow: 0 0 0 3.4px #A3E635; }
.ms-eyebrow { margin-top: 14px; font: 800 12px var(--fl-ui); letter-spacing: .14em; text-transform: uppercase; color: #8A4B22; }
.ms-title { margin-top: 6px; font: 700 25px/1.15 var(--fl-display); color: #1F2A1C; text-wrap: balance; }
.ms-sub { margin-top: 8px; font: 500 14.5px/1.4 var(--fl-ui); color: #66735F; }
.ms-foot { margin-top: 20px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ms-burst { position: absolute; left: 50%; top: 68px; width: 0; height: 0; pointer-events: none; z-index: 0; }
.ms-card > :not(.ms-burst) { position: relative; z-index: 1; }
.ms-burst i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--c); opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.4); }
.ms-ov.open .ms-burst i { animation: ms-fly .9s cubic-bezier(.15,.8,.3,1) var(--d) forwards; }
@keyframes ms-fly { 0% { opacity: 1; transform: rotate(var(--a)) translateY(-10px) scale(.6); } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-64px) scale(1); } }
@media (prefers-reduced-motion: reduce) { .ms-card { transition: opacity .2s; transform: none; } .ms-ov.open .ms-burst i { animation: none; } }

/* ---- the guided setup of a new garden (Plot, Beds, Water, Plant) ---- */
.bd[data-setup] .bd-tabs, .bd[data-setup] .bd-season { display: none; }
.bd-steps { position: absolute; left: 50%; transform: translateX(-50%); top: calc(62px + env(safe-area-inset-top)); display: flex; gap: 4px; margin: 0; padding: 4px; list-style: none; background: rgba(255,253,246,.95); border-radius: 99px; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.bd-steps button { border: 0; cursor: pointer; background: none; color: #8F988A; border-radius: 99px; padding: 6px 12px 6px 6px; display: inline-flex; align-items: center; gap: 7px; font: 800 13px var(--fl-ui); }
.bd-steps button:hover:not(:disabled):not(.on) { background: #EFEADC; }
.bd-steps button:disabled { cursor: default; }
.bd-steps i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--fl-ui); font-style: normal; background: #EAE4D2; color: #8F988A; }
.bd-steps button.on { background: #1F2A1C; color: #FFFDF6; }
.bd-steps button.on i { background: #A3E635; color: #1F2A1C; animation: bd-step-pop .4s cubic-bezier(.2,1.6,.4,1); }
.bd-steps button.done { color: #3E5B2C; }
.bd-steps button.done i { background: #A3E635; color: #1F2A1C; }
@keyframes bd-step-pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
@media (max-width: 440px) { .bd-steps button span { display: none; } .bd-steps button.on span { display: inline; } }
.bd-steps { max-width: calc(100% - 24px); overflow-x: auto; scrollbar-width: none; }
.bd-steps::-webkit-scrollbar { display: none; }
.bd-su { min-width: 0; display: grid; gap: 10px; background: #FFFDF6; border-radius: 22px; padding: 14px 16px; box-shadow: 0 2px 10px rgba(58,50,32,.08); }
.bd-su-head { display: grid; gap: 3px; }
.bd-su-k { font: 800 11px var(--fl-ui); letter-spacing: .12em; text-transform: uppercase; color: #8A4B22; }
.bd-su-head b { font: 600 20px/1.2 var(--fl-display); color: #1F2A1C; }
.bd-su-head small { font: 500 14px/1.4 var(--fl-ui); color: #66735F; }
.bd-su-fact { font: 700 13.5px var(--fl-ui); color: #3E5B2C; }
.bd-su-opt { display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 8px; }
.bd-su-opt > span { font: 700 13px var(--fl-ui); color: #66735F; }
.bd-su-opt .bd-row button { padding: 8px 14px; font-size: 13px; background: #F4EFE3; box-shadow: none; }
.bd-su-opt .bd-row button:hover { background: #EAE4D2; }
.bd-su-opt .bd-row button.on { background: #1F2A1C; color: #FFFDF6; }
.bd-su-foot { display: flex; gap: 8px; justify-content: flex-end; }
.bd-su-btn { border: 0; cursor: pointer; border-radius: 99px; padding: 12px 20px; font: 800 14.5px var(--fl-ui); }
.bd-su-btn.primary { background: #1F2A1C; color: #FFFDF6; flex: 1; max-width: 320px; }
.bd-su-btn.primary:hover:not(:disabled) { background: #2F3E2A; }
.bd-su-btn.quiet { background: #EFEADC; color: #3E5B2C; }
.bd-su-btn.quiet:hover { background: #E4DEC9; }
.bd-su-btn:disabled { opacity: .4; cursor: default; }
.bd-su-plant { grid-template-columns: 1fr auto; align-items: center; padding: 10px 12px 10px 16px; }
.bd-su-plant .bd-su-head b { font-size: 17px; }
.bd-su-plant .bd-su-btn.primary { flex: none; }
.bd[data-setup] .bd-tray > .bd-su-k { margin: 2px 4px -4px; }
/* the chosen plant: a lime ring and a Selected badge, and it stays in the list */
.bd-sp { position: relative; }
.bd-sp.on { outline: 3px solid #A3E635; outline-offset: 0; background: #F4FBE4; box-shadow: 0 0 0 6px rgba(163,230,53,.25); }
.bd-sel { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); background: #1F2A1C; color: #A3E635; font: 800 10px var(--fl-ui); font-style: normal; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.bd-sps { padding-top: 8px; }
.bd-chosen { background: #ECF6D8; border-radius: 18px; padding: 8px 8px 8px 10px; }
.bd-chosen img { width: 44px; height: 44px; }
.bd-chosen b { font: 700 15px var(--fl-ui); }
.bd-chosen button:hover { background: #F4EFE3; }
.bd-ready { z-index: 2600; }
.bd[data-setup] .bd-toast { bottom: auto; top: calc(112px + env(safe-area-inset-top)); }
.bd-su-btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-su-btn.quiet { flex: 0 1 auto; min-width: 0; }
.bd-su-btn.primary { min-width: 130px; }
/* a step's button before its condition is met: visible, explained on tap (board.js), never pressed */
.bd-su-btn[aria-disabled="true"] { opacity: .4; cursor: default; }
.bd-su-btn[aria-disabled="true"]:hover { filter: none; }
@media (max-width: 440px) { .bd-su-btn.primary { min-width: 0; } .bd-su-foot { flex-wrap: wrap; } .bd-su-btn { white-space: normal; } }
.bd[data-setup] .bd-sps { grid-template-rows: auto; }
.bd[data-setup] .bd-goal { display: none; }
/* day one: the line under "Bare ground" reads on the dark hero and clears the button */
.fl-hero-foot > .fl-body { color: var(--fl-cream-80); margin: 8px 0 16px; max-width: 34ch; }
@media (max-width: 899px) { .fl-today-hero.day-one:not(.answered) { height: calc(440px + env(safe-area-inset-top)) !important; } }
.bd-chosen.warn { background: #FBE9E3; }
.bd-chosen.warn small { color: #8A3A22; }
.bd-chosen [data-bdpaintbed] { background: #1F2A1C; color: #FFFDF6; }
.bd-chosen [data-bdpaintbed]:hover { background: #2F3E2A; }
/* in Plant mode the note sits at the top, over the month pill, never over the ground being planted */
.bd[data-mode="plant"] .bd-toast { bottom: auto; top: calc(108px + env(safe-area-inset-top)); }
/* when the plants went in: one row under the chosen plant, set once for everything placed after */
.bd-when { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 0 2px; }
.bd-when > span { font: 800 11px var(--fl-ui); letter-spacing: .1em; text-transform: uppercase; color: #8A4B22; }
.bd-when .bd-row button, .bd-when-pick { padding: 7px 12px; font: 800 12.5px var(--fl-ui); background: #FFFDF6; color: #3E5B2C; border-radius: 99px; box-shadow: 0 1px 4px rgba(58,50,32,.08); }
.bd-when .bd-row button:hover, .bd-when-pick:hover { background: #EFEADC; }
.bd-when .bd-row button.on, .bd-when-pick.on { background: #1F2A1C; color: #A3E635; }
.bd-when-pick { position: relative; flex: 0 0 auto; cursor: pointer; display: inline-flex; align-items: center; white-space: nowrap; }
.bd-when-pick input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; }

/* ---- the Board view on the Garden page: the planting board embedded in the map's card ---- */
.fl-map-card.board-on #map-container, .fl-map-card.board-on .fl-map-hint, .fl-map-card.board-on .fl-map-legend { display: none !important; }
.fl-map-card.board-on { height: calc(100dvh - 300px - env(safe-area-inset-bottom)); min-height: 380px; }
#board-host { position: absolute; inset: 0; }
#board-host[hidden] { display: none; }
.bd.embedded { position: absolute; inset: 0; z-index: 1; border-radius: inherit; overflow: hidden; }
.bd.embedded .bd-done, .bd.embedded .bd-name, .bd.embedded [data-bdundo], .bd.embedded .bd-hint, .bd.embedded .bd-tray, .bd.embedded .bd-bin, .bd.embedded .bd-tabs { display: none !important; }
.bd.embedded .bd-top { top: 10px; left: auto; right: 10px; }
.bd.embedded .bd-season { top: 10px; left: 12px; transform: none; width: auto; justify-items: start; }
.bd.embedded .bd-scrub { width: min(86vw, 360px); }
.bd.embedded .bd-round { width: 38px; height: 38px; }
@media (min-width: 900px) { .fl-map-card.board-on { height: 100%; min-height: 520px; } }
.bd.embedded .bd-title { display: none !important; }
.fl-map-card.board-on { height: calc(100dvh - 390px - env(safe-area-inset-bottom)); min-height: 360px; }
@media (min-width: 900px) { .fl-map-card.board-on { height: 100%; min-height: 520px; } }

/* ---------- the setup questions ---------- */
.sq { position: fixed; inset: 0; z-index: 1200; background: var(--fl-scrim); display: flex; align-items: stretch; justify-content: center; opacity: 0; transition: opacity .22s ease; }
.sq.open { opacity: 1; }
.sq-card { position: relative; width: 100%; max-width: 520px; background: var(--fl-paper); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); transform: translateY(18px); transition: transform .26s cubic-bezier(.2,.8,.2,1); }
.sq.open .sq-card { transform: none; }
@media (min-width: 700px) { .sq { align-items: center; padding: 24px; } .sq-card { border-radius: var(--fl-r-sheet); max-height: min(860px, 100%); overflow: hidden; } }
.sq-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px 4px; }
.sq-icon { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--fl-card); color: var(--fl-ink); display: grid; place-items: center; cursor: pointer; box-shadow: var(--fl-sh-btn); }
.sq-icon:hover { background: #fff; }
.sq-icon-sp { width: 40px; }
/* right-to-left: the back arrow points right */
[dir="rtl"] .sq-icon svg { transform: scaleX(-1); }
.sq-dots { flex: 1; display: flex; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.sq-dots li { width: 22px; height: 5px; border-radius: 3px; background: var(--fl-line); transition: background .2s, width .2s; }
.sq-dots li.done { background: var(--fl-leaf); }
.sq-dots li.on { background: var(--fl-ink); width: 34px; }
.sq-body { flex: 1; overflow-y: auto; padding: 8px 20px 20px; -webkit-overflow-scrolling: touch; }
.sq-h { font-family: var(--fl-display); font-weight: 650; font-size: 28px; line-height: 1.12; color: var(--fl-ink); margin: 10px 2px 8px; text-wrap: balance; }
.sq-h3 { font-family: var(--fl-display); font-weight: 600; font-size: 18px; color: var(--fl-ink); margin: 22px 2px 10px; }
.sq-s { margin: 0 2px 16px; font-size: 14.5px; line-height: 1.45; color: var(--fl-muted); }
.sq .sq-name { width: 100%; box-sizing: border-box; margin: 6px 0 14px; background: var(--fl-card); border: 0; border-radius: 18px; padding: 15px 18px; font: 600 16px var(--fl-ui); color: var(--fl-ink); box-shadow: var(--fl-sh-btn); outline: none; }
.sq .sq-name:focus { box-shadow: 0 0 0 3px var(--fl-lime), var(--fl-sh-btn); }
.sq-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sq-type { border: 0; cursor: pointer; text-align: left; background: var(--fl-card); border-radius: 22px; padding: 8px 8px 12px; display: flex; flex-direction: column; gap: 3px; box-shadow: var(--fl-sh-btn); transition: transform .12s, box-shadow .15s; color: var(--fl-ink); }
.sq-type:hover { box-shadow: var(--fl-sh-float); }
.sq-type:active { transform: scale(.98); }
.sq-type svg, .sq-type img { width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: 14px; display: block; margin-bottom: 6px; object-fit: cover; background: var(--fl-inset); }
.sq-type b { font: 750 15px var(--fl-ui); padding: 0 6px; }
.sq-type small { font-size: 12.5px; line-height: 1.3; color: var(--fl-muted); padding: 0 6px; }
.sq-type:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: 44% 1fr; grid-template-rows: auto auto; column-gap: 6px; align-items: center; }
.sq-type:last-child:nth-child(odd) svg, .sq-type:last-child:nth-child(odd) img { grid-row: 1 / 3; margin: 0; }
.sq-type:last-child:nth-child(odd) b { align-self: end; }
.sq-type:last-child:nth-child(odd) small { align-self: start; }
.sq-type.on { box-shadow: 0 0 0 3px var(--fl-lime), var(--fl-sh-float); }
.sq-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sq-units { margin-top: 18px; } .sq-units .sq-s { margin: 0; } .sq-units .sq-chips { margin-top: 8px; }
.sq-chips .sq-opt { flex: 1 1 0; min-width: 96px; justify-content: center; text-align: center; }
.sq-opt { border: 0; cursor: pointer; background: var(--fl-card); border-radius: 18px; padding: 13px 14px; display: flex; flex-direction: column; gap: 2px; color: var(--fl-ink); box-shadow: var(--fl-sh-btn); text-align: left; transition: background .15s; }
.sq-opt:hover { background: #fff; }
.sq-opt b { font: 700 14.5px var(--fl-ui); }
.sq-opt small { font-size: 12.5px; color: var(--fl-muted); font-variant-numeric: tabular-nums; }
.sq-opt.on { background: var(--fl-ink); color: var(--fl-cream); }
.sq-opt.on small { color: rgba(255,253,246,.72); }
.sq-sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sq-sizes .sq-opt { align-items: center; text-align: center; padding: 14px 6px; }
.sq-dims { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.sq-dims label { background: var(--fl-card); border-radius: 18px; padding: 10px 14px; display: grid; grid-template-columns: 1fr auto; align-items: center; box-shadow: var(--fl-sh-btn); }
.sq-dims span { grid-column: 1 / -1; font-size: 12px; font-weight: 750; letter-spacing: .6px; text-transform: uppercase; color: var(--fl-faint); }
.sq .sq-dims input { border: 0; background: transparent; box-shadow: none; border-radius: 0; height: auto; margin: 0; font: 700 20px var(--fl-ui); color: var(--fl-ink); width: 100%; min-width: 0; padding: 2px 0; outline: none; font-variant-numeric: tabular-nums; }
.sq-dims em { font-style: normal; font-weight: 700; color: var(--fl-muted); }
.sq-fact { margin: 12px 4px 0; font-weight: 700; color: var(--fl-moss); font-size: 14px; }
.sq-compass { position: relative; width: min(260px, 72vw); aspect-ratio: 1; margin: 6px auto 4px; border-radius: 50%; background: radial-gradient(circle, var(--fl-card) 0 46%, var(--fl-inset) 47% 100%); }
.sq-dir { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; border: 0; cursor: pointer; background: var(--fl-card); color: var(--fl-ink); font: 750 14px var(--fl-ui); box-shadow: var(--fl-sh-btn);
  transform: rotate(var(--a)) translateY(calc(-1 * min(104px, 29vw))) rotate(calc(-1 * var(--a))); transition: background .15s; }
.sq-dir:hover { background: #fff; }
.sq-dir.mid { width: 92px; height: 92px; margin: -46px 0 0 -46px; transform: none; font-size: 13px; line-height: 1.2; padding: 8px; background: var(--fl-paper); box-shadow: none; }
.sq-dir.on, .sq-dir.mid.on { background: var(--fl-ink); color: var(--fl-cream); }
.sq-list { display: grid; gap: 8px; }
.sq-list .sq-opt { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center; }
.sq-list .sq-opt b, .sq-list .sq-opt small { grid-column: 2; }
.sq-sunic { grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 50%; background: #F2C230; box-shadow: 0 0 0 5px rgba(242,194,48,.25); }
.sq-sunic.s-part { background: linear-gradient(135deg, #F2C230 50%, #B9C3B0 50%); }
.sq-sunic.s-shade { background: #9FAE98; box-shadow: 0 0 0 5px rgba(159,174,152,.25); }
.sq-grow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sq-g { border: 0; cursor: pointer; background: var(--fl-card); border-radius: 22px; padding: 18px 10px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--fl-ink); box-shadow: var(--fl-sh-btn); }
.sq-g:hover { background: #fff; }
.sq-g b { font: 750 15px var(--fl-ui); }
.sq-g.on { box-shadow: 0 0 0 3px var(--fl-lime), var(--fl-sh-float); }
.sq-sum { background: var(--fl-card); border-radius: 22px; padding: 6px 18px; box-shadow: var(--fl-sh-btn); }
.sq-row { display: grid; grid-template-columns: 38% 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--fl-line); font-size: 14.5px; }
.sq-row:last-child { border-bottom: 0; }
.sq-row span { color: var(--fl-muted); }
.sq-row b { color: var(--fl-ink); font-weight: 700; }
.sq-foot { padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--fl-paper) 70%, rgba(244,239,227,0)); }
.sq-go { width: 100%; border: 0; cursor: pointer; border-radius: 99px; padding: 17px; background: var(--fl-ink); color: var(--fl-cream); font: 750 16px var(--fl-ui); transition: opacity .15s, background .15s; }
.sq-go:hover:not(:disabled) { background: #2C3A28; }
.sq-go:disabled { opacity: .35; cursor: default; }
[dir="rtl"] .sq-type, [dir="rtl"] .sq-opt { text-align: right; }

/* ---------- the starter plan and the containers on the board ---------- */
.bd-plan-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.bd-plan-kinds span { display: inline-flex; align-items: center; gap: 6px; background: var(--fl-paper); border-radius: 99px; padding: 4px 12px 4px 5px; font-size: 13px; font-weight: 700; color: var(--fl-ink); }
.bd-plan-kinds em { font-style: normal; }
.bd-su-foot3 { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 12px; }
.bd-su-foot3 > .bd-su-btn { width: 100%; }
.bd-su-foot3 .bd-row { display: flex; gap: 8px; }
.bd-su-foot3 .bd-row .bd-su-btn { flex: 1; }
.bd-struct small { display: block; font-size: 11px; font-weight: 700; color: var(--fl-muted); margin-top: 1px; font-variant-numeric: tabular-nums; }
.bd-struct.on small { color: inherit; opacity: .75; }
.bd-struct i.s-railbox { background: #3F5B3A; height: 10px; margin: 5px 0; border-radius: 3px; }
.bd-struct i.s-pot { background: #B9653B; border-radius: 4px 4px 9px 9px; width: 16px; }
.bd-struct i.s-bigpot { background: #B05E37; border-radius: 5px 5px 11px 11px; }
.bd-struct i.s-tub { background: #8B5A3C; border-radius: 50%; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
.bd-struct i.s-planter { background: #5C625B; height: 13px; margin: 3px 0; }
.bd-struct i.s-raised { background: #A0703F; box-shadow: inset 0 0 0 3px #76502B; }
.bd-su-plan .bd-plan-kinds { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -2px; padding: 2px 2px 4px; }
.bd-su-plan .bd-plan-kinds::-webkit-scrollbar { display: none; }
.bd-su-plan .bd-plan-kinds span { flex: 0 0 auto; }

/* ---------- iPhone: no page zoom ----------
   iOS zooms the whole page into any focused field set below 16px, and in the app it never zooms back. Every field on a
   touch screen is 16px or larger; the viewport also forbids pinch zoom of the page (the board and 3D handle their own). */
@media (pointer: coarse) {
  input:not([type=range]):not([type=checkbox]):not([type=radio]), textarea, select { font-size: 16px !important; }
}
.sq-find { display: flex; gap: 8px; }
.sq .sq-find input { flex: 1; min-width: 0; border: 0; border-radius: 99px; padding: 14px 18px; background: var(--fl-card); box-shadow: var(--fl-sh-btn); font: 600 16px var(--fl-ui); color: var(--fl-ink); outline: none; }
.sq .sq-find input:focus { box-shadow: 0 0 0 3px var(--fl-lime), var(--fl-sh-btn); }
.sq-findgo { border: 0; border-radius: 99px; padding: 0 18px; background: var(--fl-ink); color: var(--fl-cream); font: 750 15px var(--fl-ui); cursor: pointer; }
.sq-findgo:hover:not(:disabled) { background: #2C3A28; }
.sq-findgo:disabled { opacity: .45; }
.sq-place { margin: 14px 0 10px; background: var(--fl-ink); color: var(--fl-cream); border-radius: 18px; padding: 13px 16px; display: grid; gap: 2px; }
.sq-place b { font: 750 15px var(--fl-ui); }
.sq-place small { font-size: 12.5px; opacity: .75; }
.sq-find + .sq-list, .sq-place + .sq-list { margin-top: 12px; }
/* the harvest sheet: when it was picked */
.fl-hwhen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.fl-hwhen > span { font: 800 12px var(--fl-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--fl-faint); margin-right: 4px; }
.fl-hwhen button { border: 0; cursor: pointer; background: var(--fl-card); color: var(--fl-moss); border-radius: 99px; padding: 9px 14px; font: 800 13.5px var(--fl-ui); box-shadow: var(--fl-sh-btn); }
.fl-hwhen button:hover { background: #fff; }
.fl-hwhen button.on { background: var(--fl-ink); color: var(--fl-cream); }
.fl-hwhen input { border: 0; border-radius: 14px; padding: 9px 12px; background: var(--fl-card); box-shadow: var(--fl-sh-btn); font: 600 16px var(--fl-ui); color: var(--fl-ink); }
/* the status bar keeps an opaque cap once the page scrolls, so text never runs under the clock */
body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: var(--fl-paper); z-index: 76; opacity: 0; transition: opacity .18s ease-out; pointer-events: none; }
body.fl-scrolled::before { opacity: 1; }
/* the hero headline holds to three lines so a long job title never climbs over the logo */
.fl-hero-foot .fl-hero-head { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* on a phone the hero grows with its headline instead of pushing the words up under the logo */
@media (max-width: 899px) {
  .fl-today-hero:not(.answered) { height: auto !important; min-height: calc(362px + env(safe-area-inset-top)) !important; display: flex; flex-direction: column; justify-content: flex-end; }
  .fl-today-hero:not(.answered) .fl-hero-foot { position: relative; left: 0; right: 0; bottom: auto; padding: calc(118px + env(safe-area-inset-top)) 20px 20px; }
}
/* the 3D view reaches the bottom edge of the phone, under the home indicator, with no paper strip */
@media (max-width: 899px) {
  #view-three { min-height: calc(100vh + 12px + env(safe-area-inset-top) + env(safe-area-inset-bottom)); }
  #view-three #three-container { height: calc(100vh + 12px + env(safe-area-inset-top) + env(safe-area-inset-bottom)); min-height: calc(100vh + 12px + env(safe-area-inset-top) + env(safe-area-inset-bottom)); }
}
/* ---------- plans: locks, the plans sheet, the owner grants ---------- */
[data-locked="1"] { position: relative; }
[data-locked="1"]::after { content: ""; position: absolute; top: 7px; right: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--fl-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='4' y='7' width='8' height='6' rx='1.2' fill='%23A3E635'/%3E%3Cpath d='M5.6 7V5.4a2.4 2.4 0 0 1 4.8 0V7' fill='none' stroke='%23A3E635' stroke-width='1.4'/%3E%3C/svg%3E") center / 11px no-repeat; pointer-events: none; }
.fl-seg [data-locked="1"]::after, .fl-three-seg[data-locked="1"]::after { top: 2px; right: 2px; }
.fl-plan-period { display: inline-flex; background: var(--fl-inset); border-radius: 99px; padding: 3px; margin: 4px 0 12px; }
.fl-plan-period button { border: 0; cursor: pointer; background: none; color: #66735F; border-radius: 99px; padding: 8px 16px; font: 800 13.5px var(--fl-ui); }
.fl-plan-period button:hover { background: rgba(255,253,246,.7); }
.fl-plan-period button.on { background: var(--fl-ink); color: var(--fl-cream); }
.fl-plans { display: flex; flex-direction: column; gap: 10px; }
.fl-plan { background: var(--fl-card); border-radius: 22px; padding: 16px 18px; box-shadow: 0 4px 14px rgba(58,50,32,.06); border: 2px solid transparent; }
.fl-plan.mark { border-color: #A3E635; }
.fl-plan.cur { background: #EEF4E2; }
.fl-plan-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fl-plan-h b { font: 600 22px var(--fl-display); color: var(--fl-ink); }
.fl-plan-h span { font: 800 14.5px var(--fl-ui); color: #3E5B2C; white-space: nowrap; }
.fl-plan-cur { display: inline-block; margin-top: 6px; font: 800 11px var(--fl-ui); letter-spacing: .08em; text-transform: uppercase; color: #3E5B2C; }
.fl-plan-sub { margin-top: 8px; font: 700 13px var(--fl-ui); color: #66735F; }
.fl-plan ul { margin: 6px 0 0; padding: 0 0 0 18px; color: #3B4636; font: 500 14px/1.45 var(--fl-ui); }
.fl-plan li { margin: 2px 0; }
.fl-plan-trial { margin-top: 8px; font: 800 13px var(--fl-ui); color: #67A03A; }
.fl-plan .fl-pill { margin-top: 12px; width: 100%; }
.fl-plan-note { margin: 14px 2px 0; font: 600 14px var(--fl-ui); color: #3B4636; }
.fl-plan-terms { margin: 14px 2px 0; font: 500 11.5px/1.5 var(--fl-ui); color: #8F988A; }
.fl-plan-links { display: flex; gap: 16px; margin: 6px 2px 8px; font: 700 12.5px var(--fl-ui); }
.fl-plan-links a { color: #3E5B2C; }
.fl-plan-acct { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid #EAE4D2; }
.fl-plan-acct small { display: block; color: #66735F; font: 600 12.5px var(--fl-ui); }
.fl-plan-grant { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fl-plan-grant select, .fl-plan-grant input { border: 0; border-radius: 12px; padding: 8px 10px; background: var(--fl-inset); font: 600 14px var(--fl-ui); color: var(--fl-ink); }
.fl-plan-grant input[data-gnote] { flex: 1 1 120px; }
.fl-locked-page { padding: 8px 0 120px; }
/* a message is read over any open sheet, never behind it */
#toast, .toast { z-index: 2400 !important; }
/* ---------- Scan: identify, care guide, health check ---------- */
.sc-entry { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.sc-entry button { position: relative; text-align: left; border: 0; cursor: pointer; background: #1F2A1C; color: #FFFDF6; border-radius: 24px; padding: 16px; min-height: 104px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; box-shadow: 0 6px 18px rgba(31,42,28,.18); }
.sc-entry button:hover { background: #2A3826; }
.sc-entry b { font: 800 16px var(--fl-ui); }
.sc-entry small { font: 600 12.5px/1.35 var(--fl-ui); color: rgba(255,253,246,.72); }
.sc-photo { display: block; width: 100%; max-height: 300px; object-fit: cover; border-radius: 22px; margin-top: 12px; }
.sc-photo.sm { width: 96px; height: 96px; margin: 0; flex: 0 0 auto; }
.sc-wait { margin-top: 14px; color: #66735F; }
.sc-res { display: flex; gap: 14px; align-items: center; margin-top: 10px; }
.sc-sci { color: #66735F; font: 600 14px var(--fl-ui); margin-top: 2px; }
.sc-match { display: inline-block; margin-top: 8px; padding: 5px 11px; border-radius: 99px; background: #F2E6C9; color: #7A5A1E; font: 800 12.5px var(--fl-ui); }
.sc-match.hi { background: #DDEEC6; color: #3E5B2C; }
.sc-match.lo { background: #EFE7E2; color: #8A4B22; }
.sc-acts { margin-top: 16px; }
.sc-used { margin: 14px 2px 4px; font: 600 12.5px var(--fl-ui); color: #8F988A; }
.sc-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 6px; }
.sc-facts > div { background: var(--fl-card); border-radius: 18px; padding: 12px 14px; box-shadow: 0 2px 10px rgba(58,50,32,.05); }
.sc-facts small { display: block; font: 800 11px var(--fl-ui); letter-spacing: .08em; text-transform: uppercase; color: #8F988A; }
.sc-facts b { display: block; margin-top: 4px; font: 800 14.5px var(--fl-ui); color: var(--fl-ink); }
.sc-row { padding: 12px 0; border-top: 1px solid #EAE4D2; }
.sc-row b { font: 800 13.5px var(--fl-ui); color: var(--fl-ink); }
.sc-row p, .sc-probs p, .sc-dx p { margin: 4px 0 0; font: 500 14.5px/1.5 var(--fl-ui); color: #3B4636; }
.sc-probs > div { background: var(--fl-card); border-radius: 18px; padding: 12px 14px; margin-top: 8px; }
.sc-ai { margin: 16px 2px 6px; font: 500 12px/1.5 var(--fl-ui); color: #8F988A; }
.sc-dx { background: var(--fl-card); border-radius: 20px; padding: 14px 16px; margin-top: 10px; }
.sc-dx.top { border: 2px solid #E8A13C; }
.sc-dx-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.sc-dx-h span { font: 800 12.5px var(--fl-ui); color: #8A4B22; white-space: nowrap; }
.sc-dx summary { margin-top: 10px; cursor: pointer; font: 800 13.5px var(--fl-ui); color: #3E5B2C; }
.sc-entry [data-locked="1"]::after { top: 10px; right: 10px; }

/* ---- Kitchen: Tonight, the recipe browser, the working jars ---- */
.kt-hero { background: var(--fl-ink); border-radius: 28px; padding: 20px 20px 22px; color: var(--fl-cream); }
.kt-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 1.6px; color: var(--fl-lime); text-transform: uppercase; }
.kt-h { font-family: var(--fl-display); font-weight: 600; font-size: 25px; line-height: 1.2; margin-top: 6px; text-wrap: balance; }
.kt-s { font-size: 14px; color: var(--fl-cream-80); margin-top: 6px; line-height: 1.45; }
.kt-dishes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 14px 0 6px; }
.kt-dish { background: var(--fl-card); border-radius: 24px; padding: 14px 16px 16px; box-shadow: var(--fl-sh); cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: transform .15s ease, box-shadow .15s ease; }
.kt-dish:hover { box-shadow: var(--fl-sh-float); }
.kt-dish:active { transform: scale(.985); }
.kt-dish.open { grid-column: 1 / -1; }
.kt-dish-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kt-course { font-size: 11.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--fl-moss); background: var(--fl-green-soft); border-radius: 999px; padding: 3px 10px; }
.kt-min { font-size: 12.5px; font-weight: 700; color: var(--fl-muted); font-variant-numeric: tabular-nums; }
.kt-dish-name { font-family: var(--fl-display); font-weight: 600; font-size: 19px; line-height: 1.25; color: var(--fl-ink); text-wrap: balance; }
.kt-dish-sub { font-size: 13px; color: var(--fl-muted); margin-inline-start: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-dish-crops { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.kt-state { margin-inline-start: auto; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 10px; }
.kt-state.picked { background: var(--fl-lime); color: var(--fl-ink); }
.kt-state.season { background: var(--fl-gold-soft); color: var(--fl-gold); }
.kt-dish-how { border-top: 1px solid var(--fl-line); margin-top: 8px; padding-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--fl-ink); }
.kt-dish-how b { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--fl-muted); }
.kt-dish-how p { margin: 6px 0 12px; max-width: 65ch; }
.kt-open { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px; }
.kt-jar { border: 0; background: var(--fl-card); border-radius: 20px; padding: 12px 12px 10px; box-shadow: var(--fl-sh); display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 110px; max-width: 140px; cursor: pointer; text-align: center; }
.kt-jar:hover { box-shadow: var(--fl-sh-float); }
.kt-jar b { font-size: 13px; color: var(--fl-ink); line-height: 1.25; }
.kt-jar small { font-size: 11.5px; color: var(--fl-muted); }
.kt-ready { display: flex; align-items: center; gap: 12px; }
.kt-working { margin-bottom: 14px; }
.kt-work { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--fl-r-row); }
.kt-work-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kt-work-main b { font-size: 15px; color: var(--fl-ink); }
.kt-work-main small { font-size: 12.5px; color: var(--fl-muted); }
.kt-work-main .kt-note { font-style: italic; }
.kt-bar { height: 8px; border-radius: 999px; background: var(--fl-inset); overflow: hidden; margin-top: 4px; }
.kt-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--fl-leaf), var(--fl-lime)); transition: width .6s ease; }
.kt-search { width: 100%; margin: 0 0 10px; }
.kt-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; }
.kt-chip { border: 0; border-radius: 999px; padding: 8px 14px; background: var(--fl-inset); color: var(--fl-ink); font-weight: 700; font-size: 13px; white-space: nowrap; cursor: pointer; }
.kt-chip:hover { background: var(--fl-green-soft); }
.kt-chip.on { background: var(--fl-ink); color: var(--fl-cream); }
.kt-recs { display: flex; flex-direction: column; gap: 8px; }
.kt-rec { width: 100%; border: 0; text-align: start; background: var(--fl-card); border-radius: 22px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; box-shadow: var(--fl-sh); cursor: pointer; }
.kt-rec:hover { box-shadow: var(--fl-sh-float); }
.kt-rec-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kt-rec-main b { font-size: 15px; color: var(--fl-ink); }
.kt-rec-main small { font-size: 12.5px; color: var(--fl-muted); }
.kt-rec-crops { display: flex; align-items: center; gap: 3px; margin-top: 4px; flex-wrap: wrap; }
.kt-rec-crops em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--fl-gold); margin-inline-start: 6px; }
.kt-rec-crops em.kt-now { color: var(--fl-moss); background: var(--fl-green-soft); border-radius: 999px; padding: 2px 9px; }
.kt-chev { color: var(--fl-faint); flex: none; }
.kt-strip { width: 100%; text-align: start; border: 0; cursor: pointer; background: var(--fl-moss); border-radius: 26px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; }
.kt-strip-g { display: flex; gap: 2px; flex: none; }
.kt-strip-e { font-size: 11.5px; font-weight: 800; letter-spacing: 1.4px; color: var(--fl-lime); text-transform: uppercase; }
.kt-strip-t { font-size: 15px; font-weight: 800; color: var(--fl-cream); margin-top: 3px; }
.kt-strip-s { font-size: 12.5px; color: var(--fl-cream-80); }
.kt-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.kt-meta span { font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 4px 11px; background: var(--fl-inset); color: var(--fl-ink); }
.kt-meta span.m { background: var(--fl-ink); color: var(--fl-cream); }
.kt-note-card { background: var(--fl-gold-soft); color: #5E4710; border-radius: 16px; padding: 10px 14px; font-size: 13.5px; line-height: 1.45; margin: 8px 0; }
@keyframes kt-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.kt-filling rect.kt-liq { transform-origin: 50% 100%; transform-box: fill-box; animation: kt-fill .9s cubic-bezier(.3,.7,.3,1) both; }
@media (prefers-reduced-motion: reduce) { .kt-filling rect.kt-liq { animation: none; } .kt-bar i { transition: none; } }

/* the board's confirmations are quiet: a short pill that fades, and the Undo button flashes once after a change */
.bd-toast { left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); border-radius: 99px; padding: 8px 16px; box-shadow: 0 4px 14px rgba(0,0,0,.18); animation: bd-toast-in .22s ease-out; }
.bd-toast b { font: 750 13.5px var(--fl-ui); }
@keyframes bd-toast-in { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes bd-flash { 0% { box-shadow: 0 0 0 0 rgba(163,230,53,.9), 0 4px 14px rgba(0,0,0,.18); background: #A3E635; } 100% { box-shadow: 0 0 0 14px rgba(163,230,53,0), 0 4px 14px rgba(0,0,0,.18); } }
.bd-round.bd-flash { animation: bd-flash .9s ease-out; }
@media (prefers-reduced-motion: reduce) { .bd-round.bd-flash, .bd-toast { animation: none; } }

/* the town search: a field with its icon and a quiet spinner, matches listed as they are typed */
.sq-find { position: relative; align-items: center; }
.sq form.sq-find input#sq-q { padding-inline-start: 46px; padding-inline-end: 42px; }
#sq-sugg .sq-opt { grid-template-columns: 1fr; }
#sq-sugg .sq-opt b, #sq-sugg .sq-opt small { grid-column: 1; }
.sq-find-ico { position: absolute; inset-inline-start: 16px; width: 20px; height: 20px; color: var(--fl-muted); pointer-events: none; }
.sq-spin { position: absolute; inset-inline-end: 16px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--fl-line); border-top-color: var(--fl-leaf); animation: sq-spin .7s linear infinite; }
@keyframes sq-spin { to { transform: rotate(360deg); } }
.sq-list .sq-opt mark { background: none; color: var(--fl-moss); text-decoration: underline; text-decoration-color: var(--fl-lime); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.sq-list .sq-guess small { color: var(--fl-leaf); }
.sq-list .sq-opt:hover { background: var(--fl-green-soft); }
#sq-sugg:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .sq-spin { animation-duration: 2s; } }

/* ---- Gardens sheet: one card per garden, the open one first ---- */
.gd-body { display: flex; flex-direction: column; gap: 18px; padding-bottom: 8px; }
.gd-list { display: flex; flex-direction: column; gap: 10px; }
.gd-card { position: relative; background: var(--fl-card); border-radius: 22px; box-shadow: var(--fl-sh); overflow: hidden; }
.gd-card.on { box-shadow: 0 0 0 2.5px var(--fl-lime), var(--fl-sh); }
.gd-main { width: 100%; border: 0; background: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 10px 56px 10px 10px; text-align: start; color: var(--fl-ink); }
.gd-main:hover { background: #fff; }
.gd-main img, .gd-ph { width: 92px; height: 62px; border-radius: 14px; object-fit: cover; flex: none; background: var(--fl-inset); display: grid; place-items: center; }
.gd-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gd-txt b { font: 750 16px var(--fl-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-txt small { font-size: 12.5px; color: var(--fl-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-now { flex: none; font-size: 12px; font-weight: 800; color: var(--fl-moss); background: var(--fl-green-soft); border-radius: 99px; padding: 4px 10px; }
.gd-now.busy { color: var(--fl-muted); background: var(--fl-inset); }
.gd-chev { flex: none; color: var(--fl-faint); font-weight: 800; }
.gd-more { position: absolute; top: 50%; inset-inline-end: 10px; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--fl-inset); color: var(--fl-ink); cursor: pointer; display: grid; place-items: center; }
.gd-card.open .gd-more { top: 41px; }
.gd-more:hover, .gd-more[aria-expanded="true"] { background: var(--fl-green-soft); }
.gd-opts { border-top: 1px solid var(--fl-line); padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.gd-opts.warn { background: var(--fl-alert-soft); }
.gd-opts p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--fl-ink); }
.gd-opts .fl-input { width: 100%; margin: 0; }
.gd-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.gd-danger { background: var(--fl-alert) !important; color: #fff !important; }
.gd-danger-soft { color: var(--fl-alert) !important; }
.gd-new { width: 100%; border: 2px dashed var(--fl-line); background: none; border-radius: 22px; padding: 12px; display: flex; align-items: center; gap: 14px; cursor: pointer; text-align: start; color: var(--fl-ink); }
.gd-new:hover { background: var(--fl-card); border-color: var(--fl-leaf); }
.gd-plus { width: 92px; height: 62px; border-radius: 14px; background: var(--fl-green-soft); color: var(--fl-moss); display: grid; place-items: center; font: 700 30px var(--fl-ui); flex: none; }
.gd-people:empty { display: none; }
.gd-people { border-top: 1px solid var(--fl-line); padding-top: 14px; }
button.armed { background: var(--fl-alert) !important; color: #fff !important; }
.ms-garden { width: 100%; margin-top: 14px; border: 0; cursor: pointer; background: var(--fl-card); border-radius: 22px; padding: 12px 16px; display: flex; align-items: center; gap: 10px; text-align: start; color: var(--fl-ink); box-shadow: var(--fl-sh); }
.ms-garden:hover { background: #fff; }
.ms-garden-k { font-size: 11.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--fl-muted); }
.ms-garden b { flex: 1; min-width: 0; font: 750 16px var(--fl-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-garden-c { color: var(--fl-faint); font-weight: 800; }

/* ---- the board's mode bar, docked at the top of the tray, and pots and structures as cards ---- */
.bd-dock { position: sticky; top: -12px; z-index: 2; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; margin: -2px 0 0; background: #E6DFCB; border-radius: 18px; box-shadow: 0 -12px 0 #F4EFE3, 0 6px 10px -6px rgba(58,50,32,.18); }
.bd-dock button { border: 0; cursor: pointer; background: none; color: #4F5C49; border-radius: 14px; padding: 7px 4px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; font: 800 12.5px var(--fl-ui); min-height: 52px; }
.bd-dock button svg { width: 22px; height: 22px; }
.bd-dock button:hover { background: rgba(255,253,246,.6); }
.bd-dock button[aria-selected="true"] { background: #1F2A1C; color: #FFFDF6; box-shadow: 0 2px 8px rgba(31,42,28,.25); }
.bd-dock button[aria-selected="true"] svg { color: #A3E635; }
.bd[data-setup] .bd-dock { display: grid; }
.bd-tray-body { display: grid; gap: 10px; min-width: 0; }
.bd-structs.bd-sps { grid-template-rows: auto; }
.bd-sp.bd-struct { position: relative; }
.bd-sp.bd-struct.on { box-shadow: 0 0 0 3px #A3E635, 0 2px 8px rgba(58,50,32,.08); }
.bd-sp .bd-art { display: block; }
.bd-chosen .bd-art { flex: none; }
.bd-chosen button { border: 0; cursor: pointer; background: #FFFDF6; color: #3E5B2C; border-radius: 99px; padding: 10px 16px; font: 800 13.5px var(--fl-ui); box-shadow: 0 2px 8px rgba(58,50,32,.1); margin-inline-start: auto; }

/* ---- health check: the species it found, a request for a better photo, the kind of each finding ---- */
.sc-idline { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; color: var(--fl-moss); }
.sc-idline i { font-weight: 500; color: var(--fl-muted); }
.sc-retake { background: var(--fl-gold-soft); border-radius: 18px; padding: 14px 16px; margin: 12px 0; display: grid; gap: 6px; }
.sc-retake b { font-size: 15px; color: #5E4710; } .sc-retake p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--fl-ink); } .sc-retake .fl-pill { justify-self: start; margin-top: 4px; }
.sc-kind { font-size: 11.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--fl-muted); margin: -2px 0 6px; }

/* ---- Settings as tiles, the way the More sheet lays out its rooms ---- */
.fl-settiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.fl-settile { border: 0; cursor: pointer; text-align: start; border-radius: 22px; padding: 14px 12px 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 96px; color: var(--fl-ink); transition: transform .12s, filter .15s; }
.fl-settile:hover { filter: brightness(1.03); } .fl-settile:active { transform: scale(.98); }
.fl-settile-t { display: grid; gap: 1px; min-width: 0; width: 100%; }
.fl-settile-t b { font: 800 14.5px/1.2 var(--fl-ui); }
.fl-settile-t small { font: 500 11.5px/1.3 var(--fl-ui); color: var(--fl-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 900px) { .fl-settiles { grid-template-columns: repeat(3, 1fr); } }
/* ---- the Garden tab's tools sheet, tiles like the More sheet's ---- */
.ms-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.ms-tile { border: 0; cursor: pointer; text-align: start; border-radius: 22px; padding: 14px 12px 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 96px; color: var(--fl-ink); transition: transform .12s, filter .15s; }
.ms-tile:hover { filter: brightness(1.03); } .ms-tile:active { transform: scale(.98); }
.ms-tile-t { font: 800 14.5px/1.2 var(--fl-ui); color: var(--fl-ink); }
.ms-tile-s { font: 500 11.5px/1.35 var(--fl-ui); color: var(--fl-muted); margin-top: 2px; }
@media (min-width: 900px) { .ms-tiles { grid-template-columns: repeat(3, 1fr); } }
/* ---- building in 3D: the board's tray and marks laid over the 3D scene ---- */
.bd.over3d { background: transparent; }
.bd.over3d .bd-canvas { background: transparent; }
.bd.over3d .bd-season { display: none; }
.bd.over3d .bd-name { color: #FFFDF6; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
body.builder3d #fl-three-ui, body.builder3d #fl-chrome { visibility: hidden; }

/* the 3D view's buttons hold one line each */
.fl-three-pills button { white-space: nowrap; }

/* Plants (10 Oct 2026): counts as filters, painted plant art, every card one shape */
.pl-body { display: flex; flex-direction: column; gap: 22px; }
.pl-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pl-tile { border: 0; cursor: pointer; background: var(--fl-card); color: var(--fl-ink); border-radius: 20px; padding: 12px 4px 11px; display: flex; flex-direction: column; align-items: center; gap: 3px; box-shadow: 0 4px 14px rgba(58,50,32,.06); min-width: 0; transition: background .15s; }
.pl-tile b { font-family: var(--fl-display); font-size: 24px; font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; }
.pl-tile span { font-size: 11.5px; font-weight: 800; color: #66735F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pl-tile:hover { background: #F4EFE3; }
.pl-tile.warn b { color: #C8402F; }
.pl-tile.on, .pl-tile.on:hover { background: #1F2A1C; color: #FFFDF6; }
.pl-tile.on span { color: rgba(255,253,246,.72); }
.pl-tile.on.warn b { color: #FFB4A6; }
.pl-sec { display: flex; flex-direction: column; gap: 10px; }
.pl-h { margin: 0 4px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--fl-display); font-weight: 600; font-size: 20px; color: var(--fl-ink); }
.pl-h b { font-family: var(--fl-ui); font-size: 13px; font-weight: 800; color: #3E5B2C; background: #E6EFD6; border-radius: 99px; padding: 3px 11px; font-variant-numeric: tabular-nums; }
.pl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pl-card { position: relative; border: 0; cursor: pointer; background: var(--fl-card); border-radius: 22px; padding: 12px 14px 14px; box-shadow: 0 4px 14px rgba(58,50,32,.06); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; text-align: left; min-width: 0; transition: background .15s; }
.pl-card:hover { background: #FBF7EC; }
.pl-art { width: 68px; height: 68px; border-radius: 18px; background: #F1EBDD; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; flex: none; }
.pl-art img { width: 64px; height: 64px; object-fit: contain; object-position: center bottom; display: block; }
.pl-art .pl-gly { align-self: center; display: flex; }
.pl-n { position: absolute; top: 12px; right: 12px; font-size: 13px; font-weight: 800; color: #3E5B2C; background: #F1EBDD; border-radius: 99px; padding: 4px 10px; font-variant-numeric: tabular-nums; }
.pl-name { font-family: var(--fl-display); font-weight: 600; font-size: 17px; line-height: 1.22; color: var(--fl-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pl-var { font-weight: 500; color: #3E5B2C; }
.pl-chip { margin-top: auto; }
.pl-chip:empty { display: none; }
@media (min-width: 900px) { .pl-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .pl-tiles { max-width: 640px; } }

/* the recipe sheet (Kitchen, board 4v redrawn 10 Oct 2026): title, tags, the facts as tiles, the method, the crops as rows, one notes card */
.rs-head { display: flex; align-items: center; gap: 14px; padding: 6px 0 10px; }
.rs-head svg { flex: none; }
.rs-name { font-family: var(--fl-display); font-weight: 700; font-size: 26px; line-height: 1.12; color: var(--fl-ink); text-wrap: balance; min-width: 0; }
.rs-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.fl-chip.method { background: var(--fl-ink); color: var(--fl-cream); }
.fl-chip.origin { background: var(--fl-inset); color: var(--fl-ink); }
#bw-ov .fl-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 16px; }
.rs-how { font-size: 15px; color: #3D4838; line-height: 1.55; margin: 0 0 18px; }
.rs-h { margin: 0 2px 10px; font-family: var(--fl-display); font-weight: 600; font-size: 19px; color: var(--fl-ink); }
.rs-crops { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.rs-crop { display: flex; align-items: center; gap: 12px; background: var(--fl-card); border-radius: 18px; padding: 10px 14px; box-shadow: 0 4px 14px rgba(58,50,32,.06); }
.rs-crop b { flex: 1; min-width: 0; font-size: 15px; font-weight: 800; color: var(--fl-ink); }
.rs-notes { background: var(--fl-card); border-radius: 20px; padding: 4px 16px; margin: 0 0 18px; box-shadow: 0 4px 14px rgba(58,50,32,.06); }
.rs-notes > div { padding: 12px 0; }
.rs-notes > div + div { border-top: 1px solid var(--fl-line); }
.rs-notes b { display: block; font-size: 13px; font-weight: 800; color: var(--fl-moss); }
.rs-notes p { margin: 3px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--fl-ink); }
.rs-foot { display: flex; gap: 10px; }
#bw-ov .fl-tile .fl-tvalue { font-size: 18px; }

/* the Ask on Today: a microphone in the field wherever the device can listen */
.fl-ask-mic { flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,253,246,.16); color: var(--fl-cream); transition: background .15s; }
.fl-ask-mic:hover { background: rgba(255,253,246,.28); }
/* the voice sheet in the house kit */
.ms-panel.va .va-actions { justify-content: center; margin-top: 12px; }
.ms-panel.va .va-type { margin: 10px 0 0; }
.ms-panel.va .va-answer { background: var(--fl-card); border-radius: 20px; padding: 14px 16px; margin-top: 10px; box-shadow: 0 4px 14px rgba(58,50,32,.06); }
.ms-panel.va .va-answer .fl-ask-lead { color: var(--fl-ink); }

/* ---------- the house kit for settings, forms and confirmations (field test, 10 Oct 2026) ----------
   The settings sheets, care records, the plant's log forms and the dialogs were still drawn with the
   pre-facelift parts (grey square buttons, boxed rows, bare grey fields). These are their replacements:
   a list card of rows (label on the left, value or control on the right), a section title, a field, an
   aligned form row, a switch, and the confirmation dialog. */
/* the generic field rule in styles.css carries four :not() and outranked .fl-input; the field wins back here */
input.fl-input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), textarea.fl-input { border: 0; border-radius: 16px; background: var(--fl-card); box-shadow: var(--fl-sh); padding: 13px 16px; font-size: 15px; color: var(--fl-ink); }
input.fl-input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):focus-visible, textarea.fl-input:focus-visible { outline: 2px solid var(--fl-leaf); outline-offset: 0; background: var(--fl-card); }
select.fl-select { border: 0; border-radius: 999px; background-color: var(--fl-card); box-shadow: var(--fl-sh-btn); padding: 11px 36px 11px 16px; font-size: 14px; font-weight: 700; color: var(--fl-moss); background-position: right 12px center; }
html.rtl select.fl-select { padding: 11px 16px 11px 36px; background-position: left 12px center; }
.fl-group { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 0; }
.fl-group > .fl-h4 { margin: 0 4px; }
.fl-list { background: var(--fl-card); border-radius: var(--fl-r-card); box-shadow: var(--fl-sh); padding: 0 16px; }
.fl-li { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 0; border-top: 1px solid var(--fl-line); font-size: 15px; color: var(--fl-ink); width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; text-align: start; font-family: var(--fl-ui); }
.fl-li:first-child { border-top: 0; }
button.fl-li { cursor: pointer; }
button.fl-li:hover { background: rgba(103,160,58,.08); }
.fl-li-l { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fl-li-r { flex: none; display: flex; align-items: center; gap: 8px; color: var(--fl-muted); font-weight: 600; font-size: 14px; text-align: end; }
.fl-li-r .fl-pill.small { box-shadow: var(--fl-sh-btn); }
.fl-li .fl-tick { color: var(--fl-leaf); flex: none; }
.fl-li .fl-xb { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--fl-inset); color: var(--fl-muted); font-size: 17px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.fl-li .fl-xb:hover { background: var(--fl-alert-soft); color: var(--fl-alert); }
.fl-li.col { flex-direction: column; align-items: stretch; }
.fl-formrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fl-formrow > .fl-input { margin: 0; flex: 1 1 140px; min-width: 0; width: auto; }
.fl-formrow > .fl-select { flex: none; }
.fl-formrow > .fl-pill { flex: none; }
.fl-fields { display: flex; flex-direction: column; gap: 10px; }
.fl-fields > .fl-input { margin: 0; }
.fl-actions-col { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.fl-actions-col > .fl-pill { width: 100%; }
.fl-msg { font-size: 14px; color: var(--fl-moss); font-weight: 700; min-height: 0; }
.fl-msg:empty { display: none; }
.fl-msg.bad { color: var(--fl-alert); }
.fl-code { display: block; font: 13px ui-monospace, Menlo, monospace; color: var(--fl-ink); background: var(--fl-inset); border-radius: 12px; padding: 10px 12px; word-break: break-all; }
.fl-switch { position: relative; width: 50px; height: 30px; border-radius: 999px; border: 0; background: var(--fl-inset); cursor: pointer; flex: none; transition: background .15s; padding: 0; }
.fl-switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--fl-card); box-shadow: var(--fl-sh-btn); transition: inset-inline-start .15s; }
.fl-switch.on { background: var(--fl-leaf); }
.fl-switch.on::after { inset-inline-start: 23px; }
.fl-pill.danger { color: var(--fl-alert); }
.fl-pill.primary.danger { background: var(--fl-alert); color: var(--fl-cream); }
/* the confirmation dialog in the house kit: the question is the title, two pills under it */
.dlg.fl-dlg .dlg-card { background: var(--fl-paper); border: 0; border-radius: var(--fl-r-card-lg); box-shadow: var(--fl-sh-float); padding: 22px 20px 18px; }
.dlg.fl-dlg .fl-h3 { margin: 0 2px 16px; text-wrap: balance; }
.dlg.fl-dlg .fl-pills { flex-wrap: wrap; }
.dlg.fl-dlg .fl-pills .fl-pill { flex: 1 1 120px; }
.dlg.fl-dlg .fl-input { margin: 0 0 14px; }
/* Journal · Care records: the fold is only a container for the sections; the sections draw their own cards */
#fl-care-fold { background: none; box-shadow: none; }
#fl-care-fold > .fl-fold-body { padding: 0; }
.fl-care-recs .fl-group:first-child { margin-top: 4px; }
.fl-care-recs .fl-group > .fl-h4 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fl-care-recs .fl-fold { margin-top: 0; }
.fl-care-recs #so-zone { flex: 1 1 60px; } .fl-care-recs #so-ph { flex: 0 0 64px; } .fl-care-recs #so-om { flex: 0 0 84px; }
/* the plant's log sheet: one-word tiles, no empty second line */
.ms-panel.fld .fld-act { min-height: 0; padding: 16px 14px; justify-content: center; }
.ms-panel.fld .fld-head { align-items: center; }
.ms-panel.fld .fld-head .fl-h2 { font-size: 22px; min-width: 0; }
.ms-panel.fld .fl-input { margin: 0; }
.ms-panel.fld .fld-form { margin-top: 14px; }
/* the jar sizes (Kitchen, the cellar): one row per size, the count between − and +, the add form as one aligned row */
.lr-vrow .fl-stock-btns { gap: 8px; }
.lr-vrow .fl-stock-btns button:not(.fl-xb) { width: 38px; height: 38px; font-size: 19px; }
.lr-vrow .fl-stock-n { font-size: 22px; min-width: 30px; }
.sz-form { flex-wrap: nowrap; gap: 6px; }
.sz-form > .fl-input { flex: 1 1 56px !important; min-width: 52px; padding-inline: 12px !important; }
.sz-form > .fl-select { padding: 11px 26px 11px 12px; min-width: 0; flex: 0 1 auto; background-position: right 8px center; }
html.rtl .sz-form > .fl-select { padding: 11px 12px 11px 26px; background-position: left 8px center; }
.sz-form > .fl-pill { padding: 12px 16px; flex: none; }
@media (max-width: 360px) { .sz-form { flex-wrap: wrap; } }
/* the recipe sheet: Log batch stays in reach at the foot of the sheet on a phone */
#bw-ov .rs-foot { position: sticky; bottom: calc(-20px - env(safe-area-inset-bottom)); padding: 14px 0 calc(20px + env(safe-area-inset-bottom)); margin-top: 6px; background: linear-gradient(to bottom, rgba(244,239,227,0), var(--fl-paper) 30%); z-index: 2; }
/* the harvest amount as a field inside its stepper pill: tap the figure to type it */
.hv-num { flex: 1; min-width: 0; width: 100%; border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; font-family: var(--fl-display) !important; font-weight: 700; color: var(--fl-ink); outline: none; }
.hv-num:focus-visible { outline: 2px solid var(--fl-leaf) !important; border-radius: 10px !important; }
/* Journal harvest rows: tappable, one line each */
.jn-hrow .fl-li-l { font-weight: 800; }
.fl-list + .fl-pill.fl-wide { margin-top: 10px; }
/* ---- 390 px: nothing cut off (field test, Oct 2026) ---- */
.pl-tile span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; font-size: 11px; line-height: 1.15; text-align: center; }
/* the plant card's four facts sit two by two on a phone: four across squeezed "5 months ago" and "CONTAINER" out of their tiles */
@media (max-width: 899px) {
  .fl-ph-body .fl-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fl-ph-body .fl-tile { min-width: 0; }
  .fl-ph-body .fl-tile .fl-tvalue { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fl-ph-body .fl-tile .fl-tlabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* the old toast stands above the tab bar, never on it */
  #toast.toast, .toast { bottom: calc(100px + env(safe-area-inset-bottom)); }
}
.fl-year .fl-ymonths span { overflow: hidden; white-space: nowrap; }
.fl-year { overflow: hidden; padding-top: 6px; }
/* ---- the last pre-facelift buttons, wherever they still stand, wear the house pills (field test, Oct 2026) ----
   New screens use FL.pill; these rules make an old .ghost-btn, .btn-acc or .hform button read as the same kit
   (secondary, primary) so nothing grey and square spills into a facelift screen. QA bans the old classes on the
   screens rebuilt in the kit. */
button.ghost-btn, a.ghost-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: var(--fl-card); color: var(--fl-moss); border-radius: 999px; padding: 10px 16px; font: 800 13.5px var(--fl-ui); box-shadow: var(--fl-sh-btn); cursor: pointer; text-decoration: none; }
button.ghost-btn:hover, a.ghost-btn:hover { background: #F4EFE3; color: var(--fl-moss); }
button.ghost-btn.on-acc { background: var(--fl-ink); color: var(--fl-cream); }
button.ghost-btn.slim { padding: 8px 13px; font-size: 12.5px; }
button.btn-acc, .hform button.btn-acc { border: 0; background: var(--fl-ink); color: var(--fl-cream); border-radius: 999px; padding: 13px 22px; font: 800 15px var(--fl-ui); box-shadow: none; cursor: pointer; }
button.btn-acc:hover { background: #2C3A28; opacity: 1; }
button.btn-acc:disabled { opacity: .45; }
button.btn-acc.slim { padding: 9px 15px; font-size: 13px; }
.hform button:not(.btn-acc):not(.fl-pill) { border: 0; background: var(--fl-card); color: var(--fl-moss); border-radius: 999px; padding: 10px 16px; font: 800 13.5px var(--fl-ui); box-shadow: var(--fl-sh-btn); }
.hform button:not(.btn-acc):not(.fl-pill):hover { background: #F4EFE3; color: var(--fl-moss); border-color: transparent; }
.xdel { width: 32px; height: 32px; border-radius: 50%; background: var(--fl-inset); color: var(--fl-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.dlg-card .dlg-acts .ghost-btn, .dlg-card .dlg-acts .btn-acc, .dlg-card .dlg-acts .btn-attn { flex: 1; }
/* the guided setup on the board: the dots above it count the steps, so no "STEP 1 OF 4" over the title and no grey
   sentence under it (house rule: no eyebrow, no caption) */
.bd-su-head .bd-su-k, .bd[data-setup] .bd-tray > .bd-su-k { display: none; }
.bd-su-head small { display: none; }
/* the setup questions: the question is the title; the selected answer stays legible on a touch screen, where
   :hover sticks to the last tapped option */
@media (hover: none) { .sq-list .sq-opt:hover, .sq-opt:hover { background: var(--fl-card); } }
.sq-opt.on, .sq-opt.on:hover, .sq-list .sq-opt.on, .sq-list .sq-opt.on:hover { background: var(--fl-ink); color: var(--fl-cream); }
/* rows are one line: the second, explaining line under a row's title is not drawn anywhere (house rule, Oct 2026);
   a job's reason is read in full on the job's own sheet */
.fl-job .fl-jsub, .fl-jmain .fl-jsub { display: none !important; }
.fl-ysentence { display: none; }
.fl-libfolds .fl-fold-n { display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; margin-inline-start: 4px; border-radius: 999px; background: var(--fl-inset); color: var(--fl-ink); font-size: 11.5px; font-weight: 800; align-items: center; justify-content: center; }
/* the 3D twin in daylight: the chrome over the sky carries its own dark, blurred backing, so the wordmark, the
   Board | Map | 3D switch and the weather pill read on a bright sky as well as on the night garden */
.fl-three-segs, #view-three .fl-three-chip { background: rgba(31,42,28,.62) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #FFFDF6 !important; box-shadow: 0 2px 10px rgba(31,42,28,.18) !important; }
body[data-tab="three"] #fl-chrome .fl-head .fl-brand, body[data-tab="design"] #fl-chrome .fl-head .fl-brand { background: rgba(31,42,28,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 999px; padding: 5px 14px 5px 8px; margin-inline-start: -8px; }
body[data-tab="three"] #fl-chrome .fl-head .fl-round, body[data-tab="design"] #fl-chrome .fl-head .fl-round { background: rgba(31,42,28,.55) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* the Designer's water layout: the Fittings heading is a heading, not spaced capitals */
.irr-pal .irr-zone-h { text-transform: none; letter-spacing: 0; font: 600 16px var(--fl-display); color: var(--fl-ink); margin: 14px 2px 6px; }
/* the size fields on the setup questions: the generic field rule (four :not()) painted them as grey boxes inside the card */
.sq .sq-dims input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]) { border: 0; background: transparent; box-shadow: none; padding: 2px 0; }
.sq-dims span { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--fl-muted); }
/* Activity: the day is a heading in the display face, not spaced capitals */
.fl-activity .fa-day { font-family: var(--fl-display); font-weight: 600; font-size: 18px; letter-spacing: 0; text-transform: none; color: var(--fl-ink); }