/* Beehiveful honey/amber theme */

/* Self-hosted Nunito — same files Google Fonts serves for the latin
   subset of weights 600/700. Downloading them once drops a DNS lookup
   + TCP handshake off the first-paint critical path on 4G mobile
   (saves ~100–200ms on cold loads). The files are a variable font so
   a single woff2 covers both weights we use. */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url('../fonts/nunito-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url('../fonts/nunito-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --bh-honey: #d2691e;
    --bh-honey-dark: #a0501a;
    --bh-amber: #f4a261;
    --bh-amber-light: #fce4b3;
    --bh-cream: #fffbf0;
    --bh-bg: #fff8e7;
    --bh-text: #3e2a13;
    /* Previously #7a5c3b which tested at 4.33:1 on the cream body bg —
     * just under WCAG AA 4.5:1 for small text. #6a4a2b bumps contrast
     * above 5.3:1 on cream and still reads as the same warm-muted tone. */
    --bh-text-muted: #6a4a2b;
    --bh-line: #e8d4a0;
    --bh-shadow: rgba(80, 50, 0, 0.1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
    /* Kill iOS's gray tap flash — we handle our own feedback via :active */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* ============================================================
 * Focus indicators — WCAG 2.4.7 Focus Visible
 *
 * Keyboard users need a visible, high-contrast marker for the focused
 * element. Default browser rings are inconsistent (Chromium's blue
 * ring vanishes against our honey palette) and :focus (without
 * -visible) would flash on every mouse click too.
 *
 * Two rings: dark for light surfaces (body/cards), cream for dark
 * surfaces (navbar, BeeAI toggle, honey buttons). Both at 3px so
 * they're unmistakably visible against any background we use.
 * ============================================================ */
:focus { outline: none; }   /* we handle ourselves via :focus-visible */

:focus-visible {
    outline: 3px solid var(--bh-text);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Dark surfaces — nav, primary buttons, BeeAI toggle — need a light ring */
.bh-navbar a:focus-visible,
.bh-navbar .bh-btn-nav-ghost:focus-visible,
.bh-navbar-toggle:focus-visible,
.bh-btn:focus-visible,
.bh-btn-nav-ghost:focus-visible,
.beeai-toggle:focus-visible,
.beeai-send:focus-visible,
.bh-landing-hero .bh-btn:focus-visible {
    outline: 3px solid var(--bh-cream);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(62, 42, 19, 0.6);
}

/* Image modal — focused content inside the dialog gets the dark ring */
.bh-modal-overlay img:focus-visible,
.bh-modal-close:focus-visible {
    outline: 3px solid var(--bh-cream);
    outline-offset: 3px;
}

/* Skip-to-content link — WCAG 2.4.1 Bypass Blocks.
 * Hidden off-screen until focused; when Tab'd from any page load it
 * pops into view at top-left and lets keyboard users jump past the
 * nav to the main content area. */
.bh-skip-link {
    position: absolute;
    left: -10000px;
    top: -10000px;
    z-index: 10000;
    background: var(--bh-text);
    color: var(--bh-cream);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
}
.bh-skip-link:focus,
.bh-skip-link:focus-visible {
    left: 1rem;
    top: 1rem;
    outline: 3px solid var(--bh-cream);
    outline-offset: 2px;
}

/* Visually-hidden — content that's readable by screen readers but not
 * painted. Used for non-decorative emoji helpers ("💧 precipitation",
 * "✓ good day") and for labels on icon-only controls. */
.bh-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
 * Reduced motion — WCAG 2.3.3 / 2.2.2
 *
 * Honor the user's prefers-reduced-motion setting by stripping the
 * transform/opacity animations (button lift, loading pulse, BeeAI
 * toggle lift, progress bar transitions). The loading pulse becomes
 * static dots at 70% opacity so the "still loading" signal persists.
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .bh-loading-dot { animation: none; opacity: 0.7; }
    .bh-btn:hover,
    .bh-btn-secondary:hover,
    .beeai-toggle:hover { transform: none; }
}

body {
    background-color: var(--bh-bg);
    color: var(--bh-text);
    font-family: Georgia, "Times New Roman", serif;
    min-height: 100vh;
    margin: 0;
    /* Respect home-indicator inset on notched devices */
    padding-bottom: env(safe-area-inset-bottom);
}

.bh-navbar {
    background: var(--bh-honey);
    color: white;
    padding: 0.75rem 1rem;
    box-shadow: 0 2px 4px var(--bh-shadow);
    position: relative;
    font-family: 'Nunito', system-ui, -apple-system, sans-serif;
    letter-spacing: 0.01em;
}
/* Sticky on mobile only — on long landing/forecast pages, users can
   reach nav without scrolling all the way back up (thumb-zone win).
   Desktop stays relative so wide layouts aren't capped by its height. */
@media (max-width: 768px) {
    .bh-navbar {
        position: sticky;
        top: 0;
        z-index: 50;
    }
    /* Anchor jumps (table-of-contents, slug anchors) land below the
       sticky nav instead of hiding under it. */
    :target,
    .bh-prose h2,
    .bh-prose h3 { scroll-margin-top: 72px; }
}
.bh-navbar a { color: white; text-decoration: none; }
.bh-navbar .brand { font-weight: 700; font-size: 1.25rem; }

/* Two-row banner. Top row: brand block + user actions on the right.
 * Bottom row: nav links spanning the width. Hamburger toggle (mobile)
 * lives in the top row alongside user actions; the nav-links row
 * collapses into a drawer below. */
.bh-navbar-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.bh-navbar-user {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
/* Two render points for the user-actions block (desktop top-right vs
 * mobile in-drawer) — visibility flipped per breakpoint so we never
 * show both. The HTML renders both to keep the macro single-source
 * of truth. */
.bh-navbar-user-desktop { display: flex; }
.bh-navbar-user-mobile  { display: none; }
.bh-navbar-userlabel {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.85rem;
    line-height: 1.2;
    white-space: nowrap;
}
.bh-navbar-userlabel strong { font-weight: 700; }

.bh-navbar .nav-links {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 1.05rem;
}
.bh-navbar .nav-links a { padding: 0.25rem 0.25rem; border-radius: 4px; }
.bh-navbar .nav-links a:hover, .bh-navbar .nav-links a.active { background: rgba(0,0,0,0.15); }

/* Desktop-only: cells pill + Upgrade CTA right-aligned on the nav-links
   row. margin-left:auto pushes this block to the far right so menu links
   stay grouped on the left. Mobile hides this block (the drawer mirror
   renders cells+upgrade stacked with the account label instead). */
.bh-navbar-badges-desktop {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
}

/* Hamburger — hidden on desktop, the only nav trigger on mobile. */
.bh-navbar-toggle {
    display: none;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 4px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    padding: 0;
    position: relative;
}
.bh-navbar-toggle-bars,
.bh-navbar-toggle-bars::before,
.bh-navbar-toggle-bars::after {
    display: block;
    position: absolute;
    left: 8px;
    right: 8px;
    height: 2px;
    background: white;
    border-radius: 2px;
    content: "";
}
.bh-navbar-toggle-bars { top: 50%; transform: translateY(-50%); }
.bh-navbar-toggle-bars::before { top: -7px; }
.bh-navbar-toggle-bars::after { top: 7px; }

@media (max-width: 768px) {
    .bh-navbar-toggle { display: block; }
    .bh-navbar-top { flex-wrap: wrap; }
    /* Hide the desktop top-right copy; the mobile mirror inside the
       drawer takes over. */
    .bh-navbar-user-desktop { display: none; }
    .bh-navbar-user-mobile {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }
    .bh-navbar-user-mobile .bh-navbar-userlabel { white-space: normal; }
    .bh-navbar .nav-links {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        padding-top: 0.75rem;
        margin-top: 0.5rem;
        border-top: 1px solid rgba(255,255,255,0.25);
    }
    .bh-navbar .nav-links.open { display: flex; }
    .bh-navbar .nav-links a,
    .bh-navbar .nav-links .bh-btn-nav-ghost {
        padding: 0.625rem 0.75rem;
        display: flex;
        align-items: center;
        border-radius: 4px;
        border-top: 1px solid rgba(255,255,255,0.12);
        font-size: 1.1rem;
        font-weight: 600;
    }
    .bh-navbar .nav-links a:first-child,
    .bh-navbar .nav-links .bh-btn-nav-ghost:first-child {
        border-top: 0;
    }
    .bh-navbar .nav-links .bh-form-inline { width: 100%; }
    .bh-navbar .nav-links .bh-form-inline button {
        width: 100%;
        text-align: left;
        font-size: 1.1rem;
    }
    .bh-navbar .cells-pill { align-self: flex-start; }
    .bh-navbar-badges-desktop { display: none; }
}

/* Brand block — bee icon to the left, brand text, then weather
   widget stacked BENEATH (non-clickable display). */
.bh-brand-block {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: flex-start;
}
.bh-navbar .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1;
    color: white;
    text-decoration: none;
}
.bh-brand-logo {
    height: 35px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}
/* Legacy emoji fallback if logo image fails. */
.bh-brand-icon {
    font-size: 1.9rem;
    line-height: 1;
    display: inline-block;
    transform: translateY(-1px);
}
.bh-brand-text { letter-spacing: 0.02em; }

.bh-weather-widget {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    /* Opaque white + heavier weight passes AA at this size on --bh-honey. */
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 0 0.15rem;
    /* No background, no hover, no pointer — this is a display element. */
}
.bh-weather-widget-zip  { letter-spacing: 0.05em; font-weight: 600; }
.bh-weather-widget-sep  { opacity: 0.55; }
.bh-weather-widget-temp { font-weight: 700; }
.bh-weather-widget-low { opacity: 0.75; font-weight: 400; font-size: 0.85em; }
.bh-weather-widget-cond { opacity: 0.85; }
@media (max-width: 640px) {
    .bh-navbar .brand { font-size: 1.15rem; }
    .bh-brand-logo { height: 28px; }
    .bh-brand-icon { font-size: 1.5rem; }
}

/* Cookie consent banner — bottom of viewport, dismissable */
/* Community empty-state — show topics + CTAs instead of a bare "No posts yet" */
.bh-community-empty-icon { font-size: 3rem; margin-bottom: 0.5rem; }
.bh-community-empty-topics { margin-top: 1.25rem; }
.bh-community-topic {
    background: var(--bh-cream);
    text-align: left;
    padding: 1rem;
}
.bh-community-topic-icon { font-size: 1.75rem; line-height: 1; margin-bottom: 0.3rem; }

/* Two-panel auth shell — warm hero on the left, form on the right.
   Collapses to a single stacked column below 768px with the hero
   becoming a compact header above the form. */
.bh-auth-shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    max-width: 960px;
    margin: 2rem auto;
    align-items: stretch;
}
.bh-auth-hero {
    background: linear-gradient(135deg, var(--bh-honey) 0%, #c47926 100%);
    color: white;
    border-radius: 8px;
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 2px 10px var(--bh-shadow);
}
.bh-auth-hero-icon { font-size: 3rem; line-height: 1; margin-bottom: 0.75rem; }
.bh-auth-hero-logo { height: 80px; width: auto; }
.bh-auth-hero-title {
    font-size: clamp(1.5rem, 3vw + 1rem, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 0.5rem;
    color: white;
}
.bh-auth-hero-tagline {
    font-size: 1.05rem;
    opacity: 0.92;
    margin: 0 0 1.25rem;
}
.bh-auth-hero-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
}
.bh-auth-hero-bullets li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.6rem;
}
.bh-auth-hero-bullets li::before {
    content: "🐝";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1rem;
}
.bh-auth-form-panel .bh-card { margin: 0; }
@media (max-width: 768px) {
    .bh-auth-shell {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin: 1rem auto;
    }
    .bh-auth-hero {
        padding: 1.25rem 1rem;
        text-align: left;
    }
    .bh-auth-hero-icon { font-size: 2.25rem; margin-bottom: 0.5rem; }
    /* Title/tagline now scale fluidly via clamp() so the hard 768px
       jump is gone — leaving only the tagline/bullets tightening. */
    .bh-auth-hero-tagline { margin-bottom: 0.75rem; }
    .bh-auth-hero-bullets { font-size: 0.95rem; }
}

/* CSS-only tab toggle for auth pages. Two hidden radios drive state;
   labels are the visible tabs; panes are shown/hidden via :checked +
   ~ sibling selectors. Source order matters: radios first, then the
   tab-row, then the panes. */
.bh-auth-tabs { position: relative; }
.bh-auth-tab-input { position: absolute; opacity: 0; pointer-events: none; }
.bh-auth-tab-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--bh-line);
}
.bh-auth-tab {
    display: block;
    text-align: center;
    padding: 0.65rem 0.75rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--bh-muted, #6b6b6b);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    user-select: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.bh-auth-tab:hover { color: var(--bh-honey-dark); }
#bh-auth-tab-email:checked ~ .bh-auth-tab-row label[for="bh-auth-tab-email"],
#bh-auth-tab-google:checked ~ .bh-auth-tab-row label[for="bh-auth-tab-google"] {
    color: var(--bh-honey-dark);
    border-bottom-color: var(--bh-honey);
}
.bh-auth-tab-pane { display: none; }
#bh-auth-tab-email:checked ~ .bh-auth-tab-pane-email,
#bh-auth-tab-google:checked ~ .bh-auth-tab-pane-google { display: block; }
/* Focus ring on the active tab for keyboard users. */
#bh-auth-tab-email:focus-visible ~ .bh-auth-tab-row label[for="bh-auth-tab-email"],
#bh-auth-tab-google:focus-visible ~ .bh-auth-tab-row label[for="bh-auth-tab-google"] {
    outline: 2px solid var(--bh-honey);
    outline-offset: 2px;
}

