/* Trusted Weather: bold, linear, startup look. Ink black + electric violet + lime. Flat: no boxes around charts. */

:root {
  --ink: #0b0b14;
  --bg: #ffffff;
  --border: #e4e4ec;
  --text: #14141f;
  --muted: #6a6a7c;
  --accent: #5b21ff;        /* electric violet */
  --accent-soft: #efe9ff;
  --lime: #c6ff2e;          /* highlight */
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html { overflow-x: hidden; }   /* No horizontal scrolling, vertical only. On html only: on body it becomes a nested scroller. */

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
}

/* One font everywhere: widgets bring their own, so set it explicitly. */
input, select, button, textarea, .selectize-input, .selectize-dropdown, .leaflet-container,
.dygraphs, .dygraph-legend, .dygraph-label, .dygraph-axis-label, .navbar, h1, h2, h3, h4, h5 {
  font-family: var(--font);
}

/* Only the outer page container. navbarPage nests another .container-fluid inside, which must not get padding again. */
body > .container-fluid { max-width: 1440px; margin: 0 auto; padding: 0 20px 32px; }
.navbar + .container-fluid, .tab-content { padding: 0; }

/* ---- Header: full-bleed ink band ---- */
.app-header {
  background: var(--ink) url("tre-cime.svg") no-repeat right bottom / auto 125%;   /* Tre Cime skyline, sun drifts slowly. */
  min-height: 130px; align-content: center;
  margin: 0 -20px 0; padding: 22px 20px 18px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px;
}
.app-title {
  font-size: clamp(30px, 6vw, 52px); font-weight: 900; line-height: 1; letter-spacing: -0.055em;
  text-transform: uppercase; color: #fff;
}
.app-title .hl { color: var(--lime); font-style: italic; margin-left: .22em; }
.app-title .pulse {
  display: inline-block; width: .2em; height: .2em; margin-left: .12em; border-radius: 50%;
  background: var(--lime); vertical-align: baseline; animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(198, 255, 46, .65); }
  80%, 100% { box-shadow: 0 0 0 .35em rgba(198, 255, 46, 0); }
}
.app-sub, .app-sub * { color: #a9a9bd; font-size: 13px; font-weight: 500; letter-spacing: 0; }

/* ---- Navbar -> bold tabs ---- */
.navbar, .navbar-default {
  background: transparent !important; border: 0 !important; border-bottom: 2px solid var(--ink) !important;
  border-radius: 0; box-shadow: none; margin: 0 0 8px; min-height: 0;
}
.navbar-default .navbar-nav > li > a {
  color: var(--muted); font-weight: 600; font-size: 14px; padding: 12px 16px; background: transparent !important;
}
.navbar-default .navbar-nav > li > a:hover { color: var(--accent); }
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #fff !important; background: var(--accent) !important; box-shadow: none;
}
.navbar-default .navbar-toggle { border-color: var(--ink); }
.navbar-default .navbar-toggle .icon-bar { background: var(--ink); }
.navbar-default .navbar-collapse { border: 0; box-shadow: none; }
.navbar-brand { padding-top: 6px; padding-bottom: 0; height: auto; }

/* ---- Inner tabs (map, standard, ...): second level, lighter than the outer tabs ---- */
.nav-tabs { border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.nav-tabs > li > a {
  font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--muted);
  background: transparent; border: 0; border-radius: 0; margin: 0 2px 0 0; padding: 8px 12px;
}
.nav-tabs > li > a:hover, .nav-tabs > li > a:focus { color: var(--accent); background: transparent; border: 0; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  color: var(--ink); background: transparent; border: 0; box-shadow: inset 0 -3px 0 var(--accent);
}

/* ---- Section headings and labels ---- */
/* Type scale: 14 body/controls, 13 labels, 12 caps headings, 11 chart axes. Weights: 400, 600, 800. */
h4 {
  font-size: 12px; font-weight: 800; color: var(--accent); text-transform: uppercase;
  letter-spacing: 0.08em; margin: 14px 0 4px;
}
h5 { font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 10px; }
.rightAlign { float: right; }

