/**
 * Mobile Plot Designer - Refactored CSS
 * Modern, maintainable stylesheet using ITCSS methodology
 * Mobile-first responsive design with component-based organization
 */

/* ==========================================================================
   1. CONFIGURATION & GLOBALS
   ========================================================================== */

:root {
    /* Base sizing variables - mobile first */
    --base-pot-size: 80px;  /* Start with mobile size */
    --min-touch-target: 44px;
    --recommended-touch-target: 48px;

    /* Spacing variables */
    --grid-gap: 0.75rem;
    --overlay-padding: 0.5rem;

    /* Color system */
    --pot-color: #a87444;
    --pot-color-light: #b08a50;
    --pot-color-dark: #96673b;

    /* Pot color variables for pot selector cards */
    --pot-color-terracotta: #c4a77d;
    --pot-color-grey: #a89a8c;
    --pot-color-white: #faf6f1;
    --pot-color-black: #1f2937;
    --pot-color-green: #22c55e;
    --pot-color-blue: #3b82f6;
    --pot-color-brown: #92400e;
    --pot-color-cream: #fef3c7;
    --pot-color-red: #ef4444;
    --pot-color-yellow: #eab308;
    --pot-color-purple: #a855f7;
    --pot-color-navy_blue: #1e3a8a;

    /* Typography */
    --font-size-xs: 0.625rem;   /* 10px */
    --font-size-sm: 0.75rem;    /* 12px */
    --font-size-base: 0.875rem; /* 14px */
    --font-size-lg: 1rem;       /* 16px */

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-base: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    /* Transitions */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-Index Scale */
    --z-index-content: 1;
    --z-index-badge: 5;
    --z-index-focused: 10;
    --z-index-modal: 60;
    --z-index-tooltip: 900;
    --z-index-dragging: 1000;
    --z-index-controls: 1002;
}

/* Performance optimizations - apply to frequently animated elements */
.pot-container,
.plant-token,
.garden-label,
.planted-info-card,
.variety-image-container,
.hover-overlay {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0); /* Force hardware acceleration */
}

/* ==========================================================================
   2. LAYOUT SYSTEMS
   ========================================================================== */

/* Global Viewport and Body Fixes */
.h-screen {
    height: 100vh;
    height: 100dvh !important; /* Dynamic viewport height for mobile browsers */
}

body {
    overflow: hidden; /* Prevent scroll — plot designer is a fixed viewport app */
}

/* Plot Designer Main Layout */
.plot-designer-content {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* NEW: Main content area styling */
.plot-designer-main-content {
    flex: 1;
    position: relative;
    /* Dynamic height will be set by JavaScript - fallback for safety */
    height: calc(100vh - 160px);
    /* Removed min-height to allow dynamic sizing below 500px */
    overflow: hidden;
}

/* UNIVERSAL CANVAS CONTAINER RULE */
.canvas-container {
    width: 100%;
    height: 100%;
    overflow: auto; /* Allow scrolling if canvas is larger than container */
    cursor: grab;
    position: relative;
}

/* Removed CSS rules - looking for inline styles instead */

.canvas-container:active {
    cursor: grabbing;
}

/* Plot Designer Header */
.plot-designer-header {
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
}

.plot-designer-header h1 {
    font-size: 1.1rem !important;
    margin-bottom: 8px !important;
}

/* Mobile Navigation */
.mobile-nav-buttons {
    width: 100% !important;
    justify-content: space-between !important;
    margin-top: 8px !important;
}

.mobile-nav-buttons a {
    flex: 1 !important;
    margin: 0 4px !important;
    text-align: center !important;
    padding: 10px 8px !important;
    font-size: 0.85rem !important;
}

/* Bed Canvas Container - REMOVED: Now using direct canvas-area background */

/* Garden Labels Grid System - Flexible Layout for Dynamic Pot Sizing */
.garden-labels-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 2.5rem 2rem !important; /* Vertical and horizontal gap */
    align-items: flex-end !important; /* Align pots to the bottom for a natural look */
    justify-content: flex-start !important; /* Align pots to the bottom ground level */
    padding: var(--overlay-padding) !important;
    max-width: 100%;
    margin: 0 auto;
    /* Better scrolling performance */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Status badge styles (emoji lifecycle badge) */
.status-badge .badge-bg {
    fill: var(--color-surface-tint);
    stroke: rgba(0, 0, 0, 0.18);
    stroke-width: 1.5px;
    vector-effect: non-scaling-stroke;
}

@media (prefers-contrast: more) {
    .status-badge .badge-bg { stroke: rgba(0,0,0,.45); }
}

/* Tighter spacing for wide shapes (troughs and bowls) to reduce excessive gaps around large containers */
.garden-label.pot-shape-trough,
.garden-label.pot-shape-bowl {
    margin: 0.75rem 0.5rem !important; /* Keep the reduced margin */
    /* REMOVED: min-height and max-height constraints.
       The container's size is now perfectly controlled by the backend's
       --width-scale and --height-scale properties, ensuring it fits the SVG. */
    /* Force height calculation to work */
    height: calc(var(--base-pot-size) * var(--height-scale)) !important;
    /* justify-content rule removed - now handled universally by base .garden-label */
}

.garden-labels-grid:has(.pot-shape-trough) {
    gap: 1.5rem 1rem !important; /* Reduced gap when troughs are present */
}

/* Bed Layout Container */
.bed-layout-container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    box-sizing: border-box;
    overflow: visible !important;
}

.bed-container {
    border-width: 3px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.bed-container[data-layout-id] {
    border: 3px solid var(--color-bed-accent) !important;
    background-color: rgba(120, 53, 15, 0.15) !important;
    min-width: 50px !important;
    min-height: 50px !important;
}

/* Canvas Area and Container */\n.canvas-area {\n    position: relative !important;\n    overflow: visible;\n    -webkit-overflow-scrolling: touch;\n    scroll-behavior: smooth;\n    touch-action: pan-x pan-y;\n    background: transparent !important;\n    min-width: 800px;\n    /* Maintain backend-provided dimensions - allow overflow beyond container for panning */\n    min-height: 600px;\n    /* Remove height: 100% to let backend dimensions take precedence */\n    /* Add smooth transition for zooming */\n    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}

/* Ensure canvas-area children inherit panning touch-action.
   No !important here — .plot-canvas and #plot-designer-shell have their own
   touch-action:none !important which must win for drawing/panning on iOS. */
.canvas-area *, .canvas-area *::before, .canvas-area *::after {
    touch-action: inherit;
}

.canvas-container {
    /* FIXED: Don't force 100% width - let canvas-area control its own size */
    width: fit-content;
    /* Use 100% of parent height instead of fit-content to prevent page scrolling */
    height: 100%;
    overflow: hidden !important; /* Hide overflow - panning will handle scrolling */
    overscroll-behavior: contain; /* Prevent iOS rubber-band bounce during pan */
    transform: none !important;
    position: relative !important;
}

.canvas-inner {
    /* FIXED: Don't force 100% of container - let content determine size */
    width: fit-content;
    height: fit-content;
}

/* Beds mode styling - REMOVED background so canvas-area becomes true background */
.canvas-container.mode-beds {
    /* No background - let canvas-area be the background itself */
    background: transparent;
}

/* ==========================================================================
   3. LEVEL OF DETAIL (LOD) STYLING
   ========================================================================== */

/* LOD Transitions - Smooth animations between levels */
.timeline-lens-svg,
.ribbon-renderer {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Yearly LOD - Minimal detail for maximum overview */
.lod-yearly .ribbon-yearly {
    transition: height 0.3s ease, opacity 0.3s ease;
    cursor: default; /* No interaction in yearly view */
}

.lod-yearly .ribbon {
    height: 2px !important;
    rx: 0 !important;
    ry: 0 !important;
    opacity: 0.7 !important;
}

.lod-yearly .event-marker {
    display: none; /* Hide all events in yearly view */
}

.lod-yearly .variety-label {
    display: none; /* Hide labels in yearly view for performance */
}

.lod-yearly .ribbon:hover {
    opacity: 0.8 !important; /* Subtle hover effect */
}

/* Monthly LOD - Medium detail for planning */
.lod-monthly .ribbon-monthly {
    transition: height 0.2s ease, opacity 0.2s ease;
}

.lod-monthly .ribbon {
    height: 8px !important;
    rx: 1px !important;
    ry: 1px !important;
    opacity: 0.85 !important;
}

.lod-monthly .event-marker-monthly {
    transition: r 0.2s ease, opacity 0.2s ease;
}

.lod-monthly .event-marker {
    r: 4px !important;
    stroke-width: 1px !important;
    opacity: 0.8 !important;
}

.lod-monthly .variety-label-monthly {
    font-size: 10px !important;
    opacity: 0.9 !important;
    transition: font-size 0.2s ease, opacity 0.2s ease;
}

.lod-monthly .ribbon:hover {
    opacity: 1.0 !important;
    transform: translateY(-1px);
}

.lod-monthly .event-marker:hover {
    r: 5px !important;
    opacity: 1.0 !important;
}

/* Weekly LOD - Full detail for detailed work */
.lod-weekly .ribbon-weekly {
    transition: height 0.15s ease, opacity 0.15s ease;
}

.lod-weekly .ribbon {
    height: 20px !important;
    rx: 2px !important;
    ry: 2px !important;
    opacity: 1.0 !important;
}

.lod-weekly .event-marker-weekly {
    transition: opacity 0.15s ease, transform 0.15s ease;
    animation: fadeIn 0.3s ease;
}

.lod-weekly .event-marker {
    r: 6px !important;
    stroke-width: 1.5px !important;
    opacity: 1.0 !important;
}

.lod-weekly .variety-label-weekly {
    font-size: 12px !important;
    opacity: 1.0 !important;
    transition: font-size 0.15s ease, opacity 0.15s ease;
}

.lod-weekly .ribbon:hover {
    opacity: 1.0 !important;
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.lod-weekly .event-marker:hover {
    r: 7px !important;
    transform: scale(1.2);
    filter: brightness(1.2);
}

/* Pinch zoom visual feedback */
.is-pinching {
    cursor: zoom-in !important;
    user-select: none;
    -webkit-user-select: none;
}

.is-pinching .timeline-lens-svg {
    transition: none !important; /* Disable transitions during pinch for smooth zooming */
}

/* LOD-specific container styling */
.timeline-content.lod-yearly {
    cursor: grab;
}

.timeline-content.lod-monthly {
    cursor: grab;
}

.timeline-content.lod-weekly {
    cursor: grab;
}

.timeline-content.lod-yearly:active,
.timeline-content.lod-monthly:active,
.timeline-content.lod-weekly:active {
    cursor: grabbing;
}

/* Performance optimizations for yearly view */
.lod-yearly * {
    will-change: transform;
    backface-visibility: hidden;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .timeline-lens-svg,
    .ribbon-renderer,
    .lod-yearly .ribbon-yearly,
    .lod-monthly .ribbon-monthly,
    .lod-weekly .ribbon-weekly,
    .lod-monthly .event-marker-monthly,
    .lod-weekly .event-marker-weekly,
    .lod-monthly .variety-label-monthly,
    .lod-weekly .variety-label-weekly {
        transition: none !important;
        animation: none !important;
    }

    .lod-monthly .ribbon:hover,
    .lod-weekly .ribbon:hover,
    .lod-monthly .event-marker:hover,
    .lod-weekly .event-marker:hover {
        transform: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .lod-yearly .ribbon,
    .lod-monthly .ribbon,
    .lod-weekly .ribbon {
        stroke: #000 !important;
        stroke-width: 1px !important;
    }

    .event-marker {
        stroke: var(--color-content-inverse) !important;
        stroke-width: 2px !important;
    }
}

/* Small screen adjustments for LOD */
@media (max-width: 768px) {
    .lod-monthly .ribbon {
        height: 6px !important; /* Slightly smaller on mobile */
    }

    .lod-weekly .ribbon {
        height: 16px !important; /* Slightly smaller on mobile */
    }

    .lod-monthly .variety-label-monthly {
        font-size: 9px !important;
    }

    .lod-weekly .variety-label-weekly {
        font-size: 11px !important;
    }
}

/* Animation for smooth LOD transitions */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply animations to ribbon elements when LOD changes */
.lod-monthly .ribbon {
    animation: slideUp 0.3s ease-out;
}

.lod-weekly .ribbon {
    animation: fadeIn 0.2s ease-out;
}

/* Intersection Observer viewport-based styling */
.in-viewport {
    z-index: 1; /* Ensure viewport elements are on top */
}

/* Performance optimizations for elements outside viewport */
.ribbon:not(.in-viewport),
.event-marker:not(.in-viewport),
.variety-label:not(.in-viewport) {
    will-change: auto; /* Remove GPU acceleration for off-screen elements */
    transform: translateZ(0); /* Reset GPU acceleration */
}

/* Smooth transitions for elements entering/leaving viewport */
.ribbon {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.event-marker {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.variety-label {
    transition: opacity 0.2s ease;
}

/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */

/* --- Component: Pot Card (Placement Tray) --- */
.pot-card {
    background: var(--color-surface-tint);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 8px;
    position: relative;
}

.pot-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.pot-card .pot-shape-icon {
    width: 28px;
    height: 28px;
    display: block;
}

.pot-card .plant-token {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-sm);
    font-size: 10px;
    line-height: 1;
    padding: 2px 4px;
    margin: 1px;
}

.pot-card .plant-image {
    width: 16px;
    height: 16px;
    border-radius: var(--radius-xs);
    object-fit: cover;
    margin-right: 2px;
}

.pot-card-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-canvas-text);
    color: var(--color-content-inverse);
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 100;
    margin-bottom: 4px;
}

.pot-card-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--color-canvas-text);
}

.pot-card:hover .pot-card-tooltip {
    opacity: 1;
    visibility: visible;
}

/* --- Component: Plant Pot Placement Dock --- */
.plant-pot-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    pointer-events: none;
    display: flex;
    justify-content: center;
    padding: 0 16px 16px;
}

/* Drop target state - visual feedback when dragging plant over dock */
.plant-pot-dock--drop-target {
    pointer-events: auto;
}

.plant-pot-dock--drop-target .plant-pot-dock__sheet {
    outline: 3px dashed var(--color-success);
    outline-offset: -3px;
}

.plant-pot-dock__inner {
    width: min(100%, 1120px);
    pointer-events: auto;
}

.plant-pot-dock__collapsed {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.plant-pot-dock__collapsed-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 9999px;
    border: 1px solid rgba(34, 197, 94, 0.45);
    background: rgba(240, 253, 244, 0.85);
    color: var(--color-success);
    font-size: 0.82rem;
    font-weight: 600;
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.plant-pot-dock__collapsed-button:hover,
.plant-pot-dock__collapsed-button:focus-visible {
    background: rgba(220, 252, 231, 0.95);
    border-color: rgba(22, 163, 74, 0.65);
    transform: translateY(-1px);
}

.plant-pot-dock__sheet {
    background: color-mix(in srgb, var(--color-surface-tint) 96%, transparent);
    border: 1px solid var(--color-surface-border);
    border-radius: 20px;
    box-shadow: 0 26px 60px rgba(15, 23, 42, 0.25);
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.plant-pot-dock__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.plant-pot-dock__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-content-primary);
}

.plant-pot-dock__subtitle {
    margin: 2px 0 0;
    font-size: 0.82rem;
    color: var(--color-content-secondary);
}

.plant-pot-dock__collapse {
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 0.75rem;
    border: 1px solid var(--color-surface-border);
    background: color-mix(in srgb, var(--color-surface-tint) 85%, transparent);
    color: var(--color-content-primary);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.plant-pot-dock__collapse:hover,
.plant-pot-dock__collapse:focus-visible {
    background: var(--color-surface-alt);
    border-color: rgba(71, 85, 105, 0.55);
}

.plant-pot-dock__content {
    display: grid;
    gap: 20px;
}

@media (min-width: 768px) {
    .plant-pot-dock__content {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 1024px) {
    .plant-pot-dock__content {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }
    .plant-pot-dock__content--shed {
        grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    }
}

@media (max-width: 1023px) {
    .plant-pot-dock__sheet {
        padding: 16px;
    }
}

.plant-pot-dock__shed {
    background: color-mix(in srgb, var(--color-surface-tint) 96%, transparent);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-xl);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: min(640px, 80vh);
    min-height: 0;
    overflow: hidden;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-surface-border) 40%, transparent);
}

.plant-pot-dock__shed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.plant-pot-dock__shed-header h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-content-primary);
}

.plant-pot-dock__shed-header button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--color-surface-border);
    background: var(--color-surface-alt);
    color: var(--color-content-primary);
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.plant-pot-dock__shed-header button:hover,
.plant-pot-dock__shed-header button:focus-visible {
    background: var(--color-surface-border);
    border-color: rgba(71, 85, 105, 0.5);
}

.plant-pot-dock__shed-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

.plant-pot-dock__shed-status {
    font-size: 0.75rem;
    color: var(--color-content-secondary);
}

.plant-pot-dock__shed-status--error {
    color: var(--color-danger);
}

.plant-pot-dock__shed-content {
    flex: 1;
    overflow-y: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-surface-border);
    background: color-mix(in srgb, var(--color-surface-tint) 60%, transparent);
    padding: 10px;
}

.plant-pot-dock__shed-placeholder {
    font-size: 0.75rem;
    color: var(--color-content-muted);
}

.plant-pot-tray--dock {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

.plant-pot-tray--dock:hover {
    box-shadow: none;
}

.plant-pot-tray--dock .plant-pot-tray__surface {
    gap: 18px;
}

.plant-pot-tray__actions-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.plant-pot-tray__cta--inline {
    padding: 7px 12px;
    font-size: 0.72rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-surface-border);
    color: var(--color-content-primary);
}

.plant-pot-tray__cta--inline:hover,
.plant-pot-tray__cta--inline:focus-visible {
    background: var(--color-surface-border);
}

.plant-pot-tray__picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plant-pot-tray__picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.plant-pot-tray__picker-body {
    flex: 1;
    min-height: 0;
}

@media (max-width: 767px) {
    /* On mobile, show plant picker as a full-sheet overlay inside the dock */
    .plant-pot-dock.plant-pot-dock--expanded .plant-pot-tray__picker {
        position: absolute;
        inset: 0;
        padding: 16px;
        background: rgba(255, 255, 255, 0.98);
        z-index: 25;
    }

    .plant-pot-dock.plant-pot-dock--expanded .plant-pot-tray__picker-body {
        max-height: none;
        overflow-y: auto;
    }
}

@media (max-width: 767px) {
    .plant-pot-dock {
        padding-left: 8px;
        padding-right: 8px;
    }

    .plant-pot-dock__sheet {
        border-radius: 18px 18px 0 0;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
        padding: 16px;
        position: relative;
    }

    .plant-pot-dock__content {
        grid-template-columns: minmax(0, 1fr);
    }

    .plant-pot-dock__shed {
        max-height: 45vh;
    }

    /* When expanded on mobile, use full-height sheet with internal scroll */
    .plant-pot-dock.plant-pot-dock--expanded {
        top: 0;
        bottom: 0;
    }

    .plant-pot-dock.plant-pot-dock--expanded .plant-pot-dock__inner {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .plant-pot-dock.plant-pot-dock--expanded .plant-pot-dock__sheet {
        flex: 1;
        max-height: 100%;
        overflow-y: auto;
    }

    /* Potting shed: overlay the main content when open */
    .plant-pot-dock.plant-pot-dock--expanded.plant-pot-dock--shed-open .plant-pot-dock__shed {
        position: absolute;
        inset: 0;
        max-height: none;
        border-radius: 18px 18px 0 0;
        background: rgba(255, 255, 255, 0.98);
        z-index: 40;
    }

    .plant-pot-dock.plant-pot-dock--expanded.plant-pot-dock--shed-open .plant-pot-dock__shed-body {
        flex: 1;
        min-height: 0;
        max-height: none;
        overflow: hidden;
    }

    .plant-pot-dock.plant-pot-dock--expanded.plant-pot-dock--shed-open .plant-pot-dock__shed-content {
        max-height: none;
        overflow-y: auto;
    }
}


/* --- Component: Plant Pot Placement Tray --- */
.plant-pot-tray {
    position: relative;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(30, 64, 175, 0.18);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.2);
    padding: 20px 24px 24px;
    padding-bottom: 24px;
    backdrop-filter: blur(14px);
    transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 30;
}

.plant-pot-tray {
    padding-bottom: 24px;
}

@supports not ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
    .plant-pot-tray {
        background: color-mix(in srgb, var(--color-surface-tint) 96%, transparent);
    }
}

.plant-pot-tray--floating {
    transform-origin: bottom center;
}

.plant-pot-tray:hover {
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.25);
}

.plant-pot-tray__surface {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
    grid-template-areas:
        'plant'
        'pot'
        'actions';
}

.plant-pot-tray__card {
    border-radius: 14px;
    border: 1px solid var(--color-surface-border);
    background: color-mix(in srgb, var(--color-surface-tint) 88%, transparent);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 148px;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.25s ease;
}

.plant-pot-tray__card:focus-within {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
    border-color: rgba(59, 130, 246, 0.45);
}

.plant-pot-tray__card--plant {
    grid-area: plant;
}

.plant-pot-tray__card--pot {
    grid-area: pot;
}

.plant-pot-tray__card-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.plant-pot-tray__heading {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-content-primary);
    margin: 0;
}

.plant-pot-tray__subheading {
    font-size: 0.8rem;
    color: var(--color-content-secondary);
    margin: 0;
}

.plant-pot-tray__card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.plant-pot-tray__placeholder {
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: opacity 0.2s ease;
}

.plant-pot-tray__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: opacity 0.2s ease;
}

.plant-pot-tray__summary {
    display: flex;
    align-items: center;
    gap: 12px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.plant-pot-tray__summary--pot {
    align-items: flex-start;
}

.plant-pot-tray__thumbnail {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--color-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 0 1px var(--color-surface-border);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.plant-pot-tray__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.plant-pot-tray__thumbnail--empty {
    border: 1px dashed rgba(100, 116, 139, 0.45);
    background: var(--color-surface-alt);
}

.plant-pot-tray__thumbnail-fallback {
    font-size: 1.5rem;
    color: var(--color-content-primary);
}

.plant-pot-tray__summary-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.plant-pot-tray__name {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-content-primary);
}

.plant-pot-tray__botanical {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-content-muted);
    font-style: italic;
}

.plant-pot-tray__spacing {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-content-secondary);
}

.plant-pot-tray__pot-size,
.plant-pot-tray__location {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-content-secondary);
}

