@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap');

:root {
  color-scheme: light;
  --ink: #20291f;
  --muted: #73796c;
  --green: #31583d;
  --green-deep: #193d2d;
  --green-light: #e3edda;
  --lime: #d9e88d;
  --paper: #f4f3e8;
  --white: #fffef8;
  --line: #dedfce;
  --amber: #b96632;
  --mono: 'DM Mono', Consolas, monospace;
  --sans: 'DM Sans', sans-serif;
  --serif: 'Fraunces', Georgia, serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 14px; }
button, select { font: inherit; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #b96632; outline-offset: 3px; }
a { color: inherit; }
.app-shell { max-width: 1480px; min-height: 100vh; margin: 0 auto; padding: 0 5.1%; background: radial-gradient(ellipse at 90% 12%, rgba(217, 232, 141, .21), transparent 34%), var(--paper); }
.topbar { min-height: 78px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; gap: 10px; align-items: center; color: var(--green-deep); text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--green-deep); }
.brand-mark svg { width: 30px; fill: var(--lime); stroke: var(--green-deep); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.brand-mark svg path + path { fill: none; stroke: var(--green-deep); stroke-width: 1.6; }
.brand-name { font-size: 21px; font-weight: 700; line-height: 1; }
.brand-name > span { color: #b96632; }
.brand-name small { display: block; margin-top: 5px; color: var(--muted); font: 9px var(--mono); letter-spacing: 0; }
.topbar-right { display: flex; align-items: center; gap: 17px; }
.island-label, .eyebrow, .today-label, .condition-stat small, .model-note, .week-header, .app-footer, .source-note { font-family: var(--mono); letter-spacing: 0; }
.island-label { color: var(--green); font-size: 10px; }
.island-dot, .status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #6c9b61; vertical-align: 1px; }
.icon-button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; color: var(--green); border: 1px solid var(--line); border-radius: 50%; background: rgba(255,254,248,.7); cursor: pointer; transition: background .18s ease, transform .18s ease; }
.location-tools > .icon-button { width: 48px; height: 48px; flex: 0 0 48px; }
.icon-button:hover { transform: translateY(-1px); background: white; }
.icon-button svg, .location-select-wrap > svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.install-button { width: 36px; height: 36px; }
main { padding-bottom: 20px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 39px 0 17px; }
.eyebrow { margin: 0 0 7px; color: var(--green); font-size: 9px; line-height: 1.3; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 38px; font-weight: 500; line-height: 1.1; }
h1 em { color: var(--green); font-family: var(--serif); font-weight: 500; }
.location-tools { display: flex; width: 345px; flex: 0 0 auto; align-items: flex-end; gap: 9px; }
.location-picker { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; gap: 6px; }
.location-kicker { color: var(--green); font: 9px/1.2 var(--mono); }
.location-select-wrap { display: flex; width: 100%; height: 48px; align-items: center; gap: 10px; padding: 0 12px; color: var(--green); border: 1px solid #d4ddce; border-radius: 7px; background: linear-gradient(115deg, #fffef8 0%, #f0f5e9 100%); box-shadow: 0 3px 10px rgba(25,61,45,.06); cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.location-select-wrap:hover { transform: translateY(-1px); border-color: #a7b99f; box-shadow: 0 6px 16px rgba(25,61,45,.1); }
.location-select-wrap:focus-within { border-color: #557c58; outline: 3px solid rgba(85,124,88,.17); outline-offset: 2px; box-shadow: 0 5px 15px rgba(25,61,45,.1); }
.location-icon { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; color: var(--green); border-radius: 6px; background: var(--green-light); }
.location-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.location-select-wrap select { width: 0; min-width: 0; flex: 1 1 auto; appearance: none; padding: 0 2px 0 0; color: var(--ink); border: 0; outline: 0; background: transparent; font-size: 13px; font-weight: 600; cursor: pointer; }
.location-select-wrap .select-chevron { width: 16px; height: 16px; flex: 0 0 16px; color: var(--green); pointer-events: none; }
.status-line { display: flex; align-items: center; min-height: 26px; color: var(--muted); font: 10px var(--mono); }
.status-line.is-offline .status-dot { background: var(--amber); }
.status-line.is-error .status-dot { background: #b84638; }
.observation-panel { margin: 0 0 14px; padding: 16px 19px 12px; border: 1px solid #cadbd8; border-radius: 6px; background: linear-gradient(112deg, #f5f8f1 0%, #eaf3f1 100%); }
.observation-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.observation-heading-main { display: flex; min-width: 0; align-items: center; gap: 12px; }
.observation-icon { display: grid; width: 39px; height: 39px; flex: 0 0 39px; place-items: center; color: #386f72; border-radius: 8px; background: #dcebe5; }
.observation-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; }
.observation-heading .eyebrow { margin-bottom: 3px; color: #386f72; }
.observation-heading h2 { margin: 0; font-size: 15px; font-weight: 600; }
.station-code { margin-left: 5px; color: #71847d; font: 9px var(--mono); vertical-align: 2px; }
.station-detail { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.observation-state { display: grid; grid-template-columns: 8px auto; align-items: center; column-gap: 7px; color: #426e66; font: 9px var(--mono); text-align: right; white-space: nowrap; }
.observation-dot { width: 7px; height: 7px; border-radius: 50%; background: #669a66; box-shadow: 0 0 0 3px rgba(102,154,102,.13); }
.observation-state time { grid-column: 2; color: var(--muted); font-size: 8px; }
.observation-panel.is-delayed .observation-dot { background: var(--amber); box-shadow: 0 0 0 3px rgba(185,102,50,.13); }
.observation-panel.is-unavailable .observation-dot { background: #898b7e; box-shadow: none; }
.station-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 13px; padding: 11px 0 10px; border-top: 1px solid rgba(56,111,114,.17); }
.station-metrics small { display: block; margin-bottom: 4px; color: #71847d; font: 8px var(--mono); }
.station-metrics strong { color: #253d39; font-size: 15px; font-weight: 600; }
.station-footnote { margin: 0; color: #71847d; font-size: 9px; }
.station-footnote a { color: #386f72; text-underline-offset: 2px; }
.weather-grid { display: grid; grid-template-columns: minmax(0, 1.52fr) minmax(310px, .88fr); gap: 13px; }
.current-panel, .advice-panel { min-width: 0; min-height: 318px; border-radius: 4px; }
.current-panel { position: relative; overflow: hidden; padding: 21px 24px 15px; color: #f8f8e9; background: var(--green-deep); }
.current-panel::after { position: absolute; z-index: 0; top: -105px; right: -65px; width: 310px; height: 310px; border: 1px solid rgba(217,232,141,.14); border-radius: 50%; box-shadow: 0 0 0 27px rgba(217,232,141,.035), 0 0 0 55px rgba(217,232,141,.035); content: ''; pointer-events: none; }
.panel-topline { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.today-label { color: #b7c4a8; font-size: 9px; }
.condition-label { padding: 6px 9px; color: #e5edbd; border: 1px solid rgba(229,237,189,.26); border-radius: 2px; font-size: 10px; }
.current-main { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; min-height: 146px; }
.temperature-block { display: flex; flex-direction: column; align-items: flex-start; }
.temperature { font-size: 108px; font-weight: 400; letter-spacing: 0; line-height: .95; }
.temperature sup { margin-left: 3px; font-size: .37em; vertical-align: top; }
.temp-unit { margin-left: 4px; color: #bdcbb6; font: 12px var(--mono); vertical-align: 12px; }
.feels-like { margin-top: 8px; color: #bdcbb6; font-size: 11px; }
.weather-art { display: grid; width: 125px; height: 125px; place-items: center; margin-right: 9%; color: var(--lime); }
.weather-art svg { width: 112px; height: 112px; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.1; }
.current-summary { position: relative; z-index: 1; min-height: 19px; margin: 0 0 15px; color: #d2dac8; font-size: 11px; }
.conditions-row { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 13px 0 10px; border-top: 1px solid rgba(229,237,189,.2); }
.condition-stat { display: flex; align-items: center; gap: 8px; min-width: 0; }
.stat-icon { display: grid; flex: 0 0 27px; width: 27px; height: 27px; place-items: center; color: var(--lime); border: 1px solid rgba(217,232,141,.24); border-radius: 50%; font-size: 13px; }
.condition-stat small { display: block; margin-bottom: 4px; color: #aebba5; font-size: 8px; white-space: nowrap; }
.condition-stat strong { font-size: 11px; font-weight: 500; white-space: nowrap; }
.model-note { position: relative; z-index: 1; margin: 2px 0 0; color: #aebba5; font-size: 8px; }
.advice-panel { display: flex; flex-direction: column; padding: 21px 22px 16px; border: 1px solid var(--line); background: rgba(255,254,248,.76); }
.advice-heading { display: flex; align-items: center; gap: 12px; }
.advice-sun { display: grid; flex: 0 0 41px; width: 41px; height: 41px; place-items: center; color: var(--amber); border-radius: 50%; background: #f6e9c7; }
.advice-sun svg { width: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.6; }
.advice-heading .eyebrow { margin-bottom: 4px; color: var(--amber); }
.advice-heading h2 { margin: 0; font-size: 17px; font-weight: 600; }
.advice-intro { margin: 14px 0 5px; color: var(--muted); font-size: 11px; }
.advice-list { flex: 1; }
.advice-item { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: start; padding: 10px 0; border-bottom: 1px solid #e9e9dc; }
.advice-item:last-child { border-bottom: 0; }
.advice-number { color: var(--amber); font: 9px var(--mono); }
.advice-item p { margin: 0; font-size: 11px; line-height: 1.55; }
.advice-disclaimer { margin: 9px 0 0; color: #898b7e; font-size: 9px; line-height: 1.45; }
.forecast-section { padding-top: 30px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.section-heading .eyebrow { margin-bottom: 4px; }
.section-heading h2 { margin: 0; font-size: 19px; font-weight: 600; }
.section-note { color: var(--muted); font: 9px var(--mono); }
.hourly-forecast { display: grid; grid-template-columns: repeat(8, minmax(64px, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 3px; background: var(--white); }
.hour-item { display: flex; min-height: 119px; flex-direction: column; align-items: center; justify-content: space-between; padding: 13px 7px 12px; border-right: 1px solid #edede3; }
.hour-item:last-child { border-right: 0; }
.hour-time { color: var(--muted); font: 9px var(--mono); }
.hour-icon { width: 24px; height: 24px; color: var(--green); }
.hour-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.hour-temp { font-size: 12px; font-weight: 600; }
.hour-rain { color: #518091; font: 9px var(--mono); }
.week-table-wrap { border: 1px solid var(--line); border-radius: 3px; background: var(--white); }
.week-header, .week-row { display: grid; grid-template-columns: minmax(95px, 1fr) minmax(130px, 1.4fr) minmax(60px, .7fr) minmax(95px, 1fr) minmax(68px, .65fr); align-items: center; gap: 8px; padding: 0 17px; }
.week-header { min-height: 34px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 8px; }
.week-row { min-height: 44px; border-bottom: 1px solid #edede3; font-size: 11px; }
.week-row:last-child { border-bottom: 0; }
.week-day { font-weight: 600; }
.week-condition { display: flex; align-items: center; gap: 8px; color: #495449; }
.week-condition svg { width: 19px; height: 19px; color: var(--green); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.week-rain { color: #518091; }
.week-temp { font-weight: 600; }
.week-temp span { color: var(--muted); font-weight: 400; }
.week-uv { color: var(--muted); }
.source-note { margin: 10px 0 0; color: var(--muted); font-size: 8px; line-height: 1.6; }
.source-note a { color: var(--green); text-underline-offset: 2px; }
.app-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 27px; padding: 14px 0 17px; color: var(--muted); border-top: 1px solid var(--line); font-size: 8px; }
.app-footer span:last-child { color: var(--green); }
.loading-copy { grid-column: 1 / -1; padding: 16px; color: var(--muted); font-size: 11px; }
.refreshing .current-panel { animation: reveal .35s ease both; }
@keyframes reveal { from { opacity: .75; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 1180px) { .app-shell { padding-right: 8.3%; padding-left: 8.3%; } }
@media (max-width: 1000px) {
  .page-heading { align-items: flex-start; flex-direction: column; gap: 15px; }
  .location-tools { width: 100%; }
}
@media (max-width: 850px) {
  .app-shell { padding-right: 4%; padding-left: 4%; }
  .weather-grid { grid-template-columns: minmax(0, 1.2fr) minmax(280px, .9fr); }
  .current-panel { padding-right: 18px; padding-left: 18px; }
  .advice-panel { padding-right: 17px; padding-left: 17px; }
  .weather-art { margin-right: 0; }
  .conditions-row { grid-template-columns: repeat(2, 1fr); row-gap: 12px; }
  .current-panel, .advice-panel { min-height: 345px; }
  .hourly-forecast { grid-template-columns: repeat(6, minmax(58px, 1fr)); }
  .hour-item:nth-child(n+7) { display: none; }
}
@media (max-width: 620px) {
  .app-shell { padding-right: 17px; padding-left: 17px; }
  .topbar { min-height: 65px; }
  .brand-mark { width: 35px; height: 35px; }
  .brand-mark svg { width: 27px; }
  .brand-name { font-size: 19px; }
  .topbar-right { gap: 9px; }
  .island-label { font-size: 9px; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 15px; padding: 25px 0 11px; }
  h1 { max-width: 340px; font-size: 30px; }
  .location-tools { width: 100%; }
  .location-picker { flex: 1 1 0; }
  .observation-panel { padding: 15px; }
  .observation-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .observation-state { width: 100%; grid-template-columns: 8px auto 1fr; text-align: left; }
  .observation-state time { grid-column: 3; grid-row: 1; text-align: right; }
  .station-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .status-line { min-height: 27px; font-size: 9px; }
  .weather-grid { grid-template-columns: 1fr; gap: 10px; }
  .current-panel, .advice-panel { min-height: auto; }
  .current-panel { padding: 17px 17px 13px; }
  .current-main { min-height: 129px; }
  .temperature { font-size: 84px; }
  .weather-art { width: 100px; height: 100px; margin-right: 5px; }
  .weather-art svg { width: 90px; height: 90px; }
  .current-summary { margin-bottom: 12px; }
  .conditions-row { padding-top: 11px; }
  .advice-panel { padding: 17px; }
  .advice-list { margin-top: 3px; }
  .forecast-section { padding-top: 25px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 6px; margin-bottom: 10px; }
  .section-heading h2 { font-size: 18px; }
  .hourly-forecast { grid-template-columns: repeat(4, minmax(56px, 1fr)); }
  .hour-item { min-height: 111px; }
  .hour-item:nth-child(n+5) { display: none; }
  .week-header, .week-row { grid-template-columns: minmax(58px, .8fr) minmax(86px, 1.15fr) minmax(42px, .6fr) minmax(67px, .9fr); gap: 5px; padding-right: 9px; padding-left: 9px; }
  .week-header span:nth-child(5), .week-uv { display: none; }
  .week-row { min-height: 43px; font-size: 10px; }
  .week-header { font-size: 7px; }
  .week-condition { gap: 5px; }
  .week-condition svg { width: 17px; height: 17px; }
  .app-footer { margin-top: 22px; font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.maf-nav-link, .weather-nav-link, .news-nav-link, .map-nav-link { display: inline-flex; align-items: center; gap: 6px; color: var(--green); text-decoration: none; font: 9px var(--mono); white-space: nowrap; }
.maf-nav-link, .news-nav-link, .map-nav-link { padding: 8px 10px; border: 1px solid #d4ddce; border-radius: 5px; background: #f0f5e9; transition: background .18s ease, border-color .18s ease; }
.maf-nav-link:hover, .news-nav-link:hover, .map-nav-link:hover { border-color: #a7b99f; background: #e3edda; }
.maf-nav-link svg, .weather-nav-link svg, .news-nav-link svg, .map-nav-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.weather-nav-link { padding: 8px 10px; border: 1px solid var(--line); border-radius: 5px; background: rgba(255,254,248,.72); }
.maf-shell { background: radial-gradient(ellipse at 82% 4%, rgba(217,232,141,.19), transparent 29%), var(--paper); }
.maf-main { padding-bottom: 24px; }
.maf-hero { display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: end; gap: 35px; padding: 44px 0 29px; }
.maf-hero h1 { max-width: 730px; font-size: 44px; }
.maf-hero h1 em { white-space: nowrap; }
.maf-deck { max-width: 540px; margin: 12px 0 0; color: #586256; font-size: 14px; line-height: 1.65; }
.maf-source-stamp { display: grid; gap: 7px; padding: 12px 0 5px 15px; border-left: 2px solid #83a576; }
.stamp-label, .snapshot-item small, .resource-type, .resource-category, .resource-source-date, .support-index { font-family: var(--mono); }
.stamp-label { color: var(--green); font-size: 8px; }
.maf-source-stamp strong { font-size: 13px; font-weight: 600; }
.maf-source-stamp > span:last-child { color: var(--muted); font-size: 10px; line-height: 1.45; }
.maf-snapshot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.snapshot-item { display: flex; min-width: 0; align-items: center; gap: 11px; padding: 15px 18px; border-right: 1px solid var(--line); }
.snapshot-item:first-child { padding-left: 0; }
.snapshot-item:last-child { border-right: 0; }
.snapshot-number { color: var(--amber); font: 10px var(--mono); }
.snapshot-item small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 8px; }
.snapshot-item strong { font-size: 14px; font-weight: 600; }
.hub-section { padding-top: 3px; }
.hub-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 15px; }
.hub-section-heading .eyebrow { margin-bottom: 4px; }
.hub-section-heading h2 { margin: 0; font-size: 22px; font-weight: 600; }
.official-link { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 11px; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; }
.resource-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.resource-search { display: flex; width: min(355px, 100%); height: 42px; align-items: center; gap: 9px; padding: 0 12px; color: var(--green); border: 1px solid var(--line); border-radius: 5px; background: var(--white); }
.resource-search:focus-within { border-color: #557c58; outline: 3px solid rgba(85,124,88,.15); outline-offset: 2px; }
.resource-search svg { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; }
.resource-search input { width: 100%; min-width: 0; padding: 0; color: var(--ink); border: 0; outline: 0; background: transparent; font-size: 12px; }
.resource-search input::placeholder { color: #92958a; }
.resource-filters { display: flex; max-width: 100%; overflow-x: auto; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: #eeeee2; scrollbar-width: thin; }
.resource-filter { flex: 0 0 auto; min-height: 30px; padding: 0 11px; color: #636b5e; border: 0; border-radius: 4px; background: transparent; font-size: 10px; cursor: pointer; transition: color .18s ease, background .18s ease; }
.resource-filter:hover { color: var(--green-deep); background: rgba(255,254,248,.7); }
.resource-filter.is-active { color: var(--white); background: var(--green-deep); }
.resource-results-line { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: var(--muted); font: 9px var(--mono); }
.resource-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.resource-card { display: flex; min-width: 0; flex-direction: column; padding: 16px 17px 14px; border: 1px solid var(--line); border-radius: 5px; background: rgba(255,254,248,.83); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.resource-card:hover { transform: translateY(-2px); border-color: #bdcbbb; box-shadow: 0 6px 17px rgba(25,61,45,.07); }
.resource-meta { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 11px; }
.resource-type, .resource-category { font-size: 8px; }
.resource-type { color: var(--amber); }
.resource-category { color: var(--green); text-align: right; }
.resource-card h3 { margin: 0 0 5px; font-size: 15px; font-weight: 600; line-height: 1.3; }
.resource-period { margin: 0 0 8px; color: var(--green); font-size: 11px; font-weight: 600; }
.resource-description { flex: 1; margin: 0 0 10px; color: #687064; font-size: 10px; line-height: 1.55; }
.resource-source-date { margin: 0 0 11px; color: #898b7e; font-size: 8px; }
.resource-links { display: flex; flex-wrap: wrap; gap: 7px 14px; padding-top: 10px; border-top: 1px solid #e7e8dc; }
.resource-links a, .support-item > a { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: 10px; font-weight: 600; text-decoration: none; }
.resource-links a:hover, .support-item > a:hover { text-decoration: underline; text-underline-offset: 3px; }
.no-resources { grid-column: 1 / -1; padding: 20px 0; color: var(--muted); font-size: 12px; }
.load-more-button { display: block; min-height: 38px; margin: 14px auto 0; padding: 0 16px; color: var(--green); border: 1px solid #cdd8c8; border-radius: 5px; background: #eef3e8; font-size: 11px; font-weight: 600; cursor: pointer; }
.load-more-button:hover { border-color: #93aa8e; background: #e3edda; }
.load-more-button[hidden] { display: none; }
.resource-data { margin-top: 11px; }
.resource-data-toggle { min-height: 34px; padding: 0 12px; color: var(--green); border: 1px solid #cdd8c8; border-radius: 5px; background: #eef3e8; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; }
.resource-data-toggle:hover { border-color: #93aa8e; background: #e3edda; }
.resource-data-panel { margin-top: 9px; padding: 10px; border: 1px solid #e7e8dc; border-radius: 5px; background: #fbfbf4; }
.resource-data-panel[hidden] { display: none; }
.data-sheet-tabs { display: flex; gap: 6px; margin-bottom: 8px; overflow-x: auto; }
.data-sheet-tabs button { flex: none; min-height: 28px; padding: 0 10px; color: #687064; border: 1px solid #dbe0d3; border-radius: 4px; background: #fff; font-family: var(--mono); font-size: 9px; cursor: pointer; }
.data-sheet-tabs button.is-active { color: var(--green-deep); border-color: #93aa8e; background: #e3edda; font-weight: 600; }
.data-table-wrap { max-height: 300px; overflow: auto; border: 1px solid #e7e8dc; border-radius: 4px; background: #fff; }
.data-table { border-collapse: collapse; width: 100%; font-size: 10px; }
.data-table th, .data-table td { padding: 5px 8px; border-bottom: 1px solid #eef0e4; border-right: 1px solid #f2f4ea; text-align: left; white-space: nowrap; }
.data-table thead th { position: sticky; top: 0; background: #f4f7ee; color: var(--green-deep); font-family: var(--mono); font-size: 9px; }
.data-table .data-rownum { position: sticky; left: 0; background: #f7f8f1; color: #898b7e; font-family: var(--mono); font-size: 9px; text-align: right; }
.data-caption, .resource-data-note { margin: 8px 0 0; color: #898b7e; font-size: 9px; line-height: 1.5; }
.support-section { margin-top: 36px; padding-top: 23px; border-top: 1px solid var(--line); }
.support-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.support-item { display: flex; min-width: 0; flex-direction: column; padding: 17px 18px 16px; border-right: 1px solid var(--line); }
.support-item:first-child { padding-left: 0; }
.support-item:last-child { padding-right: 0; border-right: 0; }
.support-index { margin-bottom: 8px; color: var(--amber); font-size: 8px; }
.support-item h3 { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.support-item p { flex: 1; margin: 0 0 11px; color: #687064; font-size: 10px; line-height: 1.55; }
.phone-links { display: flex; flex-wrap: wrap; gap: 9px 14px; }
.phone-links a { color: var(--green); font-size: 10px; text-decoration: none; }
.phone-links strong { margin-left: 4px; font-family: var(--mono); font-size: 10px; }
.maf-data-note { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 11px; margin-top: 18px; padding: 14px 16px; border: 1px solid #e4d8bc; border-radius: 5px; background: #f8f1df; }
.note-mark { display: grid; width: 21px; height: 21px; place-items: center; color: #855526; border: 1px solid #d4b886; border-radius: 50%; font: 11px var(--serif); }
.maf-data-note p { margin: 0; color: #655942; font-size: 10px; line-height: 1.55; }
.maf-data-note strong { color: #473d2b; }
.maf-data-note > a { color: #805226; font-size: 10px; text-decoration: none; white-space: nowrap; }
.maf-data-note > a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 850px) {
  .maf-hero { grid-template-columns: minmax(0, 1fr) 215px; gap: 20px; }
  .maf-hero h1 { font-size: 38px; }
  .resource-toolbar { align-items: flex-start; flex-direction: column; }
  .resource-search { width: 100%; }
}
@media (max-width: 620px) {
  .maf-nav-link, .news-nav-link, .map-nav-link { padding: 7px; font-size: 8px; }
  .maf-nav-link svg, .news-nav-link svg, .map-nav-link svg { width: 14px; height: 14px; }
  .maf-hero { grid-template-columns: 1fr; gap: 16px; padding: 29px 0 22px; }
  .maf-hero h1 { font-size: 32px; }
  .maf-hero h1 em { white-space: normal; }
  .maf-deck { font-size: 12px; }
  .maf-source-stamp { grid-template-columns: auto 1fr; align-items: baseline; column-gap: 9px; padding: 9px 0 0; border-top: 1px solid #9bb78c; border-left: 0; }
  .maf-source-stamp > span:last-child { grid-column: 1 / -1; }
  .maf-snapshot { grid-template-columns: 1fr; margin-bottom: 24px; }
  .snapshot-item, .snapshot-item:first-child { padding: 11px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .snapshot-item:last-child { border-bottom: 0; }
  .hub-section-heading { align-items: flex-start; }
  .hub-section-heading h2 { font-size: 19px; }
  .official-link { font-size: 9px; }
  .resource-filters { width: 100%; }
  .resource-list { grid-template-columns: 1fr; }
  .support-section { margin-top: 29px; }
  .support-grid { grid-template-columns: 1fr; }
  .support-item, .support-item:first-child, .support-item:last-child { padding: 14px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .support-item:last-child { border-bottom: 0; }
  .maf-data-note { grid-template-columns: 22px 1fr; align-items: start; padding: 12px; }
  .maf-data-note > a { grid-column: 2; }
}

/* News desk */
.news-card h3 a { color: inherit; text-decoration: none; }
.news-card h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.news-photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; margin-bottom: 11px; background: #eeeee2; }
.news-byline { margin-right: auto; color: #898b7e; font-size: 8px; }
.resource-type.news-social { color: var(--green); }
.news-card .resource-description { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 480px) { .island-label { display: none; } }

/* Farm desk has four nav links; below ~460px labels would overflow the topbar. */
@media (max-width: 460px) {
  .topbar-right.is-crowded { gap: 6px; }
  .topbar-right.is-crowded .maf-nav-link,
  .topbar-right.is-crowded .weather-nav-link,
  .topbar-right.is-crowded .news-nav-link,
  .topbar-right.is-crowded .map-nav-link,
  .topbar-right.is-crowded .farm-nav-link { padding: 8px; }
  .topbar-right.is-crowded .maf-nav-link span,
  .topbar-right.is-crowded .weather-nav-link span,
  .topbar-right.is-crowded .news-nav-link span,
  .topbar-right.is-crowded .map-nav-link span,
  .topbar-right.is-crowded .farm-nav-link span { display: none; }
}

/* Market & transport map page */
.map-page { --map-market: #b96632; --map-wharf: #2f6f7a; --map-fuel: #6d7b2a; --map-services: #8c4a63; }
.map-shell { background: radial-gradient(ellipse at 18% 6%, rgba(217,232,141,.2), transparent 30%), var(--paper); }
.map-main { padding-bottom: 24px; }
.map-hero { display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: end; gap: 35px; padding: 44px 0 24px; }
.map-hero h1 { max-width: 700px; font-size: 44px; }
.map-hero h1 em { white-space: nowrap; }
.map-deck { max-width: 560px; margin: 12px 0 0; color: #586256; font-size: 14px; line-height: 1.65; }
.map-controls { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.map-controls .location-tools { width: 345px; }
.filter-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #b6bcab; vertical-align: 1px; }
.map-filter[data-cat="market"] .filter-dot { background: var(--map-market); }
.map-filter[data-cat="wharf"] .filter-dot { background: var(--map-wharf); }
.map-filter[data-cat="fuel"] .filter-dot { background: var(--map-fuel); }
.map-filter[data-cat="services"] .filter-dot { background: var(--map-services); }
.nearest-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
.nearest-strip[hidden] { display: none; }
.nearest-card { display: flex; min-width: 0; align-items: center; gap: 11px; padding: 11px 13px; color: var(--ink); text-align: left; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,254,248,.85); cursor: pointer; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; --cat: var(--green); }
.nearest-card:hover { transform: translateY(-1px); border-color: #b9c7b4; box-shadow: 0 6px 16px rgba(25,61,45,.08); }
.nearest-card.is-market { --cat: var(--map-market); }
.nearest-card.is-wharf { --cat: var(--map-wharf); }
.nearest-card.is-fuel { --cat: var(--map-fuel); }
.nearest-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; color: var(--cat); border-radius: 50%; background: #eef2e6; background: color-mix(in srgb, var(--cat) 12%, var(--white)); }
.nearest-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.nearest-copy { display: grid; min-width: 0; gap: 2px; }
.nearest-copy small { color: var(--muted); font: 8px var(--mono); }
.nearest-copy strong { font-size: 13px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.nearest-copy > span { color: var(--green); font: 9px var(--mono); }
.map-panel { border: 1px solid #ccd7c7; border-radius: 8px; overflow: hidden; background: #e7ede0; }
#place-map { width: 100%; height: 470px; }
.map-fallback { display: grid; place-items: center; height: 100%; margin: 0; padding: 20px; color: var(--muted); font-size: 12px; text-align: center; }
.map-panel-note { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 8px 12px; color: var(--muted); border-top: 1px solid var(--line); background: rgba(255,254,248,.85); font: 8px var(--mono); }
.map-panel-note span:last-child { color: var(--green); }
.place-section { padding-top: 30px; }
.place-count { color: var(--green); font: 9px var(--mono); }
.place-intro { margin: 0 0 12px; color: var(--muted); font-size: 11px; }
.place-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.place-item { display: flex; min-width: 0; flex-direction: column; gap: 6px; padding: 13px 15px 12px; border: 1px solid var(--line); border-radius: 5px; background: rgba(255,254,248,.83); --cat: var(--green); }
.place-item.is-market { --cat: var(--map-market); }
.place-item.is-wharf { --cat: var(--map-wharf); }
.place-item.is-fuel { --cat: var(--map-fuel); }
.place-item.is-services { --cat: var(--map-services); }
.place-head { display: flex; align-items: center; gap: 9px; }
.place-pin { display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; color: var(--white); border-radius: 50%; background: var(--cat); }
.place-pin svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.place-head h3 { min-width: 0; flex: 1 1 auto; margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.place-distance { flex: 0 0 auto; color: var(--green); font: 9px var(--mono); white-space: nowrap; }
.place-meta { margin: 0; color: var(--muted); font: 9px var(--mono); }
.place-actions { margin-top: auto; }
.place-link { color: var(--green); font-size: 10px; font-weight: 600; text-underline-offset: 2px; }
.map-source-note { margin-top: 16px; padding: 12px 14px; border-left: 2px solid #83a576; background: rgba(255,254,248,.65); }
.map-source-note p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.7; }
.map-source-note a { color: var(--green); text-underline-offset: 2px; }
.leaflet-container { font-family: var(--sans); background: #dfe8dc; }
.leaflet-control-attribution { font: 8px var(--mono) !important; }
.place-marker { display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--white); border-radius: 50%; background: var(--green); box-shadow: 0 2px 6px rgba(25,61,45,.35); }
.place-marker svg { width: 14px; height: 14px; fill: none; stroke: var(--white); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.place-marker.is-market { background: var(--map-market); }
.place-marker.is-wharf { background: var(--map-wharf); }
.place-marker.is-fuel { background: var(--map-fuel); }
.place-marker.is-services { background: var(--map-services); }
.place-marker.is-origin { background: var(--green-deep); box-shadow: 0 0 0 4px rgba(25,61,45,.22), 0 2px 6px rgba(25,61,45,.35); }
.place-popup { display: grid; gap: 4px; font-size: 12px; }
.place-popup strong { font-size: 13px; }
.place-popup .place-popup-meta { color: var(--muted); font: 9px var(--mono); }
.place-popup .place-popup-distance { color: var(--green); font: 9px var(--mono); }
.place-popup a { margin-top: 3px; color: var(--green); font-size: 11px; font-weight: 600; }
.leaflet-popup-content-wrapper { border-radius: 6px; }
.leaflet-popup-content { margin: 11px 13px; }
@media (max-width: 1000px) {
  .map-hero { grid-template-columns: 1fr; gap: 16px; }
  .map-controls { align-items: stretch; flex-direction: column; }
  .map-controls .location-tools { width: 100%; }
}
@media (max-width: 620px) {
  .map-hero { padding: 25px 0 17px; }
  .map-hero h1 { font-size: 32px; }
  .map-hero h1 em { white-space: normal; }
  .map-deck { font-size: 12px; }
  .nearest-strip { grid-template-columns: 1fr; }
  #place-map { height: 340px; }
  .place-list { grid-template-columns: 1fr; }
  .map-panel-note { flex-direction: column; gap: 3px; }
}

/* Trip planner, travel outlook & nearby lookup */
.trip-panel { display: grid; gap: 13px; margin: 0 0 16px; padding: 15px 17px 14px; border: 1px solid #ddcda9; border-radius: 8px; background: linear-gradient(112deg, #fdf8ec 0%, #f6efdc 100%); }
.trip-panel[hidden] { display: none; }
.trip-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.trip-kicker { display: block; margin-bottom: 3px; color: var(--amber); font: 8px var(--mono); }
.trip-title { font-size: 15px; font-weight: 600; line-height: 1.35; }
.trip-close { flex: 0 0 auto; padding: 6px 10px; color: #805226; border: 1px solid #d4b886; border-radius: 5px; background: rgba(255,254,248,.8); font: 9px var(--mono); cursor: pointer; transition: background .18s ease, border-color .18s ease; }
.trip-close:hover { border-color: #b99358; background: #fffef8; }
.trip-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.trip-stat { display: grid; gap: 2px; min-width: 96px; padding: 8px 12px; border: 1px solid #e4d8b5; border-radius: 6px; background: rgba(255,254,248,.85); }
.trip-stat small { color: #8a7a54; font: 8px var(--mono); }
.trip-stat strong { font-size: 14px; font-weight: 600; }
.trip-stat.is-ferry { border-color: #c9b27c; background: #fbf3dd; }
.trip-note { margin: 0; width: 100%; color: #8a7a54; font-size: 9px; line-height: 1.65; }
.trip-note a { color: #805226; text-underline-offset: 2px; }
.trip-weather { display: grid; gap: 8px; }
.trip-weather-heading { margin: 0; color: #6d6046; font-size: 11px; }
.trip-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.trip-day { display: grid; gap: 2px; justify-items: center; padding: 7px 4px; border: 1px solid #e4d8b5; border-radius: 6px; background: rgba(255,254,248,.8); text-align: center; }
.trip-day small { color: #8a7a54; font: 8px var(--mono); }
.trip-day strong { font-size: 12px; font-weight: 600; }
.trip-day span { color: #6d6046; font: 8px var(--mono); white-space: nowrap; }
.trip-day.is-best { border-color: #83a576; background: #eef5e3; }
.trip-day.is-best strong { color: var(--green); }
.place-actions { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.place-plan { padding: 0; color: var(--green); border: 0; background: none; font: 600 10px var(--sans); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.place-plan:hover { color: var(--green-deep); }
.place-popup .place-plan { margin-top: 4px; text-align: left; }
.place-marker.is-probe { background: #5b6459; }
.nearby-popup { display: grid; gap: 6px; min-width: 205px; }
.nearby-popup > strong { font-size: 13px; }
.nearby-row { display: flex; align-items: center; gap: 7px; width: 100%; padding: 5px 6px; border: 1px solid transparent; border-radius: 5px; background: none; text-align: left; cursor: pointer; --cat: var(--green); }
.nearby-row:hover { border-color: #dbe0d3; background: #f4f7ee; }
.nearby-row.is-market { --cat: var(--map-market); }
.nearby-row.is-wharf { --cat: var(--map-wharf); }
.nearby-row.is-fuel { --cat: var(--map-fuel); }
.nearby-row.is-services { --cat: var(--map-services); }
.nearby-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--cat); }
.nearby-name { min-width: 0; flex: 1 1 auto; font-size: 11px; line-height: 1.3; }
.nearby-distance { flex: 0 0 auto; color: var(--green); font: 9px var(--mono); }
.nearby-note { color: var(--muted); font-size: 9px; line-height: 1.5; }
@media (max-width: 850px) {
  .trip-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .trip-head { flex-direction: column; gap: 8px; }
  .trip-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Market pulse: SBS prices + market-day weather */
.pulse-section { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; margin: 18px 0 0; }
.pulse-card { display: flex; min-width: 0; flex-direction: column; padding: 16px 18px 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,254,248,.83); }
.pulse-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.pulse-head .eyebrow { margin-bottom: 3px; }
.pulse-head h2 { margin: 0; font-size: 18px; font-weight: 600; }
.pulse-period { color: var(--green); font: 9px var(--mono); white-space: nowrap; }
.pulse-note { margin: 0 0 10px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.pulse-source { margin: auto 0 0; padding-top: 9px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.pulse-source a { color: var(--green); text-underline-offset: 2px; }
.price-table { display: grid; gap: 4px; }
.price-row { display: grid; grid-template-columns: minmax(0, 1.3fr) auto auto auto; align-items: baseline; gap: 10px; padding: 6px 8px; border-radius: 5px; }
.price-row:nth-child(odd) { background: #f6f7ec; }
.price-name { min-width: 0; font-size: 12px; font-weight: 600; }
.price-value { color: var(--green-deep); font-size: 13px; font-weight: 700; white-space: nowrap; }
.price-unit { margin-left: 4px; color: var(--muted); font: 8px var(--mono); }
.price-change { color: var(--muted); font: 9px var(--mono); white-space: nowrap; }
.price-change.is-up { color: #3e7a48; }
.price-change.is-down { color: var(--amber); }
.price-period { color: var(--muted); font: 9px var(--mono); white-space: nowrap; }
.weather-spotlight { display: grid; gap: 6px; }
.spotlight-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 5px; background: #f6f7ec; --cat: var(--green); }
.spotlight-row.is-market { --cat: var(--map-market); }
.spotlight-row.is-wharf { --cat: var(--map-wharf); }
.spotlight-name { min-width: 0; overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.spotlight-meta { color: #586256; font: 9px var(--mono); white-space: nowrap; }
.place-weather { margin: 0; color: #586256; font: 9px var(--mono); }
@media (max-width: 850px) {
  .pulse-section { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .spotlight-row { grid-template-columns: 10px minmax(0, 1fr); row-gap: 2px; }
  .spotlight-meta { grid-column: 2; }
}

/* Farm desk: tide watch */
.tide-panel { display: grid; gap: 12px; }
.tide-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tide-next-card { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid #cadbd8; border-radius: 6px; background: linear-gradient(112deg, #f5f8f1 0%, #eaf3f1 100%); }
.tide-next-card small { color: #386f72; font: 8px var(--mono); }
.tide-next-card strong { font-size: 17px; font-weight: 600; }
.tide-next-card span { color: var(--muted); font: 8px var(--mono); }
.tide-next-card.is-low strong { color: #55706f; }
.tide-rows { display: grid; gap: 4px; }
.tide-day { margin: 8px 0 2px; color: var(--muted); font: 8px var(--mono); }
.tide-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 5px 8px; border-radius: 5px; }
.tide-row:nth-child(odd) { background: #f6f7ec; }
.tide-kind { font: 8px var(--mono); letter-spacing: .4px; }
.tide-kind.is-high { color: #2f6f7a; }
.tide-kind.is-low { color: var(--amber); }
.tide-time { font-size: 13px; font-weight: 600; }
.tide-height { color: var(--muted); font: 9px var(--mono); }
@media (max-width: 620px) {
  .tide-next { grid-template-columns: 1fr; }
}

/* Home / landing page */
.home-hero { max-width: 780px; padding: 44px 0 8px; }
.home-hero h1 { margin: 0 0 12px; font-size: 44px; }
.home-deck { max-width: 620px; margin: 0 0 20px; color: #586256; font-size: 14px; line-height: 1.65; }
.home-search { position: relative; max-width: 640px; }
.home-search-box { display: flex; height: 52px; align-items: center; gap: 11px; padding: 0 15px; color: var(--green); border: 1px solid #cdd8c8; border-radius: 8px; background: var(--white); box-shadow: 0 4px 14px rgba(25,61,45,.07); transition: border-color .18s ease, box-shadow .18s ease; }
.home-search-box:focus-within { border-color: #557c58; outline: 3px solid rgba(85,124,88,.15); outline-offset: 2px; box-shadow: 0 6px 18px rgba(25,61,45,.1); }
.home-search-box svg { width: 19px; height: 19px; flex: 0 0 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; }
.home-search-box input { width: 100%; min-width: 0; padding: 0; color: var(--ink); border: 0; outline: 0; background: transparent; font-size: 14px; }
.home-search-box input::placeholder { color: #92958a; }
.home-search-results { position: absolute; top: calc(100% + 7px); right: 0; left: 0; z-index: 40; max-height: 380px; overflow: auto; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); box-shadow: 0 14px 30px rgba(25,61,45,.16); }
.home-search-results[hidden] { display: none; }
.home-search-group + .home-search-group { margin-top: 7px; padding-top: 7px; border-top: 1px solid #eef0e4; }
.home-search-heading { margin: 0 0 4px; padding: 0 8px; color: var(--muted); font: 8px var(--mono); }
.home-search-item { display: grid; gap: 1px; padding: 6px 8px; border-radius: 5px; text-decoration: none; }
.home-search-item:hover, .home-search-item:focus-visible { background: #f4f7ee; }
.home-search-title { color: var(--ink); font-size: 12px; font-weight: 600; }
.home-search-meta { color: var(--muted); font: 8px var(--mono); }
.home-search-empty { margin: 0; padding: 8px; color: var(--muted); font-size: 11px; }
.home-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin: 26px 0 0; }
.home-card { display: flex; min-width: 0; flex-direction: column; padding: 15px 16px 13px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,254,248,.83); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.home-card:hover { transform: translateY(-2px); border-color: #bdcbbb; box-shadow: 0 6px 17px rgba(25,61,45,.07); }
.home-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.home-card-head .eyebrow { margin: 0; }
.home-stamp { color: var(--green); font: 8px var(--mono); white-space: nowrap; }
.home-card h2 { margin: 2px 0 9px; font-size: 16px; font-weight: 600; }
.home-body { display: grid; gap: 5px; margin-bottom: 11px; }
.home-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.home-row-label { color: var(--muted); font: 8px var(--mono); }
.home-row-value { min-width: 0; font-size: 12px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.home-row-value.is-good { color: #3e7a48; }
.home-row-value.is-alert { color: #b84638; }
.home-row-value.is-muted { color: var(--muted); font-weight: 400; }
.home-delta { margin-left: 6px; font: 9px var(--mono); }
.home-delta.is-up { color: #3e7a48; }
.home-delta.is-down { color: var(--amber); }
.home-weather-headline { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 6px; }
.home-temp { font-size: 34px; font-weight: 600; line-height: 1; }
.home-cond { color: var(--green); font-size: 12px; }
.home-news-item { display: grid; gap: 1px; padding: 5px 0; text-decoration: none; }
.home-news-item + .home-news-item { border-top: 1px solid #eef0e4; }
.home-news-title { color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.35; }
.home-news-item:hover .home-news-title { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
.home-news-meta { color: var(--muted); font: 8px var(--mono); }
.home-link { margin-top: auto; color: var(--green); font-size: 10px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.home-link:hover { color: var(--green-deep); }
@media (max-width: 1000px) {
  .home-hero { padding-top: 34px; }
  .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .home-hero h1 { font-size: 32px; }
  .home-deck { font-size: 12px; }
  .home-grid { grid-template-columns: 1fr; }
}

/* Farm desk */
.farm-shell { background: radial-gradient(ellipse at 24% 3%, rgba(217,232,141,.2), transparent 30%), var(--paper); }
.farm-main { padding-bottom: 24px; }
.farm-deck { max-width: 520px; margin: 12px 0 0; color: #586256; font-size: 13px; line-height: 1.65; }
.farm-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: 0 13px; }
.farm-main .hub-section { padding-top: 27px; }
.farm-panel { padding: 15px 16px 14px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,254,248,.83); }
.farm-loading { margin: 0; color: var(--muted); font-size: 11px; }
.farm-error { margin: 0; padding: 11px 13px; color: #7a4a3f; border: 1px solid #e0c8bd; border-radius: 6px; background: #f9ede6; font-size: 11px; line-height: 1.55; }
.farm-intro { margin: 0 0 12px; color: var(--muted); font-size: 11px; }
.farm-stamp { margin: 10px 0 0; color: #898b7e; font: 8px var(--mono); line-height: 1.6; }
.farm-disclaimer { margin: 10px 0 0; color: #898b7e; font-size: 9px; line-height: 1.55; }
.farm-note { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.farm-note[hidden] { display: none; }
.farm-nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; color: var(--green); border: 1px solid #d4ddce; border-radius: 5px; background: #f0f5e9; font: 9px var(--mono); text-decoration: none; white-space: nowrap; transition: background .18s ease, border-color .18s ease; }
.farm-nav-link:hover { border-color: #a7b99f; background: #e3edda; }
.farm-nav-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }

.alert-list { display: grid; gap: 9px; }
.alert-item { display: grid; gap: 6px; padding: 12px 13px; border: 1px solid var(--line); border-left-width: 3px; border-radius: 6px; background: var(--white); }
.alert-item.is-red { border-left-color: #b84638; }
.alert-item.is-orange { border-left-color: var(--amber); }
.alert-item.is-green { border-left-color: #3f6b4f; }
.alert-item.is-watch { border-left-color: #386f72; }
.alert-top { display: flex; align-items: center; gap: 8px; }
.alert-chip { padding: 3px 7px; color: var(--white); border-radius: 3px; font: 8px var(--mono); letter-spacing: .05em; }
.alert-chip.is-red { background: #b84638; }
.alert-chip.is-orange { background: var(--amber); }
.alert-chip.is-green { background: #3f6b4f; }
.alert-chip.is-watch { background: #386f72; }
.alert-kind { display: inline-flex; align-items: center; gap: 4px; color: #386f72; font: 8px var(--mono); }
.alert-kind svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.alert-source { margin-left: auto; color: var(--muted); font: 8px var(--mono); }
.alert-title { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.4; }
.alert-detail { margin: 0; color: #687064; font-size: 11px; line-height: 1.55; }
.alert-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; color: var(--muted); font: 9px var(--mono); }
.alert-foot a { display: inline-flex; min-height: 32px; align-items: center; color: var(--green); font-weight: 600; text-decoration: none; }
.alert-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.alert-clear { display: grid; gap: 4px; padding: 13px 14px; color: #2f5c3b; border: 1px solid #c8ddbf; border-radius: 6px; background: var(--green-light); }
.alert-clear strong { font-size: 13px; font-weight: 600; }
.alert-clear span { color: #4e6f56; font: 9px var(--mono); }

.season-enso { display: grid; gap: 8px; }
.season-chip { display: inline-flex; width: max-content; align-items: center; padding: 4px 10px; border-radius: 999px; font: 9px var(--mono); }
.season-chip.is-warm { color: #855526; border: 1px solid #d4b886; background: #f8f1df; }
.season-chip.is-cool { color: #2f6570; border: 1px solid #b9d2d3; background: #e7f1ef; }
.season-chip.is-neutral { color: #2f5c3b; border: 1px solid #c8ddbf; background: var(--green-light); }
.season-chip:empty, .farm-chip:empty { display: none; }
.season-enso-label { margin: 0; font-size: 14px; font-weight: 600; }
.season-enso-note { margin: 0; color: #687064; font-size: 11px; line-height: 1.6; }
.season-rain { display: grid; gap: 4px; margin-top: 12px; padding-top: 11px; border-top: 1px solid #e7e8dc; }
.season-rain-value { margin: 0; font-size: 32px; font-weight: 500; line-height: 1.05; }
.season-rain-value small { margin-left: 4px; color: var(--muted); font: 11px var(--mono); }
.season-rain-window { margin: 0; color: var(--green); font: 9px var(--mono); }
.season-rain-compare { margin: 5px 0 0; color: #687064; font-size: 11px; line-height: 1.55; }
.season-bars { display: flex; align-items: flex-end; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e7e8dc; }
.season-bar { display: grid; min-width: 0; flex: 1 1 0; gap: 5px; }
.season-bar-track { display: flex; height: 64px; align-items: flex-end; }
.season-bar-fill { width: 100%; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #83a576, var(--green)); }
.season-bar-label { color: var(--muted); font: 8px var(--mono); text-align: center; }

.soil-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-bottom: 4px; }
.soil-values .farm-loading { grid-column: 1 / -1; }
.soil-values small { display: block; margin-bottom: 4px; color: var(--muted); font: 8px var(--mono); }
.soil-values strong { font-size: 15px; font-weight: 600; }
.farm-notes { display: grid; gap: 6px; margin: 11px 0 0; padding: 11px 0 0; border-top: 1px solid #e7e8dc; list-style: none; }
.farm-notes[hidden] { display: none; }
.farm-notes li { position: relative; padding-left: 15px; color: #45503f; font-size: 10.5px; line-height: 1.6; }
.farm-notes li::before { position: absolute; top: -1px; left: 1px; color: var(--green); font-weight: 700; content: '•'; }
.farm-links { display: flex; flex-wrap: wrap; gap: 7px 16px; margin-top: 11px; padding-top: 11px; border-top: 1px solid #e7e8dc; }
.farm-links a, .farm-links-list a { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: 10px; font-weight: 600; text-decoration: none; }
.farm-links a:hover, .farm-links-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.farm-links-list { display: grid; gap: 7px; margin: 11px 0 0; padding: 11px 0 0; border-top: 1px solid #e7e8dc; list-style: none; }
.farm-links-list:empty { display: none; }
.farm-links-list a { min-height: 32px; }

.windows-rows { display: grid; gap: 14px; }
.window-row { display: grid; gap: 8px; }
.window-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.window-label { font-size: 13px; font-weight: 600; }
.window-best { color: var(--green); font: 9px var(--mono); text-align: right; }
.window-chips { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.farm-day { display: inline-flex; min-width: 44px; min-height: 44px; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--white); font-size: 10px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.farm-day .day-dot { width: 8px; height: 8px; border-radius: 50%; background: #898b7e; }
.farm-day.is-good { border-color: #b9d3ad; background: #eef5e3; }
.farm-day.is-good .day-dot { background: #3f6b4f; }
.farm-day.is-fair { border-color: #e0cba3; background: #faf3e2; }
.farm-day.is-fair .day-dot { background: var(--amber); }
.farm-day.is-poor { border-color: #dcc3bd; background: #f7ece9; }
.farm-day.is-poor .day-dot { background: #b84638; }
.farm-day[aria-expanded="true"] { outline: 3px solid rgba(85,124,88,.28); outline-offset: 1px; }
.window-reason { margin: 0; padding: 9px 11px; color: #45503f; border-left: 2px solid #83a576; background: rgba(255,254,248,.7); font-size: 10.5px; line-height: 1.6; }
.window-reason[hidden] { display: none; }
.windows-legend { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 13px; padding-top: 11px; border-top: 1px solid #e7e8dc; color: var(--muted); font: 9px var(--mono); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.legend-dot.is-good { background: #3f6b4f; }
.legend-dot.is-fair { background: var(--amber); }
.legend-dot.is-poor { background: #b84638; }

.pest-head { display: flex; align-items: center; gap: 8px; }
.farm-chip { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; font: 9px var(--mono); }
.farm-chip.is-loading { color: var(--muted); border: 1px solid var(--line); background: #eeeee2; }
.farm-chip.is-elevated { color: var(--white); background: #b84638; }
.farm-chip.is-watch { color: var(--white); background: #386f72; }
.farm-chip.is-normal { color: #2f5c3b; border: 1px solid #c8ddbf; background: var(--green-light); }
.pest-message { margin: 10px 0 0; font-size: 12px; line-height: 1.6; }

.freshness-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.freshness-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 1px solid #edede3; border-radius: 5px; background: var(--white); }
.freshness-label { min-width: 0; font-size: 11px; font-weight: 600; }
.freshness-age { color: var(--muted); font: 9px var(--mono); white-space: nowrap; }
.freshness-row.is-stale { opacity: .75; }
.freshness-row.is-stale .freshness-age { color: var(--amber); }
.farm-attribution { margin: 12px 0 0; padding-top: 11px; border-top: 1px solid #e7e8dc; color: var(--muted); font-size: 9px; line-height: 1.7; }
.farm-attribution a { color: var(--green); text-underline-offset: 2px; }

@media (max-width: 920px) {
  .farm-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .farm-nav-link { padding: 7px; font-size: 8px; }
  .farm-nav-link svg { width: 14px; height: 14px; }
  .farm-deck { font-size: 12px; }
  .farm-panel { padding: 13px 13px 12px; }
  .soil-values { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; }
  .season-rain-value { font-size: 27px; }
  .season-bar-track { height: 52px; }
  .alert-top { flex-wrap: wrap; }
  .alert-source { margin-left: 0; }
  .freshness-row { flex-direction: column; gap: 3px; }
}

/* Farm desk states */
.alert-panel .farm-loading, .windows-rows .farm-loading { padding: 2px 0 6px; }
.freshness-empty { padding: 8px 2px; color: var(--muted); font-size: 11px; }