/* Loading pulse — three dots that animate while advisory/blooms are
   being generated on the server. Used by landing cold-ZIP state. */
.bh-loading-pulse {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    padding: 0.25rem 0;
}
.bh-loading-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--bh-honey);
    opacity: 0.35;
    animation: bh-loading-pulse 1.2s ease-in-out infinite;
}
.bh-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.bh-loading-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes bh-loading-pulse {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.25); }
}

/* Site wallpaper — driven by the site_settings.wallpaper key.
   `body.bh-wallpaper-none` keeps the default cream background.
   `body.bh-wallpaper-honeycomb` tiles a low-opacity hex pattern.
   Pattern source: heropatterns.com (MIT, hexagons), inlined as data URI
   so no extra HTTP request. fill-opacity=0.05 keeps it visible-but-quiet
   over the cream base; background-attachment:fixed makes the texture
   stay static while content scrolls. */
body.bh-wallpaper-none {
    /* No-op — keeps the cream body background from theme variables. */
}
body.bh-wallpaper-honeycomb {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23b8860b' fill-opacity='0.05'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.91zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-repeat: repeat;
}

/* Site footer — appears below every page. Light cream background, four
   stacked sections (blurb / links / copyright / attribution). */
.bh-footer {
    background: var(--bh-cream);
    border-top: 1px solid var(--bh-line);
    margin-top: 3rem;
    padding: 1.75rem 0 1.25rem;
    color: var(--bh-text-muted);
    font-size: 0.88rem;
}
.bh-footer-inner {
    text-align: center;
    max-width: 880px;
}
.bh-footer-blurb {
    margin: 0 auto 1rem;
    max-width: 720px;
    line-height: 1.5;
    color: var(--bh-text);
}
.bh-footer-links {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}
.bh-footer-links a {
    color: var(--bh-honey-dark);
    text-decoration: none;
}
.bh-footer-links a:hover { text-decoration: underline; }
.bh-footer-copyright,
.bh-footer-attribution {
    margin: 0.25rem 0;
    font-size: 0.82rem;
}
.bh-footer-attribution a {
    color: var(--bh-honey-dark);
    text-decoration: none;
    font-weight: 600;
}
.bh-footer-attribution a:hover { text-decoration: underline; }

/* Legal pages (Terms, Privacy, Disclaimer) — content wrapped in a
   bordered card on a wider container so long copy stays readable. */
.bh-legal-shell {
    max-width: 800px;
    margin: 1.5rem auto;
}
.bh-legal-card {
    background: white;
    border: 1px solid var(--bh-line);
    border-radius: 8px;
    padding: 2rem 2rem 2.25rem;
    box-shadow: 0 1px 3px var(--bh-shadow);
}
.bh-legal-card h1 { color: var(--bh-honey-dark); margin: 0 0 0.25rem; }
.bh-legal-card h2 {
    color: var(--bh-honey-dark);
    margin: 1.75rem 0 0.5rem;
    font-size: 1.2rem;
}
.bh-legal-card h3 {
    margin: 1.25rem 0 0.4rem;
    font-size: 1.02rem;
}
.bh-legal-card p,
.bh-legal-card li { line-height: 1.55; }
.bh-legal-card ul { padding-left: 1.25rem; }
.bh-legal-meta {
    color: var(--bh-text-muted);
    font-size: 0.9em;
    margin: 0 0 1.25rem;
}
.bh-legal-notice {
    background: #fff5d6;
    border: 1px solid #e8c96a;
    border-left: 4px solid var(--bh-honey);
    padding: 0.85rem 1rem;
    border-radius: 6px;
    margin: 1rem 0;
}
@media (max-width: 560px) {
    .bh-legal-card { padding: 1.25rem 1rem; }
}

/* Branded error pages (403/404/500) — full-bleed centered card with
   a clear "back to safety" CTA pair. Replaces the bare Flask defaults. */
.bh-error-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 2rem 1rem;
}
.bh-error-card {
    max-width: 480px;
    text-align: center;
    background: var(--bh-cream);
    border: 1px solid var(--bh-line);
    border-radius: 8px;
    padding: 2.5rem 1.75rem;
    box-shadow: 0 2px 12px var(--bh-shadow);
}
.bh-error-icon { font-size: 3.5rem; line-height: 1; margin-bottom: 0.75rem; }
.bh-error-headline {
    font-size: 1.8rem;
    color: var(--bh-honey-dark);
    margin: 0 0 0.5rem;
}
.bh-error-tagline {
    color: var(--bh-text-muted);
    margin: 0 0 1.5rem;
    line-height: 1.5;
}
.bh-error-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Label row — pairs a form label with a small inline action link
   (e.g. "Forgot password?" next to the password field). */
.bh-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.bh-label-row label { margin-bottom: 0; }
.bh-link-muted {
    color: var(--bh-text-muted);
    font-size: 0.85em;
    text-decoration: none;
}
.bh-link-muted:hover {
    color: var(--bh-honey-dark);
    text-decoration: underline;
}

/* Buttons explicitly marked as disabled (visual cue for unverified-user
   write CTAs). Matches the native :disabled button treatment. */
.bh-btn-disabled, .bh-btn-disabled:hover {
    background: #d7cfc1;
    color: #75685a;
    cursor: not-allowed;
    opacity: 0.75;
    pointer-events: none;
}

/* Verify-email banner — shows below nav for logged-in but unverified
   users. Warm tone matches the bee brand; stays visible until email
   is verified. */