.plant-pot-tray__waiting {
    margin: 0;
    padding: 10px 12px;
    background: var(--color-surface-alt, rgba(59, 130, 246, 0.08));
    border: 1px solid var(--color-surface-border);
    border-radius: 10px;
    font-size: 0.8rem;
    color: var(--color-info);
    transition: opacity 0.2s ease;
}

.plant-pot-tray__content--pot {
    gap: 18px;
}

.plant-pot-tray__occupancy {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.plant-pot-tray__occupancy-heading {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-content-primary);
}

.plant-pot-tray__occupancy-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plant-pot-tray__occupancy-item {
    background: color-mix(in srgb, var(--color-surface-tint) 75%, transparent);
    border-radius: var(--radius-lg);
    padding: 10px 12px;
    box-shadow: inset 0 0 0 1px var(--color-surface-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.plant-pot-tray__occupancy-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.plant-pot-tray__occupancy-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-content-primary);
}

.plant-pot-tray__occupancy-quantity {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-info);
}

.plant-pot-tray__occupancy-warnings {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.plant-pot-tray__occupancy-warning {
    font-size: 0.7rem;
    padding: 4px 6px;
    border-radius: 9999px;
    background: rgba(250, 204, 21, 0.2);
    color: var(--color-warning);
}

.plant-pot-tray__capacity--pot {
    margin-top: 4px;
}

.plant-pot-tray__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.plant-pot-tray__metric {
    background: color-mix(in srgb, var(--color-surface-tint) 65%, transparent);
    border-radius: var(--radius-lg);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: inset 0 0 0 1px var(--color-surface-border);
}

.plant-pot-tray__metric-label {
    margin: 0;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-content-muted);
}

.plant-pot-tray__metric-value {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-content-primary);
}

.plant-pot-tray__quantity {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plant-pot-tray__quantity-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-content-primary);
}

.plant-pot-tray__quantity-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-surface-alt);
    border-radius: 999px;
    padding: 4px;
}

.plant-pot-tray__quantity-button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--color-surface-tint);
    color: var(--color-info);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.plant-pot-tray__quantity-button svg {
    width: 18px;
    height: 18px;
}

.plant-pot-tray__quantity-button:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.plant-pot-tray__quantity-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.plant-pot-tray__quantity-button:focus-visible {
    outline: 2px solid rgba(59, 130, 246, 0.6);
    outline-offset: 2px;
}

.plant-pot-tray__quantity-input {
    width: 72px;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-content-primary);
    padding: 6px 4px;
    border-radius: var(--radius-md);
}

.plant-pot-tray__quantity-input:focus {
    outline: 2px solid rgba(59, 130, 246, 0.45);
    outline-offset: 2px;
    background: var(--color-surface-tint);
}

.plant-pot-tray__quantity-hint {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-success);
}

.plant-pot-tray__capacity {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: var(--radius-lg);
    background: rgba(15, 118, 110, 0.08);
    border: 1px solid rgba(13, 148, 136, 0.25);
    transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.plant-pot-tray__capacity-heading {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-lifecycle-green);
}

.plant-pot-tray__capacity-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin: 0;
}

.plant-pot-tray__capacity-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.plant-pot-tray__capacity-label {
    margin: 0;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-lifecycle-green);
}

.plant-pot-tray__capacity-value {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-content-primary);
}

.plant-pot-tray__warning {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-danger);
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    background: rgba(248, 113, 113, 0.18);
    transition: opacity 0.2s ease;
}

.plant-pot-tray__warning svg {
    width: 18px;
    height: 18px;
}

.plant-pot-tray__card--warning {
    border-color: rgba(248, 113, 113, 0.5);
    box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.25);
}

.plant-pot-tray__skeleton {
    display: flex;
    align-items: center;
    gap: 12px;
}

.plant-pot-tray__skeleton-lines {
    display: grid;
    gap: 6px;
    width: 100%;
}

.plant-pot-tray__skeleton-block {
    display: block;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-surface-alt) 0%, var(--color-surface-border) 50%, var(--color-surface-alt) 100%);
    background-size: 200% 100%;
    animation: plant-pot-tray-shimmer 2s infinite;
}

.plant-pot-tray__skeleton-block--avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
}

.plant-pot-tray__skeleton-block--line {
    height: 12px;
}

.plant-pot-tray__skeleton-block--short {
    width: 60%;
}

.plant-pot-tray__empty-state {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--color-content-primary);
    padding: 12px;
    border-radius: var(--radius-lg);
    background: var(--color-surface-alt);
    transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.plant-pot-tray__empty-title {
    font-weight: 600;
    margin: 0;
}

.plant-pot-tray__empty-copy {
    margin: 0;
    color: var(--color-content-muted);
}

.plant-pot-tray__cta {
    align-self: flex-start;
    border-radius: 999px;
    padding: 6px 14px;
    background: rgba(37, 99, 235, 0.18);
    color: var(--color-info);
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.plant-pot-tray__cta[disabled] {
    cursor: not-allowed;
    opacity: 0.55;
}

.plant-pot-tray__cta:hover,
.plant-pot-tray__cta:focus-visible {
    background: rgba(37, 99, 235, 0.28);
    transform: translateY(-1px);
    color: var(--color-info);
}

.plant-pot-tray__cta:focus-visible {
    outline: 3px solid rgba(59, 130, 246, 0.5);
    outline-offset: 2px;
}

.plant-pot-tray__actions {
    grid-area: actions;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid var(--color-surface-border);
    padding-top: 12px;
    padding-bottom: 4px;
}

.plant-pot-tray__status {
    font-size: 0.8rem;
    color: var(--color-content-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.plant-pot-tray__status--success {
    color: var(--color-success);
}

.plant-pot-tray__status--warning {
    color: var(--color-warning);
}

.plant-pot-tray__status--error {
    color: var(--color-danger);
}

.plant-pot-tray__status--pending {
    color: var(--color-content-primary);
}

.plant-pot-tray__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.plant-pot-tray__button {
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.plant-pot-tray__button:focus-visible {
    outline: 3px solid rgba(59, 130, 246, 0.55);
    outline-offset: 3px;
}

.plant-pot-tray__button--cancel {
    background: rgba(248, 113, 113, 0.14);
    color: var(--color-danger);
    box-shadow: 0 1px 4px rgba(185, 28, 28, 0.12);
}

.plant-pot-tray__button--confirm {
    background: rgba(34, 197, 94, 0.2);
    color: var(--color-success);
    box-shadow: 0 1px 4px rgba(22, 101, 52, 0.16);
}

.plant-pot-tray__button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.plant-pot-tray__button--cancel:not(:disabled):hover,
.plant-pot-tray__button--cancel:not(:disabled):focus-visible {
    background: rgba(248, 113, 113, 0.22);
    color: var(--color-danger);
    box-shadow: 0 4px 12px rgba(248, 113, 113, 0.25);
}

.plant-pot-tray__button--confirm:not(:disabled):hover,
.plant-pot-tray__button--confirm:not(:disabled):focus-visible {
    background: rgba(34, 197, 94, 0.28);
    color: var(--color-success);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.28);
}

@media (prefers-reduced-motion: reduce) {
    .plant-pot-tray,
    .plant-pot-tray__card,
    .plant-pot-tray__placeholder,
    .plant-pot-tray__content,
    .plant-pot-tray__summary,
    .plant-pot-tray__thumbnail,
    .plant-pot-tray__waiting,
    .plant-pot-tray__capacity,
    .plant-pot-tray__warning,
    .plant-pot-tray__empty-state,
    .plant-pot-tray__cta,
    .plant-pot-tray__status,
    .plant-pot-tray__button {
        transition: none !important;
    }

    .plant-pot-tray__skeleton-block {
        animation: none !important;
    }
}

@media (min-width: 768px) {
    .plant-pot-tray__surface {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            'plant pot'
            'actions actions';
    }

    .plant-pot-tray__actions {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* --- Component: Controls Menu Overlay --- */
.controls-menu-overlay {
    z-index: 1150 !important;
}

@media (max-width: 639px) {
    .plant-pot-tray__metrics,
    .plant-pot-tray__capacity-list {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

@keyframes plant-pot-tray-shimmer {
    0% {
        background-position: 200% 0;
    }
    50% {
        background-position: 100% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* --- Component: Garden Label / Pot --- */
.garden-label {
    --base-pot-size: 7.5rem; /* 120px - Base size for a medium pot */
    --width-scale: 1;      /* Default scale factor */
    --height-scale: 1;     /* Default scale factor */

    /* Dynamic sizing based on volume and shape */
    width: calc(var(--base-pot-size) * var(--width-scale));
    height: calc(var(--base-pot-size) * var(--height-scale));

    /* Add constraints to prevent extreme sizes */
    min-width: 5rem;    /* 80px */
    min-height: 5rem;   /* 80px */
    max-width: 40rem;   /* 640px - increased to allow proper trough sizing */
    max-height: 18rem;  /* 288px */

    /* Flexbox properties */
    flex-shrink: 0;

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end; /* THE UNIVERSAL FIX! Aligns all SVGs to bottom */
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base), filter var(--transition-base);
    overflow: hidden;
    transform: translateZ(0);
    touch-action: manipulation;
}

/* Garden Label Interactive States */
.garden-label:hover,
.garden-label:active {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    filter: drop-shadow(0 0 12px rgba(251, 146, 60, 0.4));
}

.garden-label:focus {
    outline: 2px solid var(--color-canvas-selection);
    outline-offset: 1px;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4), 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 10;
}

.garden-label:focus-visible {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4), 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Enhanced hover state */
.garden-label-lifted {
    transform: translateY(-4px) scale(1.03) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    transition: transform var(--transition-base), box-shadow var(--transition-base) !important;
    z-index: 10;
}

/* Ensure the SVG inside the pot scales correctly */
.pot-svg-background, .pot-svg-container, .svg-template-wrapper, .pot-svg-container svg, .svg-template-wrapper svg {
    width: 100%;
    height: 100%;
}

/* --- Component: Pot SVG System --- */
.pot-svg-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === Modern Terracotta SVG Styling System === */

/* Modern Terracotta shape-specific containers with enhanced effects */
.modern-terracotta-tapered,
.modern-terracotta-round,
.modern-terracotta-square,
.modern-terracotta-rectangle,
.modern-terracotta-trough,
.modern-terracotta-default {
    /* Base container for Modern Terracotta aesthetic */
    position: relative;
    width: 100%;
    height: 100%;
    /* Support for CSS custom properties from template */
    --pot-color: var(--pot-color, #a87444);
    --pot-color-light: var(--pot-color-light, #b08a50);
    --pot-color-dark: var(--pot-color-dark, #96673b);
}

/* Enhanced lighting effects for Modern Terracotta shapes */
.modern-terracotta-tapered svg,
.modern-terracotta-round svg,
.modern-terracotta-square svg {
    /* Requirement 5.1: Subtle lighting effects (2-3% lighter rim, 2-3% darker bottom) */
    filter:
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12))
        drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
    transition: filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Requirement 5.2: Fine grain/noise texture support via CSS filters */
.modern-terracotta-tapered svg [filter*="grainTexture"],
.modern-terracotta-round svg [filter*="grainTexture"],
.modern-terracotta-square svg [filter*="grainTexture"] {
    /* Low-opacity texture for natural material simulation */
    opacity: 0.95;
    mix-blend-mode: overlay;
}

/* Requirement 5.3: Soft inner shadow at rim support */
.modern-terracotta-tapered svg [filter*="innerRimShadow"],
.modern-terracotta-round svg [filter*="innerRimShadow"],
.modern-terracotta-square svg [filter*="innerRimShadow"] {
    /* Enhanced shadow rendering for depth */
    filter-quality: high;
}

/* Requirement 5.4: Faint side highlight for curved appearance */
.modern-terracotta-tapered svg linearGradient[id*="sideHighlight"],
.modern-terracotta-round svg linearGradient[id*="sideHighlight"],
.modern-terracotta-square svg linearGradient[id*="sideHighlight"] {
    /* Wide, low-opacity white highlight support */
    stop-opacity: 0.1;
}

/* SVG container for Modern Terracotta effects */
.pot-svg-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Scale to fill the garden-label container */
    width: 100%;
    height: 100%;
    /* Remove max constraints to allow large containers */
    min-width: 70px;
    min-height: 70px;
    --pot-color: var(--pot-color, #a87444);
    --pot-color-light: var(--pot-color-light, #b08a50);
    --pot-color-dark: var(--pot-color-dark, #96673b);
}

.pot-svg-container svg {
    width: 100%;
    height: 100%;
    object-fit: fill;
    /* Enhanced rendering for Modern Terracotta effects */
    shape-rendering: geometricPrecision;
    image-rendering: optimizeQuality;
    /* Subtle drop shadow for grounding effect */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
    transition: filter var(--transition-slow);
    /* Consistent baseline rendering */
    transform-origin: center center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Enhanced SVG rendering on hover for lift effect */
.garden-label:hover .pot-svg-container svg {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.16)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
}

/* Enhanced focus states for SVGs */
.garden-label:focus .pot-svg-container svg {
    outline: none;
    filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.3)) drop-shadow(0 0 0 2px var(--color-canvas-selection));
}

/* Proportional sizing utilities for different pot volumes */
.pot-svg-container.volume-tiny {
    max-width: 80px;
    max-height: 80px;
}

.pot-svg-container.volume-small {
    max-width: 100px;
    max-height: 100px;
}

.pot-svg-container.volume-medium {
    max-width: 120px;
    max-height: 120px;
}

.pot-svg-container.volume-large {
    max-width: 140px;
    max-height: 140px;
}

.pot-svg-container.volume-extra-large {
    max-width: 160px;
    max-height: 160px;
}

/* Responsive scaling for proportional relationships */
.pot-svg-container[data-volume] {
    /* Maintain aspect ratio and proportional scaling */
    aspect-ratio: 1;
    width: calc(var(--base-pot-size) * var(--volume-scale, 1));
    height: calc(var(--base-pot-size) * var(--volume-scale, 1));
    min-width: calc(var(--base-pot-size) * var(--volume-scale, 1));
    min-height: calc(var(--base-pot-size) * var(--volume-scale, 1));
}

/* Volume scale variables for different pot sizes */
.pot-svg-container[data-volume="tiny"] { --volume-scale: 0.8; }
.pot-svg-container[data-volume="small"] { --volume-scale: 1.0; }
.pot-svg-container[data-volume="medium"] { --volume-scale: 1.2; }
.pot-svg-container[data-volume="large"] { --volume-scale: 1.4; }
.pot-svg-container[data-volume="extra-large"] { --volume-scale: 1.6; }

/* Advanced proportional sizing with adaptive scaling */
.pot-svg-container[data-volume-liters] {
    /* Dynamic scaling based on actual liter values */
    --calculated-scale: clamp(0.7, calc(var(--volume-liters, 5) / 10), 2.0);
    min-width: calc(var(--base-pot-size) * var(--calculated-scale));
    min-height: calc(var(--base-pot-size) * var(--calculated-scale));
}

/* Override volume constraints for shapes that need dynamic aspect ratios */
.pot-shape-trough .pot-svg-container[data-volume],
.pot-shape-bowl .pot-svg-container[data-volume],
.pot-shape-trough .pot-svg-container,
.pot-shape-bowl .pot-svg-container,
.pot-shape-trough .pot-svg-container.volume-tiny,
.pot-shape-trough .pot-svg-container.volume-small,
.pot-shape-trough .pot-svg-container.volume-medium,
.pot-shape-trough .pot-svg-container.volume-large,
.pot-shape-trough .pot-svg-container.volume-extra-large,
.pot-shape-bowl .pot-svg-container.volume-tiny,
.pot-shape-bowl .pot-svg-container.volume-small,
.pot-shape-bowl .pot-svg-container.volume-medium,
.pot-shape-bowl .pot-svg-container.volume-large,
.pot-shape-bowl .pot-svg-container.volume-extra-large {
    /* Remove volume-based size constraints for troughs and bowls */
    max-width: none !important;
    max-height: none !important;
    /* Use dynamic width/height from parent .garden-label */
    width: 100% !important;
    height: 100% !important;
    /* Remove fixed aspect ratio to allow proper trough/bowl proportions */
    aspect-ratio: unset !important;
}

/* Ensure SVG elements inside troughs and bowls also scale properly */
.pot-shape-trough .pot-svg-container svg,
.pot-shape-bowl .pot-svg-container svg,
.pot-shape-trough .pot-svg-container.volume-tiny svg,
.pot-shape-trough .pot-svg-container.volume-small svg,
.pot-shape-trough .pot-svg-container.volume-medium svg,
.pot-shape-trough .pot-svg-container.volume-large svg,
.pot-shape-trough .pot-svg-container.volume-extra-large svg,
.pot-shape-bowl .pot-svg-container.volume-tiny svg,
.pot-shape-bowl .pot-svg-container.volume-small svg,
.pot-shape-bowl .pot-svg-container.volume-medium svg,
.pot-shape-bowl .pot-svg-container.volume-large svg,
.pot-shape-bowl .pot-svg-container.volume-extra-large svg {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
}

/* SVG lighting effects support */
.pot-svg-container svg linearGradient,
.pot-svg-container svg radialGradient {
    /* Ensure gradients render smoothly */
    vector-effect: non-scaling-stroke;
}

/* Texture rendering optimization */
.pot-svg-container svg [filter*="grainTexture"] {
    /* Optimize texture rendering for performance */
    will-change: filter;
}

/* Ensure Modern Terracotta gradients render consistently across all pot types */
.pot-svg-container svg linearGradient[id*="modernTerracotta"],
.pot-svg-container svg radialGradient[id*="rimLighting"],
.pot-svg-container svg linearGradient[id*="sideHighlight"] {
    /* Prevent gradient banding and ensure smooth color transitions */
    color-interpolation: sRGB;
    color-interpolation-filters: sRGB;
}

/* Texture pattern consistency across all pot shapes */
.pot-svg-container svg filter[id*="grainTexture"],
.pot-svg-container svg filter[id*="innerRimShadow"] {
    /* Optimize filter rendering across different pot shapes */
    color-interpolation-filters: sRGB;
    primitiveUnits: userSpaceOnUse;
}

/* Consistent shadow grounding for all pot types */
.pot-svg-container svg ellipse[fill="#000"][opacity] {
    /* Base shadow consistency */
    filter: blur(1px);
    transform-origin: center;
}

/* Enhanced Modern Terracotta color scheme support */
.pot-svg-container[data-pot-color] svg {
    /* Support for dynamic color injection while maintaining lighting effects */
    --pot-color: attr(data-pot-color);
    --rim-highlight: color-mix(in srgb, var(--pot-color, #a87444) 97%, white 3%);
    --bottom-shadow: color-mix(in srgb, var(--pot-color, #a87444) 97%, black 3%);
}

/* --- Component: Pot Labels and Slots --- */
.pot-label {
    font-weight: 500;
    letter-spacing: 0.01em;
    dominant-baseline: hanging;
}



/* --- Component: Information Overlay --- */
.information-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* --- Component: Planted Info Overlay (image + stage only) --- */
.planted-info-card {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    /* Remove white background - overlay directly on pot */
    background: none;
    border-radius: 0;
    padding: 4px 6px 6px 6px;
    box-shadow: none;
    border: none;
    /* Compact overlay for image + stage only */
    max-width: 65px;
    min-width: 55px;
    min-height: auto;
    text-align: center;
    transition: box-shadow var(--transition-slow);
    pointer-events: auto;
    box-sizing: border-box;
    touch-action: manipulation;
}

.garden-label:hover .planted-info-card {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* --- Component: Variety Image --- */
.variety-image-container {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 5px auto;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #fdf8f3, #e8ddd3);
    position: relative;
    flex-shrink: 0;
    /* Stronger glow since image is now primary identifier */
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
}

/* Multiple plants container for troughs */
.multiple-plants-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* Horizontal layout for multiple plant images - works on all screen sizes */
.multiple-plants-container .variety-images-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 3px;
    gap: 1px;
    min-height: 28px; /* Ensure space is reserved for images */
}

.multiple-plants-container .variety-image-container {
    display: inline-block;
    margin: 2px; /* Override the auto margins that interfere with flex layout */
}


/* Extra small variant for pots with many plants */
.multiple-plants-container .variety-image-container.extra-small {
    width: 18px !important;
    height: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.9);
}

/* Mini lifecycle badges for individual plants in multi-plant containers */
.mini-lifecycle-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.9);
}

.mini-lifecycle-badge .lifecycle-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: currentColor;
}

/* Mini lifecycle stage colors */
.mini-lifecycle-badge.lifecycle-sprouting { background-color: var(--color-canvas-valid); }
.mini-lifecycle-badge.lifecycle-growing { background-color: var(--color-lifecycle-green); }
.mini-lifecycle-badge.lifecycle-flowering { background-color: #be185d; }
.mini-lifecycle-badge.lifecycle-fruiting { background-color: #f59e0b; }
.mini-lifecycle-badge.lifecycle-harvesting { background-color: #ea580c; }
.mini-lifecycle-badge.lifecycle-mature { background-color: #8b5cf6; }
.mini-lifecycle-badge.lifecycle-dormant { background-color: var(--color-content-muted); }

/* Plant summary for multi-plant containers */
.plant-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 9px;
    font-weight: 600;
    color: var(--color-content-primary);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.8);
    padding: 1px 4px;
    border-radius: var(--radius-sm);
    text-align: center;
}

.plant-count {
    color: var(--color-lifecycle-green);
}

.capacity-remaining {
    color: var(--color-content-muted);
    font-size: 8px;
    margin-top: 1px;
}

/* Capacity remaining indicator for single plants with multi-capacity */
.capacity-remaining-single {
    font-size: 8px;
    font-weight: 500;
    color: var(--color-content-muted);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.8);
    padding: 1px 3px;
    border-radius: 3px;
    text-align: center;
    margin-top: 2px;
}

/* Multiple capacity display for empty pots */
.multiple-capacity-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}


.plus-symbol-small {
    font-size: 1.2rem;
    font-weight: 300;
    min-width: 16px;
    min-height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plus-text-small {
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    font-size: 1rem;
    font-weight: 200;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.garden-label:hover .plus-text-small {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.15);
}

.capacity-overflow {
    font-size: 8px;
    font-weight: 500;
    color: var(--color-content-muted);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.8);
    padding: 1px 4px;
    border-radius: var(--radius-sm);
}

.overflow-text {
    color: var(--color-content-secondary);
}

.capacity-label {
    font-size: 8px;
    font-weight: 500;
    color: var(--color-content-secondary);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.85);
    padding: 1px 4px;
    border-radius: var(--radius-sm);
    text-align: center;
}

/* Single capacity display for single-plant pots */
.single-capacity-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.variety-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transition: transform var(--transition-slow);
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.variety-image-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    font-size: 20px;
    font-weight: 600;
    border-radius: 50%;
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) .variety-image-fallback { background: linear-gradient(135deg, #2a2318, #1e1e1e); }
}
.dark .variety-image-fallback { background: linear-gradient(135deg, #2a2318, #1e1e1e); }

/* --- Component: Variety Name --- */
.variety-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-content-primary);
    line-height: 1.1;
    margin-bottom: 2px;
    text-align: center;
    word-wrap: break-word;
    hyphens: auto;
    /* Strong text shadow + subtle background for readability on pot */
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9), 0 0 6px rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.85);
    padding: 1px 3px;
    border-radius: var(--radius-sm);
    min-height: 22px;
    max-width: 75px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* --- Component: Lifecycle Badge --- */
.lifecycle-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 5px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    text-transform: capitalize;
    letter-spacing: 0.025em;
    min-height: 12px;
    background-color: var(--color-surface-tint);
    color: var(--color-content-primary);
    border: 1px solid var(--color-surface-border);
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

/* Lifecycle stage colors */
.lifecycle-badge.lifecycle-sprouting {
    background-color: rgba(220, 252, 231, 0.95);
    color: var(--color-lifecycle-green);
    border-color: var(--color-success);
}

.lifecycle-badge.lifecycle-growing {
    background-color: rgba(209, 250, 229, 0.95);
    color: var(--color-lifecycle-green);
    border-color: var(--color-lifecycle-green);
}

.lifecycle-badge.lifecycle-flowering {
    background-color: #fce7f3;
    color: var(--color-lifecycle-pink);
    border-color: #fbcfe8;
}

.lifecycle-badge.lifecycle-fruiting {
    background-color: rgba(254, 243, 199, 0.95);
    color: var(--color-lifecycle-amber);
    border-color: var(--color-lifecycle-amber);
}

.lifecycle-badge.lifecycle-harvesting {
    background-color: rgba(255, 237, 213, 0.95);
    color: var(--color-lifecycle-orange);
    border-color: #ea580c;
}

.lifecycle-badge.lifecycle-mature {
    background-color: #f3e8ff;
    color: var(--color-lifecycle-muted);
    border-color: #e9d5ff;
}

.lifecycle-badge.lifecycle-dormant {
    background-color: #f1f5f9;
    color: var(--color-content-secondary);
    border-color: var(--color-surface-border);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) .lifecycle-badge.lifecycle-flowering {
    background-color: #4a0d2a;
    border-color: #ec4899;
  }
  :root:not(.light) .lifecycle-badge.lifecycle-harvesting {
    border-color: #f97316;
  }
  :root:not(.light) .lifecycle-badge.lifecycle-mature {
    background-color: #2e1065;
    border-color: #a78bfa;
  }
  :root:not(.light) .lifecycle-badge.lifecycle-dormant {
    background-color: #1e293b;
  }
  :root:not(.light) .lifecycle-badge.lifecycle-sprouting {
    background-color: #052e16;
  }
  :root:not(.light) .lifecycle-badge.lifecycle-growing {
    background-color: #052e16;
  }
  :root:not(.light) .lifecycle-badge.lifecycle-fruiting {
    background-color: #451a03;
  }
  :root:not(.light) .lifecycle-badge.lifecycle-harvesting {
    background-color: #431407;
  }
}
.dark .lifecycle-badge.lifecycle-flowering {
    background-color: #4a0d2a;
    border-color: #ec4899;
}
.dark .lifecycle-badge.lifecycle-harvesting {
    border-color: #f97316;
}
.dark .lifecycle-badge.lifecycle-mature {
    background-color: #2e1065;
    border-color: #a78bfa;
}
.dark .lifecycle-badge.lifecycle-dormant {
    background-color: #1e293b;
}
.dark .lifecycle-badge.lifecycle-sprouting {
    background-color: #052e16;
}
.dark .lifecycle-badge.lifecycle-growing {
    background-color: #052e16;
}
.dark .lifecycle-badge.lifecycle-fruiting {
    background-color: #451a03;
}
.dark .lifecycle-badge.lifecycle-harvesting {
    background-color: #431407;
}

/* --- Component: Empty Pot Call-to-Action --- */
.empty-pot-cta {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 3;
    pointer-events: auto;
}

.plus-symbol {
    font-size: 2rem;
    font-weight: 300;
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    margin-bottom: 8px;
}

.plus-text {
    color: rgba(255, 255, 255, 0.9);
    /* Strong white text with dark shadow for contrast against pot */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 1px 4px rgba(0, 0, 0, 0.6);
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.5));
    transition: color var(--transition-slow), background var(--transition-slow), transform var(--transition-slow);
    padding: 8px;
    font-size: 2.5rem;
    font-weight: 100;
    /* Subtle semi-transparent background circle */
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.garden-label:hover .plus-text {
    color: rgba(255, 255, 255, 1);
    background: rgba(0, 0, 0, 0.2);
    transform: scale(1.1);
}

.capacity-text {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-content-secondary);
    background: rgba(255, 255, 255, 0.95);
    padding: 2px 6px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 0, 0, 0.15);
    display: inline-block;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    box-shadow: var(--shadow-sm), 0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* Universal pot capacity display for ALL pots */
.universal-pot-capacity {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 2;
    pointer-events: none;
}

.universal-capacity-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-content-secondary);
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 5px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: inline-block;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* --- Component: Stack Badge --- */
.stack-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 4;
}

.stack-badge-circle {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: var(--shadow-base), 0 0 0 1px rgba(0, 0, 0, 0.1);
    transition: background var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    position: relative;
}

.stack-badge-circle:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.stack-badge-circle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--min-touch-target);
    height: var(--min-touch-target);
    border-radius: 50%;
}

