/**
 * Plantlyzer design system.
 * Adapted from the Next.js app: Material green palette, Plus Jakarta Sans
 * headings, Inter body — reorganized for standard WordPress layouts.
 */

:root {
        /* Plant green palette (Material) */
        --plz-50: #f1f8e9;
        --plz-100: #dcedc8;
        --plz-200: #c5e1a5;
        --plz-300: #aed581;
        --plz-400: #9ccc65;
        --plz-500: #4caf50;
        --plz-600: #43a047;
        --plz-700: #2e7d32;
        --plz-800: #1b5e20;
        --plz-900: #0f3d12;

        /* v1.7.25: light forest green reserved for page titles (h1) */
        --plz-title: #4c9a2a;

        /* v1.7.44: classic forest green for the sidebar link titles */
        --plz-forest: #228b22;

        /* Sky palette */
        --sky-100: #e0f2fe;
        --sky-500: #0ea5e9;
        --sky-600: #0284c7;
        --sky-700: #0369a1;

        /* Orange palette */
        --orange-100: #ffedd5;
        --orange-500: #f97316;
        --orange-600: #ea580c;
        --orange-700: #c2410c;

        --red-100: #fee2e2;
        --red-600: #dc2626;
        --amber-100: #fef3c7;
        --amber-700: #b45309;
        --violet-100: #ede9fe;
        --violet-600: #7c3aed;

        --background: #ffffff;
        --foreground: #212121;
        --muted: #f5f5f5;
        /* v1.7.25: was #757575 — every muted/grey text on the site (body copy,
           card meta, labels, hints) now renders black, matching --foreground */
        --muted-fg: #212121;
        --card: #ffffff;
        --border: #e0e0e0;
        --ring: #2e7d32;
        --destructive: #d32f2f;

        --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
        --font-heading: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

        --radius: 0.75rem;
        --radius-lg: 1rem;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
        --shadow: 0 4px 16px rgba(27, 94, 32, 0.08);
        --shadow-lg: 0 12px 32px rgba(27, 94, 32, 0.14);
        --container: 1200px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { font-size: 93.75%; overflow-x: hidden; scroll-behavior: smooth; } /* 15px root — every rem font/spacing on the site scales down uniformly */
/* Bulwark: the hidden attribute must ALWAYS win over display rules below
   (userchip menu, auth modal, AI widget, previews, tab panes, gates...). */
[hidden] { display: none !important; }
body.plz-app {
        margin: 0;
        background: var(--background);
        color: var(--foreground);
        font-family: var(--font-body);
        font-size: 15px;
        line-height: 1.6;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-heading);
        letter-spacing: -0.01em;
        line-height: 1.25;
        margin: 0 0 0.5em;
}
/* v1.7.25: every page title (h1) wears light forest green */
h1 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; color: var(--plz-title); }
h2 { font-size: clamp(1.25rem, 2.7vw, 1.65rem); font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--plz-700); text-decoration: none; }
a:hover { text-decoration: none; }
img { max-width: 100%; height: auto; }
.plz-muted { color: var(--muted-fg); }
.plz-center { text-align: center; }
code { background: var(--muted); padding: 2px 6px; border-radius: 6px; font-size: 0.9em; }

.plz-container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.plz-container--narrow { max-width: 780px; }
.plz-container--tool { max-width: 860px; }
/* v1.7.46: inside the member shell every container page adopts the
   Dashboard geometry — 1080px centered, no extra inner side padding —
   so the left/right padding matches the Dashboard page on every tool
   and content page (they carried a wider 1200px container plus their
   own 20px inner padding, which read as different side padding). */
.plz-appmain .plz-container { max-width: 1080px; padding: 0; }

