*{box-sizing:border-box}html{background:#041122}body{margin:0;color:#f4f9ff;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-synthesis:none}a{color:inherit}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.mountain-bg{position:fixed;inset:0;background:url('./piraeus-passalimani.jpg') top center /cover no-repeat;z-index:-2}.mountain-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,17,32,.02) 0%,rgba(0,10,20,.18) 25%,rgba(1,13,28,.75) 55%,#06182a 100%);pointer-events:none}.app{max-width:1800px;margin:auto;padding:12px 18px 12px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:120px}.brand{display:flex;align-items:center;gap:13px;text-shadow:0 1px 6px #091525}.brand-mark{font-size:53px;line-height:1;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.6)}.brand strong{display:block;font-size:clamp(24px,2.7vw,36px);letter-spacing:.02em;line-height:1.1}.brand span{display:block;font-size:clamp(11px,1.08vw,15px);color:#eff8ff;margin-top:5px;text-shadow:0 2px 6px #081421}.top-meta{display:flex;align-items:flex-end;flex-direction:column;gap:9px}.top-meta time{background:rgba(4,27,55,.78);border:1px solid rgba(173,216,255,.25);border-radius:12px;padding:9px 16px;font-weight:760;font-size:15px;white-space:nowrap}.live-state{font-weight:650;font-size:10px;letter-spacing:.04em;background:rgba(1,21,39,.87);padding:7px 13px;border-radius:30px;border:1px solid rgba(176,222,255,.34);display:flex;align-items:center;gap:7px;max-width:350px;text-align:right}.live-state i{width:8px;height:8px;border-radius:50%;background:#ffbe5b;box-shadow:0 0 8px #ffbe5b;flex:none}.live-state.fresh i{background:#33db98;box-shadow:0 0 8px #33db98}.live-state.demo i{background:#65dcff;box-shadow:0 0 8px #65dcff}.tabs{display:flex;align-items:center;gap:5px;overflow-x:auto;scrollbar-width:thin;margin-bottom:9px;border:1px solid rgba(169,221,255,.44);padding:4px;background:rgba(2,26,49,.87);border-radius:14px}.tabs a{flex:1;text-align:center;text-decoration:none;font-size:11px;font-weight:600;padding:9px 11px;white-space:nowrap;border-radius:9px;min-width:71px;transition:background .15s}.tabs a[aria-current]{background:#168bea;box-shadow:0 0 10px rgba(129,216,255,.7);color:#fff}.tabs a:hover{background:rgba(40,145,209,.5)}.notice{margin:2px 0 8px;padding:8px 10px;color:#e5f9ff;border:1px solid #4a9fc3;background:#092e43e8;font-size:12px;border-radius:8px}.notice code{color:#fff}.notice a{text-decoration:underline}.amber-notice{border-color:#d29a50;background:rgba(54,34,11,.9)}.demo-notice{background:rgba(10,45,75,.9)}.dashboard{display:grid;gap:10px}.glass{background:linear-gradient(150deg,rgba(3,22,40,.95),rgba(3,31,56,.9));border:1px solid rgba(216,242,255,.78);border-radius:15px;box-shadow:0 0 8px rgba(233,247,255,.5),inset 0 1px 12px rgba(169,221,255,.035);overflow:hidden;min-width:0}.head-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}.primary{height:130px;padding:13px 15px 10px;display:flex;flex-direction:column;justify-content:space-between}.primary .p-title{display:flex;align-items:center;gap:9px;color:#ecf8ff;font-size:11px;font-weight:730;letter-spacing:.03em;white-space:nowrap}.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.p-title .ic{width:30px;height:30px}.amber .ic{color:#ffb453;filter:drop-shadow(0 0 5px #ff8b50)}.cyan .ic{color:#59dcff;filter:drop-shadow(0 0 4px #56b8ff)}.blue .ic{color:#71b8ff;filter:drop-shadow(0 0 5px #4388ff)}.violet .ic{color:#a2a2ff;filter:drop-shadow(0 0 5px #8578ff)}.p-value{font-size:clamp(24px,3vw,43px);font-weight:820;line-height:1;letter-spacing:-.045em;padding-left:3px;white-space:nowrap}.p-value small{font-size:.39em;letter-spacing:0;margin-left:5px;color:#e0f6ff}.p-foot{font-size:10px;color:#b1d0e5;padding-left:4px}.charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.trend{height:210px;padding:12px 14px 9px}.trend-head{display:flex;justify-content:space-between;align-items:center;gap:8px;white-space:nowrap}.trend-head h2{display:flex;align-items:center;gap:7px;font-size:15px;margin:0;font-weight:730;white-space:nowrap}.trend-head h2 .ic{color:#73dbff;width:22px;height:22px}.trend-head span{color:#aad9f2;font-size:10px}.graph{min-height:0;height:calc(100% - 26px);display:flex;align-items:center;justify-content:center}.graph svg{display:block;width:100%;height:100%}.graph-empty{color:#8db6d0;font-size:12px;text-align:center;padding:8px}.extra-heading{display:flex;align-items:center;justify-content:space-between;margin:2px 2px 9px;gap:5px}.extra-heading h2{font-size:13px;font-weight:780;margin:0;letter-spacing:.02em}.extra-heading h2 span{font-weight:500;color:#9fc6df;padding-left:8px;font-size:11px}.extra-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}.extra-card{height:82px;padding:11px 8px;display:flex;align-items:center;gap:8px;border-color:rgba(150,220,255,.45);box-shadow:0 0 5px rgba(210,244,255,.25)}.mini-icon .ic{width:26px;height:26px;color:#54d5ff;filter:drop-shadow(0 0 4px #368eff)}.mini-body{min-width:0}.mini-body strong{font-size:clamp(14px,1.5vw,23px);line-height:1.05;display:block;white-space:nowrap;letter-spacing:-.03em}.mini-body strong small{font-size:10px;font-weight:600;letter-spacing:0;margin-left:3px}.mini-body span{color:#c9e2f2;font-size:10px;margin-top:4px;display:block;line-height:1.1}.extra-card:nth-child(2) .ic,.extra-card:nth-child(4) .ic{color:#7ca7ff}.extra-card:nth-child(10) .ic,.extra-card:nth-child(11) .ic{color:#90cdff}.foot{margin-top:10px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:10px;color:#9ebfd5;text-shadow:0 1px 2px black}.foot a{text-decoration:underline}.history-header{display:flex;justify-content:space-between;gap:10px;margin:8px 0 16px}.history-header small{font-size:10px;color:#72e5ff;font-weight:700;letter-spacing:.13em}.history-header h1{font-size:27px;margin:2px 0}.history-header p{font-size:12px;margin:0;color:#b8d4e6}.history-header b{font-size:14px;padding:10px 14px;border:1px solid #6bbce8;border-radius:9px;white-space:nowrap;align-self:center}.history-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.history-card{height:235px;padding:12px}.history-card .graph{height:calc(100% - 26px)}#more-btn{display:none}.is-now .app{min-height:100svh}
@media(min-width:1024px) and (max-height:850px){.topbar{min-height:90px}.primary{height:106px;padding:9px 12px}.p-title .ic{width:24px;height:24px}.p-value{font-size:30px}.trend{height:163px;padding:9px 11px}.extra-card{height:63px;padding:6px}.mini-icon .ic{height:22px;width:22px}.mini-body strong{font-size:17px}.dashboard{gap:7px}.head-grid,.charts,.extra-grid{gap:7px}.tabs a{padding:7px}.extra-heading{margin-bottom:6px}}
@media(max-width:1300px){.extra-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.head-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.topbar{min-height:115px}.history-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.primary{height:115px}}
@media(max-width:750px){.app{padding:8px}.topbar{min-height:100px;align-items:flex-start}.brand{gap:5px}.brand-mark{font-size:29px}.brand strong{font-size:20px}.brand span{font-size:10px;max-width:190px;line-height:1.4}.top-meta{gap:6px}.top-meta time{padding:5px 7px;font-size:10px}.live-state{max-width:145px;padding:5px 6px;font-size:8px;line-height:1.25;text-align:left}.tabs{margin-top:6px;margin-bottom:7px}.tabs a{font-size:10px;padding:7px 10px;min-width:62px}.head-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.primary{height:88px;padding:8px 6px 6px;border-radius:11px}.primary .p-title{font-size:8px;gap:4px;white-space:normal}.p-title .ic{width:17px;height:17px}.p-value{font-size:clamp(21px,5vw,28px);padding:0}.p-value small{font-size:.35em;margin-left:2px}.p-foot{font-size:8px;padding:0;line-height:1.1}.charts{grid-template-columns:1fr;gap:5px}.trend{height:158px;padding:9px}.trend-head h2{font-size:12px}.trend-head span{font-size:9px}.extra-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.extra-card{height:65px;padding:6px;gap:5px;border-radius:10px}.mini-icon .ic{width:17px;height:17px}.mini-body strong{font-size:18px}.mini-body strong small{font-size:9px}.mini-body span{font-size:9px}.extra-heading h2{font-size:10px}.extra-heading h2 span{display:none}#more-btn{display:block;font-size:10px;border-radius:8px;background:#156eaa;color:white;border:1px solid #a5dbff;padding:6px;cursor:pointer}.extra-grid:not(.show-all) .extra-card:nth-child(n+7){display:none}.foot{font-size:9px;line-height:1.4;flex-direction:column;gap:4px;margin-top:8px}.mountain-bg{background-position:52% top}.mountain-bg::after{background:linear-gradient(180deg,rgba(2,16,30,.3),rgba(2,12,26,.7) 38%,#06182a 100%)}.history-grid{grid-template-columns:1fr;gap:8px}.history-card{height:210px}.history-header h1{font-size:19px}.history-header b{font-size:11px}}
@media(max-width:420px){.mini-body strong{font-size:15px}.primary .p-title{font-size:7.5px}.p-value{font-size:22px}.brand strong{font-size:18px}.brand span{font-size:9px}.trend{height:145px}.topbar{min-height:88px}}
@media(min-width:751px) and (max-height:730px){.topbar{min-height:76px}.tabs{margin-bottom:6px}.primary{height:94px}.trend{height:150px}.extra-card{height:58px}.foot{font-size:9px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.chart-picker{display:none}@media(max-width:750px){.chart-picker{display:flex;gap:5px}.chart-picker button{flex:1;border:1px solid rgba(171,231,255,.7);border-radius:7px;color:#ddf6ff;background:rgba(6,42,70,.92);padding:5px;font-size:11px;font-weight:670}.chart-picker button.active{background:#1187c9;color:white;box-shadow:0 0 7px rgba(205,236,255,.7)}.charts .trend-b{display:none}.charts.show-dew .trend-a{display:none}.charts.show-dew .trend-b{display:block}}

/* NEW.PHP v1.8: clear alpine photograph + more breathing room above period navigation.
   Separate scoped assets directory prevents the browser using cached v1.4/v1.5 styles. */
@media (min-width: 751px) {
  .topbar { min-height: 195px; }
  .tabs { margin-top: 9px; }
  .mountain-bg::after { background: linear-gradient(180deg,
     rgba(0,11,24,0.02) 0%, rgba(1,17,30,0.15) 32%,
     rgba(1,13,28,0.64) 69%, #06182a 100%); }
}
@media (min-width: 751px) and (max-height: 850px) {
  .topbar { min-height: 163px; }
}
@media (max-width: 750px) {
  .topbar { min-height: 136px; }
  .tabs { margin-top: 10px; }
  .mountain-bg::after { background: linear-gradient(180deg,
    rgba(2,16,30,0.12) 0%,rgba(2,12,26,0.60) 54%,#06182a 100%); }
}
@media (max-width: 420px) { .topbar { min-height: 122px; } }

/* v2.0: high-visibility mountain, plain status below title, transparent analog clock. */
.live-state{display:flex;align-items:center;gap:8px;margin-top:12px;padding:0!important;
  border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;
  text-align:left;max-width:none;font-size:clamp(12px,1.03vw,15px);font-weight:590;
  letter-spacing:0;line-height:1.4;color:#e9f6ff;text-shadow:0 1px 4px #0c2744;}
.live-state i{width:7px;height:7px;display:inline-block;flex:none;}
.live-state.stale{color:#ffe0b1}.live-state.demo{color:#c7f2ff}
.clock-holder{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:112px}
.analog-clock{position:relative;width:108px;height:108px;border-radius:50%;background:rgba(6,36,63,.035);
  border:1px solid rgba(220,243,255,.27);box-shadow:0 0 22px rgba(150,220,255,.18);
  backdrop-filter:none;flex:none;}
.clock-face{position:absolute;inset:0;}
.clock-tick{position:absolute;top:50%;left:50%;width:1.5px;height:4px;background:#ff932f;
  transform:rotate(var(--angle)) translateY(-48px);transform-origin:50% 0;box-shadow:0 0 2px rgba(255,158,62,.8)}
.clock-tick.major{width:2.5px;height:7px;background:#ffb153}
.clock-number{position:absolute;color:#73cfff;font-weight:800;font-size:17px;line-height:1;text-shadow:0 0 5px #04375a}
.number-12{top:13px;left:50%;transform:translateX(-50%)}
.number-3{right:13px;top:50%;transform:translateY(-50%)}
.number-6{bottom:12px;left:50%;transform:translateX(-50%)}
.number-9{left:13px;top:50%;transform:translateY(-50%)}
.clock-hand{position:absolute;bottom:50%;left:50%;transform-origin:50% 100%;border-radius:4px;}
.hour-hand{width:4px;height:28px;margin-left:-2px;background:#f6fcff;box-shadow:0 0 5px #badcff}
.minute-hand{width:2.5px;height:36px;margin-left:-1.25px;background:#ffa146;box-shadow:0 0 4px #e7781d}
.second-hand{width:1px;height:39px;margin-left:-.5px;background:#64d2ff}
.clock-pin{position:absolute;width:7px;height:7px;border-radius:50%;background:#fff;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 4px #6cc8ff}
.clock-caption{color:#c3eaff;font-size:10px;letter-spacing:.04em;text-shadow:0 1px 3px #164060}
.notice[hidden]{display:none!important}
@media(min-width:751px){.topbar{min-height:clamp(205px,27vh,300px);align-items:flex-start;padding-top:27px}
 .brand{align-items:flex-start}.brand-mark{margin-top:2px}.clock-holder{margin-right:12px;}
 .mountain-bg{background-position:center 25%}
 .mountain-bg::after{background:linear-gradient(180deg,rgba(0,10,22,.04) 0%,rgba(0,13,28,.08) 36%,rgba(1,13,28,.48) 69%,#06182a 100%)}
}
@media(max-width:750px){.topbar{align-items:flex-start;min-height:158px;gap:6px;padding-top:10px}
 .brand{gap:6px;align-items:flex-start}.brand-mark{font-size:29px}
 .clock-holder{min-width:68px;margin-right:0}.analog-clock{width:67px;height:67px}
 .clock-tick{transform:rotate(var(--angle)) translateY(-30px);height:2.5px;width:1px}
 .clock-tick.major{height:4px;width:1.5px}.clock-number{font-size:11px}
 .number-12{top:8px}.number-3{right:7px}.number-6{bottom:7px}.number-9{left:7px}
 .hour-hand{height:17px;width:2.5px;margin-left:-1.25px}.minute-hand{height:23px;width:1.5px;margin-left:-.75px}
 .second-hand{height:24px}.clock-pin{width:5px;height:5px}
 .clock-caption{font-size:8px}.brand span{line-height:1.35}
 .live-state{font-size:10px;line-height:1.3;margin-top:7px;flex-wrap:nowrap}
}
@media(max-width:420px){.topbar{min-height:147px}.brand strong{font-size:18px}.clock-holder{min-width:62px}
 .analog-clock{width:60px;height:60px}.clock-tick{transform:rotate(var(--angle)) translateY(-27px)}
 .clock-number{font-size:10px}.number-12{top:7px}.number-3{right:6px}.number-6{bottom:6px}.number-9{left:6px}
 .hour-hand{height:15px}.minute-hand{height:20px}.second-hand{height:22px}
}

/* v2.0: pinned Compare Years navigation; period links remain scrollable on small displays. */
.tabs{overflow:visible;display:flex;align-items:stretch;min-width:0;gap:6px}
.period-links{display:flex;flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin;gap:5px;align-items:stretch}
.period-links a{flex:1 0 auto;display:flex;align-items:center;justify-content:center;min-width:64px}
.tabs .compare-nav-link{flex:0 0 auto;min-width:118px;background:rgba(10,83,137,.87);border:1px solid rgba(118,211,255,.65);color:#fff;font-weight:750;display:flex;align-items:center;justify-content:center;gap:5px;box-shadow:0 0 8px rgba(112,202,255,.22)}
.tabs .compare-nav-link:hover,.tabs .compare-nav-link:focus-visible{background:#137bb4;outline:2px solid #b9e9ff;outline-offset:1px}
.tabs .compare-nav-link span{font-size:12px;color:#93e6ff;margin-left:1px}
@media(max-width:750px){.tabs{gap:4px}.period-links{gap:3px}.period-links a{min-width:62px}.tabs .compare-nav-link{min-width:102px;font-size:10px;padding:6px 7px}}
@media(max-width:420px){.tabs .compare-nav-link{min-width:92px;font-size:9.5px;padding:6px 5px}}

/* Keep live-updated metric values and their units on the same line in every small card. */
.mini-body strong .metric-number{display:inline;color:#f5faff;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0}
.mini-body strong .metric-unit{display:inline;color:#d6f4ff;font-size:10px;font-weight:650;line-height:inherit;margin-left:4px}
.p-value .metric-number{display:inline;margin:0;color:inherit}

/* v2.0.1: fit full compass names (West, Northwest, North-Northwest) in mini card. */
.extra-card[data-metric="wind_direction"] .mini-body strong{font-size:clamp(12px,1.02vw,17px);white-space:normal;line-height:1.12;letter-spacing:-.035em;overflow-wrap:normal}
@media(max-width:750px){.extra-card[data-metric="wind_direction"] .mini-body strong{font-size:12px;line-height:1.07}}
@media(max-width:420px){.extra-card[data-metric="wind_direction"] .mini-body strong{font-size:11px}}


/* v2.0.2 — a clean temperature-driven rotating icon (no status badge).
   Sun: >18 C; ice crystal: 2..18 C inclusive; snowflake: <2 C. */
.live-state{gap:11px;max-width:100%;}
.live-state .status-temp-icon{
  --glow-color:rgba(90,210,255,.7);
  color:#80ddff;display:inline-flex;align-items:center;justify-content:center;
  height:29px;width:29px;flex:0 0 29px;margin:0;vertical-align:middle;
  background:transparent;border:0;box-shadow:none;
}
.live-state .status-temp-icon.is-sun{color:#ff9e2d;--glow-color:rgba(255,153,32,.8)}
.live-state .status-temp-icon.is-crystal{color:#65dfff;--glow-color:rgba(95,221,250,.65)}
.live-state .status-temp-icon.is-snow{color:#b7edff;--glow-color:rgba(188,240,255,.75)}
.live-state .status-temp-icon.is-none{display:none}
.live-state .status-temp-icon svg{
  display:block;width:100%;height:100%;fill:none;
  filter:drop-shadow(0 0 5px var(--glow-color));
  animation:weather-symbol-spin 10s linear infinite;
  transform-origin:center center;
  will-change:transform;
}
@keyframes weather-symbol-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* Soft dark mat behind the three lines below the period-navigation bar.
   Only historical heading text is backed, so the alpine photo remains visible. */
.history-header .history-copy{
  flex:1;min-width:0;
  padding:13px 18px 14px;
  border-radius:14px;
  background:linear-gradient(110deg,rgba(2,23,43,.83) 0%,rgba(3,27,50,.67) 72%,rgba(4,33,57,.48) 100%);
  border:1px solid rgba(172,222,252,.36);
  box-shadow:0 4px 22px rgba(0,10,27,.25);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  text-shadow:0 1px 3px rgba(0,6,19,.65);
}
.history-header .history-copy small{color:#8aebff}
.history-header .history-copy p{color:#e0f0fa}
@media(max-width:750px){
  .live-state .status-temp-icon{height:23px;width:23px;flex-basis:23px}
  .history-header{align-items:flex-start}
  .history-header .history-copy{padding:11px 12px}
}
@media(max-width:420px){
  .live-state{gap:6px}
  .live-state .status-temp-icon{height:21px;width:21px;flex-basis:21px}
  .history-header .history-copy{padding:9px 10px}
}
@media(prefers-reduced-motion:reduce){.live-state .status-temp-icon svg{animation:none!important}}


/* v2.0.3 — directional chart axes need height for all 16 compass points. */
.history-card.direction-history-card{height:310px;}
.history-card.direction-history-card .graph{height:calc(100% - 26px);}
@media(max-width:750px){.history-card.direction-history-card{height:310px;}}
@media(max-width:420px){.history-card.direction-history-card{height:300px;}}


/* v2.0.4: less prominent, slimmer rotating LIVE temperature symbols. */
.live-state .status-temp-icon{height:20px;width:20px;flex:0 0 20px;}
.live-state .status-temp-icon svg{filter:drop-shadow(0 0 2px var(--glow-color));}
@media(max-width:750px){.live-state .status-temp-icon{height:18px;width:18px;flex-basis:18px;}}
@media(max-width:420px){.live-state .status-temp-icon{height:16px;width:16px;flex-basis:16px;}}

/* v2.0.4: translucent warm ivory ('zachari') paper behind the three-line
   historical heading; dark navy text provides contrast over the pale tint. */
.history-header .history-copy{
  background:linear-gradient(112deg,rgba(250,240,219,.78) 0%,rgba(246,230,205,.70) 65%,rgba(238,218,190,.62) 100%);
  border:1px solid rgba(255,244,226,.85);
  box-shadow:0 4px 18px rgba(3,16,34,.16);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  text-shadow:none;
}
.history-header .history-copy small{color:#16465b;text-shadow:none;}
.history-header .history-copy h1{color:#11283a;text-shadow:none;}
.history-header .history-copy p{color:#294357;text-shadow:none;}


/* v2.0.5: approved fine-line white mountain silhouette to the left of the
   station title. Inline vector stays sharp on high-DPI PC, TV and phone. */
.brand-mark{
  display:flex;align-items:center;justify-content:center;
  width:73px;height:66px;flex:0 0 73px;
  padding:0;margin-top:-5px;line-height:1;
  color:#fff;text-shadow:none;filter:none;
}
.brand-mark .brand-mountain{width:100%;height:auto;display:block;overflow:visible;}
.brand-mark .brand-mountain path{
  fill:none;stroke:currentColor;stroke-width:3.7;
  stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 1px 2px rgba(0,23,48,.35));
}
@media(max-width:750px){
  .brand-mark{width:40px;height:37px;flex-basis:40px;margin-top:-2px}
  .brand-mark .brand-mountain path{stroke-width:2.3}
}
@media(max-width:420px){
  .brand-mark{width:33px;height:32px;flex-basis:33px;margin-top:-1px}
  .brand-mark .brand-mountain path{stroke-width:2}
}


/* v2.0.6 — White frosted-glass historical heading instead of ivory.
   70% transparent white (alpha 0.30) over the REAL mountain photograph.
   The blur and brightening reproduce sandblasted / frosted white glass.
   Keep legible navy headings without a solid colored box. */
.history-header .history-copy{
  background:rgba(255,255,255,.30);
  border:1px solid rgba(255,255,255,.70);
  border-radius:15px;
  -webkit-backdrop-filter:blur(15px) saturate(.7) brightness(1.45);
  backdrop-filter:blur(15px) saturate(.7) brightness(1.45);
  box-shadow:0 3px 19px rgba(0,25,47,.14),inset 0 1px 0 rgba(255,255,255,.23);
  text-shadow:none;
}
.history-header .history-copy small{color:#113a53;}
.history-header .history-copy h1{color:#0d2538;}
.history-header .history-copy p{color:#183a4c;}


/* v2.0.7 — subtle alpine cloud drift (left -> right).
   Extracted from the ACTUAL existing mountain photograph, sky-only.
   The mountains and rest of the original photograph remain completely still.
   Seamlessly repeat the transparent sky-cloud texture at its native width.
   Fixed layer never captures clicks and never touches the JSON/live logic. */
.drifting-clouds{
  position:fixed;
  inset:0 0 auto 0;
  height:300px;
  pointer-events:none;
  z-index:-1;
  background-image:url('./drifting-clouds.png');
  background-repeat:repeat-x;
  background-position:-1672px top;
  background-size:1672px 300px;
  opacity:.72;
  animation:parnassus-cloud-drift 300s linear infinite;
  will-change:background-position;
  contain:paint;
}
@keyframes parnassus-cloud-drift{
  from{background-position:-1672px top}
  to{background-position:0px top}
}
@media(max-width:750px){
  .drifting-clouds{height:250px;background-size:1393px 250px;
    background-position:-1393px top;opacity:.52;
    animation-name:parnassus-cloud-drift-mobile}
  @keyframes parnassus-cloud-drift-mobile{
    from{background-position:-1393px top}
    to{background-position:0px top}
  }
}
@media(prefers-reduced-motion:reduce){
  .drifting-clouds{animation:none!important;background-position:0 top;will-change:auto}
}


/* v2.0.8 — LG Smart TV compatibility. NEVER rely on CSS Grid to position
   weather cards. Legacy WebOS TV browsers may ignore Grid completely,
   stacking everything at the left edge. Use prefixed Flexbox with percentage
   columns and explicit per-card margins (no dependency on flex-gap support).
   Fallback display:inline-block remains useful on very old TV engines. */
.dashboard{display:block!important}
.dashboard > .head-grid, .dashboard > .charts, .dashboard > .extra-area {margin-bottom:9px}
.head-grid,.charts,.extra-grid,.history-grid{
  display:block;display:-webkit-flex;display:-ms-flexbox;display:flex!important;
  -webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;
  -webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;
  gap:0!important;
  margin-left:-.5%;margin-right:-.5%;width:101%;
}
.head-grid>.primary,
.charts>.trend,
.extra-grid>.extra-card,
.history-grid>.history-card{
  box-sizing:border-box;
  -webkit-box-flex:0;
  -webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;
  -webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;
  min-width:0;
  margin-left:.5%;margin-right:.5%;margin-bottom:10px;
}
.head-grid>.primary{width:15.666666%;max-width:15.666666%;-webkit-flex-basis:15.666666%;flex-basis:15.666666%}
.charts>.trend{width:49%;max-width:49%;-webkit-flex-basis:49%;flex-basis:49%}
.extra-grid>.extra-card{width:11.5%;max-width:11.5%;-webkit-flex-basis:11.5%;flex-basis:11.5%;margin-bottom:8px}
.history-grid>.history-card{width:32.333333%;max-width:32.333333%;-webkit-flex-basis:32.333333%;flex-basis:32.333333%;margin-bottom:12px}
@media(max-width:1300px){
 .head-grid>.primary{width:32.333333%;max-width:32.333333%;-webkit-flex-basis:32.333333%;flex-basis:32.333333%}
 .extra-grid>.extra-card{width:19%;max-width:19%;-webkit-flex-basis:19%;flex-basis:19%}
 .history-grid>.history-card{width:49%;max-width:49%;-webkit-flex-basis:49%;flex-basis:49%}
}
@media(max-width:750px){
 .head-grid>.primary{width:32.333333%;max-width:32.333333%;-webkit-flex-basis:32.333333%;flex-basis:32.333333%;margin-bottom:5px}
 .charts>.trend{width:99%;max-width:99%;-webkit-flex-basis:99%;flex-basis:99%;margin-bottom:5px}
 .extra-grid>.extra-card{width:32.333333%;max-width:32.333333%;-webkit-flex-basis:32.333333%;flex-basis:32.333333%;margin-bottom:5px}
 .history-grid>.history-card{width:99%;max-width:99%;-webkit-flex-basis:99%;flex-basis:99%;margin-bottom:8px}
}

/* A gentler type weight for card / graph titles. Numbers stay bold so
   the actual weather readings remain highly readable on a distant TV. */
.primary .p-title,.trend-head h2,.history-card .trend-head h2{font-weight:600!important;letter-spacing:.008em}
.extra-heading h2{font-weight:650!important}


/* v2.0.9 — Much more transparent WHITE frost so the actual Parnassus
   peaks remain visible. Keep contrast through a very gentle local white
   text highlight, not through a bright opaque backing or 15px blur. */
.history-header .history-copy{
  position:relative;
  box-sizing:border-box;
  padding-right:156px;
  background:rgba(255,255,255,.17); /* 83% transparent */
  border:1px solid rgba(255,255,255,.61);
  -webkit-backdrop-filter:blur(3px) saturate(.96) brightness(1.07);
  backdrop-filter:blur(3px) saturate(.96) brightness(1.07);
  box-shadow:0 3px 12px rgba(0,18,37,.11),inset 0 1px 0 rgba(255,255,255,.18);
}
.history-header .history-copy small,
.history-header .history-copy h1,
.history-header .history-copy p{
  text-shadow:0 1px 2px rgba(255,255,255,.50);
}
/* Chart count is part of the same frosted-glass panel, not a separate card. */
.history-header .history-copy .history-chart-count{
  display:inline-block;
  position:absolute;right:20px;top:50%;
  -webkit-transform:translateY(-50%);transform:translateY(-50%);
  color:#15374c;
  border:1px solid rgba(25,75,107,.55);
  background:rgba(255,255,255,.24);
  border-radius:9px;
  padding:10px 14px;
  font-size:14px;font-weight:650;
  line-height:1.2;white-space:nowrap;
  box-shadow:none;
}
@media(max-width:750px){
 .history-header .history-copy{padding-right:12px}
 .history-header .history-copy .history-chart-count{
   position:static;top:auto;right:auto;
   -webkit-transform:none;transform:none;
   margin-top:10px;padding:6px 10px;font-size:11px;
 }
}
@media(max-width:420px){.history-header .history-copy{padding-right:10px}}


/* v2.1.0 — archive record total immediately BELOW Live Data / Last Update,
   always sourced from PHP's actually parsed WeatherLink archive (no hardcoding). */
.archive-status{
  display:block;
  margin-top:7px;
  color:#e7f4ff;
  font-size:clamp(10px,.77vw,12px);
  font-weight:570;
  line-height:1.4;
  letter-spacing:.035em;
  text-shadow:0 1px 4px rgba(0,18,45,.88),0 0 2px #0b2851;
  white-space:normal;
}
.brand .archive-status #archive-record-count{display:inline!important;max-width:none!important;margin:0!important;font-variant-numeric:tabular-nums;font-weight:720;color:#fff}
/* Entire frosted / sandblasted historical banner is GONE. No badge or panel.
   Keep the selected period heading and explanatory line as unboxed text. */
.history-header{
  display:block;
  margin:14px 3px 12px;
  padding:0;
}
.history-header .history-heading{
  display:block;
  padding:0;
  margin:0;
  background:none!important;
  border:0!important;
  border-radius:0!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
  color:#fff;
  text-shadow:0 2px 6px rgba(0,16,35,.98),0 1px 3px #051c34;
}
.history-header .history-heading h1{
  font-size:clamp(23px,2.1vw,32px);
  margin:0 0 4px;
  color:#fff;
  font-weight:680;
  line-height:1.12;
}
.history-header .history-heading p{
  margin:0;
  color:#f2faff;
  font-size:12px;
  line-height:1.5;
}
@media(max-width:750px){
 .archive-status{font-size:9px;margin-top:6px;line-height:1.35;max-width:260px;letter-spacing:.015em}
 .history-header{margin:10px 3px 10px}
 .history-header .history-heading h1{font-size:21px}
 .history-header .history-heading p{font-size:10px}
}
@media(max-width:420px){
 .archive-status{font-size:8.5px;max-width:245px}
 .history-header .history-heading h1{font-size:19px}
}

/* v2.1.1: History charts start directly below the period menu; no header/title panel. */
.is-history .history-content{padding-top:6px;}
.is-history .history-grid{margin-top:0;}

/* LG webOS/NetCast chart fallback: native canvas, fixed internal resolution, responsive CSS. */
.graph canvas.weather-tv-canvas{display:block;width:100%;height:100%;max-width:100%;}

/* v2.1.3 TV-only Canvas fallback: avoid SVG and preserve chart dimensions. */
.graph canvas.weather-tv-canvas{display:block!important;width:100%!important;height:100%!important;max-width:100%;}


/* v2.1.4 LG TV only: stable digital Greece clock, analog kept on PC/mobile. */
.tv-digital-clock{display:none;min-width:116px;padding:12px 10px 9px;
  border:1px solid rgba(160,220,255,.5);border-radius:12px;
  background:rgba(4,34,58,.38);color:#c5edff;
  font:700 30px/1.1 Arial,'Segoe UI',sans-serif;letter-spacing:1px;
  text-align:center;text-shadow:0 0 9px rgba(40,150,225,.8);
  white-space:nowrap;font-variant-numeric:tabular-nums;}
.mmg-tv-mode .clock-holder{min-width:154px!important;}
.mmg-tv-mode .clock-holder .analog-clock{display:none!important;}
.mmg-tv-mode .clock-holder .tv-digital-clock{display:block!important;}
.mmg-tv-mode .clock-holder .clock-caption{font-size:11px;}
@media(max-width:750px){
 .mmg-tv-mode .clock-holder{min-width:115px!important;}
 .mmg-tv-mode .clock-holder .tv-digital-clock{font-size:22px;padding:8px 7px;min-width:112px;letter-spacing:0;}
}


/* v2.1.5 LG WEBOS FIX: never use negative z-index on photo layers.
   Old LG browser compositors could paint those layers BEHIND the page's root
   background. Give the page a regular image, plus an <img> fallback. */
html {background-color:#061a30;background-image:url('./piraeus-passalimani.jpg');background-position:center top;background-repeat:no-repeat;background-size:cover;}
body {background-color:transparent;min-height:100vh;}
.mountain-bg {
  position:fixed;top:0;left:0;right:0;bottom:0;inset:auto;
  width:100%;height:100%;z-index:0;
  overflow:hidden;pointer-events:none;
  background-color:#08213d;
  background-image:url('./piraeus-passalimani.jpg');
  background-position:center 25%;background-repeat:no-repeat;background-size:cover;
}
.mountain-bg .mountain-photo {
  position:absolute;left:0;top:0;display:block;
  width:100%;height:100%;object-fit:cover;object-position:center 25%;
}
.mountain-bg::after {z-index:1;}
.drifting-clouds{z-index:1;opacity:.82;}
.app{position:relative;z-index:2;}
/* Large cloud banks move very slowly; mountain and forest stay still.
   On old TV keep the cloud layer static to protect chart/clock performance. */
.mmg-tv-mode .drifting-clouds{animation:none!important;will-change:auto;opacity:.50;}
/* Header order: Parnassus location, then Live / Last Update, then Historical. */
.brand-text{position:relative;}
.brand .brand-text > span{display:block;}
.brand-text .live-state {position:relative;margin-top:8px;padding:0!important;line-height:1.3;gap:6px;}
.brand-text .live-state .status-temp-icon {position:absolute;left:-25px;top:-2px;margin:0;}
.brand-text .archive-status{margin-top:7px;font-size:12px;font-weight:520;letter-spacing:0;text-transform:none;}
.brand-text .archive-status #archive-record-count{font-weight:670;}
@media(max-width:750px){
 .mountain-bg{background-position:center top;}
 .mountain-bg .mountain-photo{object-position:center top;}
 .brand-text .live-state .status-temp-icon{left:-18px;top:0;}
 .brand-text .archive-status{font-size:10px;}
}
@media(max-width:420px){
 .brand-text .live-state .status-temp-icon{left:-17px;}
 .brand-text .archive-status{font-size:9px;}
}


/* v2.1.6 - desktop PHOTO-FIRST layout.
   The six current readings and the two main trend charts remain immediately
   available; the sixteen secondary parameters are BELOW the first viewport.
   Do not change LG TV / phone layouts, chart logic, or scroll behavior. */
@media (min-width: 1001px) {
  body.is-now:not(.mmg-tv-mode) .dashboard > .head-grid { margin-bottom: 14px; }
  body.is-now:not(.mmg-tv-mode) .dashboard > .charts { margin-bottom: 8px; }
  body.is-now:not(.mmg-tv-mode) .dashboard > .extra-area {
    margin-top: max(110px, calc(100vh - 565px));
  }
  /* Improve visibility of the original mountain in the opening screen. */
  body.is-now:not(.mmg-tv-mode) .mountain-bg::after {
    background: linear-gradient(180deg,
      rgba(0,10,27,.02) 0%,rgba(0,11,25,.06) 32%,
      rgba(0,11,27,.22) 62%,rgba(2,14,30,.52) 100%);
  }
  /* Main extracted cloud layer moves slowly; enlarged bank creates an
     observable drift of the larger natural clouds over the *fixed* mountain.
     These are visual layers only and never touch the actual sensor data. */
  body:not(.mmg-tv-mode) .drifting-clouds {
    height: 420px;
    overflow: visible;
    contain: none;
    opacity: .90;
    animation-duration: 600s;
  }
  body:not(.mmg-tv-mode) .drifting-clouds::before {
    content: '';
    display: block;
    position: absolute;
    top: -34px;
    left: -2110px;
    width: calc(100% + 2110px);
    height: 392px;
    background-image: url('./drifting-clouds.png');
    background-repeat: repeat-x;
    background-size: 2110px 379px;
    background-position: 0 0;
    opacity: .73;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 82%, transparent 100%);
    animation: mmg-large-cloud-bank 780s linear infinite;
    will-change: transform;
  }
}
@keyframes mmg-large-cloud-bank {
  from {-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
  to {-webkit-transform:translate3d(2110px,0,0);transform:translate3d(2110px,0,0)}
}
/* The TV uses a stable photo & cheap Canvas charts; no extra moving layer. */
.mmg-tv-mode .drifting-clouds::before {display:none!important;animation:none!important;}
@media (prefers-reduced-motion: reduce) {
  .drifting-clouds::before {animation:none!important;will-change:auto!important;}
}


/* v2.1.7 - PC ONLY: layout requested by user.  Keep the brand, station
   location, live status, historical count and clock in their original top
   positions. Lower the period menu, all six live readings and both trend
   graphs as ONE block. The "Additional Weather Information" heading peeks
   into the bottom of the initial PC viewport; details scroll below.
   The historical periods, actual data, mobile and LG TV are unchanged. */
@media (min-width:1301px) {
  body.is-now:not(.mmg-tv-mode) .topbar {
    min-height: max(300px, calc(100vh - 520px));
  }
  body.is-now:not(.mmg-tv-mode) .dashboard > .extra-area {
    margin-top:0;
  }
}
@media (min-width:1301px) and (max-height:850px) {
  body.is-now:not(.mmg-tv-mode) .topbar {
    min-height: max(235px, calc(100vh - 440px));
  }
}
/* Narrow PC screens display primary readings on two rows, so give that
   layout less upper whitespace to keep the heading near the screen edge. */
@media (min-width:1001px) and (max-width:1300px) {
  body.is-now:not(.mmg-tv-mode) .topbar {
    min-height:max(195px,calc(100vh - 615px));
  }
  body.is-now:not(.mmg-tv-mode) .dashboard > .extra-area {
    margin-top:0;
  }
}


/* v2.1.8 — VISIBLE cloud movement. The v2.1.7 alpha layer contained
   only ~4% visible pixels and its movement was too slow to perceive.
   Two identical cloud-only images are translated using the GPU at 1 screen
   width per 220 seconds (~8 px/s at 1920px), left -> right, smoothly and
   seamlessly. Mountains, readings, scrolling and approved PC positions are
   unchanged. No animated layers or extra GPU work on LG TV and phones. */
.mmg-cloud-window { display:none; pointer-events:none; }
@media (min-width:1001px) {
  body:not(.mmg-tv-mode) .drifting-clouds{display:none!important;}
  body:not(.mmg-tv-mode) .mmg-cloud-window {
    display:block;
    position:fixed;
    left:0;right:0;top:0;
    width:100%;
    height:20.22vw;
    overflow:hidden;
    z-index:1;
    opacity:.97;
    pointer-events:none;
  }
  body:not(.mmg-tv-mode) .mmg-cloud-track {
    height:100%;width:200%;
    display:-webkit-box;
    display:-webkit-flex;
    display:flex;
    -webkit-animation:mmg-real-clouds 220s linear infinite;
    animation:mmg-real-clouds 220s linear infinite;
    -webkit-transform:translate3d(-50%,0,0);
    transform:translate3d(-50%,0,0);
    will-change:transform;
  }
  body:not(.mmg-tv-mode) .mmg-cloud-track img {
    display:block;
    -webkit-box-flex:0;
    -webkit-flex:0 0 50%;
    flex:0 0 50%;
    width:50%;height:100%;
    border:0;
  }
}
@-webkit-keyframes mmg-real-clouds {
  from{-webkit-transform:translate3d(-50%,0,0)}
  to{-webkit-transform:translate3d(0,0,0)}
}
@keyframes mmg-real-clouds {
  from{transform:translate3d(-50%,0,0)}
  to{transform:translate3d(0,0,0)}
}
.mmg-tv-mode .mmg-cloud-window {display:none!important;}
@media(prefers-reduced-motion:reduce){
  .mmg-cloud-track{-webkit-animation:none!important;animation:none!important;will-change:auto!important;}
}

/* Piraeus Weather Station — clean separate install. */
html {background-color:#092a42;background-image:url('./piraeus-passalimani.jpg');}
.mountain-bg {background-color:#103451;background-image:url('./piraeus-passalimani.jpg');}
.mountain-bg .mountain-photo {object-position:center center;}
.mountain-bg::after {background:linear-gradient(180deg,rgba(2,19,34,.34) 0%,rgba(2,22,40,.16) 42%,rgba(2,16,32,.50) 100%);}
.drifting-clouds,.mmg-cloud-window{display:none!important;}
/* Keep approved Parnassus desktop positions and scrolling without fake clouds. */
@media(max-width:750px) { .mountain-bg .mountain-photo{object-position:47% center;} }
/* PIRAEUS WEATHER - SHOW MORE MARINA ZEAS */

@media (min-width: 751px) {

  html {
    background-position: center 89%;
  }

  .mountain-bg {
    background-position: center 78%;
  }

  .mountain-bg .mountain-photo {
    object-position: center 89%;
  }

}