.stack-count {
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: 1;
    color: var(--color-content-inverse);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Stacked pot visual effect */
.garden-label[x-data*='is_stacked']:before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: 3px;
    bottom: 3px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-lg);
    z-index: -1;
}

.garden-label[x-data*='is_stacked']:after {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: 6px;
    bottom: 6px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-lg);
    z-index: -2;
}

/* --- Component: Plant Tokens --- */
.plant-token {
    position: absolute;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50%;
    border: 2px solid var(--color-content-inverse);
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: var(--shadow-base), 0 0 0 1px rgba(0, 0, 0, 0.05);
    transition: transform var(--transition-slow), box-shadow var(--transition-slow), opacity var(--transition-slow);
    z-index: 3;
    overflow: hidden;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.plant-token:active {
    transform: scale(0.9);
    transition-duration: 0.1s;
}

.plant-token .variety-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.plant-token .variety-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

/* Ghost tokens for live allocation */
.plant-token.token-ghost {
    opacity: 0.6;
    border: 2px dashed var(--color-canvas-ghost);
    background: linear-gradient(135deg, var(--color-canvas-ghost-fill), var(--color-canvas-ghost-fill)) !important;
    transform: scale(0.95);
    width: 36px !important;
    height: 36px !important;
    cursor: pointer;
    touch-action: manipulation;
    animation: ghost-pulse 2s ease-in-out infinite;
}

.plant-token.token-ghost:active {
    transform: scale(0.85);
    opacity: 0.5;
    transition-duration: 0.1s;
}

/* Ghost token text animation */
.plant-token.token-ghost .token-text {
    animation: ghost-shimmer 1.5s ease-in-out infinite;
}

/* Ghost token quantity indicator animation */
.plant-token.token-ghost .absolute {
    background: var(--color-canvas-ghost) !important;
    border-color: var(--color-canvas-ghost-fill) !important;
    animation: quantity-pulse 1s ease-in-out infinite;
}

/* Overlapping token arrangement */
.plant-token:nth-child(1) { z-index: 3; }
.plant-token:nth-child(2) {
    z-index: 2;
    transform: translateX(8px) translateY(4px);
}
.plant-token:nth-child(3) {
    z-index: 1;
    transform: translateX(-8px) translateY(4px);
}

/* Token overflow indicator (+N badge) */
.token-overflow-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    z-index: 5;
}

/* --- Component: Annual Placement --- */
/* Removed min sizing to allow natural content-based sizing on desktop */
.annual-placement {
    border-width: 4px !important;
    font-size: 1.2rem !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    touch-action: manipulation;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.annual-placement:hover {
    transform: none !important;
    box-shadow: none !important;
}

.annual-placement:active {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.annual-placement:focus-visible {
    outline: 3px solid var(--color-canvas-selection) !important;
    outline-offset: 2px !important;
}

.placement-label {
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7) !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: var(--radius-sm) !important;
    padding: 2px 4px !important;
}

/* --- Component: Contextual Toolbar --- */
.contextual-toolbar {
    /* Show by default (for desktop), will be hidden on mobile via media query */
}

.contextual-toolbar[aria-hidden="false"] { display: block !important; }

/* --- Component: Pot Detail Panel (HTMX) --- */
.pot-detail-container {
    position: fixed;
    top: 80px;
    right: 12px;
    z-index: 50;
    max-width: 320px;
    width: 100%;
}
.pot-detail-container.hidden { display: none; }

.pot-detail-panel {
    background: var(--color-surface-tint);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 24px rgba(0,0,0,.12);
    padding: 16px;
    font-size: 14px;
}
.pot-detail-header h3 {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 600;
}
.pot-detail-size {
    font-size: 12px;
    color: var(--color-content-muted);
}
.pot-detail-plant {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px;
    border-radius: var(--radius-md);
    background: var(--color-surface-alt, #f9fafb);
    border: 1px solid var(--color-surface-border, #e5e7eb);
}
.pot-plant-thumb {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 6px;
}
.pot-plant-name {
    flex: 1;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pot-detail-empty {
    margin-top: 12px;
    text-align: center;
    color: var(--color-content-muted);
}
.pot-detail-empty p { margin: 0 0 8px; }
.pot-detail-actions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-surface-border, #e5e7eb);
}

@media (max-width: 767.98px) {
    .pot-detail-container {
        top: auto;
        bottom: 12px;
        right: 12px;
        left: 12px;
        max-width: none;
    }
}


/* Mobile manipulation tray for existing placements */
.manipulation-tray-mobile-existing {
    /* Visibility handled by Alpine x-show and x-cloak */
}

.manipulation-button {
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.9rem !important;
    touch-action: manipulation;
}

/* --- Component: Plant Selection --- */
/* ==========================================================================
   MOBILE RESPONSIVE STYLES - Comprehensive fixes for sidebars and toolbars
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. DESIGN DOCK - Hide by default, slide in as overlay when opened */
    #design-dock {
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        width: 90vw !important;
        max-width: 320px !important;
        z-index: 1100;
    }

    /* Show design dock when visible (controlled by Alpine.js) */
    #design-dock:not([style*="display: none"]) {
        transform: translateX(0);
    }

    /* Add semi-transparent backdrop for design dock */
    #design-dock::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    #design-dock:not([style*="display: none"])::before {
        opacity: 1;
        pointer-events: auto;
    }

    /* 2. CONTROLS MENU OVERLAY - Convert to bottom drawer */
    .controls-menu-overlay {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 40vh !important;
        max-height: 40vh !important;
        width: 100vw !important;
        max-width: none !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15) !important;
        overflow-y: auto !important;
        z-index: 1150 !important;
    }

    /* 3. CONTEXTUAL TOOLBAR - Position at bottom */
    .contextual-toolbar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100vw !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
        z-index: 1000 !important;
        padding: 0 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(8px) !important;
    }

    /* 6. TIMELINE - More compact on mobile */
    .timeline {
        padding: 8px 8px 4px 8px !important;
    }

    .timeline-date-display {
        font-size: 0.85rem !important;
        padding: 6px 12px !important;
        min-height: 36px !important;
        gap: 8px !important;
    }

    /* 7. CANVAS ADJUSTMENTS - Maximize available space */
    .plot-canvas-wrap {
        padding-bottom: 0 !important;
    }

    /* Ensure canvas doesn't get covered by bottom toolbars */
    .canvas-area {
        padding-bottom: 80px;
    }

    /* 8. Z-INDEX HIERARCHY - Proper layering on mobile */
    .timeline { z-index: 10 !important; }
    .canvas-area { z-index: 1 !important; }
    .contextual-toolbar { z-index: 1000 !important; }
    .plant-pot-dock { z-index: 1100 !important; }
    .controls-menu-overlay { z-index: 1150 !important; }
    #design-dock { z-index: 1100 !important; }
    /* Plant tray must appear above placement dock */
    .plant-tray--mobile { z-index: 1200 !important; }

    /* 8. TOUCH-FRIENDLY ADJUSTMENTS */
    /* Increase touch targets for mobile - scoped to main content, not nav */
    main button, main a, main .clickable {
        min-height: 44px;
        min-width: 44px;
    }

    /* Exception for toggle switches - they have their own touch-friendly sizing */
    main button.toggle-switch,
    main .toggle-switch {
        min-height: auto;
        min-width: auto;
    }

    /* Better spacing for mobile interactions */
    .pd-card__header,
    .pd-section__header {
        padding: 16px 12px !important;
    }

    /* Scrollable sections with better UX */
    .pd-sections {
        max-height: 50vh !important;
        -webkit-overflow-scrolling: touch;
    }
}

.plant-selection-item {
    min-height: 56px !important;
    padding: 12px !important;
    font-size: 0.95rem !important;
    touch-action: manipulation;
}

.plant-selection-item:active {
    background-color: rgba(0, 0, 0, 0.05);
    transform: scale(0.98);
}

/* --- Component: Color Picker --- */
.color-picker-popover {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 40vh;
    overflow-y: auto;
}

.color-option {
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 4px !important;
    border-width: 3px !important;
    touch-action: manipulation;
}

/* --- Component: Quantity Controls --- */
.quantity-controls {
    flex-direction: column !important;
    gap: 12px !important;
}

.quantity-adjust-button {
    min-width: 48px !important;
    min-height: 48px !important;
    font-size: 1.2rem !important;
    touch-action: manipulation;
}

.quantity-stepper-button {
    min-width: 48px !important;
    min-height: 48px !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    font-size: 1.25rem !important;
    font-weight: bold;
    border: 2px solid var(--color-surface-border);
    background: var(--color-surface-tint);
    border-radius: var(--radius-md);
    transition: transform var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
}

.quantity-stepper-button:active {
    transform: scale(0.95);
    background: var(--color-surface-alt);
    border-color: var(--color-content-faint);
}

/* --- Component: Filter and Modal Buttons --- */
.filter-button {
    min-width: 48px !important;
    min-height: 48px !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    padding: 12px 16px !important;
    margin: 4px !important;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: transform var(--transition-base), background-color var(--transition-base);
}

.filter-button:active {
    transform: scale(0.95);
    background-color: rgba(59, 130, 246, 0.1);
}

.modal-close-button {
    min-width: 48px !important;
    min-height: 48px !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    border-radius: 50%;
    transition: transform var(--transition-base), background-color var(--transition-base);
}

.modal-close-button:active {
    transform: scale(0.9);
    background-color: rgba(0, 0, 0, 0.1);
}

.assign-confirm-button {
    min-width: 44px !important;
    min-height: 44px !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    border-radius: var(--radius-md);
    padding: 12px 16px;
    font-weight: 600;
    transition: transform var(--transition-base), filter var(--transition-base);
}

.assign-confirm-button:active {
    transform: scale(0.97);
    filter: brightness(0.95);
}

/* --- Component: Drag and Drop States --- */
.pot-container.dragging {
    opacity: 0.8;
    transform: scale(1.05);
    z-index: var(--z-index-dragging);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.pot-container.drop-target {
    background-color: rgba(59, 130, 246, 0.1);
    border: 2px dashed var(--color-canvas-selection);
    animation: dropTargetPulse 1s ease-in-out infinite;
}

/* --- Component: Stack Drag States (Task 18) --- */
.stacked-pot-item {
    cursor: grab;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.stacked-pot-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stacked-pot-item.stack-dragging {
    opacity: 0.7;
    transform: scale(1.05);
    z-index: var(--z-index-dragging);
    box-shadow: 0 8px 24px rgba(244, 63, 94, 0.3);
    cursor: grabbing;
}

.stacked-pot-item.stack-mousedown {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Canvas unstack drop zone visual feedback */
.canvas-area.unstack-drop-zone-active {
    background-color: rgba(244, 63, 94, 0.05);
    border: 2px dashed var(--color-danger);
    animation: unstackDropPulse 1.2s ease-in-out infinite;
}

.canvas-area.unstack-drop-zone-active::before {
    content: "Drop here to unstack pot";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(244, 63, 94, 0.9);
    color: #4c0519;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* --- Component: Haptic Feedback Simulation --- */
.pot-container.haptic-light:active {
    animation: hapticLight 0.1s ease-out;
}

.pot-container.haptic-medium:active {
    animation: hapticMedium 0.15s ease-out;
}

.pot-container.haptic-heavy:active {
    animation: hapticHeavy 0.2s ease-out;
}

/* --- Component: Allocation Overlay --- */
.allocation-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(59, 130, 246, 0.1);
    border: 2px dashed var(--color-canvas-selection);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    cursor: pointer;
    transition: background var(--transition-base), border-color var(--transition-base);
}

.allocation-overlay:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: var(--color-info);
}

.allocation-indicator {
    font-size: 32px;
    color: var(--color-link);
    font-weight: 300;
}

/* --- Component: Bed Container --- */
/* Baseline bed container styles - removed min sizing to allow natural content-based sizing on desktop */

/* --- Component: Timeline --- */
.timeline-container {
    padding: 15px 10px;
    background: linear-gradient(135deg, var(--color-surface-tint) 0%, var(--color-surface) 100%);
    border-bottom: 2px solid var(--color-surface-border);
    backdrop-filter: blur(8px);
}

.timeline-container input[type="range"] {
    height: 44px !important;
    width: 100% !important;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    touch-action: pan-x;
}

.timeline-container input[type="range"]::-webkit-slider-track {
    height: 8px;
    background: var(--color-surface-border);
    border-radius: var(--radius-sm);
}

.timeline-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
    background: var(--color-canvas-valid);
    border: 4px solid var(--color-content-inverse);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    touch-action: manipulation;
}

.timeline-container input[type="range"]::-moz-range-thumb {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
    background: var(--color-canvas-valid);
    border: 4px solid var(--color-content-inverse);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    border: none;
}

/* Timeline date display - rendered in header */
.timeline-date-display {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 9999px;
    border: 1px solid rgba(16, 185, 129, 0.18);
    box-shadow: var(--timeline-shadow, 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06));
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-content-primary);
    min-height: 40px;
    backdrop-filter: blur(6px);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.timeline-date-display:not(.is-inline-editing):hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(15, 118, 110, 0.18);
}

.timeline-date-display.is-inline-editing {
    gap: 8px;
    transform: none;
}

.timeline-date-display .inline-date {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

.timeline-header-date-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
}

/* Timeline months container */
.timeline-months-container {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0;
}

.timeline-month-marker {
    scroll-snap-align: center;
    min-width: 60px;
    flex-shrink: 0;
}

.timeline-nav-button {
    flex-shrink: 0 !important;
    transition: transform var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
    font-weight: 600 !important;
    color: var(--color-content-secondary) !important;
    box-shadow: var(--shadow-sm) !important;
    min-width: 48px !important;
    min-height: 48px !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.timeline-nav-button:active {
    transform: scale(0.9);
    background: var(--color-surface-alt) !important;
    border-color: var(--color-content-secondary) !important;
}

/* --- Component: Mode Toggle --- */
.mode-toggle-button {
    min-width: 48px !important;
    min-height: 48px !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    border-radius: var(--radius-md);
    transition: transform var(--transition-base), filter var(--transition-base), box-shadow var(--transition-base);
    position: relative;
    overflow: hidden;
}

.mode-toggle-button:active {
    transform: scale(0.95);
    filter: brightness(0.9);
}

.mode-toggle-button.active {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* --- Component: Layout Mode Toggles --- */
.layout-mode-toggle {
    display: none !important; /* Hidden on mobile */
}

.md\:hidden button[class*="border-green-300"],
.md\:hidden button[class*="border-orange-300"] {
    min-width: 54px !important;
    padding: 6px 4px !important;
    font-size: 0.7rem !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

.md\:hidden .flex.space-x-2 {
    flex-wrap: wrap !important;
    gap: 4px !important;
}

/* --- Component: Detailed Pot Tooltip System --- */
.pot-tooltip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-canvas-text);
    color: var(--color-content-inverse);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: var(--z-index-tooltip);
    min-width: 200px;
    max-width: 280px;
    font-size: var(--font-size-sm);
    line-height: 1.4;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);

    /* Hidden by default */
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-slow), transform var(--transition-slow);
    transform: translate(-50%, -50%) scale(0.9);
}

.garden-label:hover .pot-tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}


.tooltip-image {
    margin-bottom: 8px;
    text-align: center;
}

.tooltip-pot-photo {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.tooltip-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tooltip-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--color-content-inverse);
}

.tooltip-detail {
    font-size: 11px;
    color: var(--color-content-inverse);
    line-height: 1.3;
}

.tooltip-plants {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tooltip-plants-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-content-inverse);
    margin-bottom: 4px;
}

