/* Living Room: the weather strip under the page header and the Weather tab. */

/* ------------------------------------------- at-a-glance strip (whole strip opens the tab) */
.wx-glance { display:flex; align-items:center; flex-wrap:wrap; gap:8px 22px; margin:0 20px 12px; padding:8px 14px; background:linear-gradient(90deg, #e3f2fd, #f5f7f8 70%); border:1px solid #e0e6e9; border-radius:6px; cursor:pointer; }
.wx-glance:hover, .wx-glance:focus { border-color:#90a4ae; outline:none; }
.wx-g-now { display:flex; align-items:center; gap:8px; }
.wx-g-icon { font-size:30px; line-height:1; }
.wx-g-temp { font-size:30px; font-weight:300; color:#263238; }
.wx-g-words { display:flex; flex-direction:column; font-size:12px; color:#546e7a; line-height:1.35; }
.wx-g-words b { color:#263238; font-size:13px; font-weight:500; }
.wx-g-place { color:#37474f; font-weight:500; white-space:nowrap; }
.wx-g-place em { font-style:normal; font-size:10px; font-weight:bold; text-transform:uppercase; letter-spacing:.05em; padding:0 5px; margin-left:4px; border-radius:3px; background:#ef6c00; color:#fff; }
/* Away from home: the whole strip turns amber so a travel city can't be mistaken for home. */
.wx-glance.wx-g-away { background:linear-gradient(90deg, #fff3e0, #fffaf3 70%); border-color:#ffb74d; }
/* One row of day cards: the row takes the leftover width, extra cards wrap onto
   a second row that's clipped away, so only whole cards ever show. */
.wx-g-days { flex:1 1 0; min-width:130px; display:flex; flex-wrap:wrap; gap:6px; height:70px; overflow:hidden; }
.wx-g-day { box-sizing:border-box; height:70px; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:62px; padding:3px 6px; background:rgba(255,255,255,.75); border-radius:4px; font-size:12px; line-height:1.3; }
.wx-g-day.wx-g-far { opacity:.65; }
.wx-g-dname { color:#546e7a; font-weight:500; white-space:nowrap; }
.wx-g-dname small { color:#90a4ae; font-weight:normal; }
.wx-g-dicon { font-size:18px; }
.wx-g-dtemp { color:#78909c; }
.wx-g-dtemp b { color:#263238; }
.wx-g-dpop { font-size:10px; color:#1c6ed4; }
.wx-g-more { margin-left:auto; font-size:12px; color:#546e7a; }

/* ---------------------------------------- alert banner (page) and alert details (tab) */
.wx-banner { margin:-4px 20px 12px; padding:7px 12px; border-radius:4px; font-size:13px; cursor:pointer; }
.wx-banner span { opacity:.8; }
.wx-alert-severe { background:#ffebee; border-left:5px solid #c62828; color:#7f0000; }
.wx-alert-moderate { background:#fff3e0; border-left:5px solid #ef6c00; color:#8d4004; }
.wx-alert-minor { background:#fffde7; border-left:5px solid #f9a825; color:#5d4300; }
.wx-alert { margin:0 0 8px; padding:8px 12px; border-radius:4px; font-size:13px; }
.wx-alert summary { cursor:pointer; }
.wx-alert-sev { font-size:11px; opacity:.75; margin-left:4px; }
.wx-alert-text { white-space:pre-line; margin:8px 0 0; }

/* ------------------------------------------------------------- toolbar + place search */
.wx-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:12px; }
.wx-toolbar .btn-small { text-transform:none; }
.wx-place { font-size:18px; font-weight:500; color:#263238; }
.wx-search { position:relative; }
.wx-search input[type=search] { box-sizing:border-box !important; width:240px !important; height:2rem !important; margin:0 !important; padding:0 8px !important; border:1px solid #b0bec5 !important; border-radius:3px; background:#fff !important; }
.wx-results { display:none; position:absolute; z-index:1000; top:100%; left:0; min-width:260px; background:#fff; border:1px solid #b0bec5; box-shadow:0 2px 8px rgba(0,0,0,.2); }
.wx-res { display:block; width:100%; text-align:left; border:0; background:#fff; padding:6px 10px; cursor:pointer; font-size:13px; }
.wx-res span { display:block; font-size:11px; color:#78909c; }
.wx-res:hover, .wx-res:focus { background:#eceff1; outline:none; }
.wx-res-none { padding:8px 10px; font-size:13px; color:#78909c; }
/* While refetching, keep the old render at reduced opacity (no flash). */
#Tab-weather.wx-loading .wx-top, #Tab-weather.wx-loading .wx-charts, #Tab-weather.wx-loading #WxDays { opacity:.55; }

/* ----------------------------------------------------------- now + next 24 hours */
.wx-top { display:grid; grid-template-columns:minmax(260px, 340px) 1fr; gap:14px; margin-bottom:16px; }
.wx-now { padding:12px 16px; background:linear-gradient(160deg, #e3f2fd, #fff 75%); border:1px solid #e0e6e9; border-radius:6px; }
.wx-now-main { display:flex; align-items:center; gap:10px; }
.wx-now-icon { font-size:48px; line-height:1; }
.wx-now-temp { font-size:52px; font-weight:300; color:#263238; line-height:1; }
.wx-now-words { font-size:16px; color:#37474f; margin:4px 0 10px; }
.wx-now-facts { display:grid; grid-template-columns:auto 1fr; gap:3px 14px; margin:0; font-size:13px; }
.wx-now-facts dt { color:#78909c; }
.wx-now-facts dd { margin:0; color:#263238; }
.wx-today { padding:12px 16px; background:#f5f7f8; border:1px solid #e0e6e9; border-radius:6px; }
.wx-today-h, .wx-h { font-size:12px; font-weight:bold; letter-spacing:.06em; text-transform:uppercase; color:#546e7a; margin-bottom:8px; }
.wx-h-sub { font-weight:normal; text-transform:none; letter-spacing:0; color:#90a4ae; margin-left:6px; }
.wx-today ul { margin:0; }
.wx-today li { display:flex; gap:10px; align-items:baseline; padding:5px 0; font-size:15px; color:#263238; border-bottom:1px solid #e3e8eb; list-style:none; }
.wx-today li:last-child { border-bottom:0; }
.wx-today-i { width:22px; text-align:center; }
.wx-section { margin:0 0 18px; }

/* ------------------------------------------- hourly charts: two plots, one crosshair */
.wx-charts { position:relative; outline:none; padding:4px 0 2px; background:#fff; }
.wx-charts:focus { box-shadow:0 0 0 2px #b0bec5; border-radius:3px; }
.wx-chart-title { font-size:12px; color:#546e7a; margin:2px 0 0 34px; }
.wx-key { display:inline-block; width:14px; height:2px; margin-right:6px; vertical-align:3px; border-radius:1px; }
.wx-key-bar { width:8px; height:10px; vertical-align:-1px; border-radius:2px 2px 0 0; }
.wx-svg { display:block; overflow:visible; }
.wx-ax { font-size:10px; fill:#90a4ae; font-variant-numeric:tabular-nums; }
.wx-ax-day { font-weight:bold; fill:#546e7a; }
.wx-lbl { font-size:11px; font-weight:bold; fill:#37474f; paint-order:stroke; stroke:#fff; stroke-width:3px; }
.wx-tip { position:absolute; z-index:5; pointer-events:none; min-width:190px; padding:7px 10px; background:#fff; border:1px solid #cfd8dc; border-radius:4px; box-shadow:0 2px 8px rgba(0,0,0,.18); font-size:12px; }
.wx-tip-h { color:#546e7a; margin-bottom:4px; }
.wx-tip-row { display:flex; align-items:center; gap:6px; line-height:1.6; }
.wx-tip-row b { font-size:14px; color:#263238; min-width:34px; }
.wx-tip-row span:last-child { color:#78909c; }
.wx-tip-key { display:inline-block; width:12px; height:2px; border-radius:1px; }

/* ------------------------------------------------- hourly table (the charts' table view) */
.wx-hours { overflow-x:auto; margin-top:8px; border:1px solid #e3e8eb; border-radius:4px; }
table.wx-hours-table { border-collapse:collapse; width:auto; }
table.wx-hours-table td { min-width:46px; padding:5px 4px !important; text-align:center; border:0; border-right:1px solid #f1f4f6; font-size:12px; border-radius:0; }
table.wx-hours-table td.wx-night { background:#f5f7f8; }
.wx-hr-t { color:#78909c; white-space:nowrap; }
.wx-hr-t b { color:#263238; }
.wx-hr-i { font-size:18px; line-height:1.4; }
.wx-hr-temp { font-weight:bold; color:#263238; }
.wx-hr-pop { font-size:11px; color:#1c6ed4; }

/* ---------------------------------------------------------------------- radar */
.wx-radar-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-bottom:6px; }
#MainTabs.ui-widget .wx-radar-bar .on-seg button { font-size:13px; min-width:34px; }
.wx-frame { font-size:13px; color:#37474f; font-variant-numeric:tabular-nums; }
.wx-links { margin-left:auto; font-size:12px; }
.wx-radar { height:440px; border:1px solid #cfd8dc; border-radius:4px; z-index:0; }
.wx-ahead { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:10px 0 0; }
.wx-ahead .btn-small { text-transform:none; }
.wx-windy { display:block; width:100%; height:460px; margin-top:8px; border:1px solid #cfd8dc; border-radius:4px; }

/* ------------------------------------- 14 days: one row each, low-to-high bar on a shared scale */
.wx-days { border:1px solid #e3e8eb; border-radius:4px; }
.wx-day { display:grid; grid-template-columns:96px 30px minmax(110px, 1fr) 130px 38px minmax(120px, 2fr) 38px; align-items:center; gap:8px; padding:6px 12px; border-bottom:1px solid #f1f4f6; font-size:13px; }
.wx-day:last-child { border-bottom:0; }
.wx-day-today { background:#f5f9fc; }
.wx-day-name { color:#546e7a; }
.wx-day-name b { color:#263238; }
.wx-day-icon { font-size:20px; text-align:center; }
.wx-day-words { color:#37474f; }
.wx-day-pop { color:#1c6ed4; white-space:nowrap; }
.wx-day-pop small { color:#78909c; }
.wx-day-lo { text-align:right; color:#78909c; }
.wx-day-hi { font-weight:bold; color:#263238; }
.wx-range { position:relative; height:6px; background:#eceff1; border-radius:3px; }
.wx-range span { position:absolute; top:0; bottom:0; border-radius:3px; }
.wx-days-norm .wx-day { grid-template-columns:96px 30px minmax(110px, 1fr) 130px 38px minmax(120px, 2fr) 38px 112px; }
.wx-norm { position:absolute; top:-4px; width:2px; height:14px; margin-left:-1px; background:#37474f; border-radius:1px; }
.wx-day-norm { color:#546e7a; white-space:nowrap; }
.wx-day-norm small { color:#78909c; }

@media (max-width: 800px) { .wx-top { grid-template-columns:1fr; } }
@media (max-width: 700px) {
   .wx-day { grid-template-columns:80px 26px 1fr 34px 1fr 34px; }
   .wx-days-norm .wx-day { grid-template-columns:80px 26px 1fr 34px 1fr 34px 58px; }
   .wx-day-words, .wx-day-norm small { display:none; }
}