.masthead-weather{min-width:0;align-self:start}
.weather-strip{display:flex;width:408px;max-width:100%;overflow:hidden;border:1px solid var(--rule);border-radius:6px;background:var(--surface);color:var(--ink);font-family:var(--font-sans);font-variant-numeric:tabular-nums}
.topbar .weather-day{display:block;flex:1;min-width:0;min-height:50px;padding:5px 6px;border:0;border-right:1px solid var(--rule);border-radius:0;background:transparent;color:var(--ink);font-family:var(--font-sans);font-size:11px;font-weight:400;letter-spacing:normal;text-transform:none;text-align:left}
.weather-day-top,.weather-day-bottom,.weather-day-bottom>span{display:flex;align-items:center}
.weather-day-top{gap:3px;flex-wrap:wrap;white-space:nowrap}
.weather-day-label{flex-shrink:0;font-size:10px;font-weight:600}
.weather-temperatures{flex-shrink:0;font-size:14px;font-weight:600;white-space:nowrap}
.weather-low{font-weight:400;color:var(--muted)}
.weather-day-bottom{flex-wrap:wrap;justify-content:space-between;gap:3px;margin-top:4px;white-space:nowrap;font-size:10px}
.weather-day-bottom>span{gap:1px}
.weather-day-bottom small{font:inherit}
.weather-icon{display:inline-block;flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.weather-icon-sun,.weather-icon-rise{color:#b06f00}
.weather-icon-cloud,.weather-icon-partly,.weather-icon-fog,.weather-icon-wind{color:#5b6f86}
.weather-icon-partly circle{stroke:#b06f00;fill:#f6dea1}
.weather-icon-rain,.weather-icon-drop,.weather-icon-snow{color:#1f5fa8}
.weather-icon-storm{color:#5a3d78}
.weather-icon-set{color:#a4471f}
.weather-day-bottom .weather-icon{width:11px;height:11px}
.weather-sun{display:grid;align-content:center;gap:2px;flex:0 0 68px;padding:4px 6px;font-size:10px;white-space:nowrap}
.weather-sun>span{display:flex;gap:3px;align-items:center}
.weather-sun .weather-icon{width:12px;height:12px}
.weather-place{font-size:9px;color:var(--muted)}
.weather-unavailable{display:block;padding:8px 0;font:12px var(--font-sans);color:var(--muted)}
.topbar:has(.masthead-weather){grid-template-columns:minmax(200px,1fr) 408px minmax(0,auto) auto;gap:12px}
.topbar .weather-day:focus-visible{outline:2px solid var(--navy);outline-offset:-3px}
.weather-stale .weather-place{display:block;white-space:normal;font-size:10px;line-height:1.15}
.weather-details{max-width:680px;min-width:0}
.weather-details .modal-heading p{font:13px var(--font-sans);color:var(--muted);margin:6px 0}
.weather-detail-summary{display:flex;gap:16px;align-items:center;margin:14px 0}
.weather-detail-summary>.weather-icon{width:42px;height:42px}
.weather-detail-summary strong{font:600 32px var(--font-display)}
.weather-detail-summary p{margin:5px 0;font-size:14px}
.weather-metrics{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;margin:12px 0 22px}
.weather-metrics>div{padding:10px 0;border-bottom:1px solid var(--rule)}
.weather-metrics dt{font-size:12px;font-family:var(--font-sans);color:var(--muted);letter-spacing:normal;text-transform:none}
.weather-metrics dt .weather-icon{width:14px;height:14px}
.weather-metrics dd{margin:5px 0 0;font-size:16px;font-weight:600}
.weather-hourly{overflow:auto;max-height:300px;margin:10px 0;overscroll-behavior:contain}
.weather-hourly table{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.weather-hourly caption{text-align:left;font:12px var(--font-sans);padding-bottom:8px;color:var(--muted)}
.weather-hourly :is(th,td){padding:8px 6px;text-align:right;border-bottom:1px solid var(--rule)}
.weather-hourly th{font:500 12px var(--font-sans);letter-spacing:normal;text-transform:none}
.weather-hourly th:first-child{text-align:left}
.weather-hourly thead{position:sticky;top:0;background:var(--surface)}
.weather-note{font-size:12px;color:var(--muted);line-height:1.5}
@media(hover:hover){.topbar .weather-day:hover{background:var(--paper-2)}}
/* Preserve the complete control group; put weather beneath it when it will not fit. */
@media(max-width:1340px){
  .topbar:has(.masthead-weather){grid-template-columns:minmax(200px,1fr) minmax(0,auto) auto;gap:8px 12px}
  .topbar>.masthead-weather{grid-column:1/-1;grid-row:2;justify-self:end}
}
@media(max-width:700px){
  .topbar:has(.masthead-weather){grid-template-columns:minmax(0,1fr) auto}
  .topbar>.topbar-profile{grid-column:2;grid-row:1}
  .topbar>.topbar-meta{grid-column:1/-1;grid-row:2;justify-content:flex-start}
  .topbar>.masthead-weather{grid-column:1/-1;grid-row:3;width:100%}
  .weather-strip{width:100%}
  .topbar .weather-day{min-height:50px}
}
@media(max-width:420px){
  .weather-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .topbar .weather-day{padding:6px 3px}
  .weather-day-top{justify-content:center;flex-wrap:wrap}
  .weather-temperatures{flex-basis:100%;text-align:center}
  .weather-day-bottom{justify-content:center;gap:4px}
  .weather-day:last-of-type{border-right:0}
  .weather-sun{grid-column:1/-1;display:flex;justify-content:center;gap:10px;border-top:1px solid var(--rule);padding:5px}
  .weather-metrics{gap:0 12px}
}
@media print{.masthead-weather{display:none!important}}