[data-bioweather-page] { --bio-green:#2c9b69; --bio-lime:#87c84a; --bio-yellow:#f2c94c; --bio-orange:#ef8f3c; --bio-red:#d95151; --bio-ink:#102a42; --bio-muted:#5d7890; }
.bio-page-hero { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.38fr); gap:28px; padding:38px 40px; background:linear-gradient(125deg,#123f65 0%,#176f79 58%,#49a66f 130%); color:#fff; }
.bio-page-hero::after { content:""; position:absolute; inset:auto -7% -70% auto; width:430px; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(216,244,138,.34),rgba(255,255,255,0) 68%); pointer-events:none; }
.bio-hero-copy { position:relative; z-index:1; }
.bio-page-hero .eyebrow { color:#9fe5d5; }
.bio-page-hero h1 { margin:.28rem 0 .55rem; color:#fff; font-size:clamp(2.2rem,5vw,4.2rem); line-height:.98; }
.bio-page-hero p { max-width:760px; margin:0; color:#d7eef2; font-size:1.08rem; line-height:1.65; }
.bio-hero-statuses { display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.bio-hero-statuses span { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(5,35,56,.28); font-size:.79rem; font-weight:800; }
.bio-hero-statuses i { width:9px; height:9px; border-radius:50%; background:#6fd38c; box-shadow:0 0 0 5px rgba(111,211,140,.14); }
.bio-hero-statuses .is-stale i { background:#f2c94c; }.bio-hero-statuses .is-offline i { background:#ee7b7b; }
.bio-hero-now { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; min-height:170px; padding:25px; border:1px solid rgba(255,255,255,.24); border-radius:26px; background:rgba(255,255,255,.13); backdrop-filter:blur(8px); }
.bio-hero-now small { color:#bfe5e6; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }.bio-hero-now strong { margin:8px 0; font-size:1.5rem; line-height:1.15; }.bio-hero-now span { color:#d9ebef; }
.bio-section-nav { margin-top:18px; }
.bio-overview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.bio-summary-card { --level-color:var(--bio-green); overflow:hidden; border:1px solid #d1e1e8; border-top:5px solid var(--level-color); border-radius:23px; background:rgba(250,253,255,.93); box-shadow:0 12px 28px rgba(23,61,88,.1); }
.bio-summary-card > header { display:flex; align-items:center; gap:15px; padding:22px 24px 12px; }.bio-summary-card > header > span { display:grid; place-items:center; width:50px; height:50px; border-radius:16px; background:color-mix(in srgb,var(--level-color) 16%,#fff); color:var(--level-color); font-size:1.65rem; font-weight:900; }
.bio-summary-card small { color:var(--bio-muted); font-size:.74rem; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }.bio-summary-card h3 { margin:3px 0 0; color:var(--bio-ink); font-size:1.25rem; }.bio-summary-card > p { min-height:48px; margin:0; padding:5px 24px 20px; color:#36576d; line-height:1.55; }.bio-summary-card > footer { display:flex; justify-content:space-between; gap:12px; padding:13px 24px; border-top:1px solid #dce9ee; background:#f3f9fb; color:#607b8f; font-size:.76rem; }.bio-summary-card > footer time { text-align:right; }
.pollen-level-0,.bio-level-0 { --level-color:var(--bio-green); }.pollen-level-1,.pollen-level-2,.bio-level-1 { --level-color:var(--bio-lime); }.pollen-level-3,.pollen-level-4,.bio-level-2 { --level-color:var(--bio-yellow); }.pollen-level-5 { --level-color:var(--bio-orange); }.pollen-level-6,.bio-level-3 { --level-color:var(--bio-red); }
.pollen-forecast-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.pollen-day-card { --level-color:var(--bio-green); overflow:hidden; border:1px solid #d0e0e7; border-radius:22px; background:#fafdff; box-shadow:0 12px 28px rgba(31,72,98,.09); }
.pollen-day-card > header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 20px; border-top:5px solid var(--level-color); background:linear-gradient(135deg,color-mix(in srgb,var(--level-color) 11%,#fff),#fafdff); }.pollen-day-card header small { color:#668196; font-size:.7rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }.pollen-day-card h3 { margin:2px 0 0; color:var(--bio-ink); }.pollen-day-card header > span { padding:7px 10px; border-radius:999px; background:var(--level-color); color:#fff; font-size:.68rem; font-weight:900; text-align:center; }
.pollen-day-list { padding:4px 0; }.pollen-day-row { display:grid; grid-template-columns:minmax(70px,.7fr) minmax(54px,1fr) minmax(100px,1fr); align-items:center; gap:10px; min-height:54px; padding:8px 18px; border-top:1px solid #e0ebef; }.pollen-day-row:first-child { border-top:0; }.pollen-day-row > strong { color:#173950; font-size:.87rem; }.pollen-day-row > span { display:flex; justify-content:flex-end; align-items:center; gap:7px; text-align:right; }.pollen-day-row b { color:#365c72; font-size:.72rem; }.pollen-day-row small { min-width:30px; padding:4px 6px; border-radius:8px; background:#e6f0f4; color:#193e55; font-size:.68rem; font-weight:900; text-align:center; }
.pollen-level-track { height:8px; overflow:hidden; border-radius:999px; background:#e4edf1; }.pollen-level-track i { display:block; width:calc((var(--pollen-level) / 6) * 100%); min-width:calc(var(--pollen-level) * 2px); height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--bio-green),var(--bio-lime) 28%,var(--bio-yellow) 56%,var(--bio-orange) 78%,var(--bio-red)); }
.pollen-legend { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; padding:13px 16px; border-radius:16px; background:rgba(245,250,252,.9); color:#45687e; }.pollen-legend span { padding:6px 9px; border-radius:999px; color:#fff; font-size:.7rem; font-weight:900; }.pollen-legend .pollen-none { background:var(--bio-green); }.pollen-legend .pollen-low { background:var(--bio-lime); }.pollen-legend .pollen-medium { background:#dcae21; }.pollen-legend .pollen-high { background:var(--bio-red); }.pollen-legend small { margin-left:auto; }
.bioweather-timeline { display:grid; grid-template-columns:repeat(5,minmax(230px,1fr)); gap:14px; overflow-x:auto; padding:4px 3px 15px; scroll-snap-type:x proximity; }
.bioweather-period { --level-color:var(--bio-green); min-width:230px; overflow:hidden; border:1px solid #d1e0e7; border-top:5px solid var(--level-color); border-radius:20px; background:#fbfdfe; box-shadow:0 10px 22px rgba(30,69,96,.08); scroll-snap-align:start; }.bioweather-period.is-current { outline:3px solid color-mix(in srgb,var(--level-color) 42%,transparent); outline-offset:2px; }
.bioweather-period > header { display:flex; justify-content:space-between; min-height:82px; padding:16px 17px 12px; background:linear-gradient(145deg,color-mix(in srgb,var(--level-color) 12%,#fff),#fff); }.bioweather-period header small { color:#6b8394; font-size:.7rem; font-weight:800; }.bioweather-period h3 { margin:3px 0; color:var(--bio-ink); font-size:1.1rem; }.bioweather-period header span { color:#607b8d; font-size:.76rem; }.bioweather-period header > b { align-self:flex-start; padding:5px 8px; border-radius:999px; background:var(--level-color); color:#fff; font-size:.63rem; text-transform:uppercase; }
.bioweather-period-summary { display:block; min-height:54px; padding:13px 17px; color:#173a51; font-size:.82rem; line-height:1.35; }.bioweather-period ul { margin:0; padding:0; list-style:none; }.bioweather-period li { display:flex; flex-direction:column; gap:3px; padding:10px 17px; border-top:1px solid #e1ebef; }.bioweather-period li span { color:#375a70; font-size:.72rem; line-height:1.25; }.bioweather-period li b { color:#1e455c; font-size:.7rem; }.bioweather-period li.bio-effect-level-1 b { color:#548f26; }.bioweather-period li.bio-effect-level-2 b { color:#a26a00; }.bioweather-period li.bio-effect-level-3 b { color:#bd3636; }
.bio-recommendation-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.bio-recommendation-card { overflow:hidden; border:1px solid #d4e2e8; border-radius:20px; background:#fbfdfe; }.bio-recommendation-card > header { padding:16px 20px; background:linear-gradient(135deg,#e9f7f1,#f7fbfc); }.bio-recommendation-card header small { color:#668296; font-size:.72rem; font-weight:800; }.bio-recommendation-card h3 { margin:3px 0 0; color:var(--bio-ink); }.bio-recommendation-card ul { margin:0; padding:8px 20px 16px; list-style:none; }.bio-recommendation-card li { display:flex; gap:11px; padding:11px 0; border-top:1px solid #e3ecef; }.bio-recommendation-card li:first-child { border-top:0; }.bio-recommendation-card li > span { display:grid; flex:0 0 28px; place-items:center; width:28px; height:28px; border-radius:50%; background:#dff2e8; color:#21865a; font-weight:900; }.bio-recommendation-card li div { display:flex; flex-direction:column; gap:3px; }.bio-recommendation-card li small { color:#71899a; }.bio-recommendation-card li strong { color:#23475d; font-size:.84rem; line-height:1.35; }
.bio-information-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }.bio-information-grid article { position:relative; padding:23px 23px 22px 76px; border:1px solid #d5e4e9; border-radius:20px; background:#f9fcfd; }.bio-information-grid article > span { position:absolute; left:21px; top:23px; display:grid; place-items:center; width:38px; height:38px; border-radius:13px; background:#dff2e9; color:#207e58; font-weight:900; }.bio-information-grid h3 { margin:0 0 7px; color:var(--bio-ink); }.bio-information-grid p { margin:0; color:#4c6b7e; line-height:1.55; }.bio-source-links { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:16px; padding:14px 18px; border-radius:17px; background:#eaf4f7; }.bio-source-links strong { margin-right:auto; color:#173b52; }.bio-source-links a,.pollen-sidebar-detail-link { color:#1375a3; font-weight:800; text-decoration:none; }.bio-source-links a:hover,.pollen-sidebar-detail-link:hover { text-decoration:underline; }
.bio-empty-state { grid-column:1/-1; padding:25px; border:1px dashed #b7ccd6; border-radius:20px; background:#f5fafb; color:#526f81; }.bio-empty-state strong { display:block; margin-bottom:5px; color:#173b52; }.bio-empty-state p { margin:0; }
.pollen-sidebar-detail-link { display:block; margin-top:10px; font-size:.77rem; }
@media (max-width:1180px) { .pollen-forecast-grid { grid-template-columns:1fr; }.bioweather-timeline { grid-template-columns:repeat(5,minmax(250px,1fr)); } }
@media (max-width:760px) { .bio-page-hero { grid-template-columns:1fr; padding:27px 22px; }.bio-hero-now { min-height:auto; }.bio-overview-grid,.bio-recommendation-grid,.bio-information-grid { grid-template-columns:1fr; }.bio-summary-card > footer { flex-direction:column; }.bio-summary-card > footer time { text-align:left; }.pollen-day-row { grid-template-columns:72px minmax(55px,1fr) 105px; padding-inline:13px; }.pollen-legend small { width:100%; margin-left:0; }.bio-information-grid article { padding-left:68px; } }
@media (prefers-reduced-motion:reduce) { .bioweather-timeline { scroll-behavior:auto; } }