/* ---- LG Design Tokens ---- */
:root {
  /* Fonts */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Cormorant Infant', Georgia, serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- FOUNDATION PALETTE ---- */

  /* Neutrals (the bones) */
  --color-charcoal: #3A352F;
  --color-stone-dark: #6B5F52;
  --color-stone: #8A7E72;
  --color-stone-light: #A09888;
  --color-clay: #C4B5A0;
  --color-sand: #D4CBBC;
  --color-parchment: #E8E0D4;
  --color-paper: #F5F0E8;
  --color-page: #FAF8F4;

  /* Botanicals (the life) */
  --color-garden: #2D5F2D;
  --color-garden-dark: #245224;
  --color-sage: #8A9A7A;
  --color-moss: #5A6B4A;

  /* Florals (the warmth) */
  --color-rose: #C4908A;
  --color-mauve: #9A7B8A;
  --color-ochre: #B8943A;

  /* Atmosphere (the mood) */
  --color-indigo: #2A3A5A;
  --color-botanical-black: #1A1A18;

  /* Sun gradient */
  --color-sun-teal: #5BACA0;
  --color-sun-gold: #F0C430;

  /* Safety (functional) */
  --color-danger: #D9534F;
  --color-success: #5BA55B;

  /* Borders */
  --border-light: 1px solid rgba(180,160,130,0.15);
  --border-medium: 1px solid var(--color-sand);
  --border-heavy: 2px solid var(--color-sand);
  --border-dashed: 1px dashed var(--color-sand);
  --border-dotted: 1px dotted rgba(180,160,130,0.2);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(60,50,40,0.06);
  --shadow-md: 0 4px 16px rgba(40,35,28,0.10);
  --shadow-lg: 0 8px 30px rgba(40,35,28,0.14);
  --shadow-cork-card: 3px 4px 12px rgba(60, 50, 40, 0.22);
  --shadow-cork-heavy: 3px 4px 12px rgba(60, 50, 40, 0.25);
  --shadow-cork-photo: 2px 3px 10px rgba(60, 50, 40, 0.2);
  --shadow-cork-pin: 0 2px 4px rgba(60, 50, 40, 0.35);
  --shadow-cork-board-inset: inset 0 2px 8px rgba(60, 50, 40, 0.3);
  --shadow-cork-board-drop: 0 6px 24px rgba(40, 35, 28, 0.3);
  --pin-highlight: rgba(255, 255, 255, 0.4);
  --pin-highlight-bright: rgba(255, 255, 255, 0.5);
  --cork-line-color: rgba(180, 160, 130, 0.15);
  --cork-fold-shadow: rgba(60, 50, 40, 0.12);
  --ink-flourish-border: rgba(180, 160, 130, 0.3);
  --focus-ring: 0 0 0 3px rgba(45, 95, 45, 0.08);

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 20px;
  --radius-round: 50%;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 36px;

  /* Journal texture */
  --texture-ruled: repeating-linear-gradient(transparent, transparent 27px, rgba(180,160,130,0.08) 27px, rgba(180,160,130,0.08) 28px);
  --ink-flourish: linear-gradient(to right, var(--color-clay), transparent);

  /* ---- DERIVED TINTS (from foundation palette) ---- */

  /* Garden family */
  --color-garden-bg: #e0f5e0;
  --color-garden-border: #b0dab0;

  /* Sage family */
  --color-sage-tint: #e0f0d0;
  --color-sage-bg: #f0f7eb;

  /* Rose family */
  --color-rose-bg: #fde8e8;
  --color-rose-border: #f5c6c6;
  --color-rose-text: #a94442;

  /* Mauve family */
  --color-mauve-dark: #7A5F6E;
  --color-mauve-hover: #8A6B7A;
  --color-mauve-bg: #f3eef1;
  --color-mauve-border: #d8cdd4;

  /* Violet family (shed, library accents) */
  --color-violet: #7B68AE;
  --color-violet-bg: #f0ecf8;
  --color-violet-border: #cfc5e8;

  /* Ochre family */
  --color-ochre-bg: #fef8e8;
  --color-ochre-border: #e8d8a0;
  --color-ochre-text: #8a6d3b;

  /* Indigo family */
  --color-indigo-bg: #e8f0fe;
  --color-indigo-border: #c6d8f5;
  --color-indigo-text: #31708f;

  /* Opacity overlays */
  --nav-glass-subtle: rgba(250,248,244,0.06);
  --nav-glass-hover: rgba(250,248,244,0.12);
  --nav-glass-border: rgba(250,248,244,0.15);

  /* (badge/verified/generated tints now in derived section above) */

  /* Ink (alias for type/drawing work) */
  --color-ink: #2A2520;

  /* Dividers */
  --divider-subtle: 1px dotted rgba(180,160,130,0.2);
  --divider-structural: 2px solid var(--color-sand);

  /* ---- Additional Palette Tokens ---- */
  --color-violet-tint-border: #d0c0e8;
  --color-danger-text: var(--color-danger);
  --color-neutral-muted: #999;
  --color-neutral-soft: #666;
  --color-border-soft: #ddd;
  --color-cat-medicinal: #9C27B0;

  /* ---- Data-Backed Color Registry ---- */

  /* Categories */
  --color-cat-tree: #2D5F2D;
  --color-cat-shrub: #5BA55B;
  --color-cat-vine: #7B68AE;
  --color-cat-rose: #E85D75;
  --color-cat-perennial: #E8A838;
  --color-cat-annual: #F4D35E;
  --color-cat-succulent: #88C9A1;
  --color-cat-grass: #A8D86C;
  --color-cat-fern: #4DAF8B;
  --color-cat-bulb: #D98EC0;
  --color-cat-edible: #C08040;
  --color-cat-cut_flower: #C44D8D;

  /* Grounds */
  --color-ground-lawn: #7EC850;
  --color-ground-gravel: #C8BFA9;
  --color-ground-decomposed_granite: #D4C4A0;
  --color-ground-mulch: #8B6C42;
  --color-ground-patio_pavers: #B0A090;
  --color-ground-concrete: #C0BEB8;
  --color-ground-brick: #B85C3A;
  --color-ground-flagstone: #A8977A;
  --color-ground-deck_wood: #A08060;
  --color-ground-river_rock: #98A0A8;
  --color-ground-ground_cover: #5DAF5D;
  --color-ground-raised_bed: #9E8B6E;
  --color-ground-sand: #E8DCC0;
  --color-ground-water_feature: #6BA3C8;
  --color-ground-soil_bare: #A08868;
  --color-ground-bluestone: #7088A0;
  --color-ground-slate: #5A6872;
  --color-ground-travertine: #D8CCB4;
  --color-ground-porcelain_tile: #C8C4BC;
  --color-ground-terracotta: #C87444;
  --color-ground-cobblestone: #9A9088;
  --color-ground-limestone: #D0C8B8;
  --color-ground-sandstone: #C8AE88;
  --color-ground-granite_tile: #8A8A8A;
  --color-ground-marble: #E0DCD8;
  --color-ground-stepping_stones: #A8A090;
  --color-ground-mosaic_tile: #6898A8;

  /* Feature groups */
  --color-feature-water: #6BA3C8;
  --color-feature-seating: #8B7355;
  --color-feature-tables: #7A6A52;
  --color-feature-fire: #C85A30;
  --color-feature-cooking: #555555;
  --color-feature-structures: #A08060;
  --color-feature-shade: #C8C0A8;
  --color-feature-decorative: #A0A0A0;
  --color-feature-lighting: #E8D888;
  --color-feature-recreation: #C8A050;
  --color-feature-utility: #888888;
  --color-feature-hardscape: #8A8078;

  /* Feature per-item overrides */
  --color-feature-pond: #5890B0;
  --color-feature-sofa_outdoor: #7A6A52;
  --color-feature-hammock: #A09070;
  --color-feature-fireplace: #A04828;
  --color-feature-chiminea: #C87444;
  --color-feature-patio_heater: #B0A090;
  --color-feature-outdoor_kitchen: #666666;
  --color-feature-pizza_oven: #B85C3A;

  /* Zones + irrigation + tubing */
  --color-zone-drip: #4A90D9;
  --color-zone-sprinkler: #5BB5E0;
  --color-zone-hand_water: #7EC8A0;
  --color-zone-soaker: #6A8FC0;
  --color-irr-sprinkler: #5BB5E0;
  --color-irr-valves: #8B8B8B;
  --color-irr-source: #888888;
  --color-tubing-pipe: #888888;
  --color-tubing-drip_line: #4A90D9;
  --color-tubing-soaker_line: #6A8FC0;

  /* Sun ramp */
  --color-sun-0: #405090;
  --color-sun-1: #4A7A98;
  --color-sun-2: #5BACA0;
  --color-sun-3: #7EB080;
  --color-sun-4: #C8A848;
  --color-sun-5: #E89830;
  --color-sun-6: #F0C430;

  /* Cork board */
  --color-cork: #c4956a;
  --color-cork-dark: #a87d55;
  --color-cork-grain: #b8875c;

}

/* ---- State Utilities ---- */
.is-hidden { display: none !important; }
.is-invisible { visibility: hidden; }

/* ---- Cursor States (canvas interaction) ---- */
.cursor-default     { cursor: default; }
.cursor-crosshair   { cursor: crosshair; }
.cursor-move        { cursor: move; }
.cursor-nw-resize   { cursor: nw-resize; }
.cursor-ne-resize   { cursor: ne-resize; }
.cursor-sw-resize   { cursor: sw-resize; }
.cursor-se-resize   { cursor: se-resize; }
.cursor-ns-resize   { cursor: ns-resize; }
.cursor-ew-resize   { cursor: ew-resize; }
.cursor-nwse-resize { cursor: nwse-resize; }
.cursor-nesw-resize { cursor: nesw-resize; }

.is-collapsed { display: none; }
.is-active { }
.is-selected { }
.is-palette-selected { background: var(--color-sand); font-weight: 600; }
.is-saving { }
.sub-content { display: none; }
.sub-content.is-active { display: block; }

/* ---- Data-Driven Classes ---- */

/* Categories — swatch fill */
.cat-tree { background: var(--color-cat-tree); }
.cat-shrub { background: var(--color-cat-shrub); }
.cat-vine { background: var(--color-cat-vine); }
.cat-rose { background: var(--color-cat-rose); }
.cat-perennial { background: var(--color-cat-perennial); }
.cat-annual { background: var(--color-cat-annual); }
.cat-succulent { background: var(--color-cat-succulent); }
.cat-grass { background: var(--color-cat-grass); }
.cat-fern { background: var(--color-cat-fern); }
.cat-bulb { background: var(--color-cat-bulb); }
.cat-edible { background: var(--color-cat-edible); }
.cat-cut_flower { background: var(--color-cat-cut_flower); }
.cat-medicinal { background: var(--color-cat-medicinal); }

/* Categories — tinted pill (profile-tag, pm-tag--category) */
.cat-tint-tree { background: color-mix(in srgb, var(--color-cat-tree) 13%, transparent); color: var(--color-cat-tree); border: 1px solid color-mix(in srgb, var(--color-cat-tree) 27%, transparent); }
.cat-tint-shrub { background: color-mix(in srgb, var(--color-cat-shrub) 13%, transparent); color: var(--color-cat-shrub); border: 1px solid color-mix(in srgb, var(--color-cat-shrub) 27%, transparent); }
.cat-tint-vine { background: color-mix(in srgb, var(--color-cat-vine) 13%, transparent); color: var(--color-cat-vine); border: 1px solid color-mix(in srgb, var(--color-cat-vine) 27%, transparent); }
.cat-tint-rose { background: color-mix(in srgb, var(--color-cat-rose) 13%, transparent); color: var(--color-cat-rose); border: 1px solid color-mix(in srgb, var(--color-cat-rose) 27%, transparent); }
.cat-tint-perennial { background: color-mix(in srgb, var(--color-cat-perennial) 13%, transparent); color: var(--color-cat-perennial); border: 1px solid color-mix(in srgb, var(--color-cat-perennial) 27%, transparent); }
.cat-tint-annual { background: color-mix(in srgb, var(--color-cat-annual) 13%, transparent); color: var(--color-cat-annual); border: 1px solid color-mix(in srgb, var(--color-cat-annual) 27%, transparent); }
.cat-tint-succulent { background: color-mix(in srgb, var(--color-cat-succulent) 13%, transparent); color: var(--color-cat-succulent); border: 1px solid color-mix(in srgb, var(--color-cat-succulent) 27%, transparent); }
.cat-tint-grass { background: color-mix(in srgb, var(--color-cat-grass) 13%, transparent); color: var(--color-cat-grass); border: 1px solid color-mix(in srgb, var(--color-cat-grass) 27%, transparent); }
.cat-tint-fern { background: color-mix(in srgb, var(--color-cat-fern) 13%, transparent); color: var(--color-cat-fern); border: 1px solid color-mix(in srgb, var(--color-cat-fern) 27%, transparent); }
.cat-tint-bulb { background: color-mix(in srgb, var(--color-cat-bulb) 13%, transparent); color: var(--color-cat-bulb); border: 1px solid color-mix(in srgb, var(--color-cat-bulb) 27%, transparent); }
.cat-tint-edible { background: color-mix(in srgb, var(--color-cat-edible) 13%, transparent); color: var(--color-cat-edible); border: 1px solid color-mix(in srgb, var(--color-cat-edible) 27%, transparent); }
.cat-tint-cut_flower { background: color-mix(in srgb, var(--color-cat-cut_flower) 13%, transparent); color: var(--color-cat-cut_flower); border: 1px solid color-mix(in srgb, var(--color-cat-cut_flower) 27%, transparent); }
.cat-tint-medicinal { background: color-mix(in srgb, var(--color-cat-medicinal) 13%, transparent); color: var(--color-cat-medicinal); border: 1px solid color-mix(in srgb, var(--color-cat-medicinal) 27%, transparent); }

/* Categories — text color */
.cat-text-tree { color: var(--color-cat-tree); }
.cat-text-shrub { color: var(--color-cat-shrub); }
.cat-text-vine { color: var(--color-cat-vine); }
.cat-text-rose { color: var(--color-cat-rose); }
.cat-text-perennial { color: var(--color-cat-perennial); }
.cat-text-annual { color: var(--color-cat-annual); }
.cat-text-succulent { color: var(--color-cat-succulent); }
.cat-text-grass { color: var(--color-cat-grass); }
.cat-text-fern { color: var(--color-cat-fern); }
.cat-text-bulb { color: var(--color-cat-bulb); }
.cat-text-edible { color: var(--color-cat-edible); }
.cat-text-cut_flower { color: var(--color-cat-cut_flower); }
.cat-text-medicinal { color: var(--color-cat-medicinal); }