.bh-verify-banner {
    background: #fff5d6;
    border-bottom: 1px solid #e8c96a;
    color: #6b4a00;
    font-size: 0.9rem;
    padding: 0.55rem 1rem;
}
.bh-verify-banner-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.bh-verify-banner-icon { font-size: 1.2rem; flex-shrink: 0; }
.bh-verify-banner-text {
    flex: 1;
    min-width: 220px;
    line-height: 1.35;
}
.bh-verify-banner-form { margin: 0; }
.bh-verify-banner-form button {
    background: var(--bh-honey);
    color: white;
    border: none;
}
.bh-verify-banner-form button:hover { background: var(--bh-honey-dark); }
/* Verify banner — swap long explanation for a short version on phones
   so the banner doesn't eat 2+ lines of vertical real estate. */
.bh-verify-banner-short { display: none; }
@media (max-width: 640px) {
    .bh-verify-banner-long  { display: none; }
    .bh-verify-banner-short { display: inline; }
}
@media (max-width: 560px) {
    .bh-verify-banner { font-size: 0.875rem; padding: 0.5rem 0.75rem; }
    .bh-verify-banner-inner { gap: 0.5rem; flex-wrap: nowrap; }
    .bh-verify-banner-text { flex: 1; min-width: 0; }
    .bh-verify-banner-form { margin-left: 0; flex-shrink: 0; }
}

/* Compact bottom-left toast — doesn't span the viewport so it doesn't
   block content, and stays on the opposite corner from the BeeAI
   widget to avoid FAB collision. Shrinks on narrow viewports. */
.bh-cookie-banner {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    max-width: 340px;
    background: var(--bh-cream);
    border: 1px solid var(--bh-line);
    border-left: 3px solid var(--bh-honey);
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    z-index: 1500;
    padding: 0.6rem 0.75rem;
}
.bh-cookie-banner[hidden] { display: none; }
.bh-cookie-banner-inner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.bh-cookie-banner-text {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--bh-text);
    flex: 1;
}
.bh-cookie-banner .bh-btn { flex-shrink: 0; }
@media (max-width: 480px) {
    .bh-cookie-banner {
        left: 0.5rem;
        right: 0.5rem;
        bottom: 0.5rem;
        max-width: none;
    }
    .bh-cookie-banner-text { font-size: 0.75rem; }
}

.bh-navbar .cells-pill {
    background: var(--bh-amber-light);
    color: var(--bh-honey-dark);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-weight: bold;
    font-size: 0.85rem;
}

.bh-container { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }

.bh-card {
    background: var(--bh-cream);
    border: 1px solid var(--bh-line);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px var(--bh-shadow);
}
.bh-card h2, .bh-card h3 { margin-top: 0; color: var(--bh-honey-dark); }
/* Cards inside a CSS grid shouldn't also stack via margin-bottom —
 * the grid's `gap` handles spacing. Leaving margin-bottom on would
 * double-count vertical space AND cause visible overlap when the
 * card stretches to `height: 100%` (bh-card-clickable) because the
 * bottom margin falls outside the anchor's sizing box. */
.bh-grid > .bh-card,
.bh-grid > .bh-link-inherit > .bh-card { margin-bottom: 0; }

.bh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Darker default (was --bh-honey at 3.67:1 on white text — fails
     * AA for normal-size body. --bh-honey-dark gives 5.88:1, passes
     * AA at any size without changing the brand palette.) */
    background: var(--bh-honey-dark);
    color: white;
    padding: 0.6rem 1.25rem;
    min-height: 44px;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.bh-btn:hover {
    /* Even darker hover stays well past 5.88:1 */
    background: #7a3c12;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.bh-btn-secondary {
    background: transparent;
    color: var(--bh-honey-dark);
    border: 1px solid var(--bh-honey);
    box-shadow: none;
    font-weight: 600;
}
.bh-btn-secondary:hover {
    background: var(--bh-amber-light);
    transform: none;
    box-shadow: none;
}
.bh-btn-danger { background: #b85450; }
.bh-btn-danger:hover { background: #8e3f3c; }

.bh-input, .bh-select, .bh-textarea {
    width: 100%;
    padding: 0.65rem 0.75rem;
    min-height: 44px;
    border: 1px solid var(--bh-line);
    border-radius: 4px;
    /* 16px prevents iOS Safari from auto-zooming the viewport on focus.
       Keep this — dropping below 16px on any focusable input re-triggers
       zoom and leaves users on a 200% zoomed page. */
    font-size: 16px;
    line-height: 1.35;
    background: white;
    font-family: inherit;
    box-sizing: border-box;
}
.bh-input:disabled,
.bh-input[readonly],
.bh-select:disabled,
.bh-textarea:disabled,
.bh-textarea[readonly] {
    /* Visual disabled state so sighted users know the field is inactive —
       without this, disabled inputs look identical to editable ones and
       users type into dead fields. */
    background: #f5f1e7;
    color: #888;
    border-color: #d7cfc1;
    cursor: not-allowed;
}
.bh-textarea { min-height: 6rem; }
.bh-form-group { margin-bottom: 1rem; }
.bh-form-group label { display: block; margin-bottom: 0.25rem; font-weight: bold; color: var(--bh-honey-dark); }
/* 0.875rem = 14px — minimum body-adjacent text size that's still
   readable on phones without zooming. Was 0.85rem ≈ 13.6px. */
.bh-form-help { font-size: 0.875rem; color: var(--bh-text-muted); line-height: 1.45; }

.bh-flash { padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 0.75rem; }
.bh-flash-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.bh-flash-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.bh-flash-info { background: var(--bh-amber-light); color: var(--bh-honey-dark); border: 1px solid var(--bh-amber); }

.bh-grid { display: grid; gap: 1rem; }
.bh-grid-2 { grid-template-columns: repeat(2, 1fr); }
.bh-grid-3 { grid-template-columns: repeat(3, 1fr); }
.bh-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
    /* grid-2 gets wide cards → stack fully on mobile. grid-3 and grid-4
       are typically stat blocks / card rosters — keep them at 2 cols so
       users don't scroll through a one-item-per-screen wall. */
    .bh-grid-2 { grid-template-columns: 1fr; }
    .bh-grid-3,
    .bh-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .bh-container { padding: 0.75rem; }
    /* Nav link padding is owned by the mobile nav block above — don't
       re-declare it here or the cramped padding wins by source order
       and undoes the 44px touch target. */
    .bh-navbar .nav-links { gap: 0.25rem; font-size: 1rem; }
    .bh-table th, .bh-table td { padding: 0.4rem; font-size: 0.9rem; }
}
/* Very narrow phones — collapse the 3/4 grids to a single column
   once 2 cols would be too cramped (≈150px per card). */
@media (max-width: 479px) {
    .bh-grid-3,
    .bh-grid-4 { grid-template-columns: 1fr; }
}

/* Fluid headline scale — smooth ramp between phone and desktop instead
   of a hard jump at 768px. clamp(min, preferred, max) ensures headlines
   never go below the mobile floor or above the desktop ceiling. */
.bh-headline {
    font-size: clamp(1.35rem, 2.5vw + 0.9rem, 1.75rem);
    color: var(--bh-honey-dark);
    margin: 0 0 0.5rem;
    line-height: 1.2;
}
.bh-subheadline {
    font-size: clamp(0.95rem, 0.5vw + 0.85rem, 1.05rem);
    color: var(--bh-text-muted);
    font-style: italic;
    margin: 0 0 1rem;
    line-height: 1.5;
}

.bh-stat { text-align: center; }
.bh-stat .num {
    font-size: clamp(1.8rem, 3vw + 1.1rem, 2.5rem);
    font-weight: bold;
    color: var(--bh-honey);
    line-height: 1.1;
}
.bh-stat .label { font-size: 0.85rem; color: var(--bh-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

.bh-progress {
    background: var(--bh-line);
    border-radius: 999px;
    height: 12px;
    overflow: hidden;
    margin: 0.5rem 0;
}
.bh-progress-bar {
    background: var(--bh-honey);
    height: 100%;
    transition: width 0.3s ease;
}

.bh-table { width: 100%; border-collapse: collapse; }
.bh-table th, .bh-table td { padding: 0.6rem; text-align: left; border-bottom: 1px solid var(--bh-line); }
.bh-table th { background: var(--bh-amber-light); color: var(--bh-honey-dark); }

.bh-tier-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--bh-amber-light);
    color: var(--bh-honey-dark);
    border-radius: 999px;
    font-weight: bold;
    font-size: 0.85rem;
}

.bh-alert {
    background: #fff3cd;
    color: #856404;
    border-left: 4px solid #ffc107;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

/* BeeAI floating widget */
.beeai-widget {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1000;
}
.beeai-toggle {
    background: var(--bh-honey);
    color: white;
    border: none;
    border-radius: 999px;
    padding: 0.6rem 1.1rem 0.6rem 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.22);
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    transition: background 0.15s ease, transform 0.15s ease;
}
.beeai-toggle:hover {
    background: var(--bh-honey-dark);
    transform: translateY(-1px);
}
.beeai-toggle-icon { font-size: 1.65rem; line-height: 1; }
.beeai-toggle-label { letter-spacing: 0.01em; }
@media (max-width: 560px) {
    .beeai-toggle { padding: 0.55rem 0.8rem 0.55rem 0.6rem; font-size: 0.9rem; }
    .beeai-toggle-label { display: none; }
    .beeai-toggle-icon { font-size: 1.5rem; }
    .beeai-toggle {
        border-radius: 50%;
        width: 52px;
        height: 52px;
        padding: 0;
        justify-content: center;
    }
}
.beeai-panel {
    display: none;
    position: absolute;
    bottom: 75px;
    right: 0;
    width: 360px;
    max-height: 500px;
    background: var(--bh-cream);
    border: 1px solid var(--bh-line);
    border-radius: 8px;
    box-shadow: 0 4px 16px var(--bh-shadow);
    flex-direction: column;
}
.beeai-panel.open { display: flex; }
.beeai-header {
    background: var(--bh-honey);
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 8px 8px 0 0;
    font-weight: bold;
}
.beeai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    max-height: 350px;
}
.beeai-msg { margin-bottom: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 6px; }
.beeai-msg.user { background: var(--bh-amber-light); margin-left: 1rem; }
.beeai-msg.assistant { background: white; border: 1px solid var(--bh-line); margin-right: 1rem; }
.beeai-input-row { display: flex; gap: 0.25rem; padding: 0.5rem; border-top: 1px solid var(--bh-line); }
.beeai-input { flex: 1; padding: 0.5rem; border: 1px solid var(--bh-line); border-radius: 4px; font-family: inherit; }
.beeai-send { background: var(--bh-honey); color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; font-weight: bold; }

