/* _content/RecipeHub.Server/Pages/Colorado.razor.rz.scp.css */
/* Colorado.razor.css -- scoped styles for the Colorado mountain towns page */

/* ─── Page shell + ambient "breathing" glow ─────────────────────────── */

.colorado-page[b-896my1camz] {
    --page-town: #2C4A3A;
    position: relative;
    max-width: 1320px;
    margin: 0 auto;
    padding: 1rem 1.5rem 3rem;
    font-family: var(--font-sans, "Outfit", system-ui, sans-serif);
}

.colorado-page[b-896my1camz]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-color: color-mix(in srgb, var(--page-town) 9%, transparent);
    transition: background-color 0.9s ease;
}

.colorado-page[b-896my1camz]::after {
    content: "";
    position: fixed;
    inset: -12%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(36% 30% at 16% 12%,
            color-mix(in srgb, var(--page-town) 24%, transparent) 0%, transparent 70%),
        radial-gradient(40% 34% at 84% 80%,
            color-mix(in srgb, var(--page-town) 16%, transparent) 0%, transparent 72%);
    filter: blur(10px);
    opacity: 0.85;
    animation: co-drift-b-896my1camz 28s ease-in-out infinite alternate;
}

@keyframes co-drift-b-896my1camz {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(2.5%, -2%, 0) scale(1.07); }
}

/* ─── Page header ───────────────────────────────────────────────────── */

.colorado-header[b-896my1camz] {
    margin-bottom: 1.5rem;
}

.colorado-header h1[b-896my1camz] {
    font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
    font-size: clamp(2.2rem, 4vw, 2.9rem);
    margin-bottom: 0.25rem;
    line-height: 1.05;
}

.colorado-header .subtitle[b-896my1camz] {
    color: var(--text-muted, #6b6b66);
    margin: 0;
    font-size: 1.05rem;
}

.colorado-main[b-896my1camz] {
    min-width: 0;
}

/* ─── Town tabs (trail-marker pills) ─────────────────────────────────── */

.town-tabs[b-896my1camz] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.town-tab[b-896my1camz] {
    --town: #2C4A3A;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1.5px solid color-mix(in srgb, var(--town) 35%, #d8d6cc);
    background: #fff;
    color: #3c3a35;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s, background 0.15s, color 0.15s, border-color 0.15s;
}

.town-tab:hover[b-896my1camz] {
    transform: translateY(-1px);
    border-color: var(--town);
    box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--town) 70%, #000);
}

.town-tab .tab-dot[b-896my1camz] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--town);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--town) 22%, transparent);
}

.town-tab .tab-glyph[b-896my1camz] {
    font-size: 0.7rem;
    color: var(--town);
    line-height: 1;
}

.town-tab.is-active[b-896my1camz] {
    background: var(--town);
    border-color: var(--town);
    color: #fff;
    box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--town) 78%, #000);
}

.town-tab.is-active .tab-dot[b-896my1camz] {
    background: #fff;
    box-shadow: none;
}

.town-tab.is-active .tab-glyph[b-896my1camz] {
    color: #fff;
}

/* ─── Town hero (image swaps per town; same size for every town) ──────── */