/* Categories — background fill (for timeline bars) */
.cat-bg-tree { background: var(--color-cat-tree); }
.cat-bg-shrub { background: var(--color-cat-shrub); }
.cat-bg-vine { background: var(--color-cat-vine); }
.cat-bg-rose { background: var(--color-cat-rose); }
.cat-bg-perennial { background: var(--color-cat-perennial); }
.cat-bg-annual { background: var(--color-cat-annual); }
.cat-bg-succulent { background: var(--color-cat-succulent); }
.cat-bg-grass { background: var(--color-cat-grass); }
.cat-bg-fern { background: var(--color-cat-fern); }
.cat-bg-bulb { background: var(--color-cat-bulb); }
.cat-bg-edible { background: var(--color-cat-edible); }
.cat-bg-cut_flower { background: var(--color-cat-cut_flower); }
.cat-bg-medicinal { background: var(--color-cat-medicinal); }

/* Categories — explore card pseudo-element */
.cat-card-tree::before { background: var(--color-cat-tree); }
.cat-card-shrub::before { background: var(--color-cat-shrub); }
.cat-card-vine::before { background: var(--color-cat-vine); }
.cat-card-rose::before { background: var(--color-cat-rose); }
.cat-card-perennial::before { background: var(--color-cat-perennial); }
.cat-card-annual::before { background: var(--color-cat-annual); }
.cat-card-succulent::before { background: var(--color-cat-succulent); }
.cat-card-grass::before { background: var(--color-cat-grass); }
.cat-card-fern::before { background: var(--color-cat-fern); }
.cat-card-bulb::before { background: var(--color-cat-bulb); }
.cat-card-edible::before { background: var(--color-cat-edible); }
.cat-card-cut_flower::before { background: var(--color-cat-cut_flower); }
.cat-card-medicinal::before { background: var(--color-cat-medicinal); }

/* Categories — library filter pill border */
.lib-cat-pill-tree { border-color: var(--color-cat-tree); }
.lib-cat-pill-shrub { border-color: var(--color-cat-shrub); }
.lib-cat-pill-vine { border-color: var(--color-cat-vine); }
.lib-cat-pill-rose { border-color: var(--color-cat-rose); }
.lib-cat-pill-perennial { border-color: var(--color-cat-perennial); }
.lib-cat-pill-annual { border-color: var(--color-cat-annual); }
.lib-cat-pill-succulent { border-color: var(--color-cat-succulent); }
.lib-cat-pill-grass { border-color: var(--color-cat-grass); }
.lib-cat-pill-fern { border-color: var(--color-cat-fern); }
.lib-cat-pill-bulb { border-color: var(--color-cat-bulb); }
.lib-cat-pill-edible { border-color: var(--color-cat-edible); }
.lib-cat-pill-cut_flower { border-color: var(--color-cat-cut_flower); }
.lib-cat-pill-medicinal { border-color: var(--color-cat-medicinal); }

/* Grounds */
.ground-lawn { background: var(--color-ground-lawn); }
.ground-gravel { background: var(--color-ground-gravel); }
.ground-decomposed_granite { background: var(--color-ground-decomposed_granite); }
.ground-mulch { background: var(--color-ground-mulch); }
.ground-patio_pavers { background: var(--color-ground-patio_pavers); }
.ground-concrete { background: var(--color-ground-concrete); }
.ground-brick { background: var(--color-ground-brick); }
.ground-flagstone { background: var(--color-ground-flagstone); }
.ground-deck_wood { background: var(--color-ground-deck_wood); }
.ground-river_rock { background: var(--color-ground-river_rock); }
.ground-ground_cover { background: var(--color-ground-ground_cover); }
.ground-raised_bed { background: var(--color-ground-raised_bed); }
.ground-sand { background: var(--color-ground-sand); }
.ground-water_feature { background: var(--color-ground-water_feature); }
.ground-soil_bare { background: var(--color-ground-soil_bare); }
.ground-bluestone { background: var(--color-ground-bluestone); }
.ground-slate { background: var(--color-ground-slate); }
.ground-travertine { background: var(--color-ground-travertine); }
.ground-porcelain_tile { background: var(--color-ground-porcelain_tile); }
.ground-terracotta { background: var(--color-ground-terracotta); }
.ground-cobblestone { background: var(--color-ground-cobblestone); }
.ground-limestone { background: var(--color-ground-limestone); }
.ground-sandstone { background: var(--color-ground-sandstone); }
.ground-granite_tile { background: var(--color-ground-granite_tile); }
.ground-marble { background: var(--color-ground-marble); }
.ground-stepping_stones { background: var(--color-ground-stepping_stones); }
.ground-mosaic_tile { background: var(--color-ground-mosaic_tile); }

/* Feature groups */
.feature-group-water { background: var(--color-feature-water); }
.feature-group-seating { background: var(--color-feature-seating); }
.feature-group-tables { background: var(--color-feature-tables); }
.feature-group-fire { background: var(--color-feature-fire); }
.feature-group-cooking { background: var(--color-feature-cooking); }
.feature-group-structures { background: var(--color-feature-structures); }
.feature-group-shade { background: var(--color-feature-shade); }
.feature-group-decorative { background: var(--color-feature-decorative); }
.feature-group-lighting { background: var(--color-feature-lighting); }
.feature-group-recreation { background: var(--color-feature-recreation); }
.feature-group-utility { background: var(--color-feature-utility); }
.feature-group-hardscape { background: var(--color-feature-hardscape); }

/* Feature per-item overrides (declared after groups — same specificity, later wins) */
.feature-pond { background: var(--color-feature-pond); }
.feature-sofa_outdoor { background: var(--color-feature-sofa_outdoor); }
.feature-hammock { background: var(--color-feature-hammock); }
.feature-fireplace { background: var(--color-feature-fireplace); }
.feature-chiminea { background: var(--color-feature-chiminea); }
.feature-patio_heater { background: var(--color-feature-patio_heater); }
.feature-outdoor_kitchen { background: var(--color-feature-outdoor_kitchen); }
.feature-pizza_oven { background: var(--color-feature-pizza_oven); }

/* Feature swatch shapes */
.feature-swatch--circle { border-radius: 50%; }
.feature-swatch--rect { border-radius: 2px; }
.feature-swatch--oval { border-radius: 50%; }

/* Irrigation zones */
.zone-drip { background: var(--color-zone-drip); }
.zone-sprinkler { background: var(--color-zone-sprinkler); }
.zone-hand_water { background: var(--color-zone-hand_water); }
.zone-soaker { background: var(--color-zone-soaker); }

/* Irrigation component swatches */
.irr-sprinkler { background: var(--color-irr-sprinkler); }
.irr-drip { background: var(--color-zone-drip); }
.irr-valves { background: var(--color-irr-valves); }
.irr-source { background: var(--color-irr-source); }

/* Irrigation swatch shapes */
.irr-swatch--circle { border-radius: 50%; }
.irr-swatch--rect { border-radius: 2px; }

/* Tubing */
.tubing-pipe { background: var(--color-tubing-pipe); }
.tubing-drip_line { background: var(--color-tubing-drip_line); }
.tubing-soaker_line { background: var(--color-tubing-soaker_line); }

/* Sun ramp */
.sun-step-0 { background: var(--color-sun-0); }
.sun-step-1 { background: var(--color-sun-1); }
.sun-step-2 { background: var(--color-sun-2); }
.sun-step-3 { background: var(--color-sun-3); }
.sun-step-4 { background: var(--color-sun-4); }
.sun-step-5 { background: var(--color-sun-5); }
.sun-step-6 { background: var(--color-sun-6); }

/* ---- Thumbnail Ramp ---- */
.plant-thumb { object-fit: contain; display: inline-block; }
.thumb-16 { width: 16px; height: 16px; }
.thumb-18 { width: 18px; height: 18px; }
.thumb-20 { width: 20px; height: 20px; }
.thumb-24 { width: 24px; height: 24px; }
.thumb-28 { width: 28px; height: 28px; }
.thumb-32 { width: 32px; height: 32px; }
.thumb-36 { width: 36px; height: 36px; }
.thumb-40 { width: 40px; height: 40px; }
.thumb-64 { width: 64px; height: 64px; }
.thumb-80 { width: 80px; height: 80px; }
.thumb-100 { width: 100px; height: 100px; }
.thumb-120 { width: 120px; height: 120px; }