/* ============================================================
 * Admin shell — two-column sidebar layout for /admin/*
 * ============================================================ */
.bh-admin-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 768px) {
    .bh-admin-shell { grid-template-columns: 1fr; }
}
.bh-admin-sidebar {
    background: var(--bh-cream);
    border: 1px solid var(--bh-line);
    border-radius: 8px;
    padding: 0.75rem;
    position: sticky;
    top: 1rem;
}
.bh-admin-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.bh-admin-sidebar-title {
    font-weight: 700;
    color: var(--bh-honey-dark);
    padding: 0.35rem 0.5rem 0.65rem;
    border-bottom: 1px solid var(--bh-line);
    margin-bottom: 0.35rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.85rem;
    flex: 1;
}
.bh-admin-sidebar-toggle {
    display: none;
    border: 1px solid var(--bh-line);
    background: white;
    color: var(--bh-honey-dark);
    border-radius: 999px;
    padding: 0.4rem 0.8rem;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.bh-admin-nav { display: flex; flex-direction: column; gap: 0.1rem; }
.bh-admin-nav-group-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bh-text-muted);
    padding: 0.6rem 0.5rem 0.25rem;
    font-weight: 700;
}
.bh-admin-nav-group-label:first-child { padding-top: 0.25rem; }
.bh-admin-nav-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    color: var(--bh-text);
    text-decoration: none;
    font-size: 0.92rem;
    transition: background 0.12s ease;
}
.bh-admin-nav-link:hover { background: var(--bh-amber-light); }
.bh-admin-nav-active {
    background: var(--bh-honey);
    color: white !important;
    font-weight: 600;
}
.bh-admin-nav-active:hover { background: var(--bh-honey-dark); }
.bh-admin-nav-icon { width: 1.25rem; text-align: center; }
.bh-admin-main { min-width: 0; }  /* allow grid child to shrink */

@media (max-width: 768px) {
    .bh-admin-shell { position: relative; }
    .bh-admin-sidebar {
        position: static;
        top: auto;
        z-index: auto;
        padding: 0.65rem;
    }
    .bh-admin-sidebar-title {
        margin-bottom: 0;
        padding: 0.25rem 0.1rem;
        border-bottom: 0;
    }
    .bh-admin-sidebar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
    }
    /* When open, the nav drawer overlays the admin main content instead
       of pushing it down — prevents a huge content-jump when users open
       the menu to navigate. */
    .bh-admin-nav {
        display: none;
        margin-top: 0.6rem;
        padding: 0.5rem 0.65rem;
        border-top: 1px solid var(--bh-line);
    }
    .bh-admin-sidebar.is-open {
        position: relative;
        z-index: 40;
    }
    .bh-admin-sidebar.is-open .bh-admin-nav {
        display: flex;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: var(--bh-cream);
        border: 1px solid var(--bh-line);
        border-top: 0;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 4px 10px var(--bh-shadow);
    }
    /* Match main nav — natural padding-driven height with a larger
       font so each row doesn't look empty. */
    .bh-admin-nav-link {
        font-size: 1.05rem;
        padding: 0.6rem 0.75rem;
    }
}

