/* Planting Year. Copyright (c) 2026 AG Industry. All rights reserved. See LICENSE. */
/*
 * Planting Year styles. Warm & earthy: cream paper, deep sage, terracotta.
 * Every color is a token below. Dark mode only redefines tokens: it follows the device unless the visitor
 * picks Light or Dark (html[data-theme], set by js/ui.js and the one-line script in each page's <head>).
 */
/* Headings: Fraunces (SIL Open Font License, fonts/OFL.txt), bundled so it looks the same on every device, offline */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f5efe3;
  --surface: #fffaf1;
  --surface-2: #f9f2e6;
  --text: #2d2a24;
  --muted: #6b6356;
  --border: #e4d9c6;
  --border-strong: #d3c4ab;
  --accent: #4a6b4f;
  --accent-strong: #3b5a40;
  --accent-ink: #ffffff;
  --accent-soft: #e4ecdc;
  --header-bg: #3d5541;
  --header-text: #f6f0e2;
  --terra: #b95e39;
  --terra-soft: #f5e0d2;
  --indoor: #8a6fae;
  --plant: #5a8a4f;
  --harvest: #d99a3a;
  --today: #c0643e; --today-strong: #a14f2d;
  --frost: #7c9fbf;
  --track: #f1e8d8;
  --tl-band: #e8ddc8;
  --warn: #ac4520;
  --toxic: #8a5a00;
  --soil: #eadfca;
  --soil-line: #bba787;
  --soil-edge: #8a6a4a;
  --crop-s: 55%;
  --crop-l: 84%;
  --crop-l2: 70%;
  --crop-edge: 45%;
  --shadow: 0 1px 2px rgba(70, 50, 20, 0.05), 0 6px 20px rgba(70, 50, 20, 0.06);
  --shadow-lg: 0 10px 40px rgba(40, 30, 10, 0.22);
  /* Glass, kept subtle: a soft wash of garden light behind every page, frosted panels (.card, .glass, the tiles),
     and bars and menus that blur what's under them (.glass-bar) */
  --page-wash: radial-gradient(1100px 700px at 90% -10%, rgba(255, 210, 110, 0.45), transparent 70%),
    radial-gradient(1000px 760px at 0% 40%, rgba(130, 182, 110, 0.36), transparent 70%),
    radial-gradient(1100px 820px at 76% 108%, rgba(120, 172, 212, 0.34), transparent 70%);
  --glass-panel: rgba(255, 251, 244, 0.55);            /* .card and .glass, over a blur of the page */
  --glass-tile: rgba(255, 251, 244, 0.7);              /* tiles in long lists (no blur, so a bit more solid) */
  --glass-panel-edge: rgba(255, 255, 255, 0.8);
  --glass-panel-hi: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 1px rgba(150, 125, 90, 0.08);
  --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 40%);
  --glass-inner: rgba(255, 255, 255, 0.5);
  --glass-inner-edge: rgba(255, 255, 255, 0.85);
  --page-leaves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3Cg filter='url(%23b)'%3E%3Cg fill='%23f2c64f' fill-opacity='0.3'%3E%3Ccircle cx='1380' cy='140' r='90'/%3E%3Ccircle cx='620' cy='380' r='70'/%3E%3Ccircle cx='1050' cy='900' r='80'/%3E%3Ccircle cx='300' cy='620' r='60'/%3E%3C/g%3E%3Cg fill='%235f9a55' fill-opacity='0.3'%3E%3Cg transform='translate(1180 120) rotate(20) scale(2.2)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%235f9a55' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(1460 300) rotate(160) scale(2.6)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%235f9a55' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(1250 520) rotate(-35) scale(2.4)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%235f9a55' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(900 380) rotate(30) scale(2)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%235f9a55' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(620 520) rotate(-20) scale(2.3)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%235f9a55' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(400 760) rotate(15) scale(2.5)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%235f9a55' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(820 840) rotate(-55) scale(2.2)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%235f9a55' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(1100 760) rotate(40) scale(2)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%235f9a55' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(1450 900) rotate(-70) scale(2.6)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%235f9a55' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(260 420) rotate(-40) scale(2.1)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%235f9a55' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(700 250) rotate(70) scale(1.6)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%235f9a55' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(1000 600) rotate(170) scale(1.8)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%235f9a55' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(560 960) rotate(-10) scale(2)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%235f9a55' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(1350 680) rotate(110) scale(1.9)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%235f9a55' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --glass-bar: rgba(255, 250, 241, 0.8);
  /* The sidebar: a greenhouse window (soft sunlight, sky, and leaves) behind frosted glass */
  --side-bg: radial-gradient(150px 170px at 12% 12%, rgba(125, 185, 95, 0.5), transparent 70%),
    radial-gradient(160px 180px at 94% 28%, rgba(245, 205, 95, 0.55), transparent 70%),
    radial-gradient(180px 200px at 18% 50%, rgba(120, 175, 215, 0.38), transparent 70%),
    radial-gradient(170px 190px at 90% 70%, rgba(100, 160, 85, 0.45), transparent 70%),
    radial-gradient(160px 180px at 22% 90%, rgba(245, 205, 95, 0.4), transparent 70%), #efe9da;
  --side-leaves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='600' viewBox='0 0 240 600'%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='2.5'/%3E%3C/filter%3E%3Cg filter='url(%23b)'%3E%3Cg fill='%23f0c24e' fill-opacity='0.42'%3E%3Ccircle cx='196' cy='122' r='30'/%3E%3Ccircle cx='52' cy='252' r='22'/%3E%3Ccircle cx='172' cy='488' r='18'/%3E%3C/g%3E%3Cg fill='%235f9a55' fill-opacity='0.42'%3E%3Cg transform='translate(14 100) rotate(-25) scale(1.1)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%235f9a55' stroke-opacity='.5' stroke-width='2'/%3E%3C/g%3E%3Cg transform='translate(150 70) rotate(-150) scale(0.9)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%235f9a55' stroke-opacity='.5' stroke-width='2'/%3E%3C/g%3E%3Cg transform='translate(170 222) rotate(20) scale(1)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%235f9a55' stroke-opacity='.5' stroke-width='2'/%3E%3C/g%3E%3Cg transform='translate(8 342) rotate(-10) scale(1.2)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%235f9a55' stroke-opacity='.5' stroke-width='2'/%3E%3C/g%3E%3Cg transform='translate(120 412) rotate(-40) scale(1)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%235f9a55' stroke-opacity='.5' stroke-width='2'/%3E%3C/g%3E%3Cg transform='translate(40 556) rotate(-60) scale(1.1)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%235f9a55' stroke-opacity='.5' stroke-width='2'/%3E%3C/g%3E%3Cg transform='translate(210 302) rotate(200) scale(0.8)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%235f9a55' stroke-opacity='.5' stroke-width='2'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --side-leaves-o: 0.75;
  --glass-fill: rgba(255, 255, 255, 0.25);          /* Search and other controls on the glass */
  --glass-edge: rgba(255, 255, 255, 0.75);
  --glass-hover: rgba(255, 255, 255, 0.45);
  --glass-pane: rgba(255, 255, 255, 0.5);           /* the pane that glides to the row you point at */
  --glass-pane-edge: rgba(255, 255, 255, 0.85);
  --glass-pane-shadow: 0 6px 18px rgba(40, 80, 40, 0.18), inset 0 1px 0 #fff;
  /* The weather card: a sky for the weather now (js/weather.js picks it), frosted panes, and rain, snow, and stars */
  --sky-clear: linear-gradient(180deg, #9fcdf0 0%, #cde6f7 55%, #eef7fc 100%);
  --sky-partly: linear-gradient(180deg, #b9d8ef 0%, #d6e8f5 55%, #f0f6fb 100%);
  --sky-cloudy: linear-gradient(180deg, #c3ceda 0%, #d9e1e9 55%, #f0f3f6 100%);
  --sky-rain: linear-gradient(180deg, #b1bfcd 0%, #cbd5df 55%, #e8edf2 100%);
  --sky-snow: linear-gradient(180deg, #cfdbe7 0%, #e2e9f1 55%, #f6f8fb 100%);
  --sky-fog: linear-gradient(180deg, #cdd3d9 0%, #dde1e5 55%, #f1f2f4 100%);
  --sky-storm: linear-gradient(180deg, #3c4a5e 0%, #55667b 55%, #718197 100%);
  --sky-night: linear-gradient(180deg, #121c33 0%, #1d2c4d 55%, #2e4166 100%);
  --sky-sun: rgba(255, 232, 150, 0.95);
  --wx-cloud: rgba(255, 255, 255, 0.9);
  --wx-fog: rgba(255, 255, 255, 0.55);
  --wx-muted: #414b57;
  --wx-pane: rgba(255, 255, 255, 0.55);
  --wx-pane-strong: rgba(255, 255, 255, 0.75);
  --wx-pane-edge: rgba(255, 255, 255, 0.85);
  --wx-pane-shadow: 0 4px 14px rgba(30, 60, 90, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --rain-slate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M14 6l-3 13M46 30l-3 13M82 12l-3 13M104 50l-3 13M26 62l-3 13M62 82l-3 13M96 96l-3 13M10 98l-3 13M112 24l-3 13M70 44l-3 13M38 94l-3 13M88 70l-3 13' stroke='%234f6b89' stroke-opacity='0.45' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  --rain-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M14 6l-3 13M46 30l-3 13M82 12l-3 13M104 50l-3 13M26 62l-3 13M62 82l-3 13M96 96l-3 13M10 98l-3 13M112 24l-3 13M70 44l-3 13M38 94l-3 13M88 70l-3 13' stroke='%23ffffff' stroke-opacity='0.4' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  --snowflakes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23fff' stroke='%236f8aa6' stroke-opacity='.35' stroke-width='.8'%3E%3Ccircle cx='20' cy='30' r='2.2'/%3E%3Ccircle cx='70' cy='82' r='1.7'/%3E%3Ccircle cx='108' cy='22' r='2.6'/%3E%3Ccircle cx='48' cy='108' r='1.9'/%3E%3Ccircle cx='94' cy='58' r='2.1'/%3E%3Ccircle cx='12' cy='76' r='1.5'/%3E%3Ccircle cx='60' cy='14' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  --stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='12' cy='18' r='1' fill-opacity='1'/%3E%3Ccircle cx='58' cy='42' r='0.7' fill-opacity='0.8'/%3E%3Ccircle cx='96' cy='12' r='1.1' fill-opacity='1'/%3E%3Ccircle cx='130' cy='66' r='0.7' fill-opacity='0.7'/%3E%3Ccircle cx='30' cy='80' r='0.9' fill-opacity='0.8'/%3E%3Ccircle cx='150' cy='30' r='0.8' fill-opacity='0.9'/%3E%3Ccircle cx='84' cy='88' r='0.6' fill-opacity='0.6'/%3E%3Ccircle cx='118' cy='50' r='0.5' fill-opacity='0.7'/%3E%3C/g%3E%3C/svg%3E");
  --rain-streaks: var(--rain-slate);
  --radius: 14px;
  --radius-sm: 9px;
  --cell: 46px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  color-scheme: light;
}
/* Dark tokens, twice: once for "match my device", once for an explicit choice */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1d1b17; --surface: #27241f; --surface-2: #2d2a24; --text: #efe8da; --muted: #b3a893;
    --border: #3d382f; --border-strong: #4d473c; --accent: #9cc39f; --accent-strong: #b7d8b9; --accent-ink: #16201a;
    --accent-soft: #2e3a2f; --header-bg: #2b3a2d; --header-text: #efe8da; --terra: #e08a62; --terra-soft: #45302a;
    --indoor: #a992d0; --plant: #7fb574; --harvest: #e8b25a; --today: #ff8a5c; --today-strong: #ff8a5c; --frost: #7fa3c4; --track: #322e27; --tl-band: #3b362e;
    --warn: #ff9a70; --toxic: #f0c060; --soil: #3a3128; --soil-line: #5e4f3e; --soil-edge: #7a5f45;
    --crop-s: 32%; --crop-l: 30%; --crop-l2: 43%; --crop-edge: 55%;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.25); --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
    --page-wash: radial-gradient(1000px 640px at 88% -12%, rgba(255, 190, 90, 0.13), transparent 70%),
      radial-gradient(900px 640px at 6% 34%, rgba(100, 165, 100, 0.15), transparent 70%), radial-gradient(1000px 760px at 72% 104%, rgba(80, 130, 180, 0.15), transparent 70%);
    --glass-panel: rgba(39, 36, 31, 0.55); --glass-tile: rgba(39, 36, 31, 0.72); --glass-panel-edge: rgba(255, 255, 255, 0.1); --glass-panel-hi: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.2);
    --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 40%); --glass-inner: rgba(255, 255, 255, 0.045); --glass-inner-edge: rgba(255, 255, 255, 0.09); --glass-bar: rgba(39, 36, 31, 0.82);
    --page-leaves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3Cg filter='url(%23b)'%3E%3Cg fill='%23e0b04a' fill-opacity='0.08'%3E%3Ccircle cx='1380' cy='140' r='90'/%3E%3Ccircle cx='620' cy='380' r='70'/%3E%3Ccircle cx='1050' cy='900' r='80'/%3E%3Ccircle cx='300' cy='620' r='60'/%3E%3C/g%3E%3Cg fill='%237fbf74' fill-opacity='0.14'%3E%3Cg transform='translate(1180 120) rotate(20) scale(2.2)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%237fbf74' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(1460 300) rotate(160) scale(2.6)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%237fbf74' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(1250 520) rotate(-35) scale(2.4)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%237fbf74' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(900 380) rotate(30) scale(2)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%237fbf74' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(620 520) rotate(-20) scale(2.3)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%237fbf74' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(400 760) rotate(15) scale(2.5)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%237fbf74' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(820 840) rotate(-55) scale(2.2)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%237fbf74' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(1100 760) rotate(40) scale(2)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%237fbf74' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(1450 900) rotate(-70) scale(2.6)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%237fbf74' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(260 420) rotate(-40) scale(2.1)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%237fbf74' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(700 250) rotate(70) scale(1.6)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%237fbf74' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(1000 600) rotate(170) scale(1.8)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%237fbf74' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(560 960) rotate(-10) scale(2)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%237fbf74' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(1350 680) rotate(110) scale(1.9)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%237fbf74' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --side-bg: radial-gradient(150px 170px at 14% 14%, rgba(90, 150, 95, 0.42), transparent 70%),
      radial-gradient(160px 180px at 92% 32%, rgba(70, 120, 150, 0.32), transparent 70%),
      radial-gradient(180px 200px at 20% 56%, rgba(200, 160, 70, 0.18), transparent 70%),
      radial-gradient(170px 190px at 88% 76%, rgba(80, 140, 80, 0.36), transparent 70%),
      radial-gradient(160px 180px at 24% 94%, rgba(70, 120, 150, 0.25), transparent 70%), #161c17;
    --side-leaves-o: 0.35;
    --glass-fill: rgba(255, 255, 255, 0.05); --glass-edge: rgba(255, 255, 255, 0.16); --glass-hover: rgba(255, 255, 255, 0.1);
    --glass-pane: rgba(255, 255, 255, 0.1); --glass-pane-edge: rgba(255, 255, 255, 0.2); --glass-pane-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    --sky-clear: linear-gradient(180deg, #1d3553 0%, #28476b 55%, #325a82 100%); --sky-partly: linear-gradient(180deg, #1f3450 0%, #2b4563 55%, #36557a 100%);
    --sky-cloudy: linear-gradient(180deg, #232b35 0%, #2f3945 55%, #3b4755 100%); --sky-rain: linear-gradient(180deg, #1c242e 0%, #27313d 55%, #333f4d 100%);
    --sky-snow: linear-gradient(180deg, #26303c 0%, #33404e 55%, #415061 100%); --sky-fog: linear-gradient(180deg, #262a2e 0%, #33383d 55%, #40464c 100%);
    --sky-storm: linear-gradient(180deg, #14191f 0%, #1f2630 55%, #2b3440 100%); --sky-night: linear-gradient(180deg, #0b1220 0%, #131d33 55%, #1c2a47 100%);
    --sky-sun: rgba(255, 214, 120, 0.3); --wx-cloud: rgba(200, 212, 228, 0.14); --wx-fog: rgba(255, 255, 255, 0.1); --wx-muted: #b9c6d6;
    --wx-pane: rgba(255, 255, 255, 0.07); --wx-pane-strong: rgba(255, 255, 255, 0.12); --wx-pane-edge: rgba(255, 255, 255, 0.16);
    --wx-pane-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); --rain-streaks: var(--rain-white);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1d1b17; --surface: #27241f; --surface-2: #2d2a24; --text: #efe8da; --muted: #b3a893;
  --border: #3d382f; --border-strong: #4d473c; --accent: #9cc39f; --accent-strong: #b7d8b9; --accent-ink: #16201a;
  --accent-soft: #2e3a2f; --header-bg: #2b3a2d; --header-text: #efe8da; --terra: #e08a62; --terra-soft: #45302a;
  --indoor: #a992d0; --plant: #7fb574; --harvest: #e8b25a; --today: #ff8a5c; --today-strong: #ff8a5c; --frost: #7fa3c4; --track: #322e27; --tl-band: #3b362e;
  --warn: #ff9a70; --toxic: #f0c060; --soil: #3a3128; --soil-line: #5e4f3e; --soil-edge: #7a5f45;
  --crop-s: 32%; --crop-l: 30%; --crop-l2: 43%; --crop-edge: 55%;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.25); --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
  --page-wash: radial-gradient(1000px 640px at 88% -12%, rgba(255, 190, 90, 0.13), transparent 70%),
    radial-gradient(900px 640px at 6% 34%, rgba(100, 165, 100, 0.15), transparent 70%), radial-gradient(1000px 760px at 72% 104%, rgba(80, 130, 180, 0.15), transparent 70%);
  --glass-panel: rgba(39, 36, 31, 0.55); --glass-tile: rgba(39, 36, 31, 0.72); --glass-panel-edge: rgba(255, 255, 255, 0.1); --glass-panel-hi: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.2);
  --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 40%); --glass-inner: rgba(255, 255, 255, 0.045); --glass-inner-edge: rgba(255, 255, 255, 0.09); --glass-bar: rgba(39, 36, 31, 0.82);
  --page-leaves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3Cg filter='url(%23b)'%3E%3Cg fill='%23e0b04a' fill-opacity='0.08'%3E%3Ccircle cx='1380' cy='140' r='90'/%3E%3Ccircle cx='620' cy='380' r='70'/%3E%3Ccircle cx='1050' cy='900' r='80'/%3E%3Ccircle cx='300' cy='620' r='60'/%3E%3C/g%3E%3Cg fill='%237fbf74' fill-opacity='0.14'%3E%3Cg transform='translate(1180 120) rotate(20) scale(2.2)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%237fbf74' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(1460 300) rotate(160) scale(2.6)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%237fbf74' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(1250 520) rotate(-35) scale(2.4)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%237fbf74' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(900 380) rotate(30) scale(2)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%237fbf74' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(620 520) rotate(-20) scale(2.3)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%237fbf74' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(400 760) rotate(15) scale(2.5)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%237fbf74' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(820 840) rotate(-55) scale(2.2)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%237fbf74' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(1100 760) rotate(40) scale(2)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%237fbf74' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(1450 900) rotate(-70) scale(2.6)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%237fbf74' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(260 420) rotate(-40) scale(2.1)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%237fbf74' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(700 250) rotate(70) scale(1.6)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%237fbf74' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(1000 600) rotate(170) scale(1.8)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%237fbf74' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(560 960) rotate(-10) scale(2)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%237fbf74' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(1350 680) rotate(110) scale(1.9)'%3E%3Cpath d='M0 0C12-28 38-42 72-40 60-12 32 4 0 0z'/%3E%3Cpath d='M2-1C24-14 44-26 70-39' fill='none' stroke='%237fbf74' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --side-bg: radial-gradient(150px 170px at 14% 14%, rgba(90, 150, 95, 0.42), transparent 70%),
    radial-gradient(160px 180px at 92% 32%, rgba(70, 120, 150, 0.32), transparent 70%),
    radial-gradient(180px 200px at 20% 56%, rgba(200, 160, 70, 0.18), transparent 70%),
    radial-gradient(170px 190px at 88% 76%, rgba(80, 140, 80, 0.36), transparent 70%),
    radial-gradient(160px 180px at 24% 94%, rgba(70, 120, 150, 0.25), transparent 70%), #161c17;
  --side-leaves-o: 0.35;
  --glass-fill: rgba(255, 255, 255, 0.05); --glass-edge: rgba(255, 255, 255, 0.16); --glass-hover: rgba(255, 255, 255, 0.1);
  --glass-pane: rgba(255, 255, 255, 0.1); --glass-pane-edge: rgba(255, 255, 255, 0.2); --glass-pane-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --sky-clear: linear-gradient(180deg, #1d3553 0%, #28476b 55%, #325a82 100%); --sky-partly: linear-gradient(180deg, #1f3450 0%, #2b4563 55%, #36557a 100%);
  --sky-cloudy: linear-gradient(180deg, #232b35 0%, #2f3945 55%, #3b4755 100%); --sky-rain: linear-gradient(180deg, #1c242e 0%, #27313d 55%, #333f4d 100%);
  --sky-snow: linear-gradient(180deg, #26303c 0%, #33404e 55%, #415061 100%); --sky-fog: linear-gradient(180deg, #262a2e 0%, #33383d 55%, #40464c 100%);
  --sky-storm: linear-gradient(180deg, #14191f 0%, #1f2630 55%, #2b3440 100%); --sky-night: linear-gradient(180deg, #0b1220 0%, #131d33 55%, #1c2a47 100%);
  --sky-sun: rgba(255, 214, 120, 0.3); --wx-cloud: rgba(200, 212, 228, 0.14); --wx-fog: rgba(255, 255, 255, 0.1); --wx-muted: #b9c6d6;
  --wx-pane: rgba(255, 255, 255, 0.07); --wx-pane-strong: rgba(255, 255, 255, 0.12); --wx-pane-edge: rgba(255, 255, 255, 0.16);
  --wx-pane-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); --rain-streaks: var(--rain-white);
  color-scheme: dark;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 60; padding: 8px 14px; border-radius: 8px;
  background: var(--surface); color: var(--accent); font-weight: 600; text-decoration: none; box-shadow: var(--shadow);
}
.skip-link:focus { top: 12px; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.nowrap { white-space: nowrap; }
.spacer { flex: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { line-height: 1.2; }
h2, h3, .logo, .empty-title, .stat strong, .today-date { font-family: var(--font-head); }
h2 { font-size: 1.3rem; font-weight: 600; margin: 0 0 12px; letter-spacing: -0.01em; }
a { color: var(--accent); }
a:hover { color: var(--accent-strong); }
code { background: var(--track); padding: 0 4px; border-radius: 4px; font-size: 0.85em; }
.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.h-icon { color: var(--accent); margin-right: 6px; }

/* ---------- Header ---------- */
.site-header { background: var(--header-bg); color: var(--header-text); margin-bottom: 20px; }
.header-row { display: flex; align-items: center; gap: 12px 20px; min-height: 60px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.logo { margin: 0; font-size: 1.45rem; font-weight: 600; letter-spacing: -0.3px; white-space: nowrap; }
.logo a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0; }
/* The logo: the wooden banner (tree, name, and tagline) from icons/source/, sized by tools/build-icons.js; just the round tree on phones */
.logo picture { display: block; }
.logo-img { display: block; height: 44px; width: auto; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)); }

.site-nav { display: flex; gap: 4px; flex: 1; justify-content: center; }
.site-nav a {
  display: inline-flex; align-items: center; gap: 7px; color: var(--header-text); text-decoration: none;
  padding: 7px 14px; border-radius: 999px; font-weight: 600; font-size: 0.92rem; opacity: 0.85;
}
.site-nav a:hover { background: rgba(255, 255, 255, 0.1); opacity: 1; color: var(--header-text); }
.site-nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.16); opacity: 1; }
.header-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.theme-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0;
  border-radius: 50%; background: transparent; color: var(--header-text); border: 1px solid rgba(255, 255, 255, 0.25);
}
.theme-btn .icon { width: 18px; height: 18px; }
.theme-btn:hover { background: rgba(255, 255, 255, 0.1); }
/* Narrow phones: keep the header on one line without widening the page; the logo alone stands for the name
   (the link keeps it: aria-label) */
@media (max-width: 480px) {
  .header-row { gap: 8px; }
  .logo { min-width: 0; }
}
/* Most phones: no room beside the buttons and the temperature, so just the round logo */
@media (max-width: 430px) {
  .logo-img { width: 36px; height: 36px; }   /* the round logo (the <picture> swaps it in) */
  .header-tools { gap: 6px; }
}

/* Page heading on the plot builder and log */
.page-head { margin: 4px 0 18px; }
.page-head h2 { font-size: 1.7rem; margin: 0 0 2px; }
.page-head p { margin: 0; }

/* Phones: the page links become a tab bar at the bottom of the screen */
@media (max-width: 640px) {
  .site-header { margin-bottom: 14px; }
  .header-row { min-height: 52px; flex-wrap: nowrap; }
  .logo { font-size: 1.2rem; }
  .logo-img { height: 38px; }
  .site-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; gap: 0;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--glass-bar); border-top: 1px solid var(--glass-panel-edge); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
    -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .site-nav a {
    flex-direction: column; gap: 2px; padding: 6px 4px; border-radius: 10px; color: var(--muted);
    font-size: 0.72rem; opacity: 1;
  }
  .site-nav a .icon { width: 24px; height: 24px; }
  .site-nav a:hover { background: transparent; color: var(--text); }
  .site-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .page-head h2 { font-size: 1.4rem; }
}

/* ---------- Cards, and the site's glass ----------
   Every page sits on soft garden light and big, soft leaves (fixed, so they drift behind the cards as you scroll).
   A panel is frosted glass: use .card for a section, or .glass for any other panel or box. A bar or menu that content
   scrolls under or pops over uses .glass-bar. Tiles in long lists use --glass-tile (no blur, to stay quick). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--page-leaves) center / cover no-repeat, var(--page-wash);
}
.card {
  position: relative; background: var(--glass-sheen), var(--glass-panel); border: 1px solid var(--glass-panel-edge); border-radius: var(--radius);
  padding: 20px; margin-bottom: 18px; box-shadow: var(--shadow), var(--glass-panel-hi);
}
@media (max-width: 600px) { .card { padding: 16px; border-radius: 12px; } }
.glass { position: relative; background: var(--glass-sheen), var(--glass-panel); border: 1px solid var(--glass-panel-edge); border-radius: var(--radius); box-shadow: var(--shadow), var(--glass-panel-hi); }
/* The frost: a blur of the page behind the panel, on a layer of its own under it. (On the panel itself, a blur would trap
   its pop-up menus under the next card.) The weather card has its own sky. */
.card:not(.wx-sky)::before, .glass::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
  -webkit-backdrop-filter: blur(7px) saturate(1.4); backdrop-filter: blur(7px) saturate(1.4);
}
.glass-bar { background: var(--glass-bar); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.card-head h2 { margin-bottom: 2px; }
.card-head p { margin: 0; }
.small-head { font-size: 1rem; margin: 18px 0 8px; }
.eyebrow { margin: 0 0 2px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terra); }

/* ---------- Form controls ---------- */
input, select, button, textarea { font: inherit; }
/* What you type is plain text, even inside a bold label */
input, select, textarea { font-weight: 400; }
input[type="text"], input[type="search"], input[type="date"], input[type="time"], input[type="number"], select, textarea {
  padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); transition: border-color 0.15s, box-shadow 0.15s;
}
input[type="text"]:focus, input[type="search"]:focus, input[type="date"]:focus, input[type="time"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none;
}
/* Phones zoom the page in on any field smaller than 16px, so fields are at least that big there */
@media (max-width: 640px) {
  input[type="text"], input[type="search"], input[type="date"], input[type="time"], input[type="number"], select, textarea { font-size: max(16px, 1em); }
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px; border: 1px solid transparent; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-weight: 600; cursor: pointer;
  transition: background-color 0.15s, filter 0.15s;
}
button:hover { filter: brightness(1.07); }
button:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }
button.secondary, .button-link {
  background: var(--surface); color: var(--accent); border: 1px solid var(--border-strong); margin-top: 16px;
}
button.secondary:hover, .button-link:hover { background: var(--accent-soft); filter: none; }
button.danger { background: transparent; color: var(--warn); border: 1px solid var(--border-strong); }
.button-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 999px;
  text-decoration: none; font-weight: 600; margin: 0;
}
.button-link.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.button-link.primary:hover { background: var(--accent); filter: brightness(1.07); color: var(--accent-ink); }
.icon-btn {
  background: transparent; color: var(--muted); border: 1px solid var(--border); padding: 3px 10px;
  font-size: 0.8rem; font-weight: 500; margin-left: auto;
}
.icon-btn:hover { color: var(--text); background: var(--track); filter: none; }
.small-btn { padding: 6px 14px; font-size: 0.85rem; margin-top: 8px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 600; text-decoration: underline; border-radius: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input.tiny { width: 70px; padding: 5px 8px; }
input.short { width: 110px; padding: 5px 8px; }

.status { margin: 10px 0 0; min-height: 1.5em; }
.status:empty { min-height: 0; margin: 0; }
.status.error, .parse-hint.error { color: var(--warn); }
.warn { color: var(--warn); }
.note { color: var(--accent); }

/* Segmented buttons (tool, scope, calendar views) */
.tabs { display: inline-flex; padding: 3px; gap: 2px; background: var(--track); border-radius: 999px; }
.tab {
  background: transparent; color: var(--muted); border-radius: 999px; font-weight: 600; padding: 7px 14px;
  border: 0;
}
.tab:hover { color: var(--text); filter: none; }
.tab[aria-selected="true"], .tab[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), var(--glass-panel-hi); }
.tab:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- Pills, tags, legend ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 700;
  padding: 2px 9px; border-radius: 999px; color: #fff; letter-spacing: 0.01em;
}
.pill .icon { width: 12px; height: 12px; }
.pill.indoor { background: var(--indoor); }
.pill.plant { background: var(--plant); }
.pill.care { background: var(--frost); color: #0f1a2a; }
.pill.harvest { background: var(--harvest); color: #2a1a00; }
/* Small marks that show a tip (js/ui.js): not the usual big pill buttons */
.tip-btn {
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; line-height: 1; gap: 0;
  cursor: help; transition: none;
}
.tip-btn:hover { filter: none; }
.tip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.tag { font-size: 0.7rem; color: var(--muted); border: 1px solid var(--border-strong); border-radius: 999px; padding: 0 7px; }
.tag-inedible { color: var(--warn); border-color: var(--warn); font-weight: 600; white-space: nowrap; }
.tag-legal { color: var(--muted); border-color: var(--border-strong); font-weight: 600; white-space: nowrap; }
.tag-toxic { color: var(--toxic); border-color: var(--toxic); font-weight: 600; white-space: nowrap; }
.count {
  display: inline-block; min-width: 22px; padding: 0 7px; margin-left: 4px; border-radius: 999px;
  background: var(--track); color: var(--muted); font-size: 0.8rem; text-align: center; font-family: var(--font);
}
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 0.82rem; color: var(--muted); margin-bottom: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 14px; height: 10px; border-radius: 3px; }
.sw.indoor { background: var(--indoor); }
.sw.plant { background: var(--plant); }
.sw.harvest { background: var(--harvest); }
.sw.today { width: 3px; height: 14px; background: var(--today); border-radius: 0; }
.sw.harvest.est { background: repeating-linear-gradient(135deg, var(--harvest) 0 3px, transparent 3px 5px); border: 1px solid var(--harvest); }
.sw.logged { background: var(--harvest); box-shadow: 0 0 0 1.5px var(--text); }
/* The tip itself: dark on light (light on dark in the dark theme), with an arrow to its mark */
.gm-tip {
  position: fixed; z-index: 1000; max-width: min(300px, calc(100vw - 16px)); padding: 8px 11px; border-radius: 10px;
  background: var(--text); color: var(--surface); font-size: 0.82rem; line-height: 1.4; font-weight: 500;
  box-shadow: var(--shadow-lg); pointer-events: none;
}
.gm-tip::after {
  content: ''; position: absolute; left: var(--tip-arrow, 50%); bottom: -5px; width: 10px; height: 10px; margin-left: -5px;
  background: inherit; transform: rotate(45deg); border-radius: 2px;
}
.gm-tip.below::after { bottom: auto; top: -5px; }
.warn-dot, .info-dot {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%;
  font-size: 0.7rem; font-weight: 700; cursor: help; flex: none;
}
.warn-dot { background: var(--warn); color: #fff; }
.info-dot { background: var(--frost); color: #0f1a2a; font-style: italic; }
.notice, .protection-note {
  margin: 8px 0 0; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--surface-2);
  border: 1px solid var(--border); border-left: 3px solid var(--frost); font-size: 0.9rem;
}
.protection-note { margin: -4px 0 12px; }

/* ---------- Left sidebar ---------- */
:root { --side-w: 236px; --side-w-slim: 64px; }
/* The top bar (time and weather) and Search stay put; only the list of pages scrolls when the window is short.
   Behind it all, a greenhouse window: soft sunlight, sky, and leaves, with a frosted glass pane that glides to the row you point at. */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 45; width: var(--side-w); display: flex; flex-direction: column; gap: 2px;
  padding: 0 10px 12px; overflow: hidden; isolation: isolate; background: var(--side-bg); border-right: 1px solid var(--border);
}
/* The leaves, on their own layer behind the buttons: a 240px tile that repeats, so they stay the same size when the
   sidebar is slim or a wider drawer */
.sidebar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--side-leaves) 0 0 / 240px auto repeat; opacity: var(--side-leaves-o);
}
.side-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 60px; flex: none;
  margin: 0 -10px 10px; padding: 0 8px 0 18px; background: var(--header-bg); color: var(--header-text);
}
.side-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; }
.side-toggle {
  width: 34px; height: 34px; padding: 0; margin: 0; border-radius: 50%; background: transparent; color: var(--header-text);
  border: 1px solid rgba(255, 255, 255, 0.25); font-size: 1.05rem;
}
.side-toggle:hover { background: rgba(255, 255, 255, 0.1); filter: none; }
.side-top :focus-visible { outline-color: var(--header-text); }
/* The time and weather at your ZIP, in place of "Menu": "12:00 PM EDT" and the temperature, over "Wed, Sep 30 · Cleveland" */
.side-now { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 6px; align-items: center; line-height: 1.3; }
.side-now:empty { display: none; }
.side-now:not(:empty) + .side-title { display: none; }
.side-clock { display: contents; cursor: default; }
.side-time { grid-column: 1; grid-row: 1; font-size: 0.95rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-zone { font-size: 0.72rem; font-weight: 600; opacity: 0.8; }
.side-clock-date { grid-column: 1 / -1; grid-row: 2; font-size: 0.76rem; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The temperature is a button (a glass pill) that opens the 7-day forecast */
.side-weather {
  grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px 1px 6px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.12); color: inherit;
  font-size: 0.9rem; font-weight: 700; line-height: 1.3; text-decoration: none; white-space: nowrap;
}
.side-weather:hover { background: rgba(255, 255, 255, 0.24); border-color: rgba(255, 255, 255, 0.5); color: inherit; }
.side-wx-icon { font-size: 0.9rem; }
/* The menu's Weather row, with the temperature on the right */
.side-wx-temp { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; font-size: 0.85rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.side-wx-temp:empty, body.sidebar-collapsed .side-wx-temp { display: none; }
/* The temperature in the header, whenever the sidebar's top bar isn't showing it (behind ☰, or slim) */
.hdr-wx {
  display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 11px 0 9px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25); color: var(--header-text); font-size: 0.9rem; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.hdr-wx:hover { background: rgba(255, 255, 255, 0.1); color: var(--header-text); }
.hdr-wx[hidden], body.sidebar-docked:not(.sidebar-collapsed) .hdr-wx { display: none; }
/* Narrow phones: just the temperature */
@media (max-width: 380px) {
  .hdr-wx { padding: 0 9px; }
  .hdr-wx .side-wx-icon { display: none; }
}
/* A weather alert, on its own line under the bar only when there is one */
.side-link.side-alert { margin-bottom: 6px; background: var(--terra-soft); color: var(--terra); font-size: 0.88rem; }
.side-link.side-alert .icon { color: var(--terra); }
.side-link.side-alert:hover { background: var(--terra-soft); color: var(--terra); text-decoration: underline; }
body.sidebar-collapsed .side-now { display: none; }
body.sidebar-collapsed .side-alert { margin-bottom: 4px; }
/* 4px of padding (and a matching negative margin) so focus rings aren't cut off at the edges of the scrolling list */
.side-list {
  position: relative; list-style: none; margin: -4px -4px 0; padding: 4px; display: grid; align-content: start; gap: 2px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
body.sidebar-collapsed .side-list { scrollbar-width: none; }
/* The list fades out at an edge with more pages past it (js/ui.js sets these while it scrolls) */
.side-list.more-below { -webkit-mask-image: linear-gradient(to top, transparent, #000 28px); mask-image: linear-gradient(to top, transparent, #000 28px); }
.side-list.more-above { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28px); mask-image: linear-gradient(to bottom, transparent, #000 28px); }
.side-list.more-above.more-below {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
/* The frosted pane that glides to the row you point at (or tab to) and rests on where you are; js/ui.js moves it */
.side-glider {
  position: absolute; z-index: 0; top: 0; left: 0; width: 0; height: 0; opacity: 0; pointer-events: none; list-style: none;
  border-radius: 10px; border: 1px solid var(--glass-pane-edge); background: var(--glass-pane); box-shadow: var(--glass-pane-shadow);
  -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  transition: transform 0.32s cubic-bezier(0.3, 1.25, 0.5, 1), width 0.25s, height 0.32s cubic-bezier(0.3, 1.25, 0.5, 1), opacity 0.2s;
}
.side-glider.on { opacity: 1; }
.side-list .side-link, .side-list .side-sub, .side-list .side-fold { position: relative; z-index: 1; }
@media (forced-colors: active) {
  .side-glider { display: none; }
  .side-list [aria-current] { outline: 2px solid CanvasText; outline-offset: -2px; }
}
/* A window too short for that (a phone on its side): the whole sidebar scrolls instead */
@media (max-height: 460px) {
  .sidebar { overflow-y: auto; }
  .side-list { flex: none; overflow: visible; }
}
.side-link {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 7px 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text); font-weight: 600; font-size: 0.95rem; text-decoration: none; text-align: left;
}
.side-link .icon { width: 20px; height: 20px; color: var(--accent); }
.side-link:hover { color: var(--text); filter: none; }
/* Where you are: the glass pane rests on it; the text turns green too. A page with sections shows it on its own row while
   they're folded, and on the current section while they're open. */
.side-page.here > .side-link, .side-page.here > .side-row:has(.side-fold[aria-expanded="false"]) > .side-link { color: var(--accent-strong); }
.side-search { margin-bottom: 6px; border: 1px solid var(--glass-edge); background: var(--glass-fill); color: var(--muted); font-weight: 500; }
.side-search:hover { background: var(--glass-hover); }
.side-search .icon { color: var(--muted); }
.side-kbd { margin-left: auto; }
.side-row { display: flex; align-items: center; gap: 2px; }
.side-row .side-link { flex: 1; min-width: 0; }
.side-fold {
  flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; margin: 0; padding: 0;
  background: transparent; color: var(--muted); border: 0; border-radius: 8px;
}
.side-fold:hover { background: var(--glass-hover); color: var(--text); filter: none; }
.side-fold .icon { width: 16px; height: 16px; transition: transform 0.15s; }
.side-fold[aria-expanded="false"] .icon { transform: rotate(-90deg); }
.side-sections[hidden] { display: none; }
.side-badge {
  margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--terra); color: #fff;
  font-size: 0.72rem; font-weight: 700; line-height: 1.6; text-align: center; flex: none;
}
.side-badge-total { display: none; }
.side-row:has(.side-fold[aria-expanded="false"]) .side-badge-total { display: inline-block; }
body.sidebar-collapsed .side-link { position: relative; }
body.sidebar-collapsed .side-badge-total { display: inline-block; position: absolute; top: 2px; right: 2px; min-width: 16px; padding: 0 4px; font-size: 0.62rem; }

/* Quick add (+ in the header) */
.quick-add { position: relative; }
/* Settings (⚙): units, theme, location, backup */
.settings { position: relative; }
.settings-btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.16); }
.settings-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; width: min(340px, calc(100vw - 24px)); padding: 8px 8px 10px;
  background: var(--glass-bar); color: var(--text); border: 1px solid var(--glass-panel-edge); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg), var(--glass-panel-hi);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
}
.settings-panel[hidden] { display: none; }
.set-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; flex-wrap: wrap; }
.set-label { font-size: 0.85rem; font-weight: 600; min-width: 64px; }
.set-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; margin-left: auto; }
.set-seg button {
  display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 5px 10px; border: 0; border-radius: 0;
  background: transparent; color: var(--text); font-size: 0.82rem; font-weight: 600;
}
.set-seg button + button { border-left: 1px solid var(--border); }
.set-seg button:hover { background: var(--track); filter: none; }
.set-seg button[aria-pressed="true"] { background: var(--accent); color: var(--surface); }
.set-seg .icon { width: 14px; height: 14px; }
.set-place-text { font-size: 0.85rem; color: var(--muted); flex: 1; min-width: 0; }
.set-actions { display: grid; gap: 2px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.set-actions .menu-item { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 0.92rem; }
.set-note { margin: 8px 10px 0; }
.settings-panel .status { margin: 4px 10px 0; }
.settings-panel .status:empty { display: none; }
.quick-add-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 220px; padding: 6px;
  background: var(--glass-bar); border: 1px solid var(--glass-panel-edge); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg), var(--glass-panel-hi);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
}
.quick-add-menu[hidden] { display: none; }
.quick-add-title { margin: 4px 10px 6px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.quick-add-menu button {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; margin: 0; padding: 9px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); font-weight: 500; text-align: left;
}
.quick-add-menu button:hover, .quick-add-menu button:focus-visible { background: var(--accent-soft); filter: none; }
.quick-add-menu .icon { width: 18px; height: 18px; color: var(--accent); }
.side-sections { list-style: none; margin: 2px 0 6px 21px; padding: 0 0 0 10px; border-left: 2px solid var(--glass-edge); display: grid; gap: 1px; }
.side-sub {
  display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; color: var(--text); font-size: 0.88rem; font-weight: 500; text-decoration: none;
}
.side-sub[aria-current="location"] { color: var(--accent-strong); font-weight: 700; }
.side-page.here .side-sections { border-left-color: var(--accent); }
.menu-btn {
  display: none; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; margin: 0; border-radius: 10px;
  background: transparent; color: var(--header-text); border: 1px solid rgba(255, 255, 255, 0.25); font-size: 1.2rem;
}
.menu-btn:hover { background: rgba(255, 255, 255, 0.1); filter: none; }
.side-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(20, 15, 5, 0.45); }