/* ---- Utilities ---- */
.layout-row-between { display: flex; align-items: center; justify-content: space-between; }
.btn-danger { color: var(--color-danger, #c33); }
.empty-state-note { color: var(--color-neutral-muted, #999); padding: 40px; text-align: center; }
.pal-header--my-garden { background: var(--color-sage-tint, #e0f0d0); color: var(--color-garden, #2D5F2D); font-weight: 700; cursor: default; }
.pal-header--collection { margin-top: 8px; border-top: 2px solid var(--color-border-soft, #ddd); padding-top: 8px; }
.pal-empty-note { padding: 12px 16px; color: var(--color-neutral-muted, #999); font-size: 12px; font-style: italic; }
.chip-qty { font-size: 10px; color: var(--color-cat-vine, #7B68AE); margin-left: auto; }
.info-botanical { font-style: italic; color: var(--color-neutral-soft, #666); margin-bottom: 6px; }
.info-library-badge { font-size: 10px; color: var(--color-cat-vine, #7B68AE); margin-bottom: 4px; }
.info-description { color: var(--color-neutral-soft, #666); margin-bottom: 6px; font-size: 11px; }
.info-details { color: var(--color-neutral-soft, #666); margin-bottom: 6px; }
.info-actions { display: flex; gap: 4px; }
.legend-group-title { margin-top: 6px; }
.minimap-icon { height: 18px; filter: invert(0.3) sepia(1) hue-rotate(90deg) saturate(0.5); vertical-align: middle; margin-right: 6px; }
.bullet { display: inline; }
.progress-fill { width: var(--progress, 0%); }

/* ---- Reusable Classes ---- */

/* Typography */
.title { font-family: var(--font-display); font-size: 24px; font-weight: 400; color: var(--color-charcoal); letter-spacing: -0.3px; }
.title-lg { font-family: var(--font-display); font-size: 30px; font-weight: 300; color: var(--color-charcoal); letter-spacing: -0.5px; }
.title-sm { font-family: var(--font-display); font-size: 16px; font-weight: 400; color: var(--color-charcoal); }
.subtitle { font-family: var(--font-body); font-size: 14px; font-style: italic; color: var(--color-stone-dark); }
.body-text { font-family: var(--font-body); font-size: 13px; color: var(--color-stone-dark); line-height: 1.6; }
.label { font-family: var(--font-display); font-size: 15px; font-style: italic; color: var(--color-stone-dark); }
.label-sm { font-family: var(--font-ui); font-size: 10px; color: var(--color-stone-light); text-transform: uppercase; letter-spacing: 1px; }
.meta { font-family: var(--font-body); font-size: 12px; color: var(--color-stone); }
.accent-text { color: var(--color-garden); }
.muted-text { color: var(--color-stone-light); }

/* Surfaces */
.surface-app { background: var(--color-parchment); }
.surface-panel { background: var(--color-paper); }
.surface-card { background: var(--color-page); }

/* Cards */
.card { background: var(--color-page); border: var(--border-dashed); border-radius: var(--radius-md); padding: var(--space-md); }
.card-hover:hover { background: var(--color-parchment); }

/* Dividers */
.divider { border-bottom: var(--border-dashed); }
.divider-subtle { border-bottom: var(--border-dotted); }
.divider-structural { border-bottom: var(--border-medium); }

/* Buttons */
.btn { padding: 5px 12px; border: 1px solid var(--color-sand); border-radius: var(--radius-md); background: var(--color-page); font-size: 11px; font-family: var(--font-ui); color: var(--color-stone-dark); cursor: pointer; }
.btn:hover { background: var(--color-sand); }
.btn-active { background: var(--color-sand); border-color: var(--color-garden); color: var(--color-garden); }
.btn-primary { padding: 6px 16px; border: none; border-radius: var(--radius-md); background: var(--color-garden); color: var(--color-page); font-size: 12px; font-family: var(--font-ui); font-weight: 600; cursor: pointer; }
.btn-primary:hover { background: var(--color-garden-dark); }
.btn-pill { border-radius: var(--radius-pill); }

/* Inputs */
.input { padding: 7px 12px; border: 1px solid var(--color-sand); border-radius: var(--radius-md); font-size: 13px; font-family: var(--font-body); background: var(--color-page); color: var(--color-charcoal); }
.input:focus { outline: none; border-color: var(--color-garden); box-shadow: var(--focus-ring); }
.input-pill { border-radius: var(--radius-pill); }

/* Badges */
.badge { display: inline-block; font-size: 10px; padding: 2px 8px; border-radius: var(--radius-pill); font-weight: 600; }
.badge-green { background: var(--color-garden-bg); color: var(--color-garden); border: 1px solid var(--color-garden-border); }
.badge-amber { background: var(--color-ochre-bg); color: var(--color-ochre); border: 1px solid var(--color-ochre-border); }
.badge-purple { background: var(--color-mauve-bg); color: var(--color-mauve); border: 1px solid var(--color-mauve-border); }

/* Journal texture */
.texture-ruled { position: relative; }
.texture-ruled::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--texture-ruled); pointer-events: none; }

/* Fade animation */
.fade-in { animation: fadeIn 0.4s ease; }

/* Loading placeholder — reusable pulsing LG logo */
.lg-loading { text-align: center; display: flex; align-items: center; justify-content: center; }
.lg-loading-icon { opacity: 0.2; animation: pulse 1.8s ease-in-out infinite; }
.lg-loading-sm { padding: 12px 0; min-height: 60px; }
.lg-loading-sm .lg-loading-icon { height: 40px; }
.lg-loading-md { padding: 24px 0; min-height: 120px; }
.lg-loading-md .lg-loading-icon { height: 80px; }
.lg-loading-lg { padding: 40px 0; min-height: 180px; }
.lg-loading-lg .lg-loading-icon { height: 120px; }

/* Global loading screen */
#app-loader { position: fixed; inset: 0; z-index: 99999; background: var(--color-paper); display: flex; align-items: center; justify-content: center; transition: opacity 0.5s ease; }
#app-loader.hidden { opacity: 0; pointer-events: none; }
.app-loader-icon { height: 64px; opacity: 0.3; animation: pulse 1.8s ease-in-out infinite; }

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-body); display: flex; flex-direction: column; height: 100vh; overflow: hidden; background: var(--color-parchment); color: var(--color-charcoal); }

/* Sidebar */
#sidebar { width: 370px; min-width: 370px; background: var(--color-paper); border-right: var(--border-medium); display: flex; flex-direction: column; position: relative; }
#sidebar.sidebar--wide { width: 400px; min-width: 400px; }
#sidebar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--texture-ruled); pointer-events: none; z-index: 0; }
#sidebar-header { padding: 14px 14px 12px; border-bottom: var(--border-medium); background: var(--color-parchment); }
#sidebar-header h1 { font-size: 16px; color: var(--color-garden); margin-bottom: 8px; font-family: var(--font-display); font-weight: 400; letter-spacing: -0.2px; }
#search { width: 100%; padding: 7px 12px; border: var(--color-sand); border-radius: var(--radius-pill); font-size: 13px; background: var(--color-page); border-radius: var(--radius-pill); }
#palette { flex: 1; overflow-y: auto; padding: 4px 0; }
.pal-group { margin-bottom: 2px; }
.pal-header { padding: 7px 14px; font-size: 12px; font-weight: 400; color: var(--color-stone); background: var(--color-parchment); cursor: pointer; user-select: none; font-family: var(--font-display); font-style: italic; letter-spacing: 0.2px; }
.pal-header:hover { background: var(--color-sand); }
.pal-item { padding: 6px 14px 6px 18px; font-size: 12px; cursor: grab; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(0,0,0,0.04); color: var(--color-charcoal); }
.pal-item:hover { background: var(--color-parchment); }
.pal-item.selected { background: var(--color-sand); font-weight: 600; }
#hover-preview { position: fixed; left: var(--preview-left, -9999px); top: var(--preview-top, -9999px); pointer-events: none; z-index: 10000; background: var(--color-page); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 8px; max-width: 216px; }
#hover-preview img { display: block; max-width: 200px; max-height: 200px; object-fit: contain; border-radius: var(--radius-sm); }
#hover-preview .hp-name { display: block; font-size: 11px; font-style: italic; color: var(--color-stone); text-align: center; margin-top: 4px; }
.cat-dot { width: 10px; height: 10px; border-radius: var(--radius-round); flex-shrink: 0; }
.ground-swatch { width: 10px; height: 10px; border-radius: var(--radius-sm); flex-shrink: 0; border: 1px solid rgba(40,35,28,0.12); }
.feature-swatch { width: 10px; height: 10px; flex-shrink: 0; border: 1px solid rgba(40,35,28,0.12); }
.zone-swatch { width: 10px; height: 10px; border-radius: var(--radius-sm); flex-shrink: 0; border: 1px solid rgba(40,35,28,0.12); }
.irr-swatch { width: 10px; height: 10px; flex-shrink: 0; border: 1px solid rgba(40,35,28,0.12); }
.tubing-swatch { width: 10px; height: 10px; border-radius: var(--radius-sm); flex-shrink: 0; border: 1px solid rgba(40,35,28,0.12); }
.pal-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-body); }
.pal-qty { font-size: 10px; color: var(--color-stone-light); flex-shrink: 0; }

/* Tabs */
.tab-bar { display: flex; flex-direction: column; border-bottom: var(--border-medium); background: var(--color-paper); }
.tab-group { display: flex; align-items: center; border-bottom: 1px solid var(--color-parchment); }
.tab-group:last-child { border-bottom: none; }
.tab-group-label { font-size: 9px; font-weight: 700; color: var(--color-stone-light); text-transform: uppercase; letter-spacing: 0.5px; padding: 0 8px; min-width: 65px; }
.tab-group-btns { display: flex; flex: 1; }
.tab-btn { flex: 1; padding: 7px 4px; border: none; background: transparent; font-size: 11px; font-weight: 500; color: var(--color-stone); cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s; }
.tab-btn:hover { color: var(--color-charcoal); background: var(--color-sand); }
.tab-btn.active { color: var(--color-garden); border-bottom-color: var(--color-garden); background: var(--color-page); }
.tab-icon { font-size: 12px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* === Info Panel Component === */
#info-panel { border-top: var(--border-medium); max-height: 240px; overflow-y: auto; padding: 12px 14px; font-size: 12px; background: var(--color-parchment); }
#info-panel h3 { font-size: 13px; margin-bottom: 6px; color: var(--color-garden); }
.info-row { display: flex; gap: 4px; margin-bottom: 3px; }
.info-label { font-weight: 600; min-width: 65px; color: var(--color-stone-dark); }
.info-value { color: var(--color-charcoal); }
#info-empty { color: var(--color-stone-light); font-style: italic; }
.info-botanical { font-style: italic; color: var(--color-stone); margin-bottom: var(--space-xs); }
.info-library-badge { font-size: 10px; color: var(--color-violet); margin-bottom: var(--space-xs); }
.info-description { color: var(--color-stone); margin-bottom: var(--space-xs); }
.info-description--sm { font-size: 11px; }
.info-actions { display: flex; gap: var(--space-xs); margin-top: var(--space-sm); flex-wrap: wrap; }
.tb-danger { color: var(--color-danger); }
.info-schedule-input { padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-sand); border-radius: var(--radius-sm); font-size: 13px; font-family: var(--font-ui); }
.info-schedule-input--sm { width: 80px; }
.info-seasonal-input { width: 60px; padding: 2px var(--space-xs); border: 1px solid var(--color-sand); border-radius: var(--radius-sm); font-size: 12px; font-family: var(--font-ui); }
.info-schedule-textarea { width: 100%; padding: 6px var(--space-sm); border: 1px solid var(--color-sand); border-radius: var(--radius-sm); font-size: 12px; font-family: var(--font-ui); resize: vertical; }

/* Main area */
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

/* Toolbar */
#toolbar { padding: 8px 14px; background: var(--color-parchment); border-bottom: var(--border-medium); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#toolbar label { font-size: 11px; color: var(--color-stone); font-family: var(--font-ui); }
#toolbar input[type=number] { width: 60px; padding: 4px 8px; border: var(--color-sand); border-radius: var(--radius-md); font-size: 12px; background: var(--color-page); font-family: var(--font-ui); }
.tb { padding: 5px 12px; border: var(--border-medium); border-radius: var(--radius-md); background: var(--color-page); font-size: 11px; cursor: pointer; color: var(--color-stone-dark); font-family: var(--font-ui); }
.tb:hover { background: var(--color-sand); }
.tb.active { background: var(--color-sand); border-color: var(--color-garden); color: var(--color-garden); }
.toolbar-sep { width: 1px; height: 20px; background: var(--color-sand); }
#zoom-display { font-size: 11px; color: var(--color-stone-dark); min-width: 40px; text-align: center; }
#lang-toggle { padding: 3px 8px; border: 1px solid var(--color-sand); border-radius: var(--radius-sm); background: var(--color-page); font-size: 11px; cursor: pointer; color: var(--color-stone); }
.toolbar-guide { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--color-stone); }
.toolbar-guide-nowrap { white-space: nowrap; }
.sun-gradient-bar { width: 80px; height: 10px; border-radius: var(--radius-md); display: inline-block; background: linear-gradient(to right, var(--color-indigo), var(--color-sun-teal), var(--color-ochre), var(--color-sun-gold)); border: var(--border-light); }
.toolbar-slider { width: 70px; }
.toolbar-slider-wide { width: 80px; }
.toolbar-val-sm { min-width: 40px; }
.toolbar-val-md { min-width: 55px; }
#ft-label { font-size: 11px; }

/* Canvas container */
#canvas-container { flex: 1; overflow: auto; position: relative; background: var(--color-sand); }
#garden-canvas { display: block; }
#garden-canvas { touch-action: none; }

/* Legend */
#legend { position: absolute; bottom: 10px; right: 10px; background: rgba(250,248,244,0.92); border: 1px solid var(--color-sand); border-radius: var(--radius-md); padding: 8px 10px; font-size: 11px; max-height: 300px; overflow-y: auto; }
#legend h4 { font-size: 11px; margin-bottom: 4px; color: var(--color-stone-dark); }
.legend-item { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; }
.legend-dot { width: 8px; height: 8px; border-radius: var(--radius-round); }
.legend-swatch { width: 8px; height: 8px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.1); }

/* Care Calendar */
#care-view { display: none; flex: 1; overflow-y: auto; overflow-x: hidden; padding: 24px 28px 24px 24px; background: var(--color-paper); min-width: 0; max-width: 100%; box-sizing: border-box; }
#care-view.active { display: block; }
.care-sidebar-months { list-style: none; padding: 0; }
.care-sidebar-months li { padding: 6px 12px; font-size: 12px; cursor: pointer; border-left: none; }
.care-sidebar-months li:hover { background: var(--color-parchment); }
.care-sidebar-months li.active { background: var(--color-sand); font-weight: 600; color: var(--color-garden); }
.care-sidebar-months li.current { color: var(--color-ochre); }
.care-summary { padding: 10px 12px; font-size: 12px; color: var(--color-stone-dark); border-top: 1px solid var(--color-parchment); }

/* Medicinal Tab */
#medicinal-view { display: none; flex: 1; overflow-y: auto; padding: 24px; background: var(--color-paper); }
#medicinal-view.active { display: block; }
#timeline-view { display: none; flex: 1; overflow: auto; padding: 24px; background: var(--color-paper); min-width: 0; max-width: 100%; box-sizing: border-box; }
#timeline-view.active { display: block; }
.med-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.med-header h2 { font-size: 22px; color: var(--color-garden); font-family: var(--font-display); font-weight: 400; letter-spacing: -0.3px; }
.med-header .med-subtitle { font-size: 13px; color: var(--color-stone); margin-top: 2px; }
.med-controls { display: flex; gap: 8px; align-items: center; }
.med-controls input { padding: 6px 10px; border: var(--border-medium); border-radius: var(--radius-sm); font-size: 13px; width: 200px; }
.med-controls select { padding: 6px 8px; border: var(--color-sand); border-radius: var(--radius-sm); font-size: 13px; background: var(--color-page); }
.med-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.med-card { background: var(--color-page); border-radius: var(--radius-md); border: 1px solid var(--color-sand); padding: 14px; transition: box-shadow 0.15s, border-color 0.15s; border-color: var(--color-sand); }
.med-card:hover { box-shadow: var(--shadow-sm); }
.med-card.in-garden { border-color: var(--color-sage); border-width: 2px; }
.med-card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.med-card-top .cat-dot { width: 10px; height: 10px; border-radius: var(--radius-round); flex-shrink: 0; }
.med-card-name { font-weight: 400; font-size: 15px; color: var(--color-charcoal); font-family: var(--font-body); }
.med-card-botanical { font-size: 12px; color: var(--color-stone); font-style: italic; margin-bottom: 8px; }
.med-card-uses { font-size: 13px; line-height: 1.6; color: var(--color-stone-dark); margin-bottom: 8px; font-family: var(--font-display); font-style: italic; }
.med-card-footer { display: flex; align-items: center; justify-content: space-between; }
.med-card-category { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-stone-light); }
.med-badge { display: inline-block; font-size: 10px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-parchment); color: var(--color-garden); font-weight: 600; }
.med-sidebar-systems { list-style: none; padding: 0; }
.med-sidebar-systems li { padding: 6px 12px; font-size: 12px; cursor: pointer; border-left: none; }
.med-sidebar-systems li:hover { background: var(--color-parchment); }
.med-sidebar-systems li.active { background: var(--color-sand); font-weight: 600; color: var(--color-garden); }
.med-sidebar-systems li.med-myplants { border-top: 1px solid var(--color-parchment); margin-top: 4px; padding-top: 8px; color: var(--color-mauve); }
.med-sidebar-systems li.med-myplants.active { color: var(--color-mauve); background: var(--color-mauve-bg); }
.med-sidebar-summary { padding: 10px 12px; font-size: 12px; color: var(--color-stone-dark); border-top: 1px solid var(--color-parchment); }
/* Plant detail modal */
.plant-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(30,25,20,0.40); z-index: 9000; align-items: center; justify-content: center; }
.plant-modal-overlay.active { display: flex; }
.plant-modal { background: var(--color-page); border-radius: var(--radius-lg); max-width: 540px; width: 90%; max-height: 85vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(40,35,28,0.25); position: relative; }
.plant-modal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--texture-ruled); pointer-events: none; border-radius: var(--radius-lg); }
.plant-modal-head { padding: 20px 24px 0; display: flex; align-items: flex-start; gap: 12px; }
.plant-modal-head .cat-dot { width: 14px; height: 14px; border-radius: var(--radius-round); margin-top: 4px; flex-shrink: 0; }
.plant-modal-head-text { flex: 1; }
.plant-modal-head h2 { margin: 0; font-size: 24px; color: var(--color-charcoal); font-family: var(--font-display); font-weight: 400; letter-spacing: -0.3px; }
.plant-modal-head .botanical { font-style: italic; color: var(--color-stone); font-size: 14px; margin-top: 2px; font-family: var(--font-body); }
.plant-modal-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--color-stone-light); padding: 0 4px; line-height: 1; }
.plant-modal-close:hover { color: var(--color-charcoal); }
.plant-modal-body { padding: 16px 24px 24px; }
.plant-modal-body .pm-section { margin-bottom: 14px; }
.plant-modal-body .pm-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-stone-light); margin-bottom: 4px; font-weight: 600; font-family: var(--font-ui); }
.plant-modal-body .pm-desc { font-size: 14px; color: var(--color-stone-dark); line-height: 1.7; font-family: var(--font-display); font-style: italic; }
.plant-modal-body .pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.plant-modal-body .pm-grid-item { font-size: 12px; }
.plant-modal-body .pm-grid-label { color: var(--color-stone-light); }
.plant-modal-body .pm-grid-value { color: var(--color-charcoal); font-weight: 500; }
.plant-modal-body .pm-tag { display: inline-block; font-size: 10px; padding: 2px 10px; border-radius: var(--radius-pill); margin-right: 6px; margin-bottom: 4px; }
.plant-modal-body .pm-med { background: var(--color-parchment); color: var(--color-garden); font-size: 14px; line-height: 1.7; padding: 10px 14px; border-radius: var(--radius-md); border-left: none; border: var(--border-dashed); font-family: var(--font-display); font-style: italic; }
.plant-modal-body .pm-hist { background: var(--color-paper); color: var(--color-stone-dark); font-size: 14px; line-height: 1.7; padding: 10px 14px; border-radius: var(--radius-md); border-left: none; border: var(--border-dashed); font-family: var(--font-display); font-style: italic; }
.pm-illustration { text-align: center; padding: 16px 24px 8px; }
.pm-illustration img { max-width: 100%; max-height: 300px; object-fit: contain; border-radius: var(--radius-md); }

/* Irrigation layer toggle */
.irr-layer-toggle { display: flex; gap: 0; margin-bottom: 8px; padding: 0 12px; }
.irr-layer-btn { flex: 1; padding: 6px 8px; border: var(--border-medium); background: var(--color-page); font-size: 11px; font-weight: 600; cursor: pointer; text-align: center; color: var(--color-stone); }
.irr-layer-btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.irr-layer-btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.irr-layer-btn.active { background: var(--color-indigo-bg); border-color: var(--color-indigo); color: var(--color-indigo); }
.irr-layer-btn:hover:not(.active) { background: var(--color-parchment); }

/* Irrigation alerts */
.irr-alerts { margin-bottom: 16px; }
.irr-alerts h4 { font-size: 13px; color: var(--color-danger); margin-bottom: 8px; }
.irr-alert { padding: 8px 12px; border-radius: var(--radius-md); font-size: 12px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.irr-alert.high { background: var(--color-rose-bg); border: 1px solid var(--color-rose-border); color: var(--color-rose-text); }
.irr-alert.low { background: var(--color-ochre-bg); border: 1px solid var(--color-ochre-border); color: var(--color-ochre-text); }
.irr-alert.info { background: var(--color-indigo-bg); border: 1px solid var(--color-indigo-border); color: var(--color-indigo-text); }

/* Irrigation schedule card in care view */
.irr-schedule-card { background: var(--color-page); border-radius: var(--radius-md); border: 1px solid var(--color-sand); padding: 12px 14px; margin-bottom: 8px; }
.irr-schedule-card .irr-zone-name { font-weight: 600; font-size: 13px; color: var(--color-charcoal); }
.irr-schedule-card .irr-zone-detail { font-size: 12px; color: var(--color-stone-dark); margin-top: 4px; }
.irr-schedule-section { margin-bottom: 20px; }
.irr-schedule-section h3 { font-size: 15px; color: var(--color-indigo); margin-bottom: 10px; }

/* Garden Selector */
.garden-selector { position: relative; }
.garden-selector-btn { min-width: 140px; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 6px; font-weight: 600; color: var(--color-garden); }
.garden-dropdown { display: none; position: absolute; top: 100%; left: 0; min-width: 260px; background: var(--color-page); border: var(--border-medium); border-radius: var(--radius-pill); box-shadow: var(--shadow-lg); z-index: 1000; max-height: 400px; overflow-y: auto; margin-top: 6px; }
.garden-dropdown.open { display: block; }
.garden-dropdown-section { padding: 4px 0; }
.garden-dropdown-divider { height: 1px; background: var(--color-parchment); margin: 0; }
.garden-dropdown-item { padding: 10px 16px; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; color: var(--color-charcoal); }
.garden-dropdown-item:hover { background: var(--color-parchment); }
.garden-dropdown-item.active { background: var(--color-sand); font-weight: 600; }
.garden-dropdown-item .garden-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.garden-dropdown-item .garden-item-date { font-size: 10px; color: var(--color-stone-light); margin-left: 8px; flex-shrink: 0; }
.garden-dropdown-item .garden-item-actions { display: flex; gap: 4px; margin-left: 8px; }
.garden-dropdown-item .garden-item-actions button { background: none; border: none; cursor: pointer; font-size: 11px; color: var(--color-stone-light); padding: 2px 4px; border-radius: var(--radius-sm); }
.garden-dropdown-item .garden-item-actions button:hover { background: var(--color-sand); color: var(--color-stone-dark); }
.garden-dropdown-label { padding: 8px 16px 4px; font-size: 9px; font-weight: 600; color: var(--color-stone); text-transform: uppercase; letter-spacing: 1px; }
.garden-dropdown-item.example { color: var(--color-mauve); }
.garden-dropdown-item.example:hover { background: var(--color-mauve-bg); }
.save-indicator { font-size: 11px; color: var(--color-stone-light); }
.save-indicator.saving { color: var(--color-ochre); }
.save-indicator.saved { color: var(--color-moss); }

/* Zone display */
.zone-display { font-size: 11px; color: var(--color-mauve); cursor: pointer; font-weight: 600; padding: 3px 8px; border: 1px solid var(--color-mauve-border); border-radius: var(--radius-sm); background: var(--color-mauve-bg); }
.zone-display:hover { background: var(--color-mauve-bg); }

/* Zone prompt banner */
.zone-prompt-banner { background: var(--color-mauve-bg); border: 1px solid var(--color-mauve-border); border-radius: var(--radius-md); padding: 16px 20px; margin-bottom: 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.zone-prompt-banner .zpb-text { font-size: 13px; color: var(--color-stone-dark); flex: 1; min-width: 200px; }
.zone-prompt-banner .zpb-text strong { color: var(--color-mauve); }
.zone-prompt-banner .zpb-inputs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zone-prompt-banner input[type=text] { width: 70px; padding: 5px 8px; border: var(--border-medium); border-radius: var(--radius-sm); font-size: 13px; }
.zone-prompt-banner select { padding: 5px 8px; border: var(--border-medium); border-radius: var(--radius-sm); font-size: 13px; }
.zone-prompt-banner button { padding: 5px 12px; border: 1px solid var(--color-mauve); border-radius: var(--radius-sm); background: var(--color-mauve); color: white; font-size: 12px; cursor: pointer; }
.zone-prompt-banner button:hover { background: var(--color-mauve-hover); }
.zone-prompt-banner .zpb-or { color: var(--color-stone-light); font-size: 12px; }
.care-region-label { font-size: 12px; color: var(--color-mauve); font-weight: 600; margin-left: 8px; }

/* Per-plant care section */
.care-source-badge { font-size: 10px; padding: 2px 8px; border-radius: var(--radius-pill); font-weight: 600; margin-left: auto; flex-shrink: 0; }
.care-source-badge.verified { background: var(--color-garden-bg); color: var(--color-garden); border: 1px solid var(--color-garden-border); }
.care-source-badge.generated { background: var(--color-ochre-bg); color: var(--color-ochre); border: 1px solid var(--color-ochre-border); }
.plant-care-tasks { margin: 0 0 8px 20px; padding: 0; font-size: 13px; color: var(--color-charcoal); }
.plant-care-tasks li { margin-bottom: 4px; line-height: 1.4; }
.plant-care-watering { font-size: 12px; color: var(--color-stone-dark); font-style: italic; padding-left: 4px; }
.care-disclaimer { font-size: 11px; color: var(--color-stone-light); margin-top: 12px; padding: 8px 12px; background: var(--color-paper); border-radius: var(--radius-sm); border: 1px solid var(--color-parchment); }

/* ---- Almanac ---- */
.almanac { padding: 0; overflow-x: hidden; max-width: 100%; box-sizing: border-box; }

.almanac-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 24px 28px 16px; background: var(--color-paper); border-bottom: var(--border-medium); overflow: hidden; }
.almanac-title { font-size: 24px; color: var(--color-garden); margin: 0; font-weight: 400; font-family: var(--font-display); letter-spacing: -0.3px; }
.almanac-meta { font-size: 12px; color: var(--color-moss); margin-top: 4px; }
.almanac-header .month-nav { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.almanac-header .month-nav button { padding: 6px 14px; border: var(--border-medium); border-radius: var(--radius-md); background: var(--color-page); font-size: 12px; cursor: pointer; color: var(--color-charcoal); font-weight: 500; }
.almanac-header .month-nav button:hover { background: var(--color-parchment); }

.almanac-narrative { padding: 16px 28px; font-size: 15px; color: var(--color-stone-dark); line-height: 1.7; font-style: italic; font-family: var(--font-display); background: var(--color-paper); border-bottom: var(--border-dashed); }

.almanac-section { padding: 20px 28px; border-bottom: var(--border-dashed); overflow-x: auto; overflow-y: hidden; }
.almanac-section:last-child { border-bottom: none; }
.almanac-section-title { font-size: 16px; color: var(--color-garden); margin: 0 0 12px 0; font-weight: 400; font-family: var(--font-display); letter-spacing: -0.2px; display: flex; align-items: center; gap: 8px; }
.task-count { font-size: 11px; color: var(--color-paper); background: var(--color-sage); border-radius: var(--radius-pill); padding: 1px 8px; font-weight: 600; }

/* Status cards */
.status-cards { display: flex; gap: 12px; flex-wrap: wrap; max-width: 100%; }
.status-card { flex: 1; min-width: 140px; background: var(--color-page); border: 1px solid var(--color-parchment); border-radius: var(--radius-md); padding: 12px; }
.status-card-header { font-size: 13px; font-weight: 400; color: var(--color-stone-dark); margin-bottom: 8px; font-family: var(--font-body); font-style: italic; }
.status-count { font-weight: 400; color: var(--color-stone-light); }
.status-card-plants { display: flex; flex-direction: column; gap: 4px; }
.status-plant { font-size: 12px; color: var(--color-charcoal); display: flex; align-items: center; gap: 6px; font-family: var(--font-body); cursor: pointer; }
.status-blooming { background: var(--color-rose-bg); border: 1px solid var(--color-rose-border); }
.status-growing { background: var(--color-sage-bg); border: 1px solid var(--color-sage-tint); }
.status-dormant { background: var(--color-paper); border: 1px solid var(--color-sand); }
.status-harvest { background: var(--color-ochre-bg); border: 1px solid var(--color-ochre-border); }

/* Task lists */
.almanac-tasks { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 100%; }
.almanac-task { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; background: var(--color-page); border: 1px solid var(--color-parchment); border-radius: var(--radius-md); font-size: 13px; line-height: 1.4; min-width: 0; }
.almanac-task .task-text { min-width: 0; word-wrap: break-word; overflow-wrap: break-word; font-family: var(--font-body); }
.almanac-task.urgent { position: relative; padding-left: 20px; }
.almanac-task.urgent::before { content: ''; position: absolute; left: 8px; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-ochre); }
.almanac-task.watch { position: relative; padding-left: 20px; background: var(--color-rose-bg); }
.almanac-task.watch::before { content: ''; position: absolute; left: 8px; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-danger); }
.task-check { color: var(--color-stone-light); flex-shrink: 0; font-size: 14px; }
.task-icon { flex-shrink: 0; font-size: 14px; }
.task-text { flex: 1; color: var(--color-charcoal); font-family: var(--font-body); }
.task-plant { font-size: 11px; color: var(--color-stone); flex-shrink: 0; display: flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer; }

/* Watering guide */
.watering-guide { display: flex; flex-direction: column; gap: 8px; max-width: 100%; }
.watering-band { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--color-clay); }
.watering-band:last-child { border-bottom: none; }
.watering-band-label { font-size: 12px; font-weight: 600; color: var(--color-indigo); min-width: 180px; flex-shrink: 0; }
.watering-band-plants { display: flex; flex-wrap: wrap; gap: 6px; }
.watering-plant { font-size: 12px; color: var(--color-stone-dark); display: flex; align-items: center; gap: 4px; background: var(--color-indigo-bg); padding: 2px 8px; border-radius: var(--radius-sm); cursor: pointer; }

/* What to plant */
.almanac-planting { display: flex; flex-direction: column; gap: 6px; }
.planting-item { font-size: 13px; color: var(--color-charcoal); padding: 4px 0; line-height: 1.4; }

/* Plant thumbnails */
.plant-thumb { border-radius: var(--radius-round); object-fit: cover; vertical-align: middle; margin-right: 4px; flex-shrink: 0; }
.plant-count { font-size: 10px; color: var(--color-mauve); font-weight: 600; }

/* Progress bar */
.progress-section { padding: 12px 28px; background: var(--color-paper); border-bottom: var(--border-dashed); display: flex; align-items: center; gap: 12px; overflow: hidden; }
.progress-bar { flex: 1; height: 6px; background: var(--color-sand); border-radius: var(--radius-sm); overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--color-sage), var(--color-moss)); border-radius: var(--radius-sm); transition: width 0.3s ease; }
.progress-label { font-size: 12px; color: var(--color-stone); white-space: nowrap; }

