:root {
  color-scheme: light;
  --water-blue:#4289de; --water-soft:color-mix(in srgb,var(--water-blue) 10%,var(--panel));
  --top:#fff; --ground:#f0f4f7; --panel:#fff; --ink:#172b3e; --muted:#617180;
  --line:#dce5ec; --accent:#096b9c; --accent-soft:#e8f4fa; --subtle:#f5f8fb;
  --shadow:0 4px 18px #163d5705; --live:#21714c; --live-bg:#eaf5ee;
  font-family:'Segoe UI Variable','Segoe UI',sans-serif; font-size:16px;
  background:var(--ground); color:var(--ink); font-synthesis:none;
}
:root[data-theme=dark] {
  color-scheme:dark;
  --top:#142330; --ground:#0d1923; --panel:#1a2b39; --ink:#eef4fa; --muted:#a8b8c6;
  --line:#314453; --accent:#7dcbea; --accent-soft:#233e4e; --subtle:#203340;
  --shadow:0 4px 18px #00000010; --live:#a0dfba; --live-bg:#244636;
}
* {box-sizing:border-box}
body {margin:0; line-height:1.55; min-height:100vh; min-height:100svh; display:flex; flex-direction:column}
main {flex:1; background:var(--ground)}
a {color:var(--accent); text-decoration:none; text-underline-offset:4px}
a:hover {text-decoration:underline}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible {outline:3px solid var(--accent);outline-offset:5px}
button {font:inherit; cursor:pointer}
.shell {max-width:1200px; margin-inline:auto; padding-inline:20px}
.site-header {background:var(--top); border-bottom:1px solid var(--line)}
.header-inner {min-height:102px; display:flex; align-items:center; gap:32px}
.brand {display:block; flex:0 0 auto; width:228px; max-width:100%; line-height:0}
.brand img {width:100%; height:auto; display:block}
.brand .brand-dark {display:none}
[data-theme=dark] .brand-light {display:none}
[data-theme=dark] .brand .brand-dark {display:block}
.main-nav {display:flex; margin-left:auto; gap:16px; align-items:center; align-self:stretch}
.main-nav a {display:flex; align-items:center; position:relative; color:var(--ink); font-size:15px; font-weight:600; white-space:nowrap}
.main-nav a[aria-current=page] {color:var(--accent)}
.main-nav a[aria-current=page]::after {position:absolute; content:''; inset:auto 0 -1px; height:3px; background:var(--accent)}
.theme-toggle {width:42px; height:42px; flex-shrink:0; padding:10px; border:1px solid var(--line); border-radius:50%; background:var(--top); color:var(--ink); display:grid; place-items:center}
.theme-toggle:hover {background:var(--accent-soft)}
.theme-toggle svg,.hero-links svg {display:block; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.skip-link {position:absolute; left:20px; top:-80px; z-index:4; padding:12px 20px; background:var(--panel); border:1px solid var(--accent)}
.skip-link:focus {top:12px}
.intro-band {display:flow-root; background:var(--top); border-bottom:1px solid var(--line)}
.page-intro {padding:33px 0 34px; display:flex; align-items:center; justify-content:space-between; gap:32px}
.intro-content {min-width:0; width:100%}
.breadcrumbs {font-size:12px; color:var(--muted); margin:0 0 14px; display:flex; flex-wrap:wrap; gap:5px 9px; align-items:center}
.breadcrumbs a {color:var(--muted)}
.breadcrumbs [aria-current=page] {color:var(--ink)}
h1,h2,h3,h4,p {margin-top:0}
h1 {font-size:48px; line-height:1.12; letter-spacing:-1.7px; font-weight:650; margin-bottom:8px; overflow-wrap:anywhere}
h2 {font-size:25px; line-height:1.3; letter-spacing:-.5px; font-weight:650; margin:0 0 24px; display:flex; align-items:baseline; gap:10px}
h2 .muted {font-size:14px; font-weight:500; letter-spacing:0}
h3 {font-weight:600; line-height:1.4}
.hero-description {font-size:18px; color:var(--muted); margin:16px 0 0}
.page-home h1 {font-size:60px; letter-spacing:-2px}
.page-home .page-intro {padding-block:36px 44px}
.hero-links {display:grid; gap:10px; min-width:230px}
.hero-links a {display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 19px; border:1px solid var(--line); border-radius:6px; font-size:15px; font-weight:600; color:var(--ink)}
.hero-links a:first-child {background:var(--accent); border-color:var(--accent); color:var(--top)}
.hero-links a:hover {text-decoration:none; box-shadow:0 0 0 2px var(--accent-soft)}
.name-variants {font-size:14px; margin:12px 0 0; color:var(--muted)}
.name-variants em {font-style:italic}
.weather-nav {display:flex; flex-wrap:wrap; gap:6px; margin:26px 0 0; border-top:1px solid var(--line); padding-top:17px}
.weather-nav a {padding:8px 14px; font-size:14px; color:var(--muted); border-radius:5px; white-space:nowrap; font-weight:500}
.weather-nav a:hover {background:var(--subtle); color:var(--ink); text-decoration:none}
.weather-nav [aria-current=page] {background:var(--accent-soft); color:var(--accent); font-weight:650}
.weather-nav.weather-nav--locality {column-gap:4px}
.weather-nav.weather-nav--locality a {padding-inline:7px}
@media(min-width:761px) and (max-width:1199px) {
  .weather-nav.weather-nav--locality {column-gap:2px}
  .weather-nav.weather-nav--locality a {padding-inline:clamp(1px,calc(4vw - 40px),7px); font-size:14px}
}
.nearby-forecast {margin:0; color:var(--muted); font-size:13px; line-height:1.8; overflow-wrap:anywhere}
.nearby-forecast-label {margin-right:5px}
.holiday-intro {color:var(--muted); margin:18px 0 0; max-width:710px; font-size:17px}
.page-holidays h1 {font-size:42px; max-width:850px}
.content-band {background:var(--ground)}
.content-frame {display:grid; grid-template-columns:minmax(0,1fr); max-width:1200px; padding:38px 20px 54px; margin-inline:auto; gap:20px}
.page-content {min-width:0}
.muted,dt,.current-update,.shmu-meta {color:var(--muted)}
.page-content > p {font-size:14px; margin-bottom:20px; line-height:1.6}
.places {list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.places li {position:relative; display:flex; flex-direction:column; padding:25px 24px 22px; border:1px solid var(--line); border-radius:8px; background:var(--panel); box-shadow:var(--shadow); min-height:132px; transition:border-color .16s,transform .16s}
.places li::before {content:''; width:26px; height:3px; border-radius:2px; background:var(--accent); margin-bottom:19px; opacity:.55}
.places li:hover {border-color:var(--accent); transform:translateY(-2px)}
.places a {color:var(--ink); font-size:18px; font-weight:600; line-height:1.4; margin-bottom:8px; padding-right:20px; letter-spacing:-.2px}
.places a::after {position:absolute; content:''; inset:0; z-index:1}
.places li::after {content:'↗'; position:absolute; top:24px; right:22px; font-size:18px; color:var(--accent)}
.places .muted {font-size:12px; margin-top:auto}
/* Compact locality cards: name and temperature on the left, symbol on the right. */
.places--weather li {padding-bottom:12px}
.places--weather li::before {display:none}
.places--weather a {margin-bottom:8px; overflow-wrap:anywhere}
.place-weather {display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:40px; margin-top:auto; color:var(--ink)}
.weather-symbol--place {order:2; width:60px}
.place-temperature {order:1; font-size:28px; font-weight:600; line-height:1; letter-spacing:-.7px; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--accent); color:color-mix(in srgb,var(--accent) 80%,var(--panel))}
.page-home .places li:first-child {grid-column:span 2; background:linear-gradient(125deg,var(--panel),var(--accent-soft))}
.page-home .places li:first-child a {font-size:25px}
.page-home .places li:first-child::before {width:40px; background:linear-gradient(90deg,var(--accent-stripe-start),var(--accent-stripe-end)); opacity:1}
.current-weather-group {display:grid; grid-template-columns:1.12fr 1fr 1fr; gap:16px; margin:0 0 38px}
.current-weather {min-width:0; padding:24px; background:var(--panel); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow)}
.current-weather--foreca {background:linear-gradient(160deg,var(--panel) 30%,var(--accent-soft))}
.current-station-label,.current-weather h3 {font-size:18px; margin-bottom:8px; font-weight:600; letter-spacing:-.3px}
.current-station-label .muted {font-size:13px; font-weight:400}
.current-update {font-size:11px; margin:0 0 9px; line-height:1.5}
.current-summary {display:flex; align-items:center; gap:10px; margin:18px 0 21px}
.current-outlook {min-width:0; flex:1}
.temperature {font-size:45px; font-weight:650; line-height:1; letter-spacing:-1.8px; margin:0 0 10px; white-space:nowrap}
.condition {margin:0; font-size:14px}
.weather-symbol {display:block; flex:0 0 auto}
.weather-icon {width:100%; height:auto; display:block; aspect-ratio:1}
.weather-symbol--current {width:118px}
.weather-symbol--day {width:104px}
.weather-symbol--hourly {width:42px}
dl {margin:0}
dd {margin:0; color:var(--ink)}
dt {min-width:0}
.observations {margin-bottom:18px; font-size:13px}
.observations > div {display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-top:1px solid var(--line)}
.observations dd {text-align:right; font-weight:500; white-space:nowrap}
.current-weather h3 {display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.current-now {font-size:10px; letter-spacing:.3px; color:var(--live); background:var(--live-bg); border-radius:20px; padding:3px 8px; line-height:1.3; font-weight:600}
.shmu-meta {font-size:12px; margin:0 0 16px}
.shmu-current-metrics {margin:12px 0 18px}
.shmu-current-metrics > div {display:flex; justify-content:space-between; align-items:baseline; gap:15px; border-top:1px solid var(--line); padding:8px 0; font-size:12px}
.shmu-current-metrics dt {max-width:73%}
.shmu-current-metrics dd {font-size:14px; font-weight:600; flex-shrink:0; text-align:right; max-width:45%; overflow-wrap:anywhere}
.shmu-current-metrics .shmu-air-temperature {display:block; padding:0 0 20px; border:0}
.shmu-air-temperature dt {font-size:12px; max-width:100%}
.shmu-current-metrics .shmu-air-temperature dd {max-width:100%; text-align:left; margin-top:7px; font-size:39px; line-height:1.1; letter-spacing:-1.1px}
.shmu-coverage {font-size:11px; line-height:1.6; margin:0 0 8px}
.current-weather-group + h2 {margin-bottom:14px}
.forecast-coverage {margin:24px 0; padding:17px 21px; border-left:3px solid var(--accent); background:var(--accent-soft); border-radius:0 5px 5px 0}
.coverage-heading {font-size:15px; margin:0 0 5px}
.forecast-coverage p {font-size:12px; margin:0}
.overview-day {border:1px solid var(--line); border-radius:8px; padding:26px 28px; background:var(--panel); margin:0 0 22px; box-shadow:var(--shadow)}
.overview-date {margin:0 0 20px; font-size:19px; letter-spacing:-.3px}
.overview-date .muted {font-size:14px; font-weight:400; letter-spacing:0}
.overview-summary {display:grid; grid-template-columns:104px minmax(0,1fr) minmax(230px,.7fr); gap:24px; align-items:center}
.overview-condition {font-size:16px; margin:0 0 12px; font-weight:500}
.day-temperatures {display:flex; gap:30px}
.day-temperatures > div {display:flex; flex-direction:column}
.day-temperature {font-size:30px; line-height:1.25; font-weight:600; letter-spacing:-.8px; white-space:nowrap}
.day-temperature--min {color:var(--muted); font-weight:400}
.temperature-label {font-size:11px; color:var(--muted); margin-top:3px}
.day-details {font-size:12px}
.day-details > div {display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--line)}
.day-details dd {font-weight:500; white-space:nowrap}
.overview-detail-heading {margin:25px 0 12px; font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.5px; text-transform:uppercase}
.table-scroll {overflow:auto; border:1px solid var(--line); border-radius:5px}
.forecast-table {border-collapse:collapse; width:100%; font-size:12px}
.forecast-table th,.forecast-table td {padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap}
.forecast-table thead {background:var(--subtle); color:var(--muted)}
.forecast-table thead th {font-weight:500; font-size:11px}
.forecast-table tbody th {font-weight:600}
.forecast-table td:nth-child(2) {font-size:16px; font-weight:600}
.forecast-table tbody tr:last-child > * {border-bottom:0}
.forecast-table .condition {white-space:normal; min-width:155px; font-size:12px}
.interval-condition {display:flex; align-items:center; gap:10px}
.interval-condition > span {min-width:0}
.holiday-region + .holiday-region {margin-top:38px}
.holiday-region h2 a {color:var(--ink)}
.holiday-destinations {list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:0; margin:0}
.holiday-destinations li {min-width:0}
.holiday-destinations a {display:block; position:relative; border:1px solid var(--line); border-radius:7px; padding:20px 38px 20px 22px; background:var(--panel); height:100%; box-shadow:var(--shadow)}
.holiday-destinations a::after {content:'↗'; position:absolute; right:18px; top:18px; color:var(--accent)}
.holiday-destinations a:hover {border-color:var(--accent); text-decoration:none}
.holiday-destinations strong {display:block; font-size:15px; color:var(--ink); font-weight:600}
.holiday-destinations span {display:block; font-size:12px; color:var(--muted); margin-top:5px}
.site-prefooter {background:var(--top); border-top:1px solid var(--line); padding:26px 0; color:var(--muted)}
.prefooter-inner {display:grid; gap:20px}
.prefooter-inner > .footer-sources:not(:first-child) {border-top:1px solid var(--line); padding-top:18px}
.site-footer {background:var(--footer); color:var(--footer-ink); padding:36px 0 22px}
.footer-top {display:flex; align-items:center; justify-content:space-between; gap:32px; padding-bottom:28px}
.footer-top .brand {width:205px}
.site-footer nav {display:flex; flex-wrap:wrap; gap:24px}
.site-footer a {color:var(--footer-ink); font-size:13px}
.footer-bottom {border-top:1px solid var(--footer-line); padding-top:20px; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; color:var(--footer-muted); font-size:11px}
.footer-bottom p {margin:0}
.footer-bottom a {font-size:11px; white-space:nowrap}
[data-theme=dark] .site-footer {background:var(--footer)}
@media(max-width:1100px) {
  .places {grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-home .places li:first-child {grid-column:auto}
  .current-weather-group {grid-template-columns:repeat(2,minmax(0,1fr))}
  .current-weather--foreca {grid-column:1/-1}
  .current-weather--foreca .current-summary {float:left; margin:8px 35px 12px 0; width:310px}
  .current-weather--foreca .observations {margin:8px 0 10px; overflow:hidden}
  .current-weather--foreca .current-update:last-child {clear:both}
  .overview-summary {grid-template-columns:104px 1fr 230px; gap:20px}
}
@media(max-width:760px) {
  .shell {padding-inline:20px}
  .header-inner {min-height:0; padding-block:18px 0; gap:16px; flex-wrap:wrap}
  .header-inner .brand {width:194px}
  .theme-toggle {margin-left:auto; width:38px; height:38px; padding:8px}
  .main-nav {order:3; width:100%; margin:0; height:46px}
  .main-nav a {font-size:13px}
  .page-intro,.page-home .page-intro {padding-block:26px 30px; flex-direction:column; align-items:stretch; gap:24px}
  h1,.page-home h1 {font-size:40px; letter-spacing:-1.2px}
  .page-holidays h1 {font-size:32px}
  .hero-description {font-size:16px; margin-top:12px}
  .hero-links {min-width:0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .hero-links a {padding:12px 13px; font-size:13px; gap:8px}
  .hero-links svg {width:17px; height:17px; flex-shrink:0}
  .breadcrumbs {font-size:11px; gap:4px 6px; margin-bottom:12px}
  .weather-nav {margin-top:20px; gap:4px; padding-top:14px}
  .weather-nav a {padding:8px 10px; font-size:12px}
  .holiday-intro {font-size:15px}
  .content-frame {padding:28px 20px 36px}
  h2 {font-size:22px; margin-bottom:20px}
  .places {grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
  .places li {padding:21px 18px 18px; min-height:142px}
  .places--weather li {padding:16px 18px 6px; min-height:120px}
  .places a {font-size:16px; padding-right:8px}
  .page-home .places li:first-child a {font-size:20px}
  .places li::after {right:15px; top:16px}
  .places li::before {margin-bottom:15px; width:21px}
  .page-home .places li:first-child {grid-column:span 2; min-height:138px}
  .current-weather-group {grid-template-columns:1fr; margin-bottom:30px}
  .current-weather {padding:22px}
  .current-weather--foreca .current-summary {float:none; width:auto; margin:22px 0}
  .current-weather--foreca .observations {margin:0 0 18px; overflow:visible}
  .current-summary {gap:24px}
  .weather-symbol--current {width:126px}
  .temperature {font-size:45px}
  .current-update {font-size:12px}
  .shmu-current-metrics > div {font-size:13px; padding-block:10px}
  .shmu-current-metrics dd {font-size:15px}
  .shmu-coverage {font-size:12px}
  .overview-day {padding:22px 20px}
  .overview-summary {grid-template-columns:88px 1fr; gap:18px}
  .weather-symbol--day {width:88px}
  .overview-daily-params {grid-column:1/-1; font-size:13px}
  .overview-date {margin-bottom:20px}
  .overview-date .muted {font-size:13px}
  .day-temperatures {gap:22px}
  .day-temperature {font-size:27px}
  .overview-condition {font-size:14px}
  .forecast-coverage {padding:15px 17px}
  .table-scroll {border:0; overflow:visible; border-radius:0}
  .forecast-table,.forecast-table tbody {display:block}
  .forecast-table thead {position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%)}
  .forecast-table tbody tr {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:12px; row-gap:12px; padding:18px 0; border-top:1px solid var(--line)}
  .forecast-table tbody th,.forecast-table tbody td {display:block; padding:0; border:0; white-space:normal; min-width:0}
  .forecast-table tbody th {grid-column:1/-1; font-size:14px; color:var(--accent)}
  .forecast-table td::before {display:block; content:attr(data-label); color:var(--muted); font-size:10px; font-weight:400; margin-bottom:3px}
  .forecast-table td {font-size:13px}
  .forecast-table td:nth-child(2) {font-size:16px}
  .forecast-table .condition {grid-column:1/-1; grid-row:2; min-width:0}
  .forecast-table .condition::before {display:none}
  .interval-condition {font-size:13px}
  .holiday-destinations {grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
  .holiday-destinations a {padding:18px 28px 18px 16px}
  .holiday-destinations a::after {right:12px; top:13px}
  .holiday-destinations strong {font-size:14px}
  .footer-top {flex-direction:column; align-items:flex-start; gap:22px; padding-bottom:24px}
  .footer-top .brand {width:calc(var(--mobile-brand-reference-width) * .81)}
  .site-footer nav {gap:18px}
  .footer-bottom {flex-direction:column; gap:12px; line-height:1.7}
}
@media(max-width:380px) {
  .shell {padding-inline:16px}
  .content-frame {padding-inline:16px}
  .header-inner .brand {width:180px}
  .places {grid-template-columns:1fr}
  .page-home .places li:first-child {grid-column:auto}
  .places li {min-height:120px}
  .current-weather {padding:18px}
  .current-summary {gap:12px}
  .weather-symbol--current {width:100px}
  .temperature {font-size:40px}
  .overview-day {padding:20px 16px}
  .overview-summary {grid-template-columns:78px 1fr; gap:12px}
  .weather-symbol--day {width:78px}
  .day-temperatures {gap:14px}
  .day-temperature {font-size:24px}
  .holiday-destinations {grid-template-columns:1fr}
  .shmu-current-metrics dt {max-width:64%}
  .shmu-current-metrics dd {max-width:36%}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {transition:none!important; scroll-behavior:auto!important}}

/* Existing forecast, station and holiday pages share the same design tokens. */
.visually-hidden {position:absolute; width:1px; min-width:0; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}
.weather-symbol--daily-list {width:64px}
.daily-condition {display:flex; align-items:center; gap:12px}
.daily-condition span {min-width:0}
.forecast-long-table .condition {min-width:160px}
.forecast-long-table .daily-max {font-size:17px; font-weight:600}
.forecast-long-table .daily-min {font-size:17px; font-weight:500; color:var(--muted)}
.forecast-week th {background:var(--subtle); font-size:12px; font-weight:500!important; color:var(--muted)}
.forecast-source {display:inline-block; padding:3px 7px; background:var(--accent-soft); color:var(--accent); border-radius:4px; font-size:11px}
.forecast-source--long {background:var(--subtle); color:var(--muted)}
.forecast-days {display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin:24px 0}
.forecast-day {min-width:0; padding:20px 17px; border:1px solid var(--line); border-radius:7px; background:var(--panel); display:flex; flex-direction:column; box-shadow:var(--shadow)}
.forecast-date {font-size:16px; margin:0 0 12px}
.forecast-day .weather-symbol {margin-inline:auto}
.day-condition {font-size:13px; margin:12px 0 20px; min-height:3em}
.forecast-day .day-temperatures {gap:14px; justify-content:space-between; margin-top:auto}
.forecast-day .day-temperature {font-size:24px}
.forecast-day .day-details {margin-top:18px; font-size:11px}
.forecast-day .day-probability {min-height:4em}
.three-hour-detail {margin-top:34px}
.three-hour-detail > h3 {font-size:21px}
.current-weather-group--list {grid-template-columns:repeat(3,minmax(0,1fr))}
.current-weather h3 .station-distance {font-size:13px; font-weight:400; letter-spacing:0; white-space:nowrap; color:var(--muted)}
.places .place-distance {font-size:12px; font-weight:400; letter-spacing:0; white-space:nowrap; color:var(--muted)}
.station-localities {margin-top:34px}
.shmu-stale,.weather-data-note {padding:12px 16px; border-left:3px solid var(--accent); background:var(--accent-soft); color:var(--muted); border-radius:0 5px 5px 0; font-size:13px}
.astronomy-event {background:var(--accent-soft)}
.astronomy-label {display:flex; gap:12px; align-items:center; font-size:13px; font-weight:400; color:var(--ink)}
.astronomy-label img {width:46px; height:46px; flex-shrink:0}
.forecast-table .astronomy-event td {font-size:13px; font-weight:400}
.country-holidays {margin-bottom:38px}
.country-holidays h2 a {color:var(--ink)}
.country-holiday {display:grid; grid-template-columns:minmax(210px,1fr) minmax(0,2fr); gap:20px 30px; margin:0 0 16px; padding:24px; border:1px solid var(--line); border-radius:8px; background:var(--panel); box-shadow:var(--shadow)}
.country-holiday h3 {font-size:18px; margin:0 0 12px}
.country-holiday h3 a {color:var(--ink)}
.country-holiday-reference {font-size:13px; margin:0 0 6px}
.country-holiday-meta {font-size:11px; margin:0 0 5px; color:var(--muted)}
.country-holiday-more {display:inline-block; font-size:12px; margin-top:12px}
.country-holiday-days {display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; align-items:start}
.country-holiday-day {display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0; padding:10px 4px; background:var(--subtle); border-radius:5px}
.country-holiday-day time {font-size:12px; white-space:nowrap}
.country-holiday-day .weather-symbol {max-width:100%; margin-block:4px}
.country-holiday-air {display:flex; justify-content:center; flex-wrap:wrap; gap:4px 8px; font-size:14px; margin:4px 0 10px}
.country-holiday-air dd {white-space:nowrap}
.holiday-max {color:var(--ink); font-weight:650}
.holiday-min {color:var(--muted)}
.country-holiday-sea {font-size:11px; color:var(--water-blue); padding:4px; background:var(--water-soft); border-radius:3px; margin:0; white-space:nowrap}
.country-holiday-note {grid-column:1/-1; font-size:12px; margin:0}
.country-holidays-legend {font-size:12px; margin:20px 0 0}
.holiday-reference {font-size:15px; margin:0 0 8px}
.holiday-reference-note,.weather-meta,.holiday-water-note {font-size:13px; color:var(--muted); margin:0 0 16px}
.holiday-current {max-width:100%; margin:24px 0 34px}
.holiday-current .current-weather-group {grid-template-columns:1fr}
.holiday-current .current-weather--foreca .current-summary {float:left; margin:10px 40px 20px 0; width:320px}
.holiday-current .current-weather--foreca .observations {overflow:hidden; margin-top:16px}
.holiday-current .current-weather--foreca > .current-update:last-child {clear:both}
.holiday-forecast,.holiday-extended {margin-top:34px}
.holiday-days {display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin:24px 0}
.holiday-day {border:1px solid var(--line); border-radius:7px; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; background:var(--panel); overflow:hidden; box-shadow:var(--shadow)}
.holiday-day h3 {width:100%; font-size:16px; margin:0 0 12px; padding:12px 5px; background:var(--subtle); min-height:68px}
.holiday-day-label {display:block; font-size:11px; font-weight:400; margin-top:2px; color:var(--muted)}
.holiday-condition {font-size:12px; margin:10px 10px 18px; min-height:3em}
.holiday-temperatures {display:grid; width:100%; grid-template-columns:1fr 1fr; gap:8px; padding:0 14px; margin:auto 0 18px}
.holiday-temperatures dt {font-size:10px; color:var(--muted)}
.holiday-temperatures dd {font-size:23px; line-height:1.3; margin-top:4px; white-space:nowrap}
.holiday-sea {width:100%; padding:12px 5px; background:var(--water-soft); border-top:1px solid var(--line); color:var(--water-blue)}
.holiday-sea span {display:block; font-size:11px}
.holiday-sea strong {display:block; font-size:19px; font-weight:600}
.holiday-compact-days {display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:24px 0}
.holiday-compact-day {min-width:0; border:1px solid var(--line); border-radius:6px; padding:16px 10px; display:flex; flex-direction:column; align-items:center; text-align:center; background:var(--panel)}
.holiday-compact-day h3 {font-size:13px; margin:0 0 8px}
.holiday-compact-condition {font-size:11px; min-height:3em; margin:8px 0 12px}
.holiday-compact-temperatures {display:flex; flex-wrap:wrap; justify-content:center; gap:10px; font-size:17px; margin:auto 0 12px}
.holiday-compact-temperatures span {color:var(--muted)}
@media(max-width:1100px) {
  .current-weather-group--list {grid-template-columns:repeat(2,minmax(0,1fr))}
  .forecast-days,.holiday-days {grid-template-columns:repeat(3,minmax(0,1fr))}
  .country-holiday {grid-template-columns:1fr}
  .country-holiday-days {gap:12px}
  .holiday-compact-days {grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(max-width:760px) {
  .forecast-days,.holiday-days {grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
  .forecast-day {padding:18px 14px}
  .forecast-day .weather-symbol {max-width:100%; width:88px}
  .forecast-day .day-temperatures {gap:8px}
  .forecast-day .day-temperature {font-size:22px}
  .forecast-day .day-details > div {flex-wrap:wrap; gap:4px}
  .forecast-day .day-details {font-size:11px}
  .forecast-long-table tbody tr {grid-template-columns:repeat(2,minmax(0,1fr)); padding:20px; margin-bottom:12px; background:var(--panel); border:1px solid var(--line); border-radius:7px}
  .forecast-long-table .condition {min-width:0; grid-row:2}
  .forecast-long-table .forecast-week {display:block; padding:0; border:0; margin:22px 0 12px; background:none}
  .forecast-week th {padding:10px 14px!important; background:var(--accent-soft); border-radius:4px; color:var(--muted)!important; font-size:12px!important}
  .forecast-long-table .daily-condition {gap:10px; font-size:14px}
  .forecast-long-table .daily-max,.forecast-long-table .daily-min {font-size:20px}
  .forecast-long-table td:nth-child(2) {font-size:13px; font-weight:400}
  .forecast-table .astronomy-event {grid-template-columns:1fr; padding:14px; border-radius:5px}
  .astronomy-event td {grid-column:1/-1}
  .astronomy-event td::before {display:none}
  .astronomy-label {font-size:13px}
  .current-weather-group--list {grid-template-columns:1fr}
  .country-holiday {padding:20px; gap:20px}
  .country-holiday-days {gap:4px}
  .country-holiday-day {padding:8px 2px}
  .country-holiday-day time {font-size:10px}
  .country-holiday-air {font-size:12px; flex-direction:column; gap:2px; margin-bottom:8px}
  .country-holiday-sea {font-size:9px; padding:3px 2px}
  .holiday-current .current-weather--foreca .current-summary {float:none; width:auto; margin:22px 0}
  .holiday-current .current-weather--foreca .observations {overflow:visible; margin-top:0}
  .holiday-temperatures {padding-inline:10px}
  .holiday-temperatures dd {font-size:21px}
  .holiday-compact-days {grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
  .holiday-compact-day {padding:14px 6px}
  .holiday-compact-temperatures {font-size:16px; gap:5px}
  .holiday-compact-condition {font-size:10px}
}
@media(max-width:380px) {
  .forecast-day {padding:16px 10px}
  .forecast-day .day-temperature {font-size:20px}
  .holiday-temperatures {padding-inline:8px; gap:4px}
  .holiday-temperatures dd {font-size:19px}
  .country-holiday {padding:18px 14px}
  .country-holiday-sea {font-size:8px}
  .holiday-compact-days {grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Matching contrast and surfaces across the four seasonal profiles. */
:root {
  --footer:#172b3b; --footer-ink:#d9e4ed; --footer-muted:#a9bccb; --footer-line:#38505f; --accent-stripe-start:#128bd6; --accent-stripe-end:#17a2a0;
}
:root[data-theme=dark] {
  --footer:#09131c; --footer-ink:#d9e4ed; --footer-muted:#a9bccb; --footer-line:#38505f; --accent-stripe-start:#7dcbea; --accent-stripe-end:#7dcbea;
}
:root[data-palette=red][data-theme=light] {
  --top:#ffffff; --ground:#f7f2f1; --panel:#ffffff; --ink:#3c211c; --muted:#806964; --line:#ede0de; --accent:#b2291a; --accent-soft:#fceeec; --subtle:#fbf6f6; --footer:#3a211d; --footer-ink:#eededc; --footer-muted:#ccb3ae; --footer-line:#604540; --accent-stripe-start:#ce5c4b; --accent-stripe-end:#c67466;
}
:root[data-palette=red][data-theme=dark] {
  --top:#2f1c18; --ground:#221310; --panel:#38231f; --ink:#faf1ef; --muted:#c6b0ac; --line:#533b36; --accent:#f2aa9d; --accent-soft:#4f322d; --subtle:#402a26; --footer:#1b0e0c; --footer-ink:#eededc; --footer-muted:#ccb3ae; --footer-line:#604540; --accent-stripe-start:#f2aa9d; --accent-stripe-end:#f2aa9d;
}
:root[data-palette=green][data-theme=light] {
  --top:#ffffff; --ground:#f0f5f2; --panel:#ffffff; --ink:#163020; --muted:#617467; --line:#dde6e0; --accent:#1e7647; --accent-soft:#eaf5ed; --subtle:#f5f9f6; --footer:#182f20; --footer-ink:#dae6dd; --footer-muted:#abbfb1; --footer-line:#3c5343; --accent-stripe-start:#119d5b; --accent-stripe-end:#53a171;
}
:root[data-palette=green][data-theme=dark] {
  --top:#14261b; --ground:#0e1b12; --panel:#1b2e22; --ink:#eef5f0; --muted:#a9bbae; --line:#334739; --accent:#90d0a6; --accent-soft:#274130; --subtle:#223629; --footer:#09150d; --footer-ink:#dae6dd; --footer-muted:#abbfb1; --footer-line:#3c5343; --accent-stripe-start:#90d0a6; --accent-stripe-end:#90d0a6;
}


:root[data-palette=yellow][data-theme=light] {
  --top:#ffffff; --ground:#f6f3e8; --panel:#ffffff; --ink:#3b3118; --muted:#75694c; --line:#e8dfc6; --accent:#886000; --accent-soft:#f8edc9; --subtle:#fbf8ee; --footer:#332c19; --footer-ink:#eee6cd; --footer-muted:#c6b995; --footer-line:#5a5034; --accent-stripe-start:#c99920; --accent-stripe-end:#b78b28;
}
:root[data-palette=yellow][data-theme=dark] {
  --top:#2b2516; --ground:#1e190e; --panel:#342d1c; --ink:#faf4e4; --muted:#c3b697; --line:#50462d; --accent:#e5c466; --accent-soft:#493d20; --subtle:#3b3220; --footer:#171207; --footer-ink:#eee6cd; --footer-muted:#c6b995; --footer-line:#5a5034; --accent-stripe-start:#e5c466; --accent-stripe-end:#e5c466;
}

.appearance-controls {display:flex; align-items:center; gap:12px; flex-shrink:0}
.palette-picker {display:flex; align-items:center; gap:6px}
.palette-button {position:relative; display:grid; place-items:center; width:26px; height:26px; padding:0; border:2px solid transparent; border-radius:50%; background:var(--swatch); background-clip:content-box; color:#fff; box-shadow:inset 0 0 0 2px var(--top)}
.palette-button[data-palette-choice=blue] {--swatch:#096b9c}
.palette-button[data-palette-choice=red] {--swatch:#b2291a}
.palette-button[data-palette-choice=green] {--swatch:#1e7647}
.palette-button[data-palette-choice=yellow] {--swatch:#cc9e21}
/* The head bootstrap sets the palette before CSS paints the picker. */
:root[data-palette=blue] .palette-button[data-palette-choice=blue],
:root[data-palette=red] .palette-button[data-palette-choice=red],
:root[data-palette=green] .palette-button[data-palette-choice=green],
:root[data-palette=yellow] .palette-button[data-palette-choice=yellow] {border-color:var(--ink)}
:root[data-palette=blue] .palette-button[data-palette-choice=blue]::after,
:root[data-palette=red] .palette-button[data-palette-choice=red]::after,
:root[data-palette=green] .palette-button[data-palette-choice=green]::after,
:root[data-palette=yellow] .palette-button[data-palette-choice=yellow]::after {content:'✓'; font-size:12px; font-weight:700; line-height:1}
.palette-button:hover {outline:2px solid var(--line); outline-offset:2px}
.appearance-controls .theme-toggle {margin-left:0}
@media(max-width:760px) {
  .appearance-controls {margin-left:auto; gap:10px}
  :root {--mobile-brand-reference-width:clamp(128px,calc(100vw - 198px),194px)}
  .header-inner {
    --mobile-brand-reference-height:calc(var(--mobile-brand-reference-width) * 560 / 2002);
    gap:12px;
  }
  .header-inner .brand {
    display:grid;
    align-content:center;
    width:calc(var(--mobile-brand-reference-width) * .9);
    min-height:var(--mobile-brand-reference-height);
  }
  .palette-button {width:24px; height:24px}
}

.location-title-row {display:block; margin-bottom:8px; font-size:0; line-height:1.12}
.location-title-row h1 {display:inline; margin:0}
.location-title-row .bookmark-name-tail::after {width:calc(44px + .25em)}
.location-title-row > .city-bookmark {display:inline-grid; margin:0 0 0 -44px; vertical-align:baseline}
.city-bookmark {display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; margin-top:2px; padding:10px; color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:6px}
.city-bookmark[hidden] {display:none}
.city-bookmark svg {width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.city-bookmark:hover {color:var(--accent); background:var(--accent-soft); border-color:var(--accent)}
.city-bookmark[aria-pressed=true] {color:var(--accent); background:var(--accent-soft); border-color:var(--accent)}
.city-bookmark[aria-pressed=true] svg {fill:currentColor}
.city-bookmark-note {position:fixed; z-index:20; bottom:22px; left:50%; transform:translateX(-50%); width:max-content; max-width:min(420px,calc(100vw - 40px)); padding:12px 18px; border:1px solid var(--line); border-radius:7px; background:var(--panel); color:var(--ink); font-size:13px; box-shadow:var(--shadow); pointer-events:none}
.city-bookmark-note:empty {display:none}

.theme-toggle {position:relative; padding:0; touch-action:manipulation; user-select:none; -webkit-user-select:none}
.theme-toggle .theme-icon {display:none; position:static; width:20px; height:20px; place-items:center}
[data-theme-mode=light] .theme-manual-light,[data-theme-mode=dark] .theme-manual-dark,[data-theme-mode=system][data-theme=light] .theme-system-light,[data-theme-mode=system][data-theme=dark] .theme-system-dark {display:grid}
.theme-toggle .theme-icon-system > svg:first-child {position:static; width:16px; height:16px}
.theme-toggle .theme-system-setting {position:absolute; right:calc(50% - 15px); bottom:calc(50% - 15px); width:12px; height:12px; padding:1px; background:var(--top); border-radius:50%; stroke-width:1.5}
.theme-toggle:hover .theme-system-setting {background:var(--accent-soft)}

.city-bookmark-limit {pointer-events:auto; padding-right:42px; border-color:var(--accent)}
.city-bookmark-limit p {margin:0 0 10px; line-height:1.6}
.city-bookmark-limit a {font-weight:600; display:inline-block}
.city-bookmark-limit-close {position:absolute; right:7px; top:7px; width:28px; height:28px; border:0; background:transparent; color:var(--muted); font-size:20px; line-height:1}

.footer-sources{color:var(--muted);font-size:11px;line-height:1.7}
.footer-sources p{margin:0}.footer-sources p+p{margin-top:7px}.footer-sources a{font-size:inherit}
.footer-data-notes{font-size:11px;line-height:1.7;color:var(--footer-muted);padding:5px 0 20px}
.footer-data-notes summary{cursor:pointer;width:max-content;max-width:100%;color:var(--footer-ink);padding:6px 0}
.footer-data-notes p{margin:10px 0}.footer-data-notes ul{padding-left:18px;margin:10px 0}.footer-data-notes li{margin:4px 0}
.footer-data-notes a{font-size:inherit}

/* Administrative importance changes the border, keeping compact weather cards. */
[data-place-importance="1"] {--place-border:color-mix(in srgb,var(--accent) 65%,var(--line))}
[data-place-importance="2"] {--place-border:color-mix(in srgb,var(--accent) 42%,var(--line))}
[data-place-importance="3"] {--place-border:color-mix(in srgb,var(--accent) 22%,var(--line))}
[data-place-importance="4"] {--place-border:var(--line)}
.places li[data-place-importance] {border-color:var(--place-border)}
.places li[data-place-importance]:hover {border-color:var(--accent)}
.place-importance-legend {display:flex; flex-wrap:wrap; gap:6px 18px; margin:-12px 0 20px; color:var(--muted); font-size:11px; line-height:1.5}
.place-importance-legend span {display:inline-flex; align-items:center; gap:6px}
.place-importance-legend i {display:block; width:15px; height:11px; border:1px solid var(--place-border); border-radius:3px; background:var(--panel)}

/* Locality opening: observed weather, two compact stations, then a fixed banner. */
.current-weather-group--overview {grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.current-weather-group--overview > .current-weather--foreca {grid-column:1;padding:20px}
.current-weather-group--overview .current-summary {margin:14px 0 16px}
.current-weather-group--overview .weather-symbol--current {width:96px}
.current-weather-group--overview .temperature {font-size:39px;margin-bottom:8px}
.current-weather-group--overview .observations {margin:0;font-size:12px}
.current-weather-group--overview .observations > div {border:0;padding:5px 0;line-height:1.6}
.current-shmu-stack {grid-column:2;display:grid;gap:16px;min-width:0}
.current-shmu-stack .current-weather {padding:22px 20px}
.current-shmu-stack h3 {font-size:16px;line-height:1.4;margin-bottom:8px;gap:6px}
.current-shmu-stack .current-update {font-size:11px;margin-bottom:14px}
.shmu-compact-metrics {display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:12px 16px;margin:0}
.shmu-compact-metrics > div {display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.shmu-compact-metrics .shmu-compact-temperature {grid-row:span 2;display:block}
.current-shmu-stack [data-station-network="precipitation"] .shmu-compact-rain {grid-column:2;grid-row:2}
.shmu-compact-temperature dt {display:flex;align-items:center;gap:7px;font-size:12px;line-height:1.4}
.shmu-compact-temperature dt span {min-width:0}
.shmu-compact-temperature dd {font-size:34px;line-height:1.15;letter-spacing:-.7px;font-weight:600;margin-top:10px;white-space:nowrap}
.shmu-compact-wind dd,.shmu-compact-rain dd {font-size:14px;font-weight:600;text-align:right;line-height:1.5}
.shmu-compact-metrics abbr {text-decoration:none;cursor:help;white-space:nowrap}
.measurement-symbol {display:block;flex:0 0 auto;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--accent)}
.measurement-symbol--rain,.shmu-compact-rain dd {color:#4289de}
.locality-ad {grid-column:3;justify-self:end;width:336px;max-width:100%;color:var(--muted)}
.locality-ad-label {display:block;font-size:9px;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
.locality-ad-slot {width:336px;height:300px;background:var(--subtle);border-radius:6px}
@media(max-width:1100px) {
  .current-weather-group--overview {grid-template-columns:minmax(0,1fr) 336px}
  .current-weather-group--overview > .current-weather--foreca {grid-column:1/-1}
  .current-shmu-stack {grid-column:1}
  .locality-ad {grid-column:2}
}
@media(max-width:760px) {
  .current-weather-group--overview {grid-template-columns:minmax(0,1fr)}
  .current-weather-group--overview > .current-weather--foreca,.current-shmu-stack,.locality-ad {grid-column:1}
  .locality-ad {justify-self:center}
}
@media(max-width:375px) {
  .locality-ad {display:none}
  .current-shmu-stack .current-weather {padding-inline:16px}
  .shmu-compact-temperature dd {font-size:28px}
}

/* Secondary map link stays at the right edge, level with the last title line. */
.location-heading-details {display:flex; align-items:flex-end; gap:20px}
.location-heading-text {flex:1; min-width:0}
.location-heading-text > :last-child {margin-bottom:0}
.location-map-link {flex:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; padding:8px 10px; border:1px solid var(--line); border-radius:6px; color:var(--muted); background:transparent; font-size:13px; line-height:1.3; text-decoration:none}
.location-map-link svg {flex:none; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.location-map-link:hover {color:var(--accent); border-color:var(--accent); background:var(--accent-soft); text-decoration:none}
.location-map-link:focus-visible {outline:2px solid var(--accent); outline-offset:3px}
@media(max-width:760px) {.location-heading-details {gap:12px}.location-map-link {padding-inline:8px}}


/* Fit the unchanged menu text and controls within narrow header widths. */
@media(min-width:761px) and (max-width:840px) {
  .header-inner {gap:16px}
  .header-inner .brand {width:194px}
}
@media(min-width:761px) {
  .header-inner {
    display:grid;
    grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr);
    column-gap:12px;
  }
  .header-inner > .main-nav {margin-left:0}
  .header-inner > .appearance-controls {justify-self:end}
}
@media(min-width:761px) and (max-width:900px) {
  .header-inner > .main-nav {gap:8px}
  .header-inner > .main-nav a {font-size:14px}
}
@media(min-width:1200px) {
  .header-inner > .main-nav {gap:24px}
}
@media(min-width:361px) and (max-width:380px) {
  .main-nav {gap:12px}
}
@media(max-width:360px) {
  .main-nav {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:auto;gap:0 12px}
  .main-nav a {justify-content:center;min-height:44px}
}


/* Three ordered footer link groups, each with four entries. */
.footer-top--groups {align-items:flex-start}
.site-footer .footer-nav {display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.8fr);gap:40px;flex:0 1 760px;min-width:0}
.footer-link-group {display:grid;align-content:start;gap:8px;list-style:none;margin:0;padding:0;min-width:0}
.footer-link-group a {display:block;min-height:28px;padding-block:2px;line-height:1.5}
@media(max-width:900px) {
  .footer-top--groups {flex-direction:column;align-items:flex-start;gap:22px}
  .site-footer .footer-nav {flex:none;width:100%;gap:32px}
}
@media(max-width:640px) {
  .site-footer .footer-nav {grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .footer-link-group:last-child {grid-column:1/-1}
}


/* The longer continent group is now in the middle; keep mobile reading order. */
.site-footer .footer-nav--world-order {grid-template-columns:minmax(0,1fr) minmax(0,1.8fr) minmax(0,1fr)}
.footer-bottom .footer-project-link {white-space:nowrap}
@media(max-width:640px) {
  .site-footer .footer-nav--world-order {grid-template-columns:minmax(0,1fr)}
}


/* Center the project link independently of the credit and back-link widths. */
.footer-bottom--separate {display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start}
.footer-bottom--separate .footer-project-link {justify-self:center}
.footer-bottom--separate .footer-back-link {justify-self:end}
@media(max-width:760px) {
  .footer-bottom--separate {grid-template-columns:minmax(0,1fr)}
  .footer-bottom--separate .footer-project-link {justify-self:start}
}

/* Approved combined appearance controls; legacy rules remain for cached HTML. */
.appearance-controls--combined {position:relative;gap:8px}
.appearance-controls--combined .appearance-toggle {position:relative;box-sizing:border-box;width:42px;height:42px;flex-shrink:0;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--top);color:var(--accent);touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:background-color 200ms ease,border-color 420ms ease,color 420ms ease}
.appearance-controls--combined .appearance-toggle:hover {background:var(--accent-soft)}
.appearance-controls--combined .appearance-toggle::before {content:"";position:absolute;inset:-2px;border-radius:50%}
.appearance-controls--combined .palette-ball {display:block;width:24px;height:24px;pointer-events:none;background:url('/_in/appearance-v3/palette-blue.png') center/contain no-repeat}
:root[data-palette=red] .appearance-controls--combined .palette-ball {background-image:url('/_in/appearance-v3/palette-red.png')}
:root[data-palette=green] .appearance-controls--combined .palette-ball {background-image:url('/_in/appearance-v3/palette-green.png')}
:root[data-palette=yellow] .appearance-controls--combined .palette-ball {background-image:url('/_in/appearance-v3/palette-yellow.png')}
.appearance-controls--combined .palette-cycle.palette-cycle--ready .palette-ball {background-image:none}
.appearance-controls--combined .appearance-toggle:focus-visible {outline-offset:2px}
@media(max-width:760px){
  .appearance-controls--combined {gap:6px}
  .appearance-controls--combined .appearance-toggle {width:38px;height:38px}
  .appearance-controls--combined .appearance-toggle::before {inset:-3px}
  .appearance-controls--combined .palette-ball {width:22px;height:22px}
}
@media(prefers-reduced-motion:reduce){.appearance-controls--combined .appearance-toggle,.appearance-controls--combined .appearance-mode-badge {transition:none}}

/* A solid profile outline carries contrast; only the fill uses subtle relief. */
.appearance-controls--combined {
  --icon-face-top:var(--panel);
  --icon-face-middle:var(--top);
  --icon-face-bottom:var(--subtle);
  --icon-gleam:var(--ink);
}
@supports (color:color-mix(in srgb,red,white)) {
  .appearance-controls--combined {
    --icon-face-top:color-mix(in srgb,var(--accent) 22%,var(--top));
    --icon-face-middle:color-mix(in srgb,var(--accent) 7%,var(--top));
    --icon-face-bottom:color-mix(in srgb,var(--accent) 18%,var(--top));
    --icon-gleam:color-mix(in srgb,var(--top) 75%,var(--accent));
  }
}
.appearance-controls--combined .appearance-symbols {color:var(--accent);position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.appearance-controls--combined .appearance-theme {color:var(--accent)}
.appearance-controls--combined .appearance-toggle svg {display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.appearance-controls--combined .appearance-face {fill:var(--icon-face-middle);fill:url(#appearance-theme-face) var(--icon-face-middle);stroke:var(--accent);stroke-opacity:1}
.appearance-controls--combined .appearance-screen {fill:var(--top);stroke:none;opacity:.8}
.appearance-controls--combined .appearance-gleam {fill:none;stroke:var(--icon-gleam);stroke-width:.85;opacity:.85}
.appearance-controls--combined .appearance-manual {display:none;width:24px;height:24px;pointer-events:none}
:root[data-theme-mode="light"] .appearance-controls--combined .appearance-manual-sun,:root[data-theme-mode="dark"] .appearance-controls--combined .appearance-manual-moon {display:block}
.appearance-controls--combined .appearance-device {display:none;width:25px;height:25px;transform:translate(-1px,-1px);pointer-events:none}
:root[data-theme-mode="system"] .appearance-controls--combined .appearance-laptop {display:block}
.appearance-controls--combined .appearance-mode-badge {display:none;position:absolute;right:4px;bottom:4px;width:14px;height:14px;padding:1px;box-sizing:border-box;place-items:center;background:var(--top);border-radius:50%;pointer-events:none;transition:background-color 200ms ease}
:root[data-theme-mode="system"] .appearance-controls--combined .appearance-mode-badge {display:grid}
.appearance-controls--combined .appearance-theme:hover .appearance-mode-badge {background:var(--accent-soft)}
.appearance-controls--combined .appearance-mini {display:none;width:12px;height:12px}
:root[data-theme="light"] .appearance-controls--combined .appearance-mini-sun,:root[data-theme="dark"] .appearance-controls--combined .appearance-mini-moon {display:block}
@media(max-width:760px) {
  :root[data-theme-mode="system"] .appearance-controls--combined .appearance-laptop {display:none}
  :root[data-theme-mode="system"] .appearance-controls--combined .appearance-phone {display:block}
  .appearance-controls--combined .appearance-device {width:24px;height:24px}
  .appearance-controls--combined .appearance-mode-badge {right:3px;bottom:3px}
}

@media(prefers-reduced-motion:reduce){.appearance-controls--combined .appearance-mode-badge{transition:none}}

/* Three complete outward pulses accompany the profile-colored countdown. */
.appearance-controls--combined .palette-cycle {-webkit-touch-callout:none}
.appearance-controls--combined .palette-cycle .palette-hold {position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);pointer-events:none;opacity:0;transform:rotate(-90deg);transition:opacity 120ms ease}
.appearance-controls--combined .palette-cycle--holding .palette-hold,
.appearance-controls--combined .palette-cycle--hold-complete .palette-hold {opacity:1}
.appearance-controls--combined .palette-cycle {isolation:isolate}
.appearance-controls--combined .palette-cycle::after {content:"";position:absolute;inset:-4px;border:2px solid var(--accent);border-radius:50%;box-shadow:0 0 12px -3px var(--accent);pointer-events:none;opacity:0;z-index:-1}
.appearance-controls--combined .palette-cycle--holding::after {animation:palette-hold-pulse var(--palette-hold-pulse-duration,900ms) ease-out var(--palette-hold-pulse-count,3)}
@keyframes palette-hold-pulse {from{transform:scale(.95);opacity:.4}to{transform:scale(2.1);opacity:0}}
.appearance-controls--combined .palette-hold-track {fill:none;stroke:var(--line);stroke-width:1.5}
.appearance-controls--combined .palette-hold-meter {fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--palette-hold-progress,0))}
@media(prefers-reduced-motion:reduce){.appearance-controls--combined .palette-cycle .palette-hold {transition:none}.appearance-controls--combined .palette-cycle--holding::after {animation:none;transform:scale(1.2);opacity:.2}}

/* One quiet outer capsule groups the two individually interactive circles. */
.appearance-controls--oval {
  --appearance-control-gap:3px;
  flex-direction:column;
  gap:var(--appearance-control-gap);
  isolation:isolate;
}
.appearance-controls--oval::before {content:"";position:absolute;inset:-4px;border:1px solid var(--line);border-radius:999px;background:var(--top);opacity:.9;pointer-events:none;z-index:-1;transition:background-color 160ms ease,border-color 160ms ease}
.appearance-controls--oval:hover::before {background:var(--subtle)}
.appearance-controls--oval .appearance-toggle:active {background:var(--accent-soft);border-color:var(--accent)}
@supports selector(:has(*)) {
  .appearance-controls--oval:has(.appearance-toggle:active)::before,
  .appearance-controls--oval:has(.appearance-toggle:focus-visible)::before,
  .appearance-controls--oval:has(.palette-cycle--holding)::before {background:var(--subtle)}
}
@supports (background:color-mix(in srgb,red,white)) {
  .appearance-controls--oval .appearance-toggle:active {background:color-mix(in srgb,var(--accent) 16%,var(--top))}
}
@media(prefers-reduced-motion:reduce){.appearance-controls--oval::before{transition:none}}

@media (min-width:761px) {
  /* Keep the capsule inside the visible logo height, including its outline. */
  .appearance-controls--oval {
    --appearance-toggle-size:38px;
    flex-direction:row;
    margin-block-start:2px;
  }
  .appearance-controls--oval::before {inset:-2px -3px}
  .appearance-controls--oval .appearance-toggle {
    width:var(--appearance-toggle-size);
    height:var(--appearance-toggle-size);
  }
  .appearance-controls--oval :is(.palette-ball,.appearance-manual) {
    width:calc(var(--appearance-toggle-size) * .58);
    height:calc(var(--appearance-toggle-size) * .58);
  }
  .appearance-controls--oval .appearance-device {
    width:calc(var(--appearance-toggle-size) * .60);
    height:calc(var(--appearance-toggle-size) * .60);
  }
  .appearance-controls--oval .appearance-mode-badge {
    right:3px;
    bottom:3px;
    width:calc(var(--appearance-toggle-size) * .34);
    height:calc(var(--appearance-toggle-size) * .34);
    padding:0;
  }
  .appearance-controls--oval .appearance-mini {
    width:calc(var(--appearance-toggle-size) * .29);
    height:calc(var(--appearance-toggle-size) * .29);
  }
}
@media (min-width:761px) and (max-width:840px) {
  .appearance-controls--oval {--appearance-toggle-size:33px}
}
@media (max-width:760px) {
  .header-inner > .appearance-controls--oval {
    align-self:flex-start;
    /* Reserve one 38 px button in the logo row, as before. */
    margin-block-end:calc(-38px - var(--appearance-control-gap));
  }
}
@media (max-width:360px) {
  .header-inner > .main-nav {padding-inline-end:46px}
}
@media (min-width:361px) and (max-width:430px) {
  /* The capsule ends in the space above the centered menu labels. */
  .header-inner > .appearance-controls--oval {
    top:calc(var(--mobile-brand-reference-height) - 58px);
  }
  .header-inner > .appearance-controls--oval::before {
    top:-2px;
    bottom:-2px;
  }
}

/* A fixed flag column keeps every wrapped country-name line aligned with its text. */
.places--countries a{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:10px;align-items:start;padding-right:0}
.places--countries .place-country-flag{display:block;width:24px;height:18px;object-fit:contain;margin-top:3px;border-radius:2px;box-shadow:0 0 0 1px var(--line)}
.places--countries .place-country-name{min-width:0;overflow-wrap:anywhere}
@media(max-width:800px){.places--countries li{padding-inline:14px}.places--countries a{grid-template-columns:20px minmax(0,1fr);column-gap:8px}.places--countries .place-country-flag{width:20px;height:15px}}

/* Small original partner logos, with a separate group ready for social links. */
.partner-links {display:flex; align-items:center; justify-content:center; gap:18px; min-width:0}
.partner-links-group {display:flex; align-items:center; gap:10px; flex:none}
.partner-links-social {border-left:1px solid var(--line); padding-left:18px}
.partner-link {display:flex; flex:none; align-items:center; justify-content:center; gap:9px; min-height:58px; padding:6px 10px; border:1px solid var(--line); border-radius:9px; background:var(--subtle); color:var(--muted); text-decoration:none}
.partner-link:hover {border-color:var(--accent); background:var(--accent-soft); color:var(--ink); text-decoration:none}
.partner-logo {display:block; flex:none; padding:3px; border-radius:4px; background:#fff; line-height:0}
.partner-logo img {display:block; width:auto; height:38px}
.partner-social-name {font-size:14px; line-height:1.3; font-weight:500; white-space:nowrap}
.partner-social-icon {display:block; flex:none; width:26px; height:26px}
.partner-link--social {min-width:0; flex-direction:row; padding:6px 10px; gap:14px; border:1px solid var(--line); border-radius:9px; background:var(--subtle); color:var(--ink)}
.partner-link--social:hover {border-color:var(--accent); background:var(--accent-soft); color:var(--ink)}
@media(max-width:760px){
  .partner-logo img {height:32px}
  .partner-link {min-height:54px; padding:6px 9px}
}
@media(max-width:540px){
  .partner-links {gap:6px}
  .partner-links-group {gap:4px}
  .partner-links-social {padding-left:6px}
  .partner-link {min-height:54px; padding:4px}
  .partner-logo {padding:2px}
  .partner-logo img {height:24px}
  .partner-link--social {padding:6px 2px; gap:11px}
  .partner-social-icon {width:22px; height:22px}
  .partner-social-name {font-size:13px}
}

@media(max-width:360px){
  .partner-link {padding:2px}
  .partner-logo {padding:1px}
  .partner-logo img {height:22px}
}