/* The Weather tab. Inside the toolbox its own header is hidden: the toolbox's tabs take its place. */
.framed .bar.solo { display: none; }
.wx .wrap { padding-top: 22px; }
.framed .wx .wrap { padding-top: 14px; }
.wx-head { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: end; justify-content: space-between; margin-bottom: 14px; }
.wx-head h1 { margin: 0 0 4px; font-size: clamp(1.6rem, 3.6vw, 2.2rem); }
.wx-head p { margin: 0; }
.wx-head .wxsrc { margin: 0; }
.wx .panel { margin-bottom: 16px; }
.wx-foot { margin-top: 8px; }
.wx .days { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }

.hours { width: 100%; border-collapse: collapse; font-size: .9rem; }
.hours-wrap { overflow-x: auto; margin: 0 -4px; }
.hours th, .hours td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.hours thead th { font: 600 .78rem/1.2 var(--body); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.hours tr.dayrow th { background: var(--surface2); font: 700 .9rem/1.2 var(--head); color: var(--ink); text-transform: none; letter-spacing: 0; }
.hours .arrow { display: inline-block; width: 1em; text-align: center; color: var(--muted); }
.hours .tag { display: inline-block; font-weight: 600; font-size: .8rem; padding: 3px 8px; border-radius: 999px; }
.hours .good .tag { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.hours .windy .tag, .hours .still .tag { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.hours .wet .tag { color: var(--wet); background: color-mix(in srgb, var(--wet) 14%, transparent); }

.wxmap { position: relative; max-width: 520px; }
.wxmap img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid var(--line); background: #cfe0ea; }
.wxmap .pin { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #e0a526; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); }
.wxmap-ctl { display: flex; align-items: center; gap: 12px; margin-top: 10px; max-width: 520px; }
.wxmap-ctl input { flex: 1; accent-color: var(--brand); }
.wxmap-ctl output { min-width: 9.5em; font-weight: 600; font-size: .9rem; }
.wxmap-ctl button { border: 1px solid var(--line); background: var(--surface2); color: var(--ink); border-radius: 999px; padding: 7px 12px; font: 600 .85rem/1 var(--body); cursor: pointer; }
@media (max-width: 640px) {
  .hours th, .hours td { padding: 7px 7px; font-size: .84rem; }
}

/* weather pictures */
.wi { flex: none; display: inline-block; vertical-align: middle; color: var(--ink); }
.wi .wi-cloud { fill: #dfe6ee; stroke: #b9c6d4; stroke-width: 1.2; }
:root[data-theme="dark"] .wi .wi-cloud { fill: #a9b7c6; stroke: #8899ab; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wi .wi-cloud { fill: #a9b7c6; stroke: #8899ab; } }
.day-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.wi-name { font-weight: 600; color: var(--ink); }
.hours td.hr-time .wi { margin: -4px 0 -4px 10px; }