/* ---------- the look: fonts, colours, corners, glass ----------
   Light is the default. Dark follows the phone's setting; data-theme="light" or "dark" on <html> overrides it.
   --ink and --bloom are the older names for --text and --accent, kept so every existing rule picks up the new colours. */
:root{
  --font-head:"Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --font-body:"Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius:14px;        /* cards and panels */
  --radius-pill:999px;  /* buttons */
  /* things over the 3D yard stay light in dark mode too (they sit on the light sky), so they use these */
  --text-onsky:#10170F; --accent-onsky:#C2386F;

  --text:#10170F; --accent:#C2386F;
  /* --on-accent: text and ticks on a pink fill. --accent-ink: pink words on the lighter "lens" pill (the chosen tab,
     Year/Month/Week, Auto/Light/Dark). Dark mode's pink is light, so both change there to stay readable. */
  --on-accent:#fff; --accent-ink:var(--accent);
  --paper:#EEF2E6; --muted:#5A6955; --moss:#3F5A3A;
  --line:#D2DAC5; --sheet:#FAFCF5; --chip:#E3EBD6;
  --danger:#B42318; --danger-bg:#FDECEA; --warn:#9A5B00; --warn-bg:#FFF4DC; --ok:#2E6B2F; --ok-bg:#E4F2E1;
  --spring:#7FB069; --summer:#3F7D3A; --fall:#C4702C; --winter:#7F97AA;

  --glass-bg:rgba(255,255,255,.46);
  --glass-border:rgba(255,255,255,.6);
  --glass-highlight:rgba(255,255,255,.7);
  --glass-solid:#F6F8F2;   /* used instead of see-through glass when transparency is turned down */
  --glass-blur:blur(26px) saturate(180%);
  --veil:rgba(238,242,230,.62);   /* over the blurred yard on Calendar and Plants */
  --lens:rgba(255,255,255,.78);   /* the lighter pill behind the active tab */

  /* The tab bar floats above the iPhone's home bar; --dock-space is how much room it takes at the bottom. */
  --tabbar-h:62px;
  --dock-bottom:max(env(safe-area-inset-bottom,0px), 12px);
  --dock-space:calc(var(--dock-bottom) + var(--tabbar-h) + 10px);
  --safe-top:env(safe-area-inset-top,0px);

  --ink:var(--text); --bloom:var(--accent);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --text:#F2F5EF; --accent:#F07FAE; --on-accent:#131A14; --accent-ink:#FF9FC6;
    --paper:#131A14; --muted:#9BAA95; --moss:#8DB27F;
    --line:#29352A; --sheet:#1A231B; --chip:#243024;
    --danger:#FF8A7A; --danger-bg:#3A1C18; --warn:#F2C26B; --warn-bg:#33291A; --ok:#9BD39A; --ok-bg:#1F3320;
    --glass-bg:rgba(18,24,22,.46); --glass-border:rgba(255,255,255,.14); --glass-highlight:rgba(255,255,255,.1); --glass-solid:#182019;
    --veil:rgba(19,26,20,.72); --lens:rgba(255,255,255,.16);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --text:#F2F5EF; --accent:#F07FAE; --on-accent:#131A14; --accent-ink:#FF9FC6;
  --paper:#131A14; --muted:#9BAA95; --moss:#8DB27F;
  --line:#29352A; --sheet:#1A231B; --chip:#243024;
  --danger:#FF8A7A; --danger-bg:#3A1C18; --warn:#F2C26B; --warn-bg:#33291A; --ok:#9BD39A; --ok-bg:#1F3320;
  --glass-bg:rgba(18,24,22,.46); --glass-border:rgba(255,255,255,.14); --glass-highlight:rgba(255,255,255,.1); --glass-solid:#182019;
  --veil:rgba(19,26,20,.72); --lens:rgba(255,255,255,.16);
  color-scheme:dark;
}

/* Frosted glass for panels: add class="glass". */
.glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 var(--glass-highlight), inset 0 0 0 1px rgba(255,255,255,.04);
}
/* Solid instead of see-through when the phone asks for less transparency (Android, Chrome; iPhone Safari doesn't
   pass that setting on yet, so data-transparency="reduce" on <html> does the same by hand), or can't blur at all. */
@media (prefers-reduced-transparency: reduce){
  .glass{background:var(--glass-solid); -webkit-backdrop-filter:none; backdrop-filter:none}
  .veil{background:var(--paper); -webkit-backdrop-filter:none; backdrop-filter:none}
}
:root[data-transparency="reduce"] .glass{background:var(--glass-solid); -webkit-backdrop-filter:none; backdrop-filter:none}
:root[data-transparency="reduce"] .veil{background:var(--paper); -webkit-backdrop-filter:none; backdrop-filter:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:var(--glass-solid)}
  .veil{background:var(--paper)}
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; overflow:hidden;
  background:var(--paper); color:var(--ink);
  font-family:var(--font-body);
  -webkit-text-size-adjust:100%;
}
button{font:inherit; color:inherit; cursor:pointer}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible{outline:2px solid var(--bloom); outline-offset:2px}
a{color:var(--moss)}
/* Small controls that should look compact still take a 44px finger: an invisible ::before, centred on the control,
   reaches past its edges. (The done circles have their own, in their rules.) */
:is(.photocheck, .photoshead .linkbtn, .todaymonth .linkbtn, .todaybtn, .calswitch button, .seg button, .switch, .highlightchip button, .bloomoff, .changes .linkbtn, .tmore > .linkbtn){position:relative}
:is(.photocheck, .photoshead .linkbtn, .todaymonth .linkbtn, .todaybtn, .calswitch button, .seg button, .switch, .highlightchip button, .bloomoff, .changes .linkbtn, .tmore > .linkbtn)::before{content:""; position:absolute; left:50%; top:50%; width:max(100%, 44px); height:max(100%, 44px); transform:translate(-50%, -50%); border-radius:inherit}
h1, h2, h3, h4{font-family:var(--font-head); font-weight:600}
/* small all-caps labels stay in the body font */
.viewsmenu h3, .plist h3, .tlist h3, .rsec h4{font-family:var(--font-body); font-weight:700}

/* ---------- the layers, back to front ----------
   The 3D yard fills the screen (.stage). On Calendar and Plants a blurred veil covers it. The screens sit on top,
   then the tab bar, then the plant card, then the full-screen panels (This week, Photo check) and the photo viewer. */
.stage{position:fixed; inset:0}
.veil{position:fixed; inset:0; z-index:1; display:none; background:var(--veil); -webkit-backdrop-filter:blur(30px) saturate(160%); backdrop-filter:blur(30px) saturate(160%)}
body:is([data-screen="calendar"], [data-screen="plants"]) .veil{display:block}
.screen{position:fixed; inset:0; z-index:2}
.tabdock{z-index:5}
.sheet{z-index:8}