.tooltip-plant-item {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

.tooltip-plant-image {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.tooltip-plant-name {
    font-size: var(--font-size-xs);
    color: var(--color-content-inverse);
    line-height: 1.3;
}

/* --- Component: Simple Hover Overlay System --- */
.hover-overlay {
    position: fixed;
    top: auto;
    bottom: 16px;
    left: 16px;
    right: 16px;
    transform: none;
    margin-top: 0;
    background: rgba(31, 41, 55, 0.95);
    color: white;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(8px);
}

.hover-overlay::before {
    display: none; /* Remove arrow on mobile */
}

/* --- Component: Pot Hover Effects --- */
.pot-hovered {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
    z-index: 20;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.pot-hovered .pot-svg-container {
    filter: brightness(1.1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transition: filter 0.2s ease-out;
}

/* Enhanced hover for positioned pots */
[data-pot-id].pot-hovered {
    transform: scale(1.05);
    filter: brightness(1.1) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    z-index: 20;
    transition: transform 0.2s ease-out, filter 0.2s ease-out, z-index 0s;
}

/* Prevent hover effects on dragged items */
.pot-hovered.dragging {
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
}

/* --- SVG Floating Pot: Drop Target Highlight --- */
g[data-kind="floating-pot"].pot-drop-target [data-kind="pot-shape"] {
    filter: drop-shadow(0 0 6px rgba(58, 140, 75, 0.7));
}
g[data-kind="floating-pot"].pot-drop-target [data-kind="hit-area"] {
    stroke: #3A8C4B;
    stroke-width: 2;
    stroke-dasharray: 4,2;
    rx: 4;
    ry: 4;
    vector-effect: non-scaling-stroke;
}

/* ==========================================================================
   4. INLINED STYLES
   ========================================================================== */

body.desktop-plot-designer-mode main .max-w-7xl {
    max-width: none;
}

body.desktop-plot-designer-mode main {
    padding: 0;
    margin: 0;
}
.h-screen {
    height: 100vh;
    height: 100dvh;
}
.cursor-grab {
    cursor: grab !important;
}
.cursor-grabbing {
    cursor: grabbing !important;
}
.cursor-crosshair {
    cursor: crosshair !important;
}
.cursor-move {
    cursor: move !important;
}

.timeline-slider {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    outline: none;
    z-index: 1;
    position: relative;
}

.timeline-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 28px;
    width: 8px;
    border-radius: var(--radius-sm);
    background: var(--color-danger) !important;
    cursor: pointer;
    border: 2px solid var(--color-content-inverse) !important;
    transition: background-color 0.2s ease, transform 0.2s ease;
    position: relative;
    box-shadow: none !important;
    z-index: 2;
}

.timeline-slider::-webkit-slider-thumb:hover {
    height: 32px;
    width: 10px;
    background: #b91c1c !important;
}

.timeline-slider::-moz-range-thumb {
    -moz-appearance: none;
    height: 28px;
    width: 8px;
    border-radius: var(--radius-sm);
    background: var(--color-danger) !important;
    cursor: pointer;
    border: 2px solid var(--color-content-inverse) !important;
    box-shadow: none !important;
    z-index: 2;
}

.timeline-slider::-ms-thumb {
    height: 28px;
    width: 8px;
    border-radius: var(--radius-sm);
    background: var(--color-danger) !important;
    border: 2px solid var(--color-content-inverse) !important;
    box-shadow: none !important;
}

@media (pointer: coarse) {
    .timeline-slider {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
    }

    .timeline-slider::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        appearance: none !important;
        height: 32px !important;
        width: 10px !important;
        border-radius: 5px !important;
        background: var(--color-danger) !important;
        border: 2px solid var(--color-content-inverse) !important;
        box-shadow: none !important;
    }

    .timeline-slider::-webkit-slider-thumb:active {
        background: var(--color-danger) !important;
    }

    [data-marker] .w-3 {
        width: 16px !important;
        height: 16px !important;
    }

    [data-marker] .w-4 {
        width: 20px !important;
        height: 20px !important;
        font-size: 11px !important;
    }

    [data-marker] .tooltip {
        font-size: 14px !important;
        padding: 12px 16px !important;
    }
}

@media screen and (max-width: 768px) {
    .timeline-slider::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        height: 32px !important;
        width: 10px !important;
        background: var(--color-danger) !important;
        border: 2px solid var(--color-content-inverse) !important;
        border-radius: 5px !important;
        box-shadow: none !important;
    }
}

.timeline-slider::-webkit-slider-track {
    height: 10px;
    border-radius: 5px;
    border: 1px solid var(--color-surface-border);
}

.timeline-slider::-moz-range-track {
    height: 10px;
    border-radius: 5px;
    border: 1px solid var(--color-surface-border);
}

.tooltip {
    z-index: 1500 !important;
}

.timeline-month:hover .tooltip {
    pointer-events: auto;
}

/* Enhanced Event Markers */
.event-marker {
    z-index: 50;
    transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
    pointer-events: auto;
    position: relative;
}

.event-marker:hover {
    z-index: 60;
}

/* Event marker pulse animation for recent events */
@keyframes event-pulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.4;
    }
    100% {
        transform: scale(1);
        opacity: 0.7;
    }
}

.event-marker .animate-ping {
    animation: event-pulse 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Enhanced tooltips with better positioning and styling */
.event-marker .group-hover\:opacity-100 {
    transition-delay: 0.3s;
}

/* Smooth scaling animation for event dots */
.event-marker .group-hover\:scale-125 {
    transform-origin: center;
}

/* Better shadow for event markers */
.event-marker .shadow-lg {
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.event-marker:hover .shadow-xl {
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.2));
}

/* Event marker glow effect */
.event-marker > div:first-child {
    position: relative;
}

.event-marker > div:first-child::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: inherit;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: -1;
}

.event-marker:hover > div:first-child::before {
    opacity: 0.3;
}

.canvas-container.drawing-mode {
    cursor: crosshair !important;
}

.rectangle-preview {
    position: absolute;
    border: 2px dashed var(--color-canvas-valid);
    background: rgba(34, 197, 94, 0.1);
    pointer-events: none;
    z-index: 100;
    border-radius: var(--radius-sm);
    animation: drawingPulse 1.5s ease-in-out infinite;
}

@keyframes drawingPulse {
    0%, 100% {
        border-opacity: 1;
        background-color: rgba(34, 197, 94, 0.1);
    }
    50% {
        border-opacity: 0.6;
        background-color: rgba(34, 197, 94, 0.2);
    }
}

.canvas-container[data-drawing-plant]::before {
    content: "Click and drag to draw rectangle for " attr(data-drawing-plant);
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(34, 197, 94, 0.9);
    color: #052e16;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    z-index: 200;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.canvas-container.beds-mode {
    /* Removed green background for cleaner appearance */
}

.canvas-container.beds-mode[data-drawing-plant] {
    cursor: crosshair !important;
}

.canvas-container.pots-mode {
    background: #fff7ed; /* Light orange background for pots */
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) .canvas-container.pots-mode { background: #2a2318; }
}
.dark .canvas-container.pots-mode { background: #2a2318; }

.canvas-container.pots-mode::after {
    content: "🪴 Pot allocation mode - Click on containers to assign plants";
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(234, 88, 12, 0.9);
    color: #431407;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    z-index: 200;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.unified-canvas-wrapper {
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.unified-canvas-wrapper.loading {
    opacity: 0.6;
    pointer-events: none;
}

.unified-canvas-wrapper.loading::after {
    content: "Switching modes...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(59, 130, 246, 0.95);
    color: #1e3a5f;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: pulse 1.5s ease-in-out infinite;
}

.unified-canvas-wrapper.mode-switching {
    transition: transform 0.2s ease-in-out;
}

.canvas-container.mode-beds {
    /* REMOVED: Background removed so canvas-area is the true background */
    background: transparent;
}

.beds-canvas-content {
    width: 100%;
    height: 100%;
}

.pots-canvas-content {
    width: 100%;
    height: 100%;
    overflow: visible;
    position: relative;
}

.pot-item-wrapper {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: grab;
}

.pot-item-wrapper:hover {
    transform: scale(1.02);
    z-index: 10;
}

/* Pot repositioning drag styles */
.pot-item-wrapper.pot-dragging-reposition {
    transform: scale(1.05);
    z-index: 1000;
    transition: none;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    cursor: grabbing;
}

.pot-item-wrapper.pot-dragging-reposition .pot-component {
    opacity: 0.9;
}

.pots-canvas-container {
    min-height: 600px;
    background: transparent;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

.mode-canvas-wrapper {
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mode-canvas-wrapper.loading {
    opacity: 0.6;
    pointer-events: none;
}

.mode-canvas-wrapper.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-surface-alt);
    border-top: 3px solid var(--color-canvas-selection);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1000;
}

/* Layout: timeline then canvas fills the rest of the viewport (header removed) */
/* Ensure the timeline row (in base.html/plot_designer.html structure) isn't fighting layout */
.plot-page-grid {
  /* Subtract the top nav bar (h-16 = 4rem) + safe-area-top (notch/status bar padding on nav) */
  height: calc(100dvh - 4rem - var(--safe-area-top, 0px));
  display: grid;
  /* Rows: Timeline (auto), Canvas (1fr - fills rest) */
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

/* Quick Sketch mode: no timeline row, canvas fills all remaining space */
.plot-page-grid--no-timeline {
  /* Rows: Canvas (1fr - fills rest) */
  grid-template-rows: 1fr;
}

/* View mode: no header, no timeline */
.plot-page-grid--view-mode {
  grid-template-rows: 1fr;  /* Canvas only */
}

/* Let the canvas row shrink; prevent children from forcing extra height */
.plot-page-grid > .plot-canvas-wrap {
  min-height: 0;
  min-width: 0; /* Critical: Prevent width propagation */
  overflow: hidden;                  /* keep overlays inside */
  contain: layout; /* Isolate canvas layout from timeline */
}

.timeline-toggle-handle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background: var(--color-surface-tint);
  color: var(--color-content-primary);
  border: 1px solid var(--color-surface-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
  z-index: 40;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  pointer-events: auto;
}

.timeline-toggle-handle.is-collapsed {
  width: 1.5rem;
  height: 1.5rem;
}

.timeline-toggle-handle.is-expanded {
  width: 1.5rem;
  height: 1.5rem;
}

.timeline-toggle-handle:hover {
  background: var(--color-surface-tint);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

.timeline-toggle-handle:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.35);
  outline-offset: 2px;
}

.timeline-toggle-handle svg {
  pointer-events: none;
}

.timeline-toggle-handle.is-expanded {
  top: 0;
  transform: translate(-50%, -50%);
}

.timeline-toggle-handle.is-collapsed {
  top: 0;
  transform: translate(-50%, -50%);
}

/* Mobile: smaller toggle button */
@media (max-width: 640px) {
  .timeline-toggle-handle.is-collapsed,
  .timeline-toggle-handle.is-expanded {
    width: 1.5rem;  /* 24px - better size on mobile */
    height: 1.5rem;
    min-width: 1.5rem;  /* override global 44px min-width */
    min-height: 1.5rem;  /* override global 44px min-height */
  }
}

/* Canvas interaction styles for drawing and panning modes */
.plot-canvas {
    touch-action: none !important;
}
.plot-canvas g[tabindex]:focus {
    outline: none;
}
.plot-canvas.cursor-draw {
    cursor: crosshair;
}
.plot-canvas.cursor-pan  {
    cursor: grab;
}
.plot-canvas.cursor-panning {
    cursor: grabbing;
}

/* Fill the canvas row */
#plot-designer-shell { height: 100%; }
#plot-designer-shell > svg { width: 100%; height: 100%; display: block; }

/* Smooth zooming for the world group */
\n/* Smooth zooming transition */
#world.zooming {
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: 0 0;
}

/* Drawing mode cursor hint */
.pd-draw-cursor {
    cursor: crosshair !important;
}

.pd-draw-cursor * {
    cursor: crosshair !important;
}

/* Make ghost placements non-interactive when drawing mode is active */
/* This allows clicking through ghosts to place new plants */
.pd-draw-cursor .placement--ghost,
.pd-draw-cursor [data-ghost="1"] {
    pointer-events: none !important;
}

/* Prevent browser panning/zoom gestures from stealing pointer streams */
#plot, #plot svg, #plot-designer-shell, #plot-designer-shell svg {
    touch-action: none;
}

/* Alpine.js x-cloak directive */
[x-cloak] { display: none !important; }

/* Pot Toolbar Styles */
.pd-card {
    background: var(--color-surface-tint);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    min-width: 350px;
    max-width: 400px;
}

/* Desktop zoom controls - vertical layout */
.canvas-navigation-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zoom-controls {
    display: flex;
    flex-direction: column;
    padding: 8px;
    align-items: center;
}

/* Desktop: make dividers horizontal in vertical layout */
.zoom-controls .w-px {
    width: 100% !important;
    height: 1px !important;
}

/* Mobile: make pot toolbar more compact and position at top-right */
@media (max-width: 768px) {
    /* Zoom controls: horizontal, top-right corner */
    .canvas-navigation-controls {
        position: fixed !important;
        top: 12px !important;
        right: 12px !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        z-index: 100 !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 0 !important;
        width: auto !important;
    }
    
    /* Hide everything except zoom controls on mobile */
    .canvas-navigation-controls > *:not(.zoom-controls) {
        display: none !important;
    }
    
    .zoom-controls {
        display: flex !important;
        flex-direction: row !important;
        padding: 4px !important;
        align-items: center !important;
        width: auto !important;
    }
    
    /* Hide grid settings and dividers on mobile for compact view */
    .zoom-controls [x-data*="gridSettingsMenu"]:not(.mobile-settings),
    .zoom-controls > div.border-t:last-child,
    .zoom-controls > .w-px:not(.mobile-settings .w-px) {
        display: none !important;
    }

    /* Show mobile settings button */
    .zoom-controls .mobile-settings {
        display: flex !important;
    }

    .zoom-controls .mobile-settings .w-px {
        display: block !important;
    }
    
    /* Make zoom buttons touch-friendly */
    .zoom-controls button {
        width: 44px !important;
        height: 44px !important;
        flex-shrink: 0 !important;
    }
    
    .zoom-controls svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Make zoom percentage display readable */
    .zoom-controls > div:not([x-data]):not(.w-px) {
        min-width: 50px !important;
        font-size: 12px !important;
        padding: 4px 6px !important;
        flex-shrink: 0 !important;
    }
    
    /* Grid settings menu - center on mobile */
    [role="menu"][id*="grid-menu"] {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: calc(100vw - 32px) !important;
        max-height: calc(100vh - 100px) !important;
        overflow-y: auto !important;
    }
    
    .pd-card {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        max-width: calc(100% - 80px) !important; /* Leave space for chat widget */
        min-width: auto !important;
        margin: 0 auto !important;
        border-radius: 12px 12px 0 0 !important;
        max-height: 30vh;
        height: auto !important;
        overflow-y: auto;
        z-index: 1600 !important; /* Above chat widget */
    }
    
    .pd-card__header {
        padding: 8px 12px 6px 12px !important;
    }
    
    .pd-card__header .flex-1 {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }
    
    .pd-card .pd-thumb {
        width: 32px !important;
        height: 32px !important;
    }
    
    .pd-card .pd-title {
        font-size: 14px !important;
        margin: 0 !important;
    }
    
    .pd-card .pd-subtitle {
        font-size: 11px !important;
        margin: 0 !important;
    }
    
    .pd-card .pd-help {
        font-size: 11px !important;
        margin: 0 !important;
    }
    
    .pd-card .space-y-4 {
        gap: 0.5rem !important;
    }
    
    .pd-card .px-4 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    .pd-card .pb-5 {
        padding-bottom: 6px !important;
    }
    
    .pd-card .py-2 {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    
    .pd-card .p-4 {
        padding: 6px !important;
    }
}

.pd-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 16px 12px 16px;
    border-bottom: 1px solid var(--color-surface-alt);
}

.pd-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-content-primary);
    margin: 0;
    line-height: 1.25;
}

.pd-subtitle {
    font-size: 13px;
    color: var(--color-content-muted);
    margin: 4px 0 0 0;
    line-height: 1.4;
}

.pd-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-surface-border);
    border-radius: 6px;
    background: var(--color-surface-tint);
    color: var(--color-content-muted);
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pd-icon-btn:hover {
    background: var(--color-surface);
    color: var(--color-content-secondary);
}

.pd-row {
    display: flex;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-surface-alt);
}

.pd-stat {
    flex: 1;
    text-align: center;
}

.pd-stat__value {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-content-primary);
    line-height: 1.2;
}

.pd-stat__label {
    font-size: 11px;
    color: var(--color-content-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-top: 2px;
}

.pd-sections {
    max-height: 300px;
    overflow-y: auto;
}

.pd-section {
    border-bottom: 1px solid var(--color-surface-alt);
}

.pd-section:last-child {
    border-bottom: none;
}

.pd-section__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 8px 16px;
}

.pd-section__body {
    padding: 0 16px 12px 16px;
}

.pd-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    text-transform: capitalize;
}

.pd-chip--ok {
    background: var(--color-active-bg);
    color: var(--color-success);
}

.pd-chip--muted {
    background: var(--color-surface-alt);
    color: var(--color-content-muted);
}

.pd-thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: var(--color-surface-alt);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-content-muted);
    flex-shrink: 0;
}

.pd-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    border: 1px solid;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    text-decoration: none;
}

.pd-btn--primary {
    background: var(--color-primary);
    border-color: var(--color-link);
    color: white;
}

.pd-btn--primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-info);
}

.pd-btn--ghost {
    background: var(--color-surface-tint);
    border-color: var(--color-surface-border);
    color: var(--color-content-secondary);
}

.pd-btn--ghost:hover {
    background: var(--color-surface);
    border-color: var(--color-content-faint);
}

.pd-btn--danger {
    background: white;
    border-color: var(--color-danger-border);
    color: var(--color-danger);
}

.pd-btn--danger:hover {
    background: #fef2f2;
    border-color: #f87171;
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) .pd-btn--danger:hover { background: #450a0a; }
}
.dark .pd-btn--danger:hover { background: #450a0a; }

/* Hard hide for the floating manipulation panel when aria-hidden is true */
.manipulation-controls[aria-hidden="true"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Visual cues for pot planting UX improvements */
.pots-plant-pending g[data-kind="pot"] {
  cursor: copy;
}

.pots-plant-pending g[data-kind="pot"] path,
.pots-plant-pending g[data-kind="pot"] rect,
.pots-plant-pending g[data-kind="pot"] ellipse {
  stroke: var(--color-success) !important;
  stroke-width: 0.4 !important;
  stroke-dasharray: 1.2 0.6;
}

/* --- Scenic Backdrops (edit mode) --- */
.pd-ghost-rect { fill: rgba(59,130,246,.08); stroke: rgba(59,130,246,.8); stroke-dasharray: 4 3; }

/* Backdrop handles are now dynamically created like textures - no CSS needed */

/* Backdrops inert unless edit mode is active */
#plot-designer-shell .backdrops-layer { pointer-events: all; }

/* Fade/Hide pots during edit */
#plot-designer-shell .pots-layer { transition: opacity .2s ease; }
#plot-designer-shell.edit-hide-pots .pots-layer,
#plot-designer-shell.edit-hide-pots #pots { opacity: 0; pointer-events: none; }
#plot-designer-shell.edit-fade-pots .pots-layer,
#plot-designer-shell.edit-fade-pots #pots { opacity: .25; pointer-events: none; }

/* Background never intercepts */
#plot-designer-shell svg #background rect { pointer-events: none; }

/* Decor layers (textures & fixtures) are clickable by default */
.textures-layer,
.fixtures-layer { pointer-events: auto; }

/* When a new texture/fixture is armed for placement, let clicks pass through
   existing decor so drawing happens on the canvas/bed instead of toggling
   selection on existing items. */
svg.decor-armed .textures-layer,
svg.decor-armed .fixtures-layer {
  pointer-events: none;
}

/* ==========================================================================
   LAYOUT MODE GATING - Only beds interactive in Layout (Beds) mode
   ========================================================================== */

/* When editing bed layout, decor & placements are inert */
svg.layout-edit-active .textures-layer,
svg.layout-edit-active .fixtures-layer,
svg.layout-edit-active .backdrops-layer,
svg.layout-edit-active #placements {
  pointer-events: none;
}

/* Beds remain interactive during layout editing */
svg.layout-edit-active #beds {
  pointer-events: all;
}

/* Bed overflow badge styling */
g[data-kind="bed"] .overflow-badge {
  fill: var(--color-bed-accent);
  font-size: 12px;
  pointer-events: none;
  opacity: 0.9;
}

g[data-kind="bed"].has-overflow rect {
  /* Optional subtle hint */
  filter: drop-shadow(0 0 2px rgba(180, 83, 9, 0.25));
}

/* Decor selection styling */
g[data-kind="texture"].is-selected :is(rect, ellipse),
g[data-kind="fixture"].is-selected :is(rect, path, ellipse) {
  stroke: var(--color-primary);
  stroke-width: 0.6;
  stroke-dasharray: 3 2;
}

/* Optional: crosshair cursor when armed for draw */
svg.decor-edit-active.cursor-crosshair { cursor: crosshair; }

/* Decor tabs */
.pd-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-surface-border);
  margin-bottom: 8px;
}

.pd-tab {
  padding: 6px 12px;
  font-size: 12px;
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pd-tab:hover {
  background: var(--color-surface-alt);
}

.pd-tab.active {
  border-bottom-color: var(--color-tab-active);
  color: var(--color-tab-active);
  font-weight: 500;
}

.pd-tab-content {
  min-height: 200px;
}

.pd-scene-actions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  justify-content: center;
}

/* Floating Scenes palette (dockable) */
.pd-floating-panel {
  position: absolute;
  top: 72px; /* sit below your top chrome; adjust if your chrome is taller */
  left: 12px;  /* default: dock LEFT */
  width: 320px;
  max-height: 70vh;
  overflow: auto;
  background: var(--color-surface-tint);
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  padding: 10px;
  z-index: 50; /* above other toolbars but below modals if any */
}

.pd-floating-panel.dock-right {
  left: auto; right: 12px;
}

/* Compact header */
.pd-panel-header { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; margin-bottom:8px; }
.pd-panel-actions { display:flex; align-items:center; gap:6px; }
.pd-panel-empty { font-size: 12px; color: var(--color-content-muted); padding: 8px; }

.pd-scenes-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pd-scene-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 8px; border: 1px solid var(--color-surface-border); border-radius: 6px;
  background: var(--color-surface-alt); cursor: pointer;
}
.pd-scene-card img { width: 100%; height: 80px; object-fit: cover; border-radius: var(--radius-sm); }
.pd-scene-title { font-size: 12px; text-align: center; color: var(--color-content-primary); }

/* ==========================================================================
   Permanent Plant Marker Styling
   ========================================================================== */

/* Permanent plant indicator styling */
.occupancy-permanent-indicator {
  animation: fadeIn 0.3s ease-in-out;
}

.occupancy-permanent-indicator circle {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
  transition: filter 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.occupancy-permanent-indicator path {
  transition: transform 0.2s ease-in-out;
}

/* Enhanced visibility on hover for pots containing permanent plants */
.g[data-kind="pot"]:hover .occupancy-permanent-indicator circle {
  filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.3));
  transform: scale(1.1);
}

.g[data-kind="pot"]:hover .occupancy-permanent-indicator path {
  transform: scale(1.05);
}

