/* The new pages' own pieces, on top of the portal's stylesheet (main.css: header, page head, units, footer). Colours
   and type come from its tokens. No inline styles (the content security policy). */

.locator-strip > .v2-locator { flex: 1; min-width: 0 }
.v2-locator .locator__select { width: 100% }
.v2-body { background: var(--color-white); padding: 40px 50px }
@media (max-width: 1023.98px) { .v2-body { padding: 24px 20px } }

/* now */
.v2-now { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px; padding: 20px 30px 26px }
.v2-now__main { display: flex; align-items: center; gap: 16px }
.v2-now__icon { width: 96px; height: 96px }
.v2-now__temp { font-size: 64px; font-weight: 700; line-height: 1; color: var(--color-black); margin: 0 }
.v2-now__temp span { font-size: 22px; font-weight: 400; color: var(--color-body-text); vertical-align: top; margin-left: 4px }
.v2-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none }
.v2-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--color-extra-light-mint); color: var(--color-black) }
.v2-chip b { font-size: 18px }
.v2-chip span { color: var(--color-body-text); font-size: 14px }
.v2-chip svg { flex: none }
.v2-wind path { fill: var(--color-dark-blue) }

/* the 48 hours */
.v2-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100% }
.meteogram { display: block; width: 100%; min-width: 780px; height: auto; margin: 10px 0 4px }
.mg-night { fill: #eef3f5 }
.mg-midnight { stroke: #b7c4c6; stroke-width: 1; stroke-dasharray: 3 4 }
.mg-base { stroke: var(--color-lines-grey); stroke-width: 1 }
.mg-temp { stroke-width: 3.5; stroke-linecap: round }
.mg-dot { stroke: var(--color-white); stroke-width: 1.5 }
.mg-value { fill: var(--color-black); font-size: 15px; font-weight: 700; text-anchor: middle }
.mg-hour { fill: var(--color-body-text); font-size: 12px; text-anchor: middle }
.mg-day { fill: var(--color-black); font-size: 13px; font-weight: 700 }
.mg-rain { fill: #8cc3e0 } .mg-rain--moderate { fill: #3e8fc4 } .mg-rain--heavy { fill: #1b4f8a }
.mg-amount { fill: #2c6fa6; font-size: 12px; font-weight: 700; text-anchor: middle }
.mg-wind { fill: var(--color-dark-blue) }
.mg-speed { fill: var(--color-body-text); font-size: 12px; text-anchor: middle }
.mg-step rect { fill: transparent }
.mg-step:hover rect { fill: #5c9a921f }
.v2-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--color-body-text) }
.v2-legend li { display: inline-flex; align-items: center; gap: 8px }
.v2-legend__line { width: 22px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #3e7c94, #75ac70, #e7b440, #de7034) }
.v2-legend__bar { width: 10px; height: 14px; border-radius: 2px; background: #3e8fc4 }

/* ten days */
.v2-days { list-style: none; margin: 0; padding: 0 }
.v2-day { display: grid; grid-template-columns: 74px 44px minmax(0, 1fr); grid-template-areas: "name icon temps" "name icon rain"; align-items: center; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--color-lines-grey) }
.v2-day:first-child { border-top: 0 }
.v2-day p { margin: 0 }
.v2-day__name { grid-area: name; display: flex; flex-direction: column; gap: 2px }
.v2-day__name b, .v2-day__name span { display: block; line-height: 1.25; margin: 0 }
.v2-day__name b { color: var(--color-black); font-size: 17px }
.v2-day__name span { font-size: 13px; color: var(--color-body-text) }
.v2-day__icon { grid-area: icon; width: 44px; height: 44px }
.v2-day__temps { grid-area: temps; display: flex; align-items: center; gap: 10px }
.v2-day__low, .v2-day__high { font-size: 17px; min-width: 2.2em; font-variant-numeric: tabular-nums }
.v2-day__low { color: #3e7c94; text-align: right } .v2-day__high { color: #c4472f }
.v2-range { flex: 1; height: 10px; min-width: 60px }
.v2-range__track { fill: #e6ebea }
.v2-day__rain { grid-area: rain; display: flex; align-items: center; gap: 10px; font-size: 14px; color: #2c6fa6; font-weight: 700 }
.v2-day__rain.is-dry { color: var(--color-dark-grey); font-weight: 400 }
.v2-rainbar { width: 90px; height: 10px; flex: none }
.v2-rainbar__track { fill: #e6ebea } .v2-rainbar__fill { fill: #3e8fc4 }
.v2-day__wind { display: none }
@media (min-width: 900px) {
  .v2-day { grid-template-columns: 110px 52px minmax(260px, 1fr) 200px 90px; grid-template-areas: "name icon temps rain wind"; gap: 20px }
  .v2-day__icon { width: 52px; height: 52px }
  .v2-day__wind { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--color-body-text) }
}

/* all data */
.v2-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px }
.v2-table { border-top: 1px solid var(--color-lines-grey); padding: 10px 0 }
.v2-table summary { cursor: pointer; font-weight: 700; color: var(--color-black) }
.v2-table summary .muted { font-weight: 400; color: var(--color-body-text) }
.v2-data { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; margin-top: 8px }
.v2-data th, .v2-data td { padding: 6px 10px; border-bottom: 1px solid #ebeee9; text-align: left; white-space: nowrap }
.v2-data thead th { color: var(--color-body-text); font-weight: 700 }
.v2-data tbody th { font-weight: 400; color: var(--color-black) }
.v2-data .n { text-align: right }
.v2-data tr.midnight th, .v2-data tr.midnight td { border-top: 2px solid var(--color-lines-grey) }

/* place search suggestions */
.v2-locator { position: relative }
.suggest { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; background: var(--color-white); color: var(--color-black); border: 1px solid var(--color-lines-grey); border-radius: 10px; margin: 6px 0 0; padding: 4px; list-style: none; box-shadow: 0 8px 24px #0003; max-height: 320px; overflow: auto }
.suggest li { padding: 9px 12px; border-radius: 6px; cursor: pointer }
.suggest li[aria-selected="true"], .suggest li:hover { background: var(--color-extra-light-mint) }