/* ---------- the tab bar and the search button ---------- */
.tabdock{position:fixed; left:0; right:0; bottom:var(--dock-bottom); display:flex; justify-content:center; align-items:center; gap:10px; padding:0 16px; pointer-events:none}
.tabbar, .searchbtn{pointer-events:auto; box-shadow:inset 0 1px 0 var(--glass-highlight), 0 8px 28px rgba(0,0,0,.16)}
.tabbar{flex:0 1 300px; min-width:0; height:var(--tabbar-h); border-radius:var(--radius-pill); padding:4px; display:flex; gap:2px}
.tab{flex:1 1 0; min-width:0; border:0; background:transparent; border-radius:var(--radius-pill); display:grid; place-items:center; align-content:center; gap:2px; padding:0 4px; color:var(--text); transition:background-color .2s, color .2s}
.tab svg, .searchbtn svg, .yardback svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.tab span{font-size:.72rem; font-weight:700; letter-spacing:.01em; white-space:nowrap}
.tab[aria-current="page"]{background:var(--lens); color:var(--accent-ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 1px 4px rgba(0,0,0,.08)}
.searchbtn{flex:none; width:var(--tabbar-h); height:var(--tabbar-h); border-radius:50%; display:grid; place-items:center; padding:0; color:var(--text)}
@media (prefers-reduced-motion: reduce){ .tab{transition:none} }

/* ---------- Today: over the live yard (touches between the panels reach the yard) ----------
   The count sits at the top on a soft blurred fade; the jobs, the other person's line and the photos sit at the
   bottom above the tab bar. On short screens the whole lot scrolls. */
.screen.today{pointer-events:none}
.todaypanels{position:absolute; inset:0; display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; padding:calc(var(--safe-top) + 12px) 0 calc(var(--dock-space) + 12px)}
.todaypanels::-webkit-scrollbar{display:none}
.todayhead{position:relative; isolation:isolate; padding:0 16px 8px; color:var(--text)}
.todayhead::before{content:""; position:absolute; z-index:-1; left:0; right:0; bottom:-36px; top:calc(-12px - var(--safe-top)); pointer-events:none;
  background:linear-gradient(to bottom, var(--paper) 0%, color-mix(in srgb, var(--paper) 70%, transparent) 55%, transparent 100%);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  -webkit-mask-image:linear-gradient(to bottom, #000 60%, transparent); mask-image:linear-gradient(to bottom, #000 60%, transparent)}
.todaytop{display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:44px}
.todaydate{margin:0; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted)}
.gearbtn{pointer-events:auto; flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; padding:0; color:var(--text); box-shadow:inset 0 1px 0 var(--glass-highlight), 0 4px 14px rgba(0,0,0,.12)}
.gearbtn svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
/* The big number: a line height of 1 keeps its glyphs inside its own box, and the gap above keeps it clear of the date. */
.todaycount{pointer-events:auto; display:inline-flex; align-items:flex-end; gap:12px; margin-top:10px; padding:0; border:0; background:transparent; color:var(--text); text-align:left; border-radius:var(--radius)}
.bignum{font-family:var(--font-head); font-weight:500; font-size:104px; line-height:1; letter-spacing:-.04em; font-variant-numeric:lining-nums; font-optical-sizing:auto}
.numlabel{font-family:var(--font-head); font-weight:500; font-size:1.45rem; line-height:1.05; padding-bottom:.62em; color:var(--text)}
.todaymonth{pointer-events:auto; width:fit-content; margin:4px 0 0; border-radius:var(--radius-pill); padding:4px 4px 4px 12px; font-size:.86rem; color:var(--text); display:flex; align-items:center; gap:6px}
.todaymonth .linkbtn{min-height:30px; padding:0 8px}

.todaybottom{margin-top:auto; padding:10px 16px 0; display:grid; grid-template-columns:minmax(0,1fr); gap:10px; width:100%; max-width:600px}
.todaybottom > *{pointer-events:auto}
#todayJobs{pointer-events:none; margin:0 -16px}
.jobstrip{pointer-events:auto; list-style:none; margin:0; padding:4px 16px 10px; display:flex; gap:10px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding:0 16px; scrollbar-width:none}
.jobstrip::-webkit-scrollbar{display:none}
.jobcard{position:relative; flex:none; width:168px; height:212px; border-radius:var(--radius); overflow:hidden; scroll-snap-align:start; background:var(--chip); box-shadow:0 8px 22px rgba(0,0,0,.2)}
.jobopen{position:absolute; inset:0; width:100%; padding:0; border:0; background:transparent; text-align:left; border-radius:inherit; overflow:hidden}
.jobopen:focus-visible{outline-offset:-3px}
.jobopen img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .2s, filter .2s}
.jobopen img.missing{display:none}
.jobopen::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,14,10,.86) 0%, rgba(10,14,10,.55) 34%, rgba(10,14,10,0) 62%)}
.jobtext{position:absolute; z-index:1; left:12px; right:12px; bottom:12px; display:grid; gap:4px; color:#fff}
.jobtext b{font-family:var(--font-head); font-weight:600; font-size:1.22rem; line-height:1.08; letter-spacing:-.005em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.jobtext span{font-size:.76rem; line-height:1.3; color:rgba(255,255,255,.86); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.jobdone{position:absolute; z-index:2; top:10px; right:10px; width:34px; height:34px; border-radius:50%; padding:0; display:grid; place-items:center; border:2px solid rgba(255,255,255,.92); background:rgba(0,0,0,.2); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#fff; transition:background-color .15s, border-color .15s}
.jobdone::before{content:""; position:absolute; inset:-6px; border-radius:50%} /* a bigger target for fingers */
.jobdone svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; opacity:0; transition:opacity .15s}
.jobdone[aria-checked="true"]{background:var(--accent-onsky); border-color:var(--accent-onsky)}
.jobdone[aria-checked="true"] svg{opacity:1}
.jobdone[aria-checked="mixed"]{border-color:var(--accent-onsky); background:rgba(0,0,0,.28)}
.jobdone[aria-checked="mixed"]::after{content:""; width:12px; height:2.5px; border-radius:2px; background:#fff}
.jobcard.done img{opacity:.6; filter:saturate(.5)}
.jobcard.more{background:var(--glass-bg); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); box-shadow:inset 0 1px 0 var(--glass-highlight), 0 8px 22px rgba(0,0,0,.12)}
.jobcard.more .jobopen{display:flex; flex-direction:column; justify-content:flex-end; gap:6px; padding:14px; color:var(--text); font-family:var(--font-head); font-weight:600; font-size:1.25rem; line-height:1.1}
.jobcard.more .jobopen::after{content:none}
.jobcard.more .jobopen span{font-family:var(--font-body); font-weight:400; font-size:.78rem; line-height:1.35; color:var(--muted)}
/* A plant with no photo: a soft colour of its own, with its name. */
.placeholder{position:absolute; inset:0; display:block; padding:14px 50px 0 14px; background:hsl(var(--h) 40% 82%); color:hsl(var(--h) 32% 28%)}
.placeholder span{font-family:var(--font-head); font-style:italic; font-weight:500; font-size:1.15rem; line-height:1.15; opacity:.75}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .placeholder{background:hsl(var(--h) 22% 30%); color:hsl(var(--h) 40% 84%)} }
:root[data-theme="dark"] .placeholder{background:hsl(var(--h) 22% 30%); color:hsl(var(--h) 40% 84%)}
.nojobs{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 16px; border-radius:var(--radius); padding:10px 14px; color:var(--text)}
.nojobs .linkbtn{padding:0}

/* The other person's latest check-off, with their initial. */
.partnerline{display:flex; align-items:center; gap:10px; min-height:54px; padding:8px 16px 8px 9px; border-radius:var(--radius-pill); color:var(--text); box-shadow:inset 0 1px 0 var(--glass-highlight), 0 6px 20px rgba(0,0,0,.1)}
.initial{flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--sheet); font-family:var(--font-head); font-weight:600; font-size:1.15rem; line-height:1}
.ptext{display:grid; min-width:0}
.ptext b{font-size:.9rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ptext span{font-size:.78rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* Latest photos */
.photospanel{border-radius:var(--radius); padding:10px 14px 14px; color:var(--text); box-shadow:inset 0 1px 0 var(--glass-highlight), 0 6px 20px rgba(0,0,0,.1)}
.photoshead{display:flex; align-items:center; gap:10px; min-height:36px}
.photoshead h2{flex:1; margin:0; font-size:1.15rem; letter-spacing:-.005em}
.photocheck{display:inline-flex; align-items:center; gap:5px; border:0; border-radius:var(--radius-pill); background:var(--lens); padding:0 11px 0 9px; min-height:32px; font-size:.8rem; font-weight:700}
.photocheck svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linejoin:round}
.photoshead .linkbtn{color:var(--accent); text-decoration:none; padding:0 4px; min-height:36px; font-size:.92rem}
.phototiles{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin-top:6px}
.phototiles button{aspect-ratio:1; padding:0; border:0; border-radius:10px; overflow:hidden; background:var(--chip)}
.phototiles img, .photogrid .pgpic img{width:100%; height:100%; object-fit:cover; display:block}
.phototiles img.missing, .photogrid img.missing{visibility:hidden}
.photospanel > p.small{margin:6px 0 0}

/* Every photo ("All"), and Settings */
.photogrid{list-style:none; margin:0; padding:14px 0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 10px}
.photogrid li{display:grid; gap:0; min-width:0}
.photogrid .pgpic{aspect-ratio:3/4; padding:0; border:0; border-radius:10px; overflow:hidden; background:var(--chip)}
.photogrid .pgname{border:0; background:transparent; min-height:44px; padding:5px 0 0; text-align:left; font-size:.8rem; font-weight:600; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* Hidden from Settings (Latest photos, Who did it): their display rules would otherwise win over [hidden]. */
.partnerline[hidden], .photospanel[hidden]{display:none}

/* ---------- Settings: glass sections over the blurred yard ---------- */
/* Fading the panel itself in would switch its blur off, so only what's in it fades in. */
.listpanel.setpanel{background:var(--veil); -webkit-backdrop-filter:blur(30px) saturate(160%); backdrop-filter:blur(30px) saturate(160%); color:var(--text); animation:none}
.setpanel > *{animation:fadein .15s ease}
@media (prefers-reduced-motion: reduce){ .setpanel > *{animation:none} }
@media (prefers-reduced-transparency: reduce){ .listpanel.setpanel{background:var(--paper); -webkit-backdrop-filter:none; backdrop-filter:none} }
:root[data-transparency="reduce"] .listpanel.setpanel{background:var(--paper); -webkit-backdrop-filter:none; backdrop-filter:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .listpanel.setpanel{background:var(--paper)} }
.sethead{flex:none; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:calc(var(--safe-top) + 14px) max(16px, (100% - 600px) / 2) 6px}
.sethead h2{margin:0; font-weight:500; font-size:2.6rem; line-height:1; letter-spacing:-.03em; font-optical-sizing:auto}
.sethead .close{width:44px; height:44px; font-size:1.05rem; color:var(--text); box-shadow:inset 0 1px 0 var(--glass-highlight), 0 4px 14px rgba(0,0,0,.1)}
.setbody{flex:1; overflow-y:auto; overscroll-behavior:contain; padding:4px max(16px, (100% - 600px) / 2) calc(env(safe-area-inset-bottom,0px) + 28px)}
.setsec{margin-top:18px}
.setsec h3{margin:0 0 7px 4px; font-family:var(--font-body); font-weight:700; font-size:.76rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted)}
.setgroup{border-radius:var(--radius); padding:0 14px; box-shadow:inset 0 1px 0 var(--glass-highlight), 0 6px 20px rgba(0,0,0,.08)}
.setline{display:flex; align-items:center; gap:12px; min-height:56px; padding:9px 0}
.setline + .setline{border-top:1px solid color-mix(in srgb, var(--text) 10%, transparent)}
.settext{flex:1; min-width:0; display:grid; gap:2px}
.settext b{font-size:.98rem; font-weight:600; overflow-wrap:anywhere}
.settext span{font-size:.82rem; color:var(--muted); line-height:1.35}
.setline.later .settext b{color:var(--muted)}
.setline .btn{flex:none; margin:0}
.setnote{margin:7px 4px 0; font-size:.8rem; line-height:1.4; color:var(--muted)}
.soon{flex:none; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 8px; border-radius:var(--radius-pill); background:var(--lens); color:var(--muted); white-space:nowrap}
.person .initial{width:34px; height:34px; font-size:1.05rem}
.setgroup .signin{margin:0; padding:14px 0; background:transparent; border:0; border-radius:0}
.setgroup .signin input{background:color-mix(in srgb, var(--sheet) 70%, transparent)}

/* An on/off switch: the knob slides right and the track turns pink when it's on. */
.switch{flex:none; position:relative; width:51px; height:31px; padding:0; border:0; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--text) 18%, transparent); transition:background-color .2s}
.switch span{position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.22); transition:transform .2s}
.switch[aria-checked="true"]{background:var(--accent)}
.switch[aria-checked="true"] span{transform:translateX(20px)}
.switch:disabled{opacity:.45; cursor:default}