/* Permanent plant marker border enhancement */
/* Green border for permanent plants with images */
.g[data-layer="plant-markers"] circle[stroke="#10b981"] {
  filter: drop-shadow(0 1px 3px rgba(16, 185, 129, 0.2));
  transition: filter 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* Subtle pulse animation for permanent-only pots */
.occupancy-permanent-indicator[opacity="1"] {
  animation: permanentPulse 3s ease-in-out infinite;
}

@keyframes permanentPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* Enhanced permanent marker fallback styling */
/* When permanent plants don't have images and use colored circles */
.g[data-layer="plant-markers"] circle[fill-opacity="0.95"] {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

/* Text styling for permanent plant markers */
.g[data-layer="plant-markers"] text[font-weight="700"][fill^="#"] {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Tools Toolbar - Photoshop-style tool panel
   ========================================================================== */

/* Base toolbar styles */
.tools-toolbar {
  --toolbar-bg: var(--color-surface-tint);
  --toolbar-border: var(--color-surface-border);
  --toolbar-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --btn-size: 44px;
  --btn-hover-bg: var(--color-surface-alt);
  --btn-active-bg: var(--color-active-bg);
  --btn-active-border: var(--color-canvas-valid);
  --icon-size: 20px;
  --transition-duration: 200ms;
  z-index: 30;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .tools-toolbar,
  .tools-toolbar * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Desktop: Vertical toolbar on left */
.tools-toolbar--desktop {
  display: flex;
  position: absolute;
  top: 20px;
  left: 20px;
  flex-direction: column;
  max-width: 230px;
  background: var(--toolbar-bg);
  border: 1px solid var(--toolbar-border);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 8px;
}

@keyframes toolsToolbarAttention {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(8px); }
  40% { transform: translateX(-6px); }
  60% { transform: translateX(4px); }
  80% { transform: translateX(-2px); }
}

.tools-toolbar--desktop.tools-toolbar--attention {
  animation: toolbarSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards, toolsToolbarAttention 0.6s ease-in-out;
  border-color: var(--color-brand, #164825);
  box-shadow: 0 0 0 3px var(--color-brand-light, #e8f2e5), 0 4px 20px rgba(0, 0, 0, 0.12);
}

.tools-toolbar__fab.tools-toolbar--attention {
  animation: toolsToolbarAttention 0.6s ease-in-out;
  transition: none;
}

.tools-toolbar--desktop .tools-toolbar__inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease,
              margin 0.3s ease;
}

/* Desktop toolbar header */
.tools-toolbar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--color-surface-border);
  min-height: 28px;
}

.tools-toolbar__header-text {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-content-faint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Collapse toggle button */
.tools-toolbar__collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-content-faint);
  transition: color 0.2s ease;
}

.tools-toolbar__collapse-btn:hover {
  color: var(--color-content-muted);
}

.tools-toolbar__collapse-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Arrow points up by default (collapse), rotates to point down when collapsed (expand) */
.tools-toolbar__collapse-icon.is-collapsed {
  transform: rotate(180deg);
}

/* Desktop toolbar buttons - larger with labels */
.tools-toolbar--desktop .tools-toolbar__btn {
  width: auto;
  height: auto;
  padding: 10px 14px;
  gap: 10px;
  border-radius: 10px;
  justify-content: flex-start;
}

.tools-toolbar--desktop .tools-toolbar__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* Desktop toolbar labels */
.tools-toolbar__label {
  display: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-content-secondary);
  white-space: nowrap;
}

.tools-toolbar--desktop .tools-toolbar__label {
  display: block;
  white-space: normal;
  line-height: 1.3;
  text-align: left;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s ease;
}

.tools-toolbar--desktop .tools-toolbar__btn:hover .tools-toolbar__label {
  color: var(--color-content-primary);
}

.tools-toolbar--desktop .tools-toolbar__btn.is-active .tools-toolbar__label {
  color: var(--color-success);
}

/* Desktop collapsed state - hide all tools, keep only Add header */
.tools-toolbar--desktop.is-collapsed .tools-toolbar__header {
  border-bottom: none;
  margin-bottom: 0;
}

.tools-toolbar--desktop.is-collapsed .tools-toolbar__inner {
  height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Desktop toolbar entrance animation */
.tools-toolbar--desktop {
  animation: toolbarSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toolbarSlideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Desktop button stagger animation */
.tools-toolbar--desktop .tools-toolbar__btn {
  animation: buttonFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-fill-mode: both;
}

@keyframes buttonFadeIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Smooth transitions for collapse/expand */
.tools-toolbar--desktop,
.tools-toolbar--desktop .tools-toolbar__btn,
.tools-toolbar--desktop .tools-toolbar__label,
.tools-toolbar--desktop .tools-toolbar__icon {
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile: FAB style bottom right with speed dial */
.tools-toolbar--mobile {
  position: fixed;
  bottom: calc(20px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
  right: 16px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* When expanded, FAB must sit above zoom controls (z-index: 100) */
.tools-toolbar--mobile:has(.is-expanded) {
  z-index: 110;
}

/* Visibility handled by parent wrapper Tailwind classes (hidden md:flex / md:hidden) */

/* Backdrop overlay */
.tools-toolbar__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: -1;
}

/* Speed dial menu */
.tools-toolbar__speeddial {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
  align-items: flex-end;
  max-height: calc(100dvh - 200px);
}

/* Speed dial buttons */
.tools-toolbar__speeddial-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--toolbar-bg);
  border: 1px solid var(--toolbar-border);
  border-radius: 28px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  min-height: 56px;
  /* Staggered animation */
  animation: speedDialItemIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--stagger-delay, 0ms);
  opacity: 0;
  transform: translateY(20px) scale(0.9);
}

@keyframes speedDialItemIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.tools-toolbar__speeddial-btn:hover,
.tools-toolbar__speeddial-btn:active {
  background: var(--color-surface);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.tools-toolbar__speeddial-btn.is-active {
  background: var(--color-active-bg);
  border-color: var(--color-canvas-valid);
}

/* Speed dial icon */
.tools-toolbar__speeddial-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--color-content-secondary, #64748b);
}

/* Speed dial icon colors — accent palette */
.tools-toolbar__speeddial-icon[data-tool="plants"] { color: #15803D; }
.tools-toolbar__speeddial-icon[data-tool="beds"] { color: #B45309; }
.tools-toolbar__speeddial-icon[data-tool="fixtures"] { color: #0E7490; }
.tools-toolbar__speeddial-icon[data-tool="textures"] { color: #D97706; }
.tools-toolbar__speeddial-icon[data-tool="signs"] { color: #0369A1; }
.tools-toolbar__speeddial-icon[data-tool="paths"] { color: #047857; }
.tools-toolbar__speeddial-icon[data-tool="walls"] { color: #B45309; }
.tools-toolbar__speeddial-icon[data-tool="backdrops"] { color: #0E7490; }
.tools-toolbar__speeddial-icon[data-tool="pots"] { color: #BE185D; }
.tools-toolbar__speeddial-icon[data-tool="satellite"] { color: #0369A1; }

/* Speed dial label */
.tools-toolbar__speeddial-label {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-content-secondary);
  max-width: 8rem;
  text-align: left;
}

/* Tool buttons */
.tools-toolbar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-size);
  height: var(--btn-size);
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  transition: background var(--transition-duration) ease, box-shadow var(--transition-duration) ease;
  position: relative;
}

.tools-toolbar__btn:hover {
  background: var(--btn-hover-bg);
}

.tools-toolbar__btn:active {
  opacity: 0.9;
}

.tools-toolbar__btn.is-active {
  background: var(--btn-active-bg);
  box-shadow: inset 0 0 0 2px var(--btn-active-border);
}

.tools-toolbar__btn:focus-visible {
  outline: 2px solid var(--color-canvas-valid);
  outline-offset: 2px;
}

/* Tool icons - inline SVG via Phosphor sprite */
.tools-toolbar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  transition: transform var(--transition-duration) ease, opacity var(--transition-duration) ease;
  opacity: 0.85;
  color: var(--color-content-secondary, #64748b);
}

.tools-toolbar__btn:hover .tools-toolbar__icon {
  opacity: 1;
}

.tools-toolbar__btn.is-active .tools-toolbar__icon {
  opacity: 1;
}

/* ponytail: legacy background-image rules removed — icons now rendered inline via Phosphor sprite */

/* Plants icon color */
.tools-toolbar__icon[data-tool="plants"] { color: #15803D; }

/* Beds icon color */
.tools-toolbar__icon[data-tool="beds"] { color: #B45309; }

/* Fixtures icon color */
.tools-toolbar__icon[data-tool="fixtures"] { color: #0E7490; }

/* Textures icon color */
.tools-toolbar__icon[data-tool="textures"] { color: #D97706; }

/* Signs icon color */
.tools-toolbar__icon[data-tool="signs"] { color: #0369A1; }

/* Paths icon color */
.tools-toolbar__icon[data-tool="paths"] { color: #047857; }

/* Walls icon color */
.tools-toolbar__icon[data-tool="walls"] { color: #B45309; }

/* Backdrops icon color */
.tools-toolbar__icon[data-tool="backdrops"] { color: #0E7490; }

/* Pots icon color */
.tools-toolbar__icon[data-tool="pots"] { color: #BE185D; }

/* Satellite icon color */
.tools-toolbar__icon[data-tool="satellite"] { color: #0369A1; }

/* Separator between primary and secondary tools */
.tools-toolbar__separator {
  height: 1px;
  background: var(--color-surface-border);
  margin: 6px 8px;
}

.tools-toolbar__speeddial-separator {
  height: 1px;
  background: var(--color-surface-border);
  margin: 4px 0;
}

/* Onboarding hints below toolbar buttons */
.tools-toolbar__onboarding {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 10px;
  color: var(--color-content-secondary);
  text-align: left;
  padding: 6px 8px;
  line-height: 1.3;
  background: var(--color-surface-tint);
  border-radius: 6px;
  margin-top: 6px;
}

.tools-toolbar__onboarding-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--color-content-muted);
  margin-top: 1px;
}

.tools-toolbar__onboarding-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tools-toolbar__hint {
  display: block;
  font-size: 10px;
  color: var(--color-content-secondary);
  text-align: center;
  padding: 3px 6px;
  margin: 2px 0;
  line-height: 1.3;
  background: var(--color-surface-tint);
  border-radius: var(--radius-sm);
}

.tools-toolbar__speeddial-hint {
  display: block;
  font-size: 10px;
  color: var(--color-content-muted);
  padding: 0 0 2px;
  line-height: 1.3;
}

.tools-toolbar__speeddial-onboarding {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 11px;
  color: var(--color-content-secondary);
  text-align: left;
  padding: 6px 10px;
  line-height: 1.3;
  background: var(--color-surface-tint);
  border-radius: var(--radius-md);
  margin-bottom: 6px;
}

/* Collapse button (mobile) */
.tools-toolbar__btn--collapse {
  width: 32px;
  height: 32px;
  margin-left: 4px;
  color: var(--color-content-muted);
}

.tools-toolbar__btn--collapse:hover {
  color: var(--color-content-secondary);
  background: var(--color-danger-surface);
}

/* FAB (mobile) */
.tools-toolbar__fab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
  cursor: pointer;
  transition: transform var(--transition-duration) cubic-bezier(0.4, 0, 0.2, 1), box-shadow var(--transition-duration) cubic-bezier(0.4, 0, 0.2, 1), background var(--transition-duration) cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.tools-toolbar__fab:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.5);
}

.tools-toolbar__fab:active {
  transform: scale(0.95);
}

.tools-toolbar__fab.is-expanded {
  background: linear-gradient(135deg, #6b5d52 0%, #5c4f44 100%);
  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.4);
}

/* FAB icons */
.tools-toolbar__fab-icon {
  width: 28px;
  height: 28px;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
}

.tools-toolbar__fab-icon.is-hidden {
  opacity: 0;
  transform: rotate(135deg) scale(0.5);
}

.tools-toolbar__fab-icon:not(.is-hidden) {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* FAB pulse animation on first load */
.tools-toolbar__fab {
  animation: fabPulse 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fabPulse {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Mode transition animation */
.tools-toolbar.is-transitioning .tools-toolbar__inner {
  opacity: 0.5;
  pointer-events: none;
}

.tools-toolbar.is-transitioning .tools-toolbar__btn {
  animation: toolFadeSwitch 300ms ease-out;
}

@keyframes toolFadeSwitch {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   Beds Flyout - Drag-to-create bed shapes
   ========================================================================== */

/* Button wrapper for flyout positioning */
.tools-toolbar__btn-wrapper {
  position: relative;
}

/* Desktop Flyout */
.beds-flyout--desktop {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-surface-tint);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-surface-border);
  padding: 12px;
  min-width: 180px;
  z-index: 50;
}

.beds-flyout--desktop.pot-flyout {
  top: 0;
  bottom: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: var(--pot-flyout-max-h, calc(100vh - 120px));
}

.beds-flyout--desktop.pot-flyout .pot-inventory-panel {
  min-width: 200px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.beds-flyout--desktop.pot-flyout .pot-inventory-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.beds-flyout--desktop.pot-flyout .pot-inventory-header,
.beds-flyout--desktop.pot-flyout .pot-inventory-add,
.beds-flyout--desktop.pot-flyout .pot-inventory-manage {
  flex-shrink: 0;
}

/* Mobile Flyout - standalone (deprecated, kept for reference) */
.beds-flyout--mobile {
  position: absolute;
  bottom: calc(100% + 16px);
  right: 0;
  background: var(--color-surface-tint);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-surface-border);
  padding: 16px;
  min-width: 200px;
  z-index: 50;
}

/* Mobile Flyout - inline with speed dial */
.beds-flyout--mobile-inline {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-surface-tint);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--color-surface-border);
  padding: 8px;
  z-index: 50;
}

.beds-flyout__shapes--inline {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.beds-flyout__shape--compact {
  padding: 8px 12px;
}

.beds-flyout__shape--compact .beds-flyout__shape-preview {
  width: 36px;
  height: 24px;
}

.beds-flyout__shape--compact .beds-flyout__shape-preview--circle {
  width: 32px;
  height: 32px;
}

.beds-flyout__shape--compact .beds-flyout__shape-preview--polygon {
  width: 32px;
  height: 32px;
}

.beds-flyout__shape--compact .beds-flyout__shape-label {
  font-size: 10px;
}

/* Mobile Beds Flyout - Full-width bottom bar */
.beds-flyout-bar {
  display: none;
}

@media (max-width: 767px) {
  .tools-toolbar--mobile.is-flyout-bar-mode {
    bottom: 0;
    right: 0;
    left: 0;
    align-items: stretch;
  }

  .beds-flyout-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-surface-tint);
    border-top: 1px solid var(--color-surface-border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    padding: 12px 16px calc(12px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
    z-index: 110;
    flex-wrap: wrap; /* the first-bed hint takes a row of its own */
  }

  .beds-flyout--mobile-inline {
    display: none !important;
  }
}

/* Phone, no beds yet: how the shapes work, above them. */
.beds-flyout-bar__hint {
  flex-basis: 100%;
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-content-muted);
  text-align: center;
}

.beds-flyout-bar__shapes {
  display: flex;
  gap: 12px;
  flex: 1;
  justify-content: center;
}

.beds-flyout-bar__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--color-surface-alt);
  color: var(--color-content-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
  margin-left: auto;
}

.beds-flyout-bar__shape {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 2px solid var(--color-surface-border);
  background: var(--color-surface-alt);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.beds-flyout-bar__shape:active {
  cursor: grabbing;
  transform: scale(0.95);
}

.beds-flyout-bar__label {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-content-secondary);
  white-space: nowrap;
}

.beds-flyout-bar__close:active {
  background: var(--color-surface-border);
  color: var(--color-content-secondary);
}

/* Speed dial item wrapper for flyout positioning */
.tools-toolbar__speeddial-item {
  position: relative;
  display: flex;
  align-items: center;
}

/* Flyout Header */
.beds-flyout__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-surface-alt);
}

.beds-flyout__title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-content-muted);
}

.beds-flyout__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: var(--color-content-faint);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.beds-flyout__close:hover {
  background: var(--color-surface-alt);
  color: var(--color-content-secondary);
}

/* Shapes Grid */
.beds-flyout__shapes {
  display: flex;
  gap: 12px;
}

.beds-flyout__shape {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 2px solid var(--color-surface-border);
  background: var(--color-surface-alt);
  cursor: grab;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.beds-flyout__shape:hover {
  border-color: var(--color-bed-border);
  background: var(--color-bed-surface);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 115, 85, 0.2);
}

.beds-flyout__shape:active {
  cursor: grabbing;
  transform: scale(0.95);
}

/* Shape Previews */
.beds-flyout__shape-preview {
  width: 48px;
  height: 40px;
  background: var(--color-bed-fill);
  border: 2px solid var(--color-bed-border);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.beds-flyout__shape-preview--rect {
  border-radius: var(--radius-sm);
}

.beds-flyout__shape-preview--circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.beds-flyout__shape-preview--polygon {
  width: 40px;
  height: 40px;
  background: var(--color-bed-fill);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(50% 0%, 95% 35%, 80% 95%, 20% 95%, 5% 35%);
}

.beds-flyout__shape:hover .beds-flyout__shape-preview {
  background: #c4b498;
  border-color: #6b5a45;
}

.beds-flyout__shape:hover .beds-flyout__shape-preview--polygon {
  background: #c4b498;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) .beds-flyout__shape:hover .beds-flyout__shape-preview,
  :root:not(.light) .beds-flyout__shape:hover .beds-flyout__shape-preview--polygon {
    background: #6b5d52;
  }
}
.dark .beds-flyout__shape:hover .beds-flyout__shape-preview,
.dark .beds-flyout__shape:hover .beds-flyout__shape-preview--polygon {
    background: #6b5d52;
}

.beds-flyout__shape-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-content-secondary);
  white-space: nowrap;
}

.beds-flyout__badge {
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-content-inverse);
  background: var(--color-brand);
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
  line-height: 1.4;
  margin-top: -4px;
}

/* Ghost Element for Dragging */
.beds-flyout__ghost {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  opacity: 0.8;
  background: var(--color-bed-fill);
  border: 2px dashed var(--color-bed-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.beds-flyout__ghost--rect {
  /* Width/height set dynamically based on zoom */
  border-radius: var(--radius-sm);
}

.beds-flyout__ghost--circle {
  /* Width/height set dynamically based on zoom */
  border-radius: 50%;
}

.beds-flyout__ghost--touch,
.beds-flyout__ghost--pointer {
  transform: translate(-50%, -50%);
  animation: ghostPulse 0.3s ease-out;
}

@keyframes ghostPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
}

.beds-flyout__ghost--pot {
  border: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Canvas Drop Target State */
#plot-designer-shell.bed-drop-target {
  outline: 3px dashed var(--color-bed-border);
  outline-offset: -3px;
  background: rgba(139, 115, 85, 0.05);
}

#plot-designer-shell.bed-drop-target::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(139, 115, 85, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

/* Body state during drag */
body.is-dragging-bed {
  cursor: grabbing !important;
  user-select: none;
}

body.is-dragging-bed * {
  cursor: grabbing !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .beds-flyout__shape,
  .beds-flyout__ghost {
    transition: none;
    animation: none;
  }
}

/* ==========================================================================
   Tool Tray - Shared panel for fixtures, textures, backdrops
   ========================================================================== */

/* Desktop: Side panel */
.tool-tray--desktop {
  position: absolute;
  left: calc(var(--toolbar-width, 140px) + 28px);
  top: 20px;
  width: 380px;
  max-height: calc(100vh - 120px);
  background: var(--color-surface-tint);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-surface-border);
  z-index: 40;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Mobile: Bottom sheet. Rendered outside .plot-canvas-wrap and on the plant
   tray's layer: above the FAB (40/110), coach (45) and desktop tip (50),
   below modals and toasts (2000). */
.tool-tray--mobile {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}

.tool-tray--mobile.is-dragging-item .tool-tray__backdrop,
.tool-tray--mobile.is-dragging-item .tool-tray__sheet {
  opacity: 0;
}

.tool-tray__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}

.tool-tray__sheet {
  position: relative;
  background: var(--color-surface-tint);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2);
  min-height: 120px;
  max-height: 45vh;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  overflow: hidden;
  padding-bottom: var(--safe-area-bottom);
}

/* Drag handle for mobile sheet - compact, inline with header */
.tool-tray__handle {
  display: none;
}

.tool-tray__handle-bar {
  width: 40px;
  height: 4px;
  background: var(--color-surface-border);
  border-radius: var(--radius-xs);
}

/* Header */
.tool-tray__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-surface-alt);
  flex-shrink: 0;
}

/* Mobile: very compact header with inline handle */
.tool-tray--mobile .tool-tray__header {
  padding: 4px 10px 0;
  gap: 4px;
  position: relative;
  border-bottom: none;
  min-height: auto;
}

/* Remove old pseudo-element handle - we use a real element now */
.tool-tray--mobile .tool-tray__header::before {
  display: none;
}

/* Drag handle for resizing - centered at top */
.tool-tray__drag-handle {
  display: none;
}

.tool-tray--mobile .tool-tray__drag-handle {
  display: block;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 5px;
  background: var(--color-surface-border);
  border-radius: 3px;
  cursor: grab;
  touch-action: none;
  z-index: 1;
}

.tool-tray--mobile .tool-tray__drag-handle:active {
  cursor: grabbing;
  background: #a89a8c;
}

.tool-tray--mobile .tool-tray__header {
  position: relative;
  cursor: grab;
  touch-action: none;
  padding-top: 20px; /* Space for the drag handle */
}

.tool-tray--mobile .tool-tray__header:active {
  cursor: grabbing;
}

.tool-tray__header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.tool-tray__header-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.tool-tray__hint {
  color: var(--color-content-faint);
  font-size: 10px;
}

.tool-tray--mobile .tool-tray__title {
  font-size: 12px;
}

.tool-tray__search {
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-surface-alt);
}

.tool-tray__search-input {
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-content-primary);
  transition: border-color 0.15s, background 0.15s;
}

.tool-tray__search-input:focus {
  outline: none;
  border-color: var(--color-success);
  background: var(--color-surface);
}

.tool-tray__search-input::placeholder {
  color: var(--color-content-faint);
}

/* Expanded state for mobile tray */
.tool-tray--mobile.is-expanded .tool-tray__sheet {
  max-height: calc(100vh - 80px);
}

.tool-tray--mobile.is-expanded .tool-tray__content {
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y;
  padding: 12px;
}

.tool-tray--mobile.is-expanded .tool-tray__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  flex-wrap: wrap;
  min-width: auto;
  gap: 12px;
  width: 100%;
}

.tool-tray--mobile.is-expanded .tool-tray__item {
  width: auto;
  min-width: 0;
}

.tool-tray--mobile.is-expanded .tool-tray__item-preview {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
}

.tool-tray--mobile .tool-tray__close {
  width: 18px;
  height: 18px;
  padding: 2px;
}

/* Mobile: content sized to fit horizontal row of items */
.tool-tray--mobile .tool-tray__content {
  flex: 1;
  padding: 0 10px 4px;
  display: flex;
  align-items: flex-start;
  touch-action: pan-x; /* Enable horizontal scrolling */
}

.tool-tray--mobile .tool-tray__sheet {
  padding-bottom: 60px;
}

/* Expand sheet height for grouped/categorized content */
.tool-tray--mobile.tool-tray--grouped-mode .tool-tray__sheet {
  max-height: 65vh;
}

.tool-tray--mobile.tool-tray--grouped-mode.is-expanded .tool-tray__sheet {
  max-height: calc(100vh - 80px);
}

.tool-tray__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-content-secondary);
}

