/* Your forecast (/forecast/, 2026-10-26). Its own file so the page doesn't touch the shared style.css.
   Temperature line in the accent, rain chance bars green (the site's impact colour for rain).
   Dark mode is the site toggle only (data-theme), as in style.css. */
:root{
  --fc-temp: var(--pig);
  --fc-pop:  #2f8f46;
}
:root[data-theme="dark"]{ --fc-pop: #6fc46f; }

.fc-wrap{ max-width:900px; }
.section.fc-top{ padding-bottom:16px; position:relative; z-index:30; }  /* the suggestions list sits over everything below */
main.fc{ z-index:3; }  /* style.css gives main and .footer both z-index 2; the list must clear the footer */
.fc-section{ padding-top:0; }

.fc-find{ display:flex; gap:10px; align-items:stretch; margin:18px 0 0; flex-wrap:wrap; }
.fc-box{ position:relative; flex:1 1 320px; min-width:0; }
.fc-box input{ width:100%; box-sizing:border-box; font:inherit; font-size:17px; padding:12px 16px; min-height:48px;
  border:1px solid var(--line-2); border-radius:12px; background:var(--bg); color:var(--ink); }
.fc-box input:focus{ outline:2px solid var(--sky-deep); outline-offset:1px; }
.fc-list{ position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:40; margin:0; padding:4px; list-style:none;
  background:var(--bg); border:1px solid var(--line-2); border-radius:12px; box-shadow:0 10px 30px var(--shadow); }
.fc-list li{ padding:11px 12px; border-radius:8px; cursor:pointer; font-size:16px; color:var(--ink); }
.fc-list li.on, .fc-list li:hover{ background:var(--panel-2); }
.fc-here{ display:inline-flex; align-items:center; gap:8px; min-height:48px; white-space:nowrap; }
.fc-here svg{ width:18px; height:18px; }
.fc-msg{ margin:10px 0 0; min-height:1.4em; font-size:14px; color:var(--ink-2); }

.fc-now{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px 20px; }
.fc-now-main{ display:flex; align-items:center; gap:18px; min-width:0; }
.fc-now-t{ margin:0; font-family:var(--font-display); font-size:56px; font-weight:700; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.fc-now-sky{ margin:0; font-size:20px; font-weight:600; color:var(--ink); }
.fc-now-sub{ margin:4px 0 0; font-size:14px; color:var(--ink-2); }
.fc-now-at{ margin:0; font-size:13px; color:var(--ink-3); }

.fc-block{ margin:28px 0 0; }
.fc-h2{ font-family:var(--font-display); font-size:22px; margin:0 0 8px; }
.fc-note{ margin:8px 0 0; font-size:13px; color:var(--ink-3); max-width:70ch; }

.fc-chart{ position:relative; }
.fc-chart svg{ display:block; overflow:visible; }
.fc-grid{ stroke:var(--line); stroke-width:1; }
.fc-base{ stroke:var(--line-2); stroke-width:1; }
.fc-mid{ stroke:var(--line-2); stroke-width:1; stroke-dasharray:3 3; }
.fc-ax{ font-size:11px; fill:var(--ink-3); }
.fc-day{ font-size:12px; font-weight:600; fill:var(--ink-2); }
.fc-pt{ font-size:12px; font-weight:700; fill:var(--ink); }
.fc-temp{ fill:none; stroke:var(--fc-temp); stroke-width:2.5; stroke-linejoin:round; }
.fc-pop{ fill:var(--fc-pop); }
.fc-guide{ stroke:var(--ink-3); stroke-width:1; stroke-dasharray:3 3; }
.fc-dot{ fill:var(--fc-temp); stroke:var(--bg); stroke-width:2; }
.fc-tip{ position:absolute; top:0; pointer-events:none; background:var(--bg); border:1px solid var(--line-2); border-radius:8px;
  padding:6px 9px; font-size:13px; line-height:1.4; color:var(--ink); box-shadow:0 4px 14px var(--shadow); white-space:nowrap; z-index:2; }
.fc-legend{ display:flex; flex-wrap:wrap; gap:6px 16px; margin:6px 0 0; font-size:13px; color:var(--ink-2); }
.fc-legend i{ display:inline-block; margin-right:6px; vertical-align:3px; }
.fc-legend .k-t{ width:14px; height:3px; background:var(--fc-temp); }
.fc-legend .k-p{ width:6px; height:12px; background:var(--fc-pop); border-radius:1px; vertical-align:-1px; }

.fc-days{ list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.fc-days li{ display:grid; grid-template-columns:110px 1fr 104px 150px; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); }
.fc-days li:last-child{ border-bottom:0; }
.fc-dn b{ display:block; font-size:15px; color:var(--ink); }
.fc-dn span{ font-size:12px; color:var(--ink-3); }
.fc-dsky{ font-size:15px; color:var(--ink-2); min-width:0; }
.fc-gust{ display:inline-block; margin-left:8px; font-size:12px; font-weight:600; color:var(--sky-deep); }
.fc-dt{ font-variant-numeric:tabular-nums; text-align:right; }
.fc-dt .hi{ font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--ink); }
.fc-dt .lo{ margin-left:10px; font-size:16px; color:var(--ink-3); }
.fc-dp{ display:flex; gap:12px; justify-content:flex-end; font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums; }

/* NWS alerts in force at the spot, colour from hazards-now.json (the /hazards/ legend's) */
.fc-alerts{ display:grid; gap:8px; margin:0 0 14px; }
.fc-alert{ display:block; padding:10px 14px; border-radius:12px; border:1px solid var(--line-2); border-left:6px solid var(--al);
  background:var(--panel); color:var(--ink); text-decoration:none; }
.fc-alert b{ display:block; font-size:16px; }
.fc-alert span{ font-size:13px; color:var(--ink-2); }
.fc-rec{ display:block; margin-top:3px; font-size:12px; font-weight:600; color:var(--pig); }
.fc-cnote{ margin:0 0 10px; font-size:14px; color:var(--ink-2); }
.fc-ctiles{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.fc-ctile{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 12px; min-width:0; }
.fc-ctile .l{ margin:0; font-size:12px; font-weight:600; color:var(--ink-2); }
.fc-ctile .v{ margin:2px 0 0; font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.fc-ctile .s{ margin:1px 0 0; font-size:12px; color:var(--ink-3); }
.fc-cline{ margin:10px 0 0; font-size:14px; color:var(--ink-2); max-width:70ch; }

@media (max-width: 640px){
  .fc-ctiles{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .fc-days li{ grid-template-columns:1fr auto; grid-template-areas:"n t" "s p"; row-gap:4px; padding:12px 14px; }
  .fc-dn{ grid-area:n; } .fc-dt{ grid-area:t; } .fc-dsky{ grid-area:s; font-size:14px; } .fc-dp{ grid-area:p; }
  .fc-now-t{ font-size:46px; }
  .fc-here{ flex:1 1 100%; justify-content:center; }
}