/* ---- Inputs ---- */
.selectize-input {
  margin-top: -5px; min-height: 38px; padding: 9px 12px;
  background: #fff; border: 2px solid var(--ink); border-radius: 0; box-shadow: none;
  color: var(--text); font-size: 14px; font-weight: 600;
}
.selectize-input.focus { border-color: var(--accent); box-shadow: 3px 3px 0 var(--lime); }
.selectize-dropdown { border: 2px solid var(--ink); border-radius: 0; margin-top: 2px; box-shadow: 4px 4px 0 var(--ink); }
.selectize-dropdown .option { padding: 8px 12px; }
.selectize-dropdown .active { background: var(--accent); color: #fff; }
.selectize-control.multi .selectize-input > div {
  background: var(--accent); color: #fff; border: 0; border-radius: 0; padding: 2px 8px; font-weight: 600;
}
.selectize-control.multi .selectize-input > div.active { background: var(--ink); }
.form-control { border-radius: 0; border: 2px solid var(--ink); box-shadow: none; }

/* ---- Charts and map: flat, no boxes ---- */
.dygraphs { touch-action: pan-y; }   /* Vertical swipe over a chart scrolls the page. */
/* Axis numbers / dates: small, grey, tabular so digits line up. */
.dygraph-axis-label {
  font-family: var(--font) !important; font-size: 11px !important; font-weight: 500;
  color: var(--muted) !important; font-variant-numeric: tabular-nums; letter-spacing: 0;
}
/* Axis titles: same voice as the h4 section headings. */
.dygraph-ylabel, .dygraph-y2label, .dygraph-xlabel {
  font-family: var(--font) !important; font-size: 10px !important; font-weight: 800;
  color: var(--ink) !important; text-transform: uppercase; letter-spacing: 0.1em;
}
.dygraph-legend {
  max-width: 92vw !important;          /* Legend is 450px wide, too much for phones. */
  background: rgba(255, 255, 255, .94) !important;
  font-family: var(--font) !important; font-size: 12px !important; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; padding: 4px 8px;
}

#mapmain { min-height: 420px; }

/* ---- Loading indicator: ONE windsurfer per chart grid (the 2x2 / 3x2 dygraph blocks) ---- */
/* Shiny sets .recalculating on an output while it computes. :has() shows the surfer while ANY chart of the grid does. */
.chart-grid { position: relative; }
.chart-grid:has(.recalculating)::before {
  content: ""; position: absolute; left: calc(50% - 140px); width: 280px; top: 50px; height: 126px; z-index: 5; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='16' viewBox='0 0 120 16'%3E%3Cpath d='M0 8Q15 0 30 8T60 8T90 8T120 8' fill='none' stroke='%235b21ff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='140' viewBox='0 0 400 140'%3E%3Cg fill='none' stroke='%235b21ff' stroke-opacity='.3' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M10 20H90M60 52H200M250 34H360M120 84H250M300 104H390M20 118H110'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x, repeat-x;
  background-size: 84px 11px, 280px 98px;
  background-position: 0 106px, 0 0;
  animation: wind-drift 1.2s linear infinite, wind-appear .3s ease .4s both;   /* Appears after 0.4s: no flicker on fast updates. */
}
.chart-grid:has(.recalculating)::after {
  content: ""; position: absolute; left: calc(50% - 56px); top: 50px; width: 112px; height: 126px; z-index: 6; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='180' viewBox='0 0 160 180'%3E%3Cpath d='M100 8C60 36 34 88 38 130Q66 137 96 128Z' fill='%235b21ff'/%3E%3Cpath d='M97 44C74 58 58 76 52 96L95 92Z' fill='%23c6ff2e'/%3E%3Cpath d='M92 152L100 6' stroke='%230b0b14' stroke-width='3.5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M94 108L50 119' stroke='%230b0b14' stroke-width='3' stroke-linecap='round' fill='none'/%3E%3Cg stroke='%23fff' stroke-width='9' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='M60 82L52 114L42 152M52 114L64 152M58 86L50 119'/%3E%3Ccircle cx='63' cy='68' r='8' fill='%23fff'/%3E%3C/g%3E%3Cg stroke='%230b0b14' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='M60 82L52 114L42 152M52 114L64 152M58 86L50 119'/%3E%3C/g%3E%3Ccircle cx='63' cy='68' r='8' fill='%230b0b14'/%3E%3Cpath d='M6 152Q80 162 154 142L148 153Q80 170 12 163Z' fill='%230b0b14'/%3E%3C/svg%3E") no-repeat center / contain;
  animation: surf-bob 2.4s ease-in-out infinite, wind-appear .3s ease .4s both;
}
@keyframes wind-drift {
  from { background-position: 0 106px, 0 0; }
  to   { background-position: -84px 106px, -280px 0; }
}
@keyframes surf-bob {
  0%, 100% { transform: translateY(0)    rotate(-2deg); }
  50%      { transform: translateY(-5px) rotate(2deg); }
}
@keyframes wind-appear { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .chart-grid:has(.recalculating)::before, .chart-grid:has(.recalculating)::after { animation: wind-appear .3s ease .4s both; }
}

/* Scene variants (a scene replaces the surfer/skier; Sport Weather keeps those). Both are animated SVG files in www/. */
/* Multiple stations: Tre Cime with a slowly moving sun. Single station: April, with sun, clouds and a shower. Powder / mountain wind: a skier carving down a slope. */
.chart-grid.mountain:has(.recalculating)::before, .chart-grid.april:has(.recalculating)::before, .chart-grid.skier:has(.recalculating)::before {
  left: 50%; width: min(340px, 90vw); height: auto; top: 20px; transform: translateX(-50%);
  background-repeat: no-repeat; background-position: center; background-size: contain;
  animation: wind-appear .3s ease .4s both;
}
.chart-grid.mountain:has(.recalculating)::before { aspect-ratio: 682 / 390; background-image: url("tre-cime.svg"); }
.chart-grid.april:has(.recalculating)::before    { aspect-ratio: 340 / 190; background-image: url("april.svg"); }
.chart-grid.skier:has(.recalculating)::before    { aspect-ratio: 340 / 190; background-image: url("powder.svg"); }
.chart-grid.mountain:has(.recalculating)::after, .chart-grid.april:has(.recalculating)::after, .chart-grid.skier:has(.recalculating)::after { content: none; }

/* ---- Start-up splash: full-page cover with a random scene, until the first calculation (metadata + map) is done ---- */
#splash { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; background: #fff; transition: opacity .5s ease; }
#splash.done { opacity: 0; pointer-events: none; }
#splash::before, #splash::after { margin-top: 22vh; }   /* Scene sits a bit above the vertical centre. */

/* ---- Small screens ---- */
@media (max-width: 767px) {
  body > .container-fluid { padding: 0 12px 24px; }
  .app-header { margin: 0 -12px; padding: 18px 12px 14px; min-height: 0; background-image: none; }   /* No room for the skyline next to the title. */
  .navbar-default .navbar-nav > li > a { padding: 10px 12px; }
  .rightAlign { float: none; }
}