/* Bloom banner */
.bloom-banner { padding: 20px 28px; background: var(--color-paper); border-bottom: var(--border-dashed); overflow: hidden; }
.bloom-banner-title { font-size: 17px; font-weight: 400; color: var(--color-rose); margin-bottom: 12px; font-family: var(--font-display); letter-spacing: -0.2px; }
.bloom-banner-plants { display: flex; gap: 24px; overflow-x: auto; padding-bottom: 8px; padding-right: 16px; }
.bloom-plant { text-align: center; flex-shrink: 0; cursor: pointer; }
.bloom-plant-img { width: 64px; height: 64px; border-radius: var(--radius-round); overflow: hidden; background: var(--color-page); border: 2px solid var(--color-sand); margin: 0 auto; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bloom-plant-img img { width: 64px; height: 64px; border-radius: var(--radius-round); object-fit: cover; }
.bloom-plant-name { font-size: 12px; color: var(--color-stone-dark); max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; font-family: var(--font-body); }

/* Collapsible sections */
.collapsible { cursor: pointer; user-select: none; }
.collapsible:hover { opacity: 0.8; }
.collapse-chevron { font-size: 12px; color: var(--color-stone-light); display: inline-block; width: 14px; }

/* Task checkboxes */
.task-checkbox { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; margin-top: 1px; accent-color: var(--color-moss); }
.almanac-task.done { opacity: 0.5; }
.almanac-task.done .task-text { text-decoration: line-through; color: var(--color-stone-light); }

/* Completed section */
.completed-section { background: var(--color-paper); }
.done-count { background: var(--color-stone); }

/* Shared garden banner */
#shared-banner { display: none; padding: 10px 20px; background: linear-gradient(90deg, var(--color-indigo-bg), var(--color-mauve-bg)); border-bottom: 1px solid var(--color-mauve-border); align-items: center; gap: 12px; font-size: 13px; color: var(--color-stone-dark); }
#shared-banner.active { display: flex; }
.shared-banner-icon { font-size: 18px; }
.shared-banner-text { flex: 1; }
.shared-banner-text span { font-weight: 600; color: var(--color-charcoal); }
.shared-banner-btn { padding: 6px 16px; border: 1px solid var(--color-mauve); border-radius: var(--radius-md); background: var(--color-mauve); color: var(--color-paper); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.shared-banner-btn:hover { background: var(--color-mauve-hover); }
.share-feedback { font-size: 11px; color: var(--color-moss); font-weight: 600; margin-left: 4px; }

/* Custom plant form */
.custom-plant-add { padding: 8px 12px; border-bottom: 1px solid var(--color-parchment); }
.custom-plant-toggle { width: 100%; padding: 7px 12px; border: 1px dashed var(--color-mauve); border-radius: var(--radius-md); background: var(--color-mauve-bg); color: var(--color-mauve); font-size: 12px; font-weight: 600; cursor: pointer; }
.custom-plant-toggle:hover { background: var(--color-mauve-bg); }
.custom-plant-form { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.cp-input, .cp-select { width: 100%; padding: 6px 8px; border: var(--border-medium); border-radius: var(--radius-sm); font-size: 12px; box-sizing: border-box; }
.cp-size-row { display: flex; gap: 8px; }
.cp-size-label { font-size: 11px; color: var(--color-stone-dark); flex: 1; }
.cp-num { width: 50px; padding: 4px 6px; border: var(--border-medium); border-radius: var(--radius-sm); font-size: 12px; }
.cp-submit { padding: 6px 12px; border: 1px solid var(--color-mauve); border-radius: var(--radius-sm); background: var(--color-mauve); color: var(--color-paper); font-size: 12px; font-weight: 600; cursor: pointer; }
.cp-submit:hover { background: var(--color-mauve-hover); }
.cp-feedback { font-size: 11px; min-height: 16px; }
.cp-feedback--error { color: var(--color-danger); }
.cp-feedback--success { color: var(--color-success); }
.custom-badge { font-size: 9px; padding: 1px 6px; border-radius: var(--radius-md); background: var(--color-mauve-bg); color: var(--color-mauve); border: 1px solid var(--color-mauve-border); font-weight: 600; flex-shrink: 0; }

/* Create Garden overlay */
.create-garden-overlay { display: flex; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 2000; align-items: center; justify-content: center; }
.create-garden-modal { background: var(--color-page); border-radius: var(--radius-lg); padding: 28px; max-width: 440px; width: 90%; box-shadow: 0 20px 60px rgba(40,35,28,0.18); }
.create-garden-modal h2 { margin: 0 0 16px; color: var(--color-garden); font-size: 22px; font-family: var(--font-display); font-weight: 400; letter-spacing: -0.3px; }
.garden-type-cards { display: flex; gap: 12px; margin-bottom: 16px; }
.garden-type-card { flex: 1; padding: 16px 12px; border: 2px solid var(--color-sand); border-radius: var(--radius-pill); text-align: center; cursor: pointer; transition: all 0.15s; }
.garden-type-card:hover { border-color: var(--color-sage); background: var(--color-paper); }
.garden-type-card.selected { border-color: var(--color-garden); background: var(--color-sage-bg); }
.gtc-icon { font-size: 28px; margin-bottom: 6px; }
.gtc-name { font-size: 14px; font-weight: 700; color: var(--color-charcoal); }
.gtc-desc { font-size: 11px; color: var(--color-stone); margin-top: 2px; }
.create-garden-input { width: 100%; padding: 10px 12px; border: var(--border-medium); border-radius: var(--radius-md); font-size: 14px; box-sizing: border-box; margin-bottom: 12px; }
.create-garden-actions { display: flex; gap: 8px; justify-content: flex-end; }
.create-garden-btn { padding: 8px 24px; border: none; border-radius: var(--radius-md); background: var(--color-garden); color: var(--color-page); font-size: 13px; font-weight: 600; cursor: pointer; }
.create-garden-btn:hover { background: var(--color-garden-dark); }
.create-garden-cancel { padding: 8px 16px; border: var(--border-medium); border-radius: var(--radius-md); background: var(--color-page); font-size: 13px; cursor: pointer; }

/* Garden type label */
.garden-type-label { font-size: 11px; color: var(--color-stone-dark); padding: 2px 8px; background: var(--color-parchment); border-radius: var(--radius-sm); }

/* Property overlay */
#property-overlay { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 500; }
.property-overlay-content { background: var(--color-page); border-radius: var(--radius-pill); padding: 20px; box-shadow: var(--shadow-lg); min-width: 300px; }
.property-overlay-title { font-size: 17px; font-weight: 400; color: var(--color-garden); margin-bottom: 12px; font-family: var(--font-display); letter-spacing: -0.2px; }
.property-input { width: 100%; padding: 8px 10px; border: var(--border-medium); border-radius: var(--radius-md); font-size: 13px; box-sizing: border-box; margin-bottom: 8px; }
.property-overlay-actions { display: flex; gap: 8px; }
.property-load-btn { padding: 6px 16px; border: none; border-radius: var(--radius-md); background: var(--color-garden); color: var(--color-page); font-size: 12px; font-weight: 600; cursor: pointer; }
.property-load-btn:hover { background: var(--color-garden-dark); }
.property-cancel-btn { padding: 6px 12px; border: var(--border-medium); border-radius: var(--radius-md); background: var(--color-page); font-size: 12px; cursor: pointer; }

/* ---- Timeline ---- */
.timeline-container { max-width: 100%; }
.timeline-header { margin-bottom: 20px; }
.timeline-header h2 { font-size: 24px; color: var(--color-garden); margin: 0; font-weight: 400; font-family: var(--font-display); letter-spacing: -0.3px; }
.timeline-meta { font-size: 12px; color: var(--color-stone); margin-top: 4px; }

.tl-section { margin-bottom: 24px; }
.tl-section-title { font-size: 16px; font-weight: 400; color: var(--color-garden); margin-bottom: 8px; padding: 6px 0; border-bottom: 2px solid var(--color-sage-tint); font-family: var(--font-display); letter-spacing: -0.2px; }

.tl-chart { border: 1px solid var(--color-parchment); border-radius: var(--radius-md); overflow: hidden; background: var(--color-page); }
.tl-row { display: flex; align-items: center; border-bottom: 1px solid var(--color-clay); }
.tl-row:last-child { border-bottom: none; }
.tl-header-row { background: var(--color-paper); font-size: 11px; font-weight: 600; color: var(--color-stone); }
.tl-header-row .tl-month-header { text-align: center; }

.tl-plant-name { width: 180px; min-width: 180px; padding: 6px 10px; font-size: 12px; display: flex; align-items: center; gap: 4px; border-right: 1px solid var(--color-parchment); overflow: hidden; font-family: var(--font-body); cursor: pointer; }
.tl-name-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-body); }
.tl-month-header { flex: 1; padding: 6px 2px; min-width: 0; }
.tl-cell { flex: 1; padding: 4px 1px; min-width: 0; height: 28px; display: flex; align-items: center; justify-content: center; }
.tl-current { background: rgba(45, 95, 45, 0.06); }
.tl-bar { height: 16px; width: 90%; border-radius: var(--radius-sm); opacity: 0.85; cursor: default; }
.tl-bar:hover { opacity: 1; transform: scaleY(1.2); }

/* Section-specific border accents */
.tl-bloom .tl-section-title { border-bottom-color: var(--color-rose); }
.tl-harvest .tl-section-title { border-bottom-color: var(--color-ochre); }
.tl-foliage .tl-section-title { border-bottom-color: var(--color-moss); }
.tl-pruning .tl-section-title { border-bottom-color: var(--color-mauve); }
.property-feedback { font-size: 11px; margin-top: 6px; min-height: 16px; }
.property-feedback--error   { color: var(--color-danger); }
.property-feedback--loading { color: var(--color-stone-light); }

/* Library search */
.lib-search-box { padding: 8px 12px; border-bottom: 1px solid var(--color-parchment); }
.lib-search-input { width: 100%; padding: 8px 10px; border: var(--border-medium); border-radius: var(--radius-md); font-size: 13px; box-sizing: border-box; }
.lib-categories { padding: 6px 12px; display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--color-parchment); }
.lib-cat-pill { padding: 3px 8px; border: 1px solid var(--color-sand); border-radius: var(--radius-lg); background: var(--color-page); font-size: 10px; cursor: pointer; color: var(--color-stone-dark); }
.lib-cat-pill:hover { background: var(--color-parchment); }
.lib-cat-pill.active { background: var(--color-parchment); border-color: var(--color-sage); color: var(--color-garden); font-weight: 600; }
.lib-results { overflow-y: auto; max-height: calc(100vh - 350px); }
.lib-result-item { display: flex; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--color-clay); gap: 8px; }
.lib-result-item:hover { background: var(--color-paper); }
.lib-result-info { display: flex; align-items: center; gap: 6px; flex: 1; cursor: pointer; overflow: hidden; }
.lib-result-text { flex: 1; min-width: 0; }
.lib-result-name { font-size: 13px; font-weight: 400; color: var(--color-charcoal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-body); }
.lib-result-botanical { font-size: 10px; color: var(--color-stone); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-result-meta { font-size: 10px; color: var(--color-stone-light); flex-shrink: 0; }
.lib-add-btn { padding: 3px 10px; border: 1px solid var(--color-mauve); border-radius: var(--radius-sm); background: var(--color-page); color: var(--color-mauve); font-size: 10px; font-weight: 600; cursor: pointer; flex-shrink: 0; }
.lib-add-btn:hover { background: var(--color-mauve-bg); }
.lib-add-btn.in-shed { background: var(--color-mauve-bg); color: var(--color-mauve-dark); border-color: var(--color-mauve-dark); }
.lib-load-more { padding: 12px; text-align: center; }
.lib-load-more button { padding: 6px 16px; border: var(--border-medium); border-radius: var(--radius-sm); background: var(--color-page); font-size: 12px; cursor: pointer; }
.lib-load-more button:hover { background: var(--color-parchment); }

/* Library result actions */
.lib-result-actions { display: flex; gap: 4px; flex-shrink: 0; }
.lib-place-btn { padding: 3px 10px; border: 1px solid var(--color-garden); border-radius: var(--radius-sm); background: var(--color-garden); color: var(--color-page); font-size: 10px; font-weight: 600; cursor: pointer; }
.lib-place-btn:hover { background: var(--color-garden-dark); }

/* ---- Top Navigation Bar ---- */
.nav-brand-icon { height: 32px; cursor: pointer; filter: invert(1); opacity: 0.85; transition: opacity 0.2s; }
.nav-brand-icon:hover { opacity: 1; }
.nav-brand-wordmark { height: 22px; cursor: pointer; filter: invert(1); opacity: 0.7; transition: opacity 0.2s; padding: 0 18px; }
.nav-brand-wordmark:hover { opacity: 0.95; }
#top-bar { display: flex; align-items: center; padding: 0 20px; background: var(--color-charcoal); color: var(--color-paper); height: 56px; flex-shrink: 0; gap: 12px; }
#top-bar-left { display: flex; align-items: center; gap: 8px; }
#top-bar-left .garden-selector-btn { color: var(--color-paper); border-color: var(--nav-glass-border); background: var(--nav-glass-subtle); font-family: var(--font-display); font-weight: 400; }
#top-bar-left .garden-selector-btn:hover { background: var(--nav-glass-hover); }
#top-bar-left .tb { color: var(--color-sand); border-color: var(--nav-glass-hover); background: transparent; font-size: 11px; padding: 3px 10px; }
#top-bar-left .tb:hover { color: var(--color-paper); background: var(--nav-glass-subtle); }
#top-bar-center { flex: 1; display: flex; justify-content: center; align-items: center; gap: 4px; }
.top-bar-right { display: flex; align-items: center; gap: 8px; }
.top-bar-right .zone-display { color: var(--color-rose); border-color: rgba(196,144,138,0.3); background: rgba(196,144,138,0.08); }
.top-bar-right .save-indicator { color: rgba(245,240,232,0.5); }
.top-bar-right .save-indicator.saved { color: var(--color-sage); }
.top-bar-right .save-indicator.saving { color: var(--color-ochre); }
.top-bar-right .garden-type-label { color: rgba(245,240,232,0.5); background: var(--nav-glass-subtle); }

.mode-tab { padding: 10px 22px; border: none; background: transparent; color: rgba(245,240,232,0.5); font-size: 14px; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s; letter-spacing: 0.5px; }
.mode-tab:hover { color: var(--color-paper); }
.mode-tab.active { color: var(--color-paper); border-bottom-color: var(--color-rose); }

/* ---- Mode Content ---- */
.mode-content { display: none; flex: 1; overflow: hidden; }
.mode-content.active { display: flex; animation: fadeIn 0.4s ease; }
#mode-home { overflow: hidden; }
#home-content { width: 100%; height: 100%; }

/* Design mode layout */
#design-layout { display: flex; flex: 1; overflow: hidden; }
#design-main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

/* Manage/Explore full-width layout */
#mode-manage, #mode-explore { flex-direction: column; }

/* Sub-tabs within modes */
.sub-tabs { display: flex; gap: 4px; padding: 8px 20px; background: var(--color-paper); border-bottom: var(--border-medium); flex-shrink: 0; }
.sub-tab { padding: 6px 14px; border: none; background: transparent; font-size: 13px; font-weight: 600; color: var(--color-stone); cursor: pointer; border-bottom: 2px solid transparent; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.sub-tab:hover { color: var(--color-stone-dark); background: var(--color-parchment); }
.sub-tab.active { color: var(--color-garden); border-bottom-color: var(--color-garden); background: var(--color-paper); }
.sub-content { display: none; flex: 1; overflow: auto; }
.sub-content.active, .sub-content[style*="display:block"], .sub-content[style*="display: block"] { display: block; }

/* Care and timeline views need full-width styling in manage mode */
#mode-manage #care-view, #mode-manage #timeline-view { display: block; flex: 1; overflow-y: auto; padding: 24px; background: var(--color-paper); }
#mode-manage #care-view.active, #mode-manage #timeline-view.active { display: block; }

/* Explore — Landing Page */
#explore-landing { padding: 0 0 80px; overflow-y: auto; max-height: calc(100vh - 100px); background: var(--color-page); }
.explore-brand-header { padding: 20px 32px 0; text-align: center; }
.explore-brand-wordmark { height: 28px; opacity: 0.6; }
.explore-search-bar { padding: 16px 32px 0; margin-bottom: 0; }
.explore-search-input { width: 100%; max-width: 520px; padding: 12px 18px; border: 1px solid var(--color-sand); border-radius: var(--radius-pill); font-size: 14px; box-sizing: border-box; background: var(--color-page); letter-spacing: 0.2px; }
.explore-search-input:focus { outline: none; border-color: var(--color-garden); box-shadow: var(--focus-ring); }
.explore-search-input::placeholder { color: var(--color-stone-light); font-style: italic; }

/* Hero seasonal banner */
.explore-section.explore-hero { background: var(--color-paper); margin: 20px 24px 28px; padding: 28px 32px 20px; border-radius: var(--radius-lg); border: var(--border-dashed); }
.explore-hero .explore-section-title { color: var(--color-rose); font-family: var(--font-display); font-size: 26px; font-weight: 400; letter-spacing: -0.3px; margin-bottom: 16px; border: none; }
.explore-hero .explore-scroll-row { gap: 14px; }
.explore-hero .explore-empty-note { color: var(--color-stone-light); font-style: italic; }
.explore-hero .explore-loading { color: var(--color-stone-light); font-style: italic; }

/* Sections */
.explore-section { margin: 0 0 8px; padding: 20px 32px; }
.explore-section-title { font-family: var(--font-display); font-size: 20px; font-weight: 400; color: var(--color-charcoal); margin-bottom: 16px; display: flex; align-items: baseline; gap: 10px; letter-spacing: -0.2px; border-bottom: 1px solid var(--color-parchment); padding-bottom: 10px; }
.explore-section-count { font-family: var(--font-ui); font-size: 12px; font-weight: 500; color: var(--color-stone-light); letter-spacing: 0.5px; text-transform: uppercase; }
.explore-see-all { background: none; border: none; color: var(--color-garden); font-size: 12px; font-weight: 600; cursor: pointer; margin-left: auto; letter-spacing: 0.5px; text-transform: uppercase; font-family: var(--font-ui); }
.explore-see-all:hover { text-decoration: underline; }

/* Scroll row for collections */
.explore-scroll-row { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; scroll-behavior: smooth; }
.explore-scroll-row::-webkit-scrollbar { height: 4px; }
.explore-scroll-row::-webkit-scrollbar-thumb { background: var(--color-sand); border-radius: var(--radius-sm); }
.explore-plant-card { flex-shrink: 0; width: 140px; cursor: pointer; text-align: center; padding: 12px 10px 10px; border-radius: var(--radius-lg); border: 1px solid var(--color-parchment); background: var(--color-page); transition: all 0.2s ease; }
.explore-plant-card:hover { border-color: var(--color-clay); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.explore-plant-card img { width: 100px; height: 100px; object-fit: contain; border-radius: var(--radius-md); display: block; margin: 0 auto 8px; }
.explore-card-name { font-size: 13px; font-weight: 400; color: var(--color-charcoal); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; font-family: var(--font-body); }
.explore-card-meta { font-size: 10px; color: var(--color-stone-light); margin-top: 3px; font-style: italic; }
.explore-empty-note { padding: 16px; color: var(--color-stone-light); font-size: 13px; font-style: italic; }
.explore-loading { padding: 16px; color: var(--color-stone-light); font-size: 13px; font-style: italic; }

/* Category grid */
.explore-category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
/* Explore tab overrides */
#mode-explore .sub-tabs { background: var(--color-page); border-bottom: 1px solid var(--color-parchment); padding: 6px 24px; }
#mode-explore .sub-tab { font-family: var(--font-display); font-size: 14px; font-weight: 400; letter-spacing: 0.2px; color: var(--color-stone-light); border-radius: 0; padding: 8px 20px; }
#mode-explore .sub-tab:hover { color: var(--color-stone-dark); background: transparent; }
#mode-explore .sub-tab.active { color: var(--color-charcoal); border-bottom-color: var(--color-garden); background: transparent; }

.explore-section-subtitle { font-size: 13px; color: var(--color-stone-light); font-style: italic; margin: -8px 0 14px; padding: 0; }
.explore-cat-card { padding: 20px 20px; background: var(--color-page); border: 1px solid var(--color-parchment); border-radius: var(--radius-lg); cursor: pointer; transition: all 0.2s ease; position: relative; overflow: hidden; text-align: center; }
.explore-cat-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; opacity: 0.4; transition: all 0.2s ease; }
.explore-cat-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.07); transform: translateY(-2px); }
.explore-cat-card:hover::before { height: 4px; opacity: 0.8; }
.explore-cat-icon { font-size: 28px; margin-bottom: 6px; }
.explore-cat-label { font-family: var(--font-display); font-size: 15px; font-weight: 400; color: var(--color-charcoal); letter-spacing: -0.2px; }
.explore-cat-count { font-size: 10px; color: var(--color-stone-light); margin-top: 3px; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 500; }
.explore-cat-medicinal { background: var(--color-mauve-bg); }