/* Wide screens: always there, next to the page; the header links live here instead */
body.sidebar-docked { padding-left: var(--side-w); }
body.sidebar-docked .site-nav { display: none; }
body.sidebar-collapsed { padding-left: var(--side-w-slim); }
body.sidebar-collapsed .sidebar { width: var(--side-w-slim); padding: 0 8px 12px; }
body.sidebar-collapsed .side-top { justify-content: center; padding: 0; margin: 0 -8px 10px; }
body.sidebar-collapsed .side-title, body.sidebar-collapsed .side-sections, body.sidebar-collapsed .side-kbd, body.sidebar-collapsed .side-fold { display: none; }
body.sidebar-collapsed .side-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.sidebar-collapsed .side-link { justify-content: center; padding: 8px 0; }

/* Narrower screens: ☰ slides it in over the page */
body.has-sidebar:not(.sidebar-docked) .menu-btn { display: inline-flex; }
body.has-sidebar:not(.sidebar-docked) .sidebar {
  z-index: 60; width: min(300px, 86vw); transform: translateX(-105%); transition: transform 0.2s ease; box-shadow: var(--shadow-lg);
}
body.has-sidebar:not(.sidebar-docked) .sidebar.open { transform: none; }
@media (min-width: 641px) { body.has-sidebar .site-nav { display: none; } }
@media (max-width: 640px) { .menu-btn { width: 34px; height: 34px; } }

/* ---------- Search, shortcuts, back to top ---------- */
.jump-dialog { width: min(640px, calc(100vw - 24px)); margin-top: 10vh; }
.jump-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.jump-head .icon { width: 20px; height: 20px; color: var(--muted); }
.jump-head input { flex: 1; min-width: 0; border: 0; box-shadow: none; font-size: 1.05rem; padding: 6px 0; background: transparent; }
.jump-head input:focus { box-shadow: none; }
.jump-head .icon-btn { margin: 0; }
.jump-results { list-style: none; margin: 0; padding: 6px; max-height: min(60vh, 480px); overflow-y: auto; }
.jump-item { border-radius: 10px; padding: 2px; }
.jump-item > a:first-child { display: grid; gap: 1px; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none; }
.jump-item.active, .jump-item:hover { background: var(--accent-soft); }
.jump-links { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 0 10px 8px; font-size: 0.82rem; }
.jump-links a { font-weight: 600; }
.jump-item strong::before { font-family: var(--font); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  margin-right: 8px; padding: 1px 6px; border-radius: 999px; background: var(--track); color: var(--muted); vertical-align: 1px; }
.kind-page strong::before { content: "Page"; }
.kind-crop strong::before { content: "Crop"; }
.kind-plot strong::before { content: "Plot"; }
.kind-planting strong::before { content: "Planted"; }
.kind-guide strong::before { content: "How-to"; }
.kind-tip strong::before { content: "Tip"; }
.jump-none { padding: 14px; }
.jump-foot { margin: 0; padding: 10px 16px; border-top: 1px solid var(--border); }
.keys-dialog { width: min(520px, calc(100vw - 24px)); }
.keys-title { margin: 0; font-family: var(--font-head); font-size: 1.3rem; font-weight: 600; }
.keys-body { overflow-y: auto; padding: 8px 22px 12px; }
.keys-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.keys-table th { text-align: left; padding: 12px 0 4px; font-family: var(--font-head); font-size: 1rem; }
.keys-table td { padding: 4px 0; border-bottom: 1px solid var(--border); }
.keys-table td:first-child { white-space: nowrap; padding-right: 16px; width: 40%; }
kbd {
  display: inline-block; min-width: 1.6em; padding: 1px 6px; border-radius: 6px; text-align: center; font-family: var(--font);
  font-size: 0.8rem; font-weight: 700; background: var(--surface-2); border: 1px solid var(--border-strong); box-shadow: 0 1px 0 var(--border-strong);
}
.back-to-top {
  position: fixed; right: 18px; bottom: 22px; z-index: 30; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  background: var(--surface); color: var(--accent); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); font-size: 1.2rem;
}
.back-to-top:hover { background: var(--accent-soft); filter: none; }
@media (max-width: 640px) {
  .back-to-top { right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); }
  .plots-page .back-to-top { bottom: calc(200px + env(safe-area-inset-bottom)); }
  .jump-dialog { margin-top: 4vh; }
}

/* ---------- Empty states ---------- */
.empty-state { display: flex; align-items: center; gap: 18px; padding: 10px 4px; list-style: none; }
.empty-state .art { width: 110px; height: 88px; flex: none; }
.empty-title { margin: 0 0 2px; font-size: 1.08rem; font-weight: 600; }
.empty-body p { margin: 0 0 2px; }
.empty-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.empty-actions button, .empty-actions .button-link { margin: 0; }
@media (max-width: 480px) { .empty-state { flex-direction: column; text-align: center; } .empty-actions { justify-content: center; } }
.art { overflow: visible; }
.art-ground { fill: var(--track); }
.art-pot, .art-pot-rim { fill: var(--terra); }
.art-pot-rim { filter: brightness(0.92); }
.art-soil { fill: var(--soil); }
.art-grid, .art-weave { stroke: var(--soil-line); stroke-width: 1.5; fill: none; }
.art-weave { stroke: rgba(0, 0, 0, 0.18); stroke-width: 2; }
.art-stem { stroke: var(--plant); stroke-width: 3; stroke-linecap: round; fill: none; }
.art-leaf { fill: var(--plant); }
.art-leaf2 { fill: var(--accent); }
.art-fruit { fill: var(--today); }
.art-fruit2 { fill: var(--harvest); }
.art-packet { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 2; }
.art-sun { fill: var(--harvest); }
.art-hill { fill: var(--accent); }
.art-hill2 { fill: var(--accent-soft); }
.empty, .empty-log { padding: 12px 0; }

/* ---------- Calendar page: welcome, ZIP hero, location bar ---------- */
.hero { display: grid; grid-template-columns: 1fr 200px; gap: 12px 24px; align-items: center; padding: 26px 28px; }
.hero h2 { font-size: 1.7rem; margin-bottom: 6px; }
.hero .art { width: 200px; height: 160px; }
.hero-intro { margin: 0 0 16px; color: var(--muted); max-width: 520px; }
.lookup label { display: block; font-weight: 600; margin-bottom: 6px; }
.lookup-row { display: flex; gap: 10px; flex-wrap: wrap; }
.lookup-row input { flex: 1 1 160px; max-width: 220px; font-size: 1.15rem; letter-spacing: 2px; }
.lookup-row button { margin: 0; }
.lookup.compact { display: block; padding: 16px 20px; }
.lookup.compact .art, .lookup.compact h2, .lookup.compact .hero-intro, .lookup.compact .hero-scene { display: none; }
/* The painted garden scene (images/scenes/) along the bottom edge, fading in from the card; it replaces the small drawing */
.hero:has(.hero-scene) { grid-template-columns: 1fr; padding-bottom: 0; }
.hero:has(.hero-scene) .art { display: none; }
.hero-scene { grid-column: 1 / -1; display: block; width: calc(100% + 56px); max-width: none; height: auto; margin: 4px -28px 0;
  border-radius: 0 0 var(--radius) var(--radius); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%); mask-image: linear-gradient(to bottom, transparent, #000 35%); }
@media (max-width: 640px) {
  .hero { grid-template-columns: 1fr; padding: 20px; }
  .hero .art { grid-row: 1; width: 150px; height: 110px; justify-self: center; }
  .hero-scene { width: calc(100% + 40px); margin: 4px -20px 0; height: 120px; object-fit: cover; object-position: 72% 50%; }   /* the beds, not the whole wide scene */
  .hero h2 { font-size: 1.4rem; }
}

.welcome { border-left: 4px solid var(--accent); }
.steps { list-style: none; padding: 0; margin: 4px 0 12px; display: grid; gap: 10px; }
.steps li {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border);
}
.steps li p { margin: 2px 0 0; }
.steps li.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.steps li.done { opacity: 0.7; }
.steps li.done strong { text-decoration: line-through; }
.step-mark {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; background: var(--surface); border: 2px solid var(--accent); color: var(--accent);
}
.steps li.done .step-mark { background: var(--accent); color: var(--accent-ink); }
.steps .secondary { margin: 0; }
@media (max-width: 600px) { .steps li { grid-template-columns: 34px 1fr; } .steps li > :last-child { grid-column: 2; justify-self: start; } }

.loc-bar {
  display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 14px;
  font-size: 0.92rem;
}
.loc-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: 999px;
  background: var(--glass-sheen), var(--glass-panel); border: 1px solid var(--glass-panel-edge); box-shadow: var(--shadow), var(--glass-panel-hi); max-width: 100%;
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
}
.loc-chip .icon { color: var(--terra); }
.loc-chip h2 { font-size: 1rem; margin: 0; font-family: var(--font); font-weight: 700; }
.zone-chip { padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 0.82rem; white-space: nowrap; }
.loc-chip .link-btn { font-size: 0.85rem; padding: 0 6px; }
/* "Frost Apr 8 – Nov 12": folds the frost card open below the line */
.frost-toggle { display: inline-flex; align-items: center; gap: 2px; color: var(--text); text-decoration: none; font-weight: 600; white-space: nowrap; }
.frost-toggle::before { content: "·"; color: var(--muted); margin-right: 6px; }
.frost-toggle .icon { width: 16px; height: 16px; color: var(--frost); transition: transform 0.15s; }
.frost-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.frost-toggle:hover span { text-decoration: underline; }
.frost-toggle::after { content: "·"; color: var(--muted); margin-left: 8px; }
.loc-chip { flex-wrap: wrap; }
@media (max-width: 640px) {
  .loc-chip { border-radius: 16px; }
  .frost-toggle::before { content: none; }   /* the frost dates start the second line, so no dot in front */
}
.frost-panel { margin-top: -4px; }
.loc-bar .place-note { margin: 0; flex-basis: 100%; }
.loc-bar .place-note:empty { display: none; }

/* Calendar page sections as tabs */
.page-tabs {
  display: flex; gap: 4px; margin: 0 0 16px; padding: 4px; overflow-x: auto; scrollbar-width: none;
  background: color-mix(in srgb, var(--track) 60%, transparent); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--glass-panel-edge);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
}
.page-tabs::-webkit-scrollbar { display: none; }
.page-tab {
  flex: 1 0 auto; background: transparent; color: var(--muted); border-radius: 10px; padding: 9px 14px;
  font-weight: 600; font-size: 0.92rem; white-space: nowrap; border: 0;
}
.page-tab:hover { color: var(--text); filter: none; }
.page-tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), var(--glass-panel-hi); }
.page-tab[aria-selected="true"] .icon { color: var(--accent); }
.page-tab .badge {
  min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--harvest); color: #2a1a00;
  font-size: 0.72rem; line-height: 1.5;
}
.page-tab .badge:empty { display: none; }
/* Small phones: four equal tabs, icon over label */
@media (max-width: 480px) {
  .page-tab {
    flex: 1 1 0; flex-direction: column; gap: 2px; padding: 7px 2px; font-size: 0.72rem; white-space: normal;
    position: relative; line-height: 1.2;
  }
  .page-tab .icon { width: 20px; height: 20px; }
  .page-tab .badge { position: absolute; top: 3px; right: 6px; }
}
/* Walkthrough and backup belong with the overview */
body[data-tab]:not([data-tab="overview"]) .overview-only { display: none; }
/* Home is index.html's first section: the same page without the calendar's tabs */
body[data-tab="overview"] #cal-tabs { display: none; }
/* A tab that's a link to another page (the Garden bar's Map, and every tab on the map page) */
a.page-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.page-tab[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), var(--glass-panel-hi); }
.page-tab[aria-current="page"] .icon { color: var(--accent); }
/* Garden: the map and the log's sections share one bar (plots.html, log.html). On the log the five are a tablist. */
.garden-tablist { display: flex; gap: 4px; flex: 5 1 auto; min-width: 0; }
@media (max-width: 480px) { .garden-tablist { flex: 5 1 0; } }

/* ---------- Home: your garden and the season so far, side by side on wide screens ---------- */
.home-pair { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 18px; align-items: start; }
@media (max-width: 900px) { .home-pair { grid-template-columns: minmax(0, 1fr); } }
.home-garden .card-head .button-link { margin: 0; }
.home-plots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.home-plot {
  display: grid; align-content: start; gap: 2px; height: 100%; padding: 10px 12px 12px; border-radius: 12px;
  background: var(--glass-inner); border: 1px solid var(--glass-inner-edge); color: var(--text); text-decoration: none;
}
.home-plot:hover { border-color: var(--accent); }
.home-plot:hover strong { color: var(--accent); text-decoration: underline; }
.plot-thumb { display: block; width: 100%; height: 84px; margin-bottom: 6px; }
.plot-thumb .map-outline { stroke-width: 2.5px; vector-effect: non-scaling-stroke; }
.home-more { margin: 10px 0 0; }
.season-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.season-list a {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon what" "icon val"; column-gap: 12px; align-items: center;
  padding: 7px 10px; border-radius: 10px; color: var(--text); text-decoration: none;
}
.season-list a:hover { background: var(--glass-inner); }
.season-list a:hover .season-what { color: var(--accent); text-decoration: underline; }
.season-list .icon { grid-area: icon; width: 32px; height: 32px; padding: 7px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
.season-what { grid-area: what; font-weight: 700; font-size: 0.9rem; }
.season-val { grid-area: val; font-size: 0.85rem; color: var(--muted); }

/* Today */
.today { background: var(--glass-sheen), linear-gradient(135deg, var(--glass-panel) 0%, var(--glass-panel) 55%, color-mix(in srgb, var(--accent-soft) 85%, transparent) 140%); }
.today-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.today-date { margin: 0; font-size: 1.6rem; font-weight: 600; }
.today-head p { margin: 2px 0 0; }
.today-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 16px 0; }
.today-stat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--glass-inner); border: 1px solid var(--glass-inner-edge); }
.today-stat .icon { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.today-stat.frost .icon { background: rgba(124, 159, 191, 0.18); color: var(--frost); }
.today-stat.ready .icon { background: rgba(217, 154, 58, 0.18); color: var(--harvest); }
.today-stat strong { display: block; font-size: 1.15rem; line-height: 1.2; }
.today-stat span { font-size: 0.8rem; color: var(--muted); }
.today-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.today-actions button, .today-actions .button-link { margin: 0; }
.ready-list { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.ready-list li {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--harvest);
}
.ready-list a { margin-left: auto; font-weight: 600; font-size: 0.88rem; }

/* Frost summary */
.summary-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.summary-head h2 { margin-bottom: 4px; }
.summary-head p { margin: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 14px 0; }
.stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.stat-label { display: block; font-size: 0.8rem; color: var(--muted); }
.stat strong { font-size: 1.3rem; font-weight: 600; }
.frost-source { margin: 0 0 12px; }
.adjust summary, .tool-help summary, .plot-edit summary, .plot-totals summary, .plot-tips summary, .tool-more summary {
  cursor: pointer; color: var(--accent); font-weight: 600; font-size: 0.92rem;
}
.adjust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 12px; }
.adjust-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--muted); }
.adjust-grid .wide { grid-column: 1 / -1; }

/* My garden bar */
.garden-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 20px; }
.garden-bar h2 { margin-bottom: 0; font-size: 1.1rem; }
.garden-bar p { margin: 0; font-size: 0.88rem; }
.garden-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.garden-actions > button { margin: 0; padding: 8px 16px; }

.garden-count { font-family: var(--font); font-size: 0.85rem; font-weight: 600; color: var(--muted); display: none; }
/* Phones: the My garden bar is one short row, so the crop list starts higher up */
@media (max-width: 640px) {
  .garden-bar { flex-wrap: nowrap; padding: 8px 8px 8px 14px; gap: 8px; margin-bottom: 12px; }
  .garden-bar h2 { font-size: 1rem; white-space: nowrap; }
  .garden-bar #garden-summary { display: none; }
  .garden-count { display: inline; }
  .garden-actions { flex-wrap: nowrap; gap: 6px; }
  .garden-actions .tab { padding: 5px 10px; font-size: 0.8rem; }
  .garden-actions > button { width: 36px; height: 36px; padding: 0; border-radius: 50%; }
  .garden-actions > button .icon { width: 18px; height: 18px; }
  .garden-bar .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .today-stats { gap: 8px; margin: 12px 0; }
  .today-stat { padding: 10px; gap: 10px; }
  .today-stat .icon { width: 32px; height: 32px; padding: 7px; }
  .today-date { font-size: 1.35rem; }
  .today-actions button, .today-actions .button-link { padding: 8px 14px; font-size: 0.9rem; }
}