.tool-tray__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  color: var(--color-content-faint);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.tool-tray__close:hover {
  background: var(--color-surface-tint);
  color: var(--color-content-secondary);
}

/* Content area */
.tool-tray__content {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  -webkit-overflow-scrolling: touch;
}

/* Grid layout */
.tool-tray__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.tool-tray--desktop .tool-tray__grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.tool-tray--desktop .tool-tray__item-preview {
  width: 56px;
  height: 56px;
}

.tool-tray--desktop .tool-tray__item-label {
  max-width: 90px;
}

/* Mobile: horizontal scrolling grid */
.tool-tray--mobile .tool-tray__content {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* padding set in earlier rule */
}

.tool-tray--mobile .tool-tray__grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  min-width: max-content;
  align-items: flex-start;
}

.tool-tray--mobile .tool-tray__item {
  flex-shrink: 0;
  width: auto;
  padding: 2px;
  background: transparent;
  touch-action: pan-x; /* Allow horizontal scroll, long-press triggers drag */
}

.tool-tray--mobile .tool-tray__item-preview {
  width: 68px;
  height: 68px;
}

.tool-tray--mobile .tool-tray__item-label {
  font-size: 9px;
  margin-top: 2px;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
}

/* Individual items */
.tool-tray__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 2px;
  border-radius: 10px;
  border: 2px solid transparent;
  background: transparent;
  cursor: grab;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.tool-tray__item:hover {
  border-color: var(--color-surface-border);
  background: var(--color-surface);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tool-tray__item:active {
  transform: scale(0.95);
  cursor: grabbing;
}

/* Item preview */
.tool-tray__item-preview {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tool-tray__item-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.tool-tray__item-placeholder {
  font-size: 24px;
}

.tool-tray__item-label {
  font-size: 10px;
  color: var(--color-content-muted);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
}

.tool-tray__item-desc {
  font-size: 9px;
  color: var(--color-content-muted);
  text-align: center;
  margin-top: -2px;
}

.tool-tray__item--add {
  cursor: pointer;
  opacity: 0.7;
}

.tool-tray__item--add:hover {
  opacity: 1;
}

.tool-tray__item-preview--add {
  border: 2px dashed #c4b5a5;
  background: transparent;
}

.tool-tray__add-icon {
  font-size: 24px;
  color: var(--color-content-muted);
  line-height: 1;
}

.tool-tray__item-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 8px;
  font-weight: 600;
  color: var(--color-content-inverse);
  background: #5b8c5a;
  border-radius: var(--radius-md);
  padding: 1px 4px;
  line-height: 1.2;
  min-width: 16px;
  text-align: center;
}

/* Empty state */
.tool-tray__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  gap: 12px;
}

.tool-tray__empty-text {
  font-size: 14px;
  color: var(--color-content-faint);
}

.tool-tray__refresh-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-content-secondary);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.tool-tray__refresh-btn:hover {
  background: var(--color-surface-border);
  color: var(--color-content-primary);
}

/* Ghost element for dragging - canvas-like preview */
.tool-tray__ghost {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  /* Size set dynamically via JS based on zoom */
}

/* Canvas preview: transparent bg, just the image with drop shadow */
.tool-tray__ghost--canvas-preview {
  background: transparent !important;
  border: none;
  border-radius: 0;
  padding: 0;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

.tool-tray__ghost-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  border-radius: 0;
  display: block;
}

.tool-tray__ghost--emoji {
  font-size: 36px;
  background: var(--color-surface);
  border: 2px solid var(--color-surface-border);
}

.tool-tray__ghost--touch,
.tool-tray__ghost--pointer {
  transform: translate(-50%, -50%);
  animation: trayGhostLift 0.2s ease-out;
}

@keyframes trayGhostLift {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.9;
  }
}

/* Canvas drop target state for tray items */
#plot-designer-shell.tray-drop-target {
  outline: 3px dashed #6366f1;
  outline-offset: -3px;
  background: rgba(99, 102, 241, 0.05);
}

/* Body state during tray drag */
body.is-dragging-tray-item {
  cursor: grabbing !important;
}

body.is-dragging-tray-item * {
  cursor: grabbing !important;
}

/* Reduced motion for tool tray */
@media (prefers-reduced-motion: reduce) {
  .tool-tray__item,
  .tool-tray__ghost,
  .tool-tray__sheet {
    transition: none;
    animation: none;
  }
}

/* Tool tray grouped layout (fixture categories) */
.tool-tray__grouped {
  display: flex;
  flex-direction: column;
}

.tool-tray__group {
  border-bottom: 1px solid var(--color-surface-alt, #f3f4f6);
}

.tool-tray__group:last-child {
  border-bottom: none;
}

.tool-tray__group-header {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--color-surface, #fff);
  border: none;
  border-bottom: 1px solid var(--color-surface-border, #e5e7eb);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s ease;
}

.tool-tray__group-header:hover {
  background: var(--color-surface-alt, #f9fafb);
}

.tool-tray__group-header.is-expanded {
  background: var(--color-surface-alt, #f9fafb);
}

.tool-tray__group-chevron {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  color: var(--color-content-muted, #6b7280);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.tool-tray__group-chevron.rotate-90 {
  transform: rotate(90deg);
}

.tool-tray__group-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-content-primary, #1f2937);
  flex: 1;
}

.tool-tray__group-count {
  font-size: 0.75rem;
  color: var(--color-content-muted, #6b7280);
  margin-left: 0.5rem;
}

.tool-tray__group-content {
  overflow: hidden;
  padding: 8px;
}

.tool-tray__group-content .tool-tray__grid {
  gap: 6px;
}

/* Mobile grouped layout: override horizontal scroll to vertical */
.tool-tray--mobile .tool-tray__content--grouped {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  flex-direction: column;
  align-items: stretch;
}

.tool-tray--mobile .tool-tray__content--grouped .tool-tray__grouped {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.tool-tray--mobile .tool-tray__group-content .tool-tray__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  flex-wrap: wrap;
  min-width: unset;
}

.tool-tray--mobile .tool-tray__content--grouped .tool-tray__item {
  touch-action: pan-y; /* Allow vertical scroll in grouped mode */
}

/* Mobile responsive adjustments */
@media (max-width: 767px) {
  .tools-toolbar--mobile {
    bottom: calc(20px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
    right: 12px;
  }

  .tools-toolbar__speeddial-btn {
    padding: 10px 14px;
    min-height: 48px;
  }

  .tools-toolbar__speeddial-icon {
    width: 24px;
    height: 24px;
  }

  .tools-toolbar__speeddial-label {
    font-size: 14px;
    white-space: nowrap;
    max-width: none;
  }
}

/* ==========================================================================
   PLANT TRAY - Plant selection for drag-and-drop placement
   ========================================================================== */

/* Desktop: Side panel */
.plant-tray--desktop {
  position: fixed;
  left: calc(var(--toolbar-width, 140px) + 28px);
  top: 20px;
  width: 260px;
  max-height: calc(100vh - 140px);
  background: var(--color-surface-tint);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Mobile: Bottom sheet */
.plant-tray--mobile {
	  position: fixed;
	  inset: 0;
	  z-index: 1200;
	  display: flex;
	  flex-direction: column;
	  justify-content: flex-end;
	  pointer-events: none;
}

.plant-tray__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}

/* Sheet: on desktop it's a passthrough; on mobile it's the bottom sheet panel */
.plant-tray--desktop .plant-tray__sheet {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.plant-tray--mobile .plant-tray__sheet {
  position: relative;
  background: var(--color-surface-tint);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  max-height: 45vh;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  overflow: visible;
  padding-bottom: var(--safe-area-bottom);
}

.plant-tray--mobile .plant-tray__sheet.is-expanded {
  max-height: calc(100vh - 80px);
  z-index: 10001;
}

/* Header */
.plant-tray__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-surface-border);
  flex-shrink: 0;
}

.plant-tray--mobile .plant-tray__header {
  padding: 8px 12px;
  position: relative;
  cursor: grab;
  touch-action: none;
  padding-top: 24px;
}

.plant-tray__drag-handle {
  display: none;
}

.plant-tray--mobile .plant-tray__drag-handle {
  display: block;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  background: var(--color-surface-border);
  border-radius: var(--radius-xs);
  cursor: grab;
  touch-action: none;
  /* Expand touch target with pseudo-element */
}

.plant-tray--mobile .plant-tray__drag-handle::before {
  content: '';
  position: absolute;
  top: -16px;
  left: -20px;
  right: -20px;
  bottom: -12px;
  /* Invisible expanded touch target */
}

/* Reduce touch target when expanded to avoid overlapping with tabs below */
.plant-tray__sheet.is-expanded .plant-tray__drag-handle::before {
  bottom: -4px;
}

.plant-tray__header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.plant-tray__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-content-secondary);
}

.plant-tray--mobile .plant-tray__title {
  font-size: 13px;
}


.plant-tray__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--color-content-faint);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.plant-tray--mobile .plant-tray__close {
  position: absolute;
  top: 0px;
  right: 8px;
  z-index: 10;
  min-height: auto;
  min-width: auto;
  height: 28px;
  width: 28px;
}

.plant-tray__close:hover {
  background: var(--color-surface-alt);
  color: var(--color-content-secondary);
}

/* Search */
.plant-tray__search {
  position: relative;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-surface-alt);
}

.plant-tray__search-input {
  width: 100%;
  padding: 8px 12px;
  padding-right: 32px;
  font-size: 13px;
  border: 1px solid var(--color-surface-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color 0.15s, background 0.15s;
}

.plant-tray__search-input:focus {
  outline: none;
  border-color: var(--color-success);
  background: var(--color-surface);
}

.plant-tray__search-input--small {
  padding: 6px 10px;
  font-size: 12px;
}

.plant-tray__search--collapsed {
  padding: 6px 12px;
  border-bottom: 1px solid var(--color-surface-border);
}

.plant-tray__search-clear {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-content-faint);
  background: none;
  border: none;
  cursor: pointer;
}

/* Filter chips */
.plant-tray__filter-chips {
  display: flex;
  padding: 4px 12px;
  gap: 6px;
  flex-shrink: 0;
}

.plant-tray__filter-chip {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--color-surface-border);
  background: transparent;
  color: var(--color-content-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.plant-tray__filter-chip:hover {
  background: var(--color-surface-alt);
}

.plant-tray__filter-chip.is-active {
  background: var(--color-brand-light);
  color: var(--color-brand);
  border-color: #d4e8d0;
}

.dark .plant-tray__filter-chip.is-active {
  background: rgba(13, 39, 20, 0.3);
  color: #86d99a;
  border-color: rgba(22, 72, 37, 0.5);
}

/* Perennial badge for catalog items */
.plant-tray__perennial-badge {
  font-size: 9px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: #e0e7ff;
  color: var(--color-badge-perennial);
  white-space: nowrap;
}

.dark .plant-tray__perennial-badge {
  background: rgba(67, 56, 202, 0.2);
  color: var(--color-badge-perennial);
}

/* Expanded controls for mobile */
.plant-tray__expanded-controls {
  flex-shrink: 0;
}

/* Content */
.plant-tray__content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  min-height: 200px; /* Prevent collapse during loading */
}

.plant-tray--mobile .plant-tray__content {
  padding: 8px;
  min-height: 120px;
}

.plant-tray--mobile.is-expanded .plant-tray__content {
  min-height: 300px;
}

/* Grid */
.plant-tray__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.plant-tray--desktop .plant-tray__grid {
  grid-template-columns: repeat(2, 1fr);
}

.plant-tray__grid--horizontal {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.plant-tray__grid--horizontal .plant-tray__item {
  flex-shrink: 0;
  width: auto;
  max-width: 80px;
}

.plant-tray--mobile .plant-tray__grid--horizontal .plant-tray__item-label {
  max-width: 68px;
  white-space: normal;
  word-break: break-word;
}

.plant-tray--mobile .plant-tray__grid--horizontal .plant-tray__item {
  touch-action: pan-x; /* Match tool tray: allow horizontal scrolling while still enabling long-press drag */
}

.plant-tray--mobile .plant-tray__grid--horizontal .plant-tray__item {
  padding: 6px;
  align-items: flex-start;
  text-align: left;
}

/* Items */
.plant-tray__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  border-radius: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-surface-border);
  cursor: grab;
  transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  touch-action: pan-y; /* Allow vertical scroll, long-press triggers drag */
  user-select: none;
}

.plant-tray--desktop .plant-tray__item {
  touch-action: none; /* Desktop uses pointer events */
}

.plant-tray__item:hover {
  border-color: var(--color-success);
  background: #ecfdf5;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dark .plant-tray__item:hover {
  background: rgba(13, 39, 20, 0.2);
}

.plant-tray__item:active {
  transform: scale(0.95);
  cursor: grabbing;
}

.plant-tray__item.is-dimmed {
  opacity: 0.6;
}

/* Placed plants are greyed out */
.plant-tray__item.is-placed {
  opacity: 0.5;
}

.plant-tray__item.is-placed:hover {
  opacity: 0.7;
}

/* Filter toggle for hide placed checkbox */
.plant-tray__filter-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin-bottom: 8px;
  font-size: 11px;
  color: var(--color-content-secondary);
  cursor: pointer;
  user-select: none;
}

.plant-tray__filter-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--color-canvas-valid);
  cursor: pointer;
}

/* Permanent section wrapper */
.plant-tray__permanent-section {
  display: flex;
  flex-direction: column;
}

.plant-tray__item--variety {
  padding: 6px;
  margin-left: 12px;
}

.plant-tray__item--add {
  cursor: pointer;
  border-style: dashed;
  border-color: var(--color-surface-border);
  background: transparent;
}

.plant-tray__item--add:hover {
  border-color: var(--color-success);
  background: #ecfdf5;
}

.dark .plant-tray__item--add:hover {
  background: rgba(13, 39, 20, 0.2);
}

.plant-tray__item--add:active {
  transform: scale(0.98);
  cursor: pointer;
}

.plant-tray__item-preview--add {
  background: var(--color-surface-border);
  color: var(--color-content-secondary);
  font-weight: 600;
}

.plant-tray__item--add:hover .plant-tray__item-preview--add {
  background: var(--color-canvas-valid);
  color: white;
}

/* Item preview (image container) */
.plant-tray__item-preview {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.plant-tray__item-preview--small {
  width: 40px;
  height: 40px;
  border-radius: 6px;
}

.plant-tray--mobile .plant-tray__grid--horizontal .plant-tray__item-preview {
  width: 56px;
  height: 56px;
}

/* ── List item rows (planned plants + search results) ── */
.plant-tray__list-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: 6px;
  cursor: grab;
  transition: background 0.15s ease;
  min-height: 44px;
  touch-action: pan-y;
}

.plant-tray--desktop .plant-tray__list-item {
  touch-action: none;
}

.plant-tray__list-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

.dark .plant-tray__list-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.plant-tray__list-item.is-placed {
  opacity: 0.5;
}

.plant-tray__list-item-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-surface-alt, #f0ede8);
}

.plant-tray__list-item-icon .plant-tray__item-image {
  width: 36px;
  height: 36px;
  object-fit: cover;
}

.plant-tray__list-item-icon .plant-tray__item-placeholder {
  width: 36px;
  height: 36px;
}

.plant-tray__list-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.plant-tray__list-item-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-content-primary);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.plant-tray__list-item-detail {
  font-size: 0.6875rem;
  color: var(--color-content-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plant-tray__item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plant-tray__item-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--color-surface-alt);
}

/* Item label */
.plant-tray__item-label {
  font-size: 10px;
  color: var(--color-content-secondary);
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

/* Item badges */
.plant-tray__item-badge {
  font-size: 9px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 10px;
  margin-top: 2px;
}

.plant-tray__item-badge--available {
  background: #d1fae5;
  color: var(--color-lifecycle-green);
}

.dark .plant-tray__item-badge--available {
  background: rgba(6, 78, 59, 0.3);
  color: var(--color-canvas-valid);
}

.plant-tray__item-badge--flex {
  background: #dbeafe;
  color: var(--color-info);
}

.dark .plant-tray__item-badge--flex {
  background: rgba(30, 58, 138, 0.3);
  color: #93c5fd;
}

.plant-tray__item-badge--done {
  background: var(--color-surface-border);
  color: var(--color-content-muted);
}

.plant-tray__item-badge--over {
  background: var(--color-danger-surface);
  color: var(--color-danger);
}

.dark .plant-tray__item-badge--over {
  background: rgba(127, 29, 29, 0.3);
  color: var(--color-danger-border);
}

.plant-tray__item-badge--permanent {
  background: #e0e7ff;
  color: var(--color-badge-perennial);
}

.dark .plant-tray__item-badge--permanent {
  background: rgba(67, 56, 202, 0.2);
  color: var(--color-badge-perennial);
}

.plant-tray__item-badge--in-season {
  background: #d1fae5;
  color: var(--color-lifecycle-green);
}

.dark .plant-tray__item-badge--in-season {
  background: rgba(6, 78, 59, 0.3);
  color: var(--color-canvas-valid);
}

.plant-tray__item-badge--not-in-season {
  background: #fef3c7;
  color: var(--color-warning);
}

.dark .plant-tray__item-badge--not-in-season {
  background: rgba(120, 53, 15, 0.3);
  color: var(--color-warning);
}

/* Item window display */
.plant-tray__item-window {
  font-size: 9px;
  color: var(--color-content-muted);
  margin-top: 2px;
  text-align: center;
}

.plant-tray__item-status {
  font-size: 10px;
  color: var(--color-content-secondary);
  margin-top: 2px;
  line-height: 1.2;
}

.plant-tray__item-status--now {
  color: var(--color-lifecycle-green);
  font-weight: 600;
}

.plant-tray__item-status--later {
  color: var(--color-warning);
  font-weight: 600;
}

.plant-tray--mobile .plant-tray__grid--horizontal .plant-tray__item-label,
.plant-tray--mobile .plant-tray__grid--horizontal .plant-tray__item-window,
.plant-tray--mobile .plant-tray__grid--horizontal .plant-tray__item-status {
  text-align: left;
}

.plant-tray__item-window--tiny {
  font-size: 9px;
  color: var(--color-content-muted);
}

.plant-tray__item-window--good {
  color: var(--color-lifecycle-green);
  font-weight: 600;
}

.plant-tray__item-window--bad {
  color: var(--color-danger);
  font-weight: 600;
}

.plant-tray__item--dimmed {
  opacity: 0.55;
}

/* Library type grouping */
.plant-tray__library {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0; /* Allow flex shrinking for scroll */
}

/* A progressive-render page of rows: its rows lay out as direct list items */
.plant-tray__page {
  display: contents;
}

/* Below a list's last rendered row: scrolling it near view renders the next page */
.plant-tray__list-end {
  height: 1px;
}

/* A replaced search result list while its rows are trimmed off: skipped and
   sized to nothing. Unlike display: none, this keeps the layout of the rows
   the user scrolled through, which then goes a trimmed page at a time instead
   of all at once. */
.plant-tray__results--retired {
  content-visibility: hidden;
}

.plant-tray__library-type {
  border: 1px solid var(--color-surface-border);
  border-radius: 10px;
  overflow: hidden;
  /* Rows out of view skip rendering, so a long list appends page by page
     without re-laying out every row already in it */
  content-visibility: auto;
  contain-intrinsic-size: auto 62px;
}

/* Chevron follows the button state (one binding per row instead of two) */
.plant-tray__library-expand-btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.plant-tray__library-type-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--color-surface);
  cursor: grab;
  transition: background 0.15s;
  touch-action: pan-y; /* Allow vertical scroll on mobile */
}

.plant-tray--desktop .plant-tray__library-type-header {
  touch-action: none;
}

.plant-tray__library-type-header:hover {
  background: #ecfdf5;
}

.dark .plant-tray__library-type-header:hover {
  background: rgba(13, 39, 20, 0.2);
}

.plant-tray__library-type-header.is-dimmed {
  opacity: 0.7;
}

.plant-tray__library-type-info {
  flex: 1;
  min-width: 0;
}

.plant-tray__library-type-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-content-secondary);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.plant-tray__library-type-badge {
  display: block;
  font-size: 10px;
  color: var(--color-content-muted);
  margin-top: 1px;
}

.plant-tray__library-type-window {
  display: block;
  font-size: 10px;
  margin-top: 2px;
  font-weight: 500;
}

.plant-tray__library-type-window--in-season {
  color: var(--color-lifecycle-green);
}

.plant-tray__library-type-window--out-season {
  color: var(--color-danger);
}

.plant-tray__library-expand-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-content-faint);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}

.plant-tray__library-expand-btn:hover {
  background: var(--color-surface-border);
  color: var(--color-content-secondary);
}

.plant-tray__library-varieties {
  padding: 8px;
  background: var(--color-surface-tint);
  border-top: 1px solid var(--color-surface-alt);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

/* Empty and loading states */
.plant-tray__empty,
.plant-tray__loading,
.plant-tray__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  gap: 8px;
}

.plant-tray__empty-text,
.plant-tray__loading-text {
  font-size: 13px;
  color: var(--color-content-faint);
}

.plant-tray__empty-hint {
  font-size: 12px;
  color: var(--color-content-muted);
  margin-top: 6px;
}

/* Welcoming empty state for new users in My Plants */
.plant-tray__empty-welcome {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
  padding: 8px 12px;
}

.plant-tray__empty-hint {
  font-size: 12px;
  color: var(--color-content-faint);
  line-height: 1.4;
}

.plant-tray__empty-hint strong {
  color: var(--color-success);
  font-weight: 600;
}

/* Make empty state span full grid width */
.plant-tray__grid .plant-tray__empty {
  grid-column: 1 / -1;
}

.plant-tray__library .plant-tray__empty {
  width: 100%;
}

/* Empty state in horizontal scroll layout */
.plant-tray__grid--horizontal .plant-tray__empty {
  flex: 1;
  min-width: 100%;
  padding: 16px;
}

.plant-tray__error-text {
  font-size: 13px;
  color: var(--color-danger);
}

.plant-tray__retry-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-content-secondary);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-surface-border);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s;
}

.plant-tray__retry-btn:hover {
  background: var(--color-surface-border);
}

/* Ghost element for dragging */
.plant-tray__ghost {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  animation: plantGhostLift 0.15s ease-out;
}