/* ---------- Buttons ---------- */
.plz-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 18px;
        border-radius: 999px;
        border: 2px solid transparent;
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 0.95rem;
        cursor: pointer;
        transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
        text-decoration: none;
        line-height: 1.2;
        /* v1.7.35: button labels never wrap — a squeezed flex/grid track used to
           break "Sign up" onto two lines inside the pill (header, small phones). */
        white-space: nowrap;
}
.plz-btn:hover { transform: translateY(-1px); }
.plz-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.plz-btn--primary { background: linear-gradient(135deg, var(--plz-500), var(--plz-700)); color: #fff; box-shadow: var(--shadow); }
.plz-btn--primary:hover { color: #fff; box-shadow: var(--shadow-lg); }
.plz-btn--outline { background: transparent; border-color: var(--plz-600); color: var(--plz-700); }
.plz-btn--outline:hover { background: var(--plz-50); }
.plz-btn--ghost { background: transparent; color: var(--foreground); border-color: var(--border); }
.plz-btn--ghost:hover { background: var(--muted); }
/* Header auth buttons: Sign in is an outlined pill, Sign up / Dashboard are solid forest green */
.plz-btn--signin { background: #fff; border-color: var(--plz-600); color: var(--plz-700); }
.plz-btn--signin:hover { background: var(--plz-800); border-color: var(--plz-800); color: #fff; }
.plz-btn--forest { background: var(--plz-800); border-color: var(--plz-800); color: #fff; }
.plz-btn--forest:hover { background: var(--plz-900); color: #fff; }
.plz-btn--light { background: #fff; color: var(--plz-800); }
.plz-btn--light:hover { box-shadow: var(--shadow-lg); }
/* Outlined white button for use on dark green surfaces (home CTA band) */
.plz-btn--outline-light { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.75); color: #fff; }
.plz-btn--outline-light:hover { background: rgba(255, 255, 255, 0.24); color: #fff; }
.plz-btn--sm { padding: 8px 16px; font-size: 0.85rem; }
.plz-btn--lg { padding: 13px 26px; font-size: 1rem; }
.plz-btn--block { width: 100%; }
.plz-linklike { background: none; border: 0; color: var(--plz-700); font-weight: 600; cursor: pointer; padding: 0; font-size: 0.9rem; }
.plz-linklike:hover { text-decoration: underline; }

/* ---------- Badges, pills, chips ---------- */
.plz-badge, .plz-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 12px;
        border-radius: 999px;
        font-size: 0.78rem;
        font-weight: 700;
        font-family: var(--font-heading);
}
.plz-pill { padding: 8px 18px; font-size: 0.85rem; background: #fff; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
.plz-pill--soft { background: var(--plz-50); border-color: var(--plz-100); color: var(--plz-700); }
.plz-badge--plant { background: var(--plz-100); color: var(--plz-800); }
.plz-badge--sky { background: var(--sky-100); color: var(--sky-700); }
.plz-badge--amber { background: var(--amber-100); color: var(--amber-700); }
.plz-badge--orange { background: var(--orange-100); color: var(--orange-700); }
.plz-badge--red { background: var(--red-100); color: var(--red-600); }
.plz-badge--iron { background: #eeeeee; color: #616161; }
.plz-badge--copper { background: var(--orange-100); color: var(--orange-700); }
.plz-badge--bronze { background: #fde8d0; color: #8a5a24; }
.plz-badge--silver { background: #e8eef3; color: #4b6584; }
.plz-badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.plz-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.plz-chip {
        border: 1.5px solid var(--border);
        background: #fff;
        border-radius: 999px;
        padding: 8px 16px;
        font-family: var(--font-heading);
        font-weight: 600;
        font-size: 0.85rem;
        cursor: pointer;
        transition: all 0.15s;
}
.plz-chip:hover { border-color: var(--plz-500); color: var(--plz-700); }
.plz-chip.is-active { background: var(--plz-600); border-color: var(--plz-600); color: #fff; }
.plz-chips__label { align-self: center; font-family: var(--font-heading); font-weight: 700; font-size: 0.92rem; color: var(--plz-800); margin-right: 2px; }

/* Colorful category chips — 8-color palette, deterministic per category name
   (plantlyzer_chip_color_class()); the same category keeps the same color on
   every surface (archive chips, card badges, detail badges). */
.plz-chip--c1 { background: #fdeef2; border: 1.5px solid #f9cddb; color: #c2255c; }
.plz-chip--c1:hover, .plz-chip--c1.is-active { background: #d6336c; border-color: #d6336c; color: #fff; }
.plz-chip--c2 { background: #fff1e5; border: 1.5px solid #ffd9b8; color: #d9480f; }
.plz-chip--c2:hover, .plz-chip--c2.is-active { background: #e8590c; border-color: #e8590c; color: #fff; }
.plz-chip--c3 { background: #fff9db; border: 1.5px solid #f3e29b; color: #946c00; }
.plz-chip--c3:hover, .plz-chip--c3.is-active { background: #f08c00; border-color: #f08c00; color: #fff; }
.plz-chip--c4 { background: #ebfbee; border: 1.5px solid #b9e9c9; color: #2b8a3e; }
.plz-chip--c4:hover, .plz-chip--c4.is-active { background: #2f9e44; border-color: #2f9e44; color: #fff; }
.plz-chip--c5 { background: #e6fcf5; border: 1.5px solid #abe8d6; color: #0b7285; }
.plz-chip--c5:hover, .plz-chip--c5.is-active { background: #0ca678; border-color: #0ca678; color: #fff; }
.plz-chip--c6 { background: #e7f5ff; border: 1.5px solid #b8dcf7; color: #1971c2; }
.plz-chip--c6:hover, .plz-chip--c6.is-active { background: #1c7ed6; border-color: #1c7ed6; color: #fff; }
.plz-chip--c7 { background: #f3f0ff; border: 1.5px solid #d5cdf5; color: #6741d9; }
.plz-chip--c7:hover, .plz-chip--c7.is-active { background: #7048e8; border-color: #7048e8; color: #fff; }
.plz-chip--c8 { background: #f4fce3; border: 1.5px solid #d3ec9a; color: #5c8a00; }
.plz-chip--c8:hover, .plz-chip--c8.is-active { background: #74b816; border-color: #74b816; color: #fff; }

/* ---------- Header (public) ---------- */
.plz-header {
        position: sticky;
        top: 0;
        z-index: 50;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--border);
}
.plz-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px; min-height: 68px; }
.plz-logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: 800; font-size: 1.25rem; color: var(--plz-800); }
/* v1.7.35: max-width clamp — a huge Customizer logo can no longer eat the
   whole header row and push the Login/Sign up buttons off-screen. */
.plz-logo img { max-height: 44px; max-width: 30vw; width: auto; }
/* Menu truly centred between the logo and the auth buttons (1fr auto 1fr).
   v1.7.35: min-width:0 lets the track shrink instead of overflowing. */
.plz-nav { margin: 0; justify-self: center; min-width: 0; }
/* Desktop: breathing room between the menu links (was gap:2px + 5px link
   padding, which packed all eight links into one dense strip). */
/* v1.7.35: flex-wrap — if a long custom menu cannot fit one line, it wraps
   inside its own track; the Login/Sign up buttons are never pushed out. */
.plz-nav__list { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0; padding: 0; }
.plz-nav__list a {
        display: block;
        padding: 8px 10px;
        border-radius: 8px;
        color: var(--foreground);
        font-weight: 500;
        font-size: 0.92rem;
        text-align: center;
}
.plz-nav__list a:hover { background: var(--plz-800); color: #fff; }
.plz-header__actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
/* Sign in on the left, Sign up on the right — one row, clearly separated */
.plz-header__actions .plz-auth-guest { display: inline-flex; align-items: center; gap: 8px; }
/* v1.7.35: the header auth row and its two buttons keep their intrinsic
   width — the flex track can no longer crush them into wrapped, clipped
   pills — and they are ALWAYS displayed while rendered (PHP only prints
   them for logged-out visitors; no breakpoint or plugin CSS may hide them). */
.plz-header__actions { display: flex !important; }
.plz-header__actions .plz-auth-guest { display: inline-flex !important; }
.plz-header__actions .plz-btn { flex: none; }
.plz-header__signin, .plz-header__signup { display: inline-flex !important; visibility: visible !important; }
.plz-burger { display: none; background: none; border: 0; font-size: 1.4rem; cursor: pointer; }
/* v1.7.42: per-link icons live ONLY in the mobile dropdown (span.plz-nav__ico
   is prepended by app.js); the base rule keeps them invisible on desktop. */
.plz-nav__list .plz-nav__ico { display: none; }

/* ---------- Hero ---------- */
.plz-hero { padding: 26px 0 24px; background:
        radial-gradient(1000px 400px at 85% -10%, var(--plz-100) 0%, transparent 60%),
        radial-gradient(800px 400px at -10% 110%, var(--plz-50) 0%, transparent 60%),
        #fff;
}
.plz-hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.plz-hero__title { font-size: clamp(1.9rem, 4.2vw, 2.9rem); margin-bottom: 14px; }
/* Two fixed hero lines: "Know your plants" / "and grow with confidence" */
.plz-hero__line { display: block; }
.plz-hero__line--accent { color: var(--plz-600); background: linear-gradient(transparent 62%, var(--plz-100) 0); }
.plz-hero__sub { font-size: 1.05rem; color: var(--muted-fg); max-width: 34em; }
.plz-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; }
.plz-hero__stats { display: flex; flex-wrap: wrap; gap: 28px; list-style: none; padding: 0; margin: 20px 0 0; }
.plz-hero__stats strong { display: block; font-family: var(--font-heading); font-size: 1.4rem; color: var(--plz-700); }
.plz-hero__stats span { color: var(--muted-fg); font-size: 0.85rem; }

.plz-hero__art { position: relative; min-height: 340px; }
.plz-hero__card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.plz-hero__card--main { position: absolute; inset: 0 40px 40px 0; overflow: hidden; }
.plz-hero__img { position: absolute; inset: 0; background-size: cover; background-position: center; background-image: url("../img/hero-plants.png"); }
.plz-hero__card--float1, .plz-hero__card--float2 {
        position: absolute;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        font-size: 1.4rem;
        animation: plz-float 5s ease-in-out infinite;
}
.plz-hero__card--float1 { top: -18px; left: 0; }
.plz-hero__card--float2 { bottom: 8px; right: 0; animation-delay: -2.5s; }
.plz-hero__card--float1 div, .plz-hero__card--float2 div { font-size: 0.85rem; line-height: 1.3; }
.plz-hero__card--float1 strong, .plz-hero__card--float2 strong { display: block; font-size: 0.95rem; }
.plz-hero__card--float1 span, .plz-hero__card--float2 span { color: var(--muted-fg); }
@keyframes plz-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- Sections ---------- */
.plz-main, .plz-appmain { min-height: 60vh; }
/* v1.7.42: the FIRST section after the header lost its extra top padding —
   "too much padding between header menu and page hero title" on every page
   (public .plz-main AND the member app shell .plz-appmain). 38px → 20px.
   Sections further down the page keep the 38px rhythm. */
.plz-main > .plz-section:first-child, .plz-appmain > .plz-section:first-child { padding-top: 20px; }
.plz-section { padding: 38px 0 22px; }
.plz-section--tint { background: linear-gradient(180deg, var(--plz-50), #fff); }
.plz-section--flush { padding-top: 26px; }
.plz-section--snug { padding-top: 20px; padding-bottom: 20px; }
.plz-section__head { text-align: center; max-width: 640px; margin: 0 auto 24px; }
/* Emoji leading the archive/blog page titles (care guides, insect guides, blog). */
.plz-h1icon { margin-right: 8px; }
.plz-section__head--row { display: flex; justify-content: space-between; align-items: flex-end; text-align: left; max-width: none; }

/* ---------- Grids & cards ---------- */
.plz-grid { display: grid; gap: 20px; }
.plz-grid--2 { grid-template-columns: repeat(2, 1fr); }
.plz-grid--3 { grid-template-columns: repeat(3, 1fr); }
.plz-grid--4 { grid-template-columns: repeat(4, 1fr); }
.plz-card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 24px;
        box-shadow: var(--shadow-sm);
        transition: box-shadow 0.2s, transform 0.2s;
}
a.plz-card { display: block; color: inherit; }
.plz-card:hover { box-shadow: var(--shadow); }
.plz-minicard { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 16px 12px; border: 1.5px dashed var(--border); border-radius: var(--radius-lg); color: inherit; transition: all 0.15s; }
.plz-minicard span { font-size: 1.35rem; }
.plz-minicard:hover { border-color: var(--plz-500); background: var(--plz-50); transform: translateY(-2px); }

/* Action cards on home */
.plz-action { position: relative; padding: 28px 24px; }
/* Icon + title share one row, description sits below the row */
.plz-action__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.plz-action__head h3 { margin: 0; }
.plz-action__icon { font-size: 2rem; display: block; line-height: 1; }
.plz-card--plant { border-top: 4px solid var(--plz-500); }
.plz-card--sky { border-top: 4px solid var(--sky-500); }
.plz-card--orange { border-top: 4px solid var(--orange-500); }
.plz-card--violet { border-top: 4px solid var(--violet-600); }

/* Features — icon left, text right */
.plz-feature { display: flex; align-items: flex-start; gap: 14px; }
.plz-feature__icon { font-size: 1.9rem; display: block; flex-shrink: 0; line-height: 1.3; }
.plz-feature__body { flex: 1; min-width: 0; }
.plz-feature__body h3 { margin-bottom: 4px; }
.plz-feature__body p { margin-bottom: 0; }

/* Steps */
.plz-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.plz-steps li { text-align: center; background: var(--plz-50); border: 1px solid var(--plz-100); border-radius: var(--radius-lg); padding: 26px 18px 22px; }
.plz-steps li span { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--plz-500), var(--plz-700)); color: #fff; font-family: var(--font-heading); font-weight: 800; font-size: 1.2rem; margin-bottom: 14px; }
.plz-steps--vertical { list-style: none; padding: 0; }
.plz-steps--vertical li { display: flex; gap: 14px; text-align: left; align-items: flex-start; background: transparent; border: 0; border-radius: 0; padding: 0; }
.plz-steps--vertical li span { margin-bottom: 0; flex-shrink: 0; width: 32px; height: 32px; font-size: 0.9rem; }

/* ---------- Plans ---------- */
.plz-plan { position: relative; display: flex; flex-direction: column; }
.plz-plan--popular { border-color: var(--plz-500); box-shadow: var(--shadow-lg); }
.plz-plan__flag { position: absolute; top: -12px; right: 18px; background: var(--plz-600); color: #fff; font-size: 0.72rem; font-weight: 800; padding: 4px 12px; border-radius: 999px; font-family: var(--font-heading); }
.plz-plan__icon { font-size: 2rem; }
.plz-plan__price { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; color: var(--plz-700); margin: 6px 0 2px; }
.plz-plan__price span { display: block; font-size: 0.8rem; color: var(--muted-fg); font-weight: 500; }
.plz-plan__features { list-style: none; margin: 0 0 18px; padding: 0; flex: 1; }
.plz-plan__features li { padding: 5px 0; font-size: 0.9rem; color: #424242; }
.plz-plan__features li::before { color: var(--plz-600); font-weight: 700; }
.plz-plan__btn:disabled, .plz-plan__btn:disabled:hover { opacity: 0.55; cursor: not-allowed; box-shadow: none; transform: none; filter: grayscale(0.35); }

/* ---------- Post cards / article ---------- */
.plz-postcard { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
/* v1.7.30 — the thumb has TWO states:
   • PHOTO card: no fixed slot, no tint — the anchor hugs the photo and its height follows the image's own aspect ratio (the soft-green letterbox bars above/below the photo are gone).
   • EMOJI-ONLY card / broken-photo fallback: the soft-green 16/10 tile below keeps photo-less cards tidy. */
.plz-postcard__thumb { display: block; aspect-ratio: 16/10; background: var(--plz-50); position: relative; }
.plz-postcard__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--plz-50); }
/* Photo state (:has(img)): the img returns to normal flow — display:block kills the inline baseline gap, width:100% + height:auto renders the whole photo at its own ratio and the anchor wraps it EXACTLY (no bars above/below, no cropping, no zoom). position:relative (not static) keeps that flow sizing while staying a POSITIONED box so the img still paints ABOVE the absolutely-positioned emoji behind it (a static img would slide UNDER the emoji — the leaf glyph floated over photos in testing). The old absolute img existed to stop a portrait photo's intrinsic height inflating a FIXED aspect-ratio slot (flex min-height:auto blowout) — with no fixed slot there is nothing to inflate, so flow is safe again. :has(img) also self-heals the onerror fallback: a broken photo removes the img node, the anchor stops matching and reverts to the green emoji tile automatically. */
.plz-postcard__thumb:has(img) { aspect-ratio: auto; background: transparent; }
.plz-postcard__thumb:has(img) img { position: relative; display: block; width: 100%; height: auto; object-fit: fill; background: transparent; }
.plz-postcard__emoji { display: flex; align-items: center; justify-content: center; font-size: 3rem; height: 100%; position: absolute; inset: 0; }
.plz-postcard__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.plz-postcard__body h3 a { color: inherit; }
.plz-postcard__more { margin-top: auto; font-weight: 700; font-size: 0.9rem; }
.plz-postcard__author { font-size: 0.78rem; font-weight: 600; color: var(--muted-fg); }
/* Home blog preview — compact row: small square thumb + title only */
.plz-postcard--mini { flex-direction: row; align-items: center; gap: 14px; padding: 12px 14px; }
.plz-postcard--mini .plz-postcard__thumb { flex: 0 0 84px; width: 84px; aspect-ratio: 1; border-radius: var(--radius); }
/* v1.7.30: the front-page mini rows KEEP the 84px square + contain + tint for photos — re-assert after the :has(img) photo-state rule (this selector wins on specificity 0,3,1; the mini anchor rule above already wins on source order). */
.plz-postcard--mini .plz-postcard__thumb:has(img) img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--plz-50); }
.plz-postcard--mini .plz-postcard__emoji { font-size: 2rem; }
.plz-postcard--mini .plz-postcard__body { padding: 0; }
.plz-postcard--mini h3 { margin: 0; font-size: 1rem; line-height: 1.35; }
.plz-article__head { margin-bottom: 24px; }
.plz-article__meta { color: var(--muted-fg); }
.plz-article__thumb { margin: 0 0 28px; border-radius: var(--radius-lg); overflow: hidden; }
.plz-article__thumb img { display: block; width: 100%; aspect-ratio: 16/8; object-fit: cover; }
/* Uploaded featured image (admin upload): show the FULL photo at its own
   aspect ratio — the 16/8 banner crop made uploaded photos arrive zoomed.
   Imported covers keep the banner below. */
.plz-article__thumb--natural img { aspect-ratio: auto; height: auto; object-fit: fill; }
/* Cover-photo thumb with an emoji safety net: the img sits on top; if the
   imported cover URL 404s (image base not configured), the script removes it
   and the ::before emoji shows on the gradient. */
.plz-article__thumb--cover { display: flex; align-items: center; justify-content: center; aspect-ratio: 16/8; background: linear-gradient(135deg, var(--plz-100), var(--plz-50)); position: relative; }
.plz-article__thumb--cover::before { content: attr(data-emoji); font-size: 4rem; }
.plz-article__thumb--cover img { position: absolute; }
/* Emoji hero (no photo available) — mirrors the original app's gradient banner. */
.plz-article__hero { margin: 0 0 28px; aspect-ratio: 16/7; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--plz-400), #34d399, #14b8a6); display: flex; align-items: center; justify-content: center; }
.plz-article__hero-emoji { font-size: 4.5rem; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25)); }
.plz-article__content { font-size: 1.05rem; }
.plz-article__content h2 { margin-top: 1.6em; }
.plz-article__content img { border-radius: var(--radius); }
.plz-tags { margin-top: 30px; padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.plz-tags__label { font-family: var(--font-heading); font-weight: 800; font-size: 0.92rem; color: var(--plz-800); margin-right: 2px; }
.plz-tags a { background: var(--muted); border-radius: 999px; padding: 4px 14px; font-size: 0.82rem; color: inherit; text-decoration: none; }
.plz-tags a:hover { background: var(--plz-100); color: var(--plz-800); }

/* ---------- CTA band ---------- */
.plz-cta { background: linear-gradient(135deg, var(--plz-600), var(--plz-800)); color: #fff; padding: 46px 0; text-align: center; }
.plz-cta h2 { color: #fff; }
.plz-cta p { color: var(--plz-100); max-width: 40em; margin: 0 auto 20px; }
.plz-cta__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- Footer ---------- */
/* Footer sits on plain white, separated from the body by a neutral top line. */
/* Footer top padding kept lean — the body-to-footer gap was reported as too
   big, so the page bottom + footer top paddings were trimmed together. */
.plz-footer { background: #fff; color: var(--plz-800); margin-top: 0; padding: 32px 0 0; clear: both; flex-shrink: 0; border-top: 1px solid var(--border); }
.plz-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 36px; }
.plz-footer__brand p { color: var(--plz-800); font-size: 0.92rem; }
.plz-footer .plz-logo { color: var(--plz-900); }
.plz-footer h4 { color: var(--plz-900); margin-bottom: 14px; font-size: 0.95rem; }
.plz-footer__col ul { list-style: none; margin: 0 0 18px; padding: 0; }
.plz-footer__col li { margin-bottom: 2px; }
/* Link hover = forest-green highlight pill (no underline) */
.plz-footer__col a { display: inline-block; padding: 3px 10px; margin-left: -10px; border-radius: 8px; color: var(--plz-700); font-size: 0.9rem; transition: background 0.15s ease, color 0.15s ease; }
.plz-footer__col a:hover { background: var(--plz-800); color: #fff; text-decoration: none; }
/* Newsletter panel: soft forest-green card inside the white footer */
.plz-footer__news { background: #e8f1ea; border: 1px solid rgba(27, 94, 32, 0.16); border-radius: var(--radius-lg); padding: 16px 16px 18px; margin-top: 0; }
.plz-footer__news p { margin: 0 0 12px; font-size: 0.85rem; line-height: 1.5; color: var(--plz-700); }
.plz-footer__news .plz-subscribe input { background: #fff; }
.plz-footer__social { display: flex; gap: 10px; margin-top: 14px; }
.plz-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(27, 94, 32, 0.1); font-size: 1.1rem; color: var(--plz-800); transition: transform 0.15s, background 0.15s; }
.plz-footer__social a:hover { background: var(--sp-color, var(--plz-600)); color: #fff; transform: translateY(-2px); }
.plz-footer__social a svg { width: 18px; height: 18px; }
.plz-footer__social a svg path { fill: currentColor; }
.plz-footer__bottom { border-top: 1px solid rgba(27, 94, 32, 0.18); margin-top: 32px; padding: 16px 0; text-align: center; font-size: 0.85rem; color: var(--plz-700); }
.plz-subscribe { display: flex; gap: 8px; }
.plz-subscribe input { flex: 1; }

/* ---------- Forms ---------- */
.plz-field { display: block; margin-bottom: 16px; }
.plz-field > span { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; font-family: var(--font-heading); }
.plz-field input, .plz-field textarea, .plz-field select,
.plz-inline-form input, .plz-subscribe input, .plz-chatpage__row input, .plz-appbar__search input {
        width: 100%;
        padding: 12px 14px;
        border: 1.5px solid var(--border);
        border-radius: 10px;
        font-family: var(--font-body);
        font-size: 0.95rem;
        background: #fff;
        color: var(--foreground);
        transition: border-color 0.15s, box-shadow 0.15s;
}
.plz-field input:focus, .plz-field textarea:focus,
.plz-appbar__search input:focus { outline: none; border-color: var(--plz-500); box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15); }
.plz-field textarea { resize: vertical; }
.plz-field small { color: var(--muted-fg); }
.plz-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.plz-inline-form { display: flex; gap: 10px; align-items: center; }
.plz-otp { letter-spacing: 6px; font-size: 1.3rem !important; text-align: center; font-weight: 700; }
.plz-check { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; }
.plz-select { width: auto; }

.plz-captcha { display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; flex-wrap: wrap; }
.plz-captcha__q { background: var(--plz-50); border: 1px dashed var(--plz-300); padding: 10px 14px; border-radius: 10px; font-family: var(--font-heading); font-weight: 700; letter-spacing: 2px; margin-bottom: 0; user-select: none; flex: 1; text-align: center; font-size: 0.95rem; white-space: nowrap; min-width: 0; }
.plz-captcha__a { flex: 0 0 96px; width: 96px; height: 44px; border: 1px solid var(--plz-200); border-radius: 10px; padding: 0 12px; font-family: var(--font-heading); font-weight: 700; text-align: center; background: #fff; color: var(--plz-800); font-size: 1rem; max-width: 100%; }
.plz-captcha__a:focus { outline: 2px solid var(--plz-500); outline-offset: 1px; border-color: var(--plz-500); }
.plz-captcha--inline { margin: 0; gap: 6px; }
.plz-captcha--inline .plz-captcha__q { padding: 7px 10px; font-size: 0.78rem; letter-spacing: 1px; flex: 0 1 auto; }
.plz-captcha--inline .plz-captcha__a { flex: 0 0 72px; width: 72px; height: 36px; padding: 0 8px; font-size: 0.9rem; }
/* v1.7.39: the question is nowrap + the answer input was a fixed 96px that
   cannot shrink — "What is 12 + 7 ?" min-content + 96px blew past the
   auth card's ~240-280px of content width on phones, pushing the answer
   field outside the screen (reported in the app view). At phone widths the
   row stacks: full-width question line, full-width answer line. */
@media (max-width: 560px) {
        .plz-captcha { row-gap: 8px; }
        .plz-captcha__q { flex: 1 1 100%; white-space: normal; }
        .plz-captcha__a { flex: 1 1 100%; width: 100%; }
}

/* ---------- Modal ---------- */
.plz-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.plz-modal[hidden] { display: none; }
.plz-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 40, 20, 0.55); backdrop-filter: blur(3px); }
.plz-modal__dialog { position: relative; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 30px; width: 100%; max-width: 460px; max-height: 90vh; overflow: auto; }
.plz-modal__close { position: absolute; top: 14px; right: 14px; background: var(--muted); border: 0; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 0.9rem; }
.plz-modal__close:hover { background: var(--border); }
/* Quick add plant dialog (compact, name-first) */
.plz-quickadd { max-width: 400px; }
.plz-quickadd h3 { margin-bottom: 6px; }

/* ---------- Auth ---------- */
.plz-auth__tabs { display: flex; background: var(--muted); border-radius: 999px; padding: 4px; margin-bottom: 22px; }
.plz-auth__tab { flex: 1; border: 0; background: transparent; padding: 10px; border-radius: 999px; font-family: var(--font-heading); font-weight: 700; cursor: pointer; color: var(--muted-fg); }
.plz-auth__tab.is-active { background: #fff; color: var(--plz-700); box-shadow: var(--shadow-sm); }
.plz-auth__row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.plz-auth__divider { display: flex; align-items: center; gap: 12px; color: var(--muted-fg); font-size: 0.82rem; margin: 18px 0; }
.plz-auth__divider::before, .plz-auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ---------- Toasts ---------- */
.plz-toasts { position: fixed; bottom: 24px; right: 24px; z-index: 300; display: flex; flex-direction: column; gap: 10px; }
.plz-toast { background: #1b2e20; color: #fff; padding: 13px 18px; border-radius: 12px; box-shadow: var(--shadow-lg); font-size: 0.92rem; max-width: 340px; animation: plz-toast-in 0.25s ease; }
.plz-toast--success { border-left: 4px solid var(--plz-400); }
.plz-toast--error { border-left: 4px solid var(--red-600); }
@keyframes plz-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- App shell ---------- */
.plz-shell--app { display: flex; min-height: 100vh; }
.plz-shell--public { display: flex; flex-direction: column; min-height: 100vh; }
.plz-shell--public .plz-main { flex: 1 0 auto; }
.plz-shell--app .plz-shell__main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--plz-50) 0%, #fff 240px); }
/* Sidebar: every item always visible, no inner scrolling. Items are
   single-line by default so all 14 (+admin) fit inside any viewport;
   descriptions return automatically on large monitors. */
.plz-sidebar { width: 280px; background: #fff; border-right: 1px solid var(--border); padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; height: 100vh; overflow: visible; flex-shrink: 0; }
.plz-sidebar__head { padding: 2px 8px 12px; }
.plz-sidebar__nav { display: flex; flex-direction: column; gap: 1px; flex: 1; min-height: 0; }
.plz-sidebar__link { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; color: inherit; transition: background 0.12s; }
.plz-sidebar__link:hover { background: var(--plz-50); }
.plz-sidebar__link.is-active { background: var(--plz-600); color: #fff; }
.plz-sidebar__link.is-active small { color: rgba(255, 255, 255, 0.75); }
.plz-sidebar__icon { font-size: 1.15rem; width: 26px; text-align: center; flex-shrink: 0; }
.plz-sidebar__text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
/* v1.7.44: link TITLES render forest green in every view (web sidebar,
   mobile drawer, PWA standalone) — the small detail line below each title
   keeps its own colour. The ACTIVE link stays white-on-green: forest green
   text on the green chip background would be unreadable. */
.plz-sidebar__text strong { font-size: 0.9rem; font-family: var(--font-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--plz-forest); }
.plz-sidebar__link.is-active .plz-sidebar__text strong { color: #fff; }
.plz-sidebar__text small { color: var(--muted-fg); font-size: 0.72rem; display: none; }
@media (min-width: 1025px) and (min-height: 860px) {
        .plz-sidebar__text small { display: block; }
        .plz-sidebar__link { padding: 8px 10px; }
}
.plz-sidebar__link--admin { border: 1.5px dashed var(--plz-300); margin-top: 8px; }

.plz-appbar { display: flex; align-items: center; gap: 16px; padding: 14px 26px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 40; }
.plz-appbar__burger { display: none; background: none; border: 0; font-size: 1.3rem; cursor: pointer; }
.plz-appbar__search { flex: 1; max-width: 460px; }
.plz-appbar__actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.plz-appbar__bell { position: relative; font-size: 1.2rem; text-decoration: none; }
/* Mobile-only appbar pieces: the site logo and the red log-out icon join the
   bell + avatar on phones (logo lives in the sidebar rail on desktop). */
.plz-appbar__logo { display: none; }
.plz-appbar__logo .plz-logo img { height: 34px; width: auto; }
.plz-appbar__logout { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--red-100); color: var(--red-600); text-decoration: none; flex: none; }
.plz-appbar__logout:hover { background: #fdd8d8; }
/* App-style bottom tab bar — rendered for logged-in users, phones only. */
.plz-bottomnav { display: none; }
.plz-bell-dot { position: absolute; top: -2px; right: -4px; width: 10px; height: 10px; background: var(--red-600); border-radius: 50%; border: 2px solid #fff; }
/* The auth span must lay its children (avatar chip + red log-out icon) out on
   ONE line on phones — as a bare inline span the flex userchip forced the
   log-out icon onto a second line. */
.plz-auth-user { display: inline-flex; align-items: center; gap: 10px; }
/* v1.7.35: the JS auth flip (app.js sets the hidden attribute after auth/me)
   previously could not hide the guest span — the author display:inline-flex
   beat the browser's default [hidden] rule. Both spans now honour it. The
   span. prefix + [hidden] keeps this a notch above the .plz-header__actions
   .plz-auth-guest !important show rule above, so the flip always wins. */
span.plz-auth-guest[hidden], span.plz-auth-user[hidden] { display: none !important; }
.plz-userchip { position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.plz-userchip__avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--plz-400), var(--plz-600)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: var(--font-heading); overflow: hidden; }
.plz-userchip__avatar img { width: 100%; height: 100%; object-fit: cover; }
.plz-userchip__meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.plz-userchip__meta strong { font-size: 0.88rem; }
.plz-userchip__caret { color: var(--muted-fg); }
.plz-userchip__menu { position: absolute; top: calc(100% + 10px); right: 0; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); min-width: 210px; padding: 8px; z-index: 60; display: flex; flex-direction: column; }
.plz-userchip__menu[hidden] { display: none; }
.plz-userchip__menu a, .plz-userchip__menu button { text-align: left; padding: 10px 12px; border-radius: 8px; color: inherit; background: none; border: 0; font-size: 0.92rem; cursor: pointer; font-family: var(--font-body); }
.plz-userchip__menu a:hover, .plz-userchip__menu button:hover { background: var(--plz-50); }
.plz-userchip__menu hr { border: 0; border-top: 1px solid var(--border); margin: 6px 0; }

.plz-appmain { padding: 30px 26px 24px; }

/* AI FAB + widget */
.plz-ai-fab { background: linear-gradient(135deg, var(--plz-500), var(--plz-700)); color: #fff; border: 0; width: 48px; height: 48px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; box-shadow: var(--shadow-lg); }
.plz-ai-fab--float { position: fixed; bottom: 24px; right: 24px; z-index: 90; }
.plz-aiwidget { position: fixed; bottom: 84px; right: 24px; width: 340px; max-height: 460px; background: #fff; border-radius: 18px; box-shadow: var(--shadow-lg); z-index: 95; display: flex; flex-direction: column; overflow: hidden; }
.plz-aiwidget[hidden] { display: none; }
.plz-aiwidget__head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--plz-600); color: #fff; }
.plz-aiwidget__head button { background: none; border: 0; color: #fff; cursor: pointer; }
.plz-aiwidget__body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.plz-aiwidget__form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
.plz-aiwidget__form input { flex: 1; padding: 9px 12px; border: 1.5px solid var(--border); border-radius: 10px; }
/* Locked AI widget (guests + Free plan): message + actions instead of chat */
.plz-aiwidget__locked { padding: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.plz-aiwidget__locked .plz-btn { width: 100%; justify-content: center; }
/* Lock chips on sidebar links + dashboard minicards for Monthly+ tools */
.plz-sidebar__lock { margin-left: auto; font-size: 0.85rem; opacity: 0.75; }
.plz-sidebar__link.is-active .plz-sidebar__lock { opacity: 1; }
.plz-minicard { position: relative; }
.plz-minicard__lock { position: absolute; top: 8px; right: 10px; font-size: 0.8rem; }

/* ---------- Dashboard (1:1 port of the original app dashboard) ---------- */
.plz-dash { display: flex; flex-direction: column; gap: 22px; max-width: 1080px; margin: 0 auto; }
.plz-dic { width: 16px; height: 16px; flex: none; }
.plz-dic--xs { width: 12px; height: 12px; }
.plz-dic--sm { width: 14px; height: 14px; }
.plz-dic--plant { color: var(--plz-500); }
.plz-dic--green { color: #10b981; }
.plz-dic--blue { color: #3b82f6; }
.plz-dic--rose { color: #f43f5e; }
.plz-dic--purple { color: #a855f7; }
.plz-dic--cyan { color: #06b6d4; }
.plz-dic--indigo { color: #6366f1; }

/* Welcome header with plan + date pills. */
/* v1.7.46: the Welcome hero joins the centered page-head family —
   title, sub-line and the plan/date pills stack on one centered axis
   like every other page hero. */
.plz-dash__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.plz-dash__hi { font-size: clamp(1.5rem, 3vw, 1.9rem); line-height: 1.15; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plz-dash__name { background: linear-gradient(90deg, var(--plz-500), #059669); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plz-dash__seed { font-size: 1.4rem; }
.plz-dash__sub { color: var(--muted-fg); font-size: 0.9rem; margin-top: 4px; }
.plz-dash__pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plz-dash__pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: #fff; font-size: 0.82rem; font-weight: 700; color: var(--foreground); }
.plz-dash__pillic { font-size: 0.95rem; line-height: 1; }
.plz-dash__pill--iron { background: #f3f4f6; border-color: #e5e7eb; color: #374151; }
.plz-dash__pill--copper { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.plz-dash__pill--bronze { background: #fefce8; border-color: #fde68a; color: #854d0e; }
.plz-dash__pill--silver { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
.plz-dash__pill--gold, .plz-dash__pill--platinum, .plz-dash__pill--titanium, .plz-dash__pill--palladium, .plz-dash__pill--diamond { background: #f5f3ff; border-color: #ddd6fe; color: #5b21b6; }

/* Card scaffolding shared by the dashboard sections.
   v1.7.37: grid items keep the default min-width:auto — a nowrap title in one
   card (Upcoming Tasks row) then forced the SHARED track to its min-content
   (474px on phones) and dragged the sibling card (Current Plan & Points) out
   of the viewport with it. min-width:0 on the items lets the track stay at
   the real available width; the row itself stops propagating min-content via
   overflow:hidden on .plz-tasks__main below. */
.plz-dash__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.plz-dash__duo > * { min-width: 0; }
.plz-dcard { padding: 16px; }
.plz-dcard--sm { padding: 12px; }
.plz-dcard__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.plz-dcard__title { display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem; font-weight: 700; color: var(--muted-fg); }
.plz-dcard__title--lg { font-size: 1.02rem; color: var(--foreground); }
.plz-dcard__link { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 600; color: var(--plz-600); padding: 2px 6px; border-radius: 8px; }
.plz-dcard__link:hover { background: var(--plz-50); color: var(--plz-700); }

/* Current Plan & Points. */
.plz-plan { display: flex; flex-direction: column; gap: 14px; }
.plz-plan__tier { display: flex; align-items: center; gap: 12px; }
.plz-plan__tile { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; box-shadow: 0 6px 14px rgba(0,0,0,.12); flex: none; }
.plz-plan__tile--iron { background: linear-gradient(135deg, #9ca3af, #4b5563); }
.plz-plan__tile--copper { background: linear-gradient(135deg, #fb923c, #ea580c); }
.plz-plan__tile--bronze { background: linear-gradient(135deg, #fbbf24, #d97706); }
.plz-plan__tile--silver { background: linear-gradient(135deg, #94a3b8, #475569); }
.plz-plan__tile--gold { background: linear-gradient(135deg, #facc15, #b45309); }
.plz-plan__tile--platinum, .plz-plan__tile--titanium, .plz-plan__tile--palladium, .plz-plan__tile--diamond { background: linear-gradient(135deg, #67e8f9, #0e7490); }
.plz-plan__tiername { flex: 1; min-width: 0; }
.plz-plan__tiername strong { display: block; font-size: 0.95rem; }
.plz-plan__tiername small { color: var(--muted-fg); font-size: 0.78rem; }
.plz-plan__chip { font-size: 0.68rem; font-weight: 700; letter-spacing: .02em; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted-fg); text-transform: capitalize; flex: none; }
.plz-plan__meter { display: flex; flex-direction: column; gap: 6px; }
.plz-plan__mrow { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--muted-fg); }
.plz-plan__mrow.is-hot span:last-child { color: var(--red-600); font-weight: 700; }
.plz-plan__mfoot { display: flex; justify-content: space-between; gap: 8px; font-size: 0.68rem; color: var(--muted-fg); margin-top: 2px; flex-wrap: wrap; }
.plz-meter { height: 8px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.plz-meter__fill { height: 100%; border-radius: 999px; transition: width .5s ease; }
.plz-meter__fill--ok { background: linear-gradient(90deg, var(--plz-400), var(--plz-600)); }
.plz-meter__fill--warn { background: #f59e0b; }
.plz-meter__fill--full { background: #ef4444; }
.plz-plan__reset { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: var(--muted-fg); margin-top: 2px; }
.plz-plan__warn { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--red-100); color: #b91c1c; font-size: 0.78rem; }
.plz-plan__cta { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 12px; background: linear-gradient(90deg, var(--plz-500), var(--plz-600)); color: #fff; font-size: 0.82rem; font-weight: 600; box-shadow: 0 2px 6px rgba(0,0,0,.08); transition: all .15s; }
.plz-plan__cta:hover { filter: brightness(1.05); box-shadow: 0 4px 10px rgba(0,0,0,.12); color: #fff; }

/* Upcoming Tasks.
   v1.7.37: the row title is nowrap+ellipsis, but ellipsis only contains the
   width when the flex item ITSELF clips overflow — without it the item's
   min-content contribution (the whole unwrapped plant name) propagated into
   the dashboard grid track and pushed both duo cards past the screen edge. */
.plz-tasks { display: flex; flex-direction: column; gap: 4px; }
.plz-tasks__row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; transition: background .15s; }
.plz-tasks__row:hover { background: #f9fafb; }
.plz-tasks__icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.plz-tasks__icon--water { background: #dbeafe; color: #2563eb; }
.plz-tasks__icon--fert { background: #f3e8ff; color: #9333ea; }
.plz-tasks__main { flex: 1; min-width: 0; overflow: hidden; }
.plz-tasks__main strong { display: block; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plz-tasks__main small { color: var(--muted-fg); font-size: 0.7rem; }
.plz-tasks__when { font-size: 0.66rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--foreground); flex: none; }
.plz-tasks__when--today { border-color: #fecaca; color: #dc2626; }
.plz-tasks__when--tomorrow { border-color: #fde68a; color: #d97706; }

/* Quick actions.
   v1.7.37: same min-content trap as the duo cards — the nowrap labels set the
   4-track grid's min-content (~225px/card) and overflowed 1024px laptops with
   the sidebar open. min-width:0 + overflow:hidden keep the tracks honest. */
.plz-qa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.plz-qa__card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; border: 1.5px solid transparent; transition: all .15s; min-width: 0; }
.plz-qa__card:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,.07); }
.plz-qa__tile { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: none; box-shadow: 0 4px 10px rgba(0,0,0,.16); transition: transform .15s; }
.plz-qa__card:hover .plz-qa__tile { transform: scale(1.08); }
.plz-qa__tile--green { background: linear-gradient(135deg, var(--plz-500), #059669); }
.plz-qa__tile--blue { background: linear-gradient(135deg, #0ea5e9, #2563eb); }
.plz-qa__tile--orange { background: linear-gradient(135deg, #f97316, #d97706); }
.plz-qa__tile--purple { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.plz-qa__txt { flex: 1; min-width: 0; overflow: hidden; }
.plz-qa__txt strong { display: block; font-size: 0.88rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plz-qa__txt small { display: block; color: var(--muted-fg); font-size: 0.74rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plz-qa__go { color: var(--muted-fg); opacity: 0; transform: translateX(-2px); transition: all .15s; flex: none; }
.plz-qa__card:hover .plz-qa__go { opacity: 1; transform: none; }
.plz-qa__card--green { background: var(--plz-50); border-color: var(--plz-200); }
.plz-qa__card--green:hover { border-color: var(--plz-400); }
.plz-qa__card--blue { background: #f0f9ff; border-color: #bae6fd; }
.plz-qa__card--blue:hover { border-color: #38bdf8; }
.plz-qa__card--orange { background: #fff7ed; border-color: #fed7aa; }
.plz-qa__card--orange:hover { border-color: #fb923c; }
.plz-qa__card--purple { background: #faf5ff; border-color: #e9d5ff; }
.plz-qa__card--purple:hover { border-color: #c084fc; }

/* My Plants mini cards. */
.plz-plantlets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.plz-plantlet { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 10px; border: 1px solid var(--plz-200); border-radius: 14px; transition: all .15s; min-width: 0; }
.plz-plantlet:hover { border-color: var(--plz-400); box-shadow: 0 6px 14px rgba(0,0,0,.07); transform: translateY(-2px); }
.plz-plantlet__ava { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, var(--plz-100), #d1fae5); display: grid; place-items: center; font-size: 1.7rem; margin-bottom: 4px; }
.plz-plantlet__name { font-size: 0.85rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plz-plantlet__badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.66rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #d1fae5; color: #047857; }
.plz-plantlet__badge i { width: 6px; height: 6px; border-radius: 50%; background: #10b981; }
.plz-plantlet__badge--warn { background: var(--amber-100); color: var(--amber-700); }
.plz-plantlet__badge--warn i { background: #f59e0b; }
.plz-plantlet__meta { display: inline-flex; align-items: center; gap: 5px; font-size: 0.7rem; color: var(--muted-fg); margin-top: 3px; max-width: 100%; white-space: nowrap; overflow: hidden; }

/* Recent Diagnoses + AI Plant Insights + Community Activity row. */
.plz-dash__trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
.plz-dash__trio > * { min-width: 0; }

/* Recent Diagnoses. */
.plz-rdiag { display: flex; flex-direction: column; gap: 4px; }
.plz-rdiag__row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; transition: background .15s; }
.plz-rdiag__row:hover { background: #f9fafb; }
.plz-rdiag__thumb { width: 38px; height: 38px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, var(--plz-100), #d1fae5); display: grid; place-items: center; font-size: 1.05rem; flex: none; }
.plz-rdiag__thumb img { width: 100%; height: 100%; object-fit: cover; }
.plz-rdiag__main { flex: 1; min-width: 0; }
.plz-rdiag__main strong { display: block; font-size: 0.8rem; overflow-wrap: anywhere; }
.plz-rdiag__main small { display: block; color: var(--muted-fg); font-size: 0.7rem; overflow-wrap: anywhere; }
.plz-rdiag__main .plz-rdiag__date { font-size: 0.64rem; margin-top: 1px; }
.plz-rdiag__badge { font-size: 0.66rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; flex: none; max-width: 44%; text-align: center; overflow-wrap: anywhere; line-height: 1.35; }
.plz-rdiag__badge--good { background: #d1fae5; color: #047857; }
.plz-rdiag__badge--mid { background: var(--amber-100); color: var(--amber-700); }
.plz-rdiag__badge--low { background: var(--red-100); color: #b91c1c; }

/* AI Plant Insights (green gradient panel). */
.plz-insight { border-radius: 16px; background: linear-gradient(135deg, var(--plz-50), #ecfdf5); border: 1px solid var(--plz-100); padding: 16px; display: flex; flex-direction: column; }
.plz-dcard__head--insight { border-bottom-color: rgba(16,185,129,.25); }
.plz-insight__body { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; flex: 1; }
.plz-insight__tile { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--plz-400), var(--plz-600)); color: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 8px 16px rgba(16,185,129,.25); }
.plz-insight__txt strong { font-size: 0.9rem; color: #065f46; }
.plz-insight__txt p { font-size: 0.76rem; color: #047857; opacity: .85; margin-top: 4px; line-height: 1.45; }
.plz-insight__btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 9px; border-radius: 10px; border: 1px solid var(--plz-200); color: #047857; font-size: 0.8rem; font-weight: 600; background: #fff; transition: background .15s; }
.plz-insight__btn:hover { background: var(--plz-50); }

/* Community Activity. */
.plz-cact { display: flex; flex-direction: column; gap: 4px; }
.plz-cact__row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; transition: background .15s; }
.plz-cact__row:hover { background: #f9fafb; }
.plz-cact__ava { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--plz-400), #10b981); color: #fff; font-size: 0.72rem; font-weight: 700; display: grid; place-items: center; flex: none; }
.plz-cact__main { flex: 1; min-width: 0; }
.plz-cact__main strong { display: block; font-size: 0.76rem; overflow-wrap: anywhere; }
.plz-cact__main strong em { font-style: normal; color: var(--muted-fg); font-weight: 400; }
.plz-cact__main strong span { color: var(--plz-600); }
.plz-cact__main small { display: block; color: var(--muted-fg); font-size: 0.7rem; overflow-wrap: anywhere; }
.plz-cact__main .plz-cact__meta { font-size: 0.64rem; margin-top: 1px; }

/* Recommended for You. */
.plz-reco { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.plz-reco__card { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--plz-200); border-radius: 14px; transition: all .15s; min-width: 0; }
.plz-reco__card:hover { border-color: var(--plz-400); box-shadow: 0 6px 14px rgba(0,0,0,.07); }
.plz-reco__cover { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, var(--plz-100), #d1fae5); display: grid; place-items: center; font-size: 1.2rem; flex: none; }
.plz-reco__cover img { width: 100%; height: 100%; object-fit: cover; }
.plz-reco__main { flex: 1; min-width: 0; }
.plz-reco__main strong { display: -webkit-box; font-size: 0.82rem; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.plz-reco__main > small { display: inline-flex; align-items: center; gap: 5px; color: var(--muted-fg); font-size: 0.7rem; margin-top: 5px; }
.plz-reco__more { display: inline-flex; align-items: center; gap: 3px; color: var(--plz-600); font-size: 0.74rem; font-weight: 600; margin-top: 7px; }

/* Dashboard empty states. */
.plz-dash__empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 26px 12px; }
.plz-dash__empty h3 { font-size: 0.92rem; }
.plz-dash__empty .plz-btn { margin-top: 4px; }
.plz-dash__emptyic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #9ca3af; background: #f3f4f6; }
.plz-dash__emptyic .plz-dic { width: 20px; height: 20px; }
.plz-dash__emptyic--lg { width: 48px; height: 48px; color: var(--plz-300); background: var(--plz-50); }
.plz-dash__emptyic--lg .plz-dic { width: 24px; height: 24px; }

/* Watering/fertilizing list rows */
.plz-due { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.plz-due:last-child { border-bottom: 0; }
.plz-due__main { display: flex; align-items: center; gap: 12px; }
.plz-due__emoji { font-size: 1.5rem; }
.plz-due strong { font-size: 0.95rem; }
.plz-due small { color: var(--muted-fg); display: block; }
.plz-due__when { font-size: 0.8rem; font-weight: 700; }
.plz-due__when--overdue { color: var(--red-600); }
.plz-due__when--today { color: var(--orange-600); }
.plz-due__when--soon { color: var(--amber-700); }
.plz-due__when--ok { color: var(--plz-600); }

/* ---------- My Plants ---------- */
.plz-myplants, .plz-settings, .plz-notifications, .plz-analytics, .plz-diagnoses, .plz-support, .plz-chatpage { display: flex; flex-direction: column; gap: 20px; max-width: 1080px; margin: 0 auto; width: 100%; }
/* v1.7.46: page heads center everywhere — icon + title + details sit on
   one centered axis (the .plz-toolhead look), and header actions such
   as "Mark all read" / "New ticket" drop below the title as a centered
   row instead of hugging the right edge. */
.plz-myplants__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.plz-plants-limit { background: var(--plz-50); border: 1px solid var(--plz-200, #bbf7d0); color: var(--plz-700); font-size: 0.82rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.plz-plants-limit[hidden] { display: none; }
.plz-plantdetail__cta small { display: block; margin-top: 8px; }
.plz-tabs { display: flex; gap: 6px; border-bottom: 2px solid var(--border); overflow-x: auto; }
.plz-tab { border: 0; background: none; padding: 12px 18px; font-family: var(--font-heading); font-weight: 700; color: var(--muted-fg); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.plz-tab.is-active { color: var(--plz-700); border-bottom-color: var(--plz-600); }
/* Collection stats row (screenshot spec): big number + label tiles. */
.plz-plantstats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.plz-plantstat { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 16px 10px; text-align: center; box-shadow: var(--shadow-sm); }
.plz-plantstat strong { display: block; font-family: var(--font-heading); font-size: 1.7rem; font-weight: 800; color: var(--plz-600); line-height: 1.1; }
.plz-plantstat strong.is-warn { color: var(--orange-600); }
.plz-plantstat span { display: block; font-size: 0.78rem; font-weight: 600; color: var(--muted-fg); margin-top: 4px; }

/* Pill tab bar + Add Plant action. */
.plz-myplants__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.plz-tabs--pill { border-bottom: 0; gap: 10px; flex-wrap: wrap; }
.plz-tabs--pill .plz-tab { border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 10px 20px; margin-bottom: 0; font-size: 0.9rem; box-shadow: var(--shadow-sm); }
.plz-tabs--pill .plz-tab.is-active { background: var(--plz-600); border-color: var(--plz-600); color: #fff; }
.plz-tabs--pill .plz-tab:not(.is-active):hover { border-color: var(--plz-400); color: var(--plz-700); }
.plz-addplant { border-radius: 12px; font-weight: 700; padding: 10px 18px; box-shadow: var(--shadow-sm); }
.plz-addplant__plus { font-weight: 800; }

/* Plant grid: minmax(0, 1fr) so long names wrap inside cards instead of
   stretching a column and shrinking its siblings. */
#plz-plants-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.plz-plantcard { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.plz-plantcard__top { height: 150px; background: linear-gradient(160deg, #dcfce7, #f0fdf4 72%); display: grid; place-items: center; font-size: 4rem; flex: none; position: relative; overflow: hidden; } /* v1.7.29: relative + clip — the photo must stay inside the 150px tile */
.plz-plantcard__top img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } /* v1.7.29: the whole photo shows on the gradient tile (contain, not cover) and the ABSOLUTE placement stops a portrait photo's intrinsic height from inflating the tile past 150px */
.plz-plantcard__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.plz-plantcard__name { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plz-plantcard__name h3 { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.plz-plantcard__del { background: none; border: 0; font-size: 1rem; cursor: pointer; opacity: 0.5; transition: opacity .15s; padding: 4px; flex: none; }
.plz-plantcard__del:hover { opacity: 1; color: var(--red-600); }
.plz-plantcard__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.plz-plantcard__chip { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; font-size: 0.72rem; font-weight: 700; color: var(--fg); }
.plz-plantcard__chip--due { border: 0; }
.plz-plantcard__chip--ok { background: #d1fae5; color: #047857; }
.plz-plantcard__chip--soon { background: var(--amber-100); color: var(--amber-700); }
.plz-plantcard__chip--today { background: #ffedd5; color: #c2410c; }
.plz-plantcard__chip--overdue { background: var(--red-100); color: #b91c1c; }
.plz-plantcard__info { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.8rem; color: var(--fg); }
.plz-plantcard__care { font-size: 0.78rem; color: var(--muted-fg); }
.plz-plantcard__care strong { color: var(--fg); font-weight: 600; }
.plz-plantcard__fertband { background: #ede9fe; color: #6d28d9; border-radius: 10px; padding: 8px 12px; font-size: 0.78rem; font-weight: 600; }
.plz-plantcard__actions { display: flex; gap: 10px; }
.plz-plantcard__water, .plz-plantcard__feed { flex: 1; background: #fff; color: var(--muted-fg); border: 1.5px solid var(--border); border-radius: 10px; padding: 9px 10px; font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: all .15s; }
.plz-plantcard__water:hover:not(:disabled), .plz-plantcard__feed:hover:not(:disabled) { border-color: var(--plz-500); color: var(--plz-700); background: var(--plz-50); }
.plz-plantcard__del { background: none; border: 0; border-radius: 8px; }
.plz-plantcard__water:disabled, .plz-plantcard__feed:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.5); }
.plz-plantcard__water:disabled:hover, .plz-plantcard__feed:disabled:hover { background: #fff; color: var(--muted-fg); border-color: var(--border); }

/* Tags & notes sections (Monthly+ feature). */
.plz-plantcard__secthead { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #0f766e; display: flex; align-items: center; gap: 6px; }
.plz-plantcard__secthead--amber { color: #b45309; }
.plz-plantcard__taglist { display: flex; flex-wrap: wrap; gap: 6px; }
.plz-plantcard__tag { border: 1px solid var(--plz-200); background: var(--plz-50); color: var(--plz-700); border-radius: 999px; padding: 4px 10px; font-size: 0.74rem; font-weight: 600; cursor: pointer; }
.plz-plantcard__tag:hover { background: var(--red-100); border-color: var(--red-100); color: var(--red-600); }
.plz-plantcard__notags { font-size: 0.76rem; color: var(--muted-fg); }
.plz-plantcard__tagadd { display: flex; gap: 8px; }
.plz-plantcard__taginput { flex: 1; min-width: 0; border: 1.5px solid var(--border); border-radius: 10px; padding: 8px 12px; font-size: 0.8rem; }
.plz-plantcard__taginput:focus { outline: none; border-color: var(--plz-500); }
.plz-plantcard__tagbtn { width: 38px; flex: none; border: 0; border-radius: 10px; background: #bbf7d0; color: #166534; font-size: 1.05rem; font-weight: 800; cursor: pointer; }
.plz-plantcard__tagbtn:hover { background: var(--plz-500); color: #fff; }
.plz-plantcard__tagfoot { font-size: 0.68rem; color: var(--muted-fg); }
.plz-plantcard__notes { border: 1.5px dashed #fcd34d; background: #fffbeb; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.plz-plantcard__notefield { width: 100%; border: 1.5px dashed #fcd34d; border-radius: 8px; background: #fff; padding: 8px 10px; font-size: 0.8rem; font-family: inherit; resize: vertical; min-height: 44px; }
.plz-plantcard__notefield:focus { outline: none; border-color: #f59e0b; }
.plz-plantcard__locked { border: 1.5px dashed var(--plz-200); background: var(--plz-50); border-radius: 12px; padding: 12px 14px; font-size: 0.78rem; color: var(--muted-fg); text-align: center; }
.plz-plantcard__locked strong { color: var(--plz-700); }
.plz-plantcard__locked a { color: var(--plz-700); font-weight: 700; }

/* Calendar date card — shows the plant name(s) due that day.
   v1.7.25: stacked vertically, one plant per line top to bottom (the old
   single-line tooltip clipped with an ellipsis once a date held several
   plants); no cap on rows so every name stays readable. */
.plz-cal__tip { position: fixed; z-index: 300; background: var(--plz-900); color: #fff; font-size: 0.78rem; font-weight: 600; padding: 6px 10px; border-radius: 8px; box-shadow: var(--shadow); pointer-events: none; max-width: min(320px, calc(100vw - 12px)); }
/* v1.7.26: rows are [emoji] [name] — emoji stays a fixed first column,
   the name keeps anywhere-wrapping inside the flex row. */
.plz-cal__tiprow { display: flex; align-items: flex-start; gap: 7px; padding: 3px 0; white-space: normal; }
.plz-cal__tipemoji { flex: none; line-height: 1.25; }
.plz-cal__tipname { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.plz-cal__tiprow + .plz-cal__tiprow { border-top: 1px solid rgba(255, 255, 255, 0.14); }

/* Simple month calendar */
.plz-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.plz-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.plz-cal__month { font-weight: 800; font-size: 1rem; }
.plz-cal__nav { background: var(--muted); border: 0; border-radius: 50%; width: 34px; height: 34px; font-size: 1.1rem; font-weight: 700; cursor: pointer; color: var(--fg); }
.plz-cal__nav:hover { background: var(--plz-100); color: var(--plz-800); }
.plz-cal__upcoming { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.plz-cal__uprow { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 8px 12px; background: var(--muted); border-radius: 10px; font-size: 0.85rem; flex-wrap: wrap; }
.plz-cal__update { font-weight: 800; white-space: nowrap; }
.plz-cal__hint { margin-left: auto; font-size: 0.75rem; } /* v1.7.25: opacity dropped — hint text renders black like the rest */
.plz-cal__dot--past { opacity: 0.35; }
.plz-cal__dow { text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--muted-fg); text-transform: uppercase; }
.plz-cal__cell { min-height: 76px; border: 1px solid var(--border); border-radius: 10px; padding: 6px; font-size: 0.75rem; position: relative; }
.plz-cal__cell--today { border-color: var(--plz-500); background: var(--plz-50); }
.plz-cal__daynum { font-weight: 700; }
.plz-cal__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 3px; }
.plz-cal__dot--water { background: var(--sky-500); }
.plz-cal__dot--fert { background: var(--plz-500); }
.plz-cal__legend { display: flex; gap: 16px; margin-top: 12px; font-size: 0.8rem; color: var(--muted-fg); }
/* v1.7.24: the whole date cell is the tap/click target now — the 6-8 px
   dots were far too small to hit on phones. Cells that carry due plants
   get the pointer affordance + hover/focus highlight (my-plants.js puts
   data-plants on the cell and listens on it). */
.plz-cal__cell--has { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.plz-cal__cell--has:hover { border-color: var(--plz-500); background: var(--plz-50); }
.plz-cal__cell--has:focus-visible { outline: 2px solid var(--plz-500); outline-offset: 1px; }

/* ---------- Community ---------- */
.plz-community__row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.plz-community__row .plz-btn { margin-left: auto; }
.plz-community__preview { max-height: 220px; border-radius: 12px; margin-top: 12px; }
.plz-post { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; margin-bottom: 18px; }
.plz-post__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.plz-post__avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--plz-100); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--plz-800); overflow: hidden; flex-shrink: 0; }
.plz-post__avatar img { width: 100%; height: 100%; object-fit: cover; }
.plz-post__meta { color: var(--muted-fg); font-size: 0.8rem; }
.plz-post__img { border-radius: 14px; margin: 12px 0; max-height: 420px; object-fit: cover; width: 100%; }
.plz-post__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.plz-post__actions { display: flex; gap: 14px; margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.plz-post__action { background: none; border: 0; cursor: pointer; font-size: 0.9rem; font-weight: 600; color: var(--muted-fg); display: inline-flex; gap: 6px; align-items: center; padding: 4px 8px; border-radius: 8px; }
.plz-post__action:hover { background: var(--muted); }
.plz-post__action.is-liked { color: var(--red-600); }
.plz-post__comments { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; display: none; flex-direction: column; gap: 10px; }
.plz-post__comments.is-open { display: flex; }
.plz-comment { display: flex; gap: 10px; font-size: 0.9rem; }
.plz-comment__avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--sky-100); color: var(--sky-700); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; flex-shrink: 0; overflow: hidden; }
.plz-comment__form { display: flex; gap: 8px; }
.plz-comment__form input { flex: 1; padding: 9px 12px; border: 1.5px solid var(--border); border-radius: 10px; }
.plz-pin { background: var(--amber-100); color: var(--amber-700); font-size: 0.7rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; }

/* ---------- Chat ---------- */
/* v1.7.46: the Buddy hero centers like the other page heads. */
.plz-chatpage__head { text-align: center; }
.plz-chatpage__body { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; min-height: 380px; max-height: 56vh; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.plz-msg { max-width: 78%; padding: 12px 16px; border-radius: 16px; font-size: 0.95rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.plz-msg--ai { background: var(--muted); border-bottom-left-radius: 4px; align-self: flex-start; }
.plz-msg--user { background: var(--plz-600); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.plz-msg--typing { opacity: 0.7; font-style: italic; }
.plz-chatpage__form { display: flex; flex-direction: column; gap: 10px; }
.plz-chatpage__row { display: flex; gap: 10px; }
.plz-chatpage__row input { flex: 1; }
.plz-chips--sug { margin: 0; }
.plz-support__chat { display: flex; flex-direction: column; gap: 14px; }
.plz-ticket { border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; margin-bottom: 12px; background: #fff; }
.plz-ticket__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.plz-ticket__status { font-size: 0.72rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.plz-ticket__status--open { background: var(--plz-100); color: var(--plz-800); }
.plz-ticket__status--in_progress { background: var(--amber-100); color: var(--amber-700); }
.plz-ticket__status--resolved, .plz-ticket__status--closed { background: var(--muted); color: var(--muted-fg); }
.plz-ticket__msg { border-left: 3px solid var(--plz-200); padding: 6px 12px; margin: 10px 0; background: var(--muted); border-radius: 0 10px 10px 0; font-size: 0.9rem; }

/* ---------- Light meter ---------- */
.plz-lm__readout { text-align: center; padding: 20px 0 8px; }
.plz-lm__value { font-family: var(--font-heading); font-size: 3.6rem; font-weight: 800; color: var(--plz-700); line-height: 1; }
.plz-lm__unit { color: var(--muted-fg); }
.plz-lm__label { font-weight: 700; margin-top: 8px; font-family: var(--font-heading); }
.plz-lm__bar { height: 12px; border-radius: 999px; background: linear-gradient(90deg, #263238, #546e7a 15%, #9575cd 35%, #4fc3f7 55%, #ffee58 75%, #ff7043 100%); margin: 18px 0; position: relative; }
.plz-lm__bar-fill { position: absolute; top: -5px; left: 0; width: 16px; height: 22px; background: #fff; border: 3px solid var(--plz-700); border-radius: 6px; transform: translateX(-8px); transition: left 0.2s; }
.plz-lm__controls { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.plz-lm__manual { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.plz-lm__manual label { flex: none; }
.plz-lm__manual input { flex: 1 1 120px; min-width: 0; width: 100%; accent-color: var(--plz-600); }
.plz-lm__scale { display: flex; justify-content: space-between; color: var(--muted-fg); font-size: 0.75rem; margin-bottom: 24px; }

/* ---------- Guides ---------- */
.plz-guidecard { text-align: left; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.plz-guidecard:hover { box-shadow: var(--shadow-lg); }
/* Photo slot: a real 16/10 image area (like the blog card thumb) — the old rule had no height, so the absolutely-positioned photo squeezed into the emoji's ~46px line-box and rendered as a thin sliver. Emoji-only cards get the same tile on the soft green. */
.plz-guidecard__emoji { font-size: 2.6rem; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; margin-bottom: 8px; text-decoration: none; border-radius: 16px; width: 100%; aspect-ratio: 16/10; background: var(--plz-50); }
/* contain + tint background: the full photo shows (letterboxed, never zoom-cropped) and the tint masks the emoji text behind it. */
.plz-guidecard__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--plz-50); border-radius: inherit; z-index: 1; }
.plz-guidecard__title { color: inherit; }
.plz-guidecard__sci { color: var(--muted-fg); font-size: 0.82rem; margin: 2px 0 10px; }
.plz-guidecard__meta { font-size: 0.82rem; color: var(--muted-fg); margin-top: 10px; }
/* Whole-card click target: spacer pushes the CTA to the card's end so
   "View details" lines up across every row. */
.plz-guidecard__spacer { flex: 1 0 12px; }
.plz-guidecard__cta { align-self: flex-start; pointer-events: none; }
.plz-guidecard:hover .plz-guidecard__cta { background: var(--plz-900); border-color: var(--plz-900); }

/* Guide detail page: back link above the article + related category block */
.plz-backlink { margin: 0 0 16px; }

/* ---------- Back-to + Share bar (guide / blog details, community) ----------
   Back link left; 📤 Share button right, opening the share popover card. */
.plz-backshare { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 18px; }
.plz-backshare__back { flex: none; }
.plz-sharewrap { position: relative; margin-left: auto; }
.plz-sharepop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 80; background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 16px; width: 320px; max-width: calc(100vw - 32px); }
.plz-sharepop__title { margin: 0 0 12px; font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; }
.plz-sharepop__icons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.plz-sharepop__icon { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 0.68rem; font-weight: 700; font-family: var(--font-heading); color: var(--muted-fg); text-decoration: none; text-align: center; }
.plz-sharepop__bubble { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; transition: transform 0.15s; }
.plz-sharepop__icon:hover .plz-sharepop__bubble { transform: translateY(-2px); }
.plz-sharepop__icon--wa .plz-sharepop__bubble { background: #e9f9ef; color: #1a7f42; border-color: #bdeccb; }
.plz-sharepop__icon--fb .plz-sharepop__bubble { background: #e9f0fe; color: #1a5fd0; border-color: #c6d9fa; }
.plz-sharepop__icon--x .plz-sharepop__bubble { background: #f1f1f1; color: #111; border-color: #d9d9d9; }
.plz-sharepop__icon--mail .plz-sharepop__bubble { background: var(--plz-50); color: var(--plz-700); border-color: var(--plz-100); }
.plz-sharepop__icon--tg .plz-sharepop__bubble { background: #e7f4fb; color: #17739f; border-color: #c2e2f3; }
.plz-sharepop__url { display: flex; gap: 8px; margin-top: 14px; }
.plz-sharepop__url input { flex: 1; min-width: 0; border: 1.5px solid var(--border); border-radius: 10px; padding: 8px 10px; font-size: 0.78rem; color: var(--muted-fg); background: var(--plz-50); }
.plz-sharepop__url input:focus { outline: none; border-color: var(--plz-500); }

/* ---------- Emoji / photo lightbox (guide details) ---------- */
/* Sizing math: lightbox padding 20px + stage padding 20px + gap 10px + caption
   (up to ~2 wrapped lines ≈ 44px) leaves the image a guaranteed
   calc(100dvh - 170px) — the stage can NEVER overflow, so the old right-side
   scrollbar (86vh stage + 74vh img + 88px padding > stage on short screens)
   is gone. dvh tracks mobile toolbars; the vh line is the fallback. */
.plz-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(15, 23, 42, 0.78); display: flex; align-items: center; justify-content: center; padding: 20px; }
.plz-lightbox[hidden] { display: none; }
.plz-lightbox__stage { position: relative; background: #fff; border-radius: 24px; padding: 20px; max-width: min(92vw, 680px); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; overflow: hidden; }
.plz-lightbox__body { display: flex; align-items: center; justify-content: center; min-height: 0; }
.plz-lightbox__emoji { font-size: 128px; line-height: 1; }
.plz-lightbox__img { max-width: 100%; max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); border-radius: 14px; object-fit: contain; display: block; }
/* Plant / insect name under the enlarged image (hidden when the trigger has no name). */
.plz-lightbox__caption { font-weight: 700; font-size: 1.05rem; color: #212121; text-align: center; max-width: 100%; overflow-wrap: anywhere; padding: 0 26px; }
.plz-lightbox__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: #fff; color: inherit; font-size: 1rem; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; box-shadow: var(--shadow-sm); }
.plz-lightbox__close:hover { background: var(--plz-50); }
.plz-related { margin-top: 30px; }
.plz-related__title { margin-bottom: 14px; }
.plz-plantdetail__head { display: flex; gap: 20px; align-items: center; margin-bottom: 26px; }
.plz-plantdetail__emoji { font-size: 4rem; background: var(--plz-50); border-radius: 24px; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; overflow: hidden; cursor: zoom-in; }
.plz-plantdetail__emoji::after { content: "🔍"; position: absolute; z-index: 2; right: 4px; bottom: 4px; font-size: 0.78rem; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.88); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.plz-plantdetail__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; z-index: 1; }
.plz-plantdetail__sci { color: var(--muted-fg); }
.plz-plantdetail__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; margin-bottom: 20px; }
.plz-careline { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--border); }
.plz-careline:last-child { border-bottom: 0; }
.plz-careline__icon { font-size: 1.3rem; }
.plz-careline p { margin: 0; font-size: 0.9rem; color: #424242; }
.plz-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 0.92rem; }
.plz-facts dt { font-weight: 700; color: var(--muted-fg); }
.plz-facts dd { margin: 0; }
.plz-listcheck { list-style: none; padding: 0; margin: 0; }
.plz-listcheck li { padding: 6px 0 6px 26px; position: relative; font-size: 0.93rem; }
.plz-listcheck li::before { content: "✓"; position: absolute; left: 0; color: var(--plz-600); font-weight: 800; }

/* Numbered tips (Care tips: 1, 2, 3 …) + dot bullets (issues / pest details) */
.plz-listnum { list-style: none; counter-reset: plznum; padding: 0; margin: 0; }
.plz-listnum li { counter-increment: plznum; position: relative; padding: 7px 0 7px 40px; font-size: 0.93rem; }
.plz-listnum li::before { content: counter(plznum); position: absolute; left: 0; top: 6px; width: 26px; height: 26px; border-radius: 50%; background: var(--plz-100); color: var(--plz-700); font-weight: 800; font-size: 0.78rem; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); }
.plz-listdots { list-style: none; padding: 0; margin: 0; }
.plz-listdots li { position: relative; padding: 6px 0 6px 22px; font-size: 0.93rem; }
.plz-listdots li::before { content: ""; position: absolute; left: 4px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--plz-500); }

/* Health & Safety verdicts (pet safe / toxic) on the plant detail page */
.plz-safety { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 10px; }
.plz-safety__pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; font-weight: 800; font-family: var(--font-heading); font-size: 0.88rem; border: 1.5px solid transparent; }
.plz-safety__pill--ok { background: #ebfbee; border-color: #b9e9c9; color: #2b8a3e; }
.plz-safety__pill--warn { background: #fff0f0; border-color: #ffc9c9; color: #c92a2a; }
.plz-safety__note { margin: 0 0 6px; font-size: 0.9rem; color: var(--muted-fg); }
.plz-card__sub { margin: 16px 0 4px; font-size: 1.02rem; font-family: var(--font-heading); }

/* End-of-guide insect CTA ("Have an Insect to Identify?") */
.plz-insectcta { text-align: center; background: linear-gradient(135deg, var(--plz-50), #ffffff 72%); }
.plz-insectcta__emoji { font-size: 2.6rem; margin-bottom: 6px; }
.plz-insectcta p { max-width: 560px; margin: 0 auto 16px; color: var(--muted-fg); font-size: 0.95rem; }
.plz-plantdetail__cta { text-align: center; margin-top: 30px; }
.plz-insectdetail { display: flex; flex-direction: column; gap: 20px; }

/* ---------- Tools (identify / diagnose) ---------- */
.plz-toolhead { text-align: center; margin-bottom: 28px; }
/* Icon and title share one line (task: one-line page heads); the
   description paragraph stays centered underneath. */
.plz-toolhead__row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.plz-toolhead__row h1 { margin: 0; }
.plz-toolhead__icon { font-size: 2.4rem; display: inline-block; line-height: 1; }
.plz-dropzone { border: 2.5px dashed var(--plz-300); border-radius: var(--radius-lg); background: var(--plz-50); padding: 40px 24px; text-align: center; cursor: pointer; transition: all 0.15s; margin-bottom: 18px; }
.plz-dropzone:hover, .plz-dropzone.is-drag { border-color: var(--plz-500); background: var(--plz-100); }
.plz-dropzone--sm { padding: 14px 18px; margin-bottom: 0; font-weight: 600; font-size: 0.9rem; }
.plz-dropzone__icon { font-size: 2.2rem; margin-bottom: 8px; }
.plz-preview { text-align: center; margin-bottom: 18px; }
.plz-preview img { max-height: 340px; border-radius: 14px; margin-bottom: 12px; box-shadow: var(--shadow); }
.plz-loading { text-align: center; padding: 30px 0; }
.plz-spinner { width: 46px; height: 46px; border: 4px solid var(--plz-100); border-top-color: var(--plz-600); border-radius: 50%; margin: 0 auto 16px; animation: plz-spin 0.9s linear infinite; }
@keyframes plz-spin { to { transform: rotate(360deg); } }
.plz-result { margin-top: 24px; }
.plz-idresult__head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.plz-confbar { height: 10px; background: var(--muted); border-radius: 999px; overflow: hidden; margin: 8px 0 4px; }
.plz-confbar__fill { height: 100%; background: linear-gradient(90deg, var(--plz-400), var(--plz-600)); border-radius: 999px; }
.plz-issue { border: 1px solid var(--border); border-left: 4px solid var(--orange-500); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.plz-issue--High, .plz-issue--Severe { border-left-color: var(--red-600); }
.plz-issue--Low { border-left-color: var(--plz-400); }
.plz-issue h4 { margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
.plz-issue h4 .plz-badge { margin-left: auto; }
.plz-score { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 800; }
.plz-score--good { color: var(--plz-600); }
.plz-score--warn { color: var(--amber-700); }
.plz-score--bad { color: var(--red-600); }
.plz-tool__related { margin-top: 42px; }
.plz-tool__related h2 { text-align: center; margin-bottom: 22px; }

/* ---------- Settings ---------- */
.plz-settings__avatar { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.plz-avatar-lg { width: 68px; height: 68px; border-radius: 50%; background: linear-gradient(135deg, var(--plz-400), var(--plz-600)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; overflow: hidden; }
.plz-avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.plz-planbox { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ---------- Analytics ---------- */
.plz-barchart { display: flex; align-items: flex-end; gap: 4px; height: 160px; padding-top: 10px; }
.plz-barchart__col { flex: 1; background: linear-gradient(180deg, var(--plz-400), var(--plz-600)); border-radius: 6px 6px 0 0; min-height: 4px; position: relative; }
.plz-barchart__col:hover::after { content: attr(data-v); position: absolute; top: -22px; left: 50%; transform: translateX(-50%); background: #1b2e20; color: #fff; font-size: 0.7rem; padding: 2px 7px; border-radius: 6px; }
/* Fertilizing series gets its own nutrient-orange tint so the two charts read apart. */
.plz-barchart__col--fert { background: linear-gradient(180deg, var(--orange-500), var(--orange-700)); }
.plz-toplist { display: flex; flex-direction: column; }
.plz-toprow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--border); }
.plz-toprow:last-child { border-bottom: 0; }
.plz-toprow__bar { flex: 1; height: 8px; background: var(--muted); border-radius: 999px; overflow: hidden; }
.plz-toprow__bar span { display: block; height: 100%; background: var(--plz-500); }
.plz-toprow__bar--fert span { background: var(--orange-500); }

/* ---------- Notifications ---------- */
.plz-notif { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; margin-bottom: 10px; background: #fff; }
.plz-notif--unread { border-left: 4px solid var(--plz-500); background: var(--plz-50); cursor: pointer; }
.plz-notif__icon { font-size: 1.4rem; }
.plz-notif small { color: var(--muted-fg); }
/* v1.7.45: per-row delete, the bulk "Delete read" action and the lazy
   "Show more" button (8 rows per page, server-side pagination). */
.plz-notif { transition: opacity 0.22s ease, transform 0.22s ease; }
.plz-notif__del { margin-left: auto; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid transparent; background: transparent; cursor: pointer; font-size: 0.8rem; line-height: 1; padding: 0; opacity: 0.4; transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease; }
.plz-notif__del:hover, .plz-notif__del:focus-visible { opacity: 1; background: #fdecea; border-color: #f5c6c0; }
.plz-notif--removing { opacity: 0; transform: translateX(16px); pointer-events: none; }
.plz-notif__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plz-notif__more { display: block; margin: 8px auto 14px; min-width: 220px; text-align: center; }
/* v1.7.46: the tip line under the centered notifications hero centers
   with it (it reads as the hero's details line). */
.plz-notifications > p.plz-muted { text-align: center; }

/* ---------- Diagnoses history ---------- */
.plz-diagrow { display: flex; gap: 14px; align-items: center; border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; background: #fff; }
.plz-diagrow__thumb { width: 64px; height: 64px; border-radius: 12px; background: var(--plz-50); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; flex-shrink: 0; overflow: hidden; }
.plz-diagrow__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* "View details" affordance — sits under the row subtitle so users know the
   row opens the full AI report (the row itself is the click target). */
.plz-diagrow__more { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 6px 12px; border-radius: 999px; background: var(--plz-50); color: var(--plz-700); border: 1px solid var(--plz-100); font-size: 0.78rem; font-weight: 700; font-family: var(--font-heading); white-space: nowrap; }

/* ---------- Misc ---------- */
.plz-pagination { margin-top: 36px; text-align: center; }
.plz-pagination .page-numbers { display: inline-block; padding: 8px 14px; margin: 0 3px; border-radius: 10px; background: var(--muted); color: inherit; }
.plz-pagination .page-numbers.current { background: var(--plz-600); color: #fff; }
.plz-404 { text-align: center; padding: 60px 0; }
.plz-404__emoji { font-size: 4rem; }
.plz-faq details { border-bottom: 1px solid var(--border); padding: 12px 0; }
.plz-faq summary { cursor: pointer; font-weight: 700; font-family: var(--font-heading); }
.plz-empty { text-align: center; padding: 40px 20px; color: var(--muted-fg); }
.plz-empty span { font-size: 2.6rem; display: block; margin-bottom: 8px; }
.plz-rewarded { text-align: center; padding: 30px; }
.plz-rewarded__icon { font-size: 3rem; }

/* Screen reader helpers */
.plz-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
        .plz-grid--4 { grid-template-columns: repeat(2, 1fr); }
        .plz-hero__grid { grid-template-columns: 1fr; }
        .plz-hero__art { display: none; }
        .plz-steps { grid-template-columns: repeat(2, 1fr); }
        .plz-footer__grid { grid-template-columns: 1fr 1fr; }
        .plz-footer__col--news { grid-column: 1 / -1; }
        .plz-plantdetail__grid { grid-template-columns: 1fr; }
        /* Narrow-laptop compaction: the roomier desktop link spacing above
           would overflow the 1fr auto 1fr header grid between 769-1024px, so
           tighten it here (the burger still only appears at 768px). */
        .plz-header__inner { gap: 14px; }
        .plz-logo img { max-height: 38px; }
        /* v1.7.34: the footer brand spans the full grid row on tablets too. */
        .plz-footer__brand .plz-logo img { max-height: 44px; }
        .plz-nav__list { gap: 6px; }
        .plz-nav__list a { padding: 8px 7px; font-size: 0.88rem; }
        .plz-header__actions .plz-btn { padding: 8px 12px; }
}
@media (max-width: 768px) {
        .plz-grid--3, .plz-grid--2 { grid-template-columns: 1fr; }
        /* v1.7.37: the 4-up grid kept 2 columns on phones (only --3/--2
           collapsed) — the "More in …" related guides at the end of the care
           and insect guide pages overflowed narrow screens by up to 75px.
           One card per line on phones, like the guide archives; tablets keep
           the 2-up from the ≤1024px block. */
        .plz-grid--4 { grid-template-columns: 1fr; }
        /* Mobile menu: right-anchored dropdown card under the ☰ (it used to be
           a full-width sheet with centred links, which read as "opens in the
           middle of the screen"). The sticky header is the containing block.
           v1.7.42: the card is ~15% NARROWER (264px → 224px) so it no longer
           reads as "covers the screen" on phones, links get an icon and
           tapping anywhere outside the card closes it (JS in app.js). */
        .plz-nav { display: none; position: absolute; top: 76px; left: auto; right: 14px; width: min(224px, calc(100vw - 56px)); margin: 0; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 8px; }
        .plz-nav.is-open { display: block; }
        .plz-nav__list { flex-direction: column; gap: 2px; }
        .plz-nav__list a { text-align: left; padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
        /* v1.7.42: icon before each mobile menu link (prepended by app.js from
           the link's URL — works for the fallback menu AND a custom WP menu).
           The icon span is hidden on desktop so only the mobile panel changes. */
        .plz-nav__list .plz-nav__ico { display: inline-block; flex: none; width: 22px; text-align: center; font-size: 1.05rem; line-height: 1; }
        .plz-nav__list a:hover .plz-nav__ico { transform: scale(1.12); }
        .plz-burger { display: block; margin-left: auto; }
        /* Mobile header fix: with the menu hidden, the desktop 3-column grid
           (1fr auto 1fr) collapsed — Login + ☰ dropped into the middle column
           right beside the logo and the empty third column still took half the
           row, crushing the wide wordmark to a sliver and parking the actions
           mid-header. Two columns now: the logo keeps its natural width and
           the actions pin back to the right edge (justify-self:end is already
           on .plz-header__actions). */
        .plz-header__inner { grid-template-columns: auto 1fr; gap: 12px; padding-left: 16px; padding-right: 16px; }
        /* v1.7.34: logo size back UP on phones — the two buttons + burger still
           share the row, but the wordmark now scales to the viewport.
           v1.7.35: 40vw (was 42vw) — the nowrap Sign up pill needs its full
           intrinsic width back, so the logo gives up 2vw on the widest phones
           (still clearly larger than the pre-1.7.34 36vw). */
        .plz-logo img { max-height: clamp(26px, 9.5vw, 38px); max-width: 40vw; }
        /* Mobile header: Login AND Sign up both stay visible (Sign up used to
           be hidden here) — compact single-line pill sizing keeps logo + both
           buttons + ☰ on one row down to 320px. */
        .plz-header__actions { gap: 7px; }
        .plz-header__actions .plz-auth-guest { gap: 6px; }
        .plz-header__actions .plz-btn { padding: 6px 9px; font-size: 0.76rem; }
        .plz-burger { margin-left: 0; }
        /* Sidebar is an off-canvas drawer on phones: hidden until ☰ is tapped,
           then it slides in OVER the page — nothing covers the screen when it
           is closed and the body keeps the full width underneath.
           v1.7.43: the drawer is a real scroll container now. The old build
           relied on the nav (flex:1 + min-height:0) shrinking so its links
           overflowed THROUGH the drawer's own padding-bottom — the scroll
           always ended at the LAST LINK (the container's bottom padding is
           never reachable once content overflows past it), so on phones the
           final items (Support, Settings, Admin Panel) landed flush at the
           drawer's bottom edge, exactly where the fixed bottom tab bar
           (z-index 110, above the drawer's 105) covers them: scrolling the
           menu HID the last links instead of showing them. Three fixes:
           1) height:auto — top:0 + bottom:0 define the box, so it tracks the
              REAL visible viewport (100vh hangs below Android Chrome's
              toolbar fold and shrank the visible clearance further);
           2) the nav keeps its NATURAL height (flex:0 0 auto) and carries the
              bottom clearance INSIDE the scrollable content as its own
              padding-bottom, so the scroll always ends 84px + safe-area below
              the last link — Support & Settings stay clear of the tab bar at
              every viewport height and Android font scale;
           3) overscroll-behavior:contain — swiping past the drawer's scroll
              end (or swiping a fully-visible list) no longer chain-scrolls
              the page behind the dimmed backdrop. */
        .plz-sidebar {
                position: fixed; top: 0; left: 0; bottom: 0; width: 268px;
                height: auto;
                padding: 12px 10px;
                background: #fff; border-right: 1px solid var(--border);
                z-index: 105; overflow-y: auto;
                overscroll-behavior: contain;
                transform: translateX(-100%); transition: transform 0.22s ease;
        }
        .plz-sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-lg); }
        .plz-sidebar__head { padding: 4px 8px 12px; }
        /* v1.7.42: the drawer logo got BIGGER (user request) — the 268px drawer
           fits a ~50px-tall wordmark (logo.png is 1825×386 ≈ 4.7:1). The head
           anchor becomes a full-width flex box so max-width:100% resolves
           against a definite width, and the img keeps its aspect ratio under
           BOTH constraints (no distortion, huge Customizer logos clamp too). */
        .plz-sidebar__head .plz-logo { display: flex; }
        .plz-sidebar__head .plz-logo img { height: auto; width: auto; max-height: 52px; max-width: 100%; }
        .plz-sidebar__link { padding: 9px 12px; }
        /* v1.7.43: the nav stops being a shrinkable flex child in the drawer —
           it renders at its natural height and OWNS the bottom clearance, so
           the drawer's scrollable content always ends with an 84px + safe-area
           white buffer after the last link (Support / Settings / Admin Panel).
           The buffer sits INSIDE the scroll area, above the fixed bottom tab
           bar, and the drawer's own padding is back to a plain 12px. */
        .plz-sidebar__nav { flex: 0 0 auto; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
        .plz-sidebar__link--admin { border: 0; margin-top: 6px; }
        /* Dimmed backdrop behind the open drawer — tap anywhere to close. */
        body.plz-drawer-open::after {
                content: ""; position: fixed; inset: 0;
                background: rgba(15, 40, 20, 0.45); z-index: 104;
        }
        .plz-appbar__search { display: none; }
        .plz-userchip__meta { display: none; }
        /* App-style mobile header (logged-in): site logo + bell + avatar +
           red log-out icon — the burger lives in the bottom bar now. */
        .plz-appbar__logo { display: inline-flex; }
        /* v1.7.34: fluid appbar logo (was a fixed 32px) — max-height re-asserted
           because the 1024px block caps .plz-logo at 38px. */
        .plz-appbar__logo .plz-logo img { height: auto; max-height: 38px; max-width: 42vw; }
        .plz-appbar__logout { display: inline-flex; }
        .plz-appbar { padding: 12px 16px; gap: 12px; }
        /* v1.7.39: the appbar has NO ☰ at any width — the mobile header is
           exactly logo + bell + avatar + log-out (the ☰ lived beside the logo
           in v1.7.38 and the user doesn't want it there). The menu carrier is
           the bottom bar's ☰ burger (rendered for every logged-in view again),
           so the appbar burger button was removed from header.php entirely.
           The .plz-appbar__burger rule below stays as a guard for stale
           cached markup that still carries the old button. */
        .plz-appbar__burger { display: none !important; }
        /* Bottom tab bar: burger (opens the sidebar drawer) + 4 quick links. */
        .plz-bottomnav {
                display: grid; grid-template-columns: 44px repeat(4, 1fr); align-items: center; gap: 2px;
                position: fixed; left: 0; right: 0; bottom: 0; z-index: 110;
                background: #fff; border-top: 1px solid var(--border);
                padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
                box-shadow: 0 -4px 18px rgba(15, 40, 20, 0.08);
        }
        .plz-bottomnav__burger { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; padding: 9px 8px; background: none; border: 0; border-radius: 10px; cursor: pointer; }
        .plz-bottomnav__burger span { display: block; height: 2.5px; width: 100%; border-radius: 2px; background: var(--plz-700); }
        .plz-bottomnav__item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px; border-radius: 10px; text-decoration: none; color: var(--muted-fg); font-size: 0.68rem; font-weight: 600; font-family: var(--font-heading); line-height: 1.1; }
        .plz-bottomnav__icon { font-size: 1.25rem; line-height: 1; }
        .plz-bottomnav__item.is-active { color: var(--plz-700); background: var(--plz-50); }
        /* Clear space for the bar: shell bottom padding for the footer and a
           lift for the floating AI button + toasts (class added by app.js). */
        body.plz-has-bottomnav .plz-shell--app { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
        body.plz-has-bottomnav .plz-ai-fab--float { bottom: calc(76px + env(safe-area-inset-bottom)); }
        body.plz-has-bottomnav .plz-toasts { bottom: calc(76px + env(safe-area-inset-bottom)); }
        /* Phone gap trim: the fixed bottom bar's clearance already comes from
           the shell padding (body.plz-has-bottomnav), so the old 90px appmain
           bottom padding double-counted it and pushed the footer way down. */
        .plz-appmain { padding: 20px 16px 18px; }
        .plz-section { padding: 30px 0 16px; }
        .plz-field-row { grid-template-columns: 1fr; }
        /* Mobile footer: Features + Company share one row (left/right);
           brand and the Newsletter column stack full width. */
        .plz-footer__grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
        .plz-footer__brand { grid-column: 1 / -1; }
        .plz-footer__col--news { grid-column: 1 / -1; }
        /* v1.7.34: the footer brand owns a full row on phones — let the logo
           grow well past the header size (was capped by the shared rule). */
        .plz-footer__brand .plz-logo img { max-height: clamp(36px, 11vw, 52px); max-width: 76vw; }
        .plz-steps { grid-template-columns: 1fr; }
        .plz-section__head--row { flex-direction: column; align-items: flex-start; gap: 10px; }
        .plz-lm__controls { flex-direction: column; align-items: stretch; }
        /* v1.7.39: on phones the "Or set manually" row stacks too — label on
           its own line, slider full-width beneath (the slider used to share
           the row with the label and poked past the screen edge on narrow
           WebViews). The 260px min-width floor is gone at every width. */
        .plz-lm__manual { flex-wrap: wrap; row-gap: 6px; }
        .plz-lm__manual label { flex: 1 1 100%; }
        .plz-lm__manual input { flex: 1 1 100%; }
        .plz-community__row .plz-btn { margin-left: 0; width: 100%; }
}
/* v1.7.34: tiny-phone guard — at ≤359px the header row can no longer fit
   the bigger wordmark plus Login + Sign up + ☰, so those phones keep the
   v1.7.33 sizing (the growth from this round lands on ≥360px screens).
   v1.7.35: 34vw logo + slimmer pills so the now-unwrapped Sign up button
   still fits a 320px iPhone SE with slack. */
@media (max-width: 359px) {
        .plz-logo img { max-height: clamp(24px, 8.5vw, 28px); max-width: 34vw; }
        .plz-header__actions .plz-btn { padding: 6px 8px; font-size: 0.72rem; }
        /* v1.7.42: tiny phones keep a proportionally larger drawer logo too. */
        .plz-sidebar__head .plz-logo img { max-height: 44px; max-width: 100%; }
        .plz-footer__brand .plz-logo img { max-height: clamp(32px, 10vw, 44px); max-width: 78vw; }
}

/* v1.7.34 community plan gate: the free-member upsell card on the community
   page + the inline note that replaces the comment box for free members. */
.plz-community__upsell {
        display: flex; align-items: center; gap: 16px;
        border: 1px solid var(--plz-100, #dcead2); background: var(--plz-50, #f1f8e9);
        margin-bottom: 18px;
}
.plz-community__upsell-icon {
        flex: none; width: 46px; height: 46px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 1.4rem; background: #fff; border: 1px solid var(--plz-100, #dcead2);
}
.plz-community__upsell-txt { flex: 1; min-width: 0; }
.plz-community__upsell-txt strong { display: block; margin-bottom: 2px; }
.plz-community__upsell-txt p { margin: 0; font-size: 0.9rem; }
.plz-community__upsell .plz-btn { flex: none; }
.plz-comment__upsell {
        padding: 10px 12px; border-radius: 10px;
        background: var(--plz-50, #f1f8e9); color: var(--muted-fg, #5d6b5a);
        font-size: 0.88rem;
}
.plz-comment__upsell a { color: var(--plz-700, #2e7d32); font-weight: 600; text-decoration: none; }
.plz-comment__upsell a:hover { text-decoration: underline; }
@media (max-width: 560px) {
        .plz-community__upsell { flex-direction: column; align-items: flex-start; }
        .plz-community__upsell .plz-btn { width: 100%; }
}

/* ---------- Archive load-more + category deep-link chips ---------- */
.plz-chips a.plz-chip { text-decoration: none; display: inline-block; }
.plz-chip__count { opacity: 0.65; font-weight: 500; margin-left: 4px; }
.plz-loadmore-wrap { display: flex; justify-content: center; margin: 30px 0 10px; }
.plz-loadmore { min-width: 220px; }
.plz-loadmore.is-busy { pointer-events: none; opacity: 0.6; }
.plz-loadmore__count { opacity: 0.7; font-weight: 500; margin-left: 8px; }
.plz-post__tag { text-decoration: none; }
.plz-empty a { color: var(--plz-700); font-weight: 600; }

/* Guide archive search box (care / pests) */
.plz-guide-search { display: flex; gap: 8px; margin: 0 0 16px; max-width: 560px; }
.plz-guide-search input[type="search"] {
  flex: 1; min-width: 0; padding: 11px 16px;
  border: 1px solid var(--plz-border, #dbe3da); border-radius: 12px;
  font: inherit; background: #fff; color: inherit;
}
.plz-guide-search input[type="search"]:focus {
  outline: none; border-color: var(--plz-500, #4caf50);
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);
}
.plz-guide-search .plz-btn { white-space: nowrap; }
@media (max-width: 560px) {
  .plz-guide-search { flex-direction: column; }
  .plz-guide-search .plz-btn { width: 100%; }
}

/* AJAX search busy state (guide archives) */
.plz-guide-search.is-busy { opacity: .6; pointer-events: none; }
#plz-search-status { margin-top: 12px; }

/* ---------- Themed sign-in / sign-up pages ---------- */
.plz-authpage { padding: 48px 0 72px; }
.plz-authpage__wrap { max-width: 480px; }
.plz-authpage__brand { text-align: center; margin-bottom: 22px; }
.plz-authpage__leaf { font-size: 2.6rem; display: block; margin-bottom: 6px; }
.plz-authpage__brand h1 { font-family: var(--font-heading); font-size: 1.7rem; margin: 0 0 8px; }
.plz-authpage__brand p { margin: 0; }
.plz-authpage__card { padding: 26px 24px; }
.plz-authpage__notice {
  background: var(--plz-100, #e8f5e9); color: var(--plz-800, #1b5e20);
  border: 1px solid var(--plz-200, #c8e6c9); border-radius: 12px;
  padding: 11px 14px; font-size: 0.92rem; margin-bottom: 16px; text-align: center;
}
.plz-authpage__alt { text-align: center; margin: 16px 0 0; font-size: 0.93rem; }
.plz-authpage__alt a { color: var(--plz-600, #2e7d32); font-weight: 700; text-decoration: none; }
.plz-authpage__small { font-size: 0.82rem; margin: 10px 0 0; text-align: center; }
.plz-authpage__hint { text-align: center; color: var(--plz-700, #388e3c); font-weight: 600; margin-top: 18px; font-size: 0.9rem; }
.plz-authpage__perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.plz-authpage__perks > div {
  background: #fff; border: 1px solid var(--plz-border, #dbe3da); border-radius: 14px;
  padding: 12px 10px; text-align: center;
}
.plz-authpage__perks span { font-size: 1.2rem; display: block; margin-bottom: 4px; }
.plz-authpage__perks strong { display: block; font-size: 0.85rem; font-family: var(--font-heading); }
.plz-authpage__perks small { font-size: 0.72rem; line-height: 1.35; display: block; margin-top: 3px; }
@media (max-width: 560px) { .plz-authpage__perks { grid-template-columns: 1fr; } }

/* ---------- Tool gate panels (login / tier / points) ---------- */
.plz-gate { text-align: center; padding: 44px 28px; }
.plz-gate__icon { font-size: 2.8rem; display: block; margin-bottom: 10px; }
.plz-gate h2 { font-family: var(--font-heading); font-size: 1.45rem; margin: 0 0 10px; }
.plz-gate p { max-width: 520px; margin: 0 auto; }
.plz-gate__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; }
.plz-gate__note { margin-top: 18px !important; font-size: 0.86rem; }
.plz-gate__tiers { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }

/* ---------- AI points banner (identify / diagnose) ---------- */
.plz-pointsbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--plz-100, #e8f5e9); border: 1px solid var(--plz-200, #c8e6c9);
  border-radius: 12px; padding: 9px 14px; margin-bottom: 18px; font-size: 0.9rem;
}
.plz-pointsbar__count { font-weight: 700; color: var(--plz-700, #388e3c); }
/* Upgrade is a real button now (green pill) — the bare bold text read as
   decoration, not as the actionable link it is (identify + diagnose share
   this class, one rule covers both pages). */
.plz-pointsbar__up {
  margin-left: auto; font-weight: 700; color: #fff; text-decoration: none;
  background: var(--plz-600, #2e7d32); padding: 7px 16px; border-radius: 999px;
  line-height: 1.2; box-shadow: 0 1px 3px rgba(46, 125, 50, 0.3);
  transition: background 0.15s;
}
.plz-pointsbar__up:hover { background: var(--plz-700, #388e3c); color: #fff; text-decoration: none; }
.plz-pointsbar__up:focus-visible { outline: 2px solid var(--plz-500, #4caf50); outline-offset: 2px; }

/* ---------- Comments / Leave a Reply (blog articles) ---------- */
.plz-comments { margin-top: 38px; }
.plz-comments .comments-title { font-family: var(--font-heading); font-size: 1.3rem; margin: 0 0 18px; }
.plz-comments .comment-list { list-style: none; margin: 0; padding: 0; }
.plz-comments .comment-list .children { list-style: none; margin: 0 0 0 34px; padding: 0; }
.plz-comments .comment-list li { margin: 0 0 14px; }
.plz-comments .comment-body { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.plz-comments .comment-author { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; }
.plz-comments .comment-author .avatar { width: 34px; height: 34px; border-radius: 50%; }
.plz-comments .comment-author .says { color: var(--muted-fg); font-weight: 500; }
.plz-comments .comment-metadata { margin: 6px 0 8px 44px; font-size: 0.78rem; }
.plz-comments .comment-metadata a { color: var(--muted-fg); text-decoration: none; }
.plz-comments .comment-metadata a:hover { color: var(--plz-700); }
.plz-comments .comment-awaiting-moderation { margin: 8px 0 0; font-size: 0.82rem; color: var(--amber-700); }
.plz-comments .comment-content { font-size: 0.95rem; }
.plz-comments .comment-content p { margin: 0 0 10px; }
.plz-comments .comment-content p:last-child { margin-bottom: 0; }
.plz-comments .reply { margin-top: 10px; }
.plz-comments .reply a { display: inline-block; border: 1.5px solid var(--plz-600); color: var(--plz-700); border-radius: 999px; padding: 3px 14px; font-size: 0.8rem; font-weight: 600; text-decoration: none; }
.plz-comments .reply a:hover { background: var(--plz-800); border-color: var(--plz-800); color: #fff; }
.plz-comments .comment-respond { background: var(--plz-50); border: 1px solid var(--plz-100); border-radius: var(--radius-lg); padding: 26px 28px; margin-top: 28px; }
.plz-comments .comment-reply-title { font-family: var(--font-heading); font-size: 1.2rem; margin: 0 0 4px; }
.plz-comments #cancel-comment-reply-link, .plz-comments .cancel-comment-reply-link { margin-left: 10px; font-size: 0.78rem; font-weight: 600; color: var(--muted-fg); text-decoration: none; }
.plz-comments #cancel-comment-reply-link:hover, .plz-comments .cancel-comment-reply-link:hover { color: var(--red-600); }
.plz-comments .plz-comments__note, .plz-comments .comment-notes, .plz-comments .logged-in-as { font-size: 0.86rem; color: var(--muted-fg); margin: 0 0 18px; }
.plz-comments .logged-in-as a { color: var(--plz-700); text-decoration: none; font-weight: 600; }
.plz-comments .comment-form p, .plz-comments .plz-commentform p { margin: 0 0 14px; }
.plz-comments .comment-form label, .plz-comments .plz-commentform label { display: block; font-size: 0.86rem; font-weight: 600; margin-bottom: 6px; }
.plz-comments .comment-form .required, .plz-comments .plz-commentform .required { color: var(--destructive); }
/* v1.7.42: the form element carries class "plz-commentform" (set through
   comment_form_defaults class_form), NOT the core "comment-form" — so every
   .comment-form descendant rule silently stopped matching and the logged-in
   comment textarea fell back to its intrinsic cols=45 width (~500px),
   overflowing phones. All field rules now cover BOTH classes, and the
   textarea is pinned to its container (max-width + border-box) so no
   attribute or plugin CSS can push it outside the card again. */
.plz-comments .comment-form input[type="text"], .plz-comments .comment-form input[type="email"], .plz-comments .comment-form input[type="url"], .plz-comments .comment-form textarea,
.plz-comments .plz-commentform input[type="text"], .plz-comments .plz-commentform input[type="email"], .plz-comments .plz-commentform input[type="url"], .plz-comments .plz-commentform textarea {
        width: 100%; max-width: 100%; box-sizing: border-box; display: block; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 10px;
        font: inherit; background: #fff; color: inherit; transition: border-color 0.15s, box-shadow 0.15s;
}
.plz-comments .plz-commentform textarea#comment { min-height: 120px; resize: vertical; }
.plz-comments .comment-form input[type="text"]:focus, .plz-comments .comment-form input[type="email"]:focus, .plz-comments .comment-form input[type="url"]:focus, .plz-comments .comment-form textarea:focus,
.plz-comments .plz-commentform input[type="text"]:focus, .plz-comments .plz-commentform input[type="email"]:focus, .plz-comments .plz-commentform input[type="url"]:focus, .plz-comments .plz-commentform textarea:focus {
        outline: none; border-color: var(--plz-600); box-shadow: 0 0 0 3px var(--plz-100);
}
.plz-comments .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 8px; }
.plz-comments .comment-form-cookies-consent label { display: inline; margin: 0; font-weight: 500; color: var(--muted-fg); font-size: 0.82rem; }
.plz-comments .comment-form-cookies-consent input[type="checkbox"] { width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--plz-600); flex-shrink: 0; }
.plz-comments .form-submit { margin: 20px 0 0 !important; }
@media (max-width: 640px) {
        .plz-comments .comment-respond { padding: 20px 16px; }
        .plz-comments .comment-list .children { margin-left: 18px; }
        .plz-comments .comment-metadata { margin-left: 0; }
}

/* ---------- v1.7.5: AI points line in scan results ---------- */
.plz-pointsleft { margin: 10px 0 0; font-weight: 700; color: var(--plz-700, #388e3c); background: var(--plz-50); border: 1px dashed var(--plz-200, #c8e6c9); border-radius: 10px; padding: 8px 12px; display: inline-block; }

/* ---------- v1.7.5: Add-plant library search ---------- */
.plz-quickadd { max-width: 540px; }
.plz-plant-search__results { border: 1px solid var(--border); border-radius: 12px; max-height: 260px; overflow-y: auto; margin-top: 10px; background: #fff; }
.plz-plantsearch__row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.plz-plantsearch__row:last-child { border-bottom: 0; }
.plz-plantsearch__emoji { font-size: 1.5rem; flex-shrink: 0; }
.plz-plantsearch__body { flex: 1; min-width: 0; }
.plz-plantsearch__body strong { display: block; line-height: 1.3; }
.plz-plantsearch__body small { display: block; font-size: 0.78rem; margin-top: 2px; }
.plz-adddivider { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--muted-fg); font-size: 0.82rem; font-weight: 600; }
.plz-adddivider::before, .plz-adddivider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ---------- v1.7.5: Recent diagnoses — clickable rows + detail modal ---------- */
button.plz-diagrow { width: 100%; cursor: pointer; font: inherit; color: inherit; text-align: left; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
button.plz-diagrow:hover { border-color: var(--plz-500); box-shadow: var(--shadow); transform: translateY(-1px); }
.plz-diagrow__thumb--lg { width: 86px; height: 86px; font-size: 2.4rem; border-radius: 16px; }
.plz-diagmodal { max-width: 680px; }
.plz-diagmodal__head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.plz-diagmodal__actions { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; margin-top: 22px; border-top: 1px solid var(--border); padding-top: 16px; }
.plz-diagmodal__del { background: #fff; color: var(--red-600); border: 1.5px solid var(--red-600); }
.plz-diagmodal__del:hover { background: var(--red-600); color: #fff; }
.plz-diagmodal__raw pre { white-space: pre-wrap; word-break: break-word; background: var(--muted); border-radius: 10px; padding: 12px; font-size: 0.8rem; max-height: 300px; overflow: auto; }

/* ---------- v1.7.5: Support tickets — numbers, reply box, status chips ---------- */
.plz-ticket__no { display: block; margin-top: 4px; font-weight: 700; color: var(--plz-700); letter-spacing: 0.02em; }
.plz-ticket__actions { display: flex; gap: 16px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.plz-ticket__msg--admin { border-left: 3px solid var(--plz-600); background: var(--plz-50); }
.plz-ticket__replyform { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.plz-ticket__replyform textarea { width: 100%; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 10px; font: inherit; resize: vertical; }
.plz-ticket__replyform textarea:focus { outline: none; border-color: var(--plz-600); box-shadow: 0 0 0 3px var(--plz-100); }
.plz-ticket__replyform button { align-self: flex-end; }
.plz-ticket__status--answered { background: var(--sky-100, #e3f2fd); color: var(--sky-700, #0277bd); }

/* ---------- v1.7.17: Plant Analytics upgrade (health gauge, growth, schedule, insights) ---------- */
.plz-anl-row { margin-top: 18px; }
.plz-anl-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.plz-anl-kpi { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); }
.plz-anl-kpi__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; min-height: 40px; }
.plz-anl-tile { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; box-shadow: var(--shadow-sm); }
.plz-anl-tile--health { background: linear-gradient(135deg, #34d399, #059669); }
.plz-anl-tile--water { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.plz-anl-tile--fert { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.plz-anl-tile--streak { background: linear-gradient(135deg, #fb923c, #ef4444); }
.plz-anl-ontrack { background: #d1fae5; color: #047857; border-radius: 999px; padding: 3px 10px; font-size: 0.66rem; font-weight: 700; }
.plz-anl-trend { font-size: 1rem; }
.plz-anl-trend.is-good { color: #10b981; }
.plz-anl-trend.is-warn { color: #f59e0b; }
.plz-anl-trend.is-low { color: #f97316; }
.plz-anl-trend.is-bad { color: #dc2626; }
.plz-anl-kpi__val { display: block; font-size: 1.9rem; font-family: var(--font-heading); font-weight: 800; line-height: 1.1; }
.plz-anl-kpi__val.is-good { color: #10b981; }
.plz-anl-kpi__val.is-warn { color: #f59e0b; }
.plz-anl-kpi__val.is-low { color: #f97316; }
.plz-anl-kpi__val.is-bad { color: #dc2626; }
.plz-anl-kpi small { display: block; margin-top: 3px; font-size: 0.72rem; color: var(--muted-fg); }
.plz-anl-minis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 16px; }
.plz-anl-mini { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 12px; text-align: center; box-shadow: var(--shadow-sm); }
.plz-anl-mini strong { display: block; font-size: 1.25rem; font-family: var(--font-heading); }
.plz-anl-mini small { display: block; margin-top: 2px; font-size: 0.64rem; color: var(--muted-fg); }
.plz-anl-mini strong.is-green { color: var(--plz-600); }
.plz-anl-mini strong.is-red { color: var(--red-600); }
.plz-anl-gaugewrap { display: flex; justify-content: center; margin: 6px 0 18px; }
.plz-anl-gauge { position: relative; width: 150px; height: 150px; }
.plz-anl-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.plz-anl-gauge__track { fill: none; stroke: #f0f0f0; stroke-width: 10; }
.plz-anl-gauge__arc { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray 0.7s ease; }
.plz-anl-gauge__arc.is-good { stroke: #10b981; }
.plz-anl-gauge__arc.is-warn { stroke: #f59e0b; }
.plz-anl-gauge__arc.is-low { stroke: #f97316; }
.plz-anl-gauge__arc.is-bad { stroke: #dc2626; }
.plz-anl-gauge__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.plz-anl-gauge__center strong { font-size: 2rem; font-family: var(--font-heading); line-height: 1; }
.plz-anl-gauge__center strong.is-good { color: #10b981; }
.plz-anl-gauge__center strong.is-warn { color: #f59e0b; }
.plz-anl-gauge__center strong.is-low { color: #f97316; }
.plz-anl-gauge__center strong.is-bad { color: #dc2626; }
.plz-anl-gauge__center small { font-size: 0.64rem; color: var(--muted-fg); margin-top: 3px; }
.plz-anl-splitrow { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--muted-fg); margin: 10px 0 5px; }
.plz-anl-splitrow__val { font-weight: 700; color: var(--foreground); }
.plz-anl-track { height: 8px; background: #f0f0f0; border-radius: 999px; overflow: hidden; }
.plz-anl-track--slim { height: 6px; }
.plz-anl-track > span { display: block; height: 100%; border-radius: 999px; transition: width 0.7s ease; }
.plz-anl-track > span.is-good { background: #10b981; }
.plz-anl-track > span.is-warn { background: #f59e0b; }
.plz-anl-track > span.is-low { background: #f97316; }
.plz-anl-track > span.is-bad { background: #dc2626; }
.plz-anl-track > span.is-amber { background: #f59e0b; }
.plz-anl-c0 { background: #10b981; } .plz-anl-c1 { background: #3b82f6; } .plz-anl-c2 { background: #f59e0b; } .plz-anl-c3 { background: #8b5cf6; }
.plz-anl-c4 { background: #ec4899; } .plz-anl-c5 { background: #14b8a6; } .plz-anl-c6 { background: #f97316; } .plz-anl-c7 { background: #6366f1; }
.plz-anl-growth { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; height: 200px; padding-top: 14px; }
.plz-anl-gcol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.plz-anl-gcol__val { font-size: 0.72rem; font-weight: 700; min-height: 1em; }
.plz-anl-gcol__barwrap { width: 100%; height: 140px; display: flex; align-items: flex-end; }
.plz-anl-gcol__bar { width: 100%; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--plz-400), var(--plz-600)); opacity: 0.55; transition: height 0.7s ease; }
.plz-anl-gcol__bar.is-last { opacity: 1; }
.plz-anl-gcol small { font-size: 0.62rem; color: var(--muted-fg); }
.plz-anl-barrow { margin-bottom: 12px; }
.plz-anl-barrow:last-child { margin-bottom: 0; }
.plz-anl-barrow__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.78rem; margin-bottom: 5px; }
.plz-anl-barrow__name { font-weight: 600; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plz-anl-barrow__name--muted { font-weight: 400; color: var(--muted-fg); }
.plz-anl-barrow__meta { color: var(--muted-fg); flex-shrink: 0; }
.plz-anl-sublabel { margin: 14px 0 8px; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-fg); }
.plz-anl-sublabel + .plz-anl-chips { margin-top: 0; }
.plz-anl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.plz-anl-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); background: #fafafa; border-radius: 999px; padding: 5px 12px; font-size: 0.76rem; }
.plz-anl-chip b { font-weight: 700; }
.plz-anl-person { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; margin-bottom: 8px; }
.plz-anl-person:last-child { margin-bottom: 0; }
.plz-anl-person--red { background: #fef2f2; border: 1px solid #fee2e2; }
.plz-anl-person--green { background: #ecfdf5; border: 1px solid #d1fae5; }
.plz-anl-person__emoji { font-size: 1.4rem; flex-shrink: 0; }
.plz-anl-person__main { flex: 1; min-width: 0; }
.plz-anl-person__main strong { display: block; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plz-anl-person__main small { font-size: 0.68rem; color: var(--muted-fg); }
.plz-anl-pill { flex-shrink: 0; border-radius: 999px; padding: 4px 10px; font-size: 0.7rem; font-weight: 700; }
.plz-anl-pill--red { background: #fee2e2; color: #b91c1c; }
.plz-anl-pill--green { background: #d1fae5; color: #047857; }
.plz-anl-schedhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.plz-anl-schedhead h2 { margin-bottom: 0; }
.plz-anl-range { display: flex; gap: 5px; }
.plz-anl-rangebtn { border: 0; cursor: pointer; font: inherit; font-size: 0.74rem; font-weight: 600; padding: 5px 13px; border-radius: 999px; background: #f0f0f0; color: var(--muted-fg); transition: background 0.15s, color 0.15s; }
.plz-anl-rangebtn:hover { background: #e5e5e5; }
.plz-anl-rangebtn.is-active { background: var(--plz-600); color: #fff; }
.plz-anl-schedrow { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; margin-top: 10px; background: #fff; }
.plz-anl-schedrow__day { min-width: 86px; font-size: 0.78rem; font-weight: 600; padding-top: 3px; }
.plz-anl-schedrow__chips { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.plz-anl-task { display: inline-flex; align-items: center; gap: 3px; font-size: 0.7rem; font-weight: 600; border-radius: 999px; padding: 3px 9px; }
.plz-anl-task.is-water { background: #dbeafe; color: #1d4ed8; }
.plz-anl-task.is-fert { background: #ede9fe; color: #6d28d9; }
.plz-anl-schedrow__counts { display: flex; gap: 6px; flex-shrink: 0; }
.plz-anl-count { display: inline-flex; align-items: center; gap: 3px; font-size: 0.7rem; font-weight: 700; border-radius: 999px; padding: 3px 9px; }
.plz-anl-count.is-water { background: #dbeafe; color: #1d4ed8; }
.plz-anl-count.is-fert { background: #ede9fe; color: #6d28d9; }
.plz-anl-insights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 4px; }
.plz-anl-tip { border-radius: 12px; padding: 12px 14px; border: 1px solid transparent; }
.plz-anl-tip__icon { display: block; font-size: 1rem; margin-bottom: 5px; }
.plz-anl-tip__title { margin: 0; font-size: 0.8rem; font-weight: 700; }
.plz-anl-tip__body { margin: 3px 0 0; font-size: 0.72rem; line-height: 1.5; color: var(--muted-fg); }
.plz-anl-tip.is-blue { background: #eff6ff; border-color: #dbeafe; }
.plz-anl-tip.is-purple { background: #f5f3ff; border-color: #ddd6fe; }
.plz-anl-tip.is-orange { background: #fff7ed; border-color: #fed7aa; }
.plz-anl-tip.is-red { background: #fef2f2; border-color: #fee2e2; }
.plz-anl-tip.is-green { background: #ecfdf5; border-color: #d1fae5; }
.plz-anl-none { text-align: center; padding: 46px 20px; }
.plz-anl-none span { font-size: 3rem; display: block; margin-bottom: 10px; }
.plz-anl-none strong { display: block; font-family: var(--font-heading); font-size: 1.05rem; max-width: 480px; margin: 0 auto 6px; }
.plz-anl-none p { color: var(--muted-fg); font-size: 0.82rem; max-width: 440px; margin: 0 auto; }
@media (max-width: 980px) {
        .plz-anl-kpis { grid-template-columns: repeat(2, 1fr); }
        .plz-anl-minis { grid-template-columns: repeat(3, 1fr); }
        .plz-anl-insights { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
        .plz-anl-kpi { padding: 16px; }
        .plz-anl-kpi__val { font-size: 1.6rem; }
        .plz-anl-minis { grid-template-columns: repeat(2, 1fr); }
        .plz-anl-insights { grid-template-columns: 1fr; }
        .plz-anl-schedrow { flex-wrap: wrap; }
        .plz-anl-schedrow__day { min-width: 0; }
}

/* ---------- Dashboard + My Plants responsive blocks ----------
   These MUST live after the base rules they refine (plz-plantstats,
   #plz-plants-grid, plz-myplants__bar, plz-cal__* …). They used to sit
   BEFORE those bases, and since media queries add no specificity the
   later base declarations won at every width — phones rendered the
   plant grid as three ~100px columns with one-letter-per-line names.
   Kept at the very end of the file so the cascade stays correct. */
@media (max-width: 980px) {
        .plz-dash__duo, .plz-dash__trio { grid-template-columns: 1fr; }
        .plz-plantstats { grid-template-columns: repeat(3, 1fr); }
        #plz-plants-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
        .plz-qa { grid-template-columns: repeat(2, 1fr); }
        .plz-plantlets { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
        .plz-qa { grid-template-columns: 1fr; }
        /* Recommended for You: one article per line on phones — the 2-up
           squeeze made covers + clamped titles unreadable. */
        .plz-reco { grid-template-columns: 1fr; }
        /* Guide search results (plant + insect archives): one card per line on
           phones too — the 2-up squeeze crushed covers + long guide names.
           Desktop keeps 4-up and tablets keep 2-up. */
        #plz-care-grid, #plz-insect-grid { grid-template-columns: 1fr; }
        .plz-plantstats { grid-template-columns: repeat(2, 1fr); }
        .plz-plantstat:last-child:nth-child(odd) { grid-column: 1 / -1; }
        #plz-plants-grid { grid-template-columns: 1fr; }
        /* My Plants bar: tighter pills so the three tabs fit a phone row,
           and the Add Plant action drops to a comfortable full-width line. */
        .plz-tabs--pill .plz-tab { padding: 9px 14px; font-size: 0.84rem; }
        .plz-myplants__bar { gap: 10px; }
        .plz-addplant { width: 100%; justify-content: center; }
        /* Card heads: allow the title + "View All" link to wrap instead of
           squeezing each other on narrow screens. */
        .plz-dcard__head { flex-wrap: wrap; }
        /* Calendar cells stay readable on narrow screens. */
        .plz-cal { gap: 4px; }
        .plz-cal__cell { min-height: 58px; padding: 4px 3px; font-size: 0.66rem; border-radius: 8px; }
        .plz-cal__dot { width: 7px; height: 7px; margin-right: 2px; }
        /* Welcome header: slightly smaller greeting + pills on phones. */
        .plz-dash__hi { font-size: 1.35rem; }
        .plz-dash__pill { padding: 5px 10px; font-size: 0.76rem; }
        /* v1.7.37: the floating AI Plant Buddy popup was a fixed 340px wide
           pinned 24px from the right — on ≤364px phones (320/360 are the
           common Android widths) it poked up to 44px past the LEFT edge of
           the screen. Edge-to-edge with a small gutter instead, and cap the
           height so it can't climb under the appbar/topbar on short screens. */
        .plz-aiwidget { left: 14px; right: 14px; width: auto; max-height: min(460px, 62vh); }
        .plz-ai-fab--float { right: 16px; }
}

/* ---------- v1.7.24: community feed on phones ---------- */
@media (max-width: 560px) {
        .plz-post { padding: 16px 14px; border-radius: 14px; }
        .plz-post__head { flex-wrap: wrap; }
        .plz-post h3, .plz-post p { overflow-wrap: break-word; }
        .plz-post__actions { flex-wrap: wrap; gap: 8px; }
        .plz-post__img { max-height: 300px; }
        /* Composer: photo button and tag select stack full-width instead of
           squeezing side by side (the share button already goes full-width
           in the ≤768px block). */
        .plz-community__row .plz-dropzone--sm, .plz-community__row .plz-select { width: 100%; }
}

/* ---------- v1.7.40: issue-70 width & scroll hardening ----------
   1b) Insect guide "Diagnose from Image" CTA poked past the screen on
   phones: .plz-btn is nowrap (v1.7.35, protects the header Sign up pill)
   and --lg adds 26px side padding, so the emoji + 19-character label could
   not shrink below ~236px while the card content box is ~224-248px at
   320-360px. The CTA becomes a full-width block on phones (a global
   max-width guard was tried and reverted — it clamped buttons inside
   undersized flex parents, shrinking the light-meter slider). */
@media (max-width: 640px) {
        .plz-insectcta .plz-btn { width: 100%; max-width: 100%; }
}
/* Last-resort: on very narrow screens a large content CTA may wrap its
   label instead of clipping (header pills are --sm and stay nowrap). */
@media (max-width: 400px) {
        .plz-btn--lg { white-space: normal; line-height: 1.3; }
}

/* 1a + 3b) Blog comment box could render wider than the screen when a
   comments plugin or a long unbroken value lands inside the WP respond
   block. Clamp every layer of the comment area to its container and let
   long words/labels wrap instead of stretching the row. */
.plz-comments { min-width: 0; max-width: 100%; }
.plz-comments .comment-respond,
.plz-comments .comment-form { min-width: 0; max-width: 100%; }
.plz-comments .comment-form p { min-width: 0; max-width: 100%; }
.plz-comments .comment-form input[type="text"],
.plz-comments .comment-form input[type="email"],
.plz-comments .comment-form input[type="url"],
.plz-comments .comment-form textarea { max-width: 100%; min-width: 0; }
.plz-comments .comment-form .form-submit input[type="submit"] { max-width: 100%; }
.plz-comments .comment-notes,
.plz-comments .logged-in-as,
.plz-comments .comment-form-cookies-consent label,
.plz-comments .comment-reply-title { overflow-wrap: anywhere; min-width: 0; }
.plz-comments .comment-list .comment-body { overflow-wrap: anywhere; }

/* Community feed comment row: the comment input was flex:1 WITHOUT
   min-width:0 and the inline captcha question is nowrap, so the row's
   min-content (~comment input + question + 72px answer + submit) blew
   past phone screens when a member opened the comment box. The row now
   wraps, the input can shrink to 0, and the captcha stacks like the
   auth card's at ≤560px. */
.plz-comment__form { flex-wrap: wrap; row-gap: 8px; }
.plz-comment__form > input[type="text"] { flex: 1 1 140px; min-width: 0; }
.plz-comment__form .plz-captcha--inline { flex: 1 1 100%; min-width: 0; }
.plz-comment__form .plz-captcha--inline .plz-captcha__q { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.plz-comment__form .plz-captcha--inline .plz-captcha__a { flex: 0 0 72px; width: 72px; min-width: 0; }
.plz-comment__form .plz-btn { flex: 0 0 auto; }
@media (max-width: 560px) {
        .plz-comment__form .plz-captcha--inline .plz-captcha__q { flex: 1 1 100%; white-space: normal; }
        .plz-comment__form .plz-captcha--inline .plz-captcha__a { flex: 1 1 100%; width: 100%; }
}

/* v1.7.40: wheel/touch gestures on a fullscreen overlay must not chain-scroll
   the document underneath (browsers fall through when the overlay itself
   cannot scroll). contain keeps the gesture inside the overlay. */
.plz-modal, .plz-lightbox { overscroll-behavior: contain; }

/* ---------- v1.7.41: issue-71 — guest login freeze, home page polish, members-only comments ---------- */

/* 1) Guest login page froze: the sign-in / sign-up pages inherit every
   scroll lock their previous page left behind (auth modal inline lock,
   app drawer class lock, another plugin's menu locking <html> or <body>
   with CSS). These pages ARE the login UI — they must always scroll.
   The CSS guard forces scrollability unless an overlay is genuinely
   open (the JS lock-sync in app.js v1.7.40/41 keeps it honest: it drops
   stale inline locks + plz-modal-open on load, on first interaction,
   every 1.5s and on pageshow). plz-modal-open / plzapp-menu-open lift
   the guard so a legitimately-open auth modal or guest drawer still
   locks the page behind it. */
body.plz-authpage-body:not(.plz-modal-open):not(.plzapp-menu-open) {
        overflow-y: auto !important;
        position: static !important; /* defeats position:fixed body locks (iOS modal pattern) */
}
html:has(body.plz-authpage-body:not(.plz-modal-open):not(.plzapp-menu-open)) {
        overflow-y: auto !important;
}

/* 3) Hero stats ("1000+ plant guides · 98% ID accuracy · 500+ pest guides ·
   24/7 AI assistant") wrapped onto two lines on phones — the 28px gaps and
   the 1.4rem/0.85rem fonts cannot fit 4 items in ~280-390px. One line on
   phones: nowrap + tighter gap + shrunk type (desktop is untouched). */
@media (max-width: 560px) {
        .plz-hero__stats { flex-wrap: nowrap; gap: 8px; margin-top: 16px; }
        .plz-hero__stats li { min-width: 0; }
        .plz-hero__stats strong { font-size: 1.02rem; }
        .plz-hero__stats span { font-size: 0.64rem; letter-spacing: -0.2px; white-space: nowrap; }
}
@media (max-width: 400px) {
        .plz-hero__stats { gap: 5px; }
        .plz-hero__stats strong { font-size: 0.95rem; }
        .plz-hero__stats span { font-size: 0.6rem; }
}

/* 4) The 4 action cards under the hero: the user asked for a visibly
   smaller gap above and below the section in mobile view. The ≤768px
   .plz-section rule (30/16) beats --snug on source order — re-assert the
   snug trim AFTER it so the cards sit close to the hero and to the
   features block. */
@media (max-width: 768px) {
        .plz-section--snug { padding-top: 10px; padding-bottom: 10px; }
}

/* 2) Members-only comments: the guest gate card inside .plz-comments
   (rendered by plantlyzer_members_comment_gate()) — spacing matches the
   old respond block, the .plz-gate card style does the rest. */
.plz-comments .plz-comments__gate { margin-top: 28px; }
.plz-comments .comment-list { min-width: 0; max-width: 100%; }
.plz-comments .comment-list .comment-body { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }