/* ============================================================
   Two Cities, One Climate — styles on top of Bootstrap 5.3
   Light and dark colours are both defined here; Bootstrap switches
   them with <html data-bs-theme="light|dark"> (see js/theme.js).
   ============================================================ */

/* ---------- colour tokens ---------- */
/* Palette "clear sky": light sky background, white surfaces, sky-blue + sun-yellow accents.
   Dark mode is a soft night sky, not black. Barreiro = warm orange, Espoo = cool blue. */
:root, [data-bs-theme="light"] {
  --bs-body-bg: #eef6fd;
  --bs-body-color: #12293f;
  --bs-secondary-color: #4d6479;
  --bs-border-color: #d5e5f3;
  --bs-primary: #0a71bf;
  --bs-primary-rgb: 10, 113, 191;
  --bs-link-color: #086bb4;
  --bs-link-color-rgb: 8, 107, 180;
  --page-bg: linear-gradient(180deg, #dcefff 0, #eef6fd 420px, #f7fbff 100%);
  --surface: #ffffff;
  --surface-2: #f2f8fe;
  --nav-bg: #ffffff;
  --nav-solid: #ffffff;
  --nav-ink: #12293f;
  --nav-muted: #4d6479;
  --nav-hover: #eaf4fd;
  --nav-active-bg: #dceefe;
  --nav-active-ink: #075f9f;
  --nav-line: #d5e5f3;
  --sun: #ffb020;
  --pt: #e0603a;
  --fi: #0a71bf;
  --warn: #b26b00;
  --ok: #15805a;
  --card-shadow: 0 1px 2px rgba(18, 60, 110, .05), 0 6px 20px rgba(18, 60, 110, .07);
}
[data-bs-theme="dark"] {
  --bs-body-bg: #101d2c;
  --bs-body-color: #e7eff7;
  --bs-secondary-color: #a3b4c6;
  --bs-border-color: #2a3d53;
  --bs-primary: #5cb8ff;
  --bs-primary-rgb: 92, 184, 255;
  --bs-link-color: #86cbff;
  --bs-link-color-rgb: 134, 203, 255;
  --page-bg: linear-gradient(180deg, #13243a 0, #101d2c 420px, #0f1a28 100%);
  --surface: #172839;
  --surface-2: #1d3044;
  --nav-bg: #14243a;
  --nav-solid: #14243a;
  --nav-ink: #e7eff7;
  --nav-muted: #a3b4c6;
  --nav-hover: #1d3248;
  --nav-active-bg: #23405e;
  --nav-active-ink: #bfe3ff;
  --nav-line: #2a3d53;
  --sun: #ffc24d;
  --pt: #ff9468;
  --fi: #5cb8ff;
  --warn: #f2b84b;
  --ok: #4fd39b;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .18);
}

/* ---------- base ---------- */
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--page-bg);
  background-attachment: fixed;
  color: var(--bs-body-color);
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease;
}
.num { font-variant-numeric: tabular-nums; }
.text-pt { color: var(--pt) !important; }
.text-fi { color: var(--fi) !important; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.swatch.pt { background: var(--pt); } .swatch.fi { background: var(--fi); }

/* ---------- app layout: sidebar (PC) / top + bottom bar (phone) ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; height: 100dvh; width: 248px; flex: none; overflow-y: auto; scrollbar-width: thin;
  background: var(--nav-bg); color: #fff;
  flex-direction: column; gap: 22px; padding: 20px 16px;
  z-index: 20;
}
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.brand:hover { color: #fff; }
.logo {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, #ffcf5a, #f39a3b); color: #fff; font-size: 20px;
  box-shadow: 0 4px 12px rgba(243, 154, 59, .35);
}
.brand-text { font-weight: 700; font-size: 15px; line-height: 1.2; }
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-link {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  color: rgba(255,255,255,.75); text-decoration: none; font-weight: 500;
}
.side-link i { font-size: 18px; }
.side-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.side-link.active { background: rgba(255,255,255,.15); color: #fff; }
.side-prefs { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.offcanvas .side-prefs { margin-top: 0; }
.pref-label { font-size: 11px; opacity: .65; margin-bottom: 6px; font-weight: 600; }
.sidebar .btn-pref { color: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.2); background: transparent; }
.sidebar .btn-pref:hover { background: rgba(255,255,255,.1); color: #fff; }
.sidebar .btn-pref.active { background: #fff; color: #14233f; border-color: #fff; }
.sidebar .pref-select { background-color: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.2); }
.sidebar .pref-select option { color: #000; }
.offcanvas .btn-pref { border: 1px solid var(--bs-border-color); color: var(--bs-body-color); }
.offcanvas .btn-pref.active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.offcanvas { background: var(--surface); }

.mobilebar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; background: var(--nav-solid); color: #fff;
}
.btn-icon { color: #fff; font-size: 20px; padding: 4px 8px; border: 0; }
.btn-icon:hover, .btn-icon:focus { color: #fff; background: rgba(255,255,255,.1); }
.bottomnav {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  display: flex; justify-content: space-around;
  background: var(--nav-solid); padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}
.bottom-link {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: rgba(255,255,255,.7); text-decoration: none; font-size: 11px; padding: 6px 18px; border-radius: 10px;
}
.bottom-link i { font-size: 20px; }
.bottom-link.active { color: #fff; background: rgba(255,255,255,.12); }

/* ---------- hero with weather pictures ---------- */
.hero { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.scene {
  position: relative; overflow: hidden; color: #fff;
  background-color: #2b4a86; background-size: cover; background-position: center;
  padding: 28px 32px 22px; min-height: 460px;
  display: flex; flex-direction: column; gap: 14px;
  transition: background-image .6s ease;
}
.scene::before { /* darkens the bottom so white text stays readable on any picture */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* a dark veil over every picture, stronger at the bottom, so white text is readable even on white clouds */
  background: linear-gradient(180deg, rgba(8,14,30,.42) 0%, rgba(8,14,30,.22) 38%, rgba(8,14,30,.34) 62%, rgba(8,14,30,.66) 100%);
}
.scene > * { position: relative; z-index: 2; }
.scene.compact { min-height: 0; padding: 26px 32px 30px; }
.scene-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.city-name { font-size: 24px; font-weight: 700; display: flex; align-items: center; gap: 10px; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.flag { display: inline-flex; width: 28px; height: 19px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.25); flex: none; vertical-align: -3px; }
.flag svg { width: 100%; height: 100%; display: block; }
.table .flag, .stat .flag, .modal .flag { width: 21px; height: 14px; }
.city-sub { font-size: 14px; opacity: .92; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.big-temp { font-size: clamp(64px, 8vw, 104px); font-weight: 200; line-height: .95; letter-spacing: -.04em; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.cond { font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 8px; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.cond-line { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.hilo { font-size: 16px; font-weight: 600; text-shadow: 0 1px 8px rgba(0,0,0,.5); display: inline-flex; gap: 4px; align-items: center; }
.hilo i { opacity: .8; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); padding: 4px; }
.fact { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.fact + .fact { border-left: 1px solid rgba(255,255,255,.12); }
.fact i { font-size: 20px; opacity: .85; }
.fact span { display: block; font-size: 11px; opacity: .8; }
.fact b { display: block; font-size: 17px; font-weight: 600; }
.scene-foot { font-size: 12px; opacity: .85; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.cond i { font-size: 26px; }
.glass {
  background: rgba(10, 18, 36, .38);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-radius: 16px;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 7px 12px; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.chip b { font-weight: 600; }
.status-badge { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
.status-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* coloured tint over a dark glass base, so the text stays readable on bright skies too */
.status-on { background: linear-gradient(rgba(60,207,142,.22), rgba(60,207,142,.22)), rgba(10,18,36,.62); color: #b8ffd9; border: 1px solid rgba(60,207,142,.55); }
.status-off { background: linear-gradient(rgba(255,99,99,.25), rgba(255,99,99,.25)), rgba(10,18,36,.62); color: #ffd0d0; border: 1px solid rgba(255,99,99,.6); }
.status-weird { background: linear-gradient(rgba(255,196,0,.22), rgba(255,196,0,.22)), rgba(10,18,36,.62); color: #ffe8a3; border: 1px solid rgba(255,196,0,.6); }

/* hourly strip inside the picture */
.hourly { display: flex; gap: 2px; overflow-x: auto; padding: 8px; scroll-snap-type: x mandatory; scrollbar-width: none; margin-top: auto;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.hourly::-webkit-scrollbar { display: none; }
.hour { flex: 0 0 62px; text-align: center; padding: 6px 2px; border-radius: 12px; scroll-snap-align: start; font-size: 13px; }
.hour.now { background: rgba(255,255,255,.14); }
.hour .h-time { opacity: .85; }
.hour .h-ico { font-size: 22px; line-height: 1.6; display: block; }
.hour .h-temp { font-weight: 600; font-size: 15px; }

/* the difference badge sitting between the two pictures */
@media (min-width: 768px) {
  .hero > .scene:first-child { padding-right: 84px; }
  .hero > .scene:last-child { padding-left: 84px; }
  .hero > .scene:first-child .hourly, .hero > .scene:first-child .facts { margin-right: -52px; }
  .hero > .scene:last-child .hourly, .hero > .scene:last-child .facts { margin-left: -52px; }
}
/* each picture adapts to its OWN width (tablet, small laptop, sidebar open…):
   when it is narrow the four facts go 2 × 2 and stay clear of the difference circle */
.scene { container-type: inline-size; }
@container (max-width: 579px) {
  .facts { grid-template-columns: repeat(2, 1fr); margin-left: 0 !important; margin-right: 0 !important; }
  .fact:nth-child(3) { border-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.12); }
}
.delta {
  position: absolute; left: 50%; top: 37%; transform: translate(-50%, -50%); z-index: 5;
  width: 116px; height: 116px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: rgba(13, 22, 40, .55); color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.delta small { font-size: 9px; opacity: .8; }
.delta b { font-size: 21px; font-weight: 700; line-height: 1.15; }
.delta span { font-size: 13px; opacity: .9; }

/* rain / snow / lightning animations over the picture */
.fx-rain::after, .fx-snow::after {
  content: ""; position: absolute; inset: -50% 0 0 0; z-index: 1; pointer-events: none; opacity: .55;
}
.fx-rain::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg stroke='white' stroke-width='1.4' stroke-linecap='round' opacity='.7'%3E%3Cline x1='10' y1='5' x2='6' y2='25'/%3E%3Cline x1='55' y1='40' x2='51' y2='60'/%3E%3Cline x1='95' y1='15' x2='91' y2='35'/%3E%3Cline x1='30' y1='80' x2='26' y2='100'/%3E%3Cline x1='80' y1='75' x2='76' y2='95'/%3E%3C/g%3E%3C/svg%3E");
  animation: fall 0.7s linear infinite;
}
.fx-snow::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='white' opacity='.85'%3E%3Ccircle cx='15' cy='20' r='2.5'/%3E%3Ccircle cx='70' cy='50' r='2'/%3E%3Ccircle cx='115' cy='15' r='3'/%3E%3Ccircle cx='40' cy='100' r='2'/%3E%3Ccircle cx='100' cy='95' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  animation: fall 9s linear infinite;
}
.fx-storm::before { animation: flash 7s infinite; }
@keyframes fall { to { transform: translateY(50%); } }
@keyframes flash { 0%, 91%, 95%, 100% { background-color: transparent; } 92%, 94% { background-color: rgba(255,255,230,.25); } }
@media (prefers-reduced-motion: reduce) { .fx-rain::after, .fx-snow::after, .fx-storm::before { animation: none; } }

/* ---------- animated sky (built by setScene in js/common.js) ----------
   order, bottom to top: sky layers (0) → dark veil (1) → rain/snow (1) → text (2).
   Only transform and opacity are animated, so it stays smooth on phones.
   --phase (seconds) keeps every layer in step after a re-render; --k = wind factor. */
.scene::before { z-index: 1; }
.scene > .sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sky-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sky-cloudsBack  { --amp: 2.5%; animation: drift calc(110s / var(--k, 1)) ease-in-out infinite alternate; }
.sky-cloudsFront { --amp: 5%;   animation: drift calc(70s / var(--k, 1)) ease-in-out infinite alternate; }
.sky-fog   { --amp: 6%; animation: drift 80s ease-in-out infinite alternate, breathe 14s ease-in-out infinite alternate; }
.sky-glow  { animation: breathe 9s ease-in-out infinite alternate; }
.sky-stars1 { animation: twinkle 4.3s ease-in-out infinite alternate; }
.sky-stars2 { animation: twinkle 6.1s ease-in-out infinite alternate-reverse; }
.sky-bolt  { opacity: 0; animation: strike 7s linear infinite; }
.sky-flash { position: absolute; inset: 0; background: rgba(255,255,230,.22); opacity: 0; animation: strike 7s linear infinite; }
.shooting-star {
  position: absolute; top: 12%; left: 10%; width: 110px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff); opacity: 0;
  transform: rotate(16deg); transform-origin: left center; animation: shoot 14s linear infinite;
}
.sky > * { animation-delay: calc(var(--phase, 0) * -1s); }
.sky > :not(.sky-back):not(.sky-front) { will-change: transform, opacity; } /* only moving layers get their own GPU layer */
.sky.paused > * { animation-play-state: paused; }
/* glass over moving clouds must be re-blurred every frame: smaller blur on phones = less work */
@media (max-width: 767.98px) { .glass { backdrop-filter: blur(8px) saturate(130%); -webkit-backdrop-filter: blur(8px) saturate(130%); } }
.fx-storm:has(.sky-flash)::before { animation: none; } /* the sky flashes together with its lightning */

@keyframes drift   { from { transform: translateX(calc(var(--amp) * -1)); } to { transform: translateX(var(--amp)); } }
@keyframes breathe { from { opacity: .72; } to { opacity: 1; } }
@keyframes twinkle { from { opacity: 1; } to { opacity: .45; } }
@keyframes strike  { 0%, 90%, 92.5%, 100% { opacity: 0; } 90.6%, 91.8% { opacity: 1; } 91.2% { opacity: .3; } }
@keyframes shoot   { 0%, 90% { opacity: 0; transform: rotate(16deg) translateX(0); }
                     91% { opacity: .9; } 96% { opacity: 0; transform: rotate(16deg) translateX(280px); }
                     100% { opacity: 0; transform: rotate(16deg) translateX(280px); } }

@media (prefers-reduced-motion: reduce) {
  .sky > * { animation: none !important; will-change: auto; }
  .sky-bolt { opacity: 1; }            /* still picture, as before */
  .sky-flash, .shooting-star { display: none; }
}

/* ---------- content cards ---------- */
.page { padding: 24px 32px 40px; }
.card-x { background: var(--surface); border: 0; border-radius: 18px; box-shadow: var(--card-shadow); padding: 22px 24px; }
.card-x h2, .fc-city h3 { color: var(--bs-body-color); }
.card-x h2 { font-size: 18px; font-weight: 700; margin: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.seg .btn { font-size: 13px; padding: 4px 12px; }
.seg .btn-outline-secondary { --bs-btn-color: var(--bs-secondary-color); --bs-btn-border-color: var(--bs-border-color); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-active-color: #fff; --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-border-color: var(--bs-border-color); }
.headline { font-size: 18px; color: var(--bs-secondary-color); margin-bottom: 16px; }
.headline strong { color: var(--bs-body-color); }
.table { --bs-table-bg: transparent; margin: 0; }
.table > :not(caption) > * > * { padding: 10px 12px; border-color: var(--bs-border-color); }
.table thead th { font-size: 12px; color: var(--bs-secondary-color); font-weight: 600; white-space: nowrap; }
.table td { white-space: nowrap; vertical-align: middle; }
.cmp td.r, .cmp th.r { text-align: right; }
.cmp td.r { font-weight: 600; font-variant-numeric: tabular-nums; }
.cmp td.diff { color: var(--bs-primary); }
.when { display: block; font-weight: 400; font-size: 12px; color: var(--bs-secondary-color); }
.chart-box { position: relative; height: 320px; }

/* comparison tiles */
.cmp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.cmp-tile { background: var(--surface-2); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.cmp-k { font-size: 12px; color: var(--bs-secondary-color); font-weight: 600; }
.cmp-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cmp-city { font-size: 14px; color: var(--bs-secondary-color); white-space: nowrap; }
.cmp-row b { font-size: 18px; font-weight: 600; text-align: right; }
.cmp-row b small { display: block; font-size: 11px; font-weight: 400; color: var(--bs-secondary-color); }
.cmp-diff { margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--bs-border-color); font-size: 13px; color: var(--bs-secondary-color); }
.cmp-diff b { color: var(--bs-primary); }

/* 10-day forecast with temperature range bars */
.fc-city h3 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fc-row { display: grid; grid-template-columns: 90px 34px 44px 1fr 44px; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--bs-border-color); font-size: 14px; }
.fc-row:last-child { border-bottom: 0; }
.fc-day b { display: block; font-weight: 600; }
.fc-day span { color: var(--bs-secondary-color); font-size: 12px; }
.fc-ico { font-size: 22px; text-align: center; }
.fc-rain { color: #3b8be0; font-size: 12px; font-weight: 600; text-align: center; }
.fc-min { color: var(--bs-secondary-color); text-align: right; font-variant-numeric: tabular-nums; }
.fc-max { font-weight: 700; font-variant-numeric: tabular-nums; }
.range-track { position: relative; height: 6px; border-radius: 6px; background: var(--surface-2); }
.range-fill { position: absolute; top: 0; bottom: 0; border-radius: 6px; }

/* weather icon colours */
.wx-sun { color: #f6b73c; } .wx-moon { color: #c9d4ff; } .wx-cloud { color: #9aa8bb; }
.wx-rain { color: #4a9be8; } .wx-snow { color: #a8d4ff; } .wx-storm { color: #8c7cf0; }
.scene .wx-cloud, .scene .wx-rain, .scene .wx-snow, .scene .wx-storm { color: #fff; }

/* stats */
.stat { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; height: 100%; }
.stat .k { font-size: 11px; color: var(--bs-secondary-color); font-weight: 600; }
.stat .v { font-size: 20px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat .v small { font-size: 12px; color: var(--bs-secondary-color); font-weight: 400; display: block; }
tr.is-weird > td { background: rgba(240, 180, 41, .10) !important; }
.badge-weird { background: rgba(240,180,41,.18); color: var(--warn); }
.badge-ok { background: rgba(24,135,90,.14); color: var(--ok); }
.badge-edited { background: rgba(var(--bs-primary-rgb), .14); color: var(--bs-primary); }
.badge-src-om { background: rgba(var(--bs-primary-rgb), .14); color: var(--bs-primary); }
.badge-src-mock { background: #f6b73c; color: #3a2700; }
.badge-src-live { background: #3ccf8e; color: #04301c; }
.badge-src-om, .badge-src-mock, .badge-src-live { white-space: normal; text-align: left; line-height: 1.3; } /* long Finnish/Portuguese text wraps on phones */

/* forms in cards */
.form-control, .form-select { background-color: var(--surface-2); border-color: var(--bs-border-color); }
.form-label { font-size: 12px; color: var(--bs-secondary-color); font-weight: 600; margin-bottom: 4px; }
.modal-content { background: var(--surface); border: 0; border-radius: 18px; }
.nav-tabs { --bs-nav-tabs-border-color: var(--bs-border-color); --bs-nav-tabs-link-active-bg: var(--surface); --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--surface); }
.nav-tabs .nav-link { color: var(--bs-secondary-color); font-weight: 500; }
.nav-tabs .nav-link.active { color: var(--bs-body-color); }
/* the card overlaps only the empty bottom padding of the pictures, never their text */
.login-wrap { max-width: 420px; margin: -48px auto 0; position: relative; z-index: 5; }
.scene.compact .num { white-space: nowrap; }
.change-line { display: block; font-size: 13px; }
.change-line s { color: var(--bs-secondary-color); }

footer { text-align: center; color: var(--bs-secondary-color); font-size: 12px; padding: 8px 16px 28px; }

/* ---------- tablet & phone ---------- */
@media (max-width: 991.98px) {
  .page { padding: 20px 16px 96px; }
  footer { padding-bottom: 96px; }
}
@media (max-width: 767.98px) {
  .hero { grid-template-columns: 1fr; }
  .scene { min-height: 400px; padding: 20px 16px 16px; }
  .scene.compact { padding: 20px 16px 24px; }
  .delta { position: relative; left: auto; top: auto; transform: none; width: auto; height: auto; border-radius: 0; flex-direction: row; gap: 12px; padding: 10px 16px; backdrop-filter: none; background: var(--nav-solid); border: 0; box-shadow: none; }
  .delta b { font-size: 18px; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .fact:nth-child(3) { border-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.12); }
  .card-x { padding: 16px; border-radius: 16px; }
  .chart-box { height: 260px; }
  .fc-row { grid-template-columns: 70px 28px 38px 1fr 38px; gap: 8px; }
  .login-wrap { margin-top: -38px; }
  .cmp { font-size: 14px; }
  .cmp > :not(caption) > * > * { padding: 8px 6px; }
  .headline { font-size: 16px; }
}

/* headings keep the page colours whatever Bootstrap theme is loaded */
.scene h1, .scene .h3 { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.3); }
.modal-title, .offcanvas-title, .login-wrap h2 { color: var(--bs-body-color); }

/* safety net: these few Bootstrap helpers still work if vendor/bootstrap is missing */
.d-none { display: none !important; }
@media (min-width: 992px) { .d-lg-none { display: none !important; } .d-lg-flex { display: flex !important; } }
@media (min-width: 768px) { .d-md-inline { display: inline !important; } .d-md-block { display: block !important; } }

/* ---------- accessibility (WCAG 2.1 AA) ---------- */
/* visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, .hourly:focus-visible {
  outline: 3px solid #ffbf47; outline-offset: 2px; box-shadow: none;
}
/* 44 px touch targets on phones */
@media (max-width: 991.98px) {
  .offcanvas .btn-pref, .offcanvas .pref-select, .btn-icon, .seg .btn { min-height: 44px; }
  .bottom-link { min-height: 48px; justify-content: center; }
}
.fact span, .cmp-k, .stat .k, .pref-label, .form-label, .table thead th { font-size: 12.5px; }

/* ---------- web interface guidelines (vercel-labs) ---------- */
html { -webkit-tap-highlight-color: transparent; }
a, button, select, input, label, .btn { touch-action: manipulation; }
.offcanvas, .modal { overscroll-behavior: contain; }
/* side-scrolling strips only keep the SIDEWAYS scroll; up/down must still move the page */
.hourly, .table-responsive { overscroll-behavior-x: contain; overscroll-behavior-y: auto; }
h1, h2, h3, .headline { text-wrap: balance; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: #ffbf47; color: #1a1300; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }
main:focus { outline: none; }

/* ============================================================
   WEATHER LOOK — light navigation instead of the dark-navy panel
   ============================================================ */
.sidebar { background: var(--nav-bg); color: var(--nav-ink); border-right: 1px solid var(--nav-line); }
.brand, .brand:hover { color: var(--nav-ink); }
.side-link { color: var(--nav-muted); }
.side-link:hover { background: var(--nav-hover); color: var(--nav-ink); }
.side-link.active { background: var(--nav-active-bg); color: var(--nav-active-ink); font-weight: 600; }
.pref-label { color: var(--nav-muted); opacity: 1; }
.sidebar .btn-pref { color: var(--nav-muted); border-color: var(--nav-line); background: transparent; }
.sidebar .btn-pref:hover { background: var(--nav-hover); color: var(--nav-ink); }
.sidebar .btn-pref.active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.sidebar .pref-select { background-color: var(--surface-2); color: var(--nav-ink); border-color: var(--nav-line); }
.sidebar .pref-select option { color: var(--nav-ink); background: var(--surface); }
.mobilebar { background: var(--nav-solid); color: var(--nav-ink); border-bottom: 1px solid var(--nav-line); }
.btn-icon, .btn-icon:hover, .btn-icon:focus { color: var(--nav-ink); }
.btn-icon:hover { background: var(--nav-hover); }
.bottomnav { background: var(--nav-solid); border-top: 1px solid var(--nav-line); box-shadow: 0 -4px 16px rgba(18, 60, 110, .06); }
.bottom-link { color: var(--nav-muted); }
.bottom-link.active { color: var(--nav-active-ink); background: var(--nav-active-bg); }
.logo { background: linear-gradient(135deg, #ffd166, var(--sun)); box-shadow: 0 4px 12px rgba(255, 176, 32, .35); }

/* the difference between the cities: a white "thermometer" disc */
.delta { background: var(--surface); color: var(--bs-body-color); border: 0; box-shadow: 0 8px 28px rgba(10, 40, 80, .28); backdrop-filter: none; -webkit-backdrop-filter: none; }
.delta small { color: var(--bs-secondary-color); opacity: 1; }
.delta b { color: var(--bs-primary); }
.delta span { color: var(--bs-secondary-color); opacity: 1; }
@media (max-width: 767.98px) {
  .delta { background: var(--surface); border-bottom: 1px solid var(--nav-line); box-shadow: none; }
}

/* panels over the pictures: sky-tinted instead of near-black */
.glass { background: rgba(12, 46, 82, .34); border-color: rgba(255, 255, 255, .2); }

/* cards: a hint of sky in the border, sun-yellow for the active segment highlight */
.card-x { border: 1px solid var(--nav-line); }
.cmp-tile, .stat { background: var(--surface-2); }
.headline strong { color: var(--bs-body-color); }
/* dark mode: light-blue active buttons need dark text (white on #5cb8ff fails contrast) */
[data-bs-theme="dark"] .sidebar .btn-pref.active,
[data-bs-theme="dark"] .offcanvas .btn-pref.active,
[data-bs-theme="dark"] .seg .btn.active,
[data-bs-theme="dark"] .btn-primary { color: #062238; }

/* ---------- readability over the weather pictures (measured: text must reach WCAG on the brightest part) ---------- */
.scene::before { background: linear-gradient(180deg, rgba(8,24,44,.55) 0%, rgba(8,24,44,.42) 40%, rgba(8,24,44,.46) 62%, rgba(8,24,44,.70) 100%); }
.scene.compact::before { background: rgba(8,24,44,.55); }
.fx-rain::after { opacity: .3; }
.fx-snow::after { opacity: .4; }

/* admin login sits below the city pictures, not on top of them */
.login-wrap, .pw-wrap { margin-top: 8px !important; }

/* appearance: hint shown while the site follows the device's light/dark setting */
.pref-hint { font-size: 12px; color: var(--nav-muted); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.offcanvas .pref-hint { color: var(--bs-secondary-color); }

/* ============================================================
   OPTION A (2026-11-05): two windows, two identities — lighter pictures
   ============================================================ */
.scene { isolation: isolate; }
.scene > .bgimg {
  position: absolute; inset: -3%; z-index: -1; pointer-events: none;
  background-size: cover; background-position: center;
  animation: kenburns 80s ease-in-out infinite alternate; will-change: transform;
}
.scene:last-child > .bgimg { animation-delay: -40s; }
@keyframes kenburns { from { transform: scale(1) translate3d(-1.5%, 0, 0); } to { transform: scale(1.05) translate3d(1.5%, -1%, 0); } }
/* warm tint for Barreiro, cool tint for Espoo, under the same readability veil */
.tint-pt::before { background: linear-gradient(200deg, rgba(255,170,90,.24) 0%, rgba(255,170,90,0) 55%), linear-gradient(180deg, rgba(8,24,44,.55) 0%, rgba(8,24,44,.42) 40%, rgba(8,24,44,.46) 62%, rgba(8,24,44,.70) 100%); }
.tint-fi::before { background: linear-gradient(200deg, rgba(120,190,255,.24) 0%, rgba(120,190,255,0) 55%), linear-gradient(180deg, rgba(8,24,44,.55) 0%, rgba(8,24,44,.42) 40%, rgba(8,24,44,.46) 62%, rgba(8,24,44,.70) 100%); }
.scene.compact.tint-pt::before { background: linear-gradient(200deg, rgba(255,170,90,.24), rgba(255,170,90,0) 55%), rgba(8,24,44,.55); }
.scene.compact.tint-fi::before { background: linear-gradient(200deg, rgba(120,190,255,.24), rgba(120,190,255,0) 55%), rgba(8,24,44,.55); }
/* panels: no live blur behind them (heavy to redraw); a slightly stronger tint keeps the text readable */
.glass { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(10, 38, 70, .48); }
/* rain/snow layers move on the GPU only */
.fx-rain::after, .fx-snow::after { will-change: transform; }
/* the old live-SVG sky is not used any more */
.scene > .sky { display: none; }
/* difference: a white card on a thin line between the two cities */
@media (min-width: 768px) {
  .hero::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(255,255,255,.45); z-index: 4; pointer-events: none; }
  .delta { width: auto; height: auto; min-width: 104px; border-radius: 18px; padding: 12px 14px; top: 50%; gap: 0; }
}
.delta small { font-size: 12px; color: var(--bs-secondary-color); opacity: 1; }
.delta b { font-size: 26px; line-height: 1.15; }
.delta b.d-warm { color: #c2410c; }
.delta b.d-cold { color: var(--bs-primary); }
[data-bs-theme="dark"] .delta b.d-warm { color: #ff9468; }
.delta .d-hum { font-size: 12px; color: var(--bs-secondary-color); margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .scene > .bgimg { animation: none; } }
/* date pickers etc. follow the SITE theme, not the device (fixes the white calendar icon on light pages) */
[data-bs-theme="light"] { color-scheme: light; }
[data-bs-theme="dark"] { color-scheme: dark; }

/* ---------- History (2026-11-05): quick dates, legend, comparison ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bs-border-color); font-size: 13px; color: var(--bs-secondary-color); }
.stat .v { white-space: nowrap; }
.stat .v small { white-space: normal; }
.d-warm { color: #c2410c; }
.d-cold { color: var(--bs-primary); }
[data-bs-theme="dark"] .d-warm { color: #ff9468; }

/* ---------- History: filters on the side (option C, 2026-11-05) ---------- */
.hist-filters { display: flex; flex-direction: column; gap: 16px; }
.hist-filters fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.hist-filters legend { float: left; width: 100%; margin-bottom: .5rem; }
.hist-filters legend + * { clear: both; }
.hist-filters .f-sec { border-top: 1px solid var(--bs-border-color); padding-top: 12px; }
.hist-filters .f-sec .form-label { margin-bottom: 6px; }
.hist-filters .form-check { min-height: 32px; display: flex; align-items: center; gap: 8px; padding-left: 0; }
.hist-filters .form-check-input { float: none; margin: 0; width: 18px; height: 18px; flex: none; }
.hist-filters .form-check-label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cal-head b { flex: 1; text-align: center; font-size: 15px; white-space: nowrap; }
.cal-nav { width: 36px; height: 36px; padding: 0; border-radius: 10px; border: 1px solid var(--bs-border-color); color: var(--bs-body-color); }
.cal-nav:hover { background: var(--surface-2); }
.cal-nav:disabled { opacity: .4; border-color: var(--bs-border-color); }
.cal-week, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.cal-week { font-size: 12px; color: var(--bs-secondary-color); margin-bottom: 2px; text-transform: none; }
.cal-day { height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--bs-body-color); font-size: 13px; font-variant-numeric: tabular-nums; }
.cal-day:hover:not(:disabled) { background: var(--surface-2); }
.cal-day.out { color: var(--bs-secondary-color); }
.cal-day.today { box-shadow: inset 0 0 0 1.5px var(--bs-primary); font-weight: 600; }
.cal-day.sel { background: var(--bs-primary); color: #fff; font-weight: 700; }
[data-bs-theme="dark"] .cal-day.sel { color: #062238; }
.cal-day:disabled { opacity: .35; cursor: default; }
.cal-day:focus-visible, .cal-nav:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 1px; }
.quick-dates { display: flex; gap: 6px; flex-wrap: wrap; }
.quick-dates .btn { flex: 1 1 auto; height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13px; border: 1px solid var(--bs-border-color); color: var(--bs-body-color); }
.quick-dates .btn:hover { background: var(--surface-2); }
.quick-dates .btn.active { background: rgba(var(--bs-primary-rgb), .14); border-color: var(--bs-primary); color: var(--bs-primary); font-weight: 600; }
.sum-table { font-variant-numeric: tabular-nums; }
.sum-table thead th { color: var(--bs-secondary-color); font-weight: 600; border-bottom-width: 1px; white-space: nowrap; }
.sum-table th[scope=row] { font-weight: 600; white-space: nowrap; }
.sum-table td { white-space: nowrap; vertical-align: middle; }
.sum-table td.big { font-size: 20px; font-weight: 600; }
.sum-table .diff-row th, .sum-table .diff-row td { border-bottom: 0; background: var(--surface-2); }
.sum-table > :not(caption) > * > * { background-color: transparent; }
.sum-table .diff-row > * { background: var(--surface-2) !important; }
.sum-table .diff-row th { border-radius: 10px 0 0 10px; }
.sum-table .diff-row td:last-child { border-radius: 0 10px 10px 0; }
.f-more { border-top: 1px solid var(--bs-border-color); padding-top: 12px; display: flex; flex-direction: column; gap: 16px; }
.f-more[open] { gap: 16px; }
.f-more > summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--bs-body-color); min-height: 32px; display: flex; align-items: center; gap: 8px; list-style: none; }
.f-more > summary::-webkit-details-marker { display: none; }
.f-more > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -4px 0 0 auto; transition: transform .15s; }
.f-more[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.f-more[open] > summary { margin-bottom: 12px; }
.f-more > .f-sec + .f-sec, .f-more > fieldset + fieldset, .f-more > fieldset + .f-sec { margin-top: 16px; }
@media (min-width: 992px) { .f-more > summary { display: none; } .f-more { border-top: 0; padding-top: 0; } }

/* ---------- Admin readings (2026-11-05) ---------- */
.adm-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 14px; }
.adm-field { flex: 1 1 170px; max-width: 240px; }
.adm-quick { flex: 0 1 auto; padding-bottom: 2px; }
.adm-quick .btn { flex: 0 0 auto; height: 38px; }
.adm-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.adm-filter .btn { border: 1px solid var(--bs-border-color); border-radius: 999px; height: 36px; padding: 0 14px; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; color: var(--bs-body-color); }
.adm-filter .btn b { font-variant-numeric: tabular-nums; background: var(--surface-2); border-radius: 999px; padding: 0 8px; font-size: 12px; line-height: 20px; }
.adm-filter .btn-check:checked + .btn { background: rgba(var(--bs-primary-rgb), .14); border-color: var(--bs-primary); color: var(--bs-primary); font-weight: 600; }
.adm-filter .btn-check:focus-visible + .btn { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.adm-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
.adm-tabs::-webkit-scrollbar { display: none; }
.adm-tabs .nav-link { white-space: nowrap; }
@media (max-width: 767.98px) {
  .adm-field { max-width: none; }
  /* readings become small cards on a phone, so the Edit button is always on screen */
  .adm-table thead { display: none; }
  .adm-table, .adm-table tbody { display: block; }
  .adm-table tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 4px; border-bottom: 1px solid var(--bs-border-color); }
  .adm-table td { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0; border: 0; text-align: left !important; background: transparent !important; }
  .adm-table td[data-label]::before { content: attr(data-label); color: var(--bs-secondary-color); font-size: 13px; }
  .adm-table td.c-time { font-weight: 700; font-size: 16px; }
  .adm-table td.c-city { justify-content: flex-end; }
  .adm-table td[data-label] { grid-column: 1 / -1; }
  .adm-table td.c-status { grid-column: 1; justify-content: flex-start; flex-wrap: wrap; }
  .adm-table td.c-edit { grid-column: 2; justify-content: flex-end; }
  .adm-table td.c-edit .btn { min-width: 44px; min-height: 36px; }
  .adm-table td .when { display: inline; margin-left: 6px; }
  .adm-table tr.is-weird { border-radius: 10px; }
}
@media (max-width: 767.98px) {
  /* change history and accounts: one small card per row on a phone */
  .stack-table thead { display: none; }
  .stack-table, .stack-table tbody, .stack-table tr { display: block; }
  .stack-table tr { padding: 12px 4px; border-bottom: 1px solid var(--bs-border-color); }
  .stack-table td { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 3px 0; border: 0; text-align: right !important; min-width: 0 !important; white-space: normal !important; background: transparent !important; }
  .stack-table td[data-label]::before { content: attr(data-label); color: var(--bs-secondary-color); font-size: 13px; text-align: left; flex: none; }
  .stack-table td.c-head { font-size: 16px; justify-content: flex-start; }
  .stack-table td.c-change { flex-direction: column; align-items: flex-end; }
  .stack-table td.c-actions { justify-content: flex-end; gap: 8px; padding-top: 8px; }
  .stack-table td.c-actions:empty { display: none; }
  .stack-table td .when { display: inline; margin-left: 6px; }
}
@media (max-width: 575.98px) {
  /* admin tabs: 2 × 2 on a phone so none is hidden off the screen */
  .adm-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; overflow: visible; border-bottom: 0; margin-bottom: 10px; }
  .adm-tabs .nav-link { width: 100%; border: 1px solid var(--bs-border-color); border-radius: 12px; margin: 0; padding: 10px 8px; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; }
  .adm-tabs .nav-link.active { background: rgba(var(--bs-primary-rgb), .14); border-color: var(--bs-primary); color: var(--bs-primary); font-weight: 600; }
  .adm-tabs + .tab-content { border-top-left-radius: 16px !important; }
}