:root{
  --page:#dbe7f1;
  --navy:#073771;
  --blue:#1682ef;
  --green:#08a66d;
  --orange:#ff7546;
  --white:#f8fbff;
  --muted:#486d91;
  --rain:#34b9ff;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--page);font-family:Arial,"Segoe UI",sans-serif;color:#0a315f}
body{padding:8px}
button,input{font:inherit}
.weather-canvas{
  position:relative;
  width:min(1510px,100%);
  aspect-ratio:1448/1096;
  margin:0 auto;
  display:grid;
  grid-template-rows:9.033% 74.726% 16.241%;
  overflow:hidden;
  border-radius:15px;
  background:#edf6fc;
  box-shadow:0 13px 28px rgba(18,53,80,.18);
  container-type:inline-size;
}
/* HEADER — proportions are locked to the approved 1448 × 1086 mockup */
.topbar{
  position:relative;
  display:grid;
  grid-template-columns:49.4% 31.2% 19.4%;
  align-items:center;
  padding:0 2.0cqw;
  background:linear-gradient(180deg,rgba(252,254,255,.98),rgba(229,242,252,.96));
  border-bottom:1px solid rgba(40,91,129,.17);
  z-index:20;
}
.brand-block{align-self:center;min-width:0}
.brand-row{display:flex;align-items:center;gap:.9cqw;white-space:nowrap;line-height:1;font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif}
.brand-main{font-size:2.72cqw;font-weight:900;letter-spacing:-.085cqw;color:#063978}
.brand-separator{width:.10cqw;height:2.55cqw;background:#6d91ad;display:block}
.brand-area{font-size:2.16cqw;font-weight:800;letter-spacing:-.025cqw;color:#0a356b}
.brand-sub{margin-top:.52cqw;font-size:1.29cqw;font-weight:400;color:#325c84;white-space:nowrap}
.run-zone{display:flex;justify-content:flex-end;align-items:center;gap:1.0cqw;padding-right:1.2cqw}
.cycle-box{display:flex;align-items:center;background:rgba(247,251,255,.90);border:1px solid rgba(56,96,128,.13);border-radius:.62cqw;padding:.30cqw;box-shadow:0 .32cqw .85cqw rgba(24,65,98,.10)}
.cycle-btn{border:0;background:transparent;color:#133b68;font-size:1.33cqw;font-weight:500;padding:.70cqw .90cqw;border-radius:.50cqw;cursor:pointer;line-height:1}
.cycle-btn.active{background:#1485f4;color:#fff;font-weight:700;box-shadow:0 .27cqw .60cqw rgba(20,133,244,.32)}
.cycle-btn.unavailable{opacity:.30;cursor:not-allowed}
.latest-btn{border:0;border-radius:.55cqw;background:#0aa56c;color:#fff;font-size:1.22cqw;font-weight:800;padding:.80cqw 1.02cqw;line-height:1;box-shadow:0 .26cqw .55cqw rgba(10,165,108,.26);cursor:pointer}
.run-meta{height:63%;display:flex;flex-direction:column;justify-content:center;text-align:right;border-left:1px solid rgba(42,91,127,.25);padding-left:1.45cqw}
.run-title{font-size:1.52cqw;font-weight:800;color:#0b315f;white-space:nowrap}
.run-updated{font-size:1.05cqw;color:#436a8e;margin-top:.30cqw;white-space:nowrap}
/* MAP */
.map-stage{position:relative;overflow:hidden;background:#0d5e94}
.map-bg{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:fill;user-select:none;pointer-events:none}
.location-layer,.marine-layer{position:absolute;inset:0;pointer-events:none}
/* Forecast overlays use a soft feathered halo for readability over terrain. */
.forecast-marker{position:absolute;display:flex;align-items:center;gap:.60cqw;white-space:nowrap;z-index:3;isolation:isolate}
.forecast-marker::before{content:"";position:absolute;z-index:-1;left:-1.05cqw;right:-1.15cqw;top:-.78cqw;bottom:-.82cqw;border-radius:50%;background:radial-gradient(ellipse at 48% 50%,rgba(2,24,31,.88) 0%,rgba(2,30,38,.66) 42%,rgba(2,31,42,.25) 68%,rgba(2,31,42,0) 83%);filter:blur(.47cqw)}
.forecast-marker.marker-kea::before{background:radial-gradient(ellipse at 50% 50%,rgba(0,52,98,.88) 0%,rgba(0,55,102,.62) 45%,rgba(0,55,102,.20) 68%,transparent 84%)}
.weather-icon{width:3.72cqw;height:3.72cqw;flex:0 0 3.72cqw;overflow:visible;filter:drop-shadow(0 .12cqw .16cqw rgba(0,31,52,.48))}
.marker-copy{display:flex;flex-direction:column;align-items:flex-start;line-height:1.02;min-width:0}
.marker-name{font-size:1.39cqw;font-weight:800;color:#fff;text-shadow:0 .13cqw .24cqw rgba(0,20,35,.84)}
.marker-temp{font-size:1.88cqw;font-weight:800;color:var(--orange);margin-top:.18cqw;text-shadow:0 .11cqw .20cqw rgba(48,23,7,.35)}
.marker-extrema{font-size:1.42cqw;font-weight:500;color:#fff;margin-top:.20cqw;text-shadow:0 .12cqw .22cqw rgba(0,22,38,.84)}
.marker-rain{display:flex;align-items:center;gap:.34cqw;font-size:1.18cqw;font-weight:700;color:#e7f7ff;margin-top:.28cqw;text-shadow:0 .12cqw .22cqw rgba(0,28,50,.86)}
.rain-drop{width:.72cqw;height:.92cqw;display:inline-block;filter:drop-shadow(0 .08cqw .08cqw rgba(0,36,64,.45))}
.reference .marker-name{font-weight:900}
/* Marine areas */
.marine-marker{position:absolute;display:flex;align-items:center;gap:.70cqw;color:#fff;white-space:nowrap;z-index:4;isolation:isolate}
.marine-marker::before{content:"";position:absolute;z-index:-1;left:-1.45cqw;right:-1.65cqw;top:-1.10cqw;bottom:-1.10cqw;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,52,98,.88) 0%,rgba(0,56,104,.62) 46%,rgba(0,58,106,.19) 70%,transparent 85%);filter:blur(.55cqw)}
.wind-arrow{width:4.05cqw;height:4.05cqw;flex:0 0 4.05cqw;transform-origin:50% 50%;filter:drop-shadow(0 .11cqw .15cqw rgba(0,25,50,.46))}
.marine-name{font-size:1.50cqw;font-weight:800;margin-bottom:.32cqw;text-shadow:0 .13cqw .24cqw rgba(0,28,55,.80)}
.marine-main{font-size:1.78cqw;font-weight:800;text-shadow:0 .13cqw .24cqw rgba(0,28,55,.80)}
.marine-unit{font-size:.68em;font-weight:700;letter-spacing:.01em;vertical-align:.06em;margin-left:.05em;text-transform:lowercase}
.marine-unit-gust{font-size:.82em;vertical-align:.03em}
.marine-gust{font-size:1.28cqw;font-style:italic;font-weight:500;margin-top:.30cqw;text-shadow:0 .13cqw .24cqw rgba(0,28,55,.80)}
.map-loading,.map-error{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:30;padding:.80cqw 1.1cqw;border-radius:.65cqw;background:rgba(4,37,66,.88);color:#fff;font-size:1.15cqw;font-weight:700;box-shadow:0 .25cqw .80cqw rgba(0,0,0,.18)}
.map-loading span{display:inline-block;width:1cqw;height:1cqw;border:.15cqw solid rgba(255,255,255,.34);border-top-color:#fff;border-radius:50%;vertical-align:-.10cqw;margin-right:.45cqw;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.map-error{background:rgba(125,27,36,.92)}
/* FOOTER */
.footer-panel{position:relative;background:linear-gradient(180deg,rgba(247,251,255,.98),rgba(229,242,252,.98));border-top:1px solid rgba(40,91,129,.14);overflow:hidden}
.forecast-time-line{position:absolute;left:14.15%;top:13.5%;display:flex;align-items:baseline;gap:.78cqw;white-space:nowrap}
.valid-time{font-size:1.45cqw;font-weight:800;color:#0a386e}.lead-time{font-size:1.30cqw;color:#6d89a3;font-weight:500}
.player-controls{position:absolute;left:2.10%;top:36.5%;display:flex;align-items:center;gap:.55cqw}
.circle-btn{width:4.08cqw;height:4.08cqw;border-radius:50%;border:0;background:#fff;color:#0a477f;display:grid;place-items:center;font-size:1.43cqw;font-weight:900;box-shadow:0 .23cqw .75cqw rgba(25,66,98,.16);cursor:pointer;padding:0}
.circle-btn.play{background:#084883;color:#fff;font-size:1.55cqw}.circle-btn.pause{font-size:1.28cqw}.circle-btn.next{font-size:1.38cqw}
.timeline-wrap{position:absolute;left:14.05%;top:48.0%;width:58.2%}
.timeline{--pct:0%;appearance:none;-webkit-appearance:none;width:100%;height:1.15cqw;background:transparent;margin:0;cursor:pointer}
.timeline::-webkit-slider-runnable-track{height:.32cqw;border-radius:.18cqw;background:linear-gradient(to right,#1988f5 0%,#1988f5 var(--pct),#5f7fa6 var(--pct),#5f7fa6 100%);box-shadow:inset 0 0 0 .07cqw rgba(255,255,255,.70)}
.timeline::-webkit-slider-thumb{-webkit-appearance:none;width:2.05cqw;height:2.05cqw;border-radius:50%;background:#1585f3;border:.30cqw solid #fff;box-shadow:0 .12cqw .38cqw rgba(20,91,155,.30);margin-top:-.86cqw}
.timeline::-moz-range-track{height:.32cqw;border-radius:.18cqw;background:#617fa3}.timeline::-moz-range-progress{height:.32cqw;background:#1988f5}.timeline::-moz-range-thumb{width:1.72cqw;height:1.72cqw;border-radius:50%;background:#1585f3;border:.30cqw solid #fff}
.timeline-labels{display:flex;justify-content:space-between;color:#28547d;font-size:1.03cqw;margin-top:.58cqw}
.legend-panel{position:absolute;right:2.0%;top:7.0%;width:21.7%;height:79%;padding:1.05cqw 1.05cqw;background:rgba(252,254,255,.75);border:1px solid rgba(58,100,133,.11);border-radius:.62cqw;box-shadow:0 .20cqw .70cqw rgba(30,73,105,.05);display:flex;flex-direction:column;justify-content:center;gap:.72cqw}
.legend-row{display:grid;grid-template-columns:1.45cqw 1fr;gap:.58cqw;align-items:start;color:#173e6a}.legend-row b{display:block;font-size:.93cqw;font-weight:700;line-height:1.05}.legend-row small{display:block;font-size:.82cqw;font-weight:400;line-height:1.22;margin-top:.12cqw;color:#31587e}.legend-temp{color:#ff5c3f;font-size:1.25cqw;line-height:.85}.legend-drop{color:#198af4;font-size:1.10cqw;transform:rotate(45deg);line-height:1}.legend-wind{color:#0b3e78;font-size:1.42cqw;line-height:1;transform:rotate(-43deg)}
@media (max-width:760px){
  body{padding:0;overflow-x:auto}
  .weather-canvas{min-width:760px;border-radius:0}
}

/* =========================================================
   V4 — GOLD REFERENCE
   Approved map framing, airy overlays, no rectangular plates.
   ========================================================= */

.map-bg{
  object-fit:fill;
  image-rendering:auto;
}

/* Geographic labels from the approved concept.  They sit behind all
   forecast data and remain deliberately quiet. */
.geo-label-layer{position:absolute;inset:0;z-index:1;pointer-events:none}
.geo-label{position:absolute;color:rgba(247,251,255,.68);font-style:italic;font-weight:400;line-height:1.02;letter-spacing:.01cqw;text-shadow:0 .12cqw .28cqw rgba(0,25,43,.48)}
.geo-sterea{left:10.9%;top:14.3%;font-size:2.05cqw}
.geo-attiki{left:40.0%;top:42.0%;font-size:1.72cqw}
.geo-evia{left:71.1%;top:48.3%;font-size:1.62cqw}
.geo-peloponnese{left:3.0%;top:64.8%;font-size:1.85cqw}
.geo-cyclades{left:77.2%;top:90.0%;font-size:1.68cqw}

/* The approved concept used a feathered scrub halo, not a box.
   Keep the center readable while allowing terrain to remain visible. */
.forecast-marker::before{
  left:-1.05cqw;
  right:-1.15cqw;
  top:-.78cqw;
  bottom:-.82cqw;
  border-radius:50%;
  background:radial-gradient(ellipse at 48% 50%,rgba(2,24,31,.74) 0%,rgba(2,30,38,.50) 42%,rgba(2,31,42,.18) 68%,rgba(2,31,42,0) 84%);
  filter:blur(.43cqw);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.forecast-marker.marker-kea::before{
  background:radial-gradient(ellipse at 50% 50%,rgba(0,45,88,.68) 0%,rgba(0,52,98,.44) 45%,rgba(0,55,102,.14) 69%,transparent 84%);
}

/* Marine overlays are intentionally even lighter: no panel, just a
   diffuse blue-water readability halo and the existing text shadow. */
.marine-marker::before{
  left:-1.25cqw;
  right:-1.40cqw;
  top:-.88cqw;
  bottom:-.92cqw;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,43,83,.38) 0%,rgba(0,52,96,.22) 48%,rgba(0,58,106,.07) 72%,transparent 86%);
  filter:blur(.48cqw);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* Preserve the cleaner V3 footer spacing. */
.forecast-time-line{left:15.65%;}
.player-controls{
  left:2.20%;
  top:37.5%;
  gap:.72cqw;
}
.circle-btn{
  width:3.34cqw;
  height:3.34cqw;
}
.timeline-wrap{
  left:16.05%;
  top:48.0%;
  width:56.2%;
}


/* =========================================================
   V5 — FINAL POLISH
   Gold-reference marker nudges, rounder title, roomier shell,
   smaller player controls and discoverable control tooltips.
   ========================================================= */
.circle-btn{
  position:relative;
  font-size:1.23cqw;
}
.circle-btn.play{font-size:1.34cqw}
.circle-btn.pause{font-size:1.10cqw}
.circle-btn.next{font-size:1.16cqw}
.circle-btn::after{
  content:attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:calc(100% + .62cqw);
  transform:translate(-50%,.24cqw);
  padding:.38cqw .58cqw;
  border-radius:.38cqw;
  background:rgba(5,48,84,.96);
  color:#fff;
  font-size:.78cqw;
  font-weight:700;
  letter-spacing:.005cqw;
  line-height:1;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  box-shadow:0 .18cqw .52cqw rgba(8,39,65,.24);
  transition:opacity .14s ease,transform .14s ease,visibility .14s ease;
  z-index:50;
}
.circle-btn:hover::after,
.circle-btn:focus-visible::after{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}
.circle-btn:focus-visible{
  outline:.16cqw solid rgba(21,133,243,.55);
  outline-offset:.16cqw;
}


/* =========================================================
   V6 — NUNITO + TOP BREATHING ROOM
   Match the rounded Solar & Space Weather typography while
   keeping forecast/map geometry unchanged.
   ========================================================= */
body{
  padding:24px 8px 8px;
}
.brand-row{
  font-family:"Nunito","Segoe UI",Arial,sans-serif;
}
.brand-main{
  font-weight:900;
  letter-spacing:-.075cqw;
}
.brand-area{
  font-weight:800;
  letter-spacing:-.018cqw;
}
@media (max-width:760px){
  body{padding:8px 0 0;}
}

/* =========================================================
   V7 — FINAL MAP LABEL POLISH
   Slightly clearer geographic names without competing with
   forecast data; Argos receives its last southward nudge in JS.
   ========================================================= */
.geo-label{
  color:rgba(218,232,233,.82);
  font-weight:500;
  text-shadow:
    0 .10cqw .22cqw rgba(13,38,50,.70),
    0 0 .20cqw rgba(238,246,241,.10);
}

/* =========================================================
   V9 — FINAL LEGAL / SOURCE FOOTER
   Quiet neutral footer for source attribution, processing
   disclosure and safety disclaimer. Map/UI remain unchanged.
   ========================================================= */
.legal-footer{
  width:min(1510px,100%);
  margin:12px auto 20px;
  padding:18px 22px 12px;
  font-family:"Nunito","Segoe UI",Arial,sans-serif;
  color:#43586a;
  background:linear-gradient(180deg,#eef2f5 0%,#e6ebef 100%);
  border:1px solid rgba(62,82,99,.18);
  border-radius:12px;
  box-shadow:0 7px 18px rgba(24,48,67,.08);
}
.legal-grid{
  display:grid;
  grid-template-columns:1fr 1.08fr 1.28fr;
  gap:0;
}
.legal-block{
  min-width:0;
  padding:1px 22px 3px;
  border-left:1px solid rgba(71,94,112,.18);
}
.legal-block:first-child{
  padding-left:0;
  border-left:0;
}
.legal-block:last-child{padding-right:0}
.legal-block h2{
  margin:0 0 6px;
  color:#244866;
  font-size:15px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.005em;
}
.legal-block p{
  margin:0;
  font-size:12.5px;
  line-height:1.45;
  font-weight:500;
  color:#516576;
}
.legal-block strong{color:#344e62;font-weight:800}
.legal-footer a{
  color:#285d85;
  font-weight:700;
  text-decoration:none;
  border-bottom:1px dotted rgba(40,93,133,.48);
}
.legal-footer a:hover,
.legal-footer a:focus-visible{
  color:#0b4f82;
  border-bottom-style:solid;
}
.legal-footer a:focus-visible{
  outline:2px solid rgba(21,133,243,.30);
  outline-offset:2px;
  border-radius:2px;
}
.legal-disclaimer p strong{color:#3a4c5a}
.legal-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-top:12px;
  padding-top:9px;
  border-top:1px solid rgba(71,94,112,.16);
  color:#70808d;
  font-size:11.5px;
  line-height:1.25;
  font-weight:600;
}
@media (max-width:980px){
  .legal-grid{grid-template-columns:1fr}
  .legal-block,
  .legal-block:first-child,
  .legal-block:last-child{
    padding:10px 0;
    border-left:0;
    border-top:1px solid rgba(71,94,112,.14);
  }
  .legal-block:first-child{padding-top:0;border-top:0}
  .legal-bottom{align-items:flex-start;flex-direction:column;gap:4px}
}
@media (max-width:760px){
  .legal-footer{
    min-width:760px;
    margin:8px 0 0;
    border-radius:0;
  }
}