/* Moderation — hidden content gets a muted row + tag */
.bh-mod-hidden-row { background: rgba(0,0,0,0.04); color: var(--bh-text-muted); }
.bh-mod-tag {
    display: inline-block;
    background: #f5c6cb;
    color: #721c24;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Status tag color variants — used by newsletter + moderation */
.bh-tag-grey   { background: #e9ecef; color: #495057; }
.bh-tag-green  { background: #d4edda; color: #155724; }
.bh-tag-blue   { background: #cce5ff; color: #004085; }
.bh-tag-amber  { background: #fff3cd; color: #856404; }
.bh-tag-red    { background: #f5c6cb; color: #721c24; }

/* Newsletter HTML preview iframe */
.bh-newsletter-preview {
    display: block;
    width: 100%;
    min-height: 400px;
    border: 1px solid var(--bh-line);
    border-radius: 6px;
    background: #fff;
}

/* Media Library grid */
.bh-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.bh-media-tile { padding: 0.75rem; margin: 0; }
.bh-media-tile-pending { border-color: var(--bh-amber); box-shadow: 0 0 0 2px rgba(244, 162, 97, 0.18); }
.bh-media-tile-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    cursor: zoom-in;
    background: var(--bh-amber-light);
}
.bh-media-tile-pending .bh-media-tile-img { cursor: default; }
.bh-media-tile-body { margin-top: 0.5rem; }
.bh-media-tile-label {
    font-weight: 600;
    color: var(--bh-honey-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
 * Landing page — main / home surface
 * ============================================================ */

.bh-landing-hero {
    background: linear-gradient(135deg, var(--bh-amber) 0%, var(--bh-honey) 100%);
    color: white;
    padding: 2.5rem 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}
.bh-landing-hero-inner { max-width: 680px; margin: 0 auto; text-align: center; }
.bh-landing-hero h1 {
    color: white;
    font-size: clamp(1.6rem, 3.5vw + 1rem, 2.4rem);
    line-height: 1.15;
    margin: 0 0 0.5rem;
}
.bh-landing-hero .bh-subheadline { color: rgba(255,255,255,0.95); font-style: normal; font-size: clamp(0.95rem, 0.6vw + 0.85rem, 1.1rem); }
/* Form-help on the honey gradient was white-at-0.9 alpha (~3.3:1).
 * Opaque white + text-shadow bumps the effective contrast and keeps
 * legibility on the lighter part of the gradient. */
.bh-landing-hero .bh-form-help {
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.bh-landing-hero .bh-form-help { color: rgba(255,255,255,0.9); }
.bh-landing-hero .bh-btn { box-shadow: 0 2px 6px rgba(0,0,0,0.15); }

.bh-landing-zip-form {
    justify-content: center;
    align-items: center;
    margin-top: 0.75rem;
}
.bh-zip-input { width: 6rem; text-align: center; letter-spacing: 0.15em; font-weight: 600; }

.bh-landing-today {
    background: var(--bh-cream);
}
.bh-landing-today-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 2fr;
    gap: 1.5rem;
    align-items: center;
}
@media (max-width: 640px) {
    .bh-landing-today-grid { grid-template-columns: 1fr; }
}
.bh-landing-today-weather {
    padding-right: 1.5rem;
    border-right: 1px solid var(--bh-line);
}
@media (max-width: 640px) {
    .bh-landing-today-weather {
        padding-right: 0;
        padding-bottom: 1rem;
        border-right: none;
        border-bottom: 1px solid var(--bh-line);
    }
}
.bh-landing-today-label {
    color: var(--bh-text-muted);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.bh-landing-today-temp {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--bh-honey-dark);
    line-height: 1;
}
.bh-landing-today-low { font-size: 1.5rem; font-weight: 400; opacity: 0.7; }
.bh-landing-today-temp-unit { font-size: 1.5rem; color: var(--bh-text-muted); }
.bh-landing-today-cond { font-size: 1.1rem; margin-top: 0.25rem; color: var(--bh-honey-dark); }
.bh-landing-today-meta { font-size: 0.85rem; color: var(--bh-text-muted); margin-top: 0.5rem; }
.bh-landing-today-verdict { margin-top: 0.75rem; font-weight: 600; font-size: 0.9rem; }
/* Darkened from #388e3c (3.66:1) / #e65100 (3.56:1) so verdict text
 * passes AA contrast on the cream body background. */
.bh-landing-today-verdict-ok { color: #1b5e20; }
.bh-landing-today-verdict-skip { color: #bf360c; }
.bh-landing-today-bottom-line {
    font-size: 1.1rem;
    line-height: 1.5;
    margin: 0.5rem 0 1rem;
    color: var(--bh-text);
}

/* Hero on landing page (old) */
.bh-hero {
    background: linear-gradient(135deg, var(--bh-amber) 0%, var(--bh-honey) 100%);
    color: white;
    padding: clamp(2rem, 5vw + 1rem, 4rem) clamp(1rem, 3vw, 2rem);
    text-align: center;
    border-radius: 0 0 12px 12px;
}
.bh-hero h1 { font-size: clamp(1.8rem, 5vw + 1rem, 3rem); margin: 0 0 1rem; line-height: 1.1; }
.bh-hero p { font-size: clamp(1rem, 1vw + 0.85rem, 1.25rem); margin: 0 0 1.5rem; opacity: 0.95; }
.bh-hero .bh-btn { background: white; color: var(--bh-honey-dark); }
.bh-hero .bh-btn:hover { background: var(--bh-cream); }

/* Weather calendar — horizontal scroll on mobile */
.bh-weather-strip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
}
@media (max-width: 640px) {
    /* Wrap the scroller so we can paint a fade on its right edge without
       the fade itself becoming scrollable content. The child `.bh-weather-strip`
       here is what actually scrolls. */
    .bh-card:has(> .bh-weather-strip) {
        position: relative;
    }
    .bh-card:has(> .bh-weather-strip)::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 32px;
        height: 100%;
        background: linear-gradient(to right, transparent, var(--bh-cream));
        pointer-events: none;
        border-radius: 0 8px 8px 0;
    }
    .bh-weather-strip {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .bh-weather-strip > * {
        flex: 0 0 110px;
        scroll-snap-align: start;
    }
}

/* Plant detail thumbnails — constrain on mobile */
.bh-plant-thumbs {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-start;
}
.bh-plant-thumbs .bh-thumb-col {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex-shrink: 0;
    max-width: 220px;
}
.bh-plant-thumbs .bh-thumb-col img {
    border-radius: 8px;
    cursor: zoom-in;
    max-width: 200px;
    height: auto;
}
.bh-plant-thumbs .bh-plant-info {
    flex: 1;
    min-width: 250px;
}
@media (max-width: 640px) {
    .bh-plant-thumbs {
        flex-direction: column;
    }
    .bh-plant-thumbs .bh-thumb-col {
        flex-direction: row;
        gap: 0.5rem;
        width: 100%;
    }
    .bh-plant-thumbs .bh-thumb-col img,
    .bh-plant-thumbs .bh-thumb-col .bh-thumb-placeholder {
        width: 120px !important;
        height: 120px !important;
        object-fit: cover;
    }
}

/* Banner-style thumb on plant gallery + landing bloom cards. Negative
   margin cancels .bh-card padding so the image reaches card edges;
   top corners are rounded to match the card's 8px radius. */
.bh-plant-thumb {
    display: block;
    width: calc(100% + 2.5rem);
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    margin: -1.25rem -1.25rem 0.75rem;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* BeeAI widget — full-width panel on mobile */
@media (max-width: 480px) {
    .beeai-panel {
        width: calc(100vw - 2rem);
        right: -0.5rem;
        max-height: 70vh;
    }
    .beeai-messages { max-height: 50vh; }
}

/* Prose (markdown rendered content) */
.bh-prose {
    line-height: 1.7;
    /* Cap comfortable line length — advisory/learning pages were running
       18+ words per line on tablets, which hurts reading speed. 65ch
       keeps ~10–12 words per line on desktop, ~40–60 char on mobile. */
    max-width: 65ch;
}
.bh-prose h2 {
    color: var(--bh-honey-dark);
    font-size: clamp(1.15rem, 0.8vw + 1rem, 1.35rem);
    line-height: 1.3;
    margin-top: 1.5rem;
}
.bh-prose h3 {
    color: var(--bh-honey-dark);
    font-size: clamp(1.05rem, 0.4vw + 0.95rem, 1.15rem);
    line-height: 1.3;
    margin-top: 1rem;
}
.bh-prose ul, .bh-prose ol { padding-left: 1.5rem; }
.bh-prose li { margin-bottom: 0.3rem; }
.bh-prose strong { color: var(--bh-honey-dark); }
.bh-prose img { max-width: 100%; height: auto; border-radius: 6px; }
/* Inline plant link injected by plant_links_filter — dotted underline */
.bh-plant-link {
    color: var(--bh-honey-dark);
    text-decoration: underline;
    text-decoration-style: dotted;
}

img.plant-icon {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    display: inline !important;
    vertical-align: middle;
    object-fit: cover;
    border-radius: 3px;
    margin-left: 3px;
    opacity: 0.85;
}

/* ============================================================
 * Utility + component classes
 * Added when moving 134 inline style="" attributes out of
 * templates so strict CSP (no unsafe-inline on style-src) holds.
 * Organize by purpose, not alphabetically — easier to find
 * related rules together.
 * ============================================================ */

/* Page-centered containers (common on auth + onboarding + forms) */
.bh-narrow  { max-width: 420px; margin: 2rem auto; }
.bh-narrow-plus { max-width: 460px; margin: 2rem auto; }
.bh-medium  { max-width: 480px; margin: 2rem auto; }
.bh-medium-plus { max-width: 500px; margin: 2rem auto; }
.bh-wide    { max-width: 600px; margin: 2rem auto; }
.bh-xwide   { max-width: 640px; margin: 2rem auto; }
.bh-narrow-flush, .bh-medium-flush, .bh-wide-flush, .bh-xwide-flush { margin: 0 auto; }
.bh-narrow-flush  { max-width: 420px; }
.bh-medium-flush  { max-width: 480px; }
.bh-wide-flush    { max-width: 600px; }
.bh-xwide-flush   { max-width: 640px; }

/* Flex primitives */
.bh-flex-row         { display: flex; gap: 0.5rem; }
.bh-flex-row-wide    { display: flex; gap: 0.75rem; }
.bh-card-header-row  { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.bh-flex-row-tight   { display: flex; gap: 0.25rem; }
.bh-flex-row-wrap    { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.bh-flex-row-end     { display: flex; gap: 0.5rem; align-items: end; flex-wrap: wrap; }
.bh-flex-center      { display: flex; align-items: center; gap: 0.5rem; }
.bh-header-row       { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.bh-flex-1           { flex: 1; }
/* Was min-width: 200px; caused overflow on 375px phones after other
   siblings ate padding. 160px still blocks awkward ~80px wraps. */
.bh-flex-1-min200    { flex: 1; min-width: 160px; }
.bh-flex-2           { flex: 2; }
.bh-margin-0         { margin: 0; }
.bh-margin-bottom-0  { margin-bottom: 0; }

/* Plate / photo sizing on plants surfaces */
.bh-plate-thumb-150 {
    width: 150px; height: 150px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    opacity: 0.9;
    display: block;
    margin: 0 auto;
}
.bh-plate-clickable { cursor: zoom-in; transition: opacity 0.15s ease; }
.bh-plate-clickable:hover { opacity: 1; }

/* Plant gallery card — thumb on top, text below, centered. Tighter
 * padding than the default .bh-card because the content is short
 * (thumbnail + 4 text lines) and the default 1.25rem pad makes the
 * card feel empty. */
.bh-plant-card {
    text-align: center;
    padding: 0.75rem 0.75rem 0.9rem;
}
.bh-plant-card .bh-plate-placeholder { margin: 0 auto; }
.bh-plant-card h3 { margin: 0.5rem 0 0.1rem; font-size: 1rem; line-height: 1.25; }
.bh-plant-card .bh-form-help { line-height: 1.35; }
.bh-plant-photo-200 {
    width: 200px; height: 200px;
    object-fit: cover;
    border-radius: 8px;
    cursor: zoom-in;
}
.bh-plate-placeholder {
    width: 150px; height: 150px;
    background: var(--bh-amber-light);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* Darkened from --bh-text-muted (#7a5c3b, 4.33:1 on amber-light —
 * just fails AA) to a tone that clears 4.5:1. */
.bh-plate-placeholder-text { font-size: 0.875rem; color: #5a4428; }
.bh-plate-placeholder-emoji { font-size: 2.5rem; }
.bh-photo-placeholder {
    width: 200px; height: 200px;
    background: var(--bh-amber-light);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--bh-text-muted);
    text-align: center;
}

/* Hive box visualization */
.bh-stack-col {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 2px;
    margin-bottom: 0.75rem;
}
.bh-stack-col-padded {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 2px;
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--bh-bg);
    border-radius: 6px;
}
.bh-hive-stand {
    width: 110%;
    height: 8px;
    background: #654321;
    border-radius: 2px;
}
.bh-hive-stand-thick { height: 10px; }
.bh-box-swatch {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 2px;
    vertical-align: middle;
}
.bh-box-swatch-brood    { background: #8B4513; }
.bh-box-swatch-super    { background: #6B8E23; }
.bh-box-swatch-flow     { background: #2F4F7F; }
.bh-box-swatch-excluder { background: #DAA520; }
.bh-box-remove-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    font-size: 0.9rem;
    /* WCAG 2.5.8 Target Size Minimum: 24×24 for non-primary controls */
    min-width: 24px;
    min-height: 24px;
    padding: 0.25rem;
}
.bh-box-reorder {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-right: 0.35rem;
}
.bh-box-move-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    /* WCAG 2.5.8 Target Size Minimum */
    min-width: 24px;
    min-height: 24px;
    padding: 0.2rem;
    border-radius: 2px;
}
.bh-box-move-btn:hover { background: rgba(255,255,255,0.18); color: white; }

/* Stacked hive box blocks — visible labeled rectangles in the stack */
.bh-hive-box {
    width: 100%;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
}
.bh-hive-box-wide {
    justify-content: space-between;
    font-size: 0.75rem;
    padding: 0 0.5rem;
}
.bh-hive-box-brood    { background: #8B4513; height: 36px; }
.bh-hive-box-super    { background: #6B8E23; height: 28px; }
.bh-hive-box-flow     { background: #2F4F7F; height: 32px; }
.bh-hive-box-excluder { background: #DAA520; height: 6px; width: 90%; }
.bh-hive-box-other    { background: #888; height: 28px; }
.bh-hive-box-wide.bh-hive-box-brood    { height: 40px; }
.bh-hive-box-wide.bh-hive-box-super    { height: 32px; }
.bh-hive-box-wide.bh-hive-box-flow     { height: 36px; }
.bh-hive-box-wide.bh-hive-box-excluder { height: 8px; width: 85%; }
.bh-hive-box-wide.bh-hive-box-other    { height: 32px; }

/* Hive legend row (below stack) */
.bh-hive-legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

/* Queen marking color dot — international marking color palette */
.bh-queen-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 1px solid #333;
    vertical-align: middle;
}
.bh-queen-dot-lg { width: 14px; height: 14px; }
.bh-queen-dot[data-color="white"]    { background: #ffffff; }
.bh-queen-dot[data-color="yellow"]   { background: #ffd700; }
.bh-queen-dot[data-color="red"]      { background: #e53935; }
.bh-queen-dot[data-color="green"]    { background: #43a047; }
.bh-queen-dot[data-color="blue"]     { background: #1e88e5; }
.bh-queen-dot[data-color="unmarked"] { background: transparent; border-style: dashed; }

/* Weather day cell — ok vs skip */
.bh-weather-day {
    text-align: center;
    padding: 0.75rem 0.5rem;
    border-radius: 8px;
    border: 2px solid;
}
.bh-weather-day-ok   { background: #e8f5e9; border-color: #81c784; }
.bh-weather-day-skip { background: #fff3e0; border-color: #ffb74d; }
.bh-weather-date  { font-weight: bold; font-size: 0.8rem; color: var(--bh-text-muted); }
.bh-weather-high  { font-size: 1.5rem; font-weight: bold; color: var(--bh-honey-dark); }
.bh-weather-low   { font-size: 0.85rem; color: var(--bh-text-muted); }
.bh-weather-cond  { font-size: 0.75rem; margin-top: 0.25rem; }
.bh-weather-meta  { font-size: 0.7rem; color: var(--bh-text-muted); margin-top: 0.25rem; }
.bh-weather-verdict { font-size: 0.7rem; margin-top: 0.25rem; }
.bh-weather-verdict-ok   { color: #1b5e20; }
.bh-weather-verdict-skip { color: #bf360c; }

/* Spacing utilities */
.bh-mt-xs { margin-top: 0.25rem; }
.bh-mt-sm { margin-top: 0.5rem; }
.bh-mt-md { margin-top: 0.75rem; }
.bh-mt-lg { margin-top: 1rem; }
.bh-mt-xl { margin-top: 1.5rem; }
.bh-mt-xxl { margin-top: 2rem; }
.bh-mb-xs { margin-bottom: 0.25rem; }
.bh-mb-sm { margin-bottom: 0.5rem; }
.bh-mb-md { margin-bottom: 0.75rem; }
.bh-mb-lg { margin-bottom: 1rem; }
.bh-my-sm { margin-top: 0.5rem; margin-bottom: 0.5rem; }

/* Typography utilities — floors bumped so nothing dips below 12px on
   mobile (0.75rem). Sub-12px captions became illegible on small screens. */
.bh-text-xs { font-size: 0.75rem; }
.bh-text-sm { font-size: 0.875rem; }
.bh-text-center { text-align: center; }
.bh-text-muted  { color: var(--bh-text-muted); }

/* Link + button utilities */
.bh-link-plain { color: var(--bh-honey-dark); text-decoration: none; }
.bh-link-plain:hover { text-decoration: underline; }
/* Anchor-as-card wrapper — needs block display + full height so the
   child .bh-card-clickable's height:100% renders rows at matching
   heights. Inline default left grid rows mismatched → visual overlap. */
.bh-link-inherit {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}
.bh-btn-block { width: 100%; }
.bh-btn-sm {
    font-size: 0.9rem;
    padding: 0.5rem 0.85rem;
    /* Compact variant — slightly under 44px to stay visually "small" but
       still within human-factors guidance for secondary actions. */
    min-height: 40px;
}
/* Extra-compact — for nav badges / inline CTAs where we don't want to
   dominate the row. Deliberately under the 44px min-tap threshold; only
   appropriate for a secondary link (there's always a bigger CTA on the
   target page itself). */
.bh-btn-xs {
    font-size: 0.72rem;
    padding: 0.22rem 0.55rem;
    min-height: 0;
    line-height: 1.2;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.bh-btn-nav-ghost {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.7);
    color: white !important;
    padding: 0.35rem 0.9rem;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.bh-btn-nav-ghost:hover {
    background: rgba(255,255,255,0.25);
    border-color: white;
}
.bh-select-inline-auto { width: auto; display: inline-block; }

/* Form + card helpers */
.bh-form-inline { display: inline; margin: 0; }
.bh-card-centered    { text-align: center; }
.bh-card-clickable   { cursor: pointer; transition: box-shadow 0.2s; height: 100%; }
.bh-card-selectable  { cursor: pointer; margin: 0; }
.bh-post-body        { white-space: pre-wrap; line-height: 1.6; }
.bh-post-body-tight  { white-space: pre-wrap; }
.bh-scroll-x         { overflow-x: auto; }
.bh-divider          { border: none; border-top: 1px solid var(--bh-line); margin: 1rem 0; }
.bh-fieldset-boxed {
    border: 1px solid var(--bh-line);
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1rem;
}
.bh-fieldset-boxed legend {
    font-weight: bold;
    color: var(--bh-honey-dark);
    padding: 0 0.5rem;
}

/* Heading margin overrides */
.bh-h-flush { margin: 0; }
.bh-h-indent { margin-top: 1.5rem; }
.bh-h-plain  { color: var(--bh-honey-dark); margin-top: 2rem; }

/* Details/summary cursor */
.bh-details-summary { cursor: pointer; }

/* Label weight override (for checkbox/radio labels that shouldn't be bold) */
.bh-label-normal { font-weight: normal; }

/* Registration password-match live hints */
.bh-pw-match-ok  { color: #388e3c; font-weight: 600; }
.bh-pw-match-bad { color: #c62828; font-weight: 600; }

/* Honeypot field — moves off-screen rather than display:none because
   some bots skip display:none inputs. Tab-focusable but practically
   invisible to sighted users. */
.bh-honeypot {
    position: absolute !important;
    left: -10000px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Disabled button — applies whenever a <button disabled> exists */
.bh-btn:disabled,
.bh-btn[disabled] {
    background: var(--bh-line);
    color: var(--bh-text-muted);
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.7;
}
.bh-btn:disabled:hover,
.bh-btn[disabled]:hover { background: var(--bh-line); }

/* Modal overlay (image zoom). Dialog attrs + focus trap live in
 * bh.js; the [hidden] attr doubles with display:none so SR tech that
 * ignores display still skips the node when closed. */
.bh-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.bh-modal-overlay.open { display: flex; }
.bh-modal-overlay[hidden] { display: none !important; }
.bh-modal-overlay img {
    max-width: 95vw;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
.bh-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.95);
    color: var(--bh-text);
    border: none;
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* Navbar overrides for flex header */
.bh-navbar-flex { display: flex; justify-content: space-between; align-items: center; padding: 0; }

/* Admin alerts: chips for keyword lists, badges for on/off, preview pane */
.bh-chip {
    display: inline-block;
    padding: 2px 8px;
    margin: 2px 2px 2px 0;
    border-radius: 12px;
    background: var(--bh-surface-alt, #f3efe6);
    color: var(--bh-text, #2a2a2a);
    font-size: 0.85em;
    line-height: 1.4;
}
.bh-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
}
.bh-badge-success { background: #2d7a3d; color: #fff; }
.bh-badge-muted   { background: #888; color: #fff; }
.bh-preview-box {
    background: var(--bh-surface-alt, #f8f6f0);
    border: 1px solid var(--bh-line, #e0dbd0);
    border-radius: 6px;
    padding: 12px;
    margin-top: 4px;
}
.bh-preview-body {
    white-space: pre-wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    max-height: 420px;
    overflow-y: auto;
}
.bh-font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ============================================================
 * Touch-device hover hygiene
 *
 * On phones/tablets, `:hover` fires on tap and sticks until the user
 * taps elsewhere — making buttons look permanently "pressed". Use
 * @media (hover: none) to strip the effects that look broken on touch
 * (transforms, background flips, underline toggles). Desktop mouse
 * users keep all hover feedback as-is; this block is inert on them.
 *
 * We don't gate the original :hover declarations in-place because many
 * are in compound selectors (e.g. `a:hover, a.active`) where splitting
 * would introduce a lot of churn. Overriding in a single media query
 * is cleaner and reversible.
 * ============================================================ */
@media (hover: none) {
    /* Buttons — kill the lift + darker background */
    .bh-btn:hover,
    .bh-btn-secondary:hover,
    .bh-btn-danger:hover,
    .bh-btn-nav-ghost:hover {
        transform: none;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    }
    .bh-btn:hover { background: var(--bh-honey); }
    .bh-btn-secondary:hover { background: transparent; }
    .bh-btn-danger:hover { background: #b85450; }
    .bh-btn-nav-ghost:hover {
        background: rgba(255,255,255,0.12);
        border-color: rgba(255,255,255,0.7);
    }

    /* Nav links — don't leave a sticky dark background after tap */
    .bh-navbar .nav-links a:hover { background: transparent; }
    /* .active stays applied via its own selector, so the visual cue
       for "current page" is preserved without hover bleed-through. */

    /* Footer + muted link underlines that shouldn't toggle on tap */
    .bh-footer-links a:hover,
    .bh-footer-attribution a:hover,
    .bh-link-muted:hover,
    .bh-link-plain:hover { text-decoration: none; }
    .bh-link-muted:hover { color: var(--bh-text-muted); }

    /* Verify banner resend button — don't flip color on tap */
    .bh-verify-banner-form button:hover { background: var(--bh-honey); }

    /* BeeAI widget toggle lift */
    .beeai-toggle:hover {
        background: var(--bh-honey);
        transform: none;
    }

    /* Admin nav */
    .bh-admin-nav-link:hover { background: transparent; }
    .bh-admin-nav-active:hover { background: var(--bh-honey); }

    /* Plate click-to-zoom thumbnails */
    .bh-plate-clickable:hover { opacity: 0.9; }

    /* Hive box reorder buttons */
    .bh-box-move-btn:hover { background: transparent; color: rgba(255,255,255,0.7); }

    /* Hero button on legacy landing */
    .bh-hero .bh-btn:hover { background: white; }

    /* Disabled-state hover (keep the dimmed look on touch too) */
    .bh-btn:disabled:hover,
    .bh-btn[disabled]:hover {
        background: var(--bh-line);
    }
    .bh-btn-disabled:hover {
        background: #d7cfc1;
    }
}

/* ==========================================================================
   Admin — /admin/users/<id> user detail page
   Moved out of templates/admin/user_detail.html's <style> block so the
   site-wide CSP (style-src 'self', no 'unsafe-inline') doesn't strip the
   layout.
   ========================================================================== */
.ud-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
.ud-header h1 { margin: 0; }
.ud-sub { color: #555; font-size: 0.95rem; margin: 0.1rem 0 1rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* 2-column grid of info cards. Drops to 1 column on narrow widths. */
.ud-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.ud-grid .bh-card { margin: 0; }
@media (max-width: 900px) { .ud-grid { grid-template-columns: 1fr; } }

/* Key-value lists */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 0.9rem; font-size: 0.9rem; margin: 0; }
.kv dt { color: #888; font-weight: 600; white-space: nowrap; }
.kv dd { margin: 0; word-break: break-word; }

/* Badges */
.badge-pill { display: inline-block; border-radius: 999px; padding: 0.1rem 0.55rem; font-size: 0.72rem; font-weight: 700; background: #f0f0f0; color: #555; line-height: 1.5; vertical-align: middle; }
.badge-pill.pro { background: #f0a500; color: #fff; }
.badge-pill.warn { background: #fff3cd; color: #664d03; }
.badge-pill.ok { background: #00b894; color: #fff; }
.badge-pill.danger { background: #b00; color: #fff; }

/* User-facing plan/membership badges — rendered inline next to
   display_name_short on community posts, leaderboard, nav banner,
   and public profiles. Compact enough for single-line names. */
.bh-user-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    vertical-align: middle;
    line-height: 1.4;
    text-transform: uppercase;
}
.bh-user-badge-founder { background: #e07b00; color: #fff; }
.bh-user-badge-pro { background: #f0a500; color: #3a2a10; }
.bh-user-badge-club { background: #6c5ce7; color: #fff; }

/* Action rows — shared pattern: label+help, controls row, note below. */
.ud-actions { display: flex; flex-direction: column; gap: 1rem; }
.ud-action { display: flex; flex-direction: column; gap: 0.35rem; }
.ud-action-label { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.ud-action-label > strong { font-size: 0.88rem; }
.ud-action-help { font-size: 0.75rem; color: #888; font-weight: 400; }
.ud-action-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.ud-action-row .bh-select,
.ud-action-row .bh-input { flex: 0 1 auto; width: auto; min-width: 0; max-width: 100%; }
.ud-action-row .bh-select { min-width: 140px; }
.ud-action-row .bh-input { width: 240px; max-width: 100%; }
.ud-action-row .bh-btn { flex: 0 0 auto; white-space: nowrap; }
.ud-action-note { font-size: 0.75rem; color: #888; }
.ud-section-divider { border: none; border-top: 1px solid var(--bh-line); margin: 1rem 0; }

/* Status banners — shown above the grid when the user is suspended or
 * soft-deleted. */
.status-banner { padding: 0.6rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-weight: 600; }
.status-banner.deleted { background: #ffe0e0; color: #800; border: 1px solid #b00; }
.status-banner.suspended { background: #fff0e0; color: #873500; border: 1px solid #e07b00; }

/* Danger zone — own card, distinct red treatment. */
.danger-card { border: 2px solid #b00; background: #fff8f8; }
.danger-card h3 { color: #b00; margin: 0 0 1rem; }
.danger-card .ud-action + .ud-action { border-top: 1px dashed #eaa; padding-top: 1rem; }
.ud-action-warning { color: #900; font-weight: 600; font-size: 0.78rem; }

/* ==========================================================================
   Admin — /admin/users list
   Moved out of templates/admin/users.html's <style> block (CSP).
   ========================================================================== */
.au-plan-badge { display: inline-block; border-radius: 4px; padding: 0.1rem 0.45rem; font-size: 0.75rem; font-weight: 700; }
.au-plan-badge.free { background: #f0f0f0; color: #555; }
.au-plan-badge.pro { background: #f0a500; color: #fff; }
.au-plan-badge.club { background: #6c5ce7; color: #fff; }
.au-plan-badge.commercial { background: #00b894; color: #fff; }
.au-comp-badge { display: inline-block; border-radius: 4px; padding: 0.1rem 0.4rem; font-size: 0.65rem; font-weight: 700; margin-left: 0.25rem; background: #3a3a3a; color: #fff; }
.au-comp-badge.founder { background: #e07b00; }
.au-comp-badge.mentor_comp { background: #0984e3; }
.au-comp-badge.staff { background: #2d3436; }
.au-platform-badge { font-size: 0.7rem; color: #888; }
.au-stat-cell { white-space: nowrap; font-size: 0.85rem; color: #555; }
.au-nowrap { white-space: nowrap; font-size: 0.85rem; }
.au-muted-small { color: #888; font-size: 0.85rem; }
.au-filter-bar { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.au-filter-bar label { font-size: 0.85rem; font-weight: 600; }
.au-filter-bar .au-filter-sep { margin-left: 1rem; }
.au-sort-link { text-decoration: none; color: inherit; }
.au-sort-link:hover { text-decoration: underline; }
.au-sort-link .au-arrow { color: #aaa; font-size: 0.75rem; }
.au-row-deleted td { opacity: 0.45; }
.au-row-suspended td { background: #fff5f5; }
.au-row-link { font-weight: 600; text-decoration: none; color: var(--bh-honey-dark); }
.au-row-link:hover { text-decoration: underline; }
.au-table-wrap { overflow-x: auto; }
.au-table-wrap table { min-width: 900px; }
.au-status-chip { color: #b00; font-weight: 700; }
.au-status-chip.grace { color: #e07b00; font-weight: 400; font-size: 0.85rem; }
.au-status-chip.locked { color: red; }
.au-status-chip.unverified { color: #aaa; }
.au-user-subtext { color: #888; font-size: 0.85rem; }
.au-count-note { margin-top: 0.75rem; font-size: 0.8rem; color: #888; }
.au-action-code { font-size: 0.8rem; background: #f5f0e4; padding: 0.15rem 0.35rem; border-radius: 3px; }

/* Audit log — compact system-log feel */
.au-log-card { padding: 0; }
.au-log-entries { font-family: 'Courier New', monospace; font-size: 0.78rem; line-height: 1.6; }
.au-log-entry { padding: 0.3rem 1rem; border-bottom: 1px solid var(--bh-line); display: flex; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; }
.au-log-entry:nth-child(even) { background: #faf8f3; }
.au-log-entry:hover { background: #f5f0e4; }
.au-log-ts { color: #888; white-space: nowrap; flex-shrink: 0; }
.au-log-action { background: #3a3a3a; color: #f0a500; padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.72rem; white-space: nowrap; }
.au-log-detail { color: #555; word-break: break-word; }
.au-log-val { color: var(--bh-honey-dark); font-weight: 600; }
.au-log-empty { padding: 2rem; text-align: center; color: #888; font-family: inherit; }
.au-log-header {
    display: flex; gap: 0.75rem; align-items: baseline;
    padding: 0.4rem 1rem; background: var(--bh-line);
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: #888;
}
.au-log-col-ts { width: 5.5rem; flex-shrink: 0; }
.au-log-col-action { width: 10rem; flex-shrink: 0; }
.au-log-col-detail { flex: 1; }

/* Admin prompt editor */
.au-ip-warning {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #664d03;
}
.au-prompt-field {
    font-family: 'Courier New', monospace;
    font-size: 0.82rem;
    line-height: 1.45;
    background: #f9f6ef;
    color: #555;
}
.au-prompt-field.au-prompt-unlocked {
    background: #fff;
    color: #222;
    border-color: var(--bh-honey);
}

/* Admin sidebar — sticky below the nav bar so all items are reachable
   without scrolling the page. The nav bar is ~120px tall (brand row +
   link row); we use a CSS var so it's easy to tweak. */
.bh-admin-sidebar {
    position: sticky;
    top: 8px;
    align-self: flex-start;
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    scrollbar-width: thin;
    padding-bottom: 2.5rem;
}
/* Compact the nav items so more fit without scrolling. */
.bh-admin-nav { gap: 0; }
.bh-admin-nav-link {
    padding: 0.3rem 0.55rem;
    font-size: 0.82rem;
}
.bh-admin-nav-group-label {
    font-size: 0.65rem;
    padding: 0.4rem 0.5rem 0.15rem;
}
.bh-admin-nav-icon { font-size: 0.85rem; }

/* BeeAI conversation review */
.bh-beeai-review-msg { padding: 0.75rem 1rem; border-bottom: 1px solid var(--bh-line); }
.bh-beeai-review-msg:last-child { border-bottom: none; }
.bh-beeai-review-user { background: #f9f6ef; }
.bh-beeai-review-assistant { background: #fffbf0; }
.bh-beeai-review-meta { display: flex; justify-content: space-between; margin-bottom: 0.35rem; }
.bh-beeai-review-body { font-size: 0.92rem; line-height: 1.55; white-space: pre-wrap; }

/* Admin users — filter bar */
.au-filters { margin-bottom: 1rem; }
.au-filter-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.au-filter-group { display: flex; flex-direction: column; gap: 0.2rem; }
.au-filter-group-reset { align-self: flex-end; }
.au-filter-label { font-size: 0.75rem; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.04em; }
.au-search-input { width: 220px; min-height: 36px; padding: 0.35rem 0.6rem; font-size: 0.85rem; }
.au-filter-select { width: auto; min-width: 120px; min-height: 36px; padding: 0.3rem 0.5rem; font-size: 0.85rem; }
/* Quick plan buttons — compact toggle row */
.au-quick-plans {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.au-quick-btn {
    display: inline-block;
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 4px;
    text-decoration: none;
    border: 1px solid var(--bh-line);
    color: var(--bh-honey-dark);
    background: transparent;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
}
.au-quick-btn:hover { background: var(--bh-line); }
.au-quick-btn.au-quick-active {
    background: var(--bh-honey);
    color: #fff;
    border-color: var(--bh-honey);
}

/* Admin users — pagination */
.au-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.au-pagination-info { font-size: 0.8rem; color: #888; }
.au-pagination-nav {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}
.au-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    border: 1px solid var(--bh-line);
    color: var(--bh-honey-dark);
    background: #fff;
    cursor: pointer;
    transition: background 0.1s;
}
.au-page-btn:hover { background: var(--bh-line); }
.au-page-btn.au-page-active {
    background: var(--bh-honey);
    color: #fff;
    border-color: var(--bh-honey);
    pointer-events: none;
}
.au-page-btn.au-page-disabled {
    opacity: 0.4;
    pointer-events: none;
}
.au-page-ellipsis { font-size: 0.8rem; color: #888; padding: 0 0.25rem; }
.au-per-page { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: #888; }
.au-per-page a {
    text-decoration: none;
    color: var(--bh-honey-dark);
    font-weight: 600;
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
}
.au-per-page a:hover { background: var(--bh-line); }
.au-per-page a.au-per-page-active {
    background: var(--bh-honey);
    color: #fff;
}

/* ==========================================================================
   Billing — /pricing page
   Moved out of templates/billing/pricing.html's <style> block (CSP).
   ========================================================================== */
.plan-toggle { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 2rem; }
.plan-toggle label { font-weight: 600; cursor: pointer; }
.plan-toggle-save {
    display: inline-block;
    background: var(--bh-honey);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    vertical-align: middle;
    margin-left: 0.25rem;
}
/* Custom toggle switch — replaces the default checkbox with a
   pill-shaped track + sliding circle, matching the site palette. */
.plan-toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}
.plan-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.plan-toggle-track {
    position: absolute;
    inset: 0;
    background: var(--bh-line);
    border-radius: 999px;
    transition: background 0.2s;
    cursor: pointer;
}
.plan-toggle-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.plan-toggle-switch input:checked + .plan-toggle-track {
    background: var(--bh-honey);
}
.plan-toggle-switch input:checked + .plan-toggle-track::after {
    transform: translateX(22px);
}
.plan-toggle-switch input:focus-visible + .plan-toggle-track {
    outline: 2px solid var(--bh-honey);
    outline-offset: 2px;
}
.plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.plan-card { border: 2px solid var(--bh-line); border-radius: 12px; padding: 1.75rem; background: #fff; display: flex; flex-direction: column; }
.plan-card.highlighted { border-color: var(--bh-honey); box-shadow: 0 4px 20px rgba(240, 165, 0, 0.15); }
.plan-card.current-plan { background: #fffbf0; }
.plan-name { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.25rem; }
.plan-price { font-size: 2rem; font-weight: 800; margin: 0.5rem 0; }
.plan-price small { font-size: 1rem; font-weight: 400; color: #666; }
.plan-desc { color: #555; font-size: 0.9rem; margin-bottom: 1rem; flex: 1; }
.plan-features { list-style: none; padding: 0; margin: 0 0 1.5rem; font-size: 0.9rem; }
.plan-features li::before { content: "✓ "; color: var(--bh-honey); font-weight: 700; }
.plan-cta { margin-top: auto; }
/* Buttons inside plan cards must not overflow the card border. The w-100
   class sets width:100% but on inline-flex elements (bh-btn) that can
   extend past the padded card if box-sizing isn't applied to the full
   chain. Force block display + constrain. */
.plan-cta .bh-btn,
.plan-cta form { max-width: 100%; box-sizing: border-box; }
.plan-cta .bh-btn { display: block; text-align: center; }
.plan-cta-dim { pointer-events: none; opacity: 0.6; }
.founding-banner { background: linear-gradient(135deg, var(--bh-honey), #e07b00); color: #fff; border-radius: 12px; padding: 1.5rem 2rem; margin-bottom: 2rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.founding-banner h3 { margin: 0 0 0.25rem; font-size: 1.2rem; }
.founding-banner p { margin: 0; font-size: 0.9rem; opacity: 0.9; }
.founding-banner-body { flex: 1; }
.badge-fm { background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 6px; padding: 0.2rem 0.6rem; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.plan-cta-btn { font-size: 1rem; padding: 0.6rem 1.5rem; }
.plan-footer { text-align: center; margin-top: 2rem; color: #888; font-size: 0.85rem; }
.w-100 { width: 100%; }
.bh-hide { display: none !important; }

/* FAQ page */
/* ==========================================================================
   Public profile page — /user/<slug>
   ========================================================================== */
.bh-profile-page { max-width: 720px; margin: 0 auto; }
.bh-profile-hero { text-align: center; padding: 2.5rem 1.5rem 2rem; }
.bh-profile-avatar { margin-bottom: 1rem; }
.bh-profile-avatar-img { width: 72px; height: auto; opacity: 0.8; }
.bh-profile-name {
    font-size: clamp(1.4rem, 3vw + 0.8rem, 2rem);
    font-weight: 700;
    color: var(--bh-honey-dark);
    margin: 0 0 0.35rem;
}
.bh-profile-meta {
    color: var(--bh-text-muted);
    font-size: 0.92rem;
    margin-bottom: 0.75rem;
}
.bh-profile-social {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bh-line);
}
.bh-profile-social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    color: var(--bh-honey-dark);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    border: 1px solid var(--bh-line);
    transition: background 0.15s;
}
.bh-profile-social-link:hover { background: var(--bh-cream); }
.bh-profile-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: var(--bh-honey);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
}

/* Invite form */
.bh-invite-input { width: 200px; min-height: 36px; padding: 0.35rem 0.6rem; font-size: 0.88rem; }
.au-media-actions { gap: 0.35rem; }
.au-upload-label { cursor: pointer; }
.bh-invite-msg { font-size: 0.85rem; margin-top: 0.5rem; min-height: 1.2em; }
.bh-invite-msg.bh-invite-ok { color: #1b5e20; font-weight: 600; }
.bh-invite-msg.bh-invite-err { color: #c62828; font-weight: 600; }

/* Leaderboard — "you" row highlight */
.bh-leaderboard-you { background: #fffbf0; }
.bh-leaderboard-you td { font-weight: 600; }
.bh-leaderboard-gap td { border-top: 3px dashed var(--bh-line); }

.bh-faq-q { font-size: 1.1rem; font-weight: 700; color: var(--bh-honey-dark); margin: 0 0 0.5rem; }
.bh-faq-a { font-size: 0.95rem; line-height: 1.6; margin: 0; color: #444; }
.bh-faq-a a { color: var(--bh-honey-dark); }
.bh-mb-sm { margin-bottom: 0.75rem; }

/* Turnstile widget — centered with breathing room above the submit button. */
.bh-turnstile-wrap {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}

/* ==========================================================================
   Welcome guide modal — 3-slide quickstart shown once after onboarding.
   ========================================================================== */
.wg-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.wg-modal {
    background: #fff;
    border-radius: 16px;
    max-width: 520px;
    width: 100%;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}
.wg-slides { position: relative; }
.wg-slide { display: none; }
.wg-slide-active { display: block; }
.wg-card { padding: 2rem 2rem 1rem; text-align: center; }
.wg-card-visual {
    background: var(--bh-cream);
    border-radius: 12px;
    padding: 2rem 1rem;
    margin-bottom: 1.25rem;
}
.wg-card-emoji { font-size: 3.5rem; line-height: 1; margin-bottom: 0.5rem; }
.wg-card-placeholder {
    font-size: 0.75rem;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.wg-card-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--bh-honey-dark);
    margin: 0 0 0.5rem;
}
.wg-card-desc {
    font-size: 0.92rem;
    line-height: 1.5;
    color: #555;
    margin: 0;
}
.wg-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
}
.wg-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bh-line);
    transition: background 0.2s;
}
.wg-dot-active { background: var(--bh-honey); }
.wg-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem 1.25rem;
    border-top: 1px solid var(--bh-line);
    gap: 0.5rem;
}
.wg-btn {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.88rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}
.wg-btn-dismiss {
    color: #888;
}
.wg-btn-dismiss:hover { color: #555; background: #f0f0f0; }
.wg-btn-later {
    color: var(--bh-honey-dark);
}
.wg-btn-later:hover { background: #f5f0e4; }
.wg-btn-next,
.wg-btn-start {
    background: var(--bh-honey);
    color: #fff;
    margin-left: auto;
}
.wg-btn-next:hover,
.wg-btn-start:hover { background: var(--bh-honey-dark); }
@media (max-width: 480px) {
    .wg-card { padding: 1.25rem 1.25rem 0.75rem; }
    .wg-card-emoji { font-size: 2.5rem; }
    .wg-card-title { font-size: 1.1rem; }
    .wg-footer { flex-wrap: wrap; justify-content: center; }
}

/* ==========================================================================
   Shared — amber variant for the Upgrade / primary-CTA buttons.
   Previously referenced by name in 5 templates but never defined
   globally — every "amber" button fell through to the default brown.
   ========================================================================== */
/* Light variant — white bg for use on dark/gradient backgrounds (e.g.
   Founding Member banner). High contrast against amber/orange gradients. */
.bh-btn-light {
    background: #fff;
    color: var(--bh-honey-dark);
    border-color: #fff;
}
.bh-btn-light:hover {
    background: #f5f0e4;
    color: var(--bh-honey-dark);
    border-color: #f5f0e4;
}

.bh-btn-amber {
    background: var(--bh-honey);
    color: #3a2a10;
    border-color: var(--bh-honey);
}
.bh-btn-amber:hover {
    background: var(--bh-honey-dark);
    color: #fff;
    border-color: var(--bh-honey-dark);
}
.bh-btn-amber:disabled,
.bh-btn-amber[disabled] {
    background: var(--bh-line);
    color: #888;
    border-color: var(--bh-line);
    cursor: not-allowed;
}