/* Sidebar in design mode — flatten tab bar to single row */
#mode-design .tab-bar { display: flex; flex-wrap: wrap; border-bottom: var(--border-medium); background: var(--color-paper); }
#mode-design .tab-btn { padding: 6px 8px; font-size: 11px; }

/* ---- Home Page — Almanac ---- */
.home-page { display: flex; position: relative; height: 100%; overflow: hidden; }

/* Canvas — takes space left of panel */
.home-canvas-wrap { position: relative; flex: 1; overflow: scroll; background: var(--color-parchment); }

/* Zoom controls — top left */
.home-canvas-controls { position: absolute; top: var(--space-md); left: var(--space-md); display: flex; gap: var(--space-xs); z-index: 10; }
.hcc-btn { width: 30px; height: 30px; border: none; border-radius: var(--radius-round); background: rgba(250,248,244,0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--color-stone); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.hcc-btn:hover { color: var(--color-charcoal); background: rgba(250,248,244,0.95); }

/* Dashboard panel — almanac page */
.home-panel { width: 420px; min-width: 360px; flex-shrink: 0; background: var(--color-paper); border-left: var(--border-heavy); overflow-y: auto; display: flex; flex-direction: column; padding: var(--space-xl) 28px var(--space-lg); position: relative; }
.home-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--texture-ruled); pointer-events: none; }