/* Auto / Light / Dark */
.seg{flex:1; display:flex; gap:2px; padding:3px; border-radius:var(--radius-pill); background:color-mix(in srgb, var(--text) 8%, transparent)}
.seg button{flex:1 1 0; min-height:40px; border:0; background:transparent; border-radius:var(--radius-pill); font-size:.92rem; font-weight:700; color:var(--text); transition:background-color .2s, color .2s}
.seg button[aria-checked="true"]{background:var(--lens); color:var(--accent-ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 1px 4px rgba(0,0,0,.1)}
@media (prefers-reduced-motion: reduce){ .switch, .switch span, .seg button{transition:none} }
@media (prefers-reduced-motion: reduce){ .jobopen img, .jobdone, .jobdone svg{transition:none} }

/* The Yard view (styled further down, with the yard's controls): Today's panels step aside and the yard's own
   controls appear. */
body.yardview .todaypanels{display:none}
body:not(.yardview) .stage :is(.mapbar, .hint, .viewsmenu, .mapctl, .bloombar, .edittray, .ylabels, .peek){display:none !important}

/* ---------- Calendar and Plants: a screen over the blurred yard ---------- */
.screen:not(.today){overflow-y:auto; overscroll-behavior:contain; padding:calc(var(--safe-top) + 14px) max(16px, (100% - 640px) / 2) calc(var(--dock-space) + 16px)}
.screenhead h1{margin:0 0 14px; font-size:1.7rem; letter-spacing:-.01em}

/* ---------- the Calendar: Year / Month / Week ----------
   The big title like Plants, then the glass switch. Each view's panels are glass over the blurred yard. */
.screen.calendar{padding-left:max(16px, (100% - 720px) / 2); padding-right:max(16px, (100% - 720px) / 2); scrollbar-width:none}
.screen.calendar::-webkit-scrollbar{display:none}
.calhead{display:grid; gap:12px; margin-bottom:16px}
.calswitch{display:flex; gap:2px; padding:4px; border-radius:var(--radius-pill); box-shadow:inset 0 1px 0 var(--glass-highlight), 0 4px 16px rgba(0,0,0,.07)}
.calswitch button{flex:1 1 0; min-height:38px; border:0; background:transparent; border-radius:var(--radius-pill); font-size:.92rem; font-weight:700; color:var(--text); transition:background-color .2s, color .2s}
.calswitch button[aria-pressed="true"]{background:var(--lens); color:var(--accent-ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 1px 4px rgba(0,0,0,.08)}
.calbody{display:grid; grid-template-columns:minmax(0,1fr); gap:14px}
.calbody > .glass{border-radius:var(--radius); padding:12px 14px 14px; color:var(--text); box-shadow:inset 0 1px 0 var(--glass-highlight), 0 6px 20px rgba(0,0,0,.08)}
.calh2{margin:0 2px 10px; font-size:1.45rem; font-weight:500; letter-spacing:-.01em}
.calempty, .calnone{margin:0; font-size:.92rem; color:var(--muted)}
.calnone{padding:4px 0 2px}
.todaytag{display:inline-block; vertical-align:2px; margin-left:6px; padding:3px 8px; border-radius:var(--radius-pill); background:var(--accent); color:var(--on-accent); font-family:var(--font-body); font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; line-height:1}

/* The month or week heading, with arrows either side (and a way back to today). */
.calnav{display:flex; align-items:center; gap:6px; min-height:44px; margin-bottom:6px}
.calnav h2{flex:1; margin:0; font-size:1.35rem; font-weight:600; letter-spacing:-.01em; text-align:center; white-space:nowrap}
.calnav h2 span{font-weight:500; color:var(--muted)}
.calarrow{flex:none; width:44px; height:44px; border-radius:50%; border:0; background:var(--lens); display:grid; place-items:center; padding:0; color:var(--text)}
.calarrow svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.todaybtn{flex:none; min-height:32px; padding:0 12px; border:1px solid var(--line); border-radius:var(--radius-pill); background:transparent; font-size:.8rem; font-weight:700; color:var(--accent)}

/* Year: photo cards for this month, then the timeline. */
.mstrip{list-style:none; margin:0 calc(-1 * max(16px, (100vw - 720px) / 2)); padding:2px max(16px, (100vw - 720px) / 2) 8px; display:flex; gap:10px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding:0 16px; scrollbar-width:none}
.mstrip::-webkit-scrollbar{display:none}
.mstrip li{flex:none; width:138px; scroll-snap-align:start}
.mcard{position:relative; display:block; width:100%; aspect-ratio:4/5; padding:0; border:0; border-radius:var(--radius); overflow:hidden; background:var(--chip); text-align:left; box-shadow:0 6px 18px rgba(0,0,0,.14); transition:transform .15s ease}
.mcard:active{transform:scale(.97)}
.mcard:focus-visible{outline-offset:3px}
.mcard img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.mcard img.missing{display:none}
.mcard::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,14,10,.84) 0%, rgba(10,14,10,.5) 34%, rgba(10,14,10,0) 60%)}
.mcard .placeholder{padding:0}
.mcard .placeholder span{display:none}
.mcard .pcardtext b{font-size:1.05rem}
.mcard .pcardtext b i{font-family:var(--font-body); font-style:normal; font-size:.75rem; font-weight:700; opacity:.8}
.mcard .pcardtext span{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.ptag.bloomtag{background:var(--accent-onsky); border-color:transparent}
.ptag.picktag{background:#A9600F; border-color:transparent}

.yeartl{--namew:118px; --tl-bloom:var(--accent); --tl-harvest:#E0892B}
.tlhead{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px}
.tlhead h2{margin:0; font-size:1.15rem}
.tlkey{list-style:none; margin:0; padding:0; display:flex; gap:12px; font-size:.78rem; font-weight:700; color:var(--muted)}
.tlkey li{display:flex; align-items:center; gap:5px}
.tlkey i{width:16px; height:8px; border-radius:4px; background:var(--tl-bloom)}
.tlkey .h i{background:var(--tl-harvest)}
.tlrows{position:relative}
/* This month: a soft band down its column. */
.tlrows::before{content:""; position:absolute; top:0; bottom:0; left:calc(var(--namew) + (100% - var(--namew)) * var(--m) / 12); width:calc((100% - var(--namew)) / 12); border-radius:7px; background:color-mix(in srgb, var(--accent) 13%, transparent); pointer-events:none}
.tlmonths, .tlrow{display:grid; grid-template-columns:var(--namew) repeat(12, minmax(0,1fr)); align-items:center}
.tlmonths{position:relative; height:24px; font-size:.7rem; font-weight:700; color:var(--muted); text-align:center}
.tlmonths .now{color:var(--accent); font-weight:800}
.tlrows ul{list-style:none; margin:0; padding:0}
.tlrow{position:relative; width:100%; min-height:44px; padding:0; border:0; border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent); background:transparent; text-align:left; color:var(--text)}
.tlrow:focus-visible{outline-offset:-2px; border-radius:6px}
.tlname{grid-column:1; grid-row:1; padding-right:8px; font-size:.82rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tlbar{grid-row:1; height:10px; margin:0 2px; border-radius:5px; background:var(--tl-bloom)}
.tlbar.h{background:var(--tl-harvest)}

/* Month: the grid, the dot key, and the day's jobs below. */
.mweek, .mgrid{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); text-align:center}
.mweek{font-size:.7rem; font-weight:800; color:var(--muted); letter-spacing:.04em; padding:2px 0 4px}
.mgrid{row-gap:2px}
.mday{position:relative; display:grid; justify-items:center; align-content:start; gap:3px; min-height:48px; padding:5px 0 4px; border:0; background:transparent; color:var(--text); border-radius:12px}
.mday.blank{pointer-events:none}
.mnum{display:grid; place-items:center; width:32px; height:32px; border-radius:50%; font-size:.95rem; font-weight:600; font-variant-numeric:tabular-nums}
.mday.past .mnum{color:var(--muted)}
.mday.today .mnum{box-shadow:inset 0 0 0 2px var(--accent); color:var(--accent-ink); font-weight:800}
.mday[aria-pressed="true"] .mnum{background:var(--text); color:var(--paper); box-shadow:none}
.mday.today[aria-pressed="true"] .mnum{background:var(--accent); color:var(--on-accent); box-shadow:0 0 0 2px var(--glass-solid), 0 0 0 4px var(--accent)}
.mdots{display:flex; gap:3px; height:6px}
.mdots i, .mkey i{width:6px; height:6px; border-radius:50%; background:var(--c)}
.mkey{list-style:none; margin:10px 0 0; padding:10px 0 0; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.76rem; font-weight:600; color:var(--muted)}
.mkey li{display:flex; align-items:center; gap:6px}
.mkey i{width:8px; height:8px}

.dayhead{display:flex; align-items:center; flex-wrap:wrap; gap:0 2px; margin:0 0 6px; font-size:1.15rem; letter-spacing:-.005em}
.daycount{margin-left:auto; font-family:var(--font-body); font-size:.8rem; font-weight:700; color:var(--muted)}

/* A job on a day: a small photo with a dot for the kind of job, what to do, and who did it or a done circle. */
.jrows{list-style:none; margin:0; padding:0}
.jrow{display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--line)}
.jrow:first-child{border-top:0}
.jopen{flex:1; min-width:0; display:flex; align-items:center; gap:12px; padding:0; border:0; background:transparent; text-align:left; color:var(--text); border-radius:10px}
.jpic{position:relative; flex:none; width:48px; height:48px; border-radius:11px; overflow:visible; background:var(--chip)}
.jpic img, .jpic .placeholder{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit}
.jpic img.missing{visibility:hidden}
.jpic .placeholder{padding:0}
.jpic .placeholder span{display:none}
.jpic::after{content:""; position:absolute; right:-3px; bottom:-3px; width:12px; height:12px; border-radius:50%; background:var(--c); box-shadow:0 0 0 2px var(--glass-solid)}
.jtext{display:grid; gap:2px; min-width:0}
.jtext b{font-size:.95rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.jtext span{font-size:.8rem; line-height:1.3; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.jrow.done .jtext b{color:var(--muted)}
.jrow.done .jpic img{opacity:.6; filter:saturate(.5)}
.jwho{flex:none; display:flex}
.jwho .initial{width:28px; height:28px; font-size:.95rem; box-shadow:0 0 0 2px var(--glass-solid)}
.jwho .initial + .initial{margin-left:-6px}
.initial.other{background:var(--moss)}
.jcheck{position:relative; flex:none; width:32px; height:32px; border-radius:50%; padding:0; display:grid; place-items:center; border:2px solid var(--muted); background:transparent; color:var(--on-accent); transition:background-color .15s, border-color .15s}
.jcheck::before{content:""; position:absolute; inset:-6px; border-radius:50%}
.jcheck svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; opacity:0; transition:opacity .15s}
.jcheck[aria-checked="true"]{background:var(--accent); border-color:var(--accent)}
.jcheck[aria-checked="true"] svg{opacity:1}
.jcheck[aria-checked="mixed"]{border-color:var(--accent)}
.jcheck[aria-checked="mixed"]::after{content:""; width:11px; height:2.5px; border-radius:2px; background:var(--accent)}

/* Week: the seven days with how many jobs each has, then a panel for each day that has some. */
.wdays{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:2px}
.wday{width:100%; display:grid; justify-items:center; gap:2px; padding:8px 0 9px; border:0; border-radius:12px; background:transparent; color:var(--text)}
button.wday{background:var(--lens)}
.wname{font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.wnum{font-family:var(--font-head); font-size:1.3rem; font-weight:600; line-height:1.1; font-variant-numeric:lining-nums}
.wcount{min-width:24px; height:22px; padding:0 6px; border-radius:11px; display:grid; place-items:center; font-size:.78rem; font-weight:800; background:var(--text); color:var(--paper)}
.wday.none .wcount{background:transparent; color:var(--muted); font-weight:600}
.wday.past .wnum{color:var(--muted)}
.wday.past .wcount{background:var(--muted)}
.wday.past.none .wcount{background:transparent}
.wday.today{box-shadow:inset 0 0 0 2px var(--accent)}
.wday.today .wnum, .wday.today .wname{color:var(--accent-ink)}
.wday.today .wcount{background:var(--accent); color:var(--on-accent)}
.weekday{scroll-margin-top:calc(var(--safe-top) + 12px)}
@media (prefers-reduced-motion: reduce){ .calswitch button, .mcard, .jcheck, .jcheck svg{transition:none} }

/* ---------- 3D stage ---------- */
canvas{display:block; width:100%; height:100%; touch-action:none; outline:none}
canvas:focus-visible{outline:3px solid var(--bloom); outline-offset:-3px}

/* ---------- the Yard view: the live yard full screen ----------
   The top bar (round back button, month switcher, Views with Edit under it), the how-to-move note under it, the
   zoom and turn buttons bottom right, the bloom timeline along the bottom, labels over plants with jobs this week
   and the small plant card. Glass over the yard stays light in dark mode too ("onsky"), since it sits on the
   light 3D sky. */
.onsky{--glass-bg:rgba(255,255,255,.6); --glass-border:rgba(255,255,255,.75); --glass-highlight:rgba(255,255,255,.85); --glass-solid:#F6F8F2; color:var(--text-onsky)}
.mapbar{position:absolute; left:12px; right:12px; top:calc(var(--safe-top) + 10px); display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:8px; pointer-events:none}
.mapbar > *{pointer-events:auto}
.yardback, .monthswitch, .mapbtn, .mapctl button, .hint{box-shadow:inset 0 1px 0 var(--glass-highlight), 0 6px 18px rgba(0,0,0,.14)}
.yardback{justify-self:start; width:44px; height:44px; border-radius:50%; padding:0; display:grid; place-items:center}
.yardback:active, .mapctl button:active, .monthswitch button:active{transform:scale(.94)}
.monthswitch{display:flex; align-items:center; height:44px; border-radius:var(--radius-pill); padding:0}
.monthswitch button{border:0; background:transparent; color:inherit; padding:0}
.monthswitch button:not(.monthname){width:44px; height:44px; border-radius:50%; display:grid; place-items:center}
.monthswitch svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.monthname{min-width:96px; height:44px; display:grid; place-content:center; text-align:center; font-family:var(--font-head); font-weight:600; font-size:1.12rem; line-height:1; letter-spacing:-.005em; border-radius:var(--radius-pill)}
.monthname:disabled{cursor:default; opacity:1}
.monthnow{display:block; margin-top:2px; font-family:var(--font-body); font-size:.62rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-onsky)}
.mapbtns{justify-self:end; display:grid; justify-items:end; gap:6px}
.mapbtn{border-radius:var(--radius-pill); font-size:.88rem; font-weight:700; padding:0 15px; min-height:44px}
.mapbtn[aria-expanded="true"]{background:var(--text-onsky); color:#fff; border-color:transparent}
.hint{position:absolute; left:50%; top:calc(var(--safe-top) + 62px); transform:translateX(-50%); width:max-content; max-width:calc(100% - 24px); margin:0; border-radius:var(--radius-pill); padding:7px 14px; font-size:.78rem; line-height:1.35; text-align:center; pointer-events:none}
.hint[hidden]{display:none}
.highlightchip{position:absolute; left:12px; bottom:calc(var(--dock-space) + 4px); max-width:calc(100% - 80px); display:flex; align-items:center; gap:6px; background:var(--text-onsky); color:#fff; border-radius:var(--radius-pill); padding:4px 4px 4px 12px; font-size:.85rem; font-weight:600; box-shadow:0 2px 8px rgba(0,0,0,.2)}
.highlightchip span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.highlightchip button{flex:none; border:0; background:rgba(255,255,255,.18); color:#fff; border-radius:var(--radius-pill); width:30px; height:30px}
.mapctl{position:absolute; right:12px; display:grid; gap:6px}
.mapctl button{width:44px; height:44px; border-radius:50%; padding:0; display:grid; place-items:center}
.mapctl button.gap{margin-top:8px}
.mapctl svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
/* Full screen: the tab bar steps aside, so everything at the bottom sits just above the home bar. */
body.yardview .tabdock{display:none}
body.yardview{--dock-space:calc(var(--dock-bottom) + 4px)}

/* Labels over plants with jobs this week. Touches go through them to the yard (main.js matches a tap to a
   label), so dragging, pinching and twisting work over them too. */
.ylabels{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.ylabels[hidden]{display:none}
.ylabel{position:absolute; left:0; top:0; display:flex; align-items:center; gap:5px; max-width:150px; height:28px; padding:0 10px; border-radius:var(--radius-pill); font-size:.76rem; font-weight:700; white-space:nowrap; pointer-events:none; will-change:transform;
  --glass-blur:blur(12px) saturate(170%); box-shadow:inset 0 1px 0 var(--glass-highlight), 0 3px 10px rgba(0,0,0,.16); transition:opacity .18s}
.ylabel::after{content:""; position:absolute; left:50%; bottom:-6px; width:2px; height:6px; margin-left:-1px; border-radius:1px; background:rgba(255,255,255,.85)}
.ylname{overflow:hidden; text-overflow:ellipsis}
.ylcount{flex:none; min-width:17px; height:17px; padding:0 4px; border-radius:var(--radius-pill); display:grid; place-items:center; background:var(--accent-onsky); color:#fff; font-size:.66rem; font-weight:800}
.ylabel.on{background:var(--text-onsky); color:#fff; border-color:transparent}
.ylabel.on::after{background:var(--text-onsky)}
.ylabel.off{opacity:0; visibility:hidden; transition:none}

/* The small plant card that slides up: photo, name, where it is, what's happening now, and a pink arrow to the
   full card. A swipe down or a tap on the yard puts it away. */
.peek{position:absolute; z-index:4; left:12px; right:12px; bottom:var(--dock-space); margin:0 auto; max-width:460px; display:flex; align-items:center; gap:4px; padding:14px 12px 12px; border-radius:20px; color:var(--text); touch-action:none;
  --glass-bg:color-mix(in srgb, var(--glass-solid) 70%, transparent);
  box-shadow:inset 0 1px 0 var(--glass-highlight), 0 12px 34px rgba(0,0,0,.22); animation:peekin .28s cubic-bezier(.2,.9,.3,1.05)}
.peek[hidden]{display:none}
.peek.out{animation:peekout .2s ease-in forwards}
@keyframes peekin{from{transform:translateY(calc(100% + 24px)); opacity:.4}}
@keyframes peekout{to{transform:translateY(calc(100% + 24px)); opacity:0}}
.peekgrab{position:absolute; top:5px; left:50%; width:36px; height:4px; margin-left:-18px; border-radius:2px; background:color-mix(in srgb, var(--text) 22%, transparent)}
.peekmain{flex:1; min-width:0; display:flex; align-items:center; gap:12px; border:0; background:transparent; padding:0; text-align:left; color:inherit; border-radius:12px}
.peekpic{position:relative; flex:none; width:76px; height:76px; border-radius:12px; overflow:hidden; background:var(--chip)}
.peekpic img{width:100%; height:100%; object-fit:cover; display:block}
.peekpic img.missing{visibility:hidden}
.peekpic .placeholder{padding:8px}
.peekpic .placeholder span{font-size:.78rem}
.peektext{min-width:0; display:grid; gap:2px}
.peekname{font-family:var(--font-head); font-weight:600; font-size:1.18rem; line-height:1.12; letter-spacing:-.005em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.peekwhere{font-size:.78rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.peeknow{margin-top:2px; font-size:.82rem; line-height:1.32; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.peekeyebrow{font-weight:800; color:var(--accent)}
.peekgo{flex:none; width:46px; height:46px; margin-left:6px; border:0; border-radius:50%; padding:0; display:grid; place-items:center; background:var(--accent); color:var(--on-accent); box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 45%, transparent)}
.peekgo svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round}
.peekgo:active{transform:scale(.94)}
body.peeking .stage .bloombar{visibility:hidden}
@media (prefers-reduced-motion: reduce){ .peek, .peek.out{animation:none} .ylabel{transition:none} }

/* Bloom timeline along the bottom, just above the tab bar; the zoom buttons and ring chip sit above it. */
.stage{--bloombar:104px}
.mapctl, body.yardview .highlightchip{bottom:calc(var(--dock-space) + var(--bloombar) + 10px)}
.bloombar{--thumb:26px; position:absolute; left:12px; right:12px; bottom:var(--dock-space); height:var(--bloombar); border-radius:var(--radius); box-shadow:inset 0 1px 0 var(--glass-highlight), 0 6px 18px rgba(0,0,0,.14); padding:8px 10px 6px 8px; display:grid; grid-template-rows:auto 1fr; gap:2px}
.bloomhead{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:28px; padding-left:4px}
.bloomlabel{font-size:.85rem; color:#5A6955; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bloomlabel b{color:var(--text-onsky)}
.bloombar.on .bloomlabel b{color:var(--accent-onsky)}
.bloomoff{flex:none; border:0; background:rgba(255,255,255,.7); color:var(--text-onsky); border-radius:var(--radius-pill); width:28px; height:28px; font-size:.85rem; line-height:1}
.bloomrow{display:flex; align-items:center; gap:8px; min-height:0}
.bloomplay{flex:none; width:44px; height:44px; border:0; border-radius:50%; background:var(--accent-onsky); color:#fff; display:grid; place-items:center; padding:0}
.bloomplay svg{width:20px; height:20px; fill:currentColor}
.bloomtrack{position:relative; flex:1; min-width:0; height:100%; min-height:56px}
.bloombars{position:absolute; left:0; right:0; top:2px; height:22px}
.bloombars i{position:absolute; bottom:0; width:10px; transform:translateX(-50%); border-radius:3px 3px 1px 1px; background:#E6B8CB}
.bloombars i.now{background:var(--accent-onsky)}
.bloomticks{position:absolute; left:0; right:0; bottom:0; height:14px; font-size:.68rem; font-weight:600; color:#5A6955}
.bloomticks span{position:absolute; transform:translateX(-50%)}
.bloomtrack input{position:absolute; left:0; right:0; top:22px; width:100%; height:22px; margin:0; background:transparent; -webkit-appearance:none; appearance:none; touch-action:pan-y; cursor:pointer}
.bloomtrack input::-webkit-slider-runnable-track{height:4px; border-radius:2px; background:#D2DAC5}
.bloomtrack input::-moz-range-track{height:4px; border-radius:2px; background:#D2DAC5}
.bloomtrack input::-webkit-slider-thumb{-webkit-appearance:none; width:var(--thumb); height:var(--thumb); margin-top:-11px; border-radius:50%; background:#fff; border:3px solid var(--accent-onsky); box-shadow:0 1px 3px rgba(0,0,0,.25)}
.bloomtrack input::-moz-range-thumb{box-sizing:border-box; width:var(--thumb); height:var(--thumb); border-radius:50%; background:#fff; border:3px solid var(--accent-onsky); box-shadow:0 1px 3px rgba(0,0,0,.25)}
.bloomtrack input:focus-visible{outline:2px solid var(--accent-onsky); outline-offset:2px; border-radius:6px}
@media (min-width:900px){
  .bloombar{right:auto; width:min(520px, calc(100% - 468px))}
}
.viewsmenu{position:absolute; top:calc(var(--safe-top) + 62px); right:12px; z-index:3; width:min(250px, calc(100% - 24px)); max-height:calc(100% - var(--safe-top) - var(--dock-space) - 70px); overflow-y:auto; overscroll-behavior:contain; background:var(--sheet); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 10px 30px rgba(0,0,0,.25); padding:4px 6px 6px}
.viewsmenu h3{margin:10px 10px 2px; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.viewsmenu button{display:flex; width:100%; justify-content:space-between; align-items:baseline; gap:10px; text-align:left; border:0; background:transparent; border-radius:9px; padding:10px; min-height:44px; font-size:.95rem; font-weight:600}
.viewsmenu button:hover{background:var(--chip)}
.viewsmenu button span{font-size:.8rem; font-weight:400; color:var(--muted)}
@media (min-width:900px){
  /* the plant card sits on the right on wide screens, so the map buttons move out of its way */
  body:has(> .sheet:not([hidden])) .stage :is(.mapbar, .viewsmenu, .mapctl){right:444px}
}
/* ---------- Edit mode: the bar along the bottom (takes the bloom timeline's place) ---------- */
.mapbtn[aria-pressed="true"]{background:var(--accent-onsky); color:#fff}
.stage.editing .bloombar{display:none}
.edittray{position:absolute; left:12px; right:12px; bottom:var(--dock-space); max-height:calc(100% - var(--safe-top) - var(--dock-space) - 70px); overflow-y:auto; overscroll-behavior:contain; background:var(--sheet); color:var(--ink); border:1px solid var(--line); border-top:3px solid var(--bloom); border-radius:var(--radius); box-shadow:0 2px 10px rgba(0,0,0,.2); padding:10px 12px 12px; display:grid; gap:8px}
.ebhead{display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:28px}
.ebtitle{margin:0; font-weight:700; font-size:1rem; line-height:1.25}
.ebplant{min-width:0}
.ebplant .ebtitle{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ebplant span{display:block; font-size:.82rem; color:var(--muted); line-height:1.3}
.edittray .close{width:44px; height:44px; font-size:1rem}
.ebhelp{margin:0; font-size:.86rem; color:var(--muted); line-height:1.4}
.ebmsg{margin:0; font-size:.88rem; font-weight:600; color:var(--moss); line-height:1.4}
.ebbtns{display:flex; flex-wrap:wrap; gap:6px}
.pill.primary{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.pill.primary svg{stroke:currentColor}
.ebsize{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:6px 10px; align-items:center}
.ebsize label{font-size:.88rem; font-weight:600}
.ebsize label.ebwide{grid-column:1 / 3}
.ebsize input[type=range]{width:100%; height:32px; margin:0; accent-color:var(--bloom); touch-action:pan-y}
.ebnum{grid-column:3; display:flex; align-items:center; gap:5px; font-size:.85rem; color:var(--muted)}
.ebnum span{width:1.1em}
.ebnum input{width:4.6em; font:inherit; font-size:1rem; color:var(--ink); text-align:right; padding:7px 8px; border-radius:9px; border:1px solid var(--line); background:var(--paper); min-height:40px}
.ebnote{grid-column:1 / -1; margin:0; font-size:.78rem; color:var(--muted); line-height:1.35}
.ebshapes{display:flex; flex-wrap:wrap; gap:6px}
.ebshapes .pill{padding:5px 10px; min-height:44px}
.ebshapes .pill[aria-checked="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.growson{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:10px; font-size:.9rem; font-weight:600}
.growson select{font:inherit; font-weight:400; font-size:1rem; padding:7px 10px; border-radius:10px; border:1px solid var(--line); background:var(--paper); color:var(--ink); min-height:40px; max-width:100%}
.ebform{display:grid; gap:6px}
.ebform label{font-size:.85rem; font-weight:600; margin-top:2px}
.ebform input, .ebform select{font:inherit; font-size:1rem; width:100%; padding:9px 12px; border-radius:10px; border:1px solid var(--line); background:var(--paper); color:var(--ink); min-height:44px}
.ebform .formbtns{margin-top:6px}
@media (min-width:900px){
  .edittray{right:auto; width:400px}
}

.overlay{position:absolute; inset:0; display:grid; place-items:center; padding:24px; text-align:center; color:var(--muted); background:var(--paper); font-size:1rem; line-height:1.5}
.overlay[hidden]{display:none}
.overlay pre{white-space:pre-wrap; text-align:left; background:var(--chip); padding:10px 12px; border-radius:8px; color:var(--ink); font-size:.8rem; max-width:60ch}

/* ---------- plant card (full screen on phones, a side panel on wide screens) ----------
   The plant's photo across the top with its name over a dark fade, then glass panels over a soft blur of the
   same photo: Now, the Water / Feed / Dog safety tiles, its year as a colour strip, and the folding sections. */
.sheet{
  position:fixed; inset:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  overflow-x:hidden; /* the blurred glow is scaled up past the right edge */
  background:var(--paper); padding:0 0 calc(env(safe-area-inset-bottom,0px) + 28px);
  animation:cardin .24s ease;
  /* the season strip's colours */
  --st-rest:#CFC8B8; --st-up:#BFDD8F; --st-leaf:#4E8C45; --st-bloom:var(--accent); --st-crop:#E2A23B; --st-fade:#B86F35;
}
:root[data-theme="dark"] .sheet{--st-rest:#4A4C43; --st-up:#A3C474; --st-leaf:#3E7A3A}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .sheet{--st-rest:#4A4C43; --st-up:#A3C474; --st-leaf:#3E7A3A} }
@keyframes cardin{from{transform:translateY(28px); opacity:0}}
@media (prefers-reduced-motion: reduce){ .sheet{animation:none} }
@media (min-width:900px){
  .sheet{left:auto; top:calc(var(--safe-top) + 12px); right:12px; bottom:12px; width:420px; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 10px 40px rgba(0,0,0,.22)}
}

/* the photo, the name and the two round buttons */
.chero{position:relative; height:380px; overflow:hidden; color:#fff; background:hsl(var(--h) 30% 42%)}
.chero.nophoto{background:linear-gradient(160deg, hsl(var(--h) 34% 52%), hsl(var(--h) 30% 30%))}
.cheropic{position:absolute; inset:0; padding:0; border:0; background:none; display:block; width:100%; cursor:zoom-in}
.cheropic img{display:block; width:100%; height:100%; object-fit:cover}
.cheropic img:not([src]){visibility:hidden}
.chero::after{content:""; position:absolute; inset:auto 0 0; height:68%; pointer-events:none;
  background:linear-gradient(to bottom, rgba(8,12,8,0), rgba(8,12,8,.38) 40%, rgba(8,12,8,.82))}
.chero::before{content:""; position:absolute; inset:0 0 auto; height:120px; z-index:1; pointer-events:none; background:linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,0))}
.cherotop{position:absolute; z-index:2; top:calc(var(--safe-top) + 12px); left:14px; right:14px; display:flex; justify-content:space-between; pointer-events:none}
@media (min-width:900px){ .cherotop{top:12px} }
.cround{pointer-events:auto; width:44px; height:44px; border-radius:50%; padding:0; display:grid; place-items:center; color:#fff;
  --glass-bg:rgba(20,26,20,.28); --glass-border:rgba(255,255,255,.34); --glass-highlight:rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 var(--glass-highlight), 0 4px 14px rgba(0,0,0,.18)}
.cround svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.cardback svg{stroke-width:2.4}
.cround:active{transform:scale(.94)}
.cherotext{position:absolute; z-index:2; left:18px; right:18px; bottom:18px; pointer-events:none}
.cherotext .badges{pointer-events:auto}
.sheet .chero h2{margin:0; font-family:var(--font-head); font-weight:500; font-size:2.7rem; line-height:.98; letter-spacing:-.02em; text-wrap:balance; text-shadow:0 1px 12px rgba(0,0,0,.25)}
.chero .where{margin:8px 0 0; font-size:.9rem; line-height:1.35; color:rgba(255,255,255,.86)}
.chero .badges{margin-top:10px}
.chero .badges .badge{background:rgba(20,26,20,.32); color:#fff; border:1px solid rgba(255,255,255,.3); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.chero .badges .badge.unconfirmed{border-style:dashed; color:#FFE2A6}
.chero .badges .badge.attention{color:#FFE2A6}
.chero .badges .badge.safe{color:#C9F2C4}

/* the panels, over a soft blur of the photo */
.cbody{position:relative; padding:14px 14px 0; display:grid; gap:10px}
.cbody > *{position:relative; min-width:0}
.cglow{position:absolute !important; z-index:0; inset:0 0 auto; height:620px; background-color:hsl(var(--h, 100) 30% 60% / .2); background-size:cover; background-position:center;
  filter:blur(48px) saturate(140%); opacity:.55; transform:scale(1.15); pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 30%, transparent); mask-image:linear-gradient(#000 30%, transparent)}
/* The card's panels use the solid glass colour rather than a live blur: a dozen blurred panels scrolling over the
   photo glow dropped frames on a slower phone, and the glow behind them is already soft. */
.cbody .glass{background:var(--glass-solid); -webkit-backdrop-filter:none; backdrop-filter:none}
.cpanel{border-radius:var(--radius); padding:14px 16px; color:var(--text); box-shadow:inset 0 1px 0 var(--glass-highlight), 0 6px 20px rgba(0,0,0,.06)}
.eyebrow{display:block; margin:0; font-family:var(--font-body); font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.cpanel .status{margin-top:4px; font-family:var(--font-head); font-weight:600; font-size:1.45rem; line-height:1.1}
.cpanel p{margin:6px 0 0; font-size:.95rem; line-height:1.5}

/* Now: the stage this month, the care due with its done circles, and what's next */
.nowbox .eyebrow{display:flex; align-items:center; gap:7px}
.nowbox .eyebrow::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--c)}
.nowcare{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:2px}
.nowcare li{display:flex; gap:12px; align-items:flex-start; padding:9px 0; border-top:1px solid var(--line); font-size:.95rem; line-height:1.45}
.nowcare li:first-child{border-top:0; padding-top:2px}
.nowcare li.done > span:last-child{color:var(--muted)}
.cdone{position:relative; flex:none; width:30px; height:30px; margin-top:-2px; border-radius:50%; padding:0; display:grid; place-items:center; border:2px solid var(--muted); background:transparent; color:var(--on-accent); transition:background-color .15s, border-color .15s}
.cdone::before{content:""; position:absolute; inset:-7px; border-radius:50%}
.cdone svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; opacity:0; transition:opacity .15s}
.cdone[aria-checked="true"]{background:var(--accent); border-color:var(--accent)}
.cdone[aria-checked="true"] svg{opacity:1}
.cdot{flex:none; width:30px; height:22px; display:grid; place-items:center}
.cdot::after{content:""; width:7px; height:7px; border-radius:50%; background:var(--muted); opacity:.6}
@media (prefers-reduced-motion: reduce){ .cdone, .cdone svg{transition:none} }
.nowbox .seasonbtns{margin-top:12px}
.nowbox .btn{margin-top:12px}
.nextline{display:flex; flex-direction:column; gap:3px; width:calc(100% + 32px); margin:14px -16px -14px; padding:12px 16px 14px; border:0; border-top:1px solid var(--line); background:none; text-align:left; color:var(--text); font-size:.92rem; line-height:1.4; border-radius:0 0 var(--radius) var(--radius)}
.nextline .more{color:var(--muted); white-space:nowrap}
.nextline:active{background:var(--glass-highlight)}

/* Water, Feed, Dog safety */
.ctiles{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px}
.ctile{display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-height:96px; padding:11px 12px 12px; border-radius:var(--radius); text-align:left; color:var(--text); box-shadow:inset 0 1px 0 var(--glass-highlight), 0 6px 20px rgba(0,0,0,.06)}
.ctile b{font-family:var(--font-head); font-weight:600; font-size:1.18rem; line-height:1.08; margin-top:auto; overflow-wrap:anywhere}
.ctile .tsub{font-size:.76rem; line-height:1.25; color:var(--muted)}
.ctile.now .tsub{color:var(--ok); font-weight:700}
.ctile[aria-expanded="true"]{outline:2px solid var(--text); outline-offset:-2px}
.ctile.dog.toxic{--glass-bg:rgba(178,34,24,.9); --glass-solid:#B22218; --glass-border:rgba(255,160,150,.45); --glass-highlight:rgba(255,255,255,.25); color:#fff}
.ctile.dog.toxic .eyebrow, .ctile.dog.toxic .tsub{color:rgba(255,255,255,.88)}
.ctile.dog.toxic[aria-expanded="true"]{outline-color:#fff; outline-offset:-4px}
.ctile.dog.caution b{color:var(--warn)}
.ctile.dog.safe b{color:var(--ok)}
.tilemore .tasks{margin-top:0}
.tilemore.dog.toxic{border-left:4px solid var(--danger)}
.tilemore.dog.toxic .status{color:var(--danger)}
.tilemore.dog.caution{border-left:4px solid var(--warn)}

/* its year */
.seasonstrip{list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:3px}
.seasonstrip li{display:grid; gap:5px; justify-items:center}
.seasonstrip i{display:block; width:100%; height:30px; border-radius:6px; background:var(--sc)}
.seasonstrip li:first-child i{border-radius:9px 6px 6px 9px}
.seasonstrip li:last-child i{border-radius:6px 9px 9px 6px}
.seasonstrip span{font-size:.72rem; font-weight:600; color:var(--muted)}
.seasonstrip li.on i{outline:2.5px solid var(--text); outline-offset:2px}
.seasonstrip li.on span{color:var(--text); font-weight:800}
.seasonkey{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.78rem; color:var(--muted)}
.seasonkey li{display:flex; align-items:center; gap:6px}
.seasonkey i{width:10px; height:10px; border-radius:3px; background:var(--sc)}

/* the folding sections */
.sheet details.csec{margin:0; padding:14px 16px; border-top:1px solid var(--glass-border)}
.csec > summary{min-height:54px; padding:0 16px; margin:-14px -16px; font-family:var(--font-head); font-weight:600; font-size:1.2rem; border-radius:var(--radius)}
.csec > summary::after, .csec[open] > summary::after{content:none}
.csec > summary svg{flex:none; width:20px; height:20px; fill:none; stroke:var(--muted); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s}
.csec[open] > summary svg{transform:rotate(180deg)}
.csec[open] > summary{margin-bottom:0}
.csecbody{padding:4px 0 2px}
.csecbody > :first-child{margin-top:4px}
.csec .notes{margin-top:12px; padding-left:0; font-size:inherit}
.csec #cardNotes{margin-top:0; padding-top:0; border-top:0}
.csec #cardNotes .noteshead h3{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} /* the section's own title says it */
.csec #cardNotes .noteshead{justify-content:flex-end}
.csec #cardNotes .noteshead:not(:has(button)){display:none}
.csec .stitle{margin:12px 0 0; font-weight:700}
.csec .tag{background:var(--chip)}
.csec .photos{margin:12px -16px 0; padding:0 16px 4px}
@media (prefers-reduced-motion: reduce){ .csec > summary svg{transition:none} }
.close{border:0; background:var(--chip); border-radius:50%; width:44px; height:44px; font-size:1.2rem; line-height:1; flex:none}
.badges{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.badge{display:inline-flex; align-items:center; gap:4px; font-size:.78rem; font-weight:700; padding:4px 9px; border-radius:var(--radius-pill); background:var(--chip); color:var(--ink); white-space:nowrap}
.badge.unconfirmed{background:var(--warn-bg); color:var(--warn); border:1px dashed currentColor}
.badge.toxic{background:var(--danger-bg); color:var(--danger)}
.badge.caution{background:var(--warn-bg); color:var(--warn)}
.badge.safe{background:var(--ok-bg); color:var(--ok)}
.badge.attention{background:var(--warn-bg); color:var(--warn)}
.photos{display:flex; gap:8px; overflow-x:auto; margin:14px -18px 0; padding:0 18px 4px; scroll-snap-type:x mandatory}
.photos button{flex:none; border:0; padding:0; border-radius:10px; overflow:hidden; scroll-snap-align:start; background:var(--chip)}
.photos img{display:block; height:130px; width:auto; min-width:98px}
.status{font-weight:700; font-size:1.02rem}
.sheet p{margin:6px 0 0; font-size:.95rem; line-height:1.5}
.tasks{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:8px}
.tasks li{font-size:.93rem; line-height:1.45}
.tag{display:inline-block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:2px 6px; border-radius:5px; margin-right:6px; background:var(--sheet); color:var(--muted); vertical-align:1px}
.issues{margin:8px 0 0; padding-left:18px; color:var(--warn); font-weight:600; font-size:.92rem; line-height:1.45}
details{margin-top:14px; border-top:1px solid var(--line); padding-top:10px}
summary{cursor:pointer; font-weight:700; font-size:1rem; list-style:none; display:flex; justify-content:space-between; align-items:center; min-height:44px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-size:1.3rem; color:var(--muted)}
details[open] > summary::after{content:"–"}
.monthblock{margin-top:10px}
.monthblock h4{margin:0 0 4px; font-size:.9rem; color:var(--moss)}
.small{font-size:.85rem; color:var(--muted); line-height:1.45}
.sources{margin:6px 0 12px; padding-left:18px; font-size:.88rem; line-height:1.6}
.sources a{display:inline-block; padding:11px 0}
.sheet p.small a{display:inline-block; padding:12px 0; margin:-12px 0} /* "Source: …" and "Dog safety: …": a 44px target without moving the lines */
.conf{display:flex; gap:10px; align-items:baseline; margin-top:8px}
.conf b{font-size:1.1rem}

/* the card's own controls: confirm, rename, finish */
.editbar{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.pill{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:var(--radius-pill); padding:6px 13px 6px 10px; font-size:.86rem; font-weight:600; min-height:44px}
.pill svg{width:16px; height:16px; fill:none; stroke:var(--moss); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.pill:active{background:var(--chip)}
.seasonbtns{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px}
.seasonbtns .small{flex-basis:100%}
.seasonbtns .pill[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.seasonbtns .pill[aria-pressed="true"] svg{stroke:currentColor}
.editnote{margin-top:10px !important}
.changes{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:2px}
.changes li{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:.86rem; line-height:1.4; color:var(--ink); padding:4px 0; border-bottom:1px dashed var(--line)}
.changes li::before{content:""; flex:none; align-self:flex-start; margin-top:.5em; width:7px; height:7px; border-radius:50%; background:var(--bloom)}
.changes li > span{flex:1}
.changes .who{color:var(--muted)}
.changes .linkbtn{flex:none; min-height:32px; padding:0 2px}
.editform{margin-top:12px; padding:12px 14px; border-radius:var(--radius); background:var(--chip); border-left:4px solid var(--moss); display:grid; gap:6px}
.editform .stitle{margin:0; font-weight:700; font-size:1rem}
.editform label{font-size:.85rem; font-weight:600; margin-top:4px}
.editform input, .editform select{font:inherit; font-size:1rem; width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--paper); color:var(--ink); min-height:44px}
.editform p.small{margin:2px 0 0}
.formbtns{display:flex; align-items:center; gap:16px; margin-top:4px}
.formbtns .btn{margin-top:0}
.formbtns .btn:disabled{opacity:.55; cursor:default}

/* the card's notes and photos (notes.js) */
.notes{margin-top:16px; padding-top:12px; border-top:1px solid var(--line)}
.noteshead{display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:40px}
.noteshead h3{margin:0; font-size:1rem; font-weight:600}
.noteshead h3 span{color:var(--muted); font-weight:400}
.notes > p.small{margin:6px 0 0}
.noteform textarea{font:inherit; font-size:1rem; width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--paper); color:var(--ink); min-height:84px; resize:vertical; line-height:1.4}
.noteform input[type=date]{width:auto; min-width:11em; -webkit-appearance:none; appearance:none}
.notepick{display:flex; align-items:center; gap:12px; margin-top:4px}
.notepick img{height:72px; width:auto; max-width:120px; object-fit:cover; border-radius:8px; display:block}
.notepick .pill{cursor:pointer; margin:0; font-size:.9rem}
.offscreen{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; pointer-events:none}
.notepick .pill:focus-within{outline:2px solid var(--bloom); outline-offset:2px}
.notelist{list-style:none; margin:8px 0 0; padding:0}
.note{padding:10px 0 12px; border-bottom:1px dashed var(--line)}
.note:last-child{border-bottom:0}
.notemeta{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 6px; font-size:.86rem; color:var(--muted)}
.notemeta b{color:var(--ink); font-size:.95rem}
.notemeta .linkbtn{margin-left:auto; font-weight:600; font-size:.84rem}
.note .notebody{margin:4px 0 0; white-space:pre-wrap; overflow-wrap:anywhere}
.notepic{display:block; margin-top:8px; padding:0; border:0; border-radius:10px; overflow:hidden; background:var(--chip); height:150px; max-width:100%; aspect-ratio:4 / 3}
.notepic img{display:block; width:100%; height:100%; object-fit:cover}
.notepic img:not([src]){visibility:hidden}
.notepic.missing{display:grid; place-items:center; width:120px; aspect-ratio:auto !important}
.notepic.missing::after{content:"Photo couldn't load"; font-size:.78rem; color:var(--muted); padding:8px; text-align:center}
.notepic.missing img{display:none}
.note.waiting .notepic, .note.waiting .notebody{opacity:.75}
.note .notewait{margin:6px 0 0; font-size:.82rem; color:var(--warn); font-weight:600}
.noteask{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:6px; padding:8px 10px; border-radius:10px; background:var(--danger-bg); font-size:.9rem}
.noteask span{flex-basis:100%}
.noteask .btn{margin:0}
.btn.danger{background:var(--danger); color:var(--sheet)}
.notes > .linkbtn{margin-top:4px}
.lbwait{margin:auto; padding:0 24px; text-align:center; color:#ddd}
.lbbar span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-right:10px}
.lbbar button{flex:none}
.notemeta .linkbtn{color:var(--muted)}

/* ---------- all-plants list ---------- */
.listpanel{position:fixed; inset:0; z-index:10; background:var(--sheet); display:flex; flex-direction:column; animation:fadein .15s ease}
@keyframes fadein{from{opacity:0}}
@media (min-width:900px){ .listpanel:not(.screen){left:auto; width:480px; border-left:1px solid var(--line); box-shadow:-8px 0 30px rgba(0,0,0,.15)} }
/* ---------- the Plants screen: over the blurred yard ----------
   The title, search and chips stay put while the cards scroll under them. --pg is the side gutter, which grows on
   wide screens so the grid stays a comfortable width. */
.listpanel.screen{z-index:2; background:transparent; padding:0; overflow:hidden; animation:none; --pg:max(16px, (100% - 720px) / 2)}
.phead{position:relative; z-index:3; flex:none; display:grid; gap:12px; padding:calc(var(--safe-top) + 14px) var(--pg) 10px}
.ptitle{display:flex; align-items:baseline; justify-content:space-between; gap:12px; min-height:52px}
.ptitle h1{margin:0; font-weight:500; font-size:3rem; line-height:1; letter-spacing:-.035em; font-optical-sizing:auto}
.pcount{margin:0; font-family:var(--font-head); font-size:1.2rem; color:var(--muted); font-variant-numeric:lining-nums tabular-nums; white-space:nowrap}
.pcount b{font-weight:600; color:var(--text)}
.psearch{display:flex; align-items:center; gap:8px; min-height:46px; padding:0 6px 0 14px; border-radius:var(--radius-pill); color:var(--muted); cursor:text; box-shadow:inset 0 1px 0 var(--glass-highlight), 0 4px 16px rgba(0,0,0,.07)}
.psearch:focus-within{outline:2px solid var(--accent); outline-offset:2px}
.psearch svg{flex:none; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
.psearch input{flex:1; min-width:0; min-height:44px; border:0; background:transparent; padding:0; font:inherit; font-size:1rem; color:var(--text); outline:none}
.psearch input::placeholder{color:var(--muted)}
.pchips{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:2px 16px 4px}
.pchips::-webkit-scrollbar{display:none}
.pfilter{position:relative; flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; padding:0; color:var(--text)}
.pfilter svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round}
.pfilter[aria-expanded="true"]{background:var(--lens)}
.pfiltern{position:absolute; top:-4px; right:-4px; min-width:19px; height:19px; padding:0 5px; border-radius:10px; display:grid; place-items:center; background:var(--accent); color:var(--on-accent); font-size:.7rem; font-weight:800; line-height:1}
.pchip{flex:none; min-height:44px; padding:0 15px; border-radius:var(--radius-pill); font-size:.88rem; font-weight:700; color:var(--text); white-space:nowrap}
.pchip[aria-pressed="true"]{background:var(--text); color:var(--paper); border:1px solid var(--text)}

/* The filter drop-down. The see-through layer behind it closes it when tapped. */
.fscrim{position:fixed; inset:0; z-index:0}
.fmenu{position:absolute; z-index:1; top:calc(100% - 4px); left:var(--pg); width:min(340px, 100% - 32px); display:flex; flex-direction:column;
  max-height:calc(100dvh - var(--safe-top) - 190px - var(--dock-space)); border-radius:20px; color:var(--text);
  --glass-bg:color-mix(in srgb, var(--sheet) 76%, transparent);
  box-shadow:inset 0 1px 0 var(--glass-highlight), 0 18px 50px rgba(0,0,0,.24); animation:fmenuin .16s ease-out; transform-origin:24px 0}
@keyframes fmenuin{from{opacity:0; transform:translateY(-6px) scale(.98)}}
.fmenuscroll{overflow-y:auto; overscroll-behavior:contain; padding:4px 16px}
.fmenu fieldset{border:0; margin:0; padding:12px 0; min-width:0}
.fmenu fieldset + fieldset{border-top:1px solid var(--line)}
.fmenu legend{float:left; width:100%; padding:0; margin-bottom:6px; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--muted)}
.fmenu legend + *{clear:both}
.fsorts{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.fsort, .fbox{position:relative; cursor:pointer}
.fsort input, .fbox input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.fsort span{display:grid; place-items:center; min-height:44px; padding:0 8px; border-radius:var(--radius-pill); border:1px solid var(--line); font-size:.86rem; font-weight:700; text-align:center}
.fsort input:checked + span{background:var(--text); color:var(--paper); border-color:var(--text)}
.fsort input:focus-visible + span, .fbox input:focus-visible + .fmark{outline:2px solid var(--accent); outline-offset:2px}
.fbox{display:flex; align-items:center; gap:11px; min-height:44px; font-size:.95rem}
.fmark{flex:none; width:22px; height:22px; border-radius:7px; border:1.5px solid var(--muted); display:grid; place-items:center; transition:background-color .12s, border-color .12s}
.fmark svg{width:15px; height:15px; fill:none; stroke:var(--on-accent); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; opacity:0}
.fbox input:checked + .fmark{background:var(--accent); border-color:var(--accent)}
.fbox input:checked + .fmark svg{opacity:1}
.fmenubtns{flex:none; display:flex; gap:8px; padding:12px 16px 14px; border-top:1px solid var(--line)}
.fmenubtns .btn{margin:0; min-height:44px}
.fmenubtns #filterApply{flex:1}
.btn.ghost{background:transparent; color:var(--text); border:1px solid var(--line)}

/* The cards: a photo with the name and what it's doing now, and tags at the top. */
.presults{flex:1; min-height:0; overflow-y:auto; scrollbar-width:none; overscroll-behavior:contain; padding:4px var(--pg) calc(var(--dock-space) + 16px)}
.presults .editsnote{margin:0 0 12px}
.pgrid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px}
@media (min-width:600px){ .pgrid{grid-template-columns:repeat(3, minmax(0,1fr))} }
.pcard{position:relative; display:block; width:100%; aspect-ratio:4/5; padding:0; border:0; border-radius:var(--radius); overflow:hidden; background:var(--chip); text-align:left; box-shadow:0 6px 18px rgba(0,0,0,.14); transition:transform .15s ease}
.pcard:active{transform:scale(.97)}
.pcard:focus-visible{outline-offset:3px}
.pcard img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.pcard img.missing{display:none}
.pcard::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,14,10,.84) 0%, rgba(10,14,10,.5) 32%, rgba(10,14,10,0) 58%)}
.pcardtext{position:absolute; z-index:1; left:11px; right:11px; bottom:11px; display:grid; gap:3px; color:#fff}
.pcardtext b{font-family:var(--font-head); font-weight:600; font-size:1.14rem; line-height:1.08; letter-spacing:-.005em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pcardtext span{font-size:.75rem; line-height:1.3; color:rgba(255,255,255,.86); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ptags{position:absolute; z-index:1; top:8px; left:8px; right:8px; display:flex; flex-wrap:wrap; gap:4px}
.ptag{font-size:.68rem; font-weight:800; line-height:1; padding:5px 8px; border-radius:var(--radius-pill); color:#fff; background:rgba(20,26,20,.55); border:1px solid rgba(255,255,255,.28); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); white-space:nowrap}
.ptag.toxic{background:rgba(180,35,24,.86); border-color:rgba(255,255,255,.2)}
.ptag.caution{background:rgba(140,82,0,.82); border-color:rgba(255,255,255,.2)}
.ptag.todo{background:rgba(255,255,255,.88); color:#10170F; border-color:transparent}
.ptag.new{background:var(--accent-onsky); border-color:transparent; letter-spacing:.05em}
.pgroup{display:flex; align-items:baseline; gap:8px; margin:22px 2px 10px; font-size:1.35rem; font-weight:500; letter-spacing:-.01em}
.pgroup:first-child{margin-top:6px}
.pgroup span{font-family:var(--font-body); font-size:.8rem; font-weight:700; color:var(--muted)}
.pfoot{margin:16px 2px 0; font-size:.85rem; color:var(--muted)}
.pfoot .linkbtn{min-height:0; padding:0}
.presults .removedlist{margin-top:14px; border-radius:var(--radius); padding:4px 14px}
.presults .removedlist summary{min-height:44px; display:flex; align-items:center; cursor:pointer}
.presults .removedlist ul{list-style:none; margin:0; padding:0}
.presults .removedlist li button{width:100%; min-height:44px; display:flex; justify-content:space-between; align-items:center; gap:10px; border:0; border-top:1px solid var(--line); background:transparent; padding:8px 0; text-align:left}
.presults .removedlist .plabel{font-weight:400}
.presults .removedlist .pstate{flex:none; font-size:.8rem; color:var(--muted)}
@media (prefers-reduced-motion: reduce){ .pcard, .fmark{transition:none} .fmenu{animation:none} }
.listhead{padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 10px; border-bottom:1px solid var(--line); display:grid; gap:10px}
.listhead .row{display:flex; justify-content:space-between; align-items:center; gap:10px}
.listhead h2{margin:0; font-size:1.25rem}
.search{width:100%; font:inherit; font-size:1rem; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--paper); color:var(--ink); min-height:44px}
.filters{display:flex; flex-wrap:wrap; gap:6px}
.filters select{flex:none; max-width:100%; font:inherit; font-size:.88rem; padding:7px 10px; border-radius:var(--radius-pill); border:1px solid var(--line); background:var(--paper); color:var(--ink); min-height:38px}
.toggle{border:1px solid var(--line); background:var(--paper); border-radius:var(--radius-pill); padding:7px 11px; font-size:.84rem; font-weight:600; min-height:44px}
.toggle[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.listmeta{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:2px 12px; font-size:.88rem; color:var(--muted)}
.listmeta .linkbtn:disabled{color:var(--muted); text-decoration:none; cursor:default}
.linkbtn{border:0; background:transparent; color:var(--moss); font-weight:700; padding:6px 0; text-decoration:underline; min-height:44px}
.plist{flex:1; overflow-y:auto; overscroll-behavior:contain; padding:0 16px calc(env(safe-area-inset-bottom,0px) + 24px)}
.plist h3{position:sticky; top:0; margin:0; padding:12px 0 6px; background:var(--sheet); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.plist ul{list-style:none; margin:0; padding:0}
.plist li button{width:100%; text-align:left; border:0; background:transparent; padding:10px 2px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr auto; gap:4px 10px; align-items:center; min-height:52px}
.plist .pname{font-size:.98rem; font-weight:600; line-height:1.25}
.plist .plabel{color:var(--muted); font-weight:400}
.plist .pstate{font-size:.8rem; color:var(--muted); text-align:right}
.plist .pbadges{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:4px}
.plist .pbadges .badge{font-size:.7rem; padding:2px 7px}
.empty{padding:30px 0; text-align:center; color:var(--muted)}
.removedlist{margin-top:18px}
.removedlist summary{font-size:.9rem; color:var(--muted)}
.removedlist .pname{color:var(--muted)}

/* "Save app edits into files" (the Mac copy) */
.editsnote{margin:12px 0 4px; padding:12px 14px; border-radius:var(--radius); background:var(--chip); border-left:4px solid var(--bloom)}
.editsnote p{margin:0; font-size:.93rem; line-height:1.45}
.saveedits .lead{margin:14px 0 4px; font-size:.95rem; line-height:1.5}
.saveedits code{font-size:.88em}
.editrows{list-style:none; margin:6px 0 12px; padding:0}
.editrows > li{padding:10px 0; border-bottom:1px solid var(--line)}
.erhead{margin:0 0 4px; font-size:.98rem}
.editrows ul{list-style:none; margin:0; padding:0; display:grid; gap:4px; font-size:.9rem; line-height:1.4}
.editrows ul li{display:grid; grid-template-columns:8.2em minmax(0,1fr); gap:10px; align-items:baseline}
.erlabel{color:var(--muted); font-size:.82rem; line-height:1.3}
.erfrom{color:var(--muted); text-decoration:line-through}
.saveedits .formbtns{margin:14px 0 0}

/* ---------- this week (shares the panel shell with the all-plants list) ---------- */
.tlist{flex:1; overflow-y:auto; overscroll-behavior:contain; padding:0 16px calc(env(safe-area-inset-bottom,0px) + 24px)}
.tlist h3{position:sticky; top:0; z-index:1; margin:0; padding:14px 0 6px; background:var(--sheet); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.weeknav{display:flex; align-items:center; gap:8px}
.navbtn{flex:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--paper); display:grid; place-items:center}
.navbtn::before{content:""; width:10px; height:10px; border:solid currentColor; border-width:0 0 2.5px 2.5px; transform:translateX(2px) rotate(45deg)}
.navbtn.next::before{transform:translateX(-2px) rotate(-135deg)}
.weeknav .wk{flex:1; display:grid; justify-items:center; line-height:1.35}
.weeknav .wk span{font-size:.85rem; color:var(--muted)}
.backlink{justify-self:center; padding:0}
.tlist h3 .count{float:right; text-transform:none; letter-spacing:0; font-weight:600}
.tlist .empty{padding:8px 0 4px; text-align:left}
.tlist .tag{background:var(--chip)}
.foot{margin:22px 0 0}

.season{margin:14px 0 6px; padding:12px 14px; border-radius:var(--radius); background:var(--chip); border-left:4px solid var(--winter)}
.season.spring{border-left-color:var(--spring)}
.season .stitle{font-weight:700; font-size:1.02rem; line-height:1.3}
.season p{margin:6px 0 0; font-size:.93rem; line-height:1.5}
.season details{margin-top:10px; padding-top:4px}
.season summary{font-size:.9rem; min-height:44px}
.season .linkbtn{padding:6px 0 0; min-height:0; margin-top:6px}
.notes{margin:6px 0 0; padding-left:18px; font-size:.88rem; line-height:1.5}
.btn{border:0; border-radius:var(--radius-pill); background:var(--ink); color:var(--paper); font-weight:700; font-size:.9rem; padding:9px 16px; min-height:44px; margin-top:10px}
.frostform{margin-top:10px; display:grid; gap:6px}
.frostform label{font-size:.88rem; font-weight:600}
.frostrow{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px}
.frostrow input{font:inherit; font-size:1rem; padding:8px 10px; border-radius:10px; border:1px solid var(--line); background:var(--paper); color:var(--ink); min-height:44px}
.frostrow .btn{margin-top:0}
.frostrow .linkbtn{padding:0}

.tasklist{list-style:none; margin:0; padding:0}
.task{display:grid; grid-template-columns:44px minmax(0,1fr); gap:0 6px; padding:4px 0; border-bottom:1px solid var(--line)}
.check{position:relative; width:44px; height:44px; border:0; padding:0; background:transparent; display:grid; place-items:center; margin-top:2px}
.check::before{content:""; width:24px; height:24px; border-radius:7px; border:2px solid var(--muted); background:var(--paper)}
.check[aria-checked="true"]::before{background:var(--moss); border-color:var(--moss)}
.check[aria-checked="true"]::after{content:""; position:absolute; left:50%; top:50%; width:6px; height:12px; border:solid var(--sheet); border-width:0 3px 3px 0; transform:translate(-50%, -62%) rotate(45deg)}
.check[aria-checked="mixed"]::before{border-color:var(--moss); background:linear-gradient(var(--moss), var(--moss)) center / 12px 3px no-repeat, var(--paper)}
.tmain{width:100%; text-align:left; border:0; background:transparent; padding:10px 0 10px 2px; display:grid; gap:3px; min-height:44px}
.thead{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.tname{font-weight:700; font-size:.98rem; line-height:1.3}
.when{flex:none; font-size:.78rem; font-weight:700; color:var(--muted); white-space:nowrap}
.when.due{color:var(--warn)}
.ttext{display:block; font-size:.92rem; line-height:1.45}
.tnote{display:block; font-size:.82rem; font-weight:600; color:var(--moss); line-height:1.4}
.twhere{display:block; font-size:.82rem; color:var(--muted); line-height:1.4}
.unconf{color:var(--warn); font-weight:700}
.task.done > .tbody > .tmain .tname, .task.done > .tbody > .tmain .ttext{color:var(--muted)}
.task.done > .tbody > .tmain .ttext{text-decoration:line-through}
.tmore{padding:0 0 12px 2px; display:grid; gap:10px}
.tmore > p{margin:0; font-size:.92rem; line-height:1.5}
.tmore > p.small{font-size:.82rem}
.tmore > .linkbtn{justify-self:start; padding:2px 0; min-height:32px}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{border:1px solid var(--line); background:var(--paper); border-radius:var(--radius-pill); padding:4px 11px; font-size:.82rem; font-weight:600; min-height:44px}
.chip.unconfirmed{border-style:dashed; border-color:var(--warn); color:var(--warn)}
.linkbtn.inline{min-height:0; padding:0; font-size:inherit; vertical-align:baseline}
.progress{color:var(--moss); font-weight:700}
.plantchecks{list-style:none; margin:0; padding:0; border-top:1px dashed var(--line)}
.plantchecks li{display:grid; grid-template-columns:44px minmax(0,1fr); gap:0 6px; align-items:center; border-bottom:1px dashed var(--line)}
.pcname{border:0; background:transparent; text-align:left; padding:6px 0; min-height:44px; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px}
.pcname b{font-size:.92rem}
.pcname span{font-size:.8rem; color:var(--muted)}
.plantchecks li.done b{color:var(--muted); text-decoration:line-through}
.signin{margin:14px 0 6px; padding:12px 14px; border-radius:var(--radius); background:var(--chip); border-left:4px solid var(--bloom); display:grid; gap:6px}
.signin .stitle{font-weight:700; font-size:1.02rem}
.signin p{margin:0; font-size:.92rem; line-height:1.45}
.signin label{font-size:.85rem; font-weight:600; margin-top:4px}
.signin input{font:inherit; font-size:1rem; width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--paper); color:var(--ink); min-height:44px}
.signin .btn{justify-self:start}
.signin .btn:disabled{opacity:.6; cursor:default}
.signinerror{color:var(--danger); font-weight:600}
.savewarn{margin:0; padding:8px 10px; border-radius:10px; background:var(--warn-bg); color:var(--warn); font-size:.85rem; font-weight:600; line-height:1.4}
.subtasks{list-style:none; margin:0; padding:0}
.subtasks li{display:grid; grid-template-columns:44px minmax(0,1fr); gap:0 6px; border-top:1px dashed var(--line)}
.subbody{display:grid; gap:2px; padding:10px 0 8px}
.subtasks li.done .tname, .subtasks li.done .ttext{color:var(--muted)}
.subtasks li.done .ttext{text-decoration:line-through}
.tipsbox{margin-top:18px}
.tiplist{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:14px}
.tiplist li{display:grid; gap:2px}
.soon{list-style:none; margin:0; padding:0}
.soonbtn{width:100%; text-align:left; border:0; border-bottom:1px solid var(--line); background:transparent; display:grid; grid-template-columns:60px minmax(0,1fr); gap:10px; padding:10px 2px; min-height:44px}
.sdate{font-weight:700; font-size:.9rem; color:var(--moss)}
.sbody{display:grid; gap:4px; font-size:.9rem; line-height:1.4}

/* ---------- photo checks: Plant health, Friend or foe, the bug catalog (checks.js, reports.js) ---------- */
.checks .lead{margin:14px 0 4px; font-size:.95rem; line-height:1.5}
.checktabs .toggle{display:inline-flex; align-items:center; gap:6px; font-size:.9rem; padding:7px 13px}
.checktabs svg, .checkbtns svg, .checks .btn svg, .checkbody .btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round}
.checkbtns svg{stroke:var(--moss)}
.checkform{border-left-color:var(--bloom)}
.checkform textarea{font:inherit; font-size:1rem; width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--paper); color:var(--ink); resize:vertical}
.checkform select:disabled, .checkform textarea:disabled{opacity:.6}
.checks .btn, .checkbody .btn{display:inline-flex; align-items:center; gap:8px; text-decoration:none}
.checkpick{flex-wrap:wrap}
.checkpick img{height:120px; max-width:180px}
.checkpick .pill{min-height:44px; cursor:pointer}
.checkpick .pill.primary svg{stroke:currentColor}
.checkpick label.linkbtn{cursor:pointer}
.checkpick label:focus-within{outline:2px solid var(--bloom); outline-offset:2px}
.checkform > .stitle, .claudestep > .stitle{margin:0; font-weight:700; font-size:1rem}
.claudestep{margin-top:12px; padding:12px 14px; border-radius:var(--radius); background:var(--chip); border-left:4px solid var(--bloom); display:grid; gap:6px}
.claudestep.done{border-left-color:var(--ok); background:var(--ok-bg)}
.claudestep p{margin:0; font-size:.93rem; line-height:1.45}
.claudestep .formbtns{flex-wrap:wrap; gap:8px 16px}
.claudestep .formbtns .btn, .checkbody .formbtns .btn{white-space:nowrap}
.claudestep .formbtns .btn{margin-top:0}
.steps{margin:2px 0 4px; padding-left:20px; font-size:.93rem; line-height:1.45}
.steps li + li{margin-top:4px}
.promptbox summary{font-size:.85rem; font-weight:700; color:var(--moss); min-height:44px; cursor:pointer}
.promptbox pre{margin:4px 0 0; padding:10px; border-radius:8px; background:var(--paper); font-size:.78rem; line-height:1.4; white-space:pre-wrap; overflow-wrap:anywhere; max-height:240px; overflow:auto}
.checkitem.waiting .checkline b{color:var(--muted)}
.buglist .checkline[aria-expanded="true"]{border-bottom-color:transparent}
/* One column that never grows wider than the screen, even for a plant list with long names in it. */
.checkbody{padding:10px 2px 14px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:minmax(0,1fr); gap:8px}
.checkbody > *, .report > *{min-width:0}
.checkbody > p.small{margin:0}
.checkbody .notepic{margin-top:0}
.checkbody .formbtns .btn{margin-top:0}
.checkbody .growson{margin-top:0}
.checkbody > .linkbtn{justify-self:start}
.checks > .stitle, .buggroup .stitle, .notes .buglist + .stitle{margin:14px 0 4px; font-weight:700; font-size:.9rem}
.checkcost{margin:22px 0 0}
.checkbtns{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}

/* An answer from Claude, in the skill's sections */
.report{display:grid; grid-template-columns:minmax(0,1fr); gap:4px}
.rsec{padding:12px 14px; border-radius:var(--radius); background:var(--chip)}
.rsec + .rsec{margin-top:4px}
.rsec h4{margin:0 0 6px; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700}
.rsec p{margin:6px 0 0; font-size:.95rem; line-height:1.5}
.rsec h4 + p, .rsec .rid:first-child, .rsec .badge + .rid{margin-top:0}
.rsec ul{margin:6px 0 0; padding-left:20px; font-size:.95rem; line-height:1.5}
.rsec li + li{margin-top:4px}
.rid{font-size:1.05rem}
.rid i{color:var(--muted); font-size:.92rem; margin-left:2px}
.rhealthy{color:var(--ok); font-weight:600}
.rdx + .rdx, .rtx + .rtx{margin-top:12px; padding-top:10px; border-top:1px dashed var(--line)}
.rdx p:first-child{margin-top:0}
.rtx .stitle{margin:0; font-weight:700}
.rchem{margin-top:10px; padding:8px 10px; border-radius:10px; background:var(--paper); border-left:3px solid var(--warn)}
.rchem p:first-child{margin-top:0}
.rsafety{color:var(--warn)}
.rnote{margin:6px 2px 0; font-size:.92rem; line-height:1.5}
.rtrust{margin:6px 2px 0}
.rtrust .conf{margin-top:4px}
.rtrust p.small{margin:6px 0 0}
.rbughead .badge.verdict{margin-bottom:8px; font-size:1rem; padding:6px 14px}
.badge.verdict{font-size:.82rem; padding:4px 10px}
.badge.verdict:not(.safe):not(.toxic){background:var(--paper); border:1px solid var(--line)}

/* The bug catalog */
.buglist{list-style:none; margin:8px 0 0; padding:0}
.buglist .checkline{width:100%; text-align:left; border:0; border-bottom:1px solid var(--line); background:transparent; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4px 12px; align-items:center; padding:10px 2px; min-height:56px}
.bugthumb{position:relative; width:52px; height:52px; border-radius:10px; overflow:hidden; background:var(--chip); display:grid; place-items:center}
.bugthumb svg{width:24px; height:24px; fill:none; stroke:var(--muted); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.bugthumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.bugthumb img:not([src]){visibility:hidden}
.bugname{display:grid; gap:2px; line-height:1.3; font-size:.98rem}
.bugname i{color:var(--muted); font-size:.85rem}
.bugname .small{font-size:.8rem}
.buggroup{padding-top:6px}
.buggroup > .linkbtn{margin-bottom:6px}
.buggroup > .stitle, .bugplants .stitle{margin:16px 0 6px; font-weight:700}
.bugplants .chips{margin-bottom:4px}
.bugplants .pill{min-height:44px; padding:4px 12px}
.checkbody .growson{font-size:.85rem; flex-wrap:nowrap}
.checkbody .growson select{flex:1; min-width:0; width:0}
.rsec, .rnote, .rtrust{overflow-wrap:anywhere}
.notes .stitle{margin:12px 0 0; font-weight:700; font-size:.9rem}

/* ---------- photo lightbox ---------- */
.lightbox{position:fixed; inset:0; z-index:20; background:rgba(0,0,0,.92); display:grid; grid-template-rows:auto 1fr auto; color:#fff}
.lightbox[hidden]{display:none}
.lbbar{display:flex; justify-content:space-between; align-items:center; padding:calc(env(safe-area-inset-top,0px) + 8px) 12px 8px; font-size:.9rem}
.lightbox img{max-width:100%; max-height:100%; object-fit:contain; margin:auto; display:block; min-height:0}
.lbimg{display:grid; min-height:0; padding:0 8px; background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27120%27 height=%2724%27%3E%3Ctext x=%2760%27 y=%2716%27 fill=%27%23999%27 font-family=%27sans-serif%27 font-size=%2714%27 text-anchor=%27middle%27%3ELoading photo…%3C/text%3E%3C/svg%3E") center no-repeat}
.lbnav{display:flex; justify-content:center; gap:16px; padding:10px 0 calc(env(safe-area-inset-bottom,0px) + 14px)}
.lightbox button{border:0; background:rgba(255,255,255,.16); color:#fff; border-radius:var(--radius-pill); min-width:44px; height:44px; padding:0 14px; font-size:1rem; font-weight:600}
[hidden]{display:none !important}