/* Tasks */
.upcoming { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
/* The task list under the week strip (the Coming up card) */
.upcoming-title { margin: 18px 0 6px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 1rem; }
.task { display: grid; gap: 2px; padding: 9px 10px; border-radius: 10px; }
.task:hover { background: var(--surface-2); }
.task-main { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; cursor: pointer; }
.task-main input { width: 18px; height: 18px; margin: 0; }
.task-text { padding-left: 25px; }
.task.done .task-main strong, .task.done .task-text { text-decoration: line-through; opacity: 0.6; }
.task-toggle { list-style: none; padding: 6px 10px; }
.task-toggle .icon-btn { margin: 0; }
.month-pick { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 12px; }

/* ---------- Month calendar (js/calendar.js) ---------- */
.pill.todo { background: var(--accent); color: var(--accent-ink); }
.pill.frost, .pill.rain { background: var(--frost); color: #0f1a2a; }
.pill.logged, .pill.journal { background: var(--track); color: var(--text); border: 1px solid var(--border-strong); }
.pill.weather { background: var(--terra); color: #fff; }
.task-todo { grid-template-columns: 1fr auto; }
.task-todo .task-main, .task-todo .task-text { grid-column: 1; }
.task-todo .link-btn { grid-column: 2; grid-row: 1; align-self: center; font-size: 0.82rem; }
.task-todo.late .task-main .warn { font-weight: 600; }
.task-info .task-main { cursor: default; }
.task-info .task-text { padding-left: 0; }

.cal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cal-nav, .cal-actions { display: flex; align-items: center; gap: 6px; }
.cal-nav .icon-btn, .cal-actions .icon-btn { margin: 0; }
.cal-step { font-size: 1.1rem; line-height: 1; padding: 4px 12px; }
.cal-title { margin: 0 6px; min-width: 9.5em; text-align: center; font-size: 1.15rem; }
.cal-add { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.cal-show { position: relative; }
.cal-show summary { list-style: none; cursor: pointer; display: inline-block; padding: 6px 12px; font-size: 0.85rem; }
.cal-show summary::-webkit-details-marker { display: none; }
.cal-show summary::after { content: ' ▾'; }
.cal-show-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(320px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 12px 14px;
}
.cal-show-panel fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.cal-show-panel legend { font-weight: 700; font-size: 0.85rem; margin-bottom: 4px; }
.cal-show-panel label { display: flex; gap: 8px; align-items: baseline; font-size: 0.9rem; }
.cal-show-panel .small-btn { margin-top: 12px; }
.cal-show-panel p:empty { display: none; }

.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--border); gap: 1px; }
.cal-wd { background: var(--surface-2); color: var(--muted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 6px 8px; }
.cal-day {
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 3px; min-height: 96px; padding: 5px 6px 6px; margin: 0;
  background: var(--surface); color: var(--text); border: 0; border-radius: 0; text-align: left; font-weight: 400; cursor: pointer; min-width: 0;
}
.cal-day:hover { background: var(--surface-2); filter: none; }
.cal-day:focus-visible { outline-offset: -2px; }
.cal-day.other { background: var(--bg); color: var(--muted); }
.cal-day[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-num { font-size: 0.85rem; font-weight: 600; width: 1.8em; height: 1.8em; display: inline-grid; place-items: center; border-radius: 999px; }
.cal-day.today .cal-num { background: var(--today); color: #fff; }
.cal-chips { display: grid; gap: 2px; min-width: 0; margin-top: calc(var(--lanes, 0) * 17px); }
/* The day's number, and the forecast beside it (the next week or so) */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; }
.cal-wx { display: inline-flex; align-items: center; gap: 3px; font-size: 0.78rem; white-space: nowrap; min-width: 0; overflow: hidden; }
.cal-hilo { font-size: 0.68rem; color: var(--muted); font-weight: 600; }
.cal-wx.frost .cal-hilo { color: var(--frost); }
.cal-wx-frost { color: var(--frost); font-weight: 700; }
.cal-day-wx { margin: 0 0 8px; }
.cal-day-wx.frost { color: var(--frost); font-weight: 600; }
/* The frost season: a cool tint on the days past the average first fall frost (and before the last spring one) */
.cal-day.frosty { background-image: linear-gradient(rgba(124, 159, 191, 0.14), rgba(124, 159, 191, 0.14)); }
/* Planting and harvest windows: bars across the days they're open, in lanes under the day numbers */
.cal-win {
  grid-column: 1; align-self: start; z-index: 2; margin: calc(30px + var(--lane, 0) * 17px) 3px 0; height: 15px; padding: 0 6px; min-width: 0;
  border: 0; border-radius: 4px; background: color-mix(in srgb, var(--k) 26%, var(--surface)); border-left: 3px solid var(--k);
  display: block; color: var(--text); font-size: 0.7rem; font-weight: 600; line-height: 15px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.cal-win:hover { background: color-mix(in srgb, var(--k) 40%, var(--surface)); filter: none; }
.cal-win.cont-l { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.cal-win.cont-r { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.cal-win.done { opacity: 0.5; }
/* Dragging a to-do to another day */
.cal-chip.drag { cursor: grab; }
.cal-dragging, .cal-dragging * { cursor: grabbing !important; user-select: none; }
.cal-ghost { position: fixed; z-index: 100; pointer-events: none; max-width: 180px; box-shadow: var(--shadow-lg); }
.cal-day.drop { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
.cal-moved { margin: 0 0 6px; color: var(--accent-strong); }
/* What the colors mean */
.cal-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 0.8rem; color: var(--muted); }
.cal-key[hidden] { display: none; }
.cal-key li { display: inline-flex; align-items: center; gap: 6px; }
.cal-key-sw { width: 14px; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--k, var(--muted)) 30%, var(--surface)); border-left: 3px solid var(--k, var(--muted)); }
.cal-key-sw.k-frosty { background: rgba(124, 159, 191, 0.25); border-left: 0; }
.k-frosty { --k: var(--frost); }
/* The pop-up by a window bar or a day */
#view-month { position: relative; }
.cal-pop { position: absolute; z-index: 30; width: min(320px, calc(100% - 16px)); padding: 12px 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.cal-pop[hidden] { display: none; }
.cal-pop h3 { margin: 0 26px 4px 0; font-size: 1rem; }
.cal-pop p { margin: 0 0 8px; }
.cal-pop-acts, .cal-win-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-pop-acts .small-btn, .cal-win-acts .small-btn { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.cal-pop-x { position: absolute; top: 6px; right: 6px; margin: 0; }
.cal-win-acts { list-style: none; padding: 0 0 8px 34px; }
/* Month / List / Season */
.cal-views { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); }
.cal-views button { margin: 0; padding: 5px 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.cal-views button:hover { color: var(--text); filter: none; }
.cal-views button[aria-pressed="true"] { background: var(--surface); color: var(--accent-strong); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.cal-hidden { font-weight: 400; color: var(--muted); }
/* List view */
.cal-list-week h3 { margin: 18px 0 6px; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.cal-list-week:first-child h3 { margin-top: 4px; }
.cal-list-day { padding: 8px 12px; margin-bottom: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.cal-list-day.past { opacity: 0.6; }
.cal-list-day.today { border-color: var(--today); }
.cal-list-day h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 0.95rem; }
.cal-list-day h4 .link-btn { margin-left: auto; font-size: 0.82rem; }
.cal-list-today { font-size: 0.7rem; padding: 1px 7px; border-radius: 999px; background: var(--today); color: #fff; text-transform: uppercase; letter-spacing: 0.04em; }
.cal-list-day .upcoming { margin: 0; }
/* Season view: your crops across the year */
.s-chart { display: grid; gap: 3px; overflow-x: auto; }
.s-row { display: grid; grid-template-columns: minmax(110px, 160px) minmax(480px, 1fr); align-items: center; gap: 10px; min-height: 26px; }
.s-name { font-size: 0.88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-track { position: relative; height: 22px; border-radius: 6px; background: var(--surface-2); }
.s-head .s-track { background: none; height: 18px; }
.s-month { position: absolute; top: 0; font-size: 0.7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; padding-left: 3px; border-left: 1px solid var(--border); }
.s-bar { position: absolute; top: 4px; height: 14px; margin: 0; padding: 0; border: 0; border-radius: 4px; background: var(--k); cursor: pointer; }
.s-bar:hover { filter: brightness(1.08); }
.s-bar.done { opacity: 0.5; }
.s-today { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--today); z-index: 1; }
.s-frost { position: absolute; top: 0; bottom: 0; border-left: 2px dashed var(--frost); opacity: 0.8; }
/* ---------- Themed gardens (themes.html) ---------- */
.th-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.th-tile { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--glass-tile); color: var(--text); text-decoration: none; }
.th-tile:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.th-tile-body { display: grid; gap: 4px; }
.th-tile-name { font-family: var(--font-head); font-size: 1.15rem; }
.th-icons { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
.th-icons .plant-icon { width: 24px; height: 24px; }
.th-tile-small { padding: 10px 12px; }
.th-bed { display: block; width: 100%; height: auto; }
.th-tile-bed { aspect-ratio: 2 / 1; height: auto; }
.th-lines line { stroke: rgba(255, 255, 255, 0.18); stroke-width: 0.6; }
.th-back { margin: 0 0 8px; }
.th-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: start; }
.th-about p { margin: 0 0 10px; }
.th-about h3, .th-plan h3 { margin: 4px 0 8px; font-size: 1.1rem; }
.th-tips { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.th-sizes { margin-bottom: 10px; flex-wrap: wrap; }
.th-sizes .muted { font-weight: 400; }
.th-figure { position: relative; margin: 0 0 10px; }
.th-figure figcaption { margin-top: 4px; }
.th-north { position: absolute; top: -18px; left: 0; font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.th-plan-bed { margin-top: 20px; }
.th-plan .th-crops, .theme-article .crop-table { width: 100%; min-width: 0; }
.th-crops td:first-child { white-space: nowrap; }
.th-crops .plant-icon { width: 22px; height: 22px; vertical-align: middle; margin-right: 6px; }
.th-actions { margin: 12px 0 6px; }
.th-actions .small-btn { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.th-status:empty { display: none; }
.th-more { margin-top: 20px; }
.th-more h3 { margin: 0 0 10px; }
@media (max-width: 860px) { .th-grid { grid-template-columns: minmax(0, 1fr); } }
.th-sizes button { white-space: nowrap; }
.th-plan { overflow-x: auto; }
/* The day sheet's close button: phones only */
.cal-sheet-x { display: none; }
.cal-chip {
  display: block; font-size: 0.72rem; line-height: 1.35; padding: 1px 5px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--surface-2); border-left: 3px solid var(--k, var(--border-strong));
}
.cal-chip.done { opacity: 0.55; text-decoration: line-through; }
.cal-chip.late { color: var(--warn); font-weight: 600; }
.cal-more { font-size: 0.7rem; color: var(--muted); padding-left: 5px; }
.cal-dots { display: none; gap: 3px; justify-content: center; }
.cal-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--k, var(--muted)); }
.cal-dots i.done { opacity: 0.4; }
.k-todo { --k: var(--accent); }
.k-indoor { --k: var(--indoor); }
.k-plant { --k: var(--plant); }
.k-care, .k-frost, .k-rain { --k: var(--frost); }
.k-harvest { --k: var(--harvest); }
.k-weather { --k: var(--terra); }
.k-logged, .k-journal { --k: var(--muted); }

.cal-day-panel { margin-top: 16px; }
.cal-day-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cal-day-head h3 { margin: 0; }
.cal-day-head .small-btn { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.cal-going { margin-top: 8px; }
.cal-going summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; padding: 4px 10px; }
.cal-links { margin: 12px 0 0; }

@media (max-width: 640px) {
  .cal-bar { flex-direction: column; align-items: stretch; }
  .cal-nav { justify-content: space-between; }
  .cal-title { min-width: 0; flex: 1; font-size: 1.05rem; }
  .cal-actions { justify-content: space-between; }
  .cal-day { min-height: 56px; align-items: center; padding: 6px 2px 4px; }
  .cal-grid { touch-action: pan-y; }
  .cal-chips { display: none; }
  .cal-dots { display: flex; align-items: center; margin-top: auto; }
  .cal-dots i { width: 7px; height: 7px; }
  .cal-dots b { font-size: 0.6rem; color: var(--muted); }
  .cal-head { justify-content: center; }
  .cal-wx .cal-hilo, .cal-wx-frost { display: none; }
  .cal-wx { position: absolute; margin: -20px 0 0 30px; font-size: 0.62rem; }
  .cal-day { position: relative; }
  .cal-win { height: 4px; margin-top: calc(32px + var(--lane, 0) * 6px); padding: 0; font-size: 0; border-left: 0; background: var(--k); }
  .cal-pop { display: none; }
  .cal-views button { padding: 5px 10px; }
  .cal-actions { flex-wrap: wrap; }
  .cal-views { flex: 1 1 100%; justify-content: center; }
  .cal-views button { flex: 1; }
  .cal-show-more { display: none; }
  .cal-add { white-space: nowrap; }
  .cal-day-panel.open {
    position: fixed; left: 8px; right: 8px; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 35; margin: 0; max-height: 62vh; overflow-y: auto;
    padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); overscroll-behavior: contain;
  }
  .cal-day-panel.open .cal-sheet-x { display: inline-flex; margin: 0; }
  .s-row { grid-template-columns: 90px minmax(420px, 1fr); }
  .cal-wd { text-align: center; padding: 6px 0; font-size: 0.68rem; }
}

/* To-do dialog */
.log-fields .todo-every { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px; align-items: end; }
.log-fields .todo-every[hidden] { display: none; }
.log-fields .todo-every label { font-size: 0.9rem; font-weight: 600; }
.log-fields .todo-every input.tiny { width: 80px; display: inline-block; margin: 4px 6px 0 0; }
.log-fields .todo-every input[type="date"] { display: block; margin-top: 4px; }
.log-fields textarea { width: 100%; display: block; margin-top: 4px; }
.log-fields > label.todo-remind { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.log-fields > label.todo-remind > input { width: 18px; height: 18px; margin: 0; display: inline-block; }
.todo-remind .muted { flex-basis: 100%; }

/* Reminder banner (js/todos.js), on every page */
.reminder-bar {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; width: max-content; max-width: calc(100vw - 32px);
  background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-left: 4px solid var(--accent);
  padding: 10px 12px 10px 14px; border-radius: 12px; box-shadow: var(--shadow-lg); font-size: 0.92rem;
}
.reminder-bar[hidden] { display: none; }
.reminder-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.reminder-snooze { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.reminder-actions button { margin: 0; padding: 5px 14px; font-size: 0.85rem; }
@media (max-width: 640px) { .reminder-bar { bottom: calc(80px + env(safe-area-inset-bottom)); } }

/* Toolbar above the calendar */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filters input { width: 170px; }
/* Type checkboxes above the Planting calendar, as pills */
.type-checks { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; margin: 0; padding: 0; border: 0; min-width: 0; }
.type-checks label {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; border: 1px solid var(--border-strong);
  border-radius: 999px; background: var(--surface-2); font-size: 0.88rem; font-weight: 600; cursor: pointer; user-select: none;
}
.type-checks label:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }
.type-checks label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.type-checks input { margin: 0; width: 15px; height: 15px; }

/* Timeline */
/*
 * The month names stay pinned at the top while you scroll a long list. Where the timeline fits the card, the page
 * scrolls and the header pins to the window; where it doesn't (phones), the timeline gets its own scroll box and
 * the header and crop names pin inside it.
 */
#view-timeline { container-type: inline-size; }
.timeline-scroll { overflow: auto; max-height: min(75vh, 900px); overscroll-behavior: contain; }
@container (min-width: 760px) { .timeline-scroll { overflow: visible; max-height: none; } }
.tl-name { position: sticky; left: 0; z-index: 3; background: var(--surface); }
/*
 * The calendar header that stays in view: one tinted panel. At the top of the page it has the key (in the order a crop goes
 * through), the year, the months, and the marks line; once pinned (.pinned, from syncHead in js/app.js) and on phones it
 * slims to the year, a Key button, and the months. Its columns line up with the rows below, so it has no side padding.
 */
.tl-head {
  position: sticky; top: 0; z-index: 6; align-items: end; margin-bottom: 6px; padding: 10px 0 8px; border-bottom: 0; border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 92%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px var(--border);
}
.tl-head.pinned { padding: 6px 0; box-shadow: inset 0 0 0 1px var(--border), 0 8px 18px -10px rgba(40, 30, 10, 0.45); }
.tl-head .tl-name { z-index: 5; align-self: stretch; align-items: flex-end; gap: 8px; margin-left: 1px; padding: 0 10px 6px 11px; overflow: visible; background: var(--surface-2); border-radius: 12px 0 0 12px; }
.tl-year { font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; line-height: 1; }
.tl-head.pinned .tl-year { font-size: 1.05rem; }
/* The key, in the order a crop goes through, with the extras on the right */
.tl-head-key { grid-column: 1 / -1; position: sticky; left: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 0 12px 6px; font-size: 0.78rem; color: var(--muted); }
.tl-key-story, .tl-key-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; padding: 0; list-style: none; }
.tl-key-story li, .tl-key-extra li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tl-key-story li { color: var(--text); font-weight: 600; }
.tl-key-story li + li::before { content: '→'; color: var(--border-strong); font-weight: 400; }
.tl-key-extra { margin-left: auto; }
.tl-head .sw, .pc-key .sw { flex: none; width: 18px; height: 9px; border-radius: 999px; }
.tl-head .sw.tail, .pc-key .sw.tail { height: 4px; }
.tl-head .sw.grow, .pc-key .sw.grow { height: 2px; border-radius: 0; }
.tl-head .sw.today, .pc-key .sw.today { width: 3px; height: 12px; border-radius: 0; }
/* The key under a plant card's timeline */
.pc-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 8px; font-size: 0.74rem; color: var(--muted); }
/* Months: small capitals with thin dividers, this month as a pill, and a strip for the frost season (blue) and growing season (green) */
.tl-head .tl-track { height: auto; padding-top: 26px; background: none; }
.tl-head.two-marks .tl-track { padding-top: 46px; }
.tl-head.pinned .tl-track { padding-top: 22px; }
.tl-head.pinned.two-marks .tl-track { padding-top: 42px; }
.tl-months { display: grid; grid-template-columns: repeat(12, 1fr); }
.tl-month { padding: 3px 0; border-left: 1px solid var(--border); text-align: center; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tl-month:first-child { border-left: 0; }
.tl-month.now { color: var(--accent-strong); }
.tl-month.now span { display: inline-block; padding: 1px 9px; border-radius: 999px; background: var(--accent-soft); font-weight: 800; }
.tl-season-strip { position: relative; height: 4px; margin-top: 3px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--plant) 35%, transparent); }
.tl-season-strip i { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--frost) 55%, transparent); }
/* Frost and Today flags over the months (and on the plant card), pointing at their lines */
.tl-mark {
  --edge: var(--border); position: absolute; top: 3px; transform: translateX(-50%); white-space: nowrap; font-size: 0.7rem; font-weight: 700; line-height: 1.45;
  padding: 0 7px; border-radius: 999px; background: var(--surface); border: 1px solid var(--edge); color: var(--muted);
}
.tl-mark::after { content: ''; position: absolute; left: 50%; bottom: -5px; margin-left: -4px; border: 4px solid transparent; border-bottom: 0; border-top-color: var(--edge); }
.tl-mark.at-start { transform: none; }
.tl-mark.at-start::after { left: 0; margin-left: 0; }
.tl-mark.at-end { transform: translateX(-100%); }
.tl-mark.at-end::after { left: auto; right: 0; margin-left: 0; }
.tl-mark.up::after { display: none; }
.tl-head.two-marks .tl-mark:not(.up) { top: 23px; }
.tl-mark.frost { --edge: color-mix(in srgb, var(--frost) 60%, transparent); color: color-mix(in srgb, var(--frost) 75%, var(--text)); }
.tl-mark.today { --edge: var(--today); background: var(--today); color: #fff; }
/* The marks after crop names, in a line along the bottom of the header */
.tl-head-marks { grid-column: 1 / -1; position: sticky; left: 0; margin-top: 7px; padding: 6px 12px 0; border-top: 1px solid var(--border); }
.tl-mark-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: 0.74rem; color: var(--muted); }
.tl-mark-key li { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.tl-mark-key .tl-safety { padding: 0; }
.tl-mark-key .tl-safety .icon { width: 14px; height: 14px; }
/* The Key button (once pinned, and on phones) opens the whole key */
.tl-key-small { display: none; position: relative; }
.tl-key-small summary {
  list-style: none; display: inline-block; padding: 2px 10px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); font-size: 0.75rem; font-weight: 700; cursor: pointer;
}
.tl-key-small summary::-webkit-details-marker { display: none; }
.tl-key-small[open] summary { background: var(--accent-soft); border-color: var(--accent); }
.tl-key-small .tl-key {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 6; display: grid; gap: 8px; width: 250px; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-lg); font-size: 0.72rem; color: var(--muted); white-space: normal;
}
.tl-key .sw { flex: none; width: 16px; height: 8px; border-radius: 999px; }
.tl-key .sw.tail { height: 4px; }
.tl-key .sw.grow { height: 2px; border-radius: 0; }
.tl-key .sw.today { width: 3px; height: 11px; border-radius: 0; }
/* In the Key popup the key is two columns, without the arrows */
.tl-key .tl-key-story, .tl-key .tl-key-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin-left: 0; }
.tl-key .tl-key-story li + li::before { content: none; }
.tl-key .tl-mark-key { padding-top: 8px; border-top: 1px solid var(--border); gap: 4px 12px; font-size: 0.72rem; }
.tl-head.pinned .tl-head-key, .tl-head.pinned .tl-head-marks { display: none; }
.tl-head.pinned .tl-key-small { display: block; }
.timeline { min-width: 760px; }
.tl-row { display: grid; grid-template-columns: 210px 1fr; align-items: center; border-bottom: 1px solid var(--border); }
.tl-row:last-child { border-bottom: 0; }
.tl-name { display: flex; align-items: center; gap: 4px; padding: 6px 10px 6px 0; font-size: 0.9rem; white-space: nowrap; overflow: hidden; }
.tl-label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Crop names open the plant card, so they look like small buttons */
a.tl-label, a.cal-plant {
  display: inline-block; max-width: 100%; padding: 2px 9px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface-2); color: var(--text); font-weight: 600; text-decoration: none; line-height: 1.4;
}
a.tl-label:hover, a.cal-plant:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.tl-name .tag, .tl-name .warn-dot, .tl-name .info-dot { flex: none; }
.tl-name .tag { font-size: 0.62rem; padding: 0 4px; }
/* Phones: a narrower name column leaves more room for the months */
@media (max-width: 640px) {
  .tl-row { grid-template-columns: 124px 1fr; }
  .tl-name { font-size: 0.82rem; padding-right: 6px; }
  .tl-head-key, .tl-head-marks { display: none; }
  .tl-key-small { display: block; }
  .tl-head .tl-track { padding-top: 22px; }
  .tl-head.two-marks .tl-track { padding-top: 42px; }
}
/* Month columns: a line between months, and every other month shaded so you can follow a column down */
.tl-track {
  position: relative; height: 30px;
  background:
    repeating-linear-gradient(to right, transparent 0, transparent calc(100% / 12 - 1px), var(--border) calc(100% / 12 - 1px), var(--border) calc(100% / 12)),
    repeating-linear-gradient(to right, var(--track) 0, var(--track) calc(100% / 12), var(--tl-band) calc(100% / 12), var(--tl-band) calc(100% / 6));
}
.month-now { position: absolute; top: 0; bottom: 0; width: calc(100% / 12); background: var(--accent-soft); opacity: 0.7; }
.bar { position: absolute; top: 8px; height: 14px; border-radius: 999px; }
.bar.indoor { background: var(--indoor); }
.bar.plant { background: var(--plant); z-index: 1; }
.bar.harvest { background: var(--harvest); }
.bar.harvest.est { background: repeating-linear-gradient(135deg, var(--harvest) 0 5px, transparent 5px 8px); border: 1px solid var(--harvest); }
.today-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--today); z-index: 2; }
.frost-line { position: absolute; top: 0; bottom: 0; border-left: 2px solid color-mix(in srgb, var(--frost) 70%, transparent); }
/* The frost season: soft blue stripes before the last frost and after the first */
.frost-season, .sw.frost {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--frost) 20%, transparent) 0 3px, color-mix(in srgb, var(--frost) 9%, transparent) 3px 7px);
}
.frost-season { position: absolute; top: 0; bottom: 0; }
/* Thin lines joining a row's bars: seedlings indoors, then growing until harvest */
.tl-link { position: absolute; }
.tl-tail { top: 13px; height: 4px; border-radius: 2px; background: var(--indoor); opacity: 0.4; }
.tl-grow { top: 14px; height: 2px; background: repeating-linear-gradient(to right, var(--plant) 0 4px, transparent 4px 7px); opacity: 0.8; }
.sw.tail { height: 4px; background: var(--indoor); opacity: 0.4; }
.sw.grow { height: 2px; border-radius: 0; background: repeating-linear-gradient(to right, var(--plant) 0 4px, transparent 4px 7px); }
/* Groups: Start seeds indoors, Sow or plant outdoors, Fall only */
/* A group heading sticks just under the header while you're in its group */
/* Above the rows' sticky name column (z-index 3), below the header (6) */
.tl-group { position: sticky; top: var(--tl-head-h, 0px); z-index: 5; padding: 14px 0 5px; border-bottom: 1px solid var(--border); background: var(--surface); }
.tl-group h3 { position: sticky; left: 0; display: inline-block; margin: 0; font-size: 0.95rem; }
.tl-group-count { font-family: var(--font); font-weight: 400; font-size: 0.8rem; color: var(--muted); margin-left: 4px; }
/* Small marks after a crop name: safety note (!), also a fall crop, sow again */
/* The warning triangle takes the color of its note: Not edible, Toxic parts, or Check local laws (.tag-*) */
.tl-safety { flex: none; display: inline-flex; padding: 2px; }
.tl-safety .icon { width: 16px; height: 16px; vertical-align: 0; }
.tl-extra { flex: none; font-size: 0.68rem; font-weight: 700; color: var(--muted); cursor: help; white-space: nowrap; }
.tl-again { font-size: 0.85rem; line-height: 1; }
/* The row under the pointer */
.tl-row:not(.tl-head):hover .tl-track { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--accent) 7%, transparent); }
.tl-row:not(.tl-head):hover a.tl-label { background: var(--accent-soft); border-color: var(--accent); }
.tl-row.has-log .tl-track { height: 44px; }
.tl-row.has-log .bar { top: 5px; height: 11px; opacity: 0.45; }
.tl-row.has-log .tl-tail { top: 9px; height: 3px; opacity: 0.25; }
.tl-row.has-log .tl-grow { top: 10px; opacity: 0.45; }
.tl-row.has-log .bar.logged, .tl-row.has-log .bar.log-grow { opacity: 1; }
.tl-row.has-log .bar.logged { top: 22px; height: 15px; box-shadow: 0 0 0 1.5px var(--text); }
.tl-row.has-log .bar.log-grow { top: 28px; height: 3px; background: var(--plant); border-radius: 0; }
.mine { font-size: 0.85rem; color: var(--accent); font-weight: 600; }

/* Tables */
.table-scroll { overflow-x: auto; position: relative; }   /* keeps hidden labels (.sr-only) inside the scroll box, so they never widen the page */
.crop-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 820px; }
.crop-table th, .crop-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.crop-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; }
.crop-table tbody tr:hover { background: var(--surface-2); }
.crop-table td.tips { max-width: 280px; }
.total-row td { border-top: 2px solid var(--border-strong); }
.calendar-actions { margin-top: 12px; }