/* Header — garden name as hand-lettered title */
.home-panel-header { margin-bottom: 32px; position: relative; padding-bottom: var(--space-md); }
.home-panel-header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 40%; height: 1px; background: var(--ink-flourish); }
.home-brand-mark { display: block; height: 60px; margin: 0 auto 14px; opacity: 0.7; }
.home-title { font-family: var(--font-display); font-size: 30px; color: var(--color-charcoal); margin: 0 0 6px; font-weight: 300; letter-spacing: -0.5px; line-height: 1.15; }
.home-address { font-family: var(--font-body); font-size: 14px; color: var(--color-stone); margin-bottom: 6px; font-style: italic; font-weight: 300; }
.home-meta { font-family: var(--font-body); font-size: 13px; color: var(--color-stone-light); font-weight: 300; letter-spacing: 0.3px; }

/* Sections — journal entries */
.home-panel-section { margin-bottom: var(--space-lg); padding-bottom: 20px; border-bottom: var(--border-dashed); position: relative; }
.home-section-label { font-family: var(--font-display); font-size: 15px; color: var(--color-stone-dark); font-style: italic; margin-bottom: 14px; font-weight: 400; letter-spacing: 0.5px; text-transform: none; }

/* Weather widget */
/* Daily wisdom */
.home-wisdom-section { animation: fadeIn 0.8s ease; }
.wisdom-quote { margin-bottom: 16px; padding: 12px 0; border-bottom: var(--border-dashed); }
.wisdom-quote-text { font-family: var(--font-display); font-size: 15px; font-style: italic; color: var(--color-stone-dark); line-height: 1.7; margin: 0 0 6px; }
.wisdom-quote-author { font-family: var(--font-body); font-size: 12px; color: var(--color-stone-light); }
/* Plant of the Day card */
.potd-card { display: flex; gap: 14px; padding: 14px; background: var(--color-page); border: var(--border-dashed); border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s; margin-bottom: 12px; }
.potd-card:hover { background: var(--color-parchment); }
.potd-image { flex-shrink: 0; width: 64px; height: 64px; border-radius: var(--radius-round); overflow: hidden; border: var(--border-dotted); background: var(--color-paper); }
.potd-image img { width: 100%; height: 100%; object-fit: contain; }
.potd-info { flex: 1; min-width: 0; }
.potd-label { font-family: var(--font-display); font-size: 9px; color: var(--color-stone-light); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 2px; }
.potd-name { font-family: var(--font-display); font-size: 16px; color: var(--color-charcoal); font-weight: 400; line-height: 1.2; }
.potd-botanical { font-family: var(--font-body); font-size: 12px; color: var(--color-stone); font-style: italic; margin-bottom: 6px; }
.potd-fact { font-family: var(--font-body); font-size: 12px; color: var(--color-stone-dark); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wisdom-text { font-family: var(--font-body); font-size: 13px; color: var(--color-stone-dark); line-height: 1.6; margin: 0 0 4px; }
.wisdom-plant { font-family: var(--font-display); font-size: 12px; color: var(--color-garden); font-style: italic; cursor: pointer; }
.wisdom-plant:hover { opacity: 0.7; }
.wisdom-garden-note { padding: 10px 12px; background: var(--color-parchment); border-radius: var(--radius-md); border: var(--border-dashed); }
.wisdom-garden-note .wisdom-text { font-style: italic; color: var(--color-garden); }

#home-weather { margin-bottom: 48px; padding-bottom: 32px; border-bottom: var(--border-dashed); }
.home-weather-section { animation: fadeIn 0.6s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { opacity: 0.15; transform: scale(0.95); } 50% { opacity: 0.4; transform: scale(1.05); } }
.weather-current { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.weather-icon { font-size: 22px; }
.weather-temp { font-family: var(--font-display); font-size: 32px; font-weight: 300; color: var(--color-charcoal); line-height: 1; }
.weather-desc { font-family: var(--font-body); font-size: 13px; color: var(--color-stone); font-style: italic; }
.weather-tip { font-family: var(--font-display); font-size: 12px; color: var(--color-stone-dark); font-style: italic; margin-bottom: 12px; line-height: 1.5; }
.weather-forecast { display: flex; gap: 4px; }
.weather-day { flex: 1; text-align: center; padding: 6px 2px; border-right: var(--border-dotted); }
.weather-day:last-child { border-right: none; }
.weather-day-name { display: block; font-family: var(--font-body); font-size: 11px; color: var(--color-stone); margin-bottom: 2px; }
.weather-day-icon { display: block; font-size: 16px; margin-bottom: 2px; }
.weather-day-temps { display: block; font-family: var(--font-display); font-size: 11px; color: var(--color-stone-dark); font-weight: 300; }

/* Stats */
.home-stats { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 14px; }
.home-stat { cursor: pointer; transition: opacity 0.2s; }
.home-stat:hover { opacity: 0.6; }
.home-stat-num { font-family: var(--font-display); font-size: 38px; color: var(--color-charcoal); display: block; line-height: 1; margin-bottom: 2px; font-weight: 300; }
.home-stat-label { font-family: var(--font-body); font-size: 12px; color: var(--color-stone); font-style: italic; font-weight: 300; }
.home-narrative { font-family: var(--font-display); font-size: 13px; color: var(--color-stone-dark); line-height: 1.9; font-style: italic; }

/* Shed list — plant inventory */
.home-shed-section { display: flex; flex-direction: column; }
.home-section-count { font-family: var(--font-body); font-size: 12px; color: var(--color-stone-light); margin-left: 6px; font-weight: 300; font-style: italic; }
.home-shed-list { max-height: 230px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.home-shed-item { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.15s; border-bottom: var(--border-dotted); }
.home-shed-item:last-child { border-bottom: none; }
.home-shed-item:hover { background: rgba(212,203,188,0.2); }
.home-shed-item img { width: 30px; height: 30px; object-fit: contain; border-radius: var(--radius-round); flex-shrink: 0; border: var(--border-light); }
.home-shed-info { flex: 1; min-width: 0; }
.home-shed-name { font-family: var(--font-body); font-size: 15px; color: var(--color-charcoal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
.home-shed-meta { font-size: 10px; color: var(--color-stone-light); }
.home-shed-planted { color: var(--color-garden); font-style: italic; }
.home-shed-empty { font-family: var(--font-display); font-size: 13px; color: var(--color-stone-light); line-height: 1.7; padding: var(--space-sm) 0; font-style: italic; }

/* Nav links */
.home-panel-nav { margin-top: auto; padding-top: var(--space-md); border-top: var(--border-dashed); display: flex; gap: var(--space-md); }
.home-nav-link { font-family: var(--font-display); font-size: 14px; color: var(--color-stone); cursor: pointer; transition: color 0.15s; font-weight: 400; letter-spacing: 0.5px; }
.home-nav-link:hover { color: var(--color-garden); }

/* Minimap */
#minimap-container { position: fixed; bottom: 16px; right: 16px; z-index: 900; background: var(--color-page); border: var(--border-medium); border-radius: var(--radius-md); box-shadow: 0 2px 12px rgba(40,35,28,0.12); overflow: hidden; cursor: pointer; transition: all 0.2s ease; }
#minimap-container.collapsed { border-radius: var(--radius-pill); box-shadow: 0 1px 6px rgba(60,50,40,0.10); }
#minimap-container.collapsed #minimap-canvas,
#minimap-container.collapsed #minimap-viewport,
#minimap-container.collapsed #minimap-toggle { display: none; }
#minimap-collapsed-bar { display: none; padding: 10px 20px; font-size: 14px; font-weight: 600; color: var(--color-garden); white-space: nowrap; cursor: pointer; user-select: none; }
#minimap-container.collapsed #minimap-collapsed-bar { display: block; }
#minimap-canvas { display: block; border-radius: var(--radius-md) var(--radius-md) 0 0; }
#minimap-viewport { position: absolute; top: 0; left: 0; pointer-events: none; }
#minimap-toggle { position: absolute; top: 2px; right: 4px; background: rgba(250,248,244,0.85); border: none; font-size: 18px; cursor: pointer; color: var(--color-stone-dark); padding: 4px 8px; border-radius: var(--radius-sm); line-height: 1; z-index: 1; }
#minimap-toggle:hover { background: var(--color-sand); color: var(--color-charcoal); }

/* Explore — Split View */
#explore-split, #myplants-split { display: flex; height: calc(100vh - 100px); }
#explore-list, #myplants-list { width: 38%; min-width: 280px; max-width: 380px; border-right: 1px solid var(--color-parchment); overflow-y: auto; background: var(--color-page); display: flex; flex-direction: column; }
#explore-detail, #myplants-detail { flex: 1; overflow-y: auto; padding: 32px 40px; background: var(--color-page); }

/* List header */
.explore-list-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--color-parchment); background: var(--color-page); flex-shrink: 0; }
.explore-back-btn { background: none; border: none; font-size: 13px; cursor: pointer; color: var(--color-garden); font-weight: 600; padding: 4px 8px; border-radius: var(--radius-sm); letter-spacing: 0.3px; text-transform: uppercase; }
.explore-back-btn:hover { background: var(--color-parchment); }
.explore-list-title { font-family: var(--font-display); font-size: 16px; font-weight: 400; color: var(--color-charcoal); flex: 1; }
.explore-list-count { font-size: 10px; color: var(--color-stone-light); flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; }

/* List search/filter */
.explore-list-search { padding: 8px 12px; border-bottom: 1px solid var(--color-parchment); flex-shrink: 0; }
.explore-filter-input { width: 100%; padding: 7px 12px; border: 1px solid var(--color-sand); border-radius: var(--radius-pill); font-size: 12px; box-sizing: border-box; }
.explore-filter-input::placeholder { color: var(--color-clay); font-style: italic; }

/* List items */
.explore-list-items { flex: 1; overflow-y: auto; }
.explore-list-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer; border-bottom: 1px solid var(--color-paper); transition: all 0.15s; }
.explore-list-item:hover { background: var(--color-paper); }
.explore-list-item.active { background: var(--color-sand); font-weight: 600; }
.explore-list-item img { width: 36px; height: 36px; object-fit: contain; border-radius: var(--radius-md); flex-shrink: 0; }
.explore-list-item-text { flex: 1; min-width: 0; }
.explore-list-item-name { font-size: 14px; font-weight: 400; color: var(--color-charcoal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-body); }
.explore-list-item-botanical { font-size: 11px; color: var(--color-stone-light); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.explore-list-item-qty { font-size: 10px; color: var(--color-stone-light); flex-shrink: 0; }
.explore-load-more { padding: 16px; text-align: center; }
.explore-load-more button { padding: 8px 24px; border: 1px solid var(--color-sand); border-radius: var(--radius-pill); background: var(--color-page); color: var(--color-garden); font-size: 12px; cursor: pointer; font-weight: 600; letter-spacing: 0.3px; }
.explore-load-more button:hover { background: var(--color-parchment); border-color: var(--color-garden); }

/* Empty state */
.explore-empty-state { padding: 60px 24px; text-align: center; color: var(--color-stone-light); font-size: 15px; line-height: 2; font-family: var(--font-display); }

/* Explore — Plant Profile (Magazine Article Layout) */
.profile-header { display: flex; gap: 28px; margin-bottom: 28px; align-items: flex-start; }
.profile-image { flex-shrink: 0; }
.profile-image img { width: 200px; height: 200px; object-fit: contain; border-radius: var(--radius-lg); background: var(--color-page); border: 1px solid var(--color-parchment); box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.profile-title { flex: 1; padding-top: 4px; }
.profile-name { font-family: var(--font-display); font-size: 28px; font-weight: 400; color: var(--color-charcoal); margin: 0 0 6px; letter-spacing: -0.5px; line-height: 1.2; }
.profile-botanical { font-size: 15px; font-style: italic; color: var(--color-stone-light); margin-bottom: 2px; }
.profile-family { font-size: 11px; color: var(--color-clay); margin-bottom: 14px; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; }
.profile-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.profile-tag { padding: 4px 12px; border-radius: var(--radius-lg); font-size: 11px; font-weight: 600; letter-spacing: 0.3px; }
.profile-shed-btn { padding: 6px 16px; border: 1px solid var(--color-mauve); border-radius: var(--radius-pill); background: var(--color-page); color: var(--color-mauve); font-size: 11px; font-weight: 600; cursor: pointer; letter-spacing: 0.3px; transition: all 0.15s; }
.profile-shed-btn:hover { background: var(--color-mauve-bg); }
.profile-shed-btn.in-shed { background: var(--color-mauve-bg); color: var(--color-mauve-dark); border-color: var(--color-mauve-dark); }
/* .profile-place-btn removed — shed is the primary action in Explore */

/* Quick stats — horizontal pill bar */
.profile-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; padding: 16px 20px; background: var(--color-page); border: 1px solid var(--color-parchment); border-radius: var(--radius-lg); }
.profile-stat { display: flex; align-items: center; gap: 6px; padding: 6px 14px; background: var(--color-page); border-radius: var(--radius-pill); font-size: 11px; border: 1px solid var(--color-paper); }
.profile-stat-icon { font-size: 14px; }
.profile-stat-label { color: var(--color-stone-light); font-weight: 600; text-transform: uppercase; font-size: 9px; letter-spacing: 0.5px; }
.profile-stat-value { color: var(--color-charcoal); font-weight: 500; }

/* Profile sections — editorial cards */
.profile-section { margin-bottom: 24px; padding: 24px 28px; background: var(--color-page); border: 1px solid var(--color-parchment); border-radius: var(--radius-lg); }
.profile-section-title { font-family: var(--font-display); font-size: 18px; font-weight: 400; color: var(--color-charcoal); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--color-paper); letter-spacing: -0.2px; }
.profile-text { font-size: 14px; line-height: 1.75; color: var(--color-charcoal); margin: 0; }
.profile-text::first-letter { font-size: 2em; font-family: var(--font-display); float: left; line-height: 1; margin-right: 6px; margin-top: 2px; color: var(--color-garden); font-weight: 700; }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px; }
.profile-grid-item { display: flex; gap: 8px; font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--color-page); }
.profile-grid-item:last-child { border-bottom: none; }
.profile-grid-label { color: var(--color-stone-light); font-weight: 600; white-space: nowrap; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; min-width: 90px; }
.profile-grid-value { color: var(--color-charcoal); }

