:root{--ink:#17323b;--paper:#fcfaf5;--muted:#687370;--line:#d8ddd7;--tomato:#d8523c;--teal:#086f6e;--sun:#f0bd3e;--panel:#fffdf8;--mono:"DM Mono",monospace;--body:"Manrope",sans-serif;--display:"Fraunces",serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);letter-spacing:-.02em}.shell{max-width:930px;margin:0 auto;padding:30px 24px 55px}.topbar{display:flex;align-items:end;justify-content:space-between;gap:24px;padding:0 2px 26px;border-bottom:1px solid var(--line)}.eyebrow{margin:0 0 5px;color:var(--teal);font:10px var(--mono);letter-spacing:.12em}.topbar h1{font:600 31px/1 var(--display);letter-spacing:-.05em;margin:0}.top-actions{display:flex;align-items:center;gap:16px}.status{font:10px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);display:flex;align-items:center;gap:7px;white-space:nowrap}.status i{width:8px;height:8px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 4px rgba(240,189,62,.18)}.status.live i{background:#2da85e;box-shadow:0 0 0 4px rgba(45,168,94,.15)}.status.error i{background:var(--tomato);box-shadow:0 0 0 4px rgba(216,82,60,.14)}button{font:inherit}.refresh{border:1px solid var(--ink);border-radius:99px;background:transparent;color:var(--ink);font-weight:800;font-size:12px;padding:10px 14px;cursor:pointer;transition:.2s}.refresh:hover,.refresh:focus-visible{background:var(--ink);color:var(--paper)}.refresh:focus-visible,.station-toggle:focus-visible,a:focus-visible{outline:3px solid var(--sun);outline-offset:3px}.refresh[disabled]{cursor:wait;opacity:.62}.stations{padding-top:22px}.station-list{display:grid;gap:9px}.loading{margin:32px 0;text-align:center;color:var(--muted);font-size:13px}.error-message{color:var(--tomato)}.station-card{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:0 8px 20px rgba(23,50,59,.035)}.station-toggle{width:100%;min-height:84px;border:0;border-left:6px solid var(--accent);background:transparent;color:inherit;padding:14px 20px;display:grid;grid-template-columns:minmax(205px,1.45fr) minmax(220px,1fr) auto 18px;align-items:center;gap:18px;text-align:left;cursor:pointer;transition:background .18s}.station-toggle:hover{background:#f7f4ed}.station-identity{display:grid;gap:5px;min-width:0}.station-identity strong{font:600 clamp(19px,2.4vw,25px)/1.05 var(--display);letter-spacing:-.045em}.station-identity small,.station-summary small{font:9px var(--mono);letter-spacing:.025em;color:var(--muted)}.station-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;font:600 13px/1.2 var(--display);letter-spacing:-.025em}.station-summary span{display:grid;gap:3px}.current-temperature{font:650 clamp(34px,4vw,48px)/.8 var(--display);letter-spacing:-.085em;white-space:nowrap}.current-temperature small{font:700 12px var(--body);letter-spacing:-.03em;vertical-align:top;margin-left:3px}.toggle-icon{font-size:22px;line-height:1;transition:transform .2s}.station-toggle[aria-expanded="true"] .toggle-icon{transform:rotate(180deg)}.station-detail[hidden]{display:none}.measurements{display:grid;grid-template-columns:repeat(6,1fr);margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.measurements div{padding:15px 13px 16px;border-right:1px solid var(--line);min-width:0}.measurements div:last-child{border:0}.measurements dt{color:var(--muted);font-size:10px;margin-bottom:6px}.measurements dd{margin:0;font:600 16px/1.05 var(--display);letter-spacing:-.035em;overflow-wrap:anywhere}.charts{display:grid;grid-template-columns:1fr 1fr;gap:0}.chart{padding:20px 25px 16px;min-width:0}.chart+.chart{border-left:1px solid var(--line)}.chart-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.chart h3{margin:0;font-size:12px;font-weight:800}.chart-heading span,.chart-empty span{font:10px var(--mono);color:var(--muted);white-space:nowrap}.chart svg{width:100%;height:118px;display:block;margin-top:10px;overflow:visible}.baseline{stroke:var(--line);stroke-width:1}.chart-axis{display:flex;justify-content:space-between;margin-top:2px;color:var(--muted);font:9px var(--mono)}.chart-empty{display:flex;align-items:center;justify-content:space-between;min-height:176px}.chart-empty p{font:600 28px var(--display);margin:0;color:var(--muted)}.rain-chart svg{height:auto;aspect-ratio:560/180}.rain-grid{stroke:#e6e4de;stroke-width:1}.rain-axis{stroke:#73807b;stroke-width:1}.rain-bar{fill:#267db5}.rain-value{font:8px var(--mono);fill:#17323b}.rain-x-label,.rain-y-label,.rain-unit{font:8px var(--mono);fill:#687370}.station-footer{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:12px 27px;background:#f6f3ec;color:var(--muted);font:9px var(--mono);letter-spacing:.01em}.station-footer a{color:var(--ink);font-weight:500;text-decoration-color:var(--accent);text-underline-offset:3px;white-space:nowrap}@media(max-width:720px){.shell{padding:20px 14px 35px}.topbar{align-items:start;padding-bottom:18px}.topbar h1{font-size:27px}.top-actions{align-items:end;flex-direction:column;gap:8px}.station-toggle{grid-template-columns:1fr auto 16px;gap:11px;padding:14px 15px}.station-summary{grid-column:1/4;grid-row:2;grid-template-columns:repeat(3,1fr);padding-top:4px}.measurements{grid-template-columns:repeat(3,1fr)}.measurements div:nth-child(3){border-right:0}.measurements div:nth-child(-n+3){border-bottom:1px solid var(--line)}.charts{grid-template-columns:1fr}.chart+.chart{border-left:0;border-top:1px solid var(--line)}.station-footer{padding:11px 18px}}@media(max-width:430px){.topbar{gap:12px}.status{font-size:8px}.refresh{padding:9px 11px}.station-summary{font-size:12px}.measurements{grid-template-columns:repeat(2,1fr)}.measurements div{border-bottom:1px solid var(--line)}.measurements div:nth-child(3){border-right:1px solid var(--line)}.measurements div:nth-child(even){border-right:0}.measurements div:nth-last-child(-n+2){border-bottom:0}.chart{padding:18px}.station-footer{align-items:flex-start;flex-direction:column;gap:7px}}

/* Compact cards are scanned frequently; prioritize the clearer sans face and labels. */
.station-identity strong {
  font-family: var(--body);
  font-weight: 800;
  letter-spacing: -0.035em;
}
.station-identity small {
  font-size: 10px;
  font-weight: 600;
  color: #53615d;
}
.station-summary {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  gap: 16px;
}
.station-summary small {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.055em;
  color: #53615d;
}
.station-summary span { gap: 5px; }
.current-temperature {
  font-family: var(--body);
  font-weight: 800;
  letter-spacing: -0.07em;
}
.station-toggle { min-height: 92px; }
@media (max-width: 430px) {
  .station-summary { gap: 8px; }
}

/* Mobile-first chart density: keep the entire station readable in one pass. */
.temperature-reference line{stroke:#d8ddd7;stroke-width:1}.temperature-reference text{font:10px var(--mono);fill:#53615d}.temperature-average line{stroke:#91aaa5;stroke-dasharray:4 4}.temperature-average text{fill:#086f6e}.temperature-axis{stroke:#73807b;stroke-width:1.25}.rain-chart svg{height:auto;aspect-ratio:440/150}.rain-axis{stroke-width:1.25}.rain-value{font:11px var(--mono);font-weight:500;fill:#17323b}.rain-x-label,.rain-y-label,.rain-unit{font:10px var(--mono);fill:#53615d}.rain-unit{font-weight:500}
@media(max-width:720px){.chart{padding:10px 14px 8px}.chart svg{margin-top:5px}.temperature-chart svg{height:auto;aspect-ratio:440/220}.rain-chart svg{aspect-ratio:440/220}.station-footer{padding:9px 14px}}
@media(max-width:430px){.measurements{grid-template-columns:repeat(3,1fr)}.measurements div{padding:12px 9px 13px;border-bottom:1px solid var(--line)}.measurements div:nth-child(3){border-right:0}.measurements div:nth-child(even){border-right:1px solid var(--line)}.measurements div:nth-child(3n){border-right:0}.measurements div:nth-last-child(-n+3){border-bottom:0}.chart{padding:9px 14px 7px}.chart-heading{gap:6px}.chart-heading span{font-size:8px}.temperature-reference text{font-size:9px}}

/* SVG type needs to compensate for its viewBox scale on phone screens. */
.chart-axis{font-size:11px}.temperature-reference text{font-size:15px;font-weight:500}.rain-value{font-size:14px;font-weight:700}.rain-x-label,.rain-y-label,.rain-unit{font-size:13px;font-weight:500}.temperature-chart .chart-heading{align-items:flex-start}.temperature-chart .chart-heading span{font-size:11px;line-height:1.35;text-align:right;white-space:normal}
@media(max-width:430px){.chart-heading span{font-size:10px}.temperature-reference text{font-size:14px}.rain-value{font-size:13px}.rain-x-label,.rain-y-label,.rain-unit{font-size:12px}.chart-axis{font-size:10px}.temperature-chart .chart-heading span{font-size:10px}}

/* Reordering stays unobtrusive until a user reaches the dedicated handle. */
.station-card{position:relative;transition:opacity .16s,transform .16s}.station-card.is-dragging{opacity:.48}.station-card.is-keyboard-dragging{outline:2px dashed var(--teal);outline-offset:3px}.station-drag-handle{position:absolute;z-index:1;top:10px;right:10px;border:0;border-radius:4px;background:transparent;color:var(--muted);cursor:grab;font:700 15px/1 var(--mono);letter-spacing:-3px;padding:6px 7px;touch-action:none}.station-drag-handle:active{cursor:grabbing}.station-drag-handle:focus-visible{outline:3px solid var(--sun);outline-offset:3px}.station-toggle{padding-right:48px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.station-order-help{margin:5px 2px 0;color:var(--muted);font:10px/1.45 var(--mono)}