.town-hero[b-896my1camz] {
    --town: #2C4A3A;
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    margin: 0 0 1.5rem;
    isolation: isolate;
    background:
        radial-gradient(120% 140% at 16% -15%,
            color-mix(in srgb, var(--town) 38%, #ffffff) 0%, transparent 46%),
        linear-gradient(160deg,
            color-mix(in srgb, var(--town) 86%, #000) 0%,
            var(--town) 52%,
            color-mix(in srgb, var(--town) 68%, #000) 100%);
    box-shadow: 0 20px 44px -24px color-mix(in srgb, var(--town) 65%, #000);
}

.town-hero-media[b-896my1camz] {
    position: relative;
    height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 14px 0;
}

.town-hero-image[b-896my1camz] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
    filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.38));
}

.hero-ridge[b-896my1camz] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 70px;
    color: color-mix(in srgb, var(--town) 52%, #000);
    pointer-events: none;
    z-index: 1;
}

.hero-ridge path[b-896my1camz] {
    fill: currentColor;
    opacity: 0.92;
}

.town-hero-caption[b-896my1camz] {
    position: relative;
    z-index: 2;
    padding: 0 1.5rem 1.4rem;
    color: #fff;
}

.hero-eyebrow[b-896my1camz] {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    font-weight: 700;
    color: color-mix(in srgb, #ffffff 82%, var(--town));
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.hero-title[b-896my1camz] {
    font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
    font-size: clamp(2.1rem, 5vw, 3.2rem);
    line-height: 1.02;
    margin: 0.1rem 0 0.55rem;
    font-weight: 600;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}

.hero-stats[b-896my1camz] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 0.92rem;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.hero-stat strong[b-896my1camz] {
    font-size: 1.1rem;
}

.hero-dot[b-896my1camz] {
    opacity: 0.55;
}

/* ─── All-towns hero: time-of-day mountain scene ─────────────────────── */

.town-hero-all[b-896my1camz] {
    --town: #2C4A3A;
    position: relative;
}

.town-hero-all.phase-day[b-896my1camz] {
    background: linear-gradient(180deg, #7FB6E6 0%, #A9D2EC 50%, #CFE6F0 100%);
}

.town-hero-all.phase-dawn[b-896my1camz] {
    background: linear-gradient(180deg, #2E3566 0%, #6E5A8E 42%, #E59A6B 80%, #F4C58A 100%);
}

.town-hero-all.phase-dusk[b-896my1camz] {
    background: linear-gradient(180deg, #241E48 0%, #7E3F6B 40%, #DF6E3C 74%, #F2A65A 100%);
}

.town-hero-all.phase-night[b-896my1camz] {
    background: linear-gradient(180deg, #0A0F24 0%, #131A38 52%, #222E54 100%);
}

.town-hero-all[b-896my1camz]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.45) 100%);
}

.hero-all-scene[b-896my1camz] {
    position: relative;
    height: 300px;
}

.scene-svg[b-896my1camz] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.hero-all-scene .r-back[b-896my1camz]  { fill: rgba(255, 255, 255, 0.10); }
.hero-all-scene .r-mid[b-896my1camz]   { fill: rgba(0, 0, 0, 0.18); }
.hero-all-scene .r-front[b-896my1camz] { fill: rgba(0, 0, 0, 0.34); }

.phase-dusk .r-mid[b-896my1camz]   { fill: rgba(40, 20, 50, 0.34); }
.phase-dusk .r-front[b-896my1camz] { fill: rgba(20, 10, 30, 0.6); }

.phase-night .r-back[b-896my1camz]  { fill: rgba(180, 196, 232, 0.10); }
.phase-night .r-mid[b-896my1camz]   { fill: rgba(70, 86, 130, 0.45); }
.phase-night .r-front[b-896my1camz] { fill: rgba(12, 18, 40, 0.9); }

.sky-glow[b-896my1camz] {
    filter: blur(12px);
    opacity: 0.5;
}

.phase-day  .sky-glow[b-896my1camz] { fill: #FFF1B8; }
.phase-day  .sky-body[b-896my1camz] { fill: #FCE08A; }
.phase-dawn .sky-glow[b-896my1camz] { fill: #FFD9A6; }
.phase-dawn .sky-body[b-896my1camz] { fill: #FFCB85; }
.phase-dusk .sky-glow[b-896my1camz] { fill: #FF9E5E; }
.phase-dusk .sky-body[b-896my1camz] { fill: #FFB770; }
.phase-night .sky-glow[b-896my1camz] { fill: #AEB9D8; opacity: 0.28; }
.phase-night .sky-body[b-896my1camz] { fill: #E8ECF6; }

.hero-stars[b-896my1camz] {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.phase-night .hero-stars[b-896my1camz] { opacity: 1; }
.phase-dusk  .hero-stars[b-896my1camz] { opacity: 0.55; }

.star[b-896my1camz] {
    fill: #ffffff;
    animation: co-twinkle-b-896my1camz 3.4s ease-in-out infinite;
}

@keyframes co-twinkle-b-896my1camz {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 1; }
}

/* ─── Filters bar (search + chips) ───────────────────────────────────── */

.filters-bar[b-896my1camz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem 1.5rem;
    background: #FAF9F5;
    border: 1px solid #e7e5dc;
    border-radius: 14px;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.25rem;
}

.search-wrap[b-896my1camz] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 320px;
    min-width: 220px;
}

.search-icon[b-896my1camz] {
    position: absolute;
    left: 0.85rem;
    width: 18px;
    height: 18px;
    color: color-mix(in srgb, var(--page-town) 55%, #8a8880);
    pointer-events: none;
}

.search-input[b-896my1camz] {
    width: 100%;
    font-family: inherit;
    font-size: 0.95rem;
    color: #2c2b27;
    padding: 0.6rem 2.2rem 0.6rem 2.6rem;
    border: 1.5px solid #dcdacf;
    border-radius: 999px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.search-input[b-896my1camz]::placeholder { color: #a6a499; }

.search-input:focus[b-896my1camz] {
    outline: none;
    border-color: var(--page-town);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--page-town) 18%, transparent);
}

.search-clear[b-896my1camz] {
    position: absolute;
    right: 0.6rem;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #ece9df;
    color: #6b6a64;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.search-clear:hover[b-896my1camz] {
    background: #e0ddd2;
    color: #3c3a35;
}

/* ─── Chips ──────────────────────────────────────────────────────────── */

.chip-row[b-896my1camz] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chip[b-896my1camz] {
    border: 1px solid #d3d1c7;
    border-radius: 999px;
    background: transparent;
    padding: 0.35rem 0.9rem;
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
    color: inherit;
}

.chip:hover[b-896my1camz] {
    border-color: #2C4A3A;
}

.chip-active[b-896my1camz] {
    color: #fff;
    background: #2C4A3A;
    border-color: #2C4A3A;
}

/* ─── Results bar + page size ────────────────────────────────────────── */

.results-bar[b-896my1camz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: 0 0 1rem;
}

.results-count[b-896my1camz] {
    font-size: 0.9rem;
    color: #6b6a64;
}

.page-size-wrap[b-896my1camz] {
    font-size: 0.85rem;
    color: #6b6a64;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.page-size[b-896my1camz] {
    font-family: inherit;
    font-size: 0.85rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid #d3d1c7;
    border-radius: 8px;
    background: #fff;
    color: inherit;
    cursor: pointer;
}

/* ════════════════════════════════════════════════════════════════════════
   EVENT CARDS  --  vibrant, glowing, per-town themed, holographic on hover.
   ════════════════════════════════════════════════════════════════════════ */

.event-grid[b-896my1camz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1.5rem;
    margin-top: 0.5rem;
}

.event-card[b-896my1camz] {
    --town: #888780;
    --rx: 0deg;
    --ry: 0deg;
    --mx: 50%;
    --my: 50%;
    --hue: 0deg;
    --lift: 0px;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--town) 5%, #ffffff) 0%,
            color-mix(in srgb, var(--town) 13%, #FAF9F5) 100%);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 18px 30px -22px color-mix(in srgb, var(--town) 60%, #000);
    transform: perspective(900px) translateY(var(--lift))
               rotateX(var(--rx)) rotateY(var(--ry));
    transition:
        transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 0.22s ease;
    animation: co-rise-b-896my1camz 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--i, 0) * 45ms);
    will-change: transform;
}

.event-card.is-tilting[b-896my1camz] {
    transition: box-shadow 0.22s ease;
}

@keyframes co-rise-b-896my1camz {
    from { opacity: 0; translate: 0 16px; }
    to   { opacity: 1; translate: 0 0; }
}

.event-card[b-896my1camz]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.6px;
    background: linear-gradient(135deg,
        var(--town) 0%,
        color-mix(in srgb, var(--town) 45%, #C2A24A) 48%,
        color-mix(in srgb, var(--town) 78%, #ffffff) 100%);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
            mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0.5;
    filter: hue-rotate(var(--hue));
    transition: opacity 0.22s ease;
    pointer-events: none;
    z-index: 4;
}

.event-card[b-896my1camz]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(240px circle at var(--mx) var(--my),
        rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%);
    mix-blend-mode: soft-light;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    z-index: 5;
}

.event-card.is-tilting[b-896my1camz]::before {
    opacity: 1;
}

.event-card:hover[b-896my1camz],
.event-card:focus-visible[b-896my1camz] {
    --lift: -6px;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.05),
        0 28px 48px -22px color-mix(in srgb, var(--town) 72%, #000),
        0 0 26px -6px color-mix(in srgb, var(--town) 55%, transparent);
}

.event-card:hover[b-896my1camz]::after,
.event-card:focus-visible[b-896my1camz]::after {
    opacity: 1;
}

/* ─── Media area ─────────────────────────────────────────────────────── */

.event-media[b-896my1camz] {
    position: relative;
    height: 172px;
    overflow: hidden;
    background:
        radial-gradient(120% 120% at 22% 8%,
            color-mix(in srgb, var(--town) 55%, #ffffff) 0%, transparent 55%),
        linear-gradient(150deg,
            color-mix(in srgb, var(--town) 92%, #000) 0%,
            var(--town) 58%,
            color-mix(in srgb, var(--town) 68%, #000) 100%);
}

.event-image[b-896my1camz] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
    filter: grayscale(0.6) contrast(1.04);
    transition:
        transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 0.45s ease;
}

.event-card:hover .event-image[b-896my1camz],
.event-card:focus-visible .event-image[b-896my1camz] {
    transform: scale(1.09);
    filter: grayscale(0) contrast(1);
}

.event-media-tint[b-896my1camz] {
    position: absolute;
    inset: 0;
    background: var(--town);
    mix-blend-mode: color;
    opacity: 0.5;
    transition: opacity 0.45s ease;
    pointer-events: none;
    z-index: 1;
}

.event-card:hover .event-media-tint[b-896my1camz],
.event-card:focus-visible .event-media-tint[b-896my1camz] {
    opacity: 0.12;
}

.event-media-scrim[b-896my1camz] {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            transparent 32%,
            color-mix(in srgb, var(--town) 58%, transparent) 100%),
        linear-gradient(115deg,
            color-mix(in srgb, var(--town) 38%, transparent) 0%,
            transparent 46%);
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1;
}

.event-media.no-image[b-896my1camz] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-media.no-image[b-896my1camz]::before {
    content: "▲";
    font-size: 2.8rem;
    line-height: 1;
    color: color-mix(in srgb, #ffffff 70%, var(--town));
    opacity: 0.55;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.event-media[b-896my1camz]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 55%;
    background: linear-gradient(105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.38) 50%,
        transparent 100%);
    transform: translateX(-170%) skewX(-12deg);
    pointer-events: none;
    z-index: 2;
}

.event-card:hover .event-media[b-896my1camz]::after {
    transform: translateX(300%) skewX(-12deg);
    transition: transform 0.7s ease;
}

.event-date-float[b-896my1camz] {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    z-index: 3;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--town) 72%, rgba(0, 0, 0, 0.45));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid color-mix(in srgb, #ffffff 38%, transparent);
    box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.5);
}

.free-flag[b-896my1camz] {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    z-index: 3;
    font-size: 0.71rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #07350b;
    padding: 0.28rem 0.66rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #C5F4A9 0%, #6FD86F 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.55),
        0 4px 16px -4px rgba(79, 200, 100, 0.85);
}

/* ─── Body ───────────────────────────────────────────────────────────── */

.event-body[b-896my1camz] {
    position: relative;
    z-index: 1;
    padding: 0.9rem 1.05rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.event-name[b-896my1camz] {
    font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
    font-size: 1.3rem;
    margin: 0;
    line-height: 1.25;
    color: #23221f;
    transition: color 0.18s ease;
}

.event-card:hover .event-name[b-896my1camz],
.event-card:focus-visible .event-name[b-896my1camz] {
    color: color-mix(in srgb, var(--town) 78%, #1a1a17);
}

.event-meta[b-896my1camz] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.town-badge[b-896my1camz] {
    color: #fff;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--town) 78%, #000) 0%,
        var(--town) 100%);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 0.2rem 0.62rem;
    border-radius: 999px;
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--town) 90%, #000);
}

.region-chip[b-896my1camz] {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--town) 16%, #ffffff);
    color: color-mix(in srgb, var(--town) 65%, #2a2a26);
    border: 1px solid color-mix(in srgb, var(--town) 35%, transparent);
}

.cost-badge[b-896my1camz] {
    font-size: 0.73rem;
    font-weight: 700;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: #efece2;
    color: #5f5e5a;
}

.event-location[b-896my1camz] {
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--town) 32%, #7d7b74);
}

.event-description[b-896my1camz] {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #4a4a47;
    margin: 0.2rem 0 0;
    max-height: 7.5em;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.4rem;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--town) 55%, transparent) transparent;
}

.event-description[b-896my1camz]::-webkit-scrollbar { width: 6px; }
.event-description[b-896my1camz]::-webkit-scrollbar-track { background: transparent; }
.event-description[b-896my1camz]::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--town) 50%, transparent);
    border-radius: 999px;
}
.event-description[b-896my1camz]::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--town) 72%, transparent);
}

.event-source[b-896my1camz] {
    font-size: 0.68rem;
    color: color-mix(in srgb, var(--town) 35%, #aaa89e);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-top: 0.35rem;
}

.status-message[b-896my1camz] {
    padding: 2.5rem 0;
    text-align: center;
    color: #8a8880;
}

/* ─── Pager ──────────────────────────────────────────────────────────── */

.pager[b-896my1camz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: 2.25rem 0 0;
}

.pager-btn[b-896my1camz],
.pager-num[b-896my1camz] {
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid #d8d6cc;
    background: #fff;
    color: #3c3a35;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}

.pager-btn[b-896my1camz] { padding: 0.45rem 0.95rem; }

.pager-num[b-896my1camz] {
    min-width: 2.2rem;
    padding: 0.45rem 0.5rem;
    text-align: center;
}

.pager-btn:hover:not(:disabled)[b-896my1camz],
.pager-num:hover:not(.is-current)[b-896my1camz] {
    border-color: var(--page-town);
    transform: translateY(-1px);
}

.pager-btn:disabled[b-896my1camz] {
    opacity: 0.4;
    cursor: default;
}

.pager-num.is-current[b-896my1camz] {
    background: var(--page-town);
    border-color: var(--page-town);
    color: #fff;
}

.pager-gap[b-896my1camz] {
    padding: 0 0.25rem;
    color: #a6a499;
}

/* ─── Skeleton loader (town-tinted shimmer) ──────────────────────────── */

.skeleton-card[b-896my1camz] {
    --i: 0;
    border-radius: 18px;
    overflow: hidden;
    background: #FAF9F5;
    border: 1px solid #ece9df;
    animation: co-rise-b-896my1camz 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--i) * 45ms);
}

.sk-media[b-896my1camz] { height: 172px; background: #eeebe1; }

.sk-body[b-896my1camz] {
    padding: 0.9rem 1.05rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.sk-line[b-896my1camz] { height: 0.85rem; border-radius: 6px; background: #e7e4da; }
.sk-title[b-896my1camz] { height: 1.2rem; width: 75%; }
.sk-meta[b-896my1camz] { width: 55%; }
.sk-line.short[b-896my1camz] { width: 40%; }

.skeleton-card .sk-media[b-896my1camz],
.skeleton-card .sk-line[b-896my1camz] {
    background-image: linear-gradient(100deg,
        transparent 30%,
        color-mix(in srgb, var(--page-town, #2C4A3A) 22%, #ffffff) 50%,
        transparent 70%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: co-shimmer-b-896my1camz 1.4s ease-in-out infinite;
}

@keyframes co-shimmer-b-896my1camz {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ─── Mobile polish ──────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .town-hero-media[b-896my1camz] { height: 240px; }
    .hero-all-scene[b-896my1camz] { height: 220px; }
    .event-media[b-896my1camz] { height: 156px; }
}

/* ─── Reduced motion ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .colorado-page[b-896my1camz]::after { animation: none; }

    .star[b-896my1camz] { animation: none; opacity: 0.6; }

    .event-card[b-896my1camz] {
        animation: none;
        opacity: 1;
        translate: 0 0;
        transform: none;
        transition: box-shadow 0.22s ease;
    }

    .event-card:hover[b-896my1camz],
    .event-card:focus-visible[b-896my1camz] { transform: none; }

    .event-card[b-896my1camz]::before { display: none; }

    .event-image[b-896my1camz],
    .event-card:hover .event-image[b-896my1camz],
    .event-card:focus-visible .event-image[b-896my1camz] { transition: none; }

    .event-card:hover .event-image[b-896my1camz],
    .event-card:focus-visible .event-image[b-896my1camz] { transform: scale(1.02); }

    .event-media[b-896my1camz]::after,
    .event-card:hover .event-media[b-896my1camz]::after {
        transition: none;
        transform: translateX(-170%) skewX(-12deg);
    }

    .skeleton-card[b-896my1camz],
    .skeleton-card .sk-media[b-896my1camz],
    .skeleton-card .sk-line[b-896my1camz] { animation: none; }

    .pager-btn[b-896my1camz],
    .pager-num[b-896my1camz] { transition: none; }

    .pager-btn:hover:not(:disabled)[b-896my1camz],
    .pager-num:hover:not(.is-current)[b-896my1camz] { transform: none; }
}
/* _content/RecipeHub.Server/Pages/GrowingYear.razor.rz.scp.css */
/* ── CSS Custom Properties (light/parchment defaults) ───────────────────── */
.gy-root[b-dcryor3243] {
    --ink:       #2a2a22;
    --muted:     #6f6a59;
    --faint:     #9a937f;
    --card:      #FBF8F0;
    --paper:     #EFE7D3;
    --line:      rgba(44,87,57,.16);
    --line-2:    rgba(44,87,57,.28);
    --gold:      #C8860A;
    --hunter:    #2C5739;
    --frost:     #2E8FD6;
    --sun:       #F2A900;
    --shadow-sm: 0 8px 22px -14px rgba(60,50,20,.5);
    --shadow:    0 18px 40px -22px rgba(60,50,20,.45);
    --paper-2:   #E7DCC2;

    /* 13 category hues */
    --c-warm:    #E8442A;
    --c-cool:    #1FB574;
    --c-herb:    #9FCE2C;
    --c-root:    #F08700;
    --c-aflower: #FF2E93;
    --c-pflower: #9B4DFF;
    --c-fruit:   #E01E5A;
    --c-bulb:    #F2A900;
    --c-pveg:    #00B3A4;
    --c-peren:   #2E8FD6;
    --c-shrub:   #C2702F;
    --c-vine:    #6AA121;
    --c-lawn:    #3FBF3F;
    background: transparent;
    min-height: 100vh;
    font-family: var(--font);
    color: var(--ink);
    overflow-x: hidden;
    position: relative;
}

/* Dark theme tokens (night / dawn / dusk) */
.gy-root.gy-dark[b-dcryor3243] {
    --ink:    #f3efe4;
    --muted:  #c6bfae;
    --faint:  #8f8979;
    --card:   rgba(22,19,38,.55);
    --paper:  rgba(255,255,255,.05);
    --line:   rgba(255,255,255,.14);
    --line-2: rgba(255,255,255,.24);
    --gold:   #ffd060;
}

/* ── 4-layer sky system ──────────────────────────────────────────────────── */
.gy-sky[b-dcryor3243] {
    position: fixed; inset: 0; z-index: -2; pointer-events: none;
}
.gy-sky > div[b-dcryor3243] {
    position: absolute; inset: 0;
    transition: opacity 2.6s linear;
    will-change: opacity;
}
.gy-sky-day[b-dcryor3243] {
    opacity: 1;
    background:
        radial-gradient(900px 520px at 82% 0%, rgba(255,46,147,.05), transparent 60%),
        radial-gradient(820px 520px at 4% 18%, rgba(155,77,255,.05), transparent 60%),
        radial-gradient(900px 600px at 50% 116%, rgba(31,181,116,.06), transparent 58%),
        #EFE7D3;
}
.gy-sky-dawn[b-dcryor3243] {
    background: linear-gradient(180deg,#1d1f4a 0%,#3a2f6e 17%,#7a3f86 37%,#c75a86 57%,#ff8e6b 79%,#ffd6a3 100%);
    opacity: 0;
}
.gy-sky-dusk[b-dcryor3243] {
    background: linear-gradient(180deg,#0f2350 0%,#3b2a66 16%,#742f7e 35%,#ba3d61 55%,#ff6f3d 79%,#ffc24b 100%);
    opacity: 0;
}
.gy-sky-night[b-dcryor3243] {
    background:
        radial-gradient(900px 620px at 78% 12%, rgba(155,77,255,.34), transparent 60%),
        radial-gradient(820px 600px at 12% 22%, rgba(0,179,164,.24), transparent 60%),
        radial-gradient(1000px 720px at 50% 112%, rgba(226,62,87,.26), transparent 56%),
        radial-gradient(720px 520px at 90% 82%, rgba(46,143,214,.24), transparent 60%),
        linear-gradient(180deg,#0a0a18,#0c0a1e 52%,#070512);
    opacity: 0;
}
.gy-stars[b-dcryor3243] {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    opacity: 0; transition: opacity 2.6s linear; will-change: opacity;
}
@keyframes gy-twinkle-b-dcryor3243 {
    from { opacity: 0.15; }
    to   { opacity: 0.95; }
}

/* ── Animated rainbow hairline ───────────────────────────────────────────── */
.gy-rainbow-rule[b-dcryor3243] {
    height: 3px;
    border: 0; border-radius: 3px;
    background: linear-gradient(90deg,
        #E8442A, #F08700, #F2A900, #9FCE2C, #1FB574,
        #00B3A4, #2E8FD6, #9B4DFF, #FF2E93, #E01E5A);
    background-size: 200% 100%;
    animation: gy-rainbow-slide-b-dcryor3243 14s linear infinite;
    position: relative; z-index: 2;
}
@keyframes gy-rainbow-slide-b-dcryor3243 {
    to { background-position: 200% 0; }
}

/* ── Loading ─────────────────────────────────────────────────────────────── */
.gy-loading[b-dcryor3243] { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.gy-loading-inner[b-dcryor3243] { text-align: center; }
.gy-loading-icon[b-dcryor3243] {
    font-size: 72px; animation: gy-float-b-dcryor3243 2.4s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(44,87,57,0.6)); display: block; margin-bottom: 20px;
}
.gy-loading-title[b-dcryor3243] {
    font-family: var(--font-serif); font-size: 28px; font-style: italic;
    background: linear-gradient(135deg,#2C5739,#1FB574,#00B3A4);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    margin: 0 0 8px;
}
.gy-loading-sub[b-dcryor3243] { font-size: 13px; color: var(--faint); font-family: var(--font-mono); }
@keyframes gy-float-b-dcryor3243 {
    0%,100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-16px) scale(1.08); }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.gy-hero[b-dcryor3243] {
    display: grid; grid-template-columns: 1.02fr 0.98fr;
    gap: clamp(24px,4vw,56px); align-items: center;
    max-width: 1240px; margin: 0 auto;
    padding: clamp(26px,5vw,56px) clamp(18px,4vw,42px) 8px;
    background: transparent; color: var(--ink);
}
@media (max-width: 920px) { .gy-hero[b-dcryor3243] { grid-template-columns: 1fr; } }

.gy-hero-copy[b-dcryor3243] { display: flex; flex-direction: column; }

.gy-hero-eyebrow[b-dcryor3243] {
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    letter-spacing: 2.4px; text-transform: uppercase;
    color: var(--hunter, #2C5739); margin-bottom: 16px;
    display: flex; align-items: center; gap: 12px;
}
.gy-hero-eyebrow[b-dcryor3243]::before {
    content: ""; height: 3px; width: 46px; border-radius: 3px; flex-shrink: 0;
    background: linear-gradient(90deg, #E8442A, #F2A900, #1FB574, #2E8FD6, #9B4DFF, #FF2E93);
}
.gy-hero-title[b-dcryor3243] {
    font-family: var(--font-serif); font-size: clamp(38px,6.5vw,72px);
    font-weight: 700; font-style: italic; margin: 0 0 18px; line-height: 1.08;
    color: var(--ink);
}
.gy-hero-lede[b-dcryor3243] {
    font-size: clamp(15px,1.7vw,18px); color: var(--muted);
    max-width: 46ch; margin: 0 0 24px; line-height: 1.6;
}
/* Animated rainbow fill on the word "Year" */
.gy-year-rainbow[b-dcryor3243] {
    background: linear-gradient(92deg,
        #E8442A, #F08700, #F2A900, #1FB574, #00B3A4, #2E8FD6, #9B4DFF, #FF2E93);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    background-size: 220% 100%;
    animation: gy-rainbow-slide-b-dcryor3243 10s linear infinite;
    font-style: italic;
}
.gy-hero-stats[b-dcryor3243] {
    display: flex; flex-wrap: wrap; gap: 10px;
}
.gy-stat[b-dcryor3243] {
    display: flex; flex-direction: column; gap: 4px;
    padding: 11px 16px; min-width: 104px;
    background: var(--card); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: var(--shadow-sm);
    position: relative; overflow: hidden; transition: all 0.25s;
}
.gy-stat[b-dcryor3243]::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px; background: var(--ac, var(--hunter));
    border-radius: 14px 0 0 14px;
}
.gy-stat:hover[b-dcryor3243] { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.gy-stat-val[b-dcryor3243] {
    font-family: var(--font-serif); font-size: 23px; color: var(--ink);
    font-weight: 600; line-height: 1; margin-top: 2px;
}
.gy-stat-lbl[b-dcryor3243] { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); }
.gy-stat-sep[b-dcryor3243] { display: none; }

/* ── Banners ─────────────────────────────────────────────────────────────── */
.gy-banner[b-dcryor3243] {
    display: flex; align-items: center; gap: 14px; padding: 14px 24px;
    font-size: 14px; line-height: 1.5; background: var(--card); border-bottom: 1px solid var(--line);
}
.gy-banner-freeze[b-dcryor3243] { border-left: 3px solid #5599ff; color: #0a1a5a; background: #dde6f8; }
.gy-banner-frost[b-dcryor3243]  { border-left: 3px solid #70b0ff; color: #0a2a6a; background: #e2eaf8; }
.gy-banner-ok[b-dcryor3243]     { border-left: 3px solid #1FB574; color: #0e4024; background: #ddf4ea; }
.gy-root.gy-dark .gy-banner-freeze[b-dcryor3243] { color: #a0c4ff; background: rgba(30,80,220,.15); }
.gy-root.gy-dark .gy-banner-frost[b-dcryor3243]  { color: #b8d4ff; background: rgba(60,130,240,.12); }
.gy-root.gy-dark .gy-banner-ok[b-dcryor3243]     { color: #90e8c0; background: rgba(20,170,90,.12); }
.gy-banner-icon[b-dcryor3243] { font-size: 22px; flex-shrink: 0; }
.gy-banner-body[b-dcryor3243] { flex: 1; }
.gy-banner-wx[b-dcryor3243] { font-family: var(--font-mono); font-size: 12px; color: var(--faint); white-space: nowrap; }

/* ── Right Now strip ─────────────────────────────────────────────────────── */
.gy-rightnow[b-dcryor3243] { padding: 28px 24px 16px; border-bottom: 1px solid var(--line); background: var(--card); }
.gy-rightnow-head[b-dcryor3243] { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.gy-rightnow-title[b-dcryor3243] { font-family: var(--font-serif); font-size: 22px; font-weight: 600; font-style: italic; color: var(--ink); }
.gy-rightnow-sub[b-dcryor3243] { font-size: 12px; color: var(--faint); font-family: var(--font-mono); }
.gy-rightnow-grid[b-dcryor3243] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 14px;
}
.now-card[b-dcryor3243] {
    --accent: #888;
    position: relative;
    background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
    padding: 20px 20px 18px; overflow: hidden;
    transition: transform .22s, box-shadow .22s;
}
.now-card:hover[b-dcryor3243] {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 22%, transparent);
}
.nc-glow[b-dcryor3243] {
    position: absolute; top: -28px; right: -28px; width: 120px; height: 120px;
    border-radius: 50%; pointer-events: none; opacity: 0.6;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%);
}
.nc-act[b-dcryor3243] {
    font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
    letter-spacing: .12em; color: var(--accent); margin-bottom: 8px; position: relative;
}
.nc-count[b-dcryor3243] {
    font-family: var(--font-serif); font-size: 34px; font-weight: 700;
    color: var(--ink); line-height: 1; margin-bottom: 10px; position: relative;
}
.nc-list[b-dcryor3243] {
    font-size: 13px; color: var(--muted); line-height: 1.5; position: relative;
}
.nc-list strong[b-dcryor3243] { color: var(--ink); font-weight: 600; }

/* ── Filter bar ──────────────────────────────────────────────────────────── */
.gy-filter-bar[b-dcryor3243] {
    position: sticky; top: 64px; z-index: 40;
    background: rgba(251,248,240,.88); backdrop-filter: blur(12px);
    border: 1px solid var(--line); border-radius: 18px;
    margin: 0 24px 24px; padding: 13px 15px;
    box-shadow: 0 8px 22px -14px rgba(60,50,20,.5);
    display: flex; flex-direction: column; gap: 10px;
}
.gy-root.gy-dark .gy-filter-bar[b-dcryor3243] {
    background: rgba(14,9,32,.82);
}
.gy-filter-row[b-dcryor3243]  { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.gy-filter-group[b-dcryor3243] { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; }
.gy-filter-chip[b-dcryor3243] {
    --ch: #888;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 16px; border-radius: 20px; font-size: 13px; font-weight: 500;
    border: 1.5px solid color-mix(in srgb,var(--ch) 40%,transparent);
    background: rgba(255,255,255,.55); color: var(--muted);
    cursor: pointer; transition: all .2s; font-family: var(--font); white-space: nowrap;
}
.gy-root.gy-dark .gy-filter-chip[b-dcryor3243] { background: rgba(255,255,255,.07); }
.gy-filter-chip:hover[b-dcryor3243] { background: color-mix(in srgb,var(--ch) 12%,white); color: var(--ink); transform: translateY(-1px); box-shadow: 0 4px 14px -8px var(--ch); }
.gy-root.gy-dark .gy-filter-chip:hover[b-dcryor3243] { background: color-mix(in srgb,var(--ch) 18%,#1a1030); }
.gy-filter-chip.on[b-dcryor3243], .gy-filter-chip.active[b-dcryor3243] {
    background: var(--ch); color: #fff;
    border-color: var(--ch);
    box-shadow: 0 6px 18px -7px var(--ch);
}
.gy-chip-dot[b-dcryor3243] {
    width: 7px; height: 7px; border-radius: 50%; background: var(--ch);
    display: inline-block; flex-shrink: 0;
    box-shadow: 0 0 5px var(--ch);
}
.gy-filter-chip.on .gy-chip-dot[b-dcryor3243], .gy-filter-chip.active .gy-chip-dot[b-dcryor3243] { background: rgba(255,255,255,.8); box-shadow: none; }
.gy-chip-count[b-dcryor3243] {
    font-size: 11px; font-family: var(--font-mono); opacity: .65;
    margin-left: 4px; font-weight: 600;
}

/* Segmented difficulty pill */
.diff-toggle[b-dcryor3243] {
    display: flex; gap: 4px;
    background: var(--paper-2, #E7DCC2); border: 1px solid var(--line);
    border-radius: 999px; padding: 3px; flex-shrink: 0;
}
.diff-btn[b-dcryor3243] {
    background: transparent; border: none; border-radius: 999px;
    padding: 4px 12px; font-size: 12px; font-weight: 500;
    color: var(--muted); cursor: pointer; font-family: var(--font);
    transition: background .15s, color .15s; white-space: nowrap;
}
.diff-btn.on[b-dcryor3243] { background: var(--hunter, #2C5739); color: #fff; }
.gy-root.gy-dark .diff-toggle[b-dcryor3243] { background: rgba(255,255,255,.07); }
.gy-root.gy-dark .diff-btn.on[b-dcryor3243] { background: rgba(120,60,220,.5); color: #d0b8ff; }

/* Search with icon */
.gy-search-wrap[b-dcryor3243] { position: relative; display: flex; align-items: center; }
.gy-search-icon[b-dcryor3243] {
    position: absolute; left: 11px; color: var(--faint); pointer-events: none; flex-shrink: 0;
}
.gy-search[b-dcryor3243] {
    border: 1.5px solid var(--line); border-radius: 20px;
    padding: 6px 32px 6px 34px; font-size: 13px; font-family: var(--font);
    background: rgba(255,255,255,.75); color: var(--ink);
    width: 180px; outline: none; transition: border-color .2s, box-shadow .2s;
}
.gy-root.gy-dark .gy-search[b-dcryor3243] { background: rgba(255,255,255,.07); color: var(--ink); }
.gy-search[b-dcryor3243]::placeholder { color: var(--faint); }
.gy-search:focus[b-dcryor3243] { border-color: #2C5739; box-shadow: 0 0 14px rgba(44,87,57,.2); }
.gy-root.gy-dark .gy-search:focus[b-dcryor3243] { border-color: rgba(160,120,255,.5); box-shadow: 0 0 14px rgba(130,70,255,.24); }
.gy-search-clear[b-dcryor3243] { position: absolute; right: 10px; background: none; border: none; font-size: 11px; color: var(--faint); cursor: pointer; padding: 0; }
.gy-filter-count[b-dcryor3243] { font-family: var(--font-mono); font-size: 11px; color: var(--faint); white-space: nowrap; margin-left: 8px; }

/* ── Main split (timeline only) ──────────────────────────────────────────── */
.gy-main-split[b-dcryor3243] {
    display: block; border-bottom: 1px solid var(--line);
}

/* ── Wheel ───────────────────────────────────────────────────────────────── */
.gy-wheel-wrap[b-dcryor3243] {
    padding: 28px; background: transparent; position: relative;
}
.gy-root.gy-dark .gy-wheel-wrap[b-dcryor3243] { background: transparent; }
.gy-wheel-header[b-dcryor3243] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.gy-section-title[b-dcryor3243] { font-family: var(--font-serif); font-size: 22px; font-weight: 600; font-style: italic; color: var(--ink); }
.gy-tl-sub[b-dcryor3243] { font-size: 12px; color: var(--faint); font-weight: 400; margin-left: 10px; font-family: var(--font-mono); }
.gy-wheel-toggles[b-dcryor3243] { display: flex; gap: 6px; }
.gy-toggle[b-dcryor3243] {
    padding: 5px 12px; border-radius: 14px; font-size: 12px; font-weight: 500;
    border: 1.5px solid var(--line-2); background: rgba(255,255,255,.6);
    color: var(--muted); cursor: pointer; transition: all .2s;
}
.gy-root.gy-dark .gy-toggle[b-dcryor3243] { background: rgba(255,255,255,.05); }
.gy-toggle.on[b-dcryor3243] { background: #2C5739; color: #EFE7D3; border-color: #2C5739; box-shadow: 0 0 14px rgba(44,87,57,.3); }
.gy-root.gy-dark .gy-toggle.on[b-dcryor3243] { background: rgba(110,70,210,.5); color: #d0c0ff; border-color: rgba(150,110,255,.5); }

/* ── Wheel container + rainbow halo rings ─────────────────────────────────── */
.gy-wheel-container[b-dcryor3243] { position: relative; max-width: 520px; margin: 0 auto; }

/* Rainbow halo ring 1 — full-spectrum, spins 90s */
.gy-wheel-ring[b-dcryor3243] {
    position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 0;
    background: conic-gradient(from -90deg,
        #E8442A, #F0640f, #F08700, #F2A900, #cBd11f, #9FCE2C, #5cc63a,
        #1FB574, #00B3A4, #1f9fd0, #2E8FD6, #6a6bff, #9B4DFF,
        #d63ad0, #FF2E93, #f0245f, #E01E5A, #E8442A);
    -webkit-mask: radial-gradient(circle, transparent 0 53.5%, #000 54% 72%, transparent 72.6%);
    mask: radial-gradient(circle, transparent 0 53.5%, #000 54% 72%, transparent 72.6%);
    animation: gy-wheel-spin-b-dcryor3243 90s linear infinite;
    filter: saturate(1.15);
}
/* Rainbow halo ring 2 — thin outer accent */
.gy-wheel-ring-2[b-dcryor3243] {
    position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 0; opacity: .85;
    background: conic-gradient(from -90deg,
        #E8442A, #F08700, #F2A900, #9FCE2C, #1FB574,
        #00B3A4, #2E8FD6, #9B4DFF, #FF2E93, #E01E5A, #E8442A);
    -webkit-mask: radial-gradient(circle, transparent 0 73.5%, #000 74% 75.4%, transparent 76%);
    mask: radial-gradient(circle, transparent 0 73.5%, #000 74% 75.4%, transparent 76%);
}
@keyframes gy-wheel-spin-b-dcryor3243 {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.gy-wheel-svg[b-dcryor3243] {
    width: 100%; height: auto; cursor: crosshair; display: block;
    position: relative; z-index: 1;
    filter: drop-shadow(0 4px 20px rgba(0,0,0,.12));
}

/* Hub fills via CSS ID selectors (override SVG presentation attributes) */
#gy-hub-bg[b-dcryor3243]   { fill: #EFE7D3; transition: fill .35s; }
.gy-root.gy-dark #gy-hub-bg[b-dcryor3243] { fill: #0e0920; }
#gy-hub-ring[b-dcryor3243] { stroke: #2C5739; transition: stroke .35s, filter .35s; filter: drop-shadow(0 0 8px rgba(44,87,57,.4)); }
.gy-root.gy-dark #gy-hub-ring[b-dcryor3243] { stroke: #8060e0; filter: drop-shadow(0 0 8px rgba(128,96,224,.6)); }

/* Hub text */
.gy-hub-date[b-dcryor3243]      { font-family: var(--font-serif); font-size: 18px; font-weight: 700; fill: #2C5739; }
.gy-root.gy-dark .gy-hub-date[b-dcryor3243] { fill: #f0e8ff; }
.gy-hub-season-day[b-dcryor3243] { font-family: var(--font-mono); font-size: 9px; fill: rgba(44,87,57,.65); text-transform: uppercase; letter-spacing: 0.5px; }
.gy-root.gy-dark .gy-hub-season-day[b-dcryor3243] { fill: rgba(190,170,255,.6); }
.gy-hub-moon[b-dcryor3243]      { font-size: 17px; }
.gy-hub-moon-name[b-dcryor3243] { font-family: var(--font-mono); font-size: 8px; fill: rgba(44,87,57,.55); }
.gy-root.gy-dark .gy-hub-moon-name[b-dcryor3243] { fill: rgba(190,170,255,.55); }

/* Month/frost SVG labels */
.gy-month-lbl[b-dcryor3243] { font-family: var(--font-mono); font-size: 8.5px; fill: rgba(44,87,57,.65); font-weight: 700; letter-spacing: 0.3px; }
.gy-root.gy-dark .gy-month-lbl[b-dcryor3243] { fill: rgba(180,160,230,.75); }
.gy-frost-lbl[b-dcryor3243] { font-family: var(--font-mono); font-size: 7px; fill: #205090; }
.gy-root.gy-dark .gy-frost-lbl[b-dcryor3243] { fill: #70c0ff; }

/* Today hand */
.gy-today-hand[b-dcryor3243] { filter: drop-shadow(0 0 7px rgba(255,200,80,.95)) drop-shadow(0 0 14px rgba(255,150,40,.6)); }

/* Petals */
.gy-petal[b-dcryor3243] { filter: drop-shadow(0 0 3px rgba(0,0,0,.25)); transition: r .2s; }
.gy-root.gy-dark .gy-petal[b-dcryor3243] { filter: drop-shadow(0 0 4px rgba(255,255,255,.45)); }
.gy-petal:hover[b-dcryor3243] { r: 6; }

/* Ring hover bloom — JS controls opacity + filter; CSS only widens stroke on :hover */
.gy-ring[b-dcryor3243] { cursor: pointer; transition: opacity 0.22s; }
.gy-ring-arc[b-dcryor3243], .gy-ring-bg[b-dcryor3243] { transition: stroke-width .2s, filter .2s; }
.gy-ring:hover .gy-ring-arc[b-dcryor3243] { stroke-width: 12 !important; }
.gy-ring-selected .gy-ring-arc[b-dcryor3243] { stroke-width: 12 !important; opacity: 1 !important; }
.gy-ring-selected .gy-ring-bg[b-dcryor3243] { opacity: 0.42 !important; }

/* ── Wheel tooltip ──────────────────────────────────────────────────────────── */
.gy-wheel-tip[b-dcryor3243] {
    position: absolute; pointer-events: none; z-index: 10;
    opacity: 0; transform: translateY(4px);
    transition: opacity .14s, transform .14s;
    background: var(--card); border: 1px solid var(--line-2);
    border-radius: 12px; padding: 10px 13px; min-width: 166px;
    box-shadow: 0 18px 40px -22px rgba(60,50,20,.45), 0 6px 20px -8px rgba(0,0,0,.15);
    white-space: nowrap;
}
.gy-wheel-tip.show[b-dcryor3243] { opacity: 1; transform: translateY(0); }
.gy-wheel-tip-name[b-dcryor3243] {
    font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 8px;
    color: var(--ink);
}
.gy-wheel-tip-dot[b-dcryor3243]  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.gy-wheel-tip-row[b-dcryor3243]  { font-size: 11.5px; color: var(--muted); margin-top: 3px; font-family: var(--font-mono); }

/* Wheel legend */
.gy-legend[b-dcryor3243] { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.gy-legend-btn[b-dcryor3243] {
    --ch: #888;
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
    border-radius: 18px; font-size: 13px; font-weight: 500;
    border: 1.5px solid color-mix(in srgb,var(--ch) 30%,transparent);
    background: rgba(255,255,255,.55); color: var(--muted);
    cursor: pointer; transition: all .2s; font-family: var(--font);
}
.gy-root.gy-dark .gy-legend-btn[b-dcryor3243] { background: rgba(255,255,255,.05); }
.gy-legend-btn:hover[b-dcryor3243] { background: color-mix(in srgb,var(--ch) 14%,white); color: var(--ink); }
.gy-root.gy-dark .gy-legend-btn:hover[b-dcryor3243] { background: color-mix(in srgb,var(--ch) 20%,#0e0920); color: var(--ink); }
.gy-legend-btn.on[b-dcryor3243] { background: var(--ch); color: #fff; border-color: color-mix(in srgb,var(--ch) 55%,black); }
.gy-legend-dot[b-dcryor3243] { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; box-shadow: 0 0 5px currentColor; }
.gy-legend-count[b-dcryor3243] {
    font-size: 11px; font-family: var(--font-mono); font-weight: 700;
    opacity: .65; background: rgba(0,0,0,.08); border-radius: 8px; padding: 1px 6px;
}
.gy-legend-btn.on .gy-legend-count[b-dcryor3243] { background: rgba(255,255,255,.22); opacity: 1; }

/* ── Timeline ────────────────────────────────────────────────────────────── */
.gy-timeline-wrap[b-dcryor3243] { padding: 28px; overflow: hidden; background: var(--paper); }
.gy-gantt-outer[b-dcryor3243] {
    margin-top: 12px;
    border: 1px solid var(--line); border-radius: 18px;
    background: var(--card); overflow: hidden;
}

/* Scroll container — holds both sticky header and body */
.gy-gantt-scroll[b-dcryor3243] {
    max-height: 460px; overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin; scrollbar-color: rgba(44,87,57,.25) transparent;
}
.gy-root.gy-dark .gy-gantt-scroll[b-dcryor3243] { scrollbar-color: rgba(160,120,255,.3) transparent; }

/* Header — CSS grid, sticky at top of scroll container */
.gy-gantt-header[b-dcryor3243] {
    display: grid; grid-template-columns: 150px repeat(12, 1fr);
    position: sticky; top: 0; z-index: 3;
    background: var(--card); border-bottom: 1px solid var(--line);
}
.gy-root.gy-dark .gy-gantt-header[b-dcryor3243] { background: #0e0920; }
.gy-gantt-corner[b-dcryor3243] {
    font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
    letter-spacing: 0.3px; color: var(--faint); font-weight: 700;
    padding: 7px 8px 7px 14px; display: flex; align-items: center;
}
.gy-gantt-mlabel[b-dcryor3243] {
    font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
    font-weight: 700; letter-spacing: 0.3px; color: var(--faint);
    padding: 7px 0; text-align: center; white-space: nowrap;
}
.gy-gantt-mlabel.season[b-dcryor3243] { color: var(--hunter, #2C5739); }
.gy-root.gy-dark .gy-gantt-mlabel.season[b-dcryor3243] { color: #a0f0c0; }

/* Body */
.gy-gantt-body[b-dcryor3243] { position: relative; min-height: 60px; }
.gy-gantt-season-shade[b-dcryor3243] {
    position: absolute; top: 0; bottom: 0;
    background: linear-gradient(90deg,rgba(0,179,164,.06),rgba(0,179,164,.13),rgba(0,179,164,.06));
    border-left: 1px solid rgba(0,179,164,.3); border-right: 1px solid rgba(0,179,164,.3);
    pointer-events: none;
}
.gy-gantt-today-line[b-dcryor3243] {
    position: absolute; top: 0; bottom: 0; width: 2px;
    background: linear-gradient(180deg,#ffd060,#ff8820); opacity: .9;
    pointer-events: none; z-index: 2; box-shadow: 0 0 8px rgba(255,180,60,.6);
}
.gy-gantt-frost-line[b-dcryor3243] {
    position: absolute; top: 0; bottom: 0; width: 1px;
    background: #60a8ff; opacity: .5; border-left: 1px dashed #60a8ff;
    pointer-events: none; z-index: 2;
}

/* Rows */
.gy-gantt-row[b-dcryor3243] {
    --bc: #888;
    display: flex; align-items: center; min-height: 28px;
    border-bottom: 1px solid var(--line); cursor: pointer; transition: background .15s;
}
.gy-gantt-row:hover[b-dcryor3243] { background: color-mix(in srgb,var(--bc) 8%,var(--card)); }
.gy-gantt-pname[b-dcryor3243] {
    width: 150px; flex-shrink: 0; font-size: 11px; color: var(--muted);
    padding: 2px 8px 2px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: flex; align-items: center; gap: 7px;
}
.gy-ndot[b-dcryor3243] {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.gy-gantt-track[b-dcryor3243] { flex: 1; position: relative; height: 28px; }
.gy-gantt-bar[b-dcryor3243] {
    position: absolute; top: 50%; transform: translateY(-50%);
    height: 14px; border-radius: 8px; min-width: 3px;
    transition: filter .15s, box-shadow .15s;
}
.gy-gantt-row:hover .gy-gantt-bar[b-dcryor3243] { filter: brightness(1.08) saturate(1.2); box-shadow: 0 0 16px -1px var(--bc); }
.gy-gantt-harvest-dot[b-dcryor3243] {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--sun, #F2A900); border: 2px solid #fff; z-index: 1; margin-left: -6px;
    box-shadow: 0 0 10px -1px var(--sun, #F2A900);
}

/* Legend */
.gy-gantt-legend[b-dcryor3243] { display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 11px; color: var(--faint); }
.gy-gl-item[b-dcryor3243] { display: flex; align-items: center; gap: 5px; }
.gy-gl-dot[b-dcryor3243]   { width: 12px; height: 12px; border-radius: 50%; background: var(--sun,#F2A900); border: 2px solid rgba(255,255,255,.8); display: inline-block; box-shadow: 0 0 8px -1px var(--sun,#F2A900); }
.gy-gl-frost[b-dcryor3243] { width: 1px; height: 14px; background: #60a8ff; border-left: 2px dashed #60a8ff; display: inline-block; }
.gy-gl-today[b-dcryor3243] { width: 2px; height: 14px; background: linear-gradient(180deg,#ffd060,#ff8820); border-radius: 2px; display: inline-block; box-shadow: 0 0 6px rgba(255,180,60,.6); }
.gy-gl-frost[b-dcryor3243]{ width: 1px; height: 14px; background: #60a8ff; border-left: 2px dashed #60a8ff; display: inline-block; }

/* ── Beds / Cards ────────────────────────────────────────────────────────── */
.gy-beds[b-dcryor3243] { padding: 32px 24px; background: var(--paper); }

/* Section heading — band-head pattern */
.gy-band-head[b-dcryor3243] { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.gy-beds-eyebrow[b-dcryor3243] { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); margin: 0 0 7px; }
.gy-beds-h2[b-dcryor3243] { font-family: var(--font-serif); font-weight: 600; font-size: clamp(26px,3.4vw,38px); margin: 0; letter-spacing: -.01em; color: var(--ink); }
.gy-count-badge[b-dcryor3243] { font-size: 12px; font-weight: 500; color: var(--faint); font-family: var(--font-mono); margin-left: 10px; font-style: normal; }

.gy-cards-grid[b-dcryor3243] { display: grid; grid-template-columns: repeat(auto-fill,minmax(232px,1fr)); gap: 16px; }

.gy-card[b-dcryor3243] {
    --bc: #888;
    position: relative; border-radius: 18px; overflow: hidden; cursor: pointer;
    background: var(--card); border: 1px solid var(--line);
    box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s;
    display: flex; flex-direction: column; min-height: 182px;
}
.gy-card[b-dcryor3243]::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px;
    background: linear-gradient(90deg, var(--bc), color-mix(in srgb, var(--bc) 45%, #fff));
}
.gy-card-glow[b-dcryor3243] {
    position: absolute; width: 130px; height: 130px; border-radius: 50%;
    right: -34px; top: -30px; background: var(--bc); filter: blur(46px); opacity: .2; pointer-events: none;
}
.gy-card:hover[b-dcryor3243] { transform: translateY(-5px); box-shadow: 0 24px 44px -22px var(--bc); }
.gy-card-mine[b-dcryor3243] { box-shadow: 0 0 0 2px rgba(52,211,153,.5), 0 4px 16px rgba(0,0,0,.07); border-color: rgba(52,211,153,.3); }

/* Card top */
.gy-card-top[b-dcryor3243] { padding: 18px 16px 12px; position: relative; }
.gy-card-head[b-dcryor3243] { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 4px; }
.gy-card-emoji[b-dcryor3243] { font-size: 24px; line-height: 1; }
.gy-card-title[b-dcryor3243] { font-family: var(--font-serif); font-weight: 700; font-size: 19px; margin: 0; letter-spacing: -.01em; color: var(--ink); line-height: 1.2; }
.gy-card-cat[b-dcryor3243] {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 8px;
    font-size: 11px; color: var(--muted); font-family: var(--font-mono); letter-spacing: .03em;
}
.gy-cdot[b-dcryor3243] { width: 8px; height: 8px; border-radius: 50%; background: var(--bc); flex-shrink: 0; }
.gy-card-garden-btn[b-dcryor3243] {
    background: none; border: 1.5px solid var(--line-2); border-radius: 50%;
    width: 26px; height: 26px; font-size: 13px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: all .2s; color: var(--muted);
}
.gy-card-garden-btn.on[b-dcryor3243] { background: linear-gradient(135deg,#34d399,#059669); color:#fff; border-color:transparent; box-shadow:0 0 14px rgba(52,211,153,.5); }

/* Card body */
.gy-card-body[b-dcryor3243] { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.gy-card-dates[b-dcryor3243] { display: flex; flex-wrap: wrap; gap: 6px; }

/* Date pills */
.gy-date-chip[b-dcryor3243] {
    font-family: var(--font-mono); font-size: 10.5px; padding: 4px 8px; border-radius: 7px;
    background: var(--paper); border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.gy-root.gy-dark .gy-date-chip[b-dcryor3243] { background: rgba(255,255,255,.05); }
.gy-harvest-chip[b-dcryor3243] {
    border-color: rgba(242,169,0,.5) !important;
    color: #b67c00 !important;
    background: rgba(242,169,0,.1) !important;
}
.gy-root.gy-dark .gy-harvest-chip[b-dcryor3243] { color: #ffd060 !important; }

/* Card footer */
.gy-card-foot[b-dcryor3243] { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
.gy-card-more[b-dcryor3243] { font-size: 11px; color: var(--faint); font-family: var(--font-mono); }

/* Diff tags (used in cards and drawer) */
.gy-diff-tag[b-dcryor3243] { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.5px; border: 1px solid; }
.gy-diff-beginner[b-dcryor3243]     { background: rgba(52,211,153,.14); color: #059669; border-color: rgba(52,211,153,.28); }
.gy-diff-intermediate[b-dcryor3243] { background: rgba(196,136,0,.12); color: #8a6000; border-color: rgba(196,136,0,.28); }
.gy-diff-advanced[b-dcryor3243]     { background: rgba(200,50,50,.10); color: #a02020; border-color: rgba(200,50,50,.25); }
.gy-root.gy-dark .gy-diff-beginner[b-dcryor3243]     { color: #6ee7b7; }
.gy-root.gy-dark .gy-diff-intermediate[b-dcryor3243] { color: #fcd34d; }
.gy-root.gy-dark .gy-diff-advanced[b-dcryor3243]     { color: #fca5a5; }

/* Harvest badge */
.gy-harvest-badge[b-dcryor3243] {
    padding: 4px 10px; border-radius: 8px; font-size: 11px;
    font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.8px;
    font-family: var(--font-mono); display: inline-block;
    animation: gy-glow-pulse-b-dcryor3243 2s ease-in-out infinite;
}
@keyframes gy-glow-pulse-b-dcryor3243 {
    0%,100% { box-shadow: 0 0 8px currentColor; }
    50%      { box-shadow: 0 0 22px currentColor, 0 0 44px currentColor; }
}

/* ── Drawer ──────────────────────────────────────────────────────────────── */
.gy-drawer-backdrop[b-dcryor3243] {
    position: fixed; inset: 0; background: rgba(44,87,57,.18);
    backdrop-filter: blur(6px); z-index: 400;
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
}
.gy-drawer-backdrop.open[b-dcryor3243] { opacity: 1; pointer-events: auto; }
.gy-root.gy-dark .gy-drawer-backdrop[b-dcryor3243] { background: rgba(6,3,15,.65); }

.gy-drawer[b-dcryor3243] {
    position: fixed; top: var(--header-h,64px); right: 0; bottom: 0;
    width: min(480px,95vw); background: #FBF8F0;
    border-left: 1px solid var(--line-2); z-index: 401;
    box-shadow: -20px 0 60px rgba(0,0,0,.10), -4px 0 20px rgba(44,87,57,.08);
    display: flex; flex-direction: column; overflow: hidden;
    transform: translateX(100%);
    transition: transform .34s cubic-bezier(.22,.61,.36,1);
}
.gy-drawer.open[b-dcryor3243] { transform: translateX(0); }
.gy-root.gy-dark .gy-drawer[b-dcryor3243] { background: #0e0920; border-left-color: rgba(160,120,255,.2); box-shadow: -20px 0 60px rgba(0,0,0,.65); }

/* Header */
.gy-drawer-header[b-dcryor3243] {
    --dc: #2C5739;
    position: relative; padding: 24px 20px 20px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--dc), color-mix(in srgb, var(--dc) 60%, #000));
    color: #fff;
}
.gy-drawer-close[b-dcryor3243] {
    position: absolute; right: 18px; top: 18px;
    background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.3);
    border-radius: 50%; width: 34px; height: 34px; cursor: pointer; font-size: 14px;
    color: #fff; display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.gy-drawer-close:hover[b-dcryor3243] { background: rgba(255,255,255,.28); }
.gy-d-cat[b-dcryor3243] {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
    letter-spacing: .1em; color: rgba(255,255,255,.75); margin-bottom: 10px;
}
.gy-d-cdot[b-dcryor3243] { width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: .85; flex-shrink: 0; }
.gy-drawer-name[b-dcryor3243] {
    font-family: var(--font-serif); font-size: 36px; font-weight: 700;
    color: #fff; margin: 0 0 10px; line-height: 1.1; padding-right: 48px;
}
.gy-drawer-header .gy-diff-tag[b-dcryor3243] {
    border-color: rgba(255,255,255,.35); color: #fff; background: rgba(255,255,255,.15);
}

/* Body */
.gy-drawer-body[b-dcryor3243] {
    flex: 1; overflow-y: auto; padding: 22px 20px 36px;
    display: flex; flex-direction: column; gap: 22px;
    scrollbar-width: thin; scrollbar-color: rgba(44,87,57,.25) transparent;
    color: var(--ink);
}
.gy-root.gy-dark .gy-drawer-body[b-dcryor3243] { scrollbar-color: rgba(160,120,255,.3) transparent; }

/* Section heading with fill line */
.gy-drawer-sh[b-dcryor3243] {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-mono); font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.2px; color: var(--faint);
    margin: 0 0 12px;
}
.gy-drawer-sh[b-dcryor3243]::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* Mini season timeline */
.gy-timeline-mini[b-dcryor3243] { display: flex; flex-direction: column; gap: 8px; }
.gy-tmi-row[b-dcryor3243] { display: grid; grid-template-columns: 108px 1fr; align-items: center; }
.gy-tmi-label[b-dcryor3243] {
    display: flex; align-items: center; gap: 7px;
    font-family: var(--font-mono); font-size: 11px; color: var(--muted);
}
.gy-tmi-sq[b-dcryor3243] { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.gy-tmi-date[b-dcryor3243] { font-family: var(--font-serif); font-size: 17px; font-weight: 700; color: var(--ink); }
.gy-tmi-dash[b-dcryor3243] { font-size: 15px; color: var(--faint); }

/* Notes */
.gy-drawer-notes[b-dcryor3243] {
    font-size: 14px; line-height: 1.7; color: var(--muted);
    background: var(--paper); padding: 14px 16px; margin: 0;
    border-left: 4px solid var(--dc, #2C5739);
    border-radius: 0 10px 10px 0;
}
.gy-root.gy-dark .gy-drawer-notes[b-dcryor3243] { background: rgba(255,255,255,.04); }

/* ── Sky preview control ─────────────────────────────────────────────────── */
.gy-sky-toggle[b-dcryor3243] {
    position: fixed; right: 16px; bottom: 16px; z-index: 80;
    display: flex; align-items: center; gap: 4px;
    background: rgba(20,18,30,.6); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
    padding: 4px; box-shadow: 0 10px 30px -12px rgba(0,0,0,.6);
}
.gy-sky-toggle b[b-dcryor3243] {
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
    text-transform: uppercase; color: rgba(255,255,255,.55); padding: 0 8px 0 9px;
}
.gy-sky-btn[b-dcryor3243] {
    border: 0; background: transparent; color: rgba(255,255,255,.78);
    font-family: var(--font); font-size: 11.5px; font-weight: 600;
    padding: 6px 11px; border-radius: 999px; cursor: pointer; transition: .16s;
}
.gy-sky-btn:hover[b-dcryor3243] { background: rgba(255,255,255,.1); color: #fff; }
.gy-sky-btn.active[b-dcryor3243], .gy-sky-btn.on[b-dcryor3243] {
    background: linear-gradient(92deg,#E8442A,#F2A900,#1FB574,#2E8FD6,#9B4DFF);
    color: #fff;
}
@media (max-width: 600px) { .gy-sky-toggle b[b-dcryor3243] { display: none; } }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .gy-stat[b-dcryor3243] { padding: 10px 14px; }
    .gy-stat-val[b-dcryor3243] { font-size: 18px; }
    .gy-rightnow[b-dcryor3243], .gy-filter-bar[b-dcryor3243], .gy-beds[b-dcryor3243] { padding: 16px; }
    .gy-timeline-wrap[b-dcryor3243] { padding: 16px; }
    .gy-gantt-pname[b-dcryor3243] { width: 90px; font-size: 10px; }
    .gy-cards-grid[b-dcryor3243] { grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 10px; }
    .gy-sky-toggle[b-dcryor3243] { bottom: 10px; right: 10px; }
}

/* ── prefers-reduced-motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .gy-card:hover[b-dcryor3243], .gy-stat:hover[b-dcryor3243], .now-card:hover[b-dcryor3243] { transform: none; }
    .gy-drawer[b-dcryor3243], .gy-drawer-backdrop[b-dcryor3243] { animation: none; }
    .gy-loading-icon[b-dcryor3243] { animation: none; }
    .gy-year-rainbow[b-dcryor3243] { animation: none; }
    .gy-rainbow-rule[b-dcryor3243] { animation: none; }
    .gy-wheel-ring[b-dcryor3243]   { animation: none; }
    .gy-harvest-badge[b-dcryor3243] { animation: none; box-shadow: none; }
    .gy-sky > div[b-dcryor3243], .gy-stars[b-dcryor3243] { transition: none !important; }
}
/* _content/RecipeHub.Server/Pages/Pantry.razor.rz.scp.css */
.pantry-root[b-bvty1efdzt] { max-width: 1100px; margin: 0 auto; padding: 24px 20px 80px; }

/* ── Hero ── */
.pantry-hero[b-bvty1efdzt] { text-align: center; padding: 36px 0 28px; }
.pantry-eyebrow[b-bvty1efdzt] { font-family: var(--font-mono); font-size: 11px; font-weight: 600;
                  letter-spacing: 1.5px; text-transform: uppercase; color: var(--text3); }
.pantry-title[b-bvty1efdzt] { font-family: var(--font-serif); font-size: clamp(32px, 5vw, 48px);
                font-style: italic; font-weight: 600; color: var(--green-deep);
                margin: 8px 0 6px; line-height: 1.1; }
.pantry-sub[b-bvty1efdzt] { font-size: 15px; color: var(--text2); margin: 0; }

/* ── Stats ── */
.pantry-stats[b-bvty1efdzt] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
                max-width: 720px; margin: 0 auto 28px; }
.stat-card[b-bvty1efdzt] { background: var(--surface); border: 1px solid var(--border);
             border-radius: var(--radius-xl); padding: 16px 12px; text-align: center;
             box-shadow: 0 1px 3px rgba(0,0,0,.04); transition: transform .12s, box-shadow .12s; }
.stat-card.warn[b-bvty1efdzt]    { background: var(--gold-dim); border-color: rgba(184,146,42,.4); }
.stat-card.danger[b-bvty1efdzt]  { background: #fce8e6; border-color: #d9534f; }
.stat-card.cta[b-bvty1efdzt]     { background: var(--green-deep); border-color: var(--green-deep);
                     cursor: pointer; }
.stat-card.cta:hover[b-bvty1efdzt] { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.stat-card.cta .stat-num[b-bvty1efdzt] { color: var(--gold-pale); }
.stat-card.cta .stat-label[b-bvty1efdzt] { color: var(--gold-pale); opacity: .85; }
.stat-num[b-bvty1efdzt] { font-family: var(--font-serif); font-size: 28px; font-weight: 700;
            color: var(--green-deep); line-height: 1; margin-bottom: 4px; }
.stat-card.danger .stat-num[b-bvty1efdzt] { color: #d9534f; }
.stat-label[b-bvty1efdzt] { font-family: var(--font-mono); font-size: 10px; font-weight: 600;
              text-transform: uppercase; letter-spacing: .8px; color: var(--text3); }

/* ── Add card ── */
.add-card[b-bvty1efdzt] { background: var(--surface); border: 1px solid var(--border);
            border-radius: var(--radius-xl); padding: 18px; margin-bottom: 24px;
            box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.add-row[b-bvty1efdzt] { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.add-row + .add-row[b-bvty1efdzt] { margin-top: 10px; }
.add-row-optional[b-bvty1efdzt] { font-size: 13px; }
.add-input[b-bvty1efdzt] { flex: 1; min-width: 200px; background: var(--linen); border: 1px solid var(--border2);
             border-radius: var(--radius-lg); padding: 10px 14px; font-size: 14px;
             font-family: var(--font); color: var(--text); outline: none; }
.add-input:focus[b-bvty1efdzt] { border-color: var(--green-soft); }
.add-qty[b-bvty1efdzt] { max-width: 320px; }
.add-location[b-bvty1efdzt] { width: 150px; }
.add-date[b-bvty1efdzt] { width: 160px; }
.staple-toggle[b-bvty1efdzt] { display: flex; align-items: center; gap: 6px; font-size: 13px;
                 color: var(--text2); cursor: pointer; }

.add-photo-row[b-bvty1efdzt] { display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
                 padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.btn-photo[b-bvty1efdzt] { background: var(--green-deep); color: var(--gold-pale); border: none;
             padding: 10px 18px; border-radius: var(--radius-lg); font-size: 14px;
             font-weight: 600; cursor: pointer; transition: all .12s; }
.btn-photo:hover[b-bvty1efdzt] { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.add-photo-divider[b-bvty1efdzt] { font-family: var(--font-mono); font-size: 11px; font-weight: 600;
                     text-transform: uppercase; letter-spacing: .8px; color: var(--text3); }

/* ── Filter chips ── */
.pantry-filters[b-bvty1efdzt] { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.chip[b-bvty1efdzt] { background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
        padding: 6px 14px; font-size: 13px; cursor: pointer; transition: all .12s;
        display: inline-flex; align-items: center; gap: 6px; }
.chip:hover[b-bvty1efdzt] { border-color: var(--green-soft); }
.chip.active[b-bvty1efdzt] { background: var(--green-deep); color: var(--gold-pale); border-color: var(--green-deep); }
.chip-count[b-bvty1efdzt] { font-family: var(--font-mono); font-size: 11px; opacity: .7; }

/* ── Location sections ── */
.loc-section[b-bvty1efdzt] { margin-bottom: 32px; }
.loc-header[b-bvty1efdzt] { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px;
              padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.loc-icon[b-bvty1efdzt] { font-size: 18px; }
.loc-name[b-bvty1efdzt] { font-family: var(--font-serif); font-style: italic; font-size: 20px;
            font-weight: 600; color: var(--green-deep); }
.loc-count[b-bvty1efdzt] { font-family: var(--font-mono); font-size: 11px; font-weight: 600;
             letter-spacing: .5px; text-transform: uppercase; color: var(--text3); margin-left: auto; }

/* ── Item cards ── */
.items-grid[b-bvty1efdzt] { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.item-card[b-bvty1efdzt] { display: flex; justify-content: space-between; align-items: flex-start;
             background: var(--surface); border: 1px solid var(--border);
             border-radius: var(--radius-lg); padding: 12px 14px; gap: 8px;
             transition: all .12s; }
.item-card:hover[b-bvty1efdzt] { border-color: var(--green-soft); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.item-card.exp-expired[b-bvty1efdzt] { background: #fdf0ef; border-color: #f5b5b0; }
.item-card.exp-today[b-bvty1efdzt],
.item-card.exp-urgent[b-bvty1efdzt]  { background: var(--gold-dim); border-color: rgba(184,146,42,.35); }
.item-card.exp-soon[b-bvty1efdzt]    { background: #fdfaef; border-color: rgba(184,146,42,.2); }

.item-main[b-bvty1efdzt] { flex: 1; min-width: 0; }
.item-name[b-bvty1efdzt] { font-weight: 600; color: var(--text); font-size: 14px;
             text-transform: capitalize; line-height: 1.3; }
.staple-star[b-bvty1efdzt] { margin-right: 4px; }
.item-qty[b-bvty1efdzt] { font-size: 12px; color: var(--text3); margin-top: 2px;
            font-family: var(--font-mono); }
.item-exp[b-bvty1efdzt] { font-size: 11px; font-family: var(--font-mono); font-weight: 600;
            text-transform: uppercase; letter-spacing: .4px; margin-top: 6px;
            display: inline-block; padding: 2px 8px; border-radius: 6px; }
.exp-tag-fresh[b-bvty1efdzt]   { background: var(--green-mist2); color: var(--green-deep); }
.exp-tag-soon[b-bvty1efdzt]    { background: var(--gold-dim); color: var(--gold); }
.exp-tag-urgent[b-bvty1efdzt],
.exp-tag-today[b-bvty1efdzt]   { background: var(--gold); color: white; }
.exp-tag-expired[b-bvty1efdzt] { background: #d9534f; color: white; }

.item-del[b-bvty1efdzt] { background: none; border: none; color: var(--text3); font-size: 14px;
            cursor: pointer; padding: 4px 6px; line-height: 1; opacity: .6;
            transition: opacity .12s, color .12s; }
.item-del:hover[b-bvty1efdzt] { opacity: 1; color: #d9534f; }

/* ── Loading / empty ── */
.pantry-loading[b-bvty1efdzt] { text-align: center; padding: 60px 20px; color: var(--text3); font-style: italic; }
.pantry-empty[b-bvty1efdzt] { text-align: center; padding: 60px 20px; background: var(--surface);
                border: 1px dashed var(--border2); border-radius: var(--radius-xl);
                max-width: 540px; margin: 20px auto; }
.empty-emoji[b-bvty1efdzt] { font-size: 48px; margin-bottom: 12px; }
.pantry-empty h2[b-bvty1efdzt] { font-family: var(--font-serif); font-style: italic; font-size: 22px;
                   color: var(--green-deep); margin: 0 0 12px; }
.pantry-empty p[b-bvty1efdzt] { color: var(--text2); margin: 0; line-height: 1.5; }

@media (max-width: 700px) {
    .pantry-stats[b-bvty1efdzt] { grid-template-columns: repeat(2, 1fr); }
    .add-row[b-bvty1efdzt] { flex-direction: column; align-items: stretch; }
    .add-input[b-bvty1efdzt], .add-location[b-bvty1efdzt], .add-date[b-bvty1efdzt] { width: 100%; max-width: none; }
}
<style>

.pantry-root[b-bvty1efdzt] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 20px 80px;
}

/* ── Hero ── */
.pantry-hero[b-bvty1efdzt] {
    text-align: center;
    padding: 36px 0 28px;
}

.pantry-eyebrow[b-bvty1efdzt] {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text3);
}

.pantry-title[b-bvty1efdzt] {
    font-family: var(--font-serif);
    font-size: clamp(32px, 5vw, 48px);
    font-style: italic;
    font-weight: 600;
    color: var(--green-deep);
    margin: 8px 0 6px;
    line-height: 1.1;
}

.pantry-sub[b-bvty1efdzt] {
    font-size: 15px;
    color: var(--text2);
    margin: 0;
}

/* ── Stats ── */
.pantry-stats[b-bvty1efdzt] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-width: 720px;
    margin: 0 auto 28px;
}

.stat-card[b-bvty1efdzt] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 16px 12px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    transition: transform .12s, box-shadow .12s;
}

    .stat-card.warn[b-bvty1efdzt] {
        background: var(--gold-dim);
        border-color: rgba(184,146,42,.4);
    }

    .stat-card.danger[b-bvty1efdzt] {
        background: #fce8e6;
        border-color: #d9534f;
    }

    .stat-card.cta[b-bvty1efdzt] {
        background: var(--green-deep);
        border-color: var(--green-deep);
        cursor: pointer;
    }

        .stat-card.cta:hover[b-bvty1efdzt] {
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(0,0,0,.15);
        }

        .stat-card.cta .stat-num[b-bvty1efdzt] {
            color: var(--gold-pale);
        }

        .stat-card.cta .stat-label[b-bvty1efdzt] {
            color: var(--gold-pale);
            opacity: .85;
        }

.stat-num[b-bvty1efdzt] {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 700;
    color: var(--green-deep);
    line-height: 1;
    margin-bottom: 4px;
}

.stat-card.danger .stat-num[b-bvty1efdzt] {
    color: #d9534f;
}

.stat-label[b-bvty1efdzt] {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text3);
}

/* ── Add card ── */
.add-card[b-bvty1efdzt] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 18px;
    margin-bottom: 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

.add-row[b-bvty1efdzt] {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

    .add-row + .add-row[b-bvty1efdzt] {
        margin-top: 10px;
    }

.add-row-optional[b-bvty1efdzt] {
    font-size: 13px;
}

.add-input[b-bvty1efdzt] {
    flex: 1;
    min-width: 200px;
    background: var(--linen);
    border: 1px solid var(--border2);
    border-radius: var(--radius-lg);
    padding: 10px 14px;
    font-size: 14px;
    font-family: var(--font);
    color: var(--text);
    outline: none;
}

    .add-input:focus[b-bvty1efdzt] {
        border-color: var(--green-soft);
    }

.add-qty[b-bvty1efdzt] {
    max-width: 320px;
}

.add-location[b-bvty1efdzt] {
    width: 150px;
}

.add-date[b-bvty1efdzt] {
    width: 160px;
}

.staple-toggle[b-bvty1efdzt] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text2);
    cursor: pointer;
}

.add-photo-row[b-bvty1efdzt] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.btn-photo[b-bvty1efdzt] {
    background: var(--green-deep);
    color: var(--gold-pale);
    border: none;
    padding: 10px 18px;
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s;
}

    .btn-photo:hover[b-bvty1efdzt] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,.15);
    }

.add-photo-divider[b-bvty1efdzt] {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text3);
}

/* ── Filter chips ── */
.pantry-filters[b-bvty1efdzt] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.chip[b-bvty1efdzt] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: all .12s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .chip:hover[b-bvty1efdzt] {
        border-color: var(--green-soft);
    }

    .chip.active[b-bvty1efdzt] {
        background: var(--green-deep);
        color: var(--gold-pale);
        border-color: var(--green-deep);
    }

.chip-count[b-bvty1efdzt] {
    font-family: var(--font-mono);
    font-size: 11px;
    opacity: .7;
}

/* ── Location sections ── */
.loc-section[b-bvty1efdzt] {
    margin-bottom: 32px;
}

.loc-header[b-bvty1efdzt] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.loc-icon[b-bvty1efdzt] {
    font-size: 18px;
}

.loc-name[b-bvty1efdzt] {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 20px;
    font-weight: 600;
    color: var(--green-deep);
}

.loc-count[b-bvty1efdzt] {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text3);
    margin-left: auto;
}

/* ── Item cards ── */
.items-grid[b-bvty1efdzt] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.item-card[b-bvty1efdzt] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    gap: 8px;
    transition: all .12s;
}

    .item-card:hover[b-bvty1efdzt] {
        border-color: var(--green-soft);
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
    }

    .item-card.exp-expired[b-bvty1efdzt] {
        background: #fdf0ef;
        border-color: #f5b5b0;
    }

    .item-card.exp-today[b-bvty1efdzt],
    .item-card.exp-urgent[b-bvty1efdzt] {
        background: var(--gold-dim);
        border-color: rgba(184,146,42,.35);
    }

    .item-card.exp-soon[b-bvty1efdzt] {
        background: #fdfaef;
        border-color: rgba(184,146,42,.2);
    }

.item-main[b-bvty1efdzt] {
    flex: 1;
    min-width: 0;
}

.item-name[b-bvty1efdzt] {
    font-weight: 600;
    color: var(--text);
    font-size: 14px;
    text-transform: capitalize;
    line-height: 1.3;
}

.staple-star[b-bvty1efdzt] {
    margin-right: 4px;
}

.item-qty[b-bvty1efdzt] {
    font-size: 12px;
    color: var(--text3);
    margin-top: 2px;
    font-family: var(--font-mono);
}

.item-exp[b-bvty1efdzt] {
    font-size: 11px;
    font-family: var(--font-mono);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-top: 6px;
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
}

.exp-tag-fresh[b-bvty1efdzt] {
    background: var(--green-mist2);
    color: var(--green-deep);
}

.exp-tag-soon[b-bvty1efdzt] {
    background: var(--gold-dim);
    color: var(--gold);
}

.exp-tag-urgent[b-bvty1efdzt],
.exp-tag-today[b-bvty1efdzt] {
    background: var(--gold);
    color: white;
}

.exp-tag-expired[b-bvty1efdzt] {
    background: #d9534f;
    color: white;
}

.item-del[b-bvty1efdzt] {
    background: none;
    border: none;
    color: var(--text3);
    font-size: 14px;
    cursor: pointer;
    padding: 4px 6px;
    line-height: 1;
    opacity: .6;
    transition: opacity .12s, color .12s;
}

    .item-del:hover[b-bvty1efdzt] {
        opacity: 1;
        color: #d9534f;
    }

/* ── Loading / empty ── */
.pantry-loading[b-bvty1efdzt] {
    text-align: center;
    padding: 60px 20px;
    color: var(--text3);
    font-style: italic;
}

.pantry-empty[b-bvty1efdzt] {
    text-align: center;
    padding: 60px 20px;
    background: var(--surface);
    border: 1px dashed var(--border2);
    border-radius: var(--radius-xl);
    max-width: 540px;
    margin: 20px auto;
}

.empty-emoji[b-bvty1efdzt] {
    font-size: 48px;
    margin-bottom: 12px;
}

.pantry-empty h2[b-bvty1efdzt] {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 22px;
    color: var(--green-deep);
    margin: 0 0 12px;
}

.pantry-empty p[b-bvty1efdzt] {
    color: var(--text2);
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 700px) {
    .pantry-stats[b-bvty1efdzt] {
        grid-template-columns: repeat(2, 1fr);
    }

    .add-row[b-bvty1efdzt] {
        flex-direction: column;
        align-items: stretch;
    }

    .add-input[b-bvty1efdzt], .add-location[b-bvty1efdzt], .add-date[b-bvty1efdzt] {
        width: 100%;
        max-width: none;
    }
}

                                                                             </style[b-bvty1efdzt]>
/* _content/RecipeHub.Server/Shared/HomeHero.razor.rz.scp.css */
/* HomeHero.razor.css — scoped. Robust full-width Nebraska time-of-day banner. */

.hhero[b-yf6eoqpayq] {
    position: relative;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;          /* greeting sits at the bottom, always in view */
    border-radius: var(--radius-lg, 14px);
    overflow: hidden;
    isolation: isolate;
    margin: 0 0 24px;
    box-shadow: 0 18px 44px -26px rgba(28, 51, 41, 0.6);
}

/* ── phase skies ─────────────────────────────────────────────────────────── */
.hhero.day[b-yf6eoqpayq]   { background: linear-gradient(180deg,#8FBEE6 0%,#B6D6EC 52%,#D8E9EE 100%); }
.hhero.dawn[b-yf6eoqpayq]  { background: linear-gradient(180deg,#2E3566 0%,#6E5A8E 42%,#E59A6B 80%,#F4C58A 100%); }
.hhero.dusk[b-yf6eoqpayq]  { background: linear-gradient(180deg,#241E48 0%,#7E3F6B 40%,#DF6E3C 74%,#F2A65A 100%); }
.hhero.night[b-yf6eoqpayq] { background: linear-gradient(180deg,#0A0F24 0%,#131A38 52%,#222E54 100%); }

/* ── layers ──────────────────────────────────────────────────────────────── */
.hhero-sky[b-yf6eoqpayq],
.hhero-ground[b-yf6eoqpayq] { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* ── sun / moon (percent-placed; rides behind the hills at the horizon) ───── */
.hhero-orb[b-yf6eoqpayq] {
    position: absolute; z-index: 0; width: 60px; height: 60px;
    border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none;
}
.hhero.day   .hhero-orb[b-yf6eoqpayq] { background: radial-gradient(circle,#FCE08A 0 40%,#FFEFAE 60%,rgba(255,241,184,0) 74%); box-shadow: 0 0 64px 22px rgba(255,238,160,.5); }
.hhero.dawn  .hhero-orb[b-yf6eoqpayq] { background: radial-gradient(circle,#FFCB85 0 42%,#FFD9A6 62%,rgba(255,217,166,0) 76%); box-shadow: 0 0 60px 20px rgba(255,200,140,.45); }
.hhero.dusk  .hhero-orb[b-yf6eoqpayq] { background: radial-gradient(circle,#FFB770 0 42%,#FF9E5E 62%,rgba(255,158,94,0) 76%); box-shadow: 0 0 60px 20px rgba(255,150,90,.45); }
.hhero.night .hhero-orb[b-yf6eoqpayq] { width: 44px; height: 44px; background: radial-gradient(circle,#EEF1FA 0 52%,#C9D2E8 72%,rgba(174,185,216,0) 84%); box-shadow: 0 0 40px 8px rgba(200,212,240,.3); }

/* ── prairie ridges ──────────────────────────────────────────────────────── */
.hhero-r-back[b-yf6eoqpayq]  { fill: rgba(255,255,255,.10); }
.hhero-r-mid[b-yf6eoqpayq]   { fill: rgba(0,0,0,.16); }
.hhero-r-front[b-yf6eoqpayq] { fill: rgba(0,0,0,.30); }
.hhero.dusk  .hhero-r-mid[b-yf6eoqpayq]   { fill: rgba(40,20,50,.34); }
.hhero.dusk  .hhero-r-front[b-yf6eoqpayq] { fill: rgba(20,10,30,.6); }
.hhero.night .hhero-r-back[b-yf6eoqpayq]  { fill: rgba(180,196,232,.10); }
.hhero.night .hhero-r-mid[b-yf6eoqpayq]   { fill: rgba(70,86,130,.45); }
.hhero.night .hhero-r-front[b-yf6eoqpayq] { fill: rgba(12,18,40,.9); }

/* ── farm structures (silhouettes keyed to the front-ridge tone) ──────────── */
.hhero-build rect[b-yf6eoqpayq],
.hhero-tree ellipse[b-yf6eoqpayq] { fill: rgba(0,0,0,.34); }
.hhero-tree line[b-yf6eoqpayq],
.hhero-mill-tower[b-yf6eoqpayq],
.hhero-mill-tail[b-yf6eoqpayq] { fill: rgba(0,0,0,.34); stroke: rgba(0,0,0,.34); }
.hhero-tree line[b-yf6eoqpayq] { stroke-width: 3; stroke-linecap: round; }
.hhero-mill-brace[b-yf6eoqpayq],
.hhero-mill-fan line[b-yf6eoqpayq] { stroke: rgba(0,0,0,.34); stroke-width: 1.2; stroke-linecap: round; }
.hhero-mill-wheel[b-yf6eoqpayq] { fill: none; stroke: rgba(0,0,0,.34); stroke-width: 1.2; }
.hhero-mill-hub[b-yf6eoqpayq]   { fill: rgba(0,0,0,.34); }

.hhero.dusk  .hhero-build rect[b-yf6eoqpayq], .hhero.dusk  .hhero-tree ellipse[b-yf6eoqpayq],
.hhero.dusk  .hhero-tree line[b-yf6eoqpayq],  .hhero.dusk  .hhero-mill-tower[b-yf6eoqpayq],
.hhero.dusk  .hhero-mill-tail[b-yf6eoqpayq],  .hhero.dusk  .hhero-mill-brace[b-yf6eoqpayq],
.hhero.dusk  .hhero-mill-fan line[b-yf6eoqpayq], .hhero.dusk .hhero-mill-wheel[b-yf6eoqpayq],
.hhero.dusk  .hhero-mill-hub[b-yf6eoqpayq] { fill: rgba(18,10,28,.7); stroke: rgba(18,10,28,.7); }
.hhero.dusk  .hhero-mill-wheel[b-yf6eoqpayq], .hhero.dusk .hhero-mill-fan line[b-yf6eoqpayq], .hhero.dusk .hhero-mill-brace[b-yf6eoqpayq] { fill: none; }

.hhero.night .hhero-build rect[b-yf6eoqpayq], .hhero.night .hhero-tree ellipse[b-yf6eoqpayq],
.hhero.night .hhero-tree line[b-yf6eoqpayq],  .hhero.night .hhero-mill-tower[b-yf6eoqpayq],
.hhero.night .hhero-mill-tail[b-yf6eoqpayq],  .hhero.night .hhero-mill-brace[b-yf6eoqpayq],
.hhero.night .hhero-mill-fan line[b-yf6eoqpayq], .hhero.night .hhero-mill-wheel[b-yf6eoqpayq],
.hhero.night .hhero-mill-hub[b-yf6eoqpayq] { fill: rgba(8,12,30,.94); stroke: rgba(8,12,30,.94); }
.hhero.night .hhero-mill-wheel[b-yf6eoqpayq], .hhero.night .hhero-mill-fan line[b-yf6eoqpayq], .hhero.night .hhero-mill-brace[b-yf6eoqpayq] { fill: none; }

/* ── corn rows ───────────────────────────────────────────────────────────── */
.hhero-corn path[b-yf6eoqpayq] { stroke: rgba(232,224,200,.42); stroke-width: 1.3; stroke-linecap: round; fill: none; }
.hhero.night .hhero-corn path[b-yf6eoqpayq] { stroke: rgba(150,166,210,.42); }

/* ── cranes ──────────────────────────────────────────────────────────────── */
.hhero-birds[b-yf6eoqpayq] { fill: none; stroke: rgba(0,0,0,.38); stroke-width: 1.6; stroke-linecap: round;
    animation: hhero-drift-b-yf6eoqpayq 26s linear infinite; }
.hhero.night .hhero-birds[b-yf6eoqpayq] { stroke: rgba(190,202,232,.5); }
@keyframes hhero-drift-b-yf6eoqpayq { from { transform: translateX(0); } to { transform: translateX(60px); } }

/* ── clouds (hidden at night) ────────────────────────────────────────────── */
.hhero-clouds ellipse[b-yf6eoqpayq] { fill: rgba(255,255,255,.55); }
.hhero.dawn  .hhero-clouds ellipse[b-yf6eoqpayq] { fill: rgba(255,240,225,.4); }
.hhero.dusk  .hhero-clouds ellipse[b-yf6eoqpayq] { fill: rgba(255,225,205,.3); }
.hhero.night .hhero-clouds[b-yf6eoqpayq] { opacity: 0; }
.hhero-cloud[b-yf6eoqpayq] { animation: hhero-cloud-drift-b-yf6eoqpayq 40s linear infinite; }
@keyframes hhero-cloud-drift-b-yf6eoqpayq { from { transform: translateX(-40px); } to { transform: translateX(70px); } }

/* ── stars ───────────────────────────────────────────────────────────────── */
.hhero-stars[b-yf6eoqpayq] { opacity: 0; transition: opacity .6s ease; }
.hhero.night .hhero-stars[b-yf6eoqpayq] { opacity: 1; }
.hhero.dusk  .hhero-stars[b-yf6eoqpayq] { opacity: .5; }
.hhero-star[b-yf6eoqpayq] { fill:#fff; animation: hhero-twinkle-b-yf6eoqpayq 3.4s ease-in-out infinite; }
@keyframes hhero-twinkle-b-yf6eoqpayq { 0%,100%{opacity:.25} 50%{opacity:1} }

/* ── readability scrim + greeting ────────────────────────────────────────── */
.hhero[b-yf6eoqpayq]::after {
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background: linear-gradient(180deg, transparent 42%, rgba(0,0,0,.55) 100%);
}
.hhero-caption[b-yf6eoqpayq] { position: relative; z-index: 2; padding: 0 28px 22px; color:#fff; }
.hhero-eyebrow[b-yf6eoqpayq] {
    text-transform: uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:700;
    font-family: var(--font-mono, monospace);
    color: rgba(255,255,255,.82); text-shadow: 0 1px 8px rgba(0,0,0,.55);
}
.hhero-greeting[b-yf6eoqpayq] {
    font-family: var(--font-serif, Georgia, serif); font-weight:600; font-style:italic; line-height:1.02;
    font-size: clamp(2.1rem, 5vw, 3.2rem); margin:.1rem 0 .4rem;
    text-shadow: 0 2px 20px rgba(0,0,0,.55);
}
.hhero-name[b-yf6eoqpayq] { color: var(--gold, #C2A24A); }
.hhero-sub[b-yf6eoqpayq] {
    font-family: var(--font-mono, monospace); font-size:.92rem; letter-spacing:.02em;
    color: rgba(255,255,255,.92); text-shadow: 0 1px 8px rgba(0,0,0,.55);
}
.hhero-sep[b-yf6eoqpayq] { opacity:.5; margin: 0 .35rem; }

@media (max-width: 640px) {
    .hhero[b-yf6eoqpayq] { min-height: 220px; }
    .hhero-caption[b-yf6eoqpayq] { padding: 0 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .hhero-star[b-yf6eoqpayq], .hhero-birds[b-yf6eoqpayq], .hhero-cloud[b-yf6eoqpayq] { animation: none; }
    .hhero-star[b-yf6eoqpayq] { opacity: .6; }
}
/* _content/RecipeHub.Server/Shared/LocalInfoHub.razor.rz.scp.css */
.lih-wrap[b-7gpxgf2tqq] {
    border: 1px solid var(--border2);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: 32px;
}

.lih-tabs[b-7gpxgf2tqq] {
    display: flex;
    background: var(--parchment);
    border-bottom: 1px solid var(--border2);
    overflow-x: auto;
    scrollbar-width: none;
}
.lih-tabs[b-7gpxgf2tqq]::-webkit-scrollbar { display: none; }

.lih-tab[b-7gpxgf2tqq] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text3);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
    font-family: var(--font-sans);
}
.lih-tab:hover[b-7gpxgf2tqq] {
    color: var(--green-deep);
}
.lih-tab--active[b-7gpxgf2tqq] {
    color: var(--green-deep);
    border-bottom-color: #a67c00;
    background: rgba(255, 253, 248, 0.6);
}
.lih-tab .ti[b-7gpxgf2tqq] {
    font-size: 15px;
    opacity: 0.7;
}

.lih-panel[b-7gpxgf2tqq] {
    background: var(--linen);
    padding: 0;
}

.news-layout[b-7gpxgf2tqq] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
    padding: 24px;
}
.news-aside[b-7gpxgf2tqq] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@@media (max-width: 900px) {
    .news-layout[b-7gpxgf2tqq] { grid-template-columns: 1fr; }
}
/* _content/RecipeHub.Server/Shared/RecipesHero.razor.rz.scp.css */
/* RecipesHero.razor.css — scoped. Time-of-day sky over a Nebraska prairie.
   Uses --rx-accent (the active collection color) for the eyebrow tint. */

.rxhero[b-lhg2rz6ug7] {
    position: relative;
    border-radius: var(--radius-lg, 14px);
    overflow: hidden;
    isolation: isolate;
    margin: 0 0 18px;
    box-shadow: 0 18px 40px -26px rgba(28, 51, 41, 0.55);
}

/* phase skies */
.rxhero.day[b-lhg2rz6ug7]   { background: linear-gradient(180deg,#8FBEE6 0%,#B6D6EC 52%,#D8E9EE 100%); }
.rxhero.dawn[b-lhg2rz6ug7]  { background: linear-gradient(180deg,#2E3566 0%,#6E5A8E 42%,#E59A6B 80%,#F4C58A 100%); }
.rxhero.dusk[b-lhg2rz6ug7]  { background: linear-gradient(180deg,#241E48 0%,#7E3F6B 40%,#DF6E3C 74%,#F2A65A 100%); }
.rxhero.night[b-lhg2rz6ug7] { background: linear-gradient(180deg,#0A0F24 0%,#131A38 52%,#222E54 100%); }

.rxhero-scene[b-lhg2rz6ug7] { position: relative; height: 196px; }
.rxhero-svg[b-lhg2rz6ug7]   { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* prairie ridges */
.rxhero-r-back[b-lhg2rz6ug7]  { fill: rgba(255,255,255,.10); }
.rxhero-r-mid[b-lhg2rz6ug7]   { fill: rgba(0,0,0,.16); }
.rxhero-r-front[b-lhg2rz6ug7] { fill: rgba(0,0,0,.30); }
.rxhero.dusk  .rxhero-r-mid[b-lhg2rz6ug7]   { fill: rgba(40,20,50,.34); }
.rxhero.dusk  .rxhero-r-front[b-lhg2rz6ug7] { fill: rgba(20,10,30,.6); }
.rxhero.night .rxhero-r-back[b-lhg2rz6ug7]  { fill: rgba(180,196,232,.10); }
.rxhero.night .rxhero-r-mid[b-lhg2rz6ug7]   { fill: rgba(70,86,130,.45); }
.rxhero.night .rxhero-r-front[b-lhg2rz6ug7] { fill: rgba(12,18,40,.9); }

/* grain stalks */
.rxhero-grain path[b-lhg2rz6ug7] { stroke: rgba(0,0,0,.30); stroke-width: 1.4; stroke-linecap: round; fill: none; }
.rxhero.night .rxhero-grain path[b-lhg2rz6ug7] { stroke: rgba(180,196,232,.5); }

/* sun / moon */
.rxhero-glow[b-lhg2rz6ug7] { filter: blur(12px); opacity: .5; }
.rxhero.day   .rxhero-glow[b-lhg2rz6ug7] { fill:#FFF1B8; } .rxhero.day   .rxhero-body[b-lhg2rz6ug7] { fill:#FCE08A; }
.rxhero.dawn  .rxhero-glow[b-lhg2rz6ug7] { fill:#FFD9A6; } .rxhero.dawn  .rxhero-body[b-lhg2rz6ug7] { fill:#FFCB85; }
.rxhero.dusk  .rxhero-glow[b-lhg2rz6ug7] { fill:#FF9E5E; } .rxhero.dusk  .rxhero-body[b-lhg2rz6ug7] { fill:#FFB770; }
.rxhero.night .rxhero-glow[b-lhg2rz6ug7] { fill:#AEB9D8; opacity:.28; } .rxhero.night .rxhero-body[b-lhg2rz6ug7] { fill:#E8ECF6; }

/* stars */
.rxhero-stars[b-lhg2rz6ug7] { opacity: 0; transition: opacity .6s ease; }
.rxhero.night .rxhero-stars[b-lhg2rz6ug7] { opacity: 1; }
.rxhero.dusk  .rxhero-stars[b-lhg2rz6ug7] { opacity: .5; }
.rxhero-star[b-lhg2rz6ug7] { fill:#fff; animation: rxhero-twinkle-b-lhg2rz6ug7 3.4s ease-in-out infinite; }
@keyframes rxhero-twinkle-b-lhg2rz6ug7 { 0%,100%{opacity:.25} 50%{opacity:1} }

/* readability scrim + caption */
.rxhero[b-lhg2rz6ug7]::after {
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.5) 100%);
}
.rxhero-caption[b-lhg2rz6ug7] { position:absolute; left:0; right:0; bottom:0; z-index:2; padding: 0 24px 16px; color:#fff; }
.rxhero-eyebrow[b-lhg2rz6ug7] {
    text-transform: uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:700;
    font-family: var(--font-mono, monospace);
    color: color-mix(in srgb, #fff 82%, var(--rx-accent));
    text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
.rxhero-title[b-lhg2rz6ug7] {
    font-family: var(--font-serif, Georgia, serif); font-weight:600; font-style:italic; line-height:1.02;
    font-size: clamp(1.9rem, 4.5vw, 2.8rem); margin:.12rem 0 .45rem;
    text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.rxhero-stats[b-lhg2rz6ug7] { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; font-size:.9rem;
    font-family: var(--font-mono, monospace); text-shadow:0 1px 8px rgba(0,0,0,.45); }
.rxhero-stats strong[b-lhg2rz6ug7] { font-family: var(--font-serif, Georgia, serif); font-style:italic; font-size:1.15rem; font-weight:600; }
.rxhero-dot[b-lhg2rz6ug7] { opacity:.5; }

@media (max-width: 640px) {
    .rxhero-scene[b-lhg2rz6ug7] { height: 158px; }
    .rxhero-caption[b-lhg2rz6ug7] { padding: 0 16px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .rxhero-star[b-lhg2rz6ug7] { animation: none; opacity: .6; }
}