/* My plantings */
.plantings { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.planting {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  background: var(--glass-inner); border: 1px solid var(--glass-inner-edge); border-left: 4px solid var(--plant);
  border-radius: 12px; padding: 12px 14px;
}
.planting.st-ready { border-left-color: var(--harvest); }
.planting.st-indoors, .planting.st-planned { border-left-color: var(--indoor); }
.planting.st-done { border-left-color: var(--border-strong); opacity: 0.75; }
/* Edit and Delete: small round icon buttons in the card's top corner, beside the title, so the rest of the card gets the full width */
.planting { position: relative; }
.pl-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
.pl-title { padding-right: 70px; }
.pl-btn { width: 34px; height: 34px; margin: 0; padding: 0; border-radius: 50%; background: var(--surface); color: var(--muted); border: 1px solid var(--border); }
.pl-btn .icon { width: 17px; height: 17px; }
.pl-btn:hover { filter: none; background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.pl-del:hover { background: color-mix(in srgb, var(--warn) 12%, var(--surface)); border-color: var(--warn); color: var(--warn); }
.pl-body { flex: 1; min-width: 0; }
.pl-title strong { font-size: 1.02rem; }
.pl-meta { font-size: 0.85rem; }
.variety { font-weight: 600; color: var(--accent); }
.pl-harvest { font-weight: 600; margin-top: 2px; }
.pl-status { font-size: 0.85rem; margin-top: 2px; }
.progress { height: 6px; border-radius: 3px; background: var(--track); margin-top: 8px; overflow: hidden; max-width: 360px; }
.progress span { display: block; height: 100%; background: var(--plant); border-radius: 3px; }
.st-ready .progress span { background: var(--harvest); }
.st-done .progress span { background: var(--muted); }
.log-harvest { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-weight: 600; }

/* Can I still plant it? */
.options { display: grid; gap: 8px; }
.opt { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; background: var(--surface); }
.opt summary { cursor: pointer; font-weight: 600; }
.opt ul { margin: 8px 0 2px; padding-left: 18px; columns: 2 260px; column-gap: 24px; }
.opt li { break-inside: avoid; margin-bottom: 4px; }
.opt p { margin: 8px 0 0; }
.opt-good { border-left: 4px solid var(--plant); }
.opt-tight { border-left: 4px solid var(--harvest); }
.opt-wait { border-left: 4px solid var(--frost); }
.opt-late { border-left: 4px solid var(--warn); }

/* Your data */
.data-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.data-card h2 { margin-bottom: 2px; }
.data-card p { margin: 0; max-width: 560px; }
.data-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.data-actions .secondary { margin: 0; }
.data-actions .check { display: inline-flex; align-items: center; gap: 6px; }
.data-card .status { flex-basis: 100%; min-height: 0; }

/* ---------- Dialogs ---------- */
.picker {
  width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0;
  border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-lg);
}
.picker::backdrop { background: rgba(30, 24, 14, 0.5); }
.picker-inner { display: flex; flex-direction: column; max-height: calc(100vh - 50px); }
.picker-head { padding: 20px 22px 0; }
.picker-head h2 { margin-bottom: 0; }
.picker-head p { margin: 2px 0 0; }
.picker-tools { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 22px; border-bottom: 1px solid var(--border); }
.picker-tools input { flex: 1 1 180px; }
.picker-tools button { margin: 0; padding: 8px 14px; }
.picker-list { overflow-y: auto; padding: 8px 22px 16px; }
.picker-list fieldset { border: 0; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 12px; }
.picker-list legend { font-weight: 700; padding: 0; margin-bottom: 6px; font-family: var(--font-head); font-size: 1.05rem; }
.pick { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.pick:hover { background: var(--track); }
.pick input { flex: none; width: 18px; height: 18px; margin: 0; }
.pick .tag { flex: none; }
.pick[hidden], .picker-list fieldset[hidden] { display: none; }
.picker-foot { padding: 12px 22px; border-top: 1px solid var(--border); text-align: right; }
.log-dialog { width: min(560px, calc(100vw - 32px)); }
.log-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px 22px; overflow-y: auto; }
.log-fields > label, .log-fields > fieldset { display: block; font-size: 0.9rem; font-weight: 600; }
.log-fields > label > input, .log-fields > label > select { display: block; margin-top: 4px; }
.log-fields .muted { font-weight: 400; font-size: 0.8rem; }
.log-fields .wide, .log-methods { grid-column: 1 / -1; }
.log-fields input, .log-fields select { width: 100%; }
.log-methods { border: 0; padding: 0; margin: 0; }
.log-methods legend { padding: 0; margin-bottom: 4px; }
#log-methods { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.radio { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; cursor: pointer; }
.radio input { width: 16px; height: 16px; margin: 0; }
.log-preview:empty { display: none; }
.log-preview { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; font-size: 0.9rem; }
.log-foot { display: flex; gap: 8px; align-items: center; }
.log-foot .secondary { margin: 0; }
@media (max-width: 600px) {
  .log-fields { grid-template-columns: 1fr; }
}

/* ---------- Plot builder ---------- */
.swatch {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px;
  background: hsl(var(--h) var(--crop-s) var(--l, var(--crop-l))); border: 1px solid hsl(var(--h) 40% var(--crop-edge));
}
/* Keep the tools in view while scrolling, but only where the screen is tall enough not to hide the plot */
@media (min-height: 760px) and (min-width: 641px) {
  .tool-card { position: sticky; top: 8px; z-index: 5; box-shadow: var(--shadow-lg); }
}
.tool-card { padding: 14px 18px; }
.tool-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.tool-crop { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 0.85rem; flex: 1 1 240px; max-width: 380px; }
.tool-crop, .tool-crop-row { min-width: 0; }
.tool-crop-row { display: flex; gap: 6px; width: 100%; }
.tool-crop-row input { flex: 1 1 45%; min-width: 0; }
.tool-crop-row select { flex: 1 1 55%; min-width: 0; }
.tool-month { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 0.85rem; }
.tool-row .secondary { margin: 0; }
.tool-row .tabs .icon { width: 16px; height: 16px; }
.tool-info { margin-top: 10px; font-size: 0.9rem; }
.tool-summary { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.tool-title { font-size: 1rem; }
.tool-facts { display: inline-flex; gap: 4px 12px; flex-wrap: wrap; color: var(--muted); font-size: 0.85rem; }
.tool-facts b { color: var(--text); font-weight: 600; }
.tool-more { margin-top: 4px; }
.tool-more summary { font-size: 0.85rem; }
.tool-more > div { display: grid; gap: 2px; margin-top: 6px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.tool-foot { display: flex; gap: 6px 16px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.tool-help { margin-top: 0; }
.tool-help summary { font-size: 0.85rem; }
.tool-help ul { margin: 6px 0 0; padding-left: 18px; }
.tool-hint { margin: 8px 0 0; }
.touch-paint { display: flex; align-items: center; gap: 8px; }
.touch-paint[hidden] { display: none; }
.history-btns { display: flex; gap: 6px; }
.history-btns .secondary { margin: 0; padding: 8px 12px; }
#tool-erase[aria-pressed="true"] { background: var(--warn); color: #fff; }

.add-plot { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.add-plot label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; font-weight: 600; flex: 1 1 150px; }
.add-plot label[hidden] { display: none; }
.add-plot label.check { flex-direction: row; align-items: center; gap: 6px; font-weight: 400; align-self: flex-end; }
.add-plot .wide-field { flex: 2 1 240px; }
.add-plot button { align-self: flex-end; margin-top: 0; }
.parse-hint { font-weight: 400; font-size: 0.8rem; color: var(--accent); min-height: 1.2em; }

.plot-card { border-top: 4px solid var(--soil-edge); }
.plot-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.plot-head h2 { margin-bottom: 2px; }
.plot-head p { margin: 0; }
.plot-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.plot-head-actions .plot-delete, .plot-head-actions .plot-clear { margin: 0; padding: 7px 14px; }
.plot-settings { display: flex; gap: 14px; flex-wrap: wrap; }
.spacing-pick { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--muted); }
.spacing-pick select { padding: 4px 8px; font-size: 0.85rem; }
@media (max-width: 640px) { .spacing-pick select { font-size: 16px; } }   /* no zoom-in on phones */
.plot-edit { margin: 10px 0; }
.plot-edit form { margin-top: 10px; }
.plot-card .warn { margin: 8px 0 0; }

.plot-frame { position: relative; margin-top: 12px; }
.plot-frame .grid-scroll { margin-top: 0; }
.grid-scroll { overflow: auto; margin-top: 12px; max-height: 70vh; border-radius: 10px; }
.plot-grid {
  display: grid; gap: 2px; width: max-content; padding: 3px;
  background: var(--soil-line); border: 3px solid var(--soil-edge); border-radius: 8px; user-select: none;
}
.plot-grid.touch-paint { touch-action: none; }
.plot-grid.mode-select .cell { cursor: pointer; }
.cell {
  width: 100%; height: 100%; min-width: 0; padding: 2px; border-radius: 4px; border: 0;
  background: var(--soil); color: var(--text); font-size: 0.62rem; font-weight: 600; line-height: 1.1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; cursor: crosshair;
}
.cell:hover { outline: 2px solid var(--accent); outline-offset: -2px; filter: none; }
.cell.planted {
  position: relative; cursor: pointer;
  background: hsl(var(--h) var(--crop-s) var(--l, var(--crop-l))); box-shadow: inset 0 0 0 1px hsl(var(--h) 40% var(--crop-edge));
}
.cell.planted:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.cell.selected { outline: 3px solid var(--text); outline-offset: -3px; }
.erasing .cell.planted:hover { outline-color: var(--warn); opacity: 0.7; }
.cell-name { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.cell-count { font-weight: 400; opacity: 0.8; }
.cell-months { font-size: 0.55rem; font-weight: 400; opacity: 0.8; }
.cell-more {
  position: absolute; left: 2px; top: 2px; font-size: 0.55rem; font-weight: 700; padding: 0 3px; border-radius: 3px; line-height: 1.3;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
}
.cell-status { position: absolute; right: 3px; bottom: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--plant); }
.cell-status.st-ready { background: var(--harvest); }
.cell-status.st-planned, .cell-status.st-indoors { background: var(--indoor); }
.cell-status.st-done { background: var(--muted); }
/* The eyedropper (Pick) */
.plot-grid.mode-pick .cell.planted, .map-svg.mode-plant.picking { cursor: copy; }
.plot-grid.mode-pick .cell:not(.planted) { cursor: not-allowed; }
.cell-menu { position: absolute; }
.cell-menu .icon { width: 16px; height: 16px; }
#map-pick[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
/* Shaped beds: squares outside the shape */
.cell.cell-out { background: var(--surface); border-radius: 0; box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }
/* Shape pickers show only the fields for the chosen shape */
form:not([data-shape="L"]):not([data-shape="U"]) .shape-opt, form[data-shape="L"] .shape-opt:not(.shape-L), form[data-shape="U"] .shape-opt:not(.shape-U) { display: none; }
.cell-del {
  position: absolute; top: 1px; right: 1px; width: 18px; height: 18px; padding: 0; border-radius: 50%;
  display: none; align-items: center; justify-content: center; font-size: 0.65rem; line-height: 1;
  background: var(--surface); color: var(--warn); border: 1px solid var(--warn); cursor: pointer;
}
.cell.planted:hover .cell-del, .cell.planted:focus .cell-del, .cell.planted:focus-within .cell-del { display: flex; }
.cell-del:hover { background: var(--warn); color: #fff; }
@media (hover: none) { .cell-del { display: flex; } }
.erasing .cell-del { display: none !important; }
.compass {
  position: absolute; z-index: 2; font-size: 0.7rem; font-weight: 700; letter-spacing: 1px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px;
}
.north-top { padding-top: 18px; } .north-top .compass { top: 0; left: 8px; }
.north-bottom { padding-bottom: 18px; } .north-bottom .compass { bottom: 0; left: 8px; transform: rotate(180deg); }
.north-left { padding-left: 34px; } .north-left .compass { left: 0; top: 8px; transform: rotate(-90deg) translateX(-100%); transform-origin: top left; }
.north-right { padding-right: 34px; } .north-right .compass { right: 0; top: 8px; transform: rotate(90deg) translateX(100%); transform-origin: top right; }

.select-panel { margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); border-left: 4px solid var(--accent); background: var(--surface-2); }
.select-panel p { margin: 6px 0; }
.select-panel .add-plot { margin-top: 8px; }
.autofill { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.autofill label { display: inline-flex; align-items: center; gap: 6px; }
.autofill .small-btn { margin: 0; }
.plot-tips { margin-top: 12px; border: 1px solid var(--border); border-left: 4px solid var(--harvest); padding: 8px 12px; border-radius: 10px; background: var(--surface-2); }
.plot-tips summary { color: var(--text); }
.plot-tips ul { margin: 8px 0 4px; padding-left: 18px; }
.plot-tips li { margin-bottom: 4px; font-size: 0.9rem; }
.edit-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.edit-actions button { margin: 0; }
.share-out { margin-top: 8px; }
.share-out[hidden] { display: none; }
.share-out label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; font-weight: 600; }
.share-link { width: 100%; font-size: 0.8rem; }
.share-banner { border-left: 4px solid var(--accent); }
.share-banner p { margin: 0 0 10px; }
.backup-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; border-left: 4px solid var(--terra); }
.backup-bar[hidden] { display: none; }
.backup-bar.done { border-left-color: var(--accent); }
.backup-bar p { display: flex; align-items: flex-start; gap: 10px; margin: 0; flex: 1 1 320px; font-size: 0.92rem; }
.backup-bar p .icon { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--terra); }
.backup-bar.done p .icon { color: var(--accent); }
.backup-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.backup-actions button { margin: 0; }
.history-list { margin: 0 0 8px; padding-left: 18px; font-size: 0.9rem; }
.history-list .icon-btn { margin-left: 6px; padding: 0 6px; }
.seg-status { font-size: 0.8rem; color: var(--accent); }

.rows-diagram {
  position: relative; width: 100%; min-height: 48px; max-height: 360px; margin-top: 12px;
  background: var(--soil); border: 3px solid var(--soil-edge); border-radius: 8px; overflow: hidden;
}
.band { position: absolute; left: 0; right: 0; border-bottom: 1px dashed var(--soil-line); min-height: 6px; }
.band-label { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); font-size: 0.6rem; opacity: 0.6; z-index: 1; }
.seg {
  position: absolute; top: 15%; bottom: 15%; min-height: 4px; border-radius: 4px; overflow: hidden; white-space: nowrap;
  background: hsl(var(--h) var(--crop-s) var(--l, var(--crop-l))); box-shadow: inset 0 0 0 1px hsl(var(--h) 40% var(--crop-edge));
  font-size: 0.65rem; font-weight: 600; padding: 0 4px 0 12px; display: flex; align-items: center;
}
/* A row with a plant picture: the picture repeats along it over a paler stripe of its color, and the name keeps a halo */
.seg[data-pic] { background-position: left center; background-size: auto 100%; background-repeat: repeat-x; background-color: hsl(var(--h) var(--crop-s) var(--l, var(--crop-l)) / 0.35); padding-left: 12px; }
.seg[data-pic] { color: var(--text); text-shadow: 0 0 3px var(--surface), 0 0 3px var(--surface), 0 0 2px var(--surface); }
.overflow-line { position: absolute; left: 0; right: 0; border-top: 2px solid var(--warn); }
.rows-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; }
.row-list, .pot-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.row-item { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.row-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row-head label, .seg-item label { font-size: 0.85rem; display: inline-flex; align-items: center; gap: 4px; }
.seg-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.seg-item { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 0.9rem; }
.seg-item .icon-btn { margin-left: 0; }
.seg-count { font-weight: 600; }
.pot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; background: var(--surface); }
.pot label { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; }
.pot select { padding: 5px 8px; }
.pot .icon-btn { margin-left: auto; }
.pot-bad { border-color: var(--warn); }
.pot-icon { width: 22px; height: 18px; border-radius: 0 0 8px 8px; background: hsl(var(--h) var(--crop-s) var(--l, var(--crop-l))); border: 2px solid var(--terra); }
.pot-add { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pot-add label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; }
.plot-totals { margin-top: 14px; }
.next-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.next-steps a, .next-steps .link-btn { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; text-decoration: none; }
.next-steps .link-btn { text-decoration: none; }
.next-steps a:hover, .next-steps .link-btn:hover { text-decoration: underline; }
.totals-table { min-width: 520px; margin-top: 6px; }
.totals-table .icon-btn { margin: 0; white-space: nowrap; }

.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 50;
  display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px);
  background: var(--text); color: var(--surface); padding: 10px 12px 10px 16px; border-radius: 12px;
  box-shadow: var(--shadow-lg); font-size: 0.9rem;
}
.toast[hidden] { display: none; }
.toast button { background: transparent; color: var(--harvest); border: 1px solid currentColor; padding: 4px 12px; }
.toast-link { color: var(--harvest); font-weight: 700; white-space: nowrap; }
.toast-link:hover { color: var(--harvest); }
.plan-link { font-weight: 600; margin-left: 4px; white-space: nowrap; }
@media (max-width: 640px) { .toast { bottom: calc(80px + env(safe-area-inset-bottom)); } }
@media (max-width: 600px) {
  :root { --cell: 38px; }
  .tool-crop { flex-basis: 100%; max-width: none; }
  .tool-card { padding: 12px 14px; }
}

/* ---------- Plot builder: chips, presets, switcher, zoom, preview, key, hover card ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 12px; border-radius: 999px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); font-size: 0.85rem; font-weight: 600;
  white-space: nowrap;
}
.chip:hover { background: var(--accent-soft); filter: none; }
.chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.chip .swatch { margin-right: 0; }
.chip .icon { color: var(--accent); }
.crop-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.crop-chips:empty { display: none; }
.crop-chip { flex: none; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
/* Quick pick chips: each has an ✕ (or a + for the chosen crop when it isn't a quick pick) inside its right end */
.quick-pick { position: relative; display: inline-flex; flex: none; }
.quick-pick .crop-chip { padding-right: 30px; }
.quick-pick-extra .crop-chip { border-style: dashed; }
.quick-pick-x {
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted);
  font-size: 0.75rem; font-weight: 700; line-height: 1;
}
.quick-pick .quick-pick-x { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.quick-pick-x:hover { background: var(--track); color: var(--text); filter: none; }
.quick-pick .quick-pick-x[data-quick-remove]:hover { color: var(--warn); }
.quick-pick-extra .quick-pick-x { color: var(--accent); font-size: 1rem; }
.crop-chips .quick-pick-new { flex: none; color: var(--muted); border-style: dashed; }
.quick-pick-add { display: inline-flex; flex: none; gap: 6px; align-items: center; }
.quick-pick-add select { max-width: 180px; }
.presets { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 14px; }
.tool-current { display: none; }

.plot-switcher {
  display: flex; gap: 4px; margin: 0 0 16px; padding: 4px; overflow-x: auto; scrollbar-width: thin;
  background: var(--track); border-radius: 14px;
}
.plot-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; background: transparent; color: var(--muted);
  border-radius: 10px; padding: 8px 14px; font-weight: 600; font-size: 0.9rem; border: 0;
}
.plot-tab:hover { color: var(--text); filter: none; }
.plot-tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); }
.plot-tab[aria-selected="true"] .icon { color: var(--accent); }
.plot-tab-size { font-size: 0.75rem; font-weight: 500; color: var(--muted); }

.grid-tools { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; margin-top: 12px; flex-wrap: wrap; }
.preview-note { flex: 1 1 260px; margin: 0; min-height: 1.4em; color: var(--muted); }
.preview-note.warn { color: var(--warn); }
.zoom-ctl { display: inline-flex; align-items: center; gap: 4px; }
.zoom-ctl .icon-btn { margin: 0; min-width: 32px; padding: 3px 9px; font-size: 0.95rem; }
.zoom-ctl [data-action="zoom-fit"] { font-size: 0.8rem; }
.zoom-level { min-width: 3.2em; text-align: center; font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.plot-frame { margin-top: 8px; }
.grid-scroll { touch-action: pan-x pan-y; }

/* Plants drawn at their real spacing, with the name on top */
.cell { font-size: clamp(8px, calc(var(--cell) * 0.215), 13px); }
.cell-dots { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); pointer-events: none; }
.cell-dots circle { fill: hsl(var(--h) 45% var(--crop-edge)); opacity: 0.45; }
.cell.planted > span { position: relative; z-index: 1; }
.cell.planted .cell-name, .cell.planted .cell-count {
  text-shadow: 0 0 3px hsl(var(--h) var(--crop-s) var(--l, var(--crop-l))), 0 0 6px hsl(var(--h) var(--crop-s) var(--l, var(--crop-l)));
}
.cell.planted > .cell-more, .cell.planted > .cell-status { position: absolute; z-index: 2; }
.small-cells .cell-name, .small-cells .cell-count, .small-cells .cell-months, .small-cells .cell-del { display: none !important; }
.small-cells .cell-dots circle { opacity: 0.7; }

/* Outlines while hovering, moving, or selecting */
.ghost { z-index: 4; pointer-events: none; border-radius: 5px; border: 3px dashed var(--accent); background: rgba(74, 107, 79, 0.18); }
.ghost.warn { border-color: var(--harvest); background: rgba(217, 154, 58, 0.18); }
.ghost.bad { border-color: var(--warn); border-style: solid; background: rgba(172, 69, 32, 0.28); }
.ghost.area { border-color: var(--text); background: rgba(60, 50, 30, 0.08); }
.box-sel {
  z-index: 3; pointer-events: none; border-radius: 5px; border: 2px solid var(--accent);
  background: rgba(74, 107, 79, 0.12); box-shadow: 0 0 0 2px var(--surface);
}
.box-panel { border-left-color: var(--harvest); }
.nudge { display: inline-flex; align-items: center; gap: 4px; }
.nudge .icon-btn { margin: 0; min-width: 32px; padding: 3px 8px; font-size: 0.95rem; }
.nudge .muted { margin-right: 2px; }

/* Color key: pick a crop to highlight it */
.crop-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.legend-chip {
  display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 3px 10px; border-radius: 999px; font-size: 0.8rem;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); font-weight: 600;
}
.legend-chip:hover { background: var(--track); filter: none; }
.legend-chip[aria-pressed="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.legend-chip .swatch { margin-right: 0; }
.cell.dim, .seg.dim, .pot.dim { opacity: 0.25; filter: saturate(0.4); }
.cell.hl { box-shadow: inset 0 0 0 2px var(--text); z-index: 2; }
.seg.hl { box-shadow: inset 0 0 0 2px var(--text); }
.pot.hl { border-color: var(--text); }

/* Hover card */
.cell-card {
  position: fixed; z-index: 45; max-width: 300px; display: grid; gap: 3px; padding: 10px 12px; pointer-events: none;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg);
  font-size: 0.85rem; line-height: 1.4;
}
.cell-card .tool-title { margin-bottom: 2px; }

/* Phones: the tools become a bar at the bottom of the screen, above the page tabs */
@media (max-width: 640px) {
  .plots-page .tool-card {
    position: fixed; left: 8px; right: 8px; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 35; margin: 0;
    padding: 8px 10px; max-height: 72vh; overflow-y: auto; border-radius: 16px; box-shadow: var(--shadow-lg);
  }
  .plots-page { padding-bottom: calc(190px + env(safe-area-inset-bottom)); }
  .plots-page .toast { bottom: calc(180px + env(safe-area-inset-bottom)); }
  .tool-current {
    display: inline-flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; margin: 0; padding: 8px 12px;
    background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); font-size: 0.9rem;
  }
  .tool-current > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tool-current .swatch { margin-right: 6px; }
  .tool-more-hint { color: var(--muted); transition: transform 0.15s; }
  .tool-card.open .tool-more-hint { transform: rotate(180deg); }
  .tool-card .tool-row { flex-wrap: nowrap; align-items: center; gap: 6px; }
  .tool-card.open .tool-row { flex-wrap: wrap; }
  .tool-card:not(.open) .palette-body { display: none; }
  .tool-card.open .tool-crop { order: 5; }
  .tool-card .tab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tool-card .tabs .tab { padding: 8px 11px; }
  .tool-card .history-btns .secondary { padding: 8px 10px; }
  .crop-chips { flex-wrap: nowrap; overflow-x: auto; margin-top: 8px; padding-bottom: 2px; scrollbar-width: none; }
  .crop-chips::-webkit-scrollbar { display: none; }
  .cell-card { max-width: calc(100vw - 16px); }
}


/* ---------- An open plot: tools on a rail, one strip, the season, the plot, and a crop palette ---------- */
.plot-work { display: grid; grid-template-columns: auto minmax(0, 1fr) 290px; gap: 14px; align-items: start; }
.plot-main { min-width: 0; }
.plot-rail {
  position: sticky; top: 76px; z-index: 6; display: grid; gap: 3px; padding: 5px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: 0 4px 16px rgba(40, 30, 10, 0.14);
}
.plot-rail button { position: relative; width: 42px; height: 42px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--text); }
.plot-rail button:hover:not(:disabled) { background: var(--track); filter: none; }
.plot-rail button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); box-shadow: inset 0 0 0 1.5px var(--accent); }
.plot-rail button:disabled { opacity: 0.35; }
.plot-rail .icon { width: 20px; height: 20px; }
.plot-rail .tab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.plot-rail kbd { position: absolute; right: 3px; bottom: 1px; padding: 0; border: 0; background: none; font-family: var(--font); font-size: 0.56rem; color: var(--muted); }
.plot-rail-sep { height: 1px; margin: 3px 5px; background: var(--border); }
/* The strip */
.plot-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 8px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); font-size: 0.9rem; }
.plot-strip-name { font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-strong); }
.plot-strip-crop { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 220px; min-width: 0; }
.plot-strip-crop .plant-icon { width: 22px; height: 22px; }
.plot-strip-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.plot-strip-opts .check { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.plot-help { position: relative; }
.plot-help > summary { list-style: none; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--border-strong); border-radius: 50%;
  background: var(--surface); font-weight: 800; cursor: pointer; }
.plot-help > summary::-webkit-details-marker { display: none; }
.plot-help[open] > summary { background: var(--accent-soft); }
.plot-help > ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(420px, 85vw); margin: 0; padding: 12px 14px 12px 30px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-lg); }
/* The season bar */
.season-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 10px; }
.season-label { margin-right: 4px; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.season-bar button { margin: 0; padding: 4px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text);
  font-size: 0.78rem; font-weight: 600; }