@keyframes plantGhostLift {
  from {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.plant-tray__ghost-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.plant-tray__ghost--emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  background: var(--color-surface);
  border: 2px solid var(--color-surface-border);
}

.plant-tray__ghost--touch {
  animation: plantGhostLift 0.2s ease-out;
}

/* Drop target styles */
.plant-drop-target {
  outline: 3px dashed var(--color-canvas-valid) !important;
  outline-offset: -3px;
  background-color: rgba(16, 185, 129, 0.05) !important;
}

/* Seasonal plant drag: highlight beds */
.seasonal-drag-active #beds [data-bed-shape-highlight] {
  display: block !important;
  stroke: none !important;
  animation: bed-highlight-pulse 1.5s ease-in-out infinite;
}

@keyframes bed-highlight-pulse {
  0%, 100% { fill: color-mix(in srgb, var(--color-info) 15%, transparent); }
  50% { fill: color-mix(in srgb, var(--color-info) 35%, transparent); }
}

/* A bed just added by a tap, click or "Add a bed": a ring pulses out from its
   edge so it is easy to spot when zoomed out. The ring keeps its screen width
   (vector-effect: non-scaling-stroke is set on the element). */
.pd-bed-pulse {
  fill: none;
  stroke: var(--color-canvas-valid, #22c55e);
  stroke-width: 4px;
  pointer-events: none;
  animation: pd-bed-pulse 1.5s ease-out 1 forwards;
}

/* One ring: enough to find a new bed when zoomed out, not a flash. */
@keyframes pd-bed-pulse {
  0% { stroke-width: 4px; stroke-opacity: 0.95; }
  45% { stroke-opacity: 0.7; }
  100% { stroke-width: 24px; stroke-opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pd-bed-pulse {
    animation: none;
    stroke-width: 4px;
    stroke-opacity: 0.8;
  }
}

/* Body state while dragging */
body.is-dragging-plant * {
  cursor: grabbing !important;
}

/* Expanded content wrapper */
.plant-tray__expanded-content {
  max-height: calc(100vh - 280px);
  overflow-y: auto;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .plant-tray__item,
  .plant-tray__ghost,
  .plant-tray__sheet {
    transition: none;
    animation: none;
  }
}


/* Group Accordion Header */
.plant-tray__group-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 6px 12px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-surface-border);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease;
}

.plant-tray__group-header:hover {
    background: var(--color-surface-alt);
}

.plant-tray__group-header.is-expanded {
    background: transparent;
}

.plant-tray__group-chevron {
    width: 12px;
    height: 12px;
    margin-right: 6px;
    color: var(--color-content-muted);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.plant-tray__group-chevron.rotate-90 {
    transform: rotate(90deg);
}

.plant-tray__group-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-content-secondary);
    flex: 1;
}

.plant-tray__group-count {
    font-size: 11px;
    color: var(--color-content-muted);
    margin-left: 4px;
}

/* Groups container */
.plant-tray__groups {
    display: flex;
    flex-direction: column;
}

.plant-tray__group {
    border-bottom: 1px solid var(--color-surface-alt);
}

.plant-tray__group:last-child {
    border-bottom: none;
}

/* Group Content (collapsible) */
.plant-tray__group-content {
    overflow: hidden;
}

/* Subgroup (nested within group) */
.plant-tray__subgroup {
    border-top: 1px solid var(--color-surface-border);
}

.plant-tray__subgroup:first-child {
    border-top: none;
}

.plant-tray__subgroup-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.375rem 0.75rem 0.375rem 1.5rem;
    background: var(--color-surface);
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease;
}

.plant-tray__subgroup-header:hover {
    background: var(--color-surface-alt);
}

.plant-tray__subgroup-header.is-expanded {
    background: var(--color-surface-alt);
}

.plant-tray__subgroup-chevron {
    width: 0.875rem;
    height: 0.875rem;
    margin-right: 0.375rem;
    color: var(--color-content-faint);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.plant-tray__subgroup-chevron.rotate-90 {
    transform: rotate(90deg);
}

.plant-tray__subgroup-label {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--color-content-secondary);
    flex: 1;
}

.plant-tray__subgroup-count {
    font-size: 0.6875rem;
    color: var(--color-content-faint);
    margin-left: 0.375rem;
}

.plant-tray__subgroup-content {
    overflow: hidden;
    padding-left: 0.5rem;
}

/* Mobile Group Filter Dropdown */
.plant-tray__group-filter {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-surface-border);
    border-radius: 0.375rem;
    cursor: pointer;
    color: var(--color-content-primary);
}

.plant-tray__group-filter:hover {
    background: var(--color-surface-border);
}

.plant-tray__group-filter-wrapper {
    position: relative;
    flex-shrink: 0;
}

.plant-tray__group-filter-chevron {
    width: 0.75rem;
    height: 0.75rem;
    margin-left: 0.25rem;
}

/* Group Filter Dropdown Menu - opens upward on mobile collapsed */
.plant-tray__group-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 50;
    min-width: 10rem;
    background: var(--color-surface-tint);
    border: 1px solid var(--color-surface-border);
    border-radius: 0.5rem;
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
    padding: 0.25rem 0;
    margin-bottom: 0.25rem;
}

.plant-tray__group-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--color-content-primary);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.plant-tray__group-dropdown-item:hover {
    background: var(--color-surface);
}

.plant-tray__group-dropdown-item.is-selected {
    background: var(--color-surface-alt);
    color: var(--color-primary-hover);
}

.plant-tray__group-dropdown-item-count {
    font-size: 0.75rem;
    color: var(--color-content-muted);
}

.plant-tray__group-dropdown-divider {
    height: 1px;
    background: var(--color-surface-border);
    margin: 0.25rem 0;
}

/* ── Plant tray section dividers ── */
.plant-tray__section-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem 0.25rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-content-muted);
}

.plant-tray__section-label--divider {
    border-top: 1px solid var(--color-surface-border, #e5e3db);
    margin-top: 0.5rem;
    padding-top: 0.75rem;
}

.plant-tray__section-label--collapsible {
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
}

.plant-tray__section-label--collapsible .plant-tray__group-chevron {
    width: 10px;
    height: 10px;
}

/* ── Plant tray status badges ── */
.plant-tray__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
    font-size: 0.5625rem;
    font-weight: 600;
    white-space: nowrap;
}

.plant-tray__badge--unplaced {
    background: #fef3c7;
    color: var(--color-warning);
}

.dark .plant-tray__badge--unplaced {
    background: rgba(120, 53, 15, 0.3);
    color: var(--color-warning);
}

.plant-tray__badge--placed {
    background: var(--color-brand-light);
    color: var(--color-brand);
}

.dark .plant-tray__badge--placed {
    background: rgba(13, 39, 20, 0.4);
    color: #86d99a;
}

.plant-tray__badge--left {
    background: #fef3c7;
    color: var(--color-warning);
}

.dark .plant-tray__badge--left {
    background: rgba(120, 53, 15, 0.3);
    color: var(--color-warning);
}

.plant-tray__item--placed {
    opacity: 0.5;
}

/* ── Mobile placement bar ── */
.plant-tray__placement-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1002;
    background: var(--color-surface-tint, #fcfbf8);
    border-radius: 1.25rem 1.25rem 0 0;
    padding: 0.75rem 1.25rem;
    padding-bottom: calc(1rem + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.1);
    pointer-events: auto;
}

.plant-tray__placement-bar--dragging {
    opacity: 0;
    pointer-events: none;
}

.plant-tray__placement-bar-handle {
    width: 2.25rem;
    height: 0.25rem;
    background: var(--color-surface-border, #e5e3db);
    border-radius: 2px;
    margin: 0 auto;
}

.plant-tray__placement-bar-header {
    display: grid;
    grid-template-columns: 3rem 1fr auto;
    align-items: center;
    gap: 0.75rem;
}

.plant-tray__placement-bar-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: var(--color-surface-alt, #f5f3ed);
    border: 2px solid var(--color-brand-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    touch-action: none;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}

.plant-tray__placement-bar-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}

.plant-tray__placement-bar-name {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--color-content-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plant-tray__placement-bar-cancel {
    width: 2.25rem;
    height: 2.25rem;
    background: var(--color-surface-alt, #f5f3ed);
    color: var(--color-content-muted);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid var(--color-surface-border, #e5e3db);
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
}

.plant-tray__placement-bar-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--color-brand, #164825);
    color: #fff;
    border: none;
    border-radius: 0.75rem;
    padding: 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    touch-action: none;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    animation: placementBarFloat 4s cubic-bezier(0.4, 0, 0.2, 1) 1.5s infinite;
}

@keyframes placementBarFloat {
    0%, 85%, 100% { transform: translateY(0); }
    8% { transform: translateY(-5px); }
    16% { transform: translateY(0); }
    24% { transform: translateY(-3px); }
    32% { transform: translateY(0); }
}

.plant-tray__placement-bar-action:active {
    cursor: grabbing;
    transform: scale(0.96);
    background: var(--color-brand-hover, #12381d);
    animation: none;
}

@keyframes placementBarNudge {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
}

.plant-tray__placement-bar-action--nudge {
    animation: placementBarNudge 0.4s ease;
}

.plant-tray__list-item--nudge {
    animation: placementBarNudge 0.4s ease;
}

/* Phone: shown above the placement bar when a tap on the garden is kept from
   dropping the chosen plant. Taps pass through it. */
.plant-tray__placement-guard-hint {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: calc(100% + 0.5rem);
    width: fit-content;
    max-width: calc(100% - 2rem);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.875rem;
    background: var(--color-brand, #164825);
    color: #fff;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    pointer-events: none;
}

.plant-tray__placement-guard-hint-main {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
}

.plant-tray__placement-guard-hint-sub {
    font-size: 0.75rem;
    line-height: 1.3;
    opacity: 0.85;
}

/* Tablet and desktop: short "drag me" label above a clicked plant tile. Fixed
   (left/top set from JS) so narrow cards and the scrolling panel cannot clip
   it; above the plant panel (z-index 1200). */
.plant-tray__tile-hint {
    position: fixed;
    z-index: 1250;
    max-width: calc(100vw - 16px);
    transform: translate(-50%, calc(-100% - 6px));
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: var(--color-brand, #164825);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    animation: plantTrayTileHintIn 0.15s ease-out;
}

@keyframes plantTrayTileHintIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .plant-tray__tile-hint {
        animation: none;
    }
}

/* ── Onboarding hint overlay ── */
.plant-tray__onboarding-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.75);
    color: var(--color-content-inverse);
    font-size: 0.75rem;
    padding: 0.375rem 0.875rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    pointer-events: none;
    z-index: 50;
    white-space: nowrap;
}

/* In-season indicator for search results */
.plant-tray__in-season-dot {
    color: #3A8C4B;
    font-size: 0.5rem;
    vertical-align: middle;
    margin: 0 0.15rem;
}

/* Permanent catalog add affordance */
.plant-tray__catalog-add-icon {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-brand);
    font-size: 1rem;
    font-weight: 700;
}


/* ==========================================================================
   TOUCH DRAG VISUAL FEEDBACK
   ========================================================================== */

/* Touch drag visual feedback - lift effect (drop-shadow only; CSS transform on
   bed-body would override the SVG transform attribute that positions it, causing
   an offset during drag) */
.bed--dragging {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

/* ==========================================================================
   PLACEMENT QUICK ACTION ANIMATIONS
   Smooth transitions for snap and row/column operations
   ========================================================================== */

/* Base transition for placement content group (handles position/transform changes) */
g[data-kind="placement"].placement-animating > g[data-kind="placement-content"] {
    transition: transform 0.2s ease-out;
}

/* Faster transition specifically for snap operations */
g[data-kind="placement"].placement-snapping > g[data-kind="placement-content"] {
    transition: transform 0.15s ease-out;
}

/* Transition for placement body rect (handles size changes for row/col operations) */
g[data-kind="placement"].placement-animating g[data-kind="placement-body"] > rect {
    transition: width 0.2s ease-out, height 0.2s ease-out, x 0.2s ease-out, y 0.2s ease-out;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    g[data-kind="placement"].placement-animating > g[data-kind="placement-content"],
    g[data-kind="placement"].placement-snapping > g[data-kind="placement-content"],
    g[data-kind="placement"].placement-animating g[data-kind="placement-body"] > rect {
        transition: none;
    }
}

/* Shake animation for "can't do" feedback on mobile */
@keyframes placement-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

g[data-kind="placement"].placement-shake {
    animation: placement-shake 0.3s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    g[data-kind="placement"].placement-shake {
        animation: none;
        opacity: 0.7;
    }
}

/* ==========================================================================
   DRAG HINT ANIMATIONS
   ========================================================================== */

/* Horizontal bounce animation for desktop arrow */
@keyframes dragHintArrowBounce {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(6px);
  }
}

/* Subtle pulse animation for mobile finger icon */
@keyframes dragHintFingerPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

/* Drag hint container - shared styles */
.drag-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  background-color: var(--color-surface-tint, #fcfbf8);
  border: 1px solid var(--color-surface-border, #e5e3db);
  font-size: 0.75rem;
  color: var(--color-content-secondary); /* gray-600 */
}

.drag-hint__text {
  white-space: nowrap;
}

/* Desktop arrow icon */
.drag-hint__arrow {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  animation: dragHintArrowBounce 1s ease-in-out infinite;
}

/* Mobile finger icon */
.drag-hint__finger {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  animation: dragHintFingerPulse 1.5s ease-in-out infinite;
}

/* Beds flyout drag hint positioning */
.beds-flyout__drag-hint {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-surface-border, #e5e3db);
}

/* The hint wraps within the shapes' width instead of widening the flyout
   (long translations). */
.beds-flyout--desktop .beds-flyout__drag-hint .drag-hint__text {
  white-space: normal;
  text-wrap: balance;
}


/* Reduced motion support for accessibility */
@media (prefers-reduced-motion: reduce) {
  .drag-hint__arrow,
  .drag-hint__finger {
    animation: none;
  }
}

/* ==========================================================================
   EXPORT PANEL
   Dropdown panel for export/print options
   ========================================================================== */

.plot-export-panel {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 50;
    min-width: 16rem;
    max-width: 20rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-surface-border, #e5e3db);
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: 0.75rem;
}

.plot-export-panel__options {
    display: flex;
    flex-direction: column;
}

.plot-export-panel__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.plot-export-panel__option:hover {
    color: var(--color-primary-hover);
}

.plot-export-panel__checkbox {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border: 1px solid var(--color-surface-border, #d1d5db);
    accent-color: var(--color-primary-hover);
    cursor: pointer;
}

.plot-export-panel__select {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    border: 1px solid var(--color-surface-border, #d1d5db);
    border-radius: 0.375rem;
    background: var(--color-surface, #fff);
    cursor: pointer;
}

.plot-export-panel__select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.plot-export-panel__error {
    margin-top: 0.75rem;
    padding: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-danger);
    background: #fef2f2;
    border: 1px solid var(--color-danger-border);
    border-radius: 0.375rem;
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) .plot-export-panel__error { background: #450a0a; }
}
.dark .plot-export-panel__error { background: #450a0a; }

.plot-export-panel__actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-surface-border, #e5e3db);
}

.plot-export-panel__button {
    flex: 1;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    border: 1px solid var(--color-surface-border, #d1d5db);
    border-radius: 0.375rem;
    background: var(--color-surface, #fff);
    color: var(--color-content-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.plot-export-panel__button:hover:not(:disabled) {
    background: var(--color-surface);
    border-color: var(--color-content-faint);
}

.plot-export-panel__button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.plot-export-panel__button--accent {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-content-inverse);
}

.plot-export-panel__button--accent:hover:not(:disabled) {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

/* ─────────────────────────────────────────────────────────
   Satellite background: icon visibility enhancements
   Only active when SVG has .has-satellite (satellite layer visible)
   ───────────────────────────────────────────────────────── */

/* 1. Satellite/aerial brightness dimming removed — users control opacity via element settings */

/* 2. Landing pad removed — was a white circle behind glyphs for satellite contrast,
   but looked like a spacing ring on permanent plants. Hit area kept in botanical mode only. */

/* 3. Dark outline + white glow on plant icons over satellite — DISABLED (perf) */
/* svg.has-satellite .stage-icon {
    filter:
        drop-shadow(0 0 1.5px rgba(0,0,0,0.7))
        drop-shadow(0 0 3px rgba(255,255,255,0.6))
        drop-shadow(0 0 1px rgba(255,255,255,0.4));
} */

/* ==========================================================================
   Pot Inventory Panel — flyout content for the Pots tool
   ========================================================================== */

.pot-inventory-panel {
  min-width: 200px;
}

.pot-inventory-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--color-surface-alt);
  margin-bottom: 4px;
}

.pot-inventory-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-content-muted);
}

.pot-inventory-hint {
  font-size: 11px;
  color: var(--color-content-muted);
}

.pot-inventory-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.pot-inventory-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  cursor: grab;
  transition: background 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}

.pot-inventory-row:hover {
  background: var(--color-surface-alt);
}

.pot-inventory-row:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
  background: var(--color-surface-alt);
}

.pot-inventory-row:active {
  cursor: grabbing;
  background: #fef7ed;
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) .pot-inventory-row:active { background: #2a2318; }
}
.dark .pot-inventory-row:active { background: #2a2318; }

.pot-inventory-preview {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-surface-alt);
}

.pot-inventory-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pot-inventory-svg {
  width: 100%;
  height: 100%;
}

.pot-inventory-preview svg {
  width: 100%;
  height: 100%;
}

.pot-inventory-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.pot-inventory-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-content-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pot-inventory-size {
  font-size: 11px;
  color: var(--color-content-muted);
}

.pot-inventory-count {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: var(--color-content-muted);
  flex-shrink: 0;
  margin-left: auto;
}

.pot-count-placed {
  font-weight: 600;
  color: #5b8c5a;
}

.pot-count-sep {
  color: var(--color-content-faint);
}

.pot-count-total {
  color: var(--color-content-muted);
}

/* Section headings: "My pots", "Presets" */
.pot-inventory-section {
  padding: 8px 10px 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-content-muted);
}

.pot-inventory-empty {
  padding: 2px 10px 6px;
  font-size: 12px;
  color: var(--color-content-faint);
}

.pot-inventory-edit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 6px;
  color: var(--color-content-muted);
  cursor: pointer;
}

.pot-inventory-edit:hover,
.pot-inventory-edit:focus-visible {
  background: var(--color-surface-tint, #fff);
  color: var(--color-content-primary);
}

/* S / M / L size chips on presets (flyout and mobile tray) */
.pot-size-chips {
  display: flex;
  gap: 4px;
  margin-top: 3px;
}

.pot-size-chip {
  min-width: 26px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--color-surface-border, #e5e3db);
  border-radius: 6px;
  background: var(--color-surface-tint, #fff);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-content-muted);
  cursor: pointer;
}

.pot-size-chip:hover {
  border-color: var(--color-brand);
}

.pot-size-chip.is-active {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: #fff;
}

.tool-tray--mobile .pot-size-chip {
  min-width: 36px;
  min-height: 36px;
}

/* Preset tiles carry S / M / L chips: wide enough for three touch targets. */
.tool-tray--mobile .tool-tray__item--preset {
  min-width: 128px;
}

/* Mobile tray: pots section headings between the tiles */
.tool-tray__section {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: 64px;
  padding: 0 2px;
  user-select: none;
  -webkit-user-select: none;
}

.tool-tray__section-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-content-muted);
}

.tool-tray__section--note {
  max-width: 120px;
}

.tool-tray__section--note .tool-tray__section-label {
  font-weight: 400;
  color: var(--color-content-faint);
}

.tool-tray--mobile.is-expanded .tool-tray__section {
  grid-column: 1 / -1;
  max-width: none;
  padding-top: 4px;
}

.pot-inventory-add {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  margin-top: 4px;
  border-top: 1px solid var(--color-surface-alt);
  cursor: pointer;
  border-radius: 0 0 8px 8px;
  transition: background 0.15s ease;
}

.pot-inventory-add:hover {
  background: var(--color-surface-alt);
}

.pot-inventory-add:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
  background: var(--color-surface-alt);
}

.pot-add-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--color-surface-alt);
  color: var(--color-content-muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.pot-add-label {
  font-size: 12px;
  color: var(--color-content-muted);
}

.pot-inventory-manage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 10px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}

.pot-inventory-manage:hover {
  background: var(--color-surface-alt);
}

.pot-manage-label {
  font-size: 11px;
  color: var(--color-content-muted);
}

.pot-manage-icon {
  color: var(--color-content-muted);
}

/* ── Coaching Overlay ─────────────────────────────────────── */