/* Care calendar in profile */
.profile-care-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 12px; }
.profile-care-month { padding: 14px 16px; border: 1px solid var(--color-parchment); border-radius: var(--radius-md); background: var(--color-page); transition: all 0.15s; }
.profile-care-month.current { border-color: var(--color-garden); background: var(--color-parchment); box-shadow: 0 2px 8px rgba(45,95,45,0.08); }
.profile-care-month-name { font-family: var(--font-display); font-size: 13px; font-weight: 400; color: var(--color-garden); margin-bottom: 8px; }
.profile-care-tasks { margin: 0 0 6px 16px; padding: 0; font-size: 12px; line-height: 1.6; color: var(--color-charcoal); }
.profile-care-watering { font-size: 11px; color: var(--color-stone); font-style: italic; }

/* === Manage Component === */

/* Empty state — used across care, medicinal, and timeline views */
.manage-empty-state { color: var(--color-stone-light); padding: var(--space-xl) var(--space-lg); text-align: center; font-family: var(--font-body); font-style: italic; }

/* Collapsed almanac section body (toggled by toggleAlmanacSection) */
.almanac-section-body.collapsed { display: none; }

/* Irrigation zone color swatch — small inline color block beside zone name */
.irr-zone-swatch { display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-sm); margin-right: var(--space-xs); vertical-align: middle; flex-shrink: 0; }

/* Medicinal card — plant quantity/location badge */
.med-plant-qty-badge { font-size: 10px; color: var(--color-mauve); margin-left: auto; white-space: nowrap; }

/* Legend subheaders — secondary h4 labels (Ground Types, Irrigation Zones, Sun Exposure) */
.legend-subheader { margin-top: var(--space-sm); }

/* Legend swatch modifiers */
.legend-swatch-irrigation { opacity: 0.6; }
.legend-swatch-round { border-radius: var(--radius-round); }

/* === Sidebar Component === */

/* Irrigation tab — suggest layout button wrapper */
.sidebar-irr-suggest-wrap { padding: var(--space-sm) 12px; }

/* Irrigation tab — suggest layout button (indigo accent) */
.sidebar-irr-suggest-btn { width: 100%; background: var(--color-indigo-bg); border-color: var(--color-violet); color: var(--color-violet); }

/* Palette section header — My Garden (garden green) */
.pal-header--garden { background: var(--color-sage-tint); color: var(--color-garden); font-weight: 700; cursor: default; }

/* Palette section header — Shed (violet) */
.pal-header--shed { background: var(--color-violet-bg); color: var(--color-violet); cursor: default; }

/* Palette empty state — inline (no plants on canvas, no shed plants) */
.sidebar-empty-state { padding: 12px var(--space-md); color: var(--color-stone-light); font-size: 12px; font-style: italic; }

/* Palette empty state — centered (library results placeholder, shed empty) */
.sidebar-empty-state--centered { padding: 20px; color: var(--color-stone-light); font-size: 12px; text-align: center; }

/* Cat-dot used inline in pal-header (category row label) */
.cat-dot--inline { display: inline-block; vertical-align: middle; margin-right: var(--space-xs); }

/* Palette quantity badge — violet accent (shed plants, custom plants) */
.pal-qty--violet { color: var(--color-violet); }

/* === Explore Component === */

/* "Planted" badge on plant profile page */
.profile-tag--planted { background: rgba(45,95,45,0.13); color: var(--color-garden); border: 1px solid rgba(45,95,45,0.27); }

/* Inline link in the "no garden plants yet" empty state */
.explore-library-link { color: var(--color-garden); font-weight: 600; }

/* No-results state in the library browser */
.explore-no-results { padding: var(--space-md); color: var(--color-stone-light); text-align: center; }

/* === Plant Modal Component === */

/* Wrapper div around the tag row (category + family + location badges) */
.plant-modal-tags-wrap { margin-bottom: 12px; }

/* Family taxonomy tag (neutral gray) */
.pm-tag--family { background: var(--color-paper); color: var(--color-stone); border: 1px solid var(--color-sand); }

/* Location/area tag (violet tint) */
.pm-tag--location { background: var(--color-violet-bg); color: var(--color-violet); border: 1px solid #d0c0e8; }

/* Care-task list inside the modal — tighter top margin than the profile version */
.plant-modal-body .plant-care-tasks { margin: var(--space-sm) 0 var(--space-sm) 20px; }

/* Watering note inside the modal — small bottom gap */
.plant-modal-body .plant-care-watering { margin-bottom: var(--space-xs); }

/* === Home Component === */

/* Weather widget outer container — positions the loader absolutely within it */
.home-weather-panel { position: relative; min-height: 120px; }

/* Loader overlay inside the weather widget */
.home-weather-loader { position: absolute; inset: 0; z-index: 1; }

/* Weather content area — starts hidden, faded in via class toggle */
.home-weather-content { opacity: 0; transition: opacity 0.5s ease; }
.home-weather-content.is-weather-visible { opacity: 1; }

/* Loader fade-out transition */
.home-weather-loader.is-fading-out { transition: opacity 0.8s ease-out; opacity: 0; }

/* Clickable "plant library" link in shed empty state */
.home-shed-link { color: var(--color-garden); cursor: pointer; }

/* ---- User Menu (reuses garden-selector/garden-dropdown) ---- */

.user-menu .garden-dropdown { left: auto; right: 0; min-width: 140px; }
.top-bar-right .garden-selector-btn { color: var(--color-paper); border-color: var(--nav-glass-border); background: var(--nav-glass-subtle); font-family: var(--font-display); font-weight: 400; min-width: auto; }
.top-bar-right .garden-selector-btn:hover { background: var(--nav-glass-hover); }

/* ---- Login Page ---- */

.login-root {
  display: none;
}

.login-root.is-active {
  display: block;
}

.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: var(--color-page);
  background-image: var(--texture-ruled);
  padding: var(--space-lg);
  gap: var(--space-md);
  overflow-x: hidden;
  overflow-y: auto;
}

.login-card {
  width: clamp(160px, 45%, 280px);
  margin-top: auto;
  margin-bottom: var(--space-xl);
  background: var(--color-paper);
  border: var(--border-medium);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-xl);
  position: relative;
  z-index: 1;
}

.login-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.login-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-xs);
}

.login-subtitle {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-stone);
  margin: 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.login-label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-stone-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.login-input {
  font-size: 16px;
  padding: var(--space-sm) var(--space-md);
}

.login-error {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-danger);
  min-height: 20px;
}

.login-submit {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  padding: var(--space-sm) var(--space-lg);
  margin-top: var(--space-sm);
  background: var(--color-rose);
}

.login-submit:hover {
  background: var(--color-rose-dark, var(--color-rose));
}

.login-toggle {
  display: block;
  width: 100%;
  margin-top: var(--space-md);
  padding: var(--space-sm);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-stone);
  background: none;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: color 0.15s ease;
}

.login-toggle:hover {
  color: var(--color-garden);
}

/* ---- Garden Gate ---- */

.gate-wordmark {
  text-align: center;
  position: relative;
  z-index: 2;
  padding: var(--space-lg) var(--space-xl);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--color-rose) 25%, transparent) 0%, color-mix(in srgb, var(--color-rose) 12%, transparent) 45%, transparent 75%);
}

.gate-wordmark-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--color-charcoal);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin: 0;
}

.gate-wordmark-subtitle {
  font-family: var(--font-body);
  font-size: 15px;
  font-style: italic;
  color: var(--color-stone);
  margin: var(--space-xs) 0 0;
}

.gate-flourish {
  width: 120px;
  height: 1px;
  border: none;
  background-image: var(--ink-flourish);
  margin: var(--space-sm) auto 0;
}

.gate-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 800px;
  min-width: 420px;
  min-height: 560px;
  height: calc(100vh - 120px);
  padding: var(--space-xl) 0;
}

.gate-arch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.gate-logo {
  width: 80px;
  height: 120px;
  margin-top: var(--space-sm);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  background-color: var(--color-charcoal);
  -webkit-mask-image: url('/img/brand/lg-icon.png');
  mask-image: url('/img/brand/lg-icon.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.gate-botanical {
  position: absolute;
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}

.gate-botanical-top-left {
  top: 10%;
  left: -8%;
  transform: rotate(-12deg);
}

.gate-botanical-top-right {
  top: 8%;
  right: -8%;
  transform: rotate(8deg);
}

.gate-botanical-mid-left {
  top: 45%;
  left: -12%;
  transform: rotate(-5deg);
}

.gate-botanical-mid-right {
  top: 50%;
  right: -10%;
  transform: rotate(10deg);
}

.gate-quote {
  font-family: var(--font-body);
  font-size: 14px;
  font-style: italic;
  color: var(--color-stone);
  text-align: center;
  max-width: 340px;
  margin-top: var(--space-md);
  position: relative;
  z-index: 1;
  line-height: 1.6;
}

.gate-attribution {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-style: normal;
  color: var(--color-stone-light);
  margin-top: var(--space-xs);
}

/* SVG token classes — all gate SVG elements get color from these */
.gate-stroke-garden { stroke: var(--color-charcoal); fill: none; }
.gate-stroke-garden-dark { stroke: var(--color-garden-dark); fill: none; }
.gate-stroke-sage { stroke: var(--color-sage); fill: none; }
.gate-stroke-moss { stroke: var(--color-moss); fill: none; }
.gate-stroke-rose { stroke: var(--color-rose); fill: none; }
.gate-stroke-ochre { stroke: var(--color-ochre); fill: none; }
.gate-stroke-mauve { stroke: var(--color-mauve); fill: none; }
.gate-fill-garden { fill: var(--color-garden); stroke: none; }
.gate-fill-sage { fill: var(--color-sage); stroke: none; }
.gate-fill-rose { fill: var(--color-rose); stroke: none; }
.gate-fill-ochre { fill: var(--color-ochre); stroke: none; }
.gate-fill-mauve { fill: var(--color-mauve); stroke: none; }

/* ---- Garden Gate — mobile ---- */
@media (max-width: 480px) {
  .login-page {
    padding: var(--space-sm) var(--space-sm) var(--space-lg);
    gap: var(--space-xs);
  }

  .gate-wordmark {
    padding: var(--space-sm) var(--space-md);
  }

  .gate-content {
    min-width: 0;
    min-height: 520px;
    height: auto;
    padding: var(--space-sm) 0;
  }

  .gate-arch {
    width: 100%;
    overflow: hidden;
  }

  .gate-logo {
    width: 48px;
    height: 72px;
  }

  .login-card {
    width: clamp(140px, 65%, 260px);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
  }

  .login-title {
    font-size: 22px;
  }

  .gate-wordmark-title {
    font-size: 18px;
    letter-spacing: 0.2em;
  }

  .gate-quote {
    font-size: 12px;
    max-width: 240px;
    margin-top: var(--space-xs);
  }
}

/* ---- PostIt Component (reusable) ---- */

.post-it {
  position: relative;
  width: 180px;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  box-shadow: var(--shadow-cork-card);
  transform: rotate(var(--post-it-rotation, 0deg));
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-charcoal);
}