.season-bar button:hover { background: var(--accent-soft); filter: none; }
.season-bar button.now { border-color: var(--accent); }
.season-bar button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
/* The crop palette */
.plot-work > .tool-card { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; padding: 14px; }
.palette-title { margin: 0 0 8px; font-size: 1.05rem; }
.palette-search input { width: 100%; }
.palette-head { margin: 12px 0 6px; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.palette-items { display: grid; gap: 4px; }
.palette-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; align-items: stretch; }
.palette-card { margin: 0; width: 34px; height: auto; border-radius: 10px; color: var(--muted); }
.palette-card:hover { color: var(--accent-strong); }
.palette-item {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 8px; margin: 0; padding: 6px 8px; text-align: left;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-weight: 600; justify-content: stretch;
}
.palette-item .plant-icon { grid-row: span 2; width: 26px; height: 26px; }
.palette-item .muted { font-weight: 400; }
.palette-item:hover { border-color: var(--accent); background: var(--accent-soft); filter: none; }
.palette-item[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.plot-work .crop-chips { margin-top: 0; }
.plot-work .tool-info { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 0.85rem; }
/* Plot settings: one button in the plot's header */
.plot-menu { position: relative; margin: 0; }
.plot-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.plot-menu > summary::-webkit-details-marker { display: none; }
.plot-menu[open] > summary { background: var(--track); }
.plot-menu-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 25; width: min(520px, 88vw); max-height: 70vh; overflow-y: auto; padding: 4px 16px 14px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-lg);
}
.plot-menu-panel .small-head { margin: 12px 0 6px; }
.plot-menu-panel .plot-settings { margin-bottom: 10px; }
.plot-danger { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.plot-danger button { margin: 0; }
/* Narrower screens: the palette goes under the plot */
@media (max-width: 1100px) and (min-width: 641px) {
  .plot-work { grid-template-columns: auto minmax(0, 1fr); }
  .plot-work > .tool-card { grid-column: 2; position: static; max-height: none; }
}
/* Phones: the rail is a row across the top; the palette is the sheet at the bottom */
@media (max-width: 640px) {
  .plot-work { display: block; }
  .plot-rail { position: sticky; top: 56px; display: flex; flex-wrap: wrap; margin-bottom: 8px; }
  .plot-rail-sep { width: 1px; height: auto; margin: 5px 3px; }
  .plot-rail button { width: 40px; height: 40px; }
  .plot-strip-opts .fit-key { display: none; }
  .plot-work > .tool-card { position: fixed; top: auto; left: 8px; right: 8px; bottom: calc(68px + env(safe-area-inset-bottom)); max-height: 72vh; padding: 8px 10px; }
}
/* ---------- Garden map ---------- */
body.map-view .tool-card { display: none; }
/* Plot builder sections, and plot tabs that stay pinned while you scroll */
/* Plot tabs and "+ New plot", pinned together while scrolling */
.switcher-bar { position: sticky; top: 0; z-index: 8; display: flex; gap: 8px; align-items: center; margin: 0 0 16px; }
.switcher-bar .plot-switcher { position: static; flex: 1; min-width: 0; margin: 0; box-shadow: 0 2px 10px rgba(40, 30, 10, 0.08); }
.new-plot-btn { flex: none; margin: 0; padding: 10px 16px; box-shadow: 0 2px 10px rgba(40, 30, 10, 0.12); }
.back-to-map { flex: none; margin: 0; padding: 10px 14px; white-space: nowrap; box-shadow: 0 2px 10px rgba(40, 30, 10, 0.08); }
.switcher-bar .plot-switcher[hidden] + .new-plot-btn { margin-left: auto; }
@media (max-width: 640px) { .back-to-map { padding: 8px 12px; } .new-plot-btn .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (min-height: 760px) and (min-width: 641px) { .switcher-bar:not([hidden]) ~ .tool-card { top: 66px; } }
@media (max-width: 640px) { .new-plot-btn { padding: 8px 12px; } }
.plot-tab.dragging { opacity: 0.45; }
.plot-tab.drop-before { box-shadow: inset 3px 0 0 var(--accent); }
.plot-tab.drop-after { box-shadow: inset -3px 0 0 var(--accent); }

.rename-input { font: inherit; font-size: 1.05rem; font-weight: 600; width: min(100%, 320px); padding: 4px 8px; }

/* Plot name (click to rename) and previous / next */
.plot-title { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; }
.plot-title h2 { margin: 0; }
.plot-name {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 2px 6px; border: 0; border-radius: 8px; background: transparent;
  color: inherit; font: inherit; font-weight: inherit; text-align: left;
}
.plot-name:hover { background: var(--track); filter: none; }
.rename-icon { width: 16px; height: 16px; color: var(--muted); opacity: 0; transition: opacity 0.15s; }
.plot-name:hover .rename-icon, .plot-name:focus-visible .rename-icon { opacity: 1; }
@media (hover: none) { .rename-icon { opacity: 0.6; } }
.plot-nav { display: inline-flex; align-items: center; gap: 6px; }
.plot-nav .icon-btn { margin: 0; min-width: 32px; padding: 2px 8px; font-size: 1.1rem; line-height: 1.2; }

/* New plot popup */
.new-plot-dialog { width: min(640px, calc(100vw - 24px)); }
.np-body { padding: 12px 22px; overflow-y: auto; display: grid; gap: 12px; }
.np-body .presets { margin: 0; }
/* Two columns, so Width and Length sit side by side */
.np-body .add-plot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
@media (max-width: 400px) { .np-body .add-plot > label:nth-child(-n+2) { grid-column: 1 / -1; } }   /* Type and Name get the full width */
.map-layouts { margin: 12px 0; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; background: var(--surface-2); }
.map-layouts > summary { cursor: pointer; color: var(--accent); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.layout-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px; margin-top: 6px; }
@media (max-width: 800px) { .layout-grid { grid-template-columns: 1fr; } }
.layout-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 6px; }
.layout-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.layout-actions { display: flex; gap: 6px; align-items: center; flex: none; }
.layout-actions .small-btn, .layout-actions .icon-btn { margin: 0; }
.template-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 8px; }
.template-card { display: grid; gap: 4px; align-content: start; padding: 12px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); border-top: 3px solid var(--plant); }
.template-head { display: flex; align-items: center; gap: 6px; font-family: var(--font-head); font-size: 1.05rem; }
.template-head .icon { color: var(--plant); }
.template-card .small-btn { justify-self: start; margin-top: 6px; }
.template-note { grid-column: 1 / -1; margin: 4px 0 0; }
.map-toolbar { display: flex; gap: 10px 16px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.map-toolbar label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.map-toolbar select { padding: 6px 10px; }
.map-toolbar .check { font-weight: 400; }
.map-add { display: inline-flex; gap: 6px; align-items: center; }
.map-add .small-btn { margin: 0; }
.map-toolbar .map-menu { margin-left: auto; }
.map-toolbar .map-clear-btn { margin: 0; }
/* Zoom buttons on the map (bottom-right) */
.map-zoom {
  position: absolute; right: 12px; bottom: 12px; z-index: 6; display: flex; flex-direction: column; align-items: stretch;
  border-radius: 12px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); overflow: hidden;
}
.map-zoom button {
  margin: 0; width: 42px; height: 38px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text);
  font-size: 1.35rem; font-weight: 600; line-height: 1;
}
.map-zoom button + button, .map-zoom .zoom-level + button { border-top: 1px solid var(--border); }
.map-zoom button:hover { background: var(--accent-soft); filter: none; }
.map-zoom .map-zoom-fit { font-size: 0.78rem; font-weight: 700; }
.map-zoom .zoom-level { font-size: 0.68rem; color: var(--muted); text-align: center; padding: 2px 0; border-top: 1px solid var(--border); background: var(--surface-2); }
/* Clear map */
.clear-map-dialog { width: min(520px, calc(100vw - 32px)); }
.cm-body { padding: 12px 22px 4px; display: grid; gap: 10px; }
.cm-choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.cm-choice input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.cm-choice > span { display: block; }
.cm-choice .muted { display: block; margin-top: 2px; }
.cm-choice:has(input:disabled) { opacity: 0.55; cursor: default; }
.clear-map-dialog .picker-foot { display: flex; justify-content: flex-end; gap: 8px; }
.clear-map-dialog .picker-foot button { margin: 0; }
/* "Are you sure?" before clearing or deleting (js/plots.js ask) */
.ask-dialog { width: min(440px, calc(100vw - 32px)); }
.ask-dialog .picker-head { padding-bottom: 4px; }
.ask-dialog .picker-head p { margin-top: 6px; }
.ask-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px 18px; }
.ask-foot button { margin: 0; }
button.danger-solid { background: var(--warn); color: #fff; border: 1px solid var(--warn); }
/* Map tools and their options */
.map-toolbar .map-modes .tab { padding: 7px 12px; }
.map-toolbar .map-modes .icon { width: 17px; height: 17px; }
.map-toolbar .history-btns .secondary { padding: 6px 10px; }
.map-toolbar .history-btns .tab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.map-toolbar { gap: 8px 12px; }
.map-options { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: -2px 0 10px; }
.map-options > div { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.map-options .map-hint { flex-basis: 100%; margin: 0; }
.map-opts-plant .map-chips { margin: 0; }
.map-opts-plant select { max-width: 220px; }
@media (max-width: 900px) {
  .map-toolbar .map-modes .tab-label, .map-toolbar .history-btns .tab-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}
.map-wrap { position: relative; }
.map-svg.mode-draw, .map-svg.mode-measure, .map-svg.mode-select { cursor: crosshair; }
.map-svg.mode-plant { cursor: cell; }
.map-svg.mode-plant .map-item, .map-svg.mode-draw .map-item, .map-svg.mode-measure .map-item { cursor: inherit; }

/* Handles, guides, drafts, measuring */
.map-handle { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.handle-nw, .handle-se { cursor: nwse-resize; }
.handle-ne, .handle-sw { cursor: nesw-resize; }
.handle-n, .handle-s { cursor: ns-resize; }
.handle-e, .handle-w { cursor: ew-resize; }
.map-guide { stroke: var(--terra); stroke-width: 1.5; stroke-dasharray: 6 4; pointer-events: none; }
.map-draft { fill: rgba(74, 107, 79, 0.18); stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; pointer-events: none; }
.map-draft.bad { fill: rgba(172, 69, 32, 0.16); stroke: var(--warn); }
/* One plant selected inside a plot, and where it would land while you drag it */
.map-plant-sel { fill: rgba(255, 255, 255, 0.14); stroke: #fff; stroke-width: 2.5px; vector-effect: non-scaling-stroke; pointer-events: none;
  filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.7)); }
.map-plant-drop { fill: rgba(120, 200, 110, 0.3); stroke: #7fd070; stroke-width: 2px; vector-effect: non-scaling-stroke; pointer-events: none; }
.map-plant-drop.bad { fill: rgba(220, 80, 60, 0.28); stroke: #e0604a; }
.map-draft-text { fill: var(--text); font-family: var(--font); font-weight: 700; paint-order: stroke; stroke: var(--surface); stroke-width: 3; pointer-events: none; }
.map-band { fill: rgba(74, 107, 79, 0.1); stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; pointer-events: none; }
.map-measure-line { stroke: var(--terra); stroke-width: 2.5; pointer-events: none; }
.map-measure-end { fill: var(--terra); pointer-events: none; }
.map-measure-text { fill: var(--terra); font-family: var(--font); font-weight: 800; paint-order: stroke; stroke: var(--surface); stroke-width: 4; pointer-events: none; }

/* Right-click / press-and-hold menu */
.map-context {
  position: absolute; z-index: 20; min-width: 220px; padding: 6px; display: grid; gap: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg);
}
.edit-actions.arrange { align-items: center; }
.edit-actions.arrange .small-btn { padding: 5px 10px; }

/* Plot details beside the map (below it on narrow screens), month slider, status colors, hover summary */
.map-card { container-type: inline-size; }
.map-layout { display: grid; gap: 14px; }
.map-main { min-width: 0; }
.map-details .map-panel { margin-top: 0; }
@container (min-width: 860px) {
  .map-layout { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }
  .map-details { position: sticky; top: 8px; }
  .map-details .map-panel { max-height: min(65vh, 640px); overflow-y: auto; overscroll-behavior: contain; }
}
.map-opts-view { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.map-month { display: inline-flex; align-items: center; gap: 8px; }
.map-month input { width: 150px; accent-color: var(--accent); }
.map-month output { min-width: 5.5em; font-weight: 700; }
#map-month-now { margin-left: 0; }
.map-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; list-style: none; margin: 0; padding: 0; font-size: 0.82rem; color: var(--muted); }
/* The landmark palette: click to add, or drag onto the map */
.map-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.map-add-label { font-weight: 600; }
.lm-palette { display: flex; flex-wrap: wrap; gap: 6px; }
.lm-chip {
  gap: 6px; margin: 0; padding: 4px 11px 4px 6px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface-2); color: var(--text); font-size: 0.84rem; font-weight: 600; cursor: grab; touch-action: none;
}
.lm-chip:hover { background: var(--accent-soft); border-color: var(--accent); filter: none; }
.lm-glyph { width: 20px; height: 20px; flex: none; }
.lm-glyph .map-lm-shape { stroke-width: 1.4; }
.lm-ghost { position: fixed; z-index: 1000; width: 34px; height: 34px; margin: -17px 0 0 -17px; pointer-events: none; opacity: 0.85; }
.lm-ghost svg { width: 100%; height: 100%; }
body.lm-dragging, body.lm-dragging * { cursor: grabbing !important; }
/* The crop key under the map; pointing at a crop fades the rest */
.map-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; list-style: none; margin: 8px 0 0; padding: 0; font-size: 0.8rem; }
.map-key-title { color: var(--muted); font-weight: 600; margin-right: 2px; }
.map-key-item {
  gap: 5px; margin: 0; padding: 2px 9px 2px 5px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text); font-size: 0.8rem; font-weight: 500; cursor: default;
}
.map-key-item:hover, .map-key-item:focus-visible { border-color: var(--accent); background: var(--accent-soft); filter: none; }
.map-key-item .swatch { width: 11px; height: 11px; margin: 0; border-radius: 3px; }
.map-svg.map-hl .map-crop:not(.hl), .map-svg.map-hl .map-art:not(.hl) { opacity: 0.18; }
/* The Plant tool's preview on the map: green fits, amber replaces, red is blocked */
/* Locked plots and landmarks: a padlock, and no grab cursor */
.map-item.locked, .map-item.locked * { cursor: default; }
.map-lock { pointer-events: none; }
.map-lock-bg { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1; }
.map-lock-body { fill: var(--text); }
.map-lock-arc { fill: none; stroke: var(--text); stroke-width: 2; }
/* The selected item's lock button (js/map.js lockToggleSVG) */
.map-locktoggle { cursor: pointer; }
.map-locktoggle .map-lock-bg { stroke: var(--accent); stroke-width: 1.5; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); }
.map-locktoggle:hover .map-lock-bg { fill: var(--accent-soft, var(--surface)); }
.map-locktoggle.on .map-lock-bg { fill: var(--accent); }
.map-locktoggle.on .map-lock-body { fill: var(--accent-ink); } .map-locktoggle.on .map-lock-arc { stroke: var(--accent-ink); }
.lock-btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.map-ghost { fill: rgba(79, 138, 85, 0.25); stroke: var(--plant); stroke-width: 2.5; stroke-dasharray: 5 3; pointer-events: none; }
.map-ghost.warn { fill: rgba(217, 134, 28, 0.25); stroke: var(--harvest); }
.map-ghost.bad { fill: rgba(172, 69, 32, 0.22); stroke: var(--warn); }
.map-svg.map-hl .map-crop.hl { stroke: var(--text); stroke-width: 1.5; }
.map-tip-here { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.map-legend li { display: inline-flex; align-items: center; gap: 5px; }

.st-dot { display: inline-block; flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--st); border: 2px solid var(--st); }
.st-ready { --st: #d9861c; }
.st-plant { --st: #3b7cc4; }
.st-growing { --st: #4c9a4c; }
.st-planned { --st: #8d877c; }
.st-empty { --st: transparent; }
.st-dot.st-empty, .st-empty .st-dot { background: transparent; border: 2px dashed var(--muted); }
.map-status { fill: var(--st); fill-opacity: 0.16; stroke: var(--st); stroke-width: 5; pointer-events: none; }
.map-status.st-empty { fill: none; stroke: var(--muted); stroke-width: 2.5; stroke-dasharray: 6 4; }

.md-status { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 0.9rem; }
.md-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
  color: var(--text); background: color-mix(in srgb, var(--st) 22%, transparent); border: 1px solid var(--st); }
.md-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.md-actions .small-btn { margin: 0; }
@container (min-width: 860px) {
  .md-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .md-actions .small-btn { justify-content: center; padding: 6px 8px; }
  .md-actions .md-wide { grid-column: 1 / -1; }
}
.md-actions .icon { width: 15px; height: 15px; }
.md-sec { border-top: 1px solid var(--border); padding: 8px 0 2px; margin-top: 8px; }
.md-sec > summary { cursor: pointer; font-weight: 700; color: var(--accent); font-size: 0.92rem; }
.md-sub { margin: 10px 0 4px; font-size: 0.85rem; }
.md-thumb { display: block; width: 100%; max-height: 150px; margin: 8px 0; }
.md-table { min-width: 0; font-size: 0.84rem; }
.md-table th, .md-table td { padding: 6px 5px; }
.md-table td:first-child { white-space: nowrap; }
.md-table tr.md-off td { color: var(--muted); }
.md-list { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 8px; }
.md-list li { font-size: 0.88rem; }
.md-progress { display: block; height: 6px; margin-top: 4px; border-radius: 3px; background: var(--track); overflow: hidden; }
.md-progress span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.md-warn { margin: 6px 0; padding-left: 18px; font-size: 0.86rem; }
.md-warn li { margin: 4px 0; }
.md-picks { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; }
.md-pick {
  display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; width: 100%; margin: 0; padding: 7px 10px;
  border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-align: left; font-weight: 600;
}
.md-pick:hover { background: var(--accent-soft); filter: none; }
.md-pick .muted { grid-column: 2; font-weight: 400; }

.map-tip {
  position: absolute; z-index: 15; max-width: 260px; padding: 8px 10px; display: grid; gap: 4px; pointer-events: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); font-size: 0.84rem;
}
.map-tip-crops { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.map-tip .md-status { font-size: 0.82rem; font-weight: 600; }
.tool-group { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.map-toolbar .tool-group + .tool-group { padding-left: 14px; border-left: 1px solid var(--border); }
.map-menu { position: relative; }
.map-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; margin: 0; cursor: pointer; padding: 5px 12px; font-size: 0.85rem; }
.map-menu > summary::-webkit-details-marker { display: none; }
.map-menu[open] > summary { background: var(--track); color: var(--text); }
.map-menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 230px; padding: 6px; display: grid; gap: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg);
}
.menu-item {
  justify-content: flex-start; width: 100%; margin: 0; padding: 8px 12px; border-radius: 8px; border: 0;
  background: transparent; color: var(--text); font-weight: 500; text-align: left;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--track); filter: none; }