.coaching-overlay {
    position: fixed;
    z-index: 45;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.coaching-overlay.is-visible {
    opacity: 1;
}

.coaching-overlay--empty-canvas {
    inset: 0;
    position: fixed;
    z-index: 45;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.coaching-overlay--plant-armed {
    left: 50%;
    transform: translateX(-50%);
    top: 80px;
}

/* A hint only: taps pass through to the garden (and the placement bar guard). */
.coaching-overlay--plant-armed,
.coaching-overlay--plant-armed .coaching-overlay__card {
    pointer-events: none;
}

/* Phone: a small chip just above the placement bar, no dimming. */
@media (max-width: 767px) {
    .coaching-overlay--plant-armed {
        top: auto;
        left: 0;
        right: 0;
        bottom: calc(160px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
        transform: none;
        display: flex;
        justify-content: center;
        padding: 0 1rem;
    }

    .coaching-overlay--plant-armed .coaching-overlay__card {
        display: flex;
        align-items: center;
        gap: 6px;
        max-width: 100%;
        padding: 8px 14px;
        border-radius: 999px;
    }

    .coaching-overlay--plant-armed .coaching-overlay__text {
        font-size: 13px;
        font-weight: 600;
        line-height: 1.3;
    }

    .coaching-overlay--plant-armed .coaching-overlay__arrow {
        margin-top: 0;
        color: var(--color-brand, #164825);
        flex-shrink: 0;
    }
}

@media (min-width: 768px) {
    .coaching-overlay--plant-armed .coaching-overlay__arrow--up {
        display: none;
    }
}

/* Satellite line-up coach: a small anchored card. Only the card takes pointer
   events, so the canvas and the photo layer controls stay usable around it.
   Desktop: left of the zoom controls (top/right set inline from JS).
   Mobile: a compact card above the bottom toolbar. */
.coaching-overlay--line-up {
    top: 72px;
    right: 16px;
    z-index: 45;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                right 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.coaching-overlay__card.line-up-coach {
    position: relative;
    width: 320px;
    max-width: calc(100vw - 32px);
    padding: 16px 18px 14px;
    text-align: left;
    box-shadow: 0 6px 24px rgba(22, 72, 37, 0.12), 0 1px 4px rgba(0, 0, 0, 0.06);
}

.line-up-coach__title {
    margin: 0 28px 4px 0;
    line-height: 1.25;
    text-wrap: balance;
}

.line-up-coach__text {
    margin: 0;
    font-size: 13px;
    text-wrap: pretty;
}

.line-up-coach__close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--color-content-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.line-up-coach__close:hover {
    background: var(--color-surface-alt);
    color: var(--color-content-primary);
}

.line-up-coach__tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 12px;
}

.line-up-coach__tool {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--color-surface-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-content-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.line-up-coach__tool svg {
    flex-shrink: 0;
    color: var(--color-brand, #164825);
}

.line-up-coach__tool span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-up-coach__tool:hover {
    border-color: var(--color-brand, #164825);
    background: var(--color-brand-light, #e8f2e5);
}

.line-up-coach__tool:active {
    transform: scale(0.97);
}

.line-up-coach__tool.is-active {
    border-color: var(--color-brand, #164825);
    background: var(--color-brand-light, #e8f2e5);
    color: var(--color-brand, #164825);
}

.line-up-coach__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.line-up-coach__steps {
    display: inline-flex;
    gap: 5px;
    margin-right: auto;
}

.line-up-coach__steps i {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--color-surface-border);
    transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease;
}

.line-up-coach__steps i.is-current {
    width: 16px;
    background: var(--color-brand, #164825);
}

.line-up-coach__next {
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid var(--color-brand, #164825);
    border-radius: var(--radius-md);
    background: var(--color-brand, #164825);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.line-up-coach__next:hover {
    background: var(--color-brand-hover);
}

.line-up-coach__next--end {
    margin-left: auto;
}

/* One-line aside under the body ("Plot too small? Drag its edges."). */
.line-up-coach__hint {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-content-secondary);
}

.line-up-coach__tools--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.line-up-coach__tools--one {
    grid-template-columns: minmax(0, 1fr);
}

/* Fade or Brighten photo, beside the primary button (trace and line-up steps). */
.line-up-coach__secondary {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-content-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.line-up-coach__secondary svg {
    flex-shrink: 0;
    color: var(--color-brand, #164825);
}

.line-up-coach__secondary:hover {
    border-color: var(--color-brand, #164825);
    background: var(--color-brand-light, #e8f2e5);
}

/* Where the photo controls live once the coach has gone. */
.line-up-coach__note {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-content-muted);
    text-wrap: pretty;
}

.line-up-coach button:focus-visible {
    outline: 2px solid var(--color-brand, #164825);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .coaching-overlay--line-up {
        top: auto !important;
        right: 12px !important;
        left: 12px;
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                    bottom 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* The beds tray replaces the FAB with a full-width bar; sit above it. */
    .coaching-overlay--line-up.is-raised {
        bottom: calc(150px + env(safe-area-inset-bottom, 0px));
    }

    .coaching-overlay__card.line-up-coach {
        width: auto;
        max-width: none;
        padding: 12px 12px 10px 14px;
    }

    .line-up-coach__title {
        font-size: 15px;
    }

    .line-up-coach__text {
        font-size: 12.5px;
        line-height: 1.45;
    }

    .line-up-coach__tools {
        margin-top: 10px;
    }

    .line-up-coach__footer {
        margin-top: 8px;
    }

    .line-up-coach__note {
        margin-top: 8px;
    }
}

/* Edit/View pill and Share sit left of the zoom panel with an 8 px gap. The
   panel's width follows the photo layer label (longer in German or Dutch), so
   --pd-nav-w is kept in sync from _mode_pill.html. */
@media (min-width: 768px) {
    #designer-mode-pill {
        right: calc(1rem + var(--pd-nav-w, 5rem) + 0.5rem);
    }
}

/* Mobile top bar (below 768px, Tailwind's md breakpoint, where the desktop
   tools sidebar takes over the top left corner): the Edit/View pill sits top
   left, level with the icon cluster on the right. At exactly 768px the pill
   keeps its tablet place beside the cluster, as before.
   Its right edge stops 6px short of the cluster (--pd-nav-w), so a long
   translation shortens with an ellipsis instead of sliding under the icons.
   Sized so German fits at 360px in edit mode with a photo layer.
   Buttons size to their label, so the active one is filled directly rather
   than by the half-width slider. */
@media (max-width: 767.98px) {
    #designer-mode-pill {
        top: 12px;
        left: 8px;
        right: calc(8px + var(--pd-nav-w, 7rem) + 6px);
    }

    div.canvas-navigation-controls {
        right: 8px !important;
    }

    .canvas-navigation-controls .zoom-controls {
        padding: 3px !important;
    }

    #designer-mode-pill .designer-mode-pill__desktop {
        display: none !important;
    }

    /* Saving/Saved flash drops below the pill instead of pushing it right. */
    #designer-mode-pill .designer-mode-pill__saving {
        position: absolute;
        top: calc(100% + 4px);
        left: 4px;
        margin: 0;
    }

    #designer-mode-pill .mode-pill-toggle {
        min-width: 0;
        max-width: 100%;
        padding: 3px;
        gap: 2px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    }

    #designer-mode-pill .mode-pill-toggle__slider {
        display: none;
    }

    #designer-mode-pill .mode-pill-toggle__btn {
        min-width: 44px;
        min-height: 44px;
        padding: 0 6px;
        font-size: 12px;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-radius: 0.375rem;
        transition: background-color 0.2s ease-out, color 0.2s ease-out;
    }

    #designer-mode-pill .mode-pill-toggle__btn[aria-selected="true"] {
        background: var(--color-success);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    }

    /* Icon cluster: [globe | chevron] gear more. The globe split button's
       border stays inside the 44px row so the cluster matches the pill height. */
    .canvas-navigation-controls .zoom-controls > div.mobile-photo-layer {
        min-width: 0 !important;
        padding: 0 !important;
        margin: -1px 2px -1px 0;
    }

    .zoom-controls .mobile-more {
        display: flex !important;
    }
}

/* Mobile more menu rows: icon + label, 44px tall. */
.pd-more-menu__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 6px 12px;
    border-radius: 0.375rem;
    text-align: left;
    color: var(--color-content-secondary);
    line-height: 1.3;
    transition: background-color 0.15s ease-out;
}

.pd-more-menu__item:hover,
.pd-more-menu__item:focus-visible {
    background: var(--color-surface-alt);
    color: var(--color-content-primary);
}

.pd-more-menu__item:disabled {
    opacity: 0.6;
    cursor: wait;
}

.pd-more-menu__item > svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.pd-more-menu__item > span {
    flex: 1 1 auto;
    min-width: 0;
}

.pd-more-menu__item > svg.pd-more-menu__external {
    width: 14px;
    height: 14px;
    color: var(--color-content-muted);
}

/* Photo layer button: Bright (solid), Faded (tinted), Off (neutral, slashed). */
.photo-layer-btn {
    color: var(--color-content-secondary);
}

.photo-layer-btn[data-mode="off"]:hover {
    background: var(--color-surface-alt);
}

.photo-layer-btn[data-mode="bright"] {
    background: #0284c7; /* sky-600, satellite */
    color: #fff;
}

.photo-layer-btn[data-mode="bright"][data-source="aerial"] {
    background: #059669; /* emerald-600, aerial */
}

.photo-layer-btn[data-mode="faded"] {
    background: color-mix(in srgb, #0284c7 14%, transparent);
    color: #075985;
}

.photo-layer-btn[data-mode="faded"][data-source="aerial"] {
    background: color-mix(in srgb, #059669 14%, transparent);
    color: #065f46;
}

/* After the satellite coach closes: one ring that grows off the photo layer
   button, so the user sees where the photo controls live. */
.photo-layer-pulse {
    position: relative;
    animation: photoLayerPulse 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes photoLayerPulse {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, #0284c7 55%, transparent);
    }
    100% {
        box-shadow: 0 0 0 12px color-mix(in srgb, #0284c7 0%, transparent);
    }
}

/* Photo layer menu (desktop) and toolbar (mobile). */
.sat-settings-menu {
    width: 248px;
}

.sat-toolbar {
    width: 264px;
}

/* Rotate only, opened from the coach on a phone: a short strip that leaves
   the photo visible above it. */
.sat-toolbar--rotate-only {
    width: min(320px, 95vw);
    padding: 10px 12px;
}

.sat-toolbar--rotate-only .sat-toolbar__sliders {
    border-top: 0;
    padding-top: 0;
}

.sat-toolbar__done {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

.sat-toolbar__done-btn {
    min-height: 44px;
    padding: 0 20px;
    border: 1px solid var(--color-brand, #164825);
    border-radius: var(--radius-md);
    background: var(--color-brand, #164825);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.sat-toolbar__done-btn:hover {
    background: var(--color-brand-hover);
}

/* Rotation: -1° | slider centred on 0 | +1° */
.sat-rotate__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 2px;
}

.sat-rotate__value {
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-content-primary);
}

.sat-rotate {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 4px;
}

.sat-rotate__nudge {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 10px;
    background: none;
    color: var(--color-content-secondary);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sat-rotate__nudge:hover {
    background: var(--color-surface-alt);
    color: var(--color-content-primary);
}

.sat-rotate__nudge:active {
    border-color: var(--color-surface-border);
}

.sat-rotate__nudge:focus-visible {
    outline: 2px solid var(--color-brand, #164825);
    outline-offset: 2px;
}

/* A faint tick under the middle of the slider marks 0°. */
.sat-rotate__track {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 44px;
}

.sat-rotate__track::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(50% + 7px);
    width: 1px;
    height: 5px;
    background: var(--color-content-faint, #9ca3af);
    transform: translateX(-0.5px);
    pointer-events: none;
}

/* Briefly mark the slider the coach pointed at (Rotate or Fade). */
.sat-control {
    border-radius: 8px;
}

.sat-control--coached {
    animation: satControlCoached 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes satControlCoached {
    0%, 35% {
        background: var(--color-brand-light, #e8f2e5);
        box-shadow: 0 0 0 4px var(--color-brand-light, #e8f2e5);
    }
    100% {
        background: transparent;
        box-shadow: 0 0 0 4px transparent;
    }
}

.coaching-overlay--confirm {
    inset: 0;
    pointer-events: auto;
    background: var(--color-surface-overlay);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 80px;
    z-index: 45;
}

.coaching-overlay--view-mode {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(22, 72, 37, 0.06);
    backdrop-filter: blur(2px);
    pointer-events: auto;
}

.coaching-overlay__card {
    background: var(--color-surface-tint);
    border: 1px solid var(--color-surface-border);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06);
    padding: 16px 20px;
    max-width: 300px;
    text-align: center;
    pointer-events: auto;
}

.coaching-overlay__card--celebration {
    max-width: 340px;
    padding: 28px 32px;
    border-color: var(--color-brand, #164825);
    background: linear-gradient(
        165deg,
        var(--color-surface-tint, #fcfbf8) 0%,
        var(--color-brand-light, #e8f2e5) 100%
    );
    box-shadow: 0 8px 32px rgba(22, 72, 37, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
}

.coaching-overlay__card--celebration .coaching-overlay__emoji {
    font-size: 32px;
    margin-bottom: 8px;
    display: block;
    animation: coachingSprout 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.2s;
}

.coaching-overlay__card--celebration .coaching-overlay__title {
    font-size: 22px;
    margin-bottom: 8px;
    color: var(--color-brand, #164825);
}

.coaching-overlay__card--celebration .coaching-overlay__text {
    font-size: 14px;
    color: var(--color-content-secondary, #4b5563);
}

.coaching-overlay__view-btn {
    display: inline-block;
    margin-top: 14px;
    padding: 10px 24px;
    background: var(--color-brand, #164825);
    color: white;
    border: none;
    cursor: pointer;
    font-family: inherit;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(22, 72, 37, 0.25);
}

.coaching-overlay__view-btn:hover {
    background: var(--color-brand-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(22, 72, 37, 0.3);
}

.coaching-overlay__card--welcome {
    border-color: var(--color-brand, #164825);
    padding: 20px 24px 16px;
    max-width: 420px;
    width: calc(100vw - 48px);
}

.coaching-overlay__welcome-img {
    width: 120px;
    height: auto;
    margin: 0 auto 10px;
}

.coaching-overlay__step2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Where the other things to add are: plain text, not a button. */
.coaching-overlay__step2-pointer-text {
    font-size: var(--font-size-sm, 13px);
    color: var(--color-content-muted);
    line-height: 1.3;
}

.coaching-overlay__actions--step2 {
    margin-top: 4px;
}

.coaching-overlay__secondary-btn {
    width: 100%;
    padding: 10px 18px;
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-tint);
    color: var(--color-content-primary);
    font-weight: 600;
    cursor: pointer;
}

.coaching-overlay__secondary-btn:hover {
    border-color: var(--color-brand, #164825);
}

.coaching-overlay__back-btn {
    background: none;
    border: none;
    color: var(--color-content-muted);
    font-size: var(--font-size-sm, 13px);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.15s;
    align-self: center;
}

.coaching-overlay__back-btn:hover {
    color: var(--color-content-primary);
}

.coaching-overlay__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    color: var(--color-content-faint);
}

.coaching-overlay__title {
    font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    font-size: var(--font-size-lg, 16px);
    font-weight: 600;
    color: var(--color-content-primary);
    margin-bottom: 6px;
}

.coaching-overlay__text {
    font-size: var(--font-size-sm, 12px);
    color: var(--color-content-secondary);
    line-height: 1.5;
}

.coaching-overlay__actions {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.coaching-overlay__primary-btn,
.coaching-overlay__satellite-btn {
    width: 100%;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
}

.coaching-overlay__primary-btn {
    padding: 11px 18px;
    border: 1px solid var(--color-brand, #164825);
    background: var(--color-brand, #164825);
    color: #fff;
}

.coaching-overlay__primary-btn:hover {
    background: var(--color-brand-hover);
}

.coaching-overlay__satellite-btn {
    display: grid;
    gap: 2px;
    padding: 9px 14px;
    border: 1px solid var(--color-surface-border);
    background: var(--color-surface-tint);
    color: var(--color-content-primary);
}

.coaching-overlay__satellite-btn:hover {
    border-color: var(--color-brand, #164825);
}

.coaching-overlay__satellite-btn small {
    color: var(--color-content-muted);
    font-size: 11px;
    font-weight: 400;
}

.coaching-overlay__guide-text {
    margin-top: 8px;
    font-size: 11px;
    color: var(--color-content-muted);
}

.coaching-overlay__guide-link {
    color: var(--color-brand-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.coaching-overlay__guide-link:hover {
    color: var(--color-brand-hover);
}

.coaching-overlay__arrow {
    display: inline-block;
    color: var(--color-content-muted);
    margin-top: 8px;
    animation: coachingArrowBounce 1.2s ease-in-out infinite;
}

/* The SVG itself points up; the bounce must not carry a rotation, since an
   animated transform replaces any static one. */
.coaching-overlay__arrow--up {
    animation-name: coachingArrowBounceUp;
}

.coaching-overlay__arrow--right {
    animation: coachingArrowBounceRight 1.2s ease-in-out infinite;
}

.coaching-overlay__caret {
    position: absolute;
    top: -6px;
    right: 20px;
    width: 12px;
    height: 12px;
    background: var(--color-surface-tint);
    border-left: 1px solid var(--color-surface-border);
    border-top: 1px solid var(--color-surface-border);
    transform: rotate(45deg);
}

.coaching-overlay__view-ring {
    box-shadow: 0 0 0 3px var(--color-brand-light, #e8f2e5), 0 0 8px rgba(22, 72, 37, 0.2);
    border-radius: var(--radius-md);
}

@keyframes coachingArrowBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

@keyframes coachingArrowBounceUp {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes coachingArrowBounceRight {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6px); }
}

@keyframes coachingArrowBounceLeft {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-6px); }
}

@keyframes coachingSprout {
    0% { transform: scale(0.5) rotate(-20deg); opacity: 0; }
    60% { transform: scale(1.15) rotate(5deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .coaching-overlay {
        transition: opacity 0.01ms !important;
    }
    .coaching-overlay__arrow {
        animation: none !important;
    }
    .coaching-overlay__card--celebration .coaching-overlay__emoji {
        animation: none !important;
    }
    .coaching-overlay--view-mode {
        backdrop-filter: none;
    }
    .line-up-coach__steps i,
    .line-up-coach__tool,
    .line-up-coach__secondary,
    .sat-rotate__nudge {
        transition: none;
    }
    /* No growing ring: a still outline for as long as the pulse would run. */
    .photo-layer-pulse {
        animation: none;
        outline: 2px solid #0284c7;
        outline-offset: 2px;
    }
    .sat-control--coached {
        animation-duration: 0.01ms;
        background: var(--color-brand-light, #e8f2e5);
    }
}

/* ─── Polygon Draw Bar ─── */
.polygon-draw-bar {
    position: fixed;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-surface, #fff);
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-surface-border, #e5e7eb);
}

.polygon-draw-bar__hint {
    font-size: 0.8125rem;
    color: var(--color-content-secondary, #6b7280);
    white-space: nowrap;
}

.polygon-draw-bar__actions {
    display: flex;
    gap: 0.375rem;
}

.polygon-draw-bar__btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0.25rem;
    border: 1px solid var(--color-surface-border, #d1d5db);
    cursor: pointer;
    white-space: nowrap;
}

.polygon-draw-bar__btn--secondary {
    background: var(--color-surface, #fff);
    color: var(--color-content-primary, #374151);
}

.polygon-draw-bar__btn--secondary:hover {
    background: var(--color-surface-alt, #f3f4f6);
}

.polygon-draw-bar__btn--primary {
    background: var(--color-brand, #16a34a);
    color: var(--color-content-inverse);
    border-color: var(--color-brand, #16a34a);
}

.polygon-draw-bar__btn--primary:hover {
    background: var(--color-brand-hover, #15803d);
}

.polygon-draw-bar__btn--primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Polygon vertex editing handles */
.polygon-vertex-handles [data-vertex-idx],
.polygon-vertex-handles [data-midpoint-after] {
    touch-action: none;
}

/* Mobile: compact bar pinned to bottom */
@media (max-width: 767px) {
    .polygon-draw-bar {
        bottom: 1rem;
        left: 0.75rem;
        right: 0.75rem;
        transform: none;
        flex-direction: column;
        gap: 0.375rem;
        padding: 0.5rem 0.75rem;
        border-radius: 0.75rem;
    }

    .polygon-draw-bar__hint {
        font-size: 0.6875rem;
        white-space: normal;
        text-align: center;
    }

    .polygon-draw-bar__actions {
        width: 100%;
        justify-content: center;
        gap: 0.5rem;
    }

    .polygon-draw-bar__btn {
        flex: 1;
        padding: 0.5rem 0.25rem;
        font-size: 0.75rem;
        text-align: center;
    }
}

/* Pending placement ghost stamp */
[data-kind="placement-pending"] {
    opacity: 0.7;
    pointer-events: none;
}
[data-kind="placement-pending"].pulsing {
    animation: pending-pulse 1.2s ease-in-out infinite;
}
[data-kind="placement-pending"] .pending-spinner {
    transform-box: fill-box;
    transform-origin: center center;
    animation: pending-spin 0.8s linear infinite;
}
@keyframes pending-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 0.45; }
}
@keyframes pending-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    [data-kind="placement-pending"].pulsing { animation: none; }
    [data-kind="placement-pending"] .pending-spinner { animation: none; opacity: 0.6; }
}
/* Stepper rotation: the corrected plot is already present underneath while
   the browser-captured previous frame dissolves away. */
html.pd-stepper-view-transition::view-transition-old(root),
html.pd-stepper-view-transition::view-transition-new(root) {
    animation: none;
}

html.pd-stepper-view-transition::view-transition-new(plot-rotation) {
    animation: pd-stepper-dissolve-in 500ms cubic-bezier(0.77, 0, 0.175, 1) both;
}

html.pd-stepper-view-transition::view-transition-old(plot-rotation),
html.pd-stepper-view-transition::view-transition-new(plot-rotation) {
    mix-blend-mode: plus-lighter;
}

html.pd-stepper-view-transition::view-transition-old(plot-rotation) {
    animation: pd-stepper-dissolve-out 500ms cubic-bezier(0.77, 0, 0.175, 1) both;
}

@keyframes pd-stepper-dissolve-in {
    from { opacity: 0; }
}

@keyframes pd-stepper-dissolve-out {
    to { opacity: 0; }
}

/* ── Mobile desktop-tip card ───────────────────────────────────────────── */
.desktop-tip {
    position: fixed;
    bottom: calc(12px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
    left: 12px;
    max-width: min(260px, calc(100vw - 76px));
    z-index: 50; /* above canvas and compass (40), below FAB */
    flex-direction: column-reverse; /* expanded panel grows upward */
    align-items: stretch;
    gap: 6px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* ponytail: display:flex scoped to mobile so md:hidden (display:none in @media >=768px) wins on desktop */
@media (max-width: 767px) {
    .desktop-tip {
        display: flex;
    }
}

.desktop-tip.is-hidden {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}

.desktop-tip__collapsed {
    display: flex;
    align-items: center;
    background: var(--color-surface-tint);
    border: 1px solid var(--color-surface-border);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.desktop-tip__card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    text-align: left;
    color: var(--color-content-primary);
    font-size: 0.8125rem;
    line-height: 1.3;
    background: transparent;
    border: none;
    transition: background 0.1s ease;
}

.desktop-tip__card:active {
    background: var(--color-surface-alt);
}

.desktop-tip__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.desktop-tip__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.desktop-tip__title {
    font-weight: 500;
}

.desktop-tip__subtitle {
    font-size: 0.75rem;
    color: var(--color-content-secondary);
}

.desktop-tip__dismiss {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
    color: var(--color-content-secondary);
    background: transparent;
    border: none;
    border-left: 1px solid var(--color-surface-border);
    cursor: pointer;
    padding: 0;
}

.desktop-tip__dismiss:active {
    color: var(--color-content-primary);
}

#desktop-tip-details {
    background: var(--color-surface-tint);
    border: 1px solid var(--color-surface-border);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    padding: 14px;
    color: var(--color-content-primary);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.desktop-tip__details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.desktop-tip__details-header .desktop-tip__dismiss {
    min-width: 32px;
    min-height: 32px;
    margin: -4px -4px 0 0;
    border-left: none;
}

.desktop-tip__heading {
    font-weight: 600;
    font-size: 0.875rem;
    margin: 0 0 6px;
}

.desktop-tip__body {
    color: var(--color-content-secondary);
    margin: 0 0 10px;
}

.desktop-tip__cta {
    font-weight: 500;
    color: var(--color-brand-500);
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .desktop-tip {
        transition: none;
    }
}