.post-it::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, transparent 50%, var(--cork-fold-shadow) 50%);
  border-radius: 0 0 var(--radius-sm) 0;
}

.post-it-pin {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: var(--radius-round);
  background: radial-gradient(circle at 40% 35%, var(--pin-highlight-bright), var(--color-danger) 60%);
  box-shadow: var(--shadow-cork-pin);
}

.post-it-body {
  position: relative;
}

.post-it-rose {
  background-color: var(--color-rose-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23p)' opacity='0.08'/%3E%3C/svg%3E");
}

.post-it-ochre {
  background-color: var(--color-ochre-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23p)' opacity='0.08'/%3E%3C/svg%3E");
}

.post-it-sage {
  background-color: var(--color-sage-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23p)' opacity='0.08'/%3E%3C/svg%3E");
}

.post-it-mauve {
  background-color: var(--color-mauve-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23p)' opacity='0.08'/%3E%3C/svg%3E");
}

/* ---- Cork Board Elements ---- */

.cork-pin {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: var(--radius-round);
  box-shadow: var(--shadow-cork-pin);
  z-index: 1;
}

.cork-pin-red {
  background: radial-gradient(circle at 40% 35%, var(--pin-highlight), var(--color-danger) 60%);
}

.cork-pin-green {
  background: radial-gradient(circle at 40% 35%, var(--pin-highlight), var(--color-garden) 60%);
}

.cork-pin-blue {
  background: radial-gradient(circle at 40% 35%, var(--pin-highlight), var(--color-indigo) 60%);
}

.cork-pin-yellow {
  background: radial-gradient(circle at 40% 35%, var(--pin-highlight), var(--color-ochre) 60%);
}

.cork-index-card {
  position: relative;
  background-color: var(--color-page);
  background-image:
    repeating-linear-gradient(
      transparent, transparent 23px,
      var(--cork-line-color) 23px, var(--cork-line-color) 24px
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23p)' opacity='0.08'/%3E%3C/svg%3E");
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  border-left: 3px solid var(--color-rose);
  box-shadow: var(--shadow-cork-heavy);
  color: var(--color-charcoal);
  transform: rotate(var(--cork-rotation, 0deg));
  text-align: center;
}

.cork-board-pro .cork-index-card {
  border-left-color: var(--color-garden);
}

.cork-card-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-charcoal);
  margin-bottom: var(--space-xs);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--ink-flourish-border);
}

.cork-card-body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-stone-dark, var(--color-charcoal));
}

.cork-photo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--color-page);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23p)' opacity='0.08'/%3E%3C/svg%3E");
  padding: var(--space-sm);
  padding-bottom: var(--space-md);
  box-shadow: var(--shadow-cork-photo);
  transform: rotate(var(--cork-rotation, 0deg));
}

.cork-photo-img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.cork-photo-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: var(--space-xs);
  text-align: center;
}

.cork-photo-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-charcoal);
}

.cork-photo-species {
  font-family: var(--font-body);
  font-size: 12px;
  font-style: italic;
  color: var(--color-stone);
}

.cork-photo-note {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-stone);
  line-height: 1.4;
}

.cork-botanical-photo .cork-photo-img {
  width: 70px;
  height: 70px;
}


.cork-botanical-photo {
  max-width: 110px;
}


.cork-wordmark {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  margin: 0;
}

.cork-subtitle {
  font-family: var(--font-body);
  font-size: 18px;
  font-style: italic;
  color: var(--color-stone);
  margin: var(--space-xs) 0 0;
}

/* ---- Register Page (Cork Board) ---- */

.register-root {
  display: none;
}

.register-root.is-active {
  display: block;
  height: 100vh;
  overflow-y: auto;
}

.register-page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--space-md);
  overflow-y: auto;
  background: var(--color-page);
  background-image: var(--texture-ruled);
}

.cork-board {
  position: relative;
  width: 100%;
  max-width: 1100px;
  max-height: calc(100vh - var(--space-md) * 2);
  display: grid;
  grid-template-columns: 1fr 1fr 280px 1fr 1fr;
  grid-template-rows: auto 1fr 1fr 1fr;
  grid-template-areas:
    "label    label    label    label    label"
    "welcome  slot1    form     slot2    slot3"
    "slot4    free     form     pro      pro"
    "slot5    slot6    form     slot7    lgphoto";
  gap: var(--space-xs);
  padding: var(--space-xs);
  align-items: center;
  justify-items: center;
  border-radius: var(--radius-sm);
  border: 14px solid var(--color-cork-dark);
  box-shadow: var(--shadow-cork-board-inset),
              var(--shadow-cork-board-drop);
  background-color: var(--color-cork);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
}

.cork-board-welcome { grid-area: welcome; }
.cork-slot-1 { grid-area: slot1; }
.cork-board-label { grid-area: label; text-align: center; padding-top: var(--space-lg); }
.cork-slot-2 { grid-area: slot2; }
.cork-slot-3 { grid-area: slot3; }
.cork-slot-4 { grid-area: slot4; }
.cork-board-free { grid-area: free; }
.cork-board-form { grid-area: form; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.cork-board-pro { grid-area: pro; }
.cork-slot-5 { grid-area: slot5; }
.cork-slot-6 { grid-area: slot6; }
.cork-slot-7 { grid-area: slot7; }
.cork-board-lgphoto { grid-area: lgphoto; }


.cork-register-card {
  position: relative;
  background: var(--color-paper);
  border: 2px solid var(--color-rose);
  border-radius: var(--radius-sm);
  padding: var(--space-xl);
  box-shadow: var(--shadow-cork-photo);
  width: 260px;
}

.cork-register-card .login-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.cork-register-card .login-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-xs);
}

.cork-register-card .login-subtitle {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-stone);
  margin: 0;
}

.cork-register-card .login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.cork-register-card .login-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.cork-register-card .login-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-stone-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cork-register-card .login-input {
  font-size: 15px;
  padding: var(--space-sm) var(--space-md);
}

.register-error {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-danger);
  min-height: 20px;
}

.register-submit {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  padding: var(--space-sm) var(--space-lg);
  margin-top: var(--space-sm);
  background: var(--color-rose);
}

.register-submit:hover {
  background: var(--color-rose-dark, var(--color-rose));
}

.register-toggle {
  display: block;
  width: 100%;
  margin-top: var(--space-md);
  padding: var(--space-sm);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-stone);
  text-decoration: none;
  text-align: center;
  transition: color 0.15s ease;
}

.register-toggle:hover {
  color: var(--color-garden);
}

/* STUB: remove before release — under construction states */
.cork-banner-construction {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-3deg);
  z-index: 10;
  background: var(--color-ochre);
  padding: var(--space-xl) var(--space-xl);
  min-width: 60%;
  text-align: center;
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 700;
  color: var(--color-charcoal);
  letter-spacing: 1px;
  box-shadow: var(--shadow-cork-heavy);
  border-radius: var(--radius-sm);
}

.cork-banner-construction .cork-pin {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
}

.cork-register-card.is-disabled {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(0.3);
}
/* end STUB */

/* ---- Register Page — mobile ---- */
@media (max-width: 480px) {
  .register-page {
    padding: var(--space-md) var(--space-sm);
  }

  .cork-board {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-sm);
  }

  .cork-board-form {
    order: -1;
  }

  /* STUB: remove before release — hide cards on mobile while under construction */
  .cork-board-welcome,
  .cork-board-free,
  .cork-board-pro,
  .cork-board-lgphoto,
  .cork-photo {
    display: none;
  }

  /* STUB: remove before release — banner overlay for mobile */
  .cork-banner-construction {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-3deg);
    min-width: 80%;
    font-size: 28px;
    z-index: 10;
  }

  .cork-register-card {
    width: 100%;
    max-width: 300px;
  }

  .cork-board-label {
    padding-top: var(--space-sm);
  }
}

/* ===========================================================
   MOBILE LAYOUT — .mobile state class on <html>
   Driven by BREAKPOINT_MOBILE in js/core/config.js.
   Pattern: state class (like .active, .collapsed) toggled by
   matchMedia listener in app.js. Fires on viewport resize.
   =========================================================== */

/* ---- Top Bar: 3-row stacked nav ----
   Row 1: wordmark (centered)
   Row 2: garden selector (left) + user menu (right)
   Row 3: mode tabs (evenly spaced)

   Technique: display:contents on #top-bar-center dissolves the
   container so wordmark and tabs become direct grid items of
   #top-bar and can be reordered independently.
*/

.mobile #top-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto auto;
  height: auto;
  padding: var(--space-sm) var(--space-md);
  gap: var(--space-xs);
}

.mobile #top-bar-center {
  display: contents;
}

/* Row 1 — wordmark centered */
.mobile .nav-brand-wordmark {
  grid-row: 1;
  grid-column: 1 / -1;
  justify-self: center;
  height: 36px;
  padding: var(--space-xs) 0;
}

/* Row 2 — garden selector left, user menu right */
.mobile #top-bar-left {
  grid-row: 2;
  grid-column: 1 / 4;
}

.mobile .top-bar-right {
  grid-row: 2;
  grid-column: 4;
  justify-self: end;
}

/* Row 3 — mode tabs, one per column */
.mobile .mode-tab {
  grid-row: 3;
  text-align: center;
  padding: var(--space-sm) var(--space-xs);
  font-size: 13px;
}

/* ---- Home: almanac panel only, no canvas ---- */
.mobile .home-canvas-wrap {
  display: none;
}

.mobile .home-panel {
  width: 100%;
  min-width: 0;
  border-left: none;
}

.mobile .home-panel-nav {
  display: none;
}

/* ---- Design: read-only canvas, no tools ---- */
.mobile #sidebar {
  display: none;
}

.mobile #toolbar {
  display: none;
}

.mobile #canvas-container {
  width: 100%;
  height: 100%;
}

.mobile #garden-canvas {
  touch-action: pan-x pan-y;
}

.mobile #legend {
  display: none;
}

/* Hidden on mobile */
.mobile #top-bar-left .nav-brand-icon,
.mobile #top-bar-left .nav-new-btn,
.mobile #top-bar-left #lang-toggle,
.mobile .top-bar-right .zone-display,
.mobile .top-bar-right .garden-type-label,
.mobile .top-bar-right .save-indicator {
  display: none;
}

/* ---- Manage: Almanac mobile layout ---- */
.mobile .almanac-header {
  flex-direction: column;
  align-items: center;
  padding: var(--space-sm);
}

.mobile .almanac-title-block {
  text-align: center;
}

.mobile .almanac-header .month-nav {
  margin-top: var(--space-xs);
}

.mobile .almanac-section,
.mobile .almanac-narrative,
.mobile .progress-section,
.mobile .bloom-banner {
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
}

.mobile .status-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.mobile .almanac-task {
  flex-wrap: wrap;
}

.mobile .almanac-task .task-plant {
  width: 100%;
  padding-left: var(--space-lg);
  font-size: 11px;
}

.mobile .watering-band {
  flex-direction: column;
  gap: var(--space-xs);
}

.mobile .watering-band-label {
  min-width: 0;
}

.mobile .zone-prompt-banner {
  flex-direction: column;
}

.mobile .zone-prompt-banner .zpb-text {
  min-width: 0;
}

/* ---- Manage: Timeline mobile layout ---- */
.mobile .tl-plant-name {
  width: 100px;
  min-width: 100px;
}

.mobile .tl-plant-name img {
  display: none;
}

.mobile .tl-month-header {
  font-size: 9px;
}

.mobile .tl-chart {
  overflow-x: auto;
}

/* ---- Explore: mobile search ribbon ---- */
.explore-mobile-search {
  display: none;
}

.mobile .explore-mobile-search {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--color-parchment);
}

.mobile #explore-landing .explore-search-bar {
  display: none;
}

/* ---- Explore: split view → stacked layout ---- */
.mobile #explore-split,
.mobile #myplants-split {
  flex-direction: column;
  height: auto;
}

.mobile #explore-list,
.mobile #myplants-list {
  width: 100%;
  min-width: 0;
  max-width: none;
  border-right: none;
  border-bottom: 1px solid var(--color-parchment);
  overflow-y: visible;
  flex-direction: column;
}

.mobile .explore-list-items {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: visible;
  gap: var(--space-xs);
  padding: var(--space-sm);
  flex: none;
}

.mobile .explore-list-item {
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  width: 56px;
  padding: 0;
  border-bottom: none;
  gap: var(--space-xs);
  opacity: 0.6;
}

.mobile .explore-list-item.active {
  opacity: 1;
  background: transparent;
  font-weight: 400;
}

.mobile .explore-list-item img {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-round);
}

.mobile .explore-list-item.active img {
  border: 2px solid var(--color-garden);
  box-shadow: 0 0 0 2px rgba(45, 95, 45, 0.15);
}

.mobile .explore-list-item-name {
  font-size: 9px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 56px;
}

.mobile .explore-list-item.active .explore-list-item-name {
  color: var(--color-garden);
  font-weight: 600;
}

.mobile .explore-list-item-botanical,
.mobile .explore-list-item-qty,
.mobile .explore-list-item .cat-dot {
  display: none;
}

.mobile .explore-list-search {
  display: none;
}

.mobile .explore-load-more {
  flex-shrink: 0;
  padding: 0;
}

.mobile .explore-load-more button {
  white-space: nowrap;
  font-size: 10px;
  padding: var(--space-xs) var(--space-sm);
}

.mobile #explore-detail,
.mobile #myplants-detail {
  padding: var(--space-md) var(--space-sm);
}

/* ---- Explore: profile mobile layout ---- */
.mobile .profile-header {
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.mobile .profile-image img {
  width: 120px;
  height: 120px;
}

.mobile .profile-title {
  text-align: center;
  padding-top: 0;
}

.mobile .profile-tags {
  justify-content: center;
}

.mobile .profile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs);
  padding: var(--space-sm);
  margin-bottom: var(--space-md);
}

.mobile .profile-stat {
  justify-content: center;
}

.mobile .profile-section {
  padding: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.mobile .profile-grid {
  grid-template-columns: 1fr;
}

.mobile .profile-care-grid {
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs);
}

.mobile .profile-care-month {
  padding: var(--space-xs) var(--space-sm);
}

/* ---- Explore: landing page tightening ---- */
.mobile .explore-section {
  padding: var(--space-sm);
}

.mobile .explore-section.explore-hero {
  margin: var(--space-sm);
  padding: var(--space-md) var(--space-sm) var(--space-sm);
}

.mobile .explore-category-grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.mobile .explore-brand-header {
  padding: var(--space-sm) var(--space-sm) 0;
}

.mobile #explore-landing {
  padding-bottom: var(--space-lg);
}