.menu-item .icon { color: var(--accent); }
.menu-item.danger-item { color: var(--warn); }
.map-wrap {
  height: min(74vh, 800px); border-radius: 12px; overflow: hidden; border: 1px solid var(--border);
  background: var(--surface-2);
}
.map-svg { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; cursor: grab; }
.map-svg { will-change: transform; }   /* its own layer, so panning slides it cheaply (js/map.js slideView) */
.map-svg:active { cursor: grabbing; }
.map-svg:focus { outline: none; }
.map-svg * { vector-effect: non-scaling-stroke; }
.map-ground { fill: #e8efd9; }
.map-grid-line { fill: none; stroke: rgba(80, 100, 60, 0.12); stroke-width: 0.5; }
.map-grid-line-10 { fill: none; stroke: rgba(80, 100, 60, 0.3); stroke-width: 1; }
.map-edge { fill: none; stroke: var(--soil-edge); stroke-width: 2; stroke-dasharray: 6 4; }
/* The Yard tool */
.map-ypiece { fill: rgba(74, 107, 79, 0.06); stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; cursor: pointer; }
.map-ypiece:hover { fill: rgba(74, 107, 79, 0.14); }
.map-ypiece.selected { fill: rgba(74, 107, 79, 0.18); stroke-width: 3; stroke-dasharray: none; }
.map-svg.mode-yard { cursor: crosshair; }
.map-svg.mode-yard .map-item { pointer-events: none; }
.map-item { cursor: pointer; outline: none; }
.map-item.dragging { opacity: 0.85; cursor: grabbing; }
.map-soil { fill: var(--soil); }
.map-outline { fill: none; stroke: var(--soil-edge); stroke-width: 2.5; }
.map-crop { fill: hsl(var(--h) var(--crop-s) var(--l, var(--crop-l))); stroke: hsl(var(--h) 40% var(--crop-edge)); stroke-width: 0.8; }
/* A square planted for other months (hidden in the month shown) */
.map-later { fill: hsl(var(--h) var(--crop-s) var(--crop-l) / 0.18); stroke: hsl(var(--h) 40% var(--crop-edge)); stroke-width: 0.8; stroke-dasharray: 2 1.5; pointer-events: none; }
.map-row-under { opacity: 0.35; }   /* a row's color stripe, under its plant pictures */
.map-later-art { opacity: 0.55; filter: grayscale(0.35); pointer-events: none; }   /* planted for another month: faded, so it reads as "not now" */
.map-pot-empty { fill: var(--surface); stroke: var(--terra); stroke-width: 1.5; }
.map-pots .map-soil { fill: transparent; }
.map-pots .map-outline { stroke: var(--terra); stroke-dasharray: 3 3; stroke-width: 1.5; }
.map-label { fill: var(--text); font-family: var(--font); font-weight: 700; paint-order: stroke; stroke: #e8efd9; stroke-width: 3; }
.map-lm-label { fill: var(--text); font-family: var(--font); font-weight: 600; pointer-events: none; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; stroke-opacity: 0.85; }   /* a halo, to read over the painted landmarks */
.map-lm-shape { stroke-width: 1.5; }
.kind-house .map-lm-shape { fill: #c9b9a2; stroke: #7d6a52; }
.kind-shed .map-lm-shape { fill: #d8b99b; stroke: #8a6a4a; }
.kind-tree .map-lm-shape { fill: rgba(74, 128, 70, 0.45); stroke: #3f7a3f; }
.kind-bush .map-lm-shape { fill: rgba(96, 150, 80, 0.5); stroke: #4d8a44; }
.kind-fence .map-lm-shape { fill: #8a6a4a; stroke: #6a4f35; }
.kind-path .map-lm-shape { fill: #e4dccd; stroke: #b8ab93; stroke-dasharray: 4 3; }
.kind-patio .map-lm-shape { fill: #ddd6c8; stroke: #a89c86; }
.kind-water .map-lm-shape { fill: #7fa6c9; stroke: #4f7aa0; }
.kind-compost .map-lm-shape { fill: #9a7b58; stroke: #6a4f35; }
.map-item.selected .map-outline, .map-item.selected .map-lm-shape,
.map-item:focus-visible .map-outline, .map-item:focus-visible .map-lm-shape { stroke: var(--accent); stroke-width: 4; stroke-dasharray: none; }
.map-item.blocked .map-outline, .map-item.blocked .map-lm-shape { stroke: var(--warn); stroke-width: 4; }
/* A painted landmark hides its drawn shape (inline style), except the outline when selected or blocked */
.map-item.selected .map-lm-shape, .map-item:focus-visible .map-lm-shape, .map-item.blocked .map-lm-shape { stroke-opacity: 1 !important; }
.map-shade { fill: rgba(40, 40, 70, 0.22); pointer-events: none; }
.map-gap-line { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 3; pointer-events: none; }
.map-gap-text { fill: var(--accent); font-family: var(--font); font-weight: 700; paint-order: stroke; stroke: var(--surface); stroke-width: 3; pointer-events: none; }
.map-north-bg { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1; }
.map-north-arrow { fill: var(--terra); }
.map-north-text { fill: var(--text); font-family: var(--font); font-weight: 700; }
.map-scale { stroke: var(--text); stroke-width: 2; }
.map-scale-text { fill: var(--text); font-family: var(--font); }
.map-panel .tool-title .icon { color: var(--accent); }
.map-panel .add-plot { margin: 8px 0; }
.map-yard { margin-top: 10px; }
.map-yard summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 0.92rem; }
.map-yard form { margin-top: 8px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .map-ground { fill: #2c3326; }
  :root:not([data-theme="light"]) .map-label { stroke: #2c3326; }
  :root:not([data-theme="light"]) .map-grid-line { stroke: rgba(200, 220, 180, 0.08); }
  :root:not([data-theme="light"]) .map-grid-line-10 { stroke: rgba(200, 220, 180, 0.2); }
  :root:not([data-theme="light"]) .map-shade { fill: rgba(0, 0, 0, 0.4); }
  :root:not([data-theme="light"]) .kind-house .map-lm-shape { fill: #6f665a; stroke: #9a8d7a; } :root:not([data-theme="light"]) .kind-shed .map-lm-shape { fill: #6b5543; stroke: #9a7a5c; }
  :root:not([data-theme="light"]) .kind-path .map-lm-shape { fill: #4d473d; stroke: #6d6555; } :root:not([data-theme="light"]) .kind-patio .map-lm-shape { fill: #4a453c; stroke: #6d6555; }
}
:root[data-theme="dark"] .map-ground { fill: #2c3326; }
:root[data-theme="dark"] .map-label { stroke: #2c3326; }
:root[data-theme="dark"] .map-grid-line { stroke: rgba(200, 220, 180, 0.08); }
:root[data-theme="dark"] .map-grid-line-10 { stroke: rgba(200, 220, 180, 0.2); }
:root[data-theme="dark"] .map-shade { fill: rgba(0, 0, 0, 0.4); }
:root[data-theme="dark"] .kind-house .map-lm-shape { fill: #6f665a; stroke: #9a8d7a; } :root[data-theme="dark"] .kind-shed .map-lm-shape { fill: #6b5543; stroke: #9a7a5c; }
:root[data-theme="dark"] .kind-path .map-lm-shape { fill: #4d473d; stroke: #6d6555; } :root[data-theme="dark"] .kind-patio .map-lm-shape { fill: #4a453c; stroke: #6d6555; }
@media (max-width: 640px) {
  .map-zoom { right: 8px; }
}


/* ---------- Garden map layout: menus in the header, one strip for the tool in use, the tools on the map ---------- */
.map-head-btns { flex-wrap: wrap; justify-content: flex-end; }
.map-add-menu > summary { background: var(--accent); color: var(--accent-ink); border-radius: 999px; font-weight: 600; gap: 6px; padding: 6px 14px; }
.map-add-menu[open] > summary { background: var(--accent); color: var(--accent-ink); filter: brightness(1.07); }
.map-add-list { min-width: 300px; }
.menu-head { margin: 8px 8px 4px; font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.menu-sep { width: auto; height: 1px; margin: 4px 6px; border: 0; background: var(--border); }
.map-add-list .lm-palette { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 4px 4px; }
.map-add-list .lm-chip { flex-direction: column; gap: 3px; padding: 8px 4px; border-radius: 10px; font-size: 0.78rem; }
.map-add-list .lm-glyph { width: 24px; height: 24px; }
/* The strip: the tool's name, how it works, and its options */
.map-options { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 10px; padding: 7px 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.map-options .map-hint { flex: 1 1 260px; margin: 0; }
.map-strip-name { font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-strong); }
/* The tool rail, undo / redo, and help, floating on the map */
.map-rail {
  position: absolute; left: 10px; top: 58px; z-index: 6; display: grid; gap: 3px; padding: 5px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: 0 4px 16px rgba(40, 30, 10, 0.18);
}
.map-rail button {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 62px; min-height: 50px; margin: 0; padding: 6px 3px 5px; border: 0; border-radius: 10px; background: none; color: var(--text);
}
.map-rail button:hover { background: var(--track); filter: none; }
.map-rail button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); box-shadow: inset 0 0 0 1.5px var(--accent); }
.map-rail .icon { width: 20px; height: 20px; }
.map-rail .tab-label { font-size: 0.68rem; font-weight: 600; line-height: 1.15; text-align: center; }
.map-history .tab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Keyboard letters mean nothing on a touch screen (the buttons' tooltips still name them) */
@media (hover: none) and (pointer: coarse) { .plot-rail kbd, .map-menu-tools kbd { display: none; } }
/* The less-used tools, in the More menu */
.map-menu-tools { display: grid; }
.map-menu-tools .menu-item kbd { margin-left: auto; padding: 0 5px; font-family: var(--font); font-size: 0.72rem; color: var(--muted); }
.map-menu-tools .menu-item[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); }
/* Next step: plant your plot */
.map-next { top: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 200px);
  padding: 8px 8px 8px 14px; border-left: 4px solid var(--accent); }
.map-next[hidden] { display: none; }
.map-next p { margin: 0; font-size: 0.88rem; }
.map-next .small-btn { margin: 0; white-space: nowrap; }
.map-next-close { margin: 0; }
/* Planting: a crop's spacing and dates */
.map-crop-info, .fp-info { color: var(--text); }
.fp-info { margin: 6px 0 8px; }
.md-plant { margin-bottom: 4px; }
.md-plant .small-btn { flex: 1 1 auto; justify-content: center; padding-top: 8px; padding-bottom: 8px; }
.md-plant-note { margin: 0 0 10px; }
/* With status colors on, plots that need you say so under them */
.map-st-label { font-family: var(--font); font-weight: 700; paint-order: stroke; stroke: #e8efd9; stroke-width: 3; fill: var(--st, var(--text)); }
:root[data-theme="dark"] .map-st-label { stroke: #2c3326; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .map-st-label { stroke: #2c3326; } }
.map-rail-sep { height: 1px; margin: 2px 5px; background: var(--border); }
.map-float { position: absolute; z-index: 6; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 4px 16px rgba(40, 30, 10, 0.18); }
.map-history { left: 10px; top: 10px; display: flex; gap: 2px; padding: 3px; }
.map-history .secondary { margin: 0; padding: 5px 9px; border: 0; background: none; }
.map-history .secondary:hover:not(:disabled) { background: var(--track); }
.map-help { right: 10px; top: 10px; }
.map-help > summary { list-style: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; font-weight: 800; cursor: pointer; }
.map-help > summary::-webkit-details-marker { display: none; }
.map-help[open] > summary { background: var(--accent-soft); }
.map-help-body {
  position: absolute; right: 0; top: calc(100% + 6px); width: min(330px, 80vw); padding: 12px 14px; font-size: 0.85rem;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-lg);
}
.map-help-body h3 { margin: 0 0 4px; font-size: 0.9rem; }
.map-help-body ul { margin: 0 0 10px; padding-left: 18px; }
.map-help-body p { margin: 0; }
.map-help-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; padding: 0 !important; list-style: none; }
.map-help-keys kbd { display: inline-block; min-width: 20px; margin-right: 4px; padding: 0 4px; border: 1px solid var(--border-strong); border-radius: 5px;
  background: var(--surface-2); font-family: var(--font); font-size: 0.74rem; text-align: center; }
/* The map fills the window's height, with the season along its bottom */
.map-wrap { display: flex; flex-direction: column; height: max(420px, min(calc(100vh - 280px), 900px)); }   /* ends at the bottom of the window */
.map-wrap > .map-svg { flex: 1 1 auto; min-height: 0; height: auto; }
.map-zoom { bottom: 62px; }
.map-time { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 7px 12px; border-top: 1px solid var(--border); background: var(--surface); }
.map-time .map-month { flex: 1 1 240px; }
.map-time .map-month input { width: 100%; }
.map-time output { min-width: 5.5em; font-weight: 700; }
.map-time .icon-btn { margin: 0; }
.map-play { flex: none; width: 34px; height: 34px; margin: 0; padding: 0; border-radius: 50%; font-size: 0.8rem; }
.map-play[aria-pressed="true"] { font-size: 0.7rem; letter-spacing: -1px; }
.map-time-track { flex: 1 1 260px; display: grid; gap: 0; }
.map-time-track .map-month { display: block; }
.map-time-track input { display: block; width: 100%; margin: 0; }
.map-time-months { display: flex; justify-content: space-between; }
.map-time-months button {
  margin: 0; padding: 1px 3px; border: 0; border-radius: 999px; background: none; color: var(--muted);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.map-time-months button:hover { color: var(--text); filter: none; }
.map-time-months button.now { color: var(--accent-strong); }
.map-time-months button.on { background: var(--accent-soft); color: var(--accent-strong); }
.map-time-months button { position: relative; }
.map-time-months button.has-plant::before, .map-time-months button.has-harvest::after {
  content: ""; position: absolute; bottom: -5px; width: 5px; height: 5px; border-radius: 50%;
}
.map-time-months button.has-plant::before { left: calc(50% - 6px); background: #3b7cc4; }
.map-time-months button.has-harvest::after { left: calc(50% + 1px); background: #d9861c; }
.map-time-months button.has-plant:not(.has-harvest)::before, .map-time-months button.has-harvest:not(.has-plant)::after { left: calc(50% - 2.5px); }
.map-time-label { font-size: 0.82rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.map-time-key { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 0.78rem; color: var(--muted); }
.map-time-key[hidden] { display: none; }
.mt-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.mt-dot + .mt-dot, .map-time-key .mt-harvest { margin-left: 6px; }
.mt-plant { background: #3b7cc4; }
.mt-harvest { background: #d9861c; }
.map-time-track { padding-bottom: 5px; }
/* The Selected chip */
.map-selchip { top: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; max-width: calc(100% - 220px);
  padding: 4px 6px 4px 12px; border: 1.5px solid var(--accent); border-radius: 999px; font-size: 0.85rem; white-space: nowrap; overflow: hidden; }
.map-selchip strong { overflow: hidden; text-overflow: ellipsis; }
.map-selchip .small-btn { margin: 0 0 0 4px; padding: 3px 10px; font-size: 0.78rem; }
.map-selchip:not(:has(button)) { padding-right: 12px; }
/* The garden list, grouped */
.md-group-head { display: flex; align-items: center; gap: 6px; margin: 12px 0 6px; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.md-group-head .muted { font-weight: 400; }
.md-picks-compact { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.md-pick-chip { margin: 0; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 0.82rem; font-weight: 500; }
.md-pick-chip:hover { border-color: var(--accent); background: var(--accent-soft); filter: none; }
/* Yard size and Saved layouts, as windows */
.map-dlg { width: min(780px, calc(100vw - 32px)); }
#map-yard-dlg { width: min(560px, calc(100vw - 32px)); }
.map-dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; }
.map-dlg-head .icon-btn { margin: 0; }
.map-dlg-body { padding: 4px 22px 20px; overflow-y: auto; }
.map-dlg-body form { margin-top: 8px; }
.map-north-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 14px; font-weight: 600; }
.map-layouts-dlg .map-layouts { margin: 0; padding: 0; border: 0; background: none; }
.map-layouts-dlg .map-layouts > summary { display: none; }
/* Phones: the tool rail becomes a row along the bottom of the map */
@media (max-width: 640px) {
  .map-wrap { height: min(70vh, 125vw); }
  .map-zoom { bottom: 60px; }
  .map-rail { top: auto; bottom: 58px; left: 8px; grid-auto-flow: column; }
  .map-rail-sep { width: 1px; height: auto; margin: 5px 2px; }
  .map-rail button { width: 58px; min-height: 46px; padding: 5px 2px 4px; }
  .map-next { left: 8px; right: 8px; transform: none; width: auto; max-width: none; top: 52px; }
  .map-next p .muted { display: none; }
}
@media (max-width: 640px) and (pointer: coarse) {
  .map-zoom #map-zoom-in, .map-zoom #map-zoom-out, .map-zoom .zoom-level { display: none; }
}

/* ---------- Weather (js/weather.js) ---------- */
.weather-card:focus { outline: none; }
.weather-card #weather-status { margin: 2px 0 0; }
.wx-now { display: flex; gap: 14px; align-items: flex-start; margin: 6px 0 10px; }
.wx-big { font-size: 2.6rem; line-height: 1; }
.wx-temp { margin: 0; font-size: 1.7rem; font-weight: 700; font-family: var(--font-head); }
.wx-short { font-size: 1rem; font-weight: 600; font-family: var(--font); color: var(--muted); }
.wx-now p { margin: 2px 0; }
.wx-alerts { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.wx-alert { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); }
.wx-alert p { margin: 2px 0 0; }
.wx-alert-icon { font-size: 1.2rem; line-height: 1.3; }
.wx-alert.level-warn { border-color: var(--terra); background: var(--terra-soft); }
.wx-nws { display: block; border-color: var(--warn); border-left-width: 4px; }
.wx-nws summary { cursor: pointer; }
.wx-nws strong { color: var(--warn); }
.wx-desc { white-space: pre-line; }
.wx-days-hint { margin: 10px 0 0; }
.wx-days { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.wx-days li { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); text-align: center; }
.wx-day { font-weight: 700; font-size: 0.85rem; }
.wx-date { color: var(--muted); font-size: 0.75rem; margin-top: -2px; white-space: nowrap; }
.wx-today-tag { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-ink, #fff);
  background: var(--accent); border-radius: 999px; padding: 1px 7px; line-height: 1.4; }
.wx-daybtn.wx-is-today { border-color: var(--accent); }
.wx-icon { font-size: 1.4rem; line-height: 1.2; }
.wx-hilo { font-size: 0.9rem; white-space: nowrap; }
.wx-rain { min-height: 1.2em; color: var(--accent); }
@media (max-width: 640px) {
  .wx-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.wx-head-btns { display: flex; gap: 6px; align-items: center; }
.wx-head-btns .icon-btn { margin: 0; }
#weather-note { margin: 4px 0 0; }
#weather-note:empty { display: none; }
.wx-daybtn {
  display: grid; justify-items: center; gap: 2px; width: 100%; height: 100%; margin: 0; padding: 8px 4px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-weight: 400; text-align: center;
}
.wx-days li { padding: 0; background: none; border: 0; }
.wx-daybtn:hover { background: var(--accent-soft); filter: none; }
.wx-daybtn[aria-expanded="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.weather-card { min-width: 0; }
.wx-hours { overflow: hidden; margin-top: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); }
.wx-hours-title { margin: 0 0 8px; font-size: 1rem; }
.wx-hours-list { list-style: none; margin: 0; padding: 0 0 4px; display: flex; gap: 6px; overflow-x: auto; }
.wx-hours-list li { position: relative; flex: none; width: 64px; display: grid; justify-items: center; gap: 1px; padding: 6px 2px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); text-align: center; }
.wx-h-time { font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.task-weather .pill.weather { background: var(--terra); color: #fff; }
.wx-task-rain .pill.weather { background: var(--frost); color: #0f1a2a; }

/* Rain log */
.wx-rainlog { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.wx-rainlog summary { cursor: pointer; padding: 2px 0; }
.wx-rainlog summary h3 { display: inline; margin: 0 6px 0 2px; font-size: 1rem; }
.wx-rainlog[open] summary { margin-bottom: 10px; }
.wx-rainbars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; }
.wx-rainbars li { display: grid; justify-items: center; gap: 2px; }
.wx-rainbar { position: relative; display: block; width: 60%; height: 56px; border-radius: 6px 6px 2px 2px; background: var(--track); overflow: hidden; }
.wx-rainbar span { position: absolute; left: 0; right: 0; bottom: 0; background: #4f86c6; }
.src-gauge .wx-rainbar span { background: #2d5f99; }
.wx-rainamt { font-weight: 600; white-space: nowrap; }
.wx-rday { color: var(--muted); }
.wx-gauge { margin-top: 10px; }
.wx-gauge input[type="date"] { max-width: 170px; }
.wx-gauge .link-btn { margin: 0; align-self: center; }

/* ---------- The weather card's sky: frosted glass over a sky that follows the weather now ----------
   js/weather.js sets data-sky (clear, partly, cloudy, rain, storm, snow, fog) and data-night on the card and the popup.
   Clouds drift and rain or snow falls (stopped for "reduce motion"); nothing flashes. */
.wx-sky {
  --sky: var(--sky-clear); --cloud: var(--wx-cloud); --sky-stars: none; --sky-clouds: none; --sky-fall: none; --fall-time: 0.8s;
  --sky-glow: radial-gradient(360px 240px at 92% -16%, var(--sky-sun), transparent 70%);
  --clouds-few:
    radial-gradient(150px 46px at 12% 16%, var(--cloud), transparent 70%), radial-gradient(190px 60px at 19% 11%, var(--cloud), transparent 70%),
    radial-gradient(130px 42px at 26% 17%, var(--cloud), transparent 70%), radial-gradient(170px 52px at 64% 9%, var(--cloud), transparent 70%),
    radial-gradient(120px 40px at 71% 13%, var(--cloud), transparent 70%);
  --clouds-many: var(--clouds-few),
    radial-gradient(200px 60px at 40% 12%, var(--cloud), transparent 70%), radial-gradient(150px 48px at 48% 18%, var(--cloud), transparent 70%),
    radial-gradient(220px 66px at 86% 12%, var(--cloud), transparent 70%), radial-gradient(150px 46px at 94% 20%, var(--cloud), transparent 70%),
    radial-gradient(170px 54px at 4% 9%, var(--cloud), transparent 70%), radial-gradient(240px 80px at 55% 2%, var(--cloud), transparent 70%);
  --muted: var(--wx-muted);
  position: relative; isolation: isolate; overflow: hidden; color: var(--text); border-color: var(--wx-pane-edge);
  background: var(--sky-glow), var(--sky-stars) 0 0 / 160px 100px, var(--sky);
}
.wx-sky::before, .wx-sky::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.wx-sky::before { top: 0; bottom: 0; left: -15%; right: -15%; background: var(--sky-clouds); animation: wx-drift 70s ease-in-out infinite alternate; }
.wx-sky::after { top: -120px; bottom: 0; left: 0; right: 0; background: var(--sky-fall) 0 0 / 120px 120px; }
@keyframes wx-drift { from { transform: translateX(-5%); } to { transform: translateX(5%); } }
@keyframes wx-fall { to { transform: translateY(120px); } }
.wx-sky[data-sky="partly"] { --sky: var(--sky-partly); --sky-clouds: var(--clouds-few); }
.wx-sky[data-sky="cloudy"] { --sky: var(--sky-cloudy); --sky-glow: none; --sky-clouds: var(--clouds-many); }
.wx-sky[data-sky="rain"] { --sky: var(--sky-rain); --sky-glow: none; --sky-clouds: var(--clouds-many); --sky-fall: var(--rain-streaks); }
.wx-sky[data-sky="storm"] { --sky: var(--sky-storm); --sky-glow: none; --cloud: rgba(60, 72, 90, 0.8); --sky-clouds: var(--clouds-many); --sky-fall: var(--rain-white); --fall-time: 0.6s; }
.wx-sky[data-sky="snow"] { --sky: var(--sky-snow); --sky-glow: none; --sky-clouds: var(--clouds-many); --sky-fall: var(--snowflakes); --fall-time: 7s; }
.wx-sky[data-sky="fog"] {
  --sky: var(--sky-fog); --sky-glow: none;
  --sky-clouds: linear-gradient(180deg, transparent 6%, var(--wx-fog) 16%, transparent 27%, transparent 40%, var(--wx-fog) 50%, transparent 61%, transparent 72%, var(--wx-fog) 82%, transparent 93%);
}
.wx-sky[data-sky="rain"]::after, .wx-sky[data-sky="storm"]::after, .wx-sky[data-sky="snow"]::after { animation: wx-fall var(--fall-time) linear infinite; }
/* Night: a dark sky with the moon's glow (and stars when it's clear), and light text on smoky glass; a storm is dark too */
.wx-sky[data-night="true"] { --sky: var(--sky-night); --cloud: rgba(170, 186, 212, 0.22); --sky-glow: radial-gradient(190px 150px at 92% -10%, rgba(215, 228, 255, 0.4), transparent 70%); }
.wx-sky[data-night="true"][data-sky="clear"], .wx-sky[data-night="true"][data-sky="partly"] { --sky-stars: var(--stars); }
.wx-sky[data-night="true"]:not([data-sky="clear"]):not([data-sky="partly"]) { --sky-glow: none; }
.wx-sky[data-night="true"], .wx-sky[data-sky="storm"] {
  --text: #f2f5fa; --muted: #c3cfdd; --border: rgba(255, 255, 255, 0.22); --border-strong: rgba(255, 255, 255, 0.3); --track: rgba(255, 255, 255, 0.12);
  --accent: #a8d5ab; --accent-strong: #c4e6c6; --accent-ink: #14261a; --accent-soft: rgba(168, 213, 171, 0.2);
  --terra: #f0a07c; --terra-soft: rgba(224, 138, 98, 0.22); --warn: #ffab85; --surface: #22304a; --surface-2: #293957;
  --wx-pane: rgba(255, 255, 255, 0.1); --wx-pane-strong: rgba(255, 255, 255, 0.16); --wx-pane-edge: rgba(255, 255, 255, 0.2);
  --wx-pane-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --wx-fog: rgba(255, 255, 255, 0.12); --rain-streaks: var(--rain-white); color-scheme: dark;
}
/* Painted skies (images/skies/, cut by tools/build-skies.js) over the drawn gradient, which shows if one can't load. They have
   their own clouds, so the drawn clouds go; the falling rain and snow stay on top. Night dims a cloudy sky; the dark theme
   dims them all a little. */
.wx-sky { --sky-paint: url("../images/skies/clear.webp"); --sky-dim: linear-gradient(transparent, transparent); --theme-dim: linear-gradient(transparent, transparent); }
.wx-sky[data-sky="partly"] { --sky-paint: url("../images/skies/partly.webp"); }
.wx-sky[data-sky="cloudy"] { --sky-paint: url("../images/skies/cloudy.webp"); }
.wx-sky[data-sky="rain"] { --sky-paint: url("../images/skies/rain.webp"); }
.wx-sky[data-sky="storm"] { --sky-paint: url("../images/skies/storm.webp"); }
.wx-sky[data-sky="snow"] { --sky-paint: url("../images/skies/snow.webp"); }
.wx-sky[data-sky="fog"] { --sky-paint: url("../images/skies/fog.webp"); }
.wx-sky[data-night="true"][data-sky="clear"], .wx-sky[data-night="true"][data-sky="partly"] { --sky-paint: url("../images/skies/night.webp"); }
.wx-sky[data-night="true"]:not([data-sky="clear"]):not([data-sky="partly"]) { --sky-dim: linear-gradient(rgba(14, 22, 40, 0.6), rgba(14, 22, 40, 0.6)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wx-sky { --theme-dim: linear-gradient(rgba(16, 20, 28, 0.55), rgba(16, 20, 28, 0.55)); } }
:root[data-theme="dark"] .wx-sky { --theme-dim: linear-gradient(rgba(16, 20, 28, 0.55), rgba(16, 20, 28, 0.55)); }
.wx-sky.wx-sky { background: var(--sky-dim), var(--theme-dim), var(--sky-paint) 50% 100% / cover no-repeat, var(--sky); }
.wx-sky.wx-sky::before { display: none; }

/* The frosted panes: now, alerts, the days, the hours, the rain log, and the buttons */
.wx-sky .wx-now, .wx-sky .wx-alert, .wx-sky .wx-daybtn, .wx-sky .wx-hours, .wx-sky .wx-rainlog, .wx-sky .icon-btn {
  background: var(--wx-pane); border: 1px solid var(--wx-pane-edge); box-shadow: var(--wx-pane-shadow);
  -webkit-backdrop-filter: blur(8px) saturate(1.3); backdrop-filter: blur(8px) saturate(1.3);
}
.wx-sky .wx-now { margin: 6px 0 12px; padding: 12px 16px; border-radius: 16px; }
.wx-sky .wx-alert.level-warn { background: color-mix(in srgb, var(--terra-soft) 80%, transparent); border-color: color-mix(in srgb, var(--terra) 50%, transparent); }
.wx-sky .wx-nws { border-left: 4px solid var(--warn); }
.wx-sky .wx-daybtn { border-radius: 12px; }
.wx-sky .wx-daybtn:hover, .wx-sky .icon-btn:hover { background: var(--wx-pane-strong); }
.wx-sky .wx-daybtn.wx-is-today { border-color: var(--accent); }
.wx-sky .wx-daybtn[aria-expanded="true"] { background: var(--wx-pane-strong); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), var(--wx-pane-shadow); }
.wx-sky .wx-hours { border-radius: 14px; }
.wx-sky .wx-hours-list li { background: var(--wx-pane-strong); border-color: var(--wx-pane-edge); }
.wx-sky .wx-rainlog { margin-top: 12px; padding: 10px 14px; border-radius: 14px; }
.wx-sky .icon-btn { color: var(--text); }

/* In my garden tag (plant card) */
.tag-mine { color: var(--accent); border-color: var(--accent); font-weight: 600; white-space: nowrap; }

/* ---------- Plant card ---------- */
.plant-dialog { width: min(820px, calc(100vw - 24px)); }
/* Weather popup from the sidebar temperature (js/weather.js) */
.wx-pop { width: min(680px, calc(100vw - 24px)); }
.wx-pop-head { padding-bottom: 4px; margin-bottom: 0; flex-wrap: nowrap; }
.wx-pop-head > div:first-child { min-width: 0; }
.wx-pop-head #wx-pop-status { margin: 2px 0 0; }
.wx-pop-body { overflow-y: auto; padding: 0 22px 18px; }
.pc-head { padding: 14px 22px 10px; border-bottom: 1px solid var(--border); }
.pc-nav { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.pc-nav .icon-btn { margin: 0; }
.pc-nav .pc-close { margin-left: auto; font-size: 1rem; }
.pc-step { display: inline-flex; align-items: center; gap: 6px; }
.pc-step .icon-btn { font-size: 1.1rem; padding: 0 10px; }
.pc-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.pc-title h2 { margin: 0; font-size: 1.6rem; }
.pc-title h2:focus { outline: none; }
.pc-swatch { width: 18px; height: 18px; margin: 0; border-radius: 5px; }
.pc-head > p { margin: 4px 0 0; }
.pc-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.pc-actions .small-btn { margin: 0; }
.pc-actions .icon { width: 15px; height: 15px; }
.pc-compare-pick { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.pc-compare-pick select { max-width: 190px; padding: 5px 8px; }
.pc-link { width: 100%; margin-top: 8px; font-size: 0.85rem; }
.pc-head .status { margin: 4px 0 0; min-height: 0; }
.pc-body { overflow-y: auto; padding: 4px 22px 18px; }
.pc-photo { position: relative; margin: 12px 0 4px; }
.pc-photo img, .pc-photo .photo-missing { display: block; width: 100%; height: auto; max-height: 300px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-2); }
/* Photo credit: a small label in the photo's bottom corner (plant cards and pests) */
.photo-credit {
  position: absolute; right: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 1px 7px; border-radius: 6px;
  background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.68rem; line-height: 1.5; opacity: 0.85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;   /* one line; the full credit is in its title and link */
}
.photo-credit:hover, .photo-credit:focus-within { opacity: 1; }
.photo-credit a { color: inherit; text-decoration: none; }
.photo-credit a:hover, .photo-credit a:focus-visible { text-decoration: underline; }
.pc-sec { padding: 12px 0; border-bottom: 1px solid var(--border); }
.pc-sec:last-child { border-bottom: 0; }
.pc-sec h3 { margin: 0 0 8px; font-size: 1.1rem; }
.pc-sub { margin: 10px 0 4px; font-size: 0.88rem; }
.pc-dl { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: 5px 14px; margin: 8px 0; font-size: 0.9rem; }
.pc-dl dt { color: var(--muted); font-weight: 600; }
.pc-dl dd { margin: 0; }
.pc-traits { margin: 8px 0; padding-left: 18px; font-size: 0.88rem; }
.pc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.pc-chip { margin: 0; }
.pc-avoid, .pc-varieties, .pc-list { margin: 4px 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 0.9rem; }
.pc-list .md-progress { max-width: 320px; }
.pc-compare { min-width: 0; font-size: 0.88rem; }
.pc-compare th[scope="row"] { font-size: 0.8rem; color: var(--muted); text-transform: none; letter-spacing: 0; white-space: nowrap; }
.pc-compare tr.pc-diff td { background: var(--accent-soft); }
.pc-compare thead .pc-chip { font-weight: 700; }
@media (max-width: 560px) {
  .pc-head, .pc-body { padding-left: 14px; padding-right: 14px; }
  .pc-dl { grid-template-columns: 1fr; gap: 0 0; }
  .pc-dl dd { margin-bottom: 6px; }
  .pc-compare-pick { margin-left: 0; }
}

/* Jan–Dec timeline */
.pc-tl { margin: 10px 0 6px; }
.pc-tl-marks { position: relative; height: 22px; }
.pc-tl-marks.two-marks { height: 40px; }
.pc-tl-marks .tl-mark { top: auto; bottom: 2px; font-size: 0.64rem; padding: 0 6px; }
.pc-tl-marks .tl-mark.up { bottom: 20px; }
.pc-tl-months { display: grid; grid-template-columns: repeat(12, 1fr); margin-top: 3px; font-size: 0.7rem; color: var(--muted); text-align: center; }
.pc-tl-track { position: relative; height: 26px; border-radius: 8px; overflow: hidden; background: var(--track);
  background-image: linear-gradient(90deg, transparent calc(100% - 1px), var(--border) 0); background-size: calc(100% / 12) 100%; }
.pc-seg { position: absolute; top: 6px; height: 14px; border-radius: 999px; }
.seg-indoors { --seg: var(--indoor); }
.seg-plant { --seg: var(--plant); }
.seg-harvest { --seg: var(--harvest); }
.pc-seg { background: var(--seg); }
.pc-seg.est { background: repeating-linear-gradient(135deg, var(--seg) 0 4px, transparent 4px 7px); box-shadow: inset 0 0 0 1px var(--seg); }
.pc-tl-track .tl-tail { top: 11px; }
.pc-tl-track .tl-grow { top: 12px; }
.pc-frost, .pc-today { position: absolute; top: 0; bottom: 0; }
.pc-frost { border-left: 2px solid color-mix(in srgb, var(--frost) 70%, transparent); }
.pc-today { width: 2px; background: var(--today); z-index: 2; }
/* The dates under the card's timeline, each with a dot in its bar's color */
.pc-dates { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); align-items: start; gap: 8px 16px; margin: 8px 0 10px; padding: 0; list-style: none; }
.pc-dates-title { margin: 12px 0 0; font-size: 0.78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pc-dates-title + .pc-dates { margin-top: 4px; }
.pc-dates li { display: grid; grid-template-columns: 12px 1fr; gap: 0 8px; align-items: center; font-size: 0.8rem; color: var(--muted); }
.pc-dates li::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--seg); }
.pc-dates strong { grid-column: 2; color: var(--text); font-size: 0.9rem; }

@media print {
  body.printing-plant > *:not(#plant-card) { display: none !important; }
  /* The card is a popup, and printing hides popups (.picker, below): bring it back as a plain page */
  body.printing-plant #plant-card {
    display: block !important; position: static; inset: auto; margin: 0; width: auto; max-width: none; max-height: none;
    border: 0; box-shadow: none; padding: 0; overflow: visible;
  }
  body.printing-plant #plant-card::backdrop { display: none; }
  body.printing-plant .pc-nav, body.printing-plant .pc-actions, body.printing-plant #pc-status,
  body.printing-plant [data-pc-sec="similar"] { display: none !important; }
  body.printing-plant .picker-inner, body.printing-plant .pc-body { max-height: none; overflow: visible; }
  body.printing-plant .pc-seg, body.printing-plant .pc-today, body.printing-plant .pc-tl-track, body.printing-plant .pc-dates li::before,
  body.printing-plant .tl-link, body.printing-plant .frost-season,
  body.printing-plant .md-progress span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Plant guide (plants.html, js/guide.js) ---------- */
.guide-tools { padding: 14px 16px; }
.guide-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.guide-row + .guide-row { margin-top: 10px; }
.guide-row label.small { display: inline-flex; align-items: center; gap: 6px; }
.guide-search { flex: 1 1 280px; }
/* Filter checkboxes (the calendar's pill checkboxes) and the Sort switch, each row with a small label */
.guide-filters { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 12px; }
.guide-set { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.guide-set-wide { flex-basis: 100%; }
.guide-set-label { min-width: 52px; font-size: 0.82rem; font-weight: 700; color: var(--muted); }
.guide-set .type-checks { flex-basis: auto; }
.type-checks label.mine-check { margin-right: 10px; border-style: dashed; }
.type-checks label.mine-check:has(input:checked) { border-style: solid; }
#guide-sorting { margin-top: 12px; }
.guide-sort .tab { padding: 6px 14px; }
.guide-filters-btn { display: none; margin: 0; }
@media (max-width: 640px) {
  .guide-filters-btn { display: inline-flex; }
  .guide-search { flex-basis: 0; min-width: 0; }
  .guide-tools:not(.filters-open) .guide-fold { display: none; }
  .guide-set { flex-direction: column; align-items: flex-start; gap: 4px; }
  .guide-sort { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .guide-sort .tab { padding: 6px 9px; font-size: 0.84rem; white-space: nowrap; }
}
.guide-search input { width: 100%; }
.guide-view .tab { padding: 6px 14px; }
.guide-tools .muted.small { margin: 8px 0 0; }
.guide-count { font-weight: 600; }
.guide-group { margin: 22px 0 8px; }
.guide-group h3 { font-size: 1.2rem; margin: 0 0 10px; }
.guide-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.gt { display: flex; flex-direction: column; border: 1px solid var(--glass-panel-edge); border-radius: 14px; background: var(--glass-sheen), var(--glass-tile); box-shadow: var(--shadow), var(--glass-panel-hi); overflow: hidden; }
.gt:hover { border-color: var(--accent); }
.gt-link { display: grid; align-content: start; gap: 2px; padding: 12px 14px 6px; color: var(--text); text-decoration: none; flex: 1; }
.gt-link:hover strong { color: var(--accent); text-decoration: underline; }
.gt-photo { display: block; width: calc(100% + 28px); max-width: none; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin: -12px -14px 6px; background: var(--surface-2); }
.gt-name { display: flex; align-items: center; gap: 6px; font-size: 1rem; }
.gt-name .swatch { margin: 0; flex: none; }
.gt-facts { color: var(--text); }
.gt-foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px 14px 10px; }
.gt-badge { font-size: 0.72rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.gt-badge.now-now { background: var(--plant); color: #10240f; }
.gt-badge.now-indoors { background: var(--indoor); color: #1e1433; }
.gt-badge.now-soon { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); }
.gt-garden {
  margin: 0 0 0 auto; padding: 3px 10px; font-size: 0.78rem; font-weight: 600; border-radius: 999px;
  background: transparent; color: var(--accent); border: 1px solid var(--border-strong);
}
.gt-garden[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.gt-garden:hover { filter: none; background: var(--accent-soft); }
/* Phones: two smaller tiles per row, so the guide isn't one long column of big photos */
@media (max-width: 640px) {
  .guide-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gt { border-radius: 12px; }
  .gt-link { gap: 1px; padding: 8px 10px 4px; }
  .gt-photo { width: calc(100% + 20px); margin: -8px -10px 6px; }
  .gt-name { gap: 4px; font-size: 0.92rem; line-height: 1.25; }
  .gt-name .plant-icon { width: 1.5em; height: 1.5em; margin-right: 2px; }
  .gt-link .small { font-size: 0.75rem; line-height: 1.35; }
  .gt-foot { gap: 4px; padding: 4px 10px 8px; }
  .gt-garden { padding: 3px 8px; font-size: 0.72rem; }
}
.guide-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--glass-panel-edge); border-radius: 12px; background: var(--glass-sheen), var(--glass-tile); box-shadow: var(--glass-panel-hi); overflow: hidden; }
.gl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.gl-row:last-child { border-bottom: 0; }
.gl-row .gt-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; flex: 0 1 auto; }
.gl-row .swatch { margin: 0; }
.gl-facts { flex: 1 1 200px; }
.gl-badges { display: inline-flex; gap: 6px; }
.gl-row .gt-garden { margin-left: 0; }
.gl-letters { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.gl-letters a { min-width: 28px; text-align: center; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); text-decoration: none; font-weight: 700; font-size: 0.85rem; }
.gl-letter { margin: 12px 0 4px; font-size: 0.95rem; color: var(--muted); scroll-margin-top: 12px; }
.plant-page { padding: 0; overflow: hidden; }
.plant-page .picker-inner { max-height: none; }
.plant-page .pc-body { overflow: visible; }
.pc-all { margin: 0; text-decoration: none; font-size: 0.9rem; }
@media print {
  .guide-page .guide-tools, .guide-page .gt-garden, .guide-page .gl-letters { display: none !important; }
  .plant-page .pc-nav, .plant-page .pc-actions, .plant-page #pc-status, .plant-page [data-pc-sec="similar"] { display: none !important; }
  .plant-page { border: 0; box-shadow: none; }
  .plant-page .pc-seg, .plant-page .pc-today, .plant-page .pc-dates li::before, .plant-page .tl-link, .plant-page .frost-season, .plant-page .md-progress span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Pests and diseases (pests.html, js/pestguide.js) ---------- */
.pest-crop select { min-width: 150px; font-size: 1rem; }
/* On a phone the search box gets its own line, and "On any plant" goes under it */
@media (max-width: 640px) {
  .guide-row .pest-crop { flex: 1 1 100%; min-width: 0; }
  .pest-crop select { flex: 1; min-width: 0; }
}
.pest-signs { margin-top: 12px; align-items: flex-start; }
.pest-signs .guide-set-label { padding-top: 5px; }
.pest-sign-list { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 400px; }
.pest-sign { font-size: 0.84rem; }
.pest-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.pt { border: 1px solid var(--glass-panel-edge); border-radius: 14px; background: var(--glass-sheen), var(--glass-tile); box-shadow: var(--shadow), var(--glass-panel-hi); overflow: hidden; }
.pt:hover { border-color: var(--accent); }
.pt-link { display: flex; flex-direction: column; height: 100%; color: var(--text); text-decoration: none; }
.pt-link:hover strong { color: var(--accent); text-decoration: underline; }
.pt-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-2); }
.pt-none, .photo-missing { display: grid; place-items: center; color: var(--muted); background: var(--surface-2); }
.pt-none .icon, .photo-missing .icon { width: 40px; height: 40px; }
.pt-text { display: grid; gap: 2px; padding: 8px 12px 10px; }
.pest-page { max-width: 860px; margin: 0 auto; }
.pest-head h2 { margin: 12px 0 2px; }
.pest-head h2:focus { outline: none; }
.pest-head .icon-btn { text-decoration: none; font-size: 0.9rem; }
.pest-head p { margin: 4px 0; }
.pest-kind { margin-right: 4px; }
.pest-signs-line { display: flex; flex-wrap: wrap; gap: 6px; }
.pest-signs-line .chip { text-decoration: none; font-size: 0.8rem; }
.pest-photos { display: grid; gap: 12px; margin: 14px 0 4px; }
.pest-photos.two { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pest-figure { position: relative; margin: 0; }
.pest-photo { display: block; width: 100%; height: auto; max-height: 460px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-2); }
.pest-photos.two .pest-photo { aspect-ratio: 4 / 3; }
.pest-license { white-space: nowrap; }
.pest-steps { margin: 4px 0; padding-left: 1.2em; display: grid; gap: 4px; }
.pest-body .pc-chips .chip, .pc-sec[data-pc-sec="pests"] .chip { text-decoration: none; }
.chip.pest-mine { border-color: var(--accent); background: var(--accent-soft); }
.pest-foot { margin: 12px 0 0; }
@media print {
  .pests-page .guide-tools, .pest-head .icon-btn { display: none !important; }
  .pest-page { border: 0; box-shadow: none; max-width: none; }
  .pest-photo { max-height: 300px; }
}

/* ---------- Garden supplies, How-to guides, Tips and tricks (js/learn.js) ---------- */
.aff-note { margin: 8px 0 0; padding: 6px 12px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 8px 8px 0; color: var(--muted); }
.learn-chips { gap: 6px; margin-top: 10px; }
.learn-chips .chip { font-size: 0.84rem; }
/* Phones: the filter chips scroll sideways in one row instead of stacking up four or five rows deep */
@media (max-width: 600px) {
  .learn-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 2px 16px 4px; scrollbar-width: none; }
  .learn-chips::-webkit-scrollbar { display: none; }
  .learn-chips .chip { flex: none; }
}
.guide-group .h-icon { width: 20px; height: 20px; vertical-align: -3px; }
.sup-grid, .tt-grid, .howto-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sup-grid { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.tt-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.howto-grid { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.sup-card, .tt-card, .howto-card {
  border: 1px solid var(--glass-panel-edge); border-radius: 14px; background: var(--glass-sheen), var(--glass-tile); box-shadow: var(--shadow), var(--glass-panel-hi); scroll-margin-top: 80px;
}
.sup-card, .tt-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; }
.sup-card h4, .tt-card h4 { margin: 0; font-size: 1rem; }
.sup-card p, .tt-card p { margin: 0; }
.sup-card .buy-link { margin-top: auto; align-self: flex-start; padding: 7px 14px; font-size: 0.88rem; }
.sup-pic { display: block; width: calc(100% + 28px); max-width: none; height: auto; aspect-ratio: 1 / 1; object-fit: cover; margin: -12px -14px 4px; border-radius: 14px 14px 0 0; border-bottom: 1px solid var(--border); }   /* a picture of the kind of item, across the top of its card */
.sup-card.has-pic { overflow: hidden; }
.sup-card:target, .tt-card:target { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.sup-used a { white-space: nowrap; }
/* Supplies: the Start here badge, safety notes, and the Details under each product */
.sup-start { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  font: 700 0.68rem var(--font); letter-spacing: 0.05em; text-transform: uppercase; vertical-align: 2px; white-space: nowrap; }
.sup-safety { display: flex; gap: 6px; align-items: flex-start; color: var(--warn); }
.sup-safety .icon { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.sup-more summary { cursor: pointer; width: max-content; font-size: 0.88rem; font-weight: 600; color: var(--accent); }
.sup-more summary:hover { text-decoration: underline; }
.sup-more dl { display: grid; gap: 2px; margin: 8px 0 4px; font-size: 0.9rem; }
.sup-more dt { margin-top: 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.sup-more dt:first-child { margin-top: 0; }
.sup-more dd { margin: 0; }
.buy-link .icon, .buy-chip .icon { width: 14px; height: 14px; }
.tt-need { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Tips: "Right now" for this point in the year, a crop filter, and a count by each topic */
.tt-now { margin: 14px 0 0; padding: 14px 16px; border-left: 4px solid var(--accent); }
.tt-now h3 { margin: 0 0 2px; font-size: 1.15rem; }
.tt-now-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tt-now-toggle { margin: 0; flex: none; }
.tt-now.folded { padding-top: 10px; padding-bottom: 10px; }
.tt-now.folded h3 { margin: 0; }
.tt-now .h-icon { width: 20px; height: 20px; vertical-align: -3px; margin-right: 6px; color: var(--accent); }
.tt-now > p { margin: 0; }
.tt-now-list { list-style: none; margin: 10px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 8px 20px; }
.tt-now-list li { display: grid; gap: 1px; padding-left: 12px; border-left: 2px solid var(--border); }
.tt-now-list a { font-weight: 600; }
.tt-crop { margin: 8px 0 0; }
.tt-n { font: 600 0.78rem var(--font); color: var(--muted); background: var(--track); border-radius: 999px; padding: 1px 8px; margin-left: 4px; vertical-align: 3px; }
.buy-chip { text-decoration: none; font-size: 0.8rem; padding: 3px 10px; }
.howto-card:hover { border-color: var(--accent); }
/* A column, so pictures and titles line up across a row and the time and steps line sits at the bottom */
.howto-link { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; color: var(--text); text-decoration: none; }
.howto-link > .small:last-child { margin-top: auto; padding-top: 4px; }
.howto-link strong { font-size: 1.08rem; }
.howto-link:hover strong { color: var(--accent); text-decoration: underline; }
.howto-need { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.howto-need li { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--border); }
.howto-need li > div { flex: 1 1 min(260px, 100%); }
.howto-need p { margin: 2px 0 0; }
.howto-need .buy-link { padding: 7px 14px; font-size: 0.88rem; }
.howto-also { margin: 12px 0 4px; font-size: 0.95rem; }
.howto-steps { gap: 8px; }
.howto-next { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.side-gap { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--glass-edge); }
/* Home page intro for first-time visitors */
.intro h2 { margin: 0 0 12px; }
.intro-restore { margin: 12px 0 0; }
/* Move to another device (js/ui.js openMove) */
.move-dialog { width: min(560px, calc(100vw - 24px)); }
.move-steps { margin: 0; padding: 4px 22px 8px 44px; display: grid; gap: 14px; }
.move-steps p { margin: 4px 0 0; }
.move-steps .icon { width: 1em; height: 1em; vertical-align: -0.12em; }
.move-dialog .picker-foot { flex-wrap: wrap; gap: 8px; }
.intro-grid, .intro-projects { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.intro-grid { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.intro-grid a { display: grid; grid-template-columns: auto 1fr; align-content: start; gap: 2px 10px; height: 100%; box-sizing: border-box; padding: 12px; border: 1px solid var(--border);
  border-radius: 12px; color: var(--text); text-decoration: none; background: var(--surface-2); }
.intro-grid a:hover { border-color: var(--accent); }
.intro-grid .icon { grid-row: span 2; width: 26px; height: 26px; color: var(--accent); }
.intro-grid span { font-size: 0.85rem; color: var(--muted); }
.intro-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 18px 0 8px; }
.intro-head h3 { margin: 0; }
.intro-projects { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.intro-projects a { display: grid; gap: 6px; color: var(--text); text-decoration: none; }
.intro-projects .howto-thumbwrap { margin: 0; border: 1px solid var(--border); border-radius: 12px; }
.intro-projects a:hover strong { color: var(--accent); text-decoration: underline; }
@media print {
  .howto-article .buy-link, .howto-article .aff-inline, .howto-article [aria-labelledby="s-related"], .howto-article [aria-labelledby="hs-related"] { display: none !important; }
  .howto-need li { padding: 2px 0; border: 0; }
  .howto-fig { break-inside: avoid; }
  .hw-fig, .hw-fig * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Pages written ahead of time (tools/build-pages.js): guides/, pests/, plants/ */
.crumbs { margin: 0 0 10px; color: var(--muted); }
.crumbs a { font-weight: 600; }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 4px; }
.share-row .icon-btn { margin-left: 0; display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.share-row .icon-btn .icon { width: 14px; height: 14px; }
.pin-btn { color: #bd081c; border-color: currentColor; font-weight: 600; }
.static-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 6px 0; }
.static-dl dt { font-weight: 600; color: var(--muted); }
.static-dl dd { margin: 0; }
.plant-photo-fig { margin: 14px 0 4px; }
.footer-links a { font-weight: 600; }
@media print { .crumbs, .share-row { display: none !important; } }
/* Product links in context: plant cards, pest pages, the Garden log, and the Today card */
.aff-inline { margin: 4px 0 0; font-size: 0.75rem; }
.buy-inline { white-space: nowrap; }
.buy-inline .icon { width: 12px; height: 12px; margin-left: 2px; vertical-align: -1px; }
.start-gear { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.start-gear p { margin: 0 0 6px; }
.today-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; }
.today-picks[hidden] { display: none; }
.today-tip { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; }
.today-tip[hidden] { display: none; }
.today-tip .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }
@media print { .buy-chip, .buy-inline, .aff-inline, .today-picks, .start-gear, [data-pc-sec="gear"] { display: none !important; } }

/* How-to illustrations (js/howtoart.js): ink, flat colors, and patterns, like a science magazine plate */
:root {
  --hw-paper: #fbf5e8; --hw-paper2: #efe7d6; --hw-ink: #3a332a; --hw-line: #8f826c;
  --hw-wood: #ddbb8b; --hw-wood2: #b98f5d; --hw-soil: #9a7552; --hw-soil2: #6d5038; --hw-soil3: #c7a57e;
  --hw-leaf: #86ad66; --hw-leaf2: #5b8443; --hw-water: #a8cfe0; --hw-water2: #4f8db0; --hw-wet: rgba(79, 141, 176, 0.28);
  --hw-metal: #b5bbbd; --hw-metal2: #7d8589; --hw-plastic: #f3f2ec; --hw-glass: rgba(170, 210, 225, 0.35);
  --hw-straw: #e6cc84; --hw-straw2: #b8994a; --hw-card: #c8a577; --hw-red: #c9553a; --hw-orange: #e0923a; --hw-pink: #d98989;
  --hw-brown: #b48c5c; --hw-brown2: #8a6840; --hw-green: #9cb866; --hw-felt: #5d5a55; --hw-felt2: #75726c;
  --hw-glow: rgba(255, 226, 140, 0.35); --hw-hose: #3b3a36; --hw-ghose: #5a8a4f; --hw-terra: #c26a45;
  --hw-bin: #55594f; --hw-barrel: #5f8298; --hw-potato: #dcbd8c; --hw-yellow: #e8c33a; --hw-brick: #b8583c; --hw-block: #c9c6bd; --hw-fabric: rgba(255, 255, 255, 0.72); --hw-tea: rgba(90, 60, 30, 0.55);
  --hw-shade: rgba(70, 45, 20, 0.16); --hw-hi: rgba(255, 255, 255, 0.45); --hw-cuke: #4a7536; --hw-brass: #c9a24a; --hw-hole: #3a332a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hw-paper: #2a2721; --hw-paper2: #34302a; --hw-ink: #e6ddca; --hw-line: #a09580;
    --hw-wood: #8e704b; --hw-wood2: #6a5236; --hw-soil: #5f4631; --hw-soil2: #3f2e20; --hw-soil3: #7d6147;
    --hw-leaf: #6f9956; --hw-leaf2: #4d733b; --hw-water: #46708a; --hw-water2: #86b9d6; --hw-wet: rgba(134, 185, 214, 0.25);
    --hw-metal: #767d80; --hw-metal2: #9aa1a4; --hw-plastic: #4a4740; --hw-glass: rgba(134, 185, 214, 0.22);
    --hw-straw: #a08a4c; --hw-straw2: #7a6835; --hw-card: #7f6749; --hw-red: #d56a4d; --hw-orange: #d68a3c; --hw-pink: #b87474;
    --hw-brown: #7f6443; --hw-brown2: #5f4a30; --hw-green: #6f8a47; --hw-felt: #4a4843; --hw-felt2: #5e5b55;
    --hw-glow: rgba(255, 226, 140, 0.16); --hw-hose: #151412; --hw-ghose: #6f9f63; --hw-terra: #a65a3b;
  --hw-bin: #3e413a; --hw-barrel: #3f5a6b; --hw-potato: #a88c60; --hw-yellow: #c9a52f; --hw-brick: #93462f; --hw-block: #5f5d57; --hw-fabric: rgba(230, 228, 218, 0.38); --hw-tea: rgba(20, 12, 5, 0.55);
  --hw-shade: rgba(0, 0, 0, 0.3); --hw-hi: rgba(255, 255, 255, 0.1); --hw-cuke: #3d6230; --hw-brass: #a8873c; --hw-hole: #161512;
  }
}
:root[data-theme="dark"] {
  --hw-paper: #2a2721; --hw-paper2: #34302a; --hw-ink: #e6ddca; --hw-line: #a09580;
  --hw-wood: #8e704b; --hw-wood2: #6a5236; --hw-soil: #5f4631; --hw-soil2: #3f2e20; --hw-soil3: #7d6147;
  --hw-leaf: #6f9956; --hw-leaf2: #4d733b; --hw-water: #46708a; --hw-water2: #86b9d6; --hw-wet: rgba(134, 185, 214, 0.25);
  --hw-metal: #767d80; --hw-metal2: #9aa1a4; --hw-plastic: #4a4740; --hw-glass: rgba(134, 185, 214, 0.22);
  --hw-straw: #a08a4c; --hw-straw2: #7a6835; --hw-card: #7f6749; --hw-red: #d56a4d; --hw-orange: #d68a3c; --hw-pink: #b87474;
  --hw-brown: #7f6443; --hw-brown2: #5f4a30; --hw-green: #6f8a47; --hw-felt: #4a4843; --hw-felt2: #5e5b55;
  --hw-glow: rgba(255, 226, 140, 0.16); --hw-hose: #151412; --hw-ghose: #6f9f63; --hw-terra: #a65a3b;
  --hw-bin: #3e413a; --hw-barrel: #3f5a6b; --hw-potato: #a88c60; --hw-yellow: #c9a52f; --hw-brick: #93462f; --hw-block: #5f5d57; --hw-fabric: rgba(230, 228, 218, 0.38); --hw-tea: rgba(20, 12, 5, 0.55);
  --hw-shade: rgba(0, 0, 0, 0.3); --hw-hi: rgba(255, 255, 255, 0.1); --hw-cuke: #3d6230; --hw-brass: #a8873c; --hw-hole: #161512;
}
.hw-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hw-fig { display: block; width: 100%; height: auto; fill: none; stroke: var(--hw-ink); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.hw-fig .ns { stroke: none; }
.hw-fig .th { stroke-width: 0.8; }
.hw-fig .tk { stroke-width: 2.2; }
.hw-fig .ik { fill: var(--hw-ink); } .hw-fig .hole { fill: var(--hw-hole); stroke: none; }
.hw-fig .pp { fill: var(--hw-paper); stroke: var(--hw-line); }
.hw-fig .pp2 { fill: var(--hw-paper2); }
.hw-fig .lns { stroke: var(--hw-line); }
.hw-fig .wd { fill: var(--hw-wood); } .hw-fig .wd2 { fill: var(--hw-wood2); } .hw-fig .wd2s { stroke: var(--hw-wood2); }
.hw-fig .sl { fill: var(--hw-soil); } .hw-fig .sl2 { fill: var(--hw-soil2); } .hw-fig .sl3 { fill: var(--hw-soil3); }
.hw-fig .lf { fill: var(--hw-leaf); } .hw-fig .lf2 { fill: var(--hw-leaf2); } .hw-fig .lf2s { stroke: var(--hw-leaf2); }
.hw-fig .stem { stroke: var(--hw-leaf2); stroke-width: 2; } .hw-fig .stem.fine { stroke-width: 1.2; } .hw-fig .stem.lt { stroke: var(--hw-leaf); }
.hw-fig .vein { stroke: var(--hw-leaf2); stroke-width: 0.6; opacity: 0.7; } .hw-fig .vein2 { stroke: var(--hw-leaf); stroke-width: 0.6; opacity: 0.8; }
.hw-fig .lfs { stroke: var(--hw-leaf); } .hw-fig .grs { stroke-width: 0.9; }
.hw-fig .tendril { stroke: var(--hw-leaf2); stroke-width: 0.9; } .hw-fig .cuk { fill: var(--hw-cuke); }
.hw-fig .rib { stroke-width: 1; } .hw-fig .rib2 { stroke: var(--hw-hi); stroke-width: 2; } .hw-fig .brass { fill: var(--hw-brass); }
.hw-fig .strap0 { stroke: var(--hw-ink); stroke-width: 5; } .hw-fig .strap { stroke: var(--hw-felt2); stroke-width: 3; } .hw-fig .sprt { stroke: var(--hw-pink); stroke-width: 1.6; }
.hw-fig .can { fill: var(--hw-green); } .hw-fig .canh0 { stroke: var(--hw-ink); stroke-width: 4.8; } .hw-fig .canh { stroke: var(--hw-green); stroke-width: 2.4; }
/* Light from the upper left: shade on the far sides and on the ground, highlights, and banded round things */
.hw-fig .shd { fill: var(--hw-shade); stroke: none; } .hw-fig .hi { fill: var(--hw-hi); stroke: none; } .hw-fig .cyl { fill: url(#hw-cyl); stroke: none; }
.hw-fig .wt { fill: var(--hw-water); } .hw-fig .wt2 { fill: var(--hw-water2); } .hw-fig .wt2s { stroke: var(--hw-water2); }
.hw-fig .wet { fill: var(--hw-wet); }
.hw-fig .wetz { fill: var(--hw-soil2); opacity: 0.5; stroke: none; } .hw-fig .wetl { stroke: var(--hw-water2); stroke-width: 1; stroke-dasharray: 3 2; }
.hw-fig .mt { fill: var(--hw-metal); } .hw-fig .mt2 { fill: var(--hw-metal2); } .hw-fig .mt2s { stroke: var(--hw-metal2); }
.hw-fig .pl { fill: var(--hw-plastic); }
.hw-fig .gl { fill: var(--hw-glass); } .hw-fig .eo { fill-rule: evenodd; }
.hw-fig .st { fill: var(--hw-straw); } .hw-fig .st2s { stroke: var(--hw-straw2); }
.hw-fig .cb { fill: var(--hw-card); }
.hw-fig .rd { fill: var(--hw-red); } .hw-fig .or { fill: var(--hw-orange); } .hw-fig .pk { fill: var(--hw-pink); }
.hw-fig .br { fill: var(--hw-brown); } .hw-fig .br2 { fill: var(--hw-brown2); } .hw-fig .gr { fill: var(--hw-green); }
.hw-fig .ft { fill: var(--hw-felt); } .hw-fig .ft2 { fill: var(--hw-felt2); }
.hw-fig .tc { fill: var(--hw-terra); }
.hw-fig .glow { fill: var(--hw-glow); } .hw-fig .glow2 { fill: #ffe9a8; }
.hw-fig .hatch { stroke: var(--hw-ink); stroke-width: 0.6; opacity: 0.3; }
.hw-fig .nets { stroke: var(--hw-line); stroke-width: 0.9; }
.hw-fig .chain { stroke-dasharray: 2.5 1.5; stroke-width: 1.4; }
.hw-fig .cord { stroke: var(--hw-ink); stroke-width: 1.4; opacity: 0.7; }
.hw-fig .hose { stroke: var(--hw-hose); stroke-width: 6; }
.hw-fig .hose-dots { stroke: var(--hw-water2); stroke-width: 1.4; stroke-dasharray: 0.1 6; }
.hw-fig .hosec { fill: var(--hw-hose); }
.hw-fig .ghose { stroke: var(--hw-ghose); stroke-width: 5; }
.hw-fig .staple { stroke: var(--hw-metal2); stroke-width: 2; }
.hw-fig .staple0 { stroke: var(--hw-ink); stroke-width: 3.8; } .hw-fig .staple1 { stroke: var(--hw-metal); stroke-width: 1.8; }
.hw-fig .p-soil { fill: url(#hw-soil); } .hw-fig .p-mix { fill: url(#hw-mix); } .hw-fig .p-cast { fill: url(#hw-cast); }
.hw-fig .p-grain { fill: url(#hw-grain); } .hw-fig .p-hatch { fill: url(#hw-hatch); } .hw-fig .p-mesh { fill: url(#hw-mesh); }
.hw-fig .p-net { fill: url(#hw-net); } .hw-fig .p-water { fill: url(#hw-water); } .hw-fig .p-straw { fill: url(#hw-straw); }
.hw-fig .p-browns { fill: url(#hw-browns); } .hw-fig .p-greens { fill: url(#hw-greens); } .hw-fig .p-bedding { fill: url(#hw-bedding); }
.hw-fig .p-felt { fill: url(#hw-felt); } .hw-fig .p-fab { fill: url(#hw-fab); } .hw-fig .fabd { fill: var(--hw-line); stroke: none; opacity: 0.55; }
.hw-fig .bin { fill: var(--hw-bin); } .hw-fig .bl { fill: var(--hw-barrel); } .hw-fig .blk { fill: var(--hw-block); } .hw-fig .brick { fill: var(--hw-brick); }
.hw-fig .fb { fill: var(--hw-fabric); stroke: var(--hw-line); } .hw-fig .tea { fill: var(--hw-tea); } .hw-fig .pot { fill: var(--hw-potato); }
.hw-fig .yl { fill: var(--hw-yellow); } .hw-fig .fl { fill: #f4efe6; } .hw-fig .sd { fill: var(--hw-soil2); } .hw-fig .tire { fill: var(--hw-hose); }
.hw-fig .sun { fill: var(--hw-yellow); stroke: var(--hw-orange); } .hw-fig .sunray { stroke: var(--hw-orange); stroke-width: 2; }
.hw-fig .hoop { stroke: var(--hw-metal2); stroke-width: 2.6; } .hw-fig .bunch { stroke: var(--hw-line); stroke-width: 5; stroke-dasharray: 6 2; }
.hw-fig .rain { stroke: var(--hw-water2); stroke-width: 1; opacity: 0.7; } .hw-fig .dhose { stroke: var(--hw-hose); stroke-width: 4; }
.hw-fig .probe { stroke: var(--hw-metal2); stroke-width: 3; } .hw-fig .needle { stroke: var(--hw-red); stroke-width: 1.4; } .hw-fig .rds { stroke: var(--hw-red); stroke-width: 2; }
.hw-fig .stick { stroke: var(--hw-wood2); stroke-width: 3; } .hw-fig .worm { stroke: var(--hw-pink); stroke-width: 3; }
.hw-fig .wormb { stroke: var(--hw-red); stroke-width: 3.4; stroke-dasharray: 3.5 100; stroke-dashoffset: -5; opacity: 0.45; }
.hw-fig .opener { stroke: var(--hw-metal2); stroke-width: 2.4; } .hw-fig .glare { stroke: #fff; stroke-width: 1.4; opacity: 0.6; }
.hw-fig .tube { stroke: var(--hw-hose); stroke-width: 4.5; } .hw-fig .tube2 { stroke: var(--hw-hose); stroke-width: 1.8; }
.hw-fig .twine { stroke: var(--hw-straw2); stroke-width: 1.6; } .hw-fig .twine2 { stroke: var(--hw-straw2); stroke-width: 2; } .hw-fig .dash { stroke-dasharray: 5 3; }
.hw-fig .tie { stroke: var(--hw-straw2); stroke-width: 1.6; } .hw-fig .lash { stroke: var(--hw-hose); stroke-width: 1.6; } .hw-fig .ds { stroke-dasharray: 4 3; }
.hw-fig .paste { fill: #fffdf6; stroke: var(--hw-line); stroke-width: 0.8; } .hw-fig .brush { stroke: var(--hw-wood2); stroke-width: 3; } .hw-fig .pick { stroke: var(--hw-wood); stroke-width: 2; }
.hw-fig .ptape { stroke: #fffdf6; stroke-width: 3; } .hw-fig .ghost { opacity: 0.45; }
.hw-fig .ferr { stroke: var(--hw-metal2); stroke-width: 4.5; } .hw-fig .bowl { fill: var(--hw-block); }
.hw-fig .mat { fill: var(--hw-hose); } .hw-fig .matw { stroke: var(--hw-red); stroke-width: 1; stroke-dasharray: 6 3; }
.hw-fig .root { stroke: var(--hw-wood2); stroke-width: 1; opacity: 0.8; }
.hw-fig .tine { stroke: var(--hw-soil2); stroke-width: 1.6; } .hw-fig .loose { fill: var(--hw-soil3); opacity: 0.5; stroke: none; } .hw-fig .cbl { stroke: var(--hw-brown2); stroke-width: 0.6; stroke-dasharray: 1.5 1.5; }
.hw-fig .rail { stroke: var(--hw-wood2); stroke-width: 5; } .hw-fig .leg { stroke: var(--hw-metal2); stroke-width: 3; } .hw-fig .lath { stroke: var(--hw-wood2); stroke-width: 3.5; }
.hw-fig .rim { stroke: var(--hw-metal2); stroke-width: 3; } .hw-fig .tread { stroke: var(--hw-metal2); stroke-width: 1; stroke-dasharray: 2 3; } .hw-fig .grip { stroke: var(--hw-hose); stroke-width: 7; }
.hw-fig .hw-arrows { marker-start: url(#hw-arr); marker-end: url(#hw-arr); }
.hw-fig .hw-flow { stroke: var(--hw-water2); stroke-width: 1.6; marker-end: url(#hw-arr-w); }
.hw-fig .hw-flow.air { stroke: var(--hw-line); }
.hw-fig .hw-flow.heat { stroke: var(--hw-red); stroke-dasharray: 3 2; }
.hw-fig text { fill: var(--hw-ink); stroke: none; }
.hw-fig .hw-label { font: italic 13px var(--font-head); }
.hw-fig .hw-dt { font: italic 12.5px var(--font-head); }
.hw-fig .hw-dt, .hw-fig .hw-label { paint-order: stroke; stroke: var(--hw-paper); stroke-width: 3.5px; stroke-linejoin: round; }
.hw-fig .hw-nc { fill: var(--accent); stroke: var(--hw-paper); stroke-width: 1.5; }
.hw-fig .hw-nt { fill: var(--accent-ink); font: 700 11px var(--font); }
.hw-fig.hw-thumb .hw-call, .hw-fig.hw-thumb .hw-dim, .hw-fig.hw-thumb text { display: none; }
/* The square-foot guide's chart: how many of each crop per square */
.sq-chart { display: grid; gap: 8px; }
.sq-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.sq-count { display: grid; justify-items: center; text-align: center; padding: 6px 4px; border-radius: 10px; background: var(--accent-soft, var(--surface-2)); }
.sq-count strong { font: 700 1.5rem/1.1 var(--font-head); color: var(--accent); }
.sq-count span { font-size: 0.75rem; color: var(--muted); }
.sq-how { margin: 0 0 2px; }
.sq-names { margin: 0; }
.sfg-link { margin-left: 8px; }
.howto-fig { margin: 14px 0 6px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--hw-paper); }
.howto-fig figcaption { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 0.9rem; }
.hw-cap { margin: 0 0 6px; font-family: var(--font-head); font-style: italic; }
.hw-fign { font-style: normal; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.78rem; color: var(--accent); }
.hw-key { margin: 0; padding: 0; list-style: none; counter-reset: hw; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 4px 16px; }
.hw-key li { counter-increment: hw; display: flex; gap: 8px; align-items: baseline; }
.hw-key li::before {
  content: counter(hw); flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-size: 0.7rem; font-weight: 700; transform: translateY(-1px);
}
/* A guide's photo: the numbered callouts lie over it (white leaders, a soft shadow so they read on any background). The drawing
   waits behind it, and shows if the photo can't load (.hw-nophoto). */
.hw-photo { position: relative; }
.hw-photo img { display: block; width: 100%; height: auto; border-radius: 6px; }
.hw-photo .hw-marks { position: absolute; inset: 0; width: 100%; height: 100%; }
.hw-marks .hw-call { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); }
.hw-marks .th { stroke: #fff; stroke-width: 1.2; }
.hw-marks .ik { fill: #fff; }
.hw-inset { margin-top: 8px; border-radius: 6px; background: var(--hw-paper); }   /* part of the drawing under a photo */
.howto-fig.hw-hasphoto .hw-drawing, .howto-fig.hw-nophoto .hw-photo, .howto-fig.hw-nophoto .hw-inset { display: none; }
.howto-fig.hw-nophoto .hw-drawing { display: block; }
.hw-thumbphoto { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.howto-thumbwrap { display: block; margin: -14px -16px 4px; border-bottom: 1px solid var(--border); background: var(--hw-paper); border-radius: 14px 14px 0 0; overflow: hidden; }
@media print {
  .supplies-page .guide-tools, .tips-page .guide-tools, .tt-now, .aff-note { display: none !important; }
  .buy-link .icon, .buy-chip .icon { display: none; }
}

/* ---------- Garden log ---------- */
/* Log forms line up on a grid: every input sits on the same line even when a label is longer */
.log-page .add-plot { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; align-items: end; }
.log-page .add-plot .wide-field { grid-column: span 2; }
.log-page .add-plot label { flex: none; }
.log-page .add-plot button { justify-self: start; }
.log-page .add-plot input, .log-page .add-plot select { width: 100%; min-width: 0; }
/* Values in plain text at the same size as the site's other fields (and 16px, so phones don't zoom in on them) */
.log-page .add-plot input, .log-page .add-plot select, .j-text textarea { font-size: 1rem; font-weight: 400; }
.log-page .add-plot input[type="date"], .log-page .add-plot select { height: 44px; }
.log-page .add-plot input[type="file"] { padding: 0; font-size: 0.9rem; color: var(--muted); }
.log-page .add-plot input[type="file"]::file-selector-button {
  height: 44px; margin-right: 10px; padding: 0 18px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); color: var(--accent); font: 600 0.9rem var(--font); cursor: pointer;
}
.log-page .add-plot input[type="file"]::file-selector-button:hover { background: var(--accent-soft); }
@media (max-width: 400px) { .log-page .add-plot .wide-field { grid-column: auto; } }
.sub-head { margin: 22px 0 10px; align-items: center; }
.sub-head .small-head { margin: 0; }
.sub-head .month-pick { margin: 0; }
/* Log sections as tabs that stay pinned at the top while you scroll */
.log-tabs {
  position: sticky; top: 0; z-index: 8; margin-bottom: 16px; box-shadow: 0 2px 10px rgba(40, 30, 10, 0.08), inset 0 0 0 1px var(--glass-panel-edge);
  background: var(--glass-bar); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
}
/* Jumping to a section (log.html#yield) leaves room for the pinned tabs */
.log-panel > section, .plot-card, #garden-map, #section-add, #shopping { scroll-margin-top: 76px; }
.seed-status { font-size: 0.85rem; }
.seed-status.st-good { color: var(--accent); }
.seed-status.st-soon { color: var(--toxic); font-weight: 600; }
.seed-status.st-old, .seed-status.st-need { color: var(--warn); font-weight: 600; }
.journal-form { display: grid; gap: 10px; }
.journal-form button[type=submit] { justify-self: start; }
.j-text { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; font-weight: 600; }
.journal-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; }
.journal-entry { border: 1px solid var(--glass-inner-edge); border-radius: 12px; padding: 12px 14px; background: var(--glass-inner); }
.journal-head { display: flex; gap: 8px; align-items: center; }
.journal-head .icon-btn { margin-left: auto; }
.journal-text { margin: 8px 0 0; white-space: pre-wrap; }
.journal-photos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.journal-photos .photo { display: flex; align-items: center; justify-content: center; width: 120px; height: 90px; border-radius: 10px; overflow: hidden; background: var(--track); }
.journal-photos img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Footer ---------- */
.site-footer { font-size: 0.8rem; color: var(--muted); padding-top: 8px; padding-bottom: 32px; }
.site-footer .copyright { margin-top: 6px; font-weight: 600; }

/* ---------- Print ---------- */
@media print {
  :root { --bg: #fff; --surface: #fff; --text: #000; --shadow: none; --glass-panel: #fff; --glass-bar: #fff; --page-wash: none; --glass-sheen: none; --glass-inner: #fff; --glass-tile: #fff; }
  body::before, .card::before, .glass::before { display: none; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .site-header { background: none; color: #000; margin: 0; }
  .site-nav, .header-tools, .page-tabs, .loc-bar .link-btn, .lookup, .filters, .tabs, #print-btn, .adjust, .garden-actions,
  .picker, .data-card, .backup-bar, #log-btn, .edit-planting, .pl-actions, .today-actions, .welcome { display: none !important; }
  .card { border: 0; padding: 0; box-shadow: none; }
  .view[hidden], .page-panel[hidden] { display: block !important; }
  #view-table { page-break-before: always; }
  .timeline, .crop-table { min-width: 0; }
  .timeline-scroll { overflow: visible; max-height: none; }
  .tl-head, .tl-name, .tl-group { position: static; box-shadow: none; }
  a.tl-label, a.cal-plant { padding: 0; border: 0; background: none; }
  .bar, .sw, .pill, .today-line, .cell, .seg, .swatch, .tl-link, .frost-season { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tool-card, .toast, .cell-del, .totals-table .icon-btn, .plots-page .add-plot, .plots-page .add-plot + p, #add-status, .plot-edit, .plot-head .tabs,
  [data-action="add-row"], [data-action="add-seg"], .icon-btn, .plot-delete, .plot-clear, #print-plots, .page-head { display: none !important; }
  .add-card { display: none !important; }
  .grid-scroll { max-height: none; overflow: visible; }
  .plot-card { break-inside: avoid; }
  /* Print every plot, whichever section or plot is open */
  body:not(.printing-map) #map-section[hidden], body:not(.printing-map) #section-plots[hidden], body:not(.printing-map) .plot-card[hidden] { display: block !important; }
  body:not(.printing-map) #garden-map { display: none !important; }
  .switcher-bar, .back-to-top, .next-steps { display: none !important; }
  .sidebar, .menu-btn, .side-backdrop { display: none !important; }
  body.sidebar-docked, body.sidebar-collapsed { padding-left: 0; }
  /* Printing the shopping list (Garden log): just the list */
  body.printing-shopping main > :not(#panel-shopping), body.printing-shopping .site-footer, body.printing-shopping #print-shopping,
  body.printing-shopping #shopping-seeds { display: none !important; }
  body.printing-shopping #panel-shopping { display: block !important; }
  body.printing-shopping #shopping { border: 0; box-shadow: none; }
  /* Printing the garden map: just the map */
  body.printing-map main > :not(#map-section), body.printing-map #map-section > :not(#garden-map), body.printing-map .site-footer, body.printing-map .map-toolbar,
  body.printing-map .map-head-btns, body.printing-map .map-start, body.printing-map .sheet-handle,
  body.printing-map .map-details, body.printing-map .map-opts-view, body.printing-map .map-panel, body.printing-map .map-yard, body.printing-map #map-note, body.printing-map .map-layouts,
  body.printing-map .map-options, body.printing-map .map-context, body.printing-map .map-zoom, body.printing-map #map-handles,
  body.printing-map #garden-map .data-actions, body.printing-map #garden-map > p.muted { display: none !important; }
  body.printing-map #garden-map { display: block !important; position: static; }
  body.printing-map .map-wrap { height: auto; border: 0; }
  body.printing-map .map-svg { height: 88vh; }
  .map-svg * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* This week (Overview) */
.week-card .card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; }
.week-card h2 { margin: 0; }
.week-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.week-actions .small-btn { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.week-day {
  position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 3px; min-width: 0; min-height: 92px;
  margin: 0; padding: 6px 6px 8px; text-align: left; font-weight: 400; border-radius: var(--radius-sm);
  background: var(--glass-inner); color: var(--text); border: 1px solid var(--glass-inner-edge);
}
.week-day:hover { background: var(--accent-soft); filter: none; }
.week-day.today { border-color: var(--today); box-shadow: inset 0 0 0 1px var(--today); }
.week-wd { font-size: 0.7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.week-day.today .week-wd { color: var(--today); }
.week-strip { padding-top: 8px; }
/* "Today" sits on the top edge of today's box, so its weekday and date line up with the other days */
.week-today {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%); padding: 1px 6px; border-radius: 999px;
  background: var(--today-strong); color: var(--surface); font-size: 0.62rem; font-weight: 700; line-height: 1.4; text-transform: uppercase;
  letter-spacing: 0.04em; white-space: nowrap;
}
.week-num { font-size: 1.05rem; font-weight: 700; line-height: 1.1; }
.week-count { display: none; }
.week-empty { grid-column: 1 / -1; margin: 4px 0 0; }
@media (max-width: 640px) {
  .week-strip { gap: 4px; }
  .week-day { min-height: 64px; align-items: center; padding: 6px 2px; text-align: center; }
  .week-day .cal-chips { display: none; }
  .week-wd { font-size: 0.62rem; letter-spacing: 0; }
  .week-count {
    display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--accent); color: var(--accent-ink); font-size: 0.7rem; font-weight: 700;
  }
}

/* ---------- Garden map: header, View menu, tool "Done", full screen, first use, phone sheet ---------- */
.map-head { align-items: center; margin-bottom: 10px; }
.map-head h2 { margin: 0; }
.map-head-btns { display: flex; gap: 8px; align-items: center; }
.map-head-btns button { margin: 0; }
@media (max-width: 480px) { #map-full .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.map-toolbar .map-view-menu { margin-left: auto; }
.map-toolbar .map-view-menu + .map-menu { margin-left: 0; }
.map-view-list { min-width: 250px; padding: 10px 12px; gap: 10px; }
.map-view-list label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.map-view-list label.check { font-weight: 400; }
.map-opts-done { display: flex; gap: 10px; align-items: center; }
.map-opts-done[hidden] { display: none; }
.map-opts-done button { margin: 0; }

/* Full screen: the map card covers the page (Esc or the button to leave) */
body.map-full-on { overflow: hidden; }
.map-card.map-full {
  position: fixed; inset: 0; z-index: 48; margin: 0; border-radius: 0; display: flex; flex-direction: column; overflow: hidden;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
}
.map-full > .map-layouts, .map-full > .map-yard, .map-full > .map-tips { display: none; }
.map-full .map-layout { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
.map-full .map-main { display: flex; flex-direction: column; min-height: 0; }
.map-full .map-wrap { flex: 1 1 auto; height: auto; min-height: 200px; }
@container (min-width: 860px) { .map-full .map-details .map-panel { max-height: 100%; } .map-full .map-details { position: static; max-height: 100%; overflow-y: auto; } }

/* First use: how to start, over the empty map */
.map-start {
  position: absolute; z-index: 7; top: 12px; left: 12px; max-width: min(400px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow-y: auto;
  padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 14px; box-shadow: var(--shadow-lg);
}
.map-start[hidden] { display: none; }
.map-start h3 { margin: 0 0 8px; font-size: 1.05rem; }
.map-start-steps { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 0.9rem; }
.map-start-yard, .map-start-btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; margin-top: 6px; }
.map-start-yard label { display: flex; flex-direction: column; gap: 2px; font-size: 0.8rem; color: var(--muted); }
.map-start-yard input { width: 7.5em; padding: 6px 8px; }
.map-start button { margin: 0; }
.map-start p { margin: 10px 0 0; }

/* Phones: the details panel is a sheet above the tab bar; tap its handle to see it all */
.sheet-handle { display: none; }
@media (max-width: 640px) {
  .map-details {
    position: fixed; left: 8px; right: 8px; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 34;
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden;
  }
  .map-full .map-details { bottom: calc(8px + env(safe-area-inset-bottom)); }
  .sheet-handle {
    display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; margin: 0; padding: 6px 12px 4px;
    background: transparent; color: var(--muted); border: 0; border-radius: 0; font-size: 0.8rem; font-weight: 600;
  }
  .sheet-handle:hover { filter: none; background: var(--track); }
  .sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); }
  .map-details .map-panel { margin: 0; border: 0; border-radius: 0; max-height: 132px; overflow: hidden; padding-top: 4px; }
  .map-details.open .map-panel { max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; }
  .map-details:not(.open) .sheet-handle #map-sheet-label::after { content: " · more"; font-weight: 400; }
  .map-empty .map-details { display: none; }
  .map-details:not(.open):not(.has-sel) .map-panel { display: none; }
  /* Room for the map: one row of tools, and the Move hint (the one you know) hidden */
  .map-toolbar { gap: 6px; }
  .map-toolbar .map-menu > summary { padding: 5px 8px; }
  .map-toolbar .map-menu > summary span { display: none; }
  .map-toolbar .map-modes .tab { padding: 7px 9px; }
  #map-redo { display: none; }
}

/*
 * ---------- The garden map as a workspace ----------
 * The map card runs from where it starts (--ws-top, set by js/map.js) to the bottom of the window: the map fills it,
 * the details panel scrolls on its own, and the page itself doesn't scroll.
 */
body.map-view main.wrap { max-width: none; padding-bottom: 0; }
body.map-view .site-footer, body.map-view .back-to-top { display: none; }
body.map-view .map-card {
  display: flex; flex-direction: column; margin-bottom: 0; padding: 10px 12px 12px;
  height: calc(100vh - var(--ws-top, 120px) - 12px); height: calc(100dvh - var(--ws-top, 120px) - 12px); min-height: 440px;
}
body.map-view .map-head { margin-bottom: 8px; }
body.map-view .map-head h2 { font-size: 1.15rem; }
body.map-view .map-options { margin-bottom: 8px; padding: 5px 10px; }
body.map-view .map-layout { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); gap: 12px; }
body.map-view .map-main { display: flex; flex-direction: column; min-height: 0; }
body.map-view .map-wrap { flex: 1 1 auto; height: auto; min-height: 240px; }
/* The key and the note under the map keep a fixed height, so the map never jumps while you drag or plant */
body.map-view .map-key { flex: none; flex-wrap: nowrap; height: 30px; margin-top: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; white-space: nowrap; }
body.map-view .map-key > * { flex: none; }
.map-key.empty { display: none; }
body.map-view .map-key.empty { display: flex; visibility: hidden; }   /* keeps its space before the first crop */
body.map-view #map-note { flex: none; height: 1.45em; margin: 4px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@container (min-width: 860px) {
  body.map-view .map-layout { align-items: stretch; }
  body.map-view .map-details { position: static; min-height: 0; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; border-radius: 12px; }
  body.map-view .map-details .map-panel { max-height: none; overflow: visible; }
}
@media (max-width: 640px) {
  /* Phones: the map fills the screen above the tab bar; the details sheet floats over its bottom */
  body.map-view main.wrap { padding-left: 8px; padding-right: 8px; }
  /* Room below for the tab bar (68px) and the details sheet's handle (about 50px) */
  body.map-view .map-card { height: calc(100vh - var(--ws-top, 100px) - 126px - env(safe-area-inset-bottom)); height: calc(100dvh - var(--ws-top, 100px) - 126px - env(safe-area-inset-bottom));
    min-height: 340px; padding: 8px; border-radius: 12px; }
  body.map-view .map-head h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.map-view .map-head { justify-content: flex-end; margin-bottom: 6px; }
  body.map-view .map-key { display: none; }
  /* One slim season row (play, slider, month); the tools just above it, and zoom above them at the right */
  body.map-view .map-time { flex-wrap: nowrap; gap: 8px; padding: 6px 8px; }
  body.map-view .map-time-months, body.map-view #map-month-now, body.map-view .map-legend, body.map-view .map-time-label, body.map-view .map-time-key { display: none; }
  body.map-view .map-time output { min-width: 0; font-size: 0.85rem; white-space: nowrap; }
  body.map-view .map-rail { bottom: 56px; }
  body.map-view .map-zoom { bottom: 110px; }
}

/* Renaming on the map: a box over the name */
.map-rename { position: absolute; z-index: 12; width: 200px; padding: 5px 8px; font-weight: 700; border: 2px solid var(--accent); border-radius: 8px; box-shadow: var(--shadow-lg); }
/* Planting a bed in place: the rest of the yard fades, a breadcrumb says where you are, the panel is the palette */
.map-focus .map-item.map-dim { opacity: 0.35; }
.map-crumbs { top: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; max-width: calc(100% - 130px); white-space: nowrap; }
.map-crumbs[hidden] { display: none; }
.map-crumbs strong { overflow: hidden; text-overflow: ellipsis; }
.map-crumbs .small-btn { margin: 0; padding: 4px 12px; }
/* The Plant tool's own crop picker steps aside for the palette */
/* The palette has everything the Plant strip does, so the strip steps aside (the map gets the room) */
body.map-view .map-focus #map-options { display: none; }
.fp-search { display: block; margin: 8px 0 4px; }
.fp-search input { width: 100%; }
.fp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin: 4px 0 8px; }
.fp-crop {
  display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 0; padding: 7px 4px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text); font-size: 0.76rem; font-weight: 600; line-height: 1.2; text-align: center;
}
.fp-crop .plant-icon { width: 32px; height: 32px; margin: 0; }
.fp-crop:hover { background: var(--accent-soft); filter: none; }
.fp-crop[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
[data-map="ferase"][aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
@media (max-width: 640px) { .map-crumbs { gap: 6px; font-size: 0.85rem; } }

/* An open plot, the same way: the full width, the season in one row, and on phones the bed sooner */
body.plot-open main.wrap { max-width: none; }
body.plot-open .site-footer { display: none; }
body.plot-open .switcher-bar { margin-bottom: 10px; }
body.plot-open .season-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
body.plot-open .season-bar::-webkit-scrollbar { display: none; }
body.plot-open .season-bar > * { flex: none; }
body.plot-open .season-bar button { padding: 3px 9px; font-size: 0.8rem; }
@media (max-width: 640px) {
  body.plot-open .plot-strip { padding: 6px 10px; gap: 4px 10px; }
  body.plot-open .plot-strip-opts { gap: 2px 12px; font-size: 0.85rem; }
  body.plot-open .plot-nav { display: none; }   /* the plot tabs above do the same */
}

/* ---------- Good spots while planting (tint on empty squares), and Plan this bed ---------- */
/* A dot for good and hatching for not good, so the difference doesn't rest on color alone */
.cell.spot-good { background-color: color-mix(in srgb, var(--soil) 62%, #5f9f5a); background-image: radial-gradient(circle, rgba(40, 90, 45, 0.55) 0 2.5px, transparent 3px); }
.cell.spot-bad { background-color: color-mix(in srgb, var(--soil) 70%, #c0553a); background-image: repeating-linear-gradient(45deg, rgba(150, 50, 25, 0.35) 0 2px, transparent 2px 7px); }
.plot-grid.mode-select .cell.spot-good, .plot-grid.mode-select .cell.spot-bad { background-image: none; }
.show-fit { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; }
.fit-key { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.fit-sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-left: 4px; background-size: auto; }
.fit-sw.spot-good { background-color: color-mix(in srgb, var(--soil) 62%, #5f9f5a); background-image: radial-gradient(circle, rgba(40, 90, 45, 0.55) 0 2.5px, transparent 3px); }
.fit-sw.spot-bad { background-color: color-mix(in srgb, var(--soil) 70%, #c0553a); background-image: repeating-linear-gradient(45deg, rgba(150, 50, 25, 0.35) 0 2px, transparent 2px 7px); }
.preview-note .good { color: var(--accent); font-weight: 600; }
.plan-btn { margin: 0 8px 0 0; padding: 6px 12px; }
.plan-dialog { width: min(900px, calc(100vw - 24px)); }
.plan-body { padding: 12px 22px; overflow-y: auto; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
@media (max-width: 720px) { .plan-body { grid-template-columns: 1fr; padding: 10px 16px; } .plan-result { order: -1; } .plan-list { max-height: none; } }
/* Plan it for me: what's in the plan as chips, ticked crops first, layout options, and the path in the preview */
.plan-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 10px; }
.plan-chip { display: inline-flex; align-items: center; gap: 4px; }
.plan-chip .plant-icon { width: 18px; height: 18px; }
.plan-add input { width: 100%; max-width: 280px; }
.plan-divider { list-style: none; border-top: 1px solid var(--border); padding-top: 6px; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.7rem; }
.plan-dialog .plan-opts label { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: baseline; margin: 6px 0; }
.plan-dialog .plan-opts label .muted { grid-column: 2; display: block; }
.pv-num { align-self: start; justify-self: start; z-index: 2; margin: 2px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font: 700 0.65rem/16px var(--font); text-align: center; pointer-events: none; }
.plan-key-title { font-size: 0.95rem; margin: 0 0 4px; }
.plan-key { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 3px; }
.plan-key li { display: flex; align-items: center; gap: 6px; }
.plan-key-n { flex: none; min-width: 18px; height: 18px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-size: 0.7rem; font-weight: 700; display: grid; place-items: center; }
.plan-key-edge .plan-key-n { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.pv-path { background: repeating-radial-gradient(circle at 50% 50%, #b9b1a2 0 28%, transparent 30% 100%) center / 70% 70% no-repeat, #d9d0bf; border-radius: 2px; }
.plan-dialog .picker-foot { flex-wrap: wrap; gap: 8px; }
.plan-dialog .picker-foot button { white-space: nowrap; }
@media (max-width: 480px) { .plan-dialog .picker-foot .spacer { display: none; } .plan-dialog .picker-foot button { flex: 1 1 auto; padding: 9px 12px; } #plan-again { flex-basis: 100%; order: 3; } }
.plan-side { display: grid; gap: 12px; }
.plan-body fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.plan-body legend { font-weight: 700; padding: 0; margin-bottom: 4px; }
.plan-body .muted.small { margin: 0 0 6px; }
.plan-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; max-height: 320px; overflow-y: auto; }
.plan-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); }
.plan-crop { display: flex; align-items: center; gap: 6px; font-weight: 600; min-width: 0; }
.plan-crop .swatch { margin: 0; }
.plan-count { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--muted); }
.plan-count input { width: 5em; }
.plan-space { grid-column: 1 / -1; }
.plan-keep label { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; margin: 2px 0; }
.plan-add { display: flex; align-items: center; gap: 8px; }
.plan-add select { flex: 1; min-width: 0; }
.plan-preview {
  display: grid; gap: 2px; width: 100%; max-height: 360px; padding: 4px; border-radius: 8px;
  background: var(--soil-edge); box-sizing: border-box;
}
.plan-preview > span { min-width: 0; min-height: 0; border-radius: 3px; overflow: hidden; }
.pv-crop {
  display: flex; align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 700; line-height: 1; text-align: center; padding: 0 2px;
  background: hsl(var(--h) var(--crop-s) var(--l, var(--crop-l))); color: var(--text); -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.pv-crop > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-out { background: var(--surface); }
.plan-counts { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.plan-counts li { display: inline-flex; align-items: center; gap: 4px; }
.plan-counts .swatch { margin: 0; }
.plan-summary p { margin: 4px 0; }

/* ---------- Plant pictures (js/plantart.js) and raised beds ---------- */
:root { --bed-soil: #5e412c; --bed-lath: #d3b485; --bed-wood: #a06c3c; --bed-wood-hi: #bb8753; --bed-wood-lo: #7e5129; }
/* A little picture of a crop, on a spot of soil (chips, keys, lists, the plant card) */
.plant-icon { display: inline-block; width: 1.75em; height: 1.75em; flex: none; vertical-align: middle; margin: -0.2em 6px -0.2em 0; border-radius: 50%; background: var(--bed-soil); }
.pc-art { width: 2.6em; height: 2.6em; margin-right: 10px; }
.crop-chip .plant-icon, .legend-chip .plant-icon { margin: -2px 6px -2px -4px; }
/* The bed: a wooden frame, soil, and light strips marking each square foot */
.plot-grid {
  gap: 3px; padding: 0; background: var(--bed-lath); border: 10px solid var(--bed-wood); border-radius: 6px;
  border-top-color: var(--bed-wood-hi); border-left-color: var(--bed-wood-hi); border-bottom-color: var(--bed-wood-lo); border-right-color: var(--bed-wood-lo);
  box-shadow: inset 0 0 0 1px #00000040, 0 2px 6px rgba(40, 25, 10, 0.25);
}
.plot-grid .cell {
  border-radius: 1px; color: #f6efe2;
  background-color: var(--bed-soil);
  background-image: radial-gradient(circle at 22% 28%, rgba(255, 235, 210, 0.09) 0 1.4px, transparent 2px),
    radial-gradient(circle at 70% 64%, rgba(0, 0, 0, 0.22) 0 1.4px, transparent 2px),
    radial-gradient(circle at 44% 84%, rgba(255, 235, 210, 0.07) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 84% 18%, rgba(0, 0, 0, 0.18) 0 1px, transparent 1.6px);
}
.plot-grid .cell.planted { box-shadow: inset 0 0 0 2px hsl(var(--h) 55% 60% / 0.28); }
.plot-grid .cell.cell-out { background: var(--surface); box-shadow: 0 0 0 3px var(--surface); }
.cell-art { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); pointer-events: none; filter: drop-shadow(0 1px 1px rgba(20, 10, 0, 0.45)); }
/* Names only when asked for ("Show names"); screen readers always hear them */
.plot-grid:not(.show-names) .cell.planted .cell-name, .plot-grid .cell.planted .cell-count { display: none; }
.plot-grid.show-names .cell.planted { justify-content: flex-end; }
.plot-grid.show-names .cell.planted .cell-name {
  -webkit-line-clamp: 1; max-width: calc(100% - 4px); padding: 1px 6px; border-radius: 8px; background: rgba(29, 27, 23, 0.72); color: #fff; text-shadow: none; font-size: 0.85em;
}
.plot-grid .cell.planted .cell-name, .plot-grid .cell.planted .cell-count { text-shadow: none; }
.plot-grid .cell-months { position: absolute; left: 2px; bottom: 2px; z-index: 2; padding: 0 4px; border-radius: 6px; background: rgba(29, 27, 23, 0.72); color: #fff; opacity: 1; }
.plot-grid.show-names .cell-months { bottom: auto; top: 2px; }
.plot-grid .cell.hl { box-shadow: inset 0 0 0 3px #fff; }
.plot-grid .cell.selected { outline-color: #fff; }
/* Good spots, on dark soil */
.plot-grid .cell.spot-good, .fit-sw.spot-good { background-color: #4d6a37; background-image: radial-gradient(circle, rgba(200, 240, 180, 0.9) 0 2.5px, transparent 3px); }
.plot-grid .cell.spot-bad, .fit-sw.spot-bad { background-color: #6e3a2a; background-image: repeating-linear-gradient(45deg, rgba(245, 150, 120, 0.5) 0 2px, transparent 2px 7px); }
.plot-grid.mode-select .cell.spot-good, .plot-grid.mode-select .cell.spot-bad { background-color: var(--bed-soil); background-image: none; }
/* Plan this bed: the preview is a little bed too */
.plan-preview { background: var(--bed-lath); border: 6px solid var(--bed-wood); padding: 0; gap: 2px; }
.pv-crop { background: var(--bed-soil); padding: 0; }
.pv-crop svg { width: 100%; height: 100%; display: block; }
.pv-kept { filter: saturate(0.45) brightness(0.8); }
/* The garden map: soil in the beds, and plant pictures when zoomed in */
.map-soil { fill: var(--bed-soil); }
.map-outline { stroke: var(--bed-wood); stroke-width: 4; }
.map-outline-in { fill: none; stroke: #2a1a0c; stroke-width: 1; opacity: 0.55; pointer-events: none; }
.map-soil-tex { fill: url(#map-soil-tex); pointer-events: none; }
.map-lath { fill: none; stroke: var(--bed-lath); stroke-width: 1.3; opacity: 0.8; pointer-events: none; }
.map-clip { fill: #000; }
.map-item.selected .map-outline-in { stroke: var(--accent); opacity: 1; }
.map-pot-soil { fill: var(--bed-soil); stroke: var(--terra); stroke-width: 1.5; }
.map-art * { vector-effect: none; }

/*
 * ---------- Soft glass pills ----------
 * Every clickable pill (filter and crop chips, secondary buttons, keys, the season bar) is a small pane of glass: a
 * frosted highlight across the top, a soft shadow, a lift on hover; the chosen one is tinted green with a halo.
 * Main buttons get the same highlight over their green. In switches (.tabs, .cal-views, .set-seg) a pane of glass
 * slides to the chosen option (.pill-glide, placed by js/ui.js). No blur, so long lists of chips stay quick.
 * New pills: give them .chip (or button.secondary) and they match.
 */
:root {
  --pill-top: rgba(255, 255, 255, 0.82); --pill-bot: rgba(255, 255, 255, 0.38); --pill-hi: rgba(255, 255, 255, 0.85);
  --pill-line: rgba(61, 85, 65, 0.18); --pill-shadow: 0 1px 3px rgba(40, 30, 10, 0.12), 0 4px 10px rgba(40, 30, 10, 0.06);
  --pill-lift: 0 2px 9px rgba(40, 30, 10, 0.16); --pill-well: inset 0 1px 3px rgba(40, 30, 10, 0.1);
  --pill-on-top: color-mix(in srgb, var(--plant) 34%, white); --pill-on-bot: color-mix(in srgb, var(--plant) 16%, white);
  --pill-on-line: color-mix(in srgb, var(--accent) 45%, transparent); --pill-halo: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
  --pill-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 65%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pill-top: rgba(255, 255, 255, 0.13); --pill-bot: rgba(255, 255, 255, 0.04); --pill-hi: rgba(255, 255, 255, 0.16);
    --pill-line: rgba(255, 255, 255, 0.11); --pill-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); --pill-lift: 0 2px 9px rgba(0, 0, 0, 0.45);
    --pill-well: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    --pill-on-top: color-mix(in srgb, var(--plant) 42%, transparent); --pill-on-bot: color-mix(in srgb, var(--plant) 20%, transparent);
    --pill-on-line: color-mix(in srgb, var(--plant) 55%, transparent); --pill-halo: 0 0 0 3px color-mix(in srgb, var(--plant) 18%, transparent);
    --pill-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 65%);
  }
}
:root[data-theme="dark"] {
  --pill-top: rgba(255, 255, 255, 0.13); --pill-bot: rgba(255, 255, 255, 0.04); --pill-hi: rgba(255, 255, 255, 0.16);
  --pill-line: rgba(255, 255, 255, 0.11); --pill-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); --pill-lift: 0 2px 9px rgba(0, 0, 0, 0.45);
  --pill-well: inset 0 1px 3px rgba(0, 0, 0, 0.3);
  --pill-on-top: color-mix(in srgb, var(--plant) 42%, transparent); --pill-on-bot: color-mix(in srgb, var(--plant) 20%, transparent);
  --pill-on-line: color-mix(in srgb, var(--plant) 55%, transparent); --pill-halo: 0 0 0 3px color-mix(in srgb, var(--plant) 18%, transparent);
  --pill-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 65%);
}
.chip, .legend-chip, .lm-chip, .map-key-item, .md-pick-chip, .season-bar button, .type-checks label, button.secondary, .button-link:not(.primary) {
  background: linear-gradient(180deg, var(--pill-top), var(--pill-bot)); border: 1px solid var(--pill-line); color: var(--text);
  box-shadow: inset 0 1px 0 var(--pill-hi), var(--pill-shadow); transition: background 0.2s, box-shadow 0.2s, transform 0.15s, border-color 0.2s;
}
button.secondary, .button-link:not(.primary) { color: var(--accent-strong); }
.chip:hover, .legend-chip:hover, .lm-chip:hover, .map-key-item:hover, .md-pick-chip:hover, .season-bar button:hover, .type-checks label:hover,
button.secondary:hover:not(:disabled), .button-link:not(.primary):hover {
  background: linear-gradient(180deg, var(--pill-top), var(--pill-bot)); border-color: var(--pill-on-line);
  box-shadow: inset 0 1px 0 var(--pill-hi), var(--pill-lift); transform: translateY(-1px); filter: none;
}
.chip[aria-pressed="true"], .legend-chip[aria-pressed="true"], .season-bar button[aria-pressed="true"], .type-checks label:has(input:checked),
.map-key-item:focus-visible, .chip.pest-mine {
  background: linear-gradient(180deg, var(--pill-on-top), var(--pill-on-bot)); border-color: var(--pill-on-line); color: var(--accent-strong);
  box-shadow: inset 0 1px 0 var(--pill-hi), var(--pill-halo);
}
.chip:active, .legend-chip:active, .season-bar button:active, button.secondary:active { transform: translateY(0); }
/* Main buttons: the same frosted highlight over their green */
button.small-btn:not(.secondary):not(.danger):not(.link-btn), form button[type="submit"]:not(.secondary):not(.danger):not(.link-btn),
.button-link.primary, .map-add-menu > summary {
  background-image: var(--pill-gloss);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}
/* Switches: a well, with a pane of glass that slides to the chosen option */
.tabs, .cal-views, .set-seg { background: linear-gradient(180deg, var(--pill-bot), var(--pill-top)); box-shadow: var(--pill-well); border: 1px solid var(--pill-line); }
.set-seg { overflow: visible; padding: 2px; gap: 2px; }
.set-seg button + button { border-left: 0; }
.set-seg button, .set-seg button:hover { border-radius: 999px; }
.has-glide { position: relative; isolation: isolate; }
.has-glide > :not(.pill-glide) { position: relative; z-index: 1; }
.has-glide > [aria-pressed="true"], .has-glide > [aria-selected="true"] { background: transparent; box-shadow: none; color: var(--accent-strong); }
.pill-glide {
  position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, var(--pill-top), var(--pill-bot)); border: 1px solid var(--pill-hi);
  box-shadow: inset 0 1px 0 var(--pill-hi), var(--pill-shadow);
  transition: transform 0.28s cubic-bezier(0.3, 0.7, 0.3, 1), width 0.28s cubic-bezier(0.3, 0.7, 0.3, 1), opacity 0.2s;
}
.pill-glide.no-anim { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .pill-glide { transition: none; }
  .chip:hover, .legend-chip:hover, .lm-chip:hover, .map-key-item:hover, .md-pick-chip:hover, .season-bar button:hover, button.secondary:hover { transform: none; }
}
@media print {
  .pill-glide { display: none; }
  .chip, button.secondary, .button-link { box-shadow: none; background: none; }
}