/* FLYwithMIKI meteo dashboard - shared styles for meteo.html and meteoAI.html */
:root{--green:#1dae80;--green-d:#149067;--slate:#586573;--slate-d:#3c4753;--teal-bg:#eafaf7;
    --ink:#2b333c;--bg:#f4f7f8;--card:#fff;--line:#e4eaec;--dim:#7a8896;
    --go:#1dae80;--goBg:#e7f7f1;--watch:#f5a623;--watchBg:#fef4e3;--stop:#e5484d;--stopBg:#fdebec;
    --shadow:0 1px 2px rgba(40,60,70,.05),0 6px 20px rgba(40,60,70,.06);}
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;line-height:1.5;font-size:15px}
  a{color:var(--green-d);text-decoration:none}a:hover{text-decoration:underline}
  .wrap{max-width:1120px;margin:0 auto;padding:0 16px 56px}
  header{background:#fff;border-bottom:1px solid var(--line)}
  .head-in{max-width:1120px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .logo{height:42px;width:42px;border-radius:50%}
  .brand b{font-weight:800}.brand span{display:block;font-size:12px;color:var(--dim)}
  .head-sp{flex:1}
  select,textarea{background:#fff;border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:8px 10px;font:inherit;font-size:14px}
  textarea{width:100%;resize:vertical;font-size:13px}
  .days{display:flex;gap:8px;overflow:auto;padding:14px 0 4px;scrollbar-width:none}.days::-webkit-scrollbar{display:none}
  .day{flex:0 0 auto;min-width:104px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 12px;cursor:pointer;text-align:center;box-shadow:var(--shadow);transition:.12s}
  .day:hover{border-color:var(--green)}
  .day.on{border-color:var(--green);box-shadow:0 0 0 2px rgba(29,174,128,.18),var(--shadow)}
  .day .dow{font-weight:700;font-size:14px}.day .dt{font-size:11px;color:var(--dim)}
  .day .pct{font-size:21px;font-weight:800;margin-top:3px;line-height:1}
  .day .dots{margin-top:6px;display:flex;gap:3px;justify-content:center}
  .dot{width:9px;height:9px;border-radius:50%}
  .dot.go{background:var(--go)}.dot.watch{background:var(--watch)}.dot.stop{background:var(--stop)}.dot.na{background:#d4dadd}
  .day .ov{margin-top:6px;font-size:10.5px;font-weight:700;padding:2px 0;border-radius:6px;color:#fff}
  .overall{background:#fff;border-radius:16px;box-shadow:var(--shadow);margin-top:14px;overflow:hidden;border:1px solid var(--line)}
  .ov-top{display:flex;flex-wrap:wrap}
  .ov-light{flex:0 0 168px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;color:#fff;text-align:center}
  .ov-light .big{font-size:34px;font-weight:800;line-height:1}
  .ov-light .lbl{font-size:12px;opacity:.95;margin-top:6px;text-transform:uppercase;letter-spacing:.6px;font-weight:700}
  .ov-body{flex:1;min-width:280px;padding:16px 18px}
  .ov-body h3{margin:0 0 4px;font-size:16px}.ov-date{color:var(--dim);font-size:13px;margin-bottom:8px}
  .ov-text{font-size:14.5px;color:var(--slate-d)}
  .breakdown{margin-top:12px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .breakdown .bh{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);font-weight:700;padding:8px 11px;background:#fbfdfd;border-bottom:1px solid var(--line)}
  .brow{display:flex;align-items:center;gap:8px;padding:6px 11px;font-size:13px;border-bottom:1px dashed var(--line)}
  .brow:last-child{border-bottom:none}
  .brow .bn{flex:1}.brow .bn small{color:var(--dim);font-size:11.5px}
  .brow .bd{font-weight:700;font-variant-numeric:tabular-nums;min-width:42px;text-align:right}
  .brow .bd.zero{color:var(--dim)}.brow .bd.minus{color:#c0353a}
  .brow.cap{background:#fff7ee}.brow.nogo{background:var(--stopBg)}.brow.total{background:#f1f8f5;font-weight:800}
  .brow.total .bd{color:var(--ink)}
  .disclaimer{margin-top:12px;font-size:11px;line-height:1.5;color:var(--dim);border-top:1px solid var(--line);padding-top:9px}
  .ov-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
  .btn{background:var(--green);color:#fff;border:none;border-radius:10px;padding:9px 13px;font:inherit;font-weight:700;cursor:pointer;font-size:13.5px}
  .btn.sec{background:#fff;color:var(--slate-d);border:1px solid var(--line)}
  .btn:active{transform:translateY(1px)}
  .matrix{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:8px;overflow:auto}
  table{border-collapse:collapse;width:100%;min-width:560px;font-size:13px}
  th,td{padding:7px 8px;text-align:center}
  th{color:var(--dim);font-weight:600;font-size:11px;text-transform:uppercase}
  td.cat{text-align:left;color:var(--slate-d);font-weight:600;white-space:nowrap}
  .cell{display:inline-flex;width:30px;height:22px;border-radius:6px;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}
  .cell.go{background:var(--go)}.cell.watch{background:var(--watch)}.cell.stop{background:var(--stop)}.cell.na{background:#d4dadd}
  td.pctcell{font-weight:800}
  .section-title{margin:18px 2px 8px;font-size:11.5px;text-transform:uppercase;letter-spacing:1px;color:var(--dim);font-weight:700}
  .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
  @media(max-width:760px){.cards{grid-template-columns:1fr}.ov-light{flex-basis:100%}}
  .card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
  .card.wide{grid-column:1 / -1}
  .card.wide .embed iframe{height:480px}
  .card-h{display:flex;align-items:center;gap:11px;padding:14px 16px;cursor:pointer}
  .ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px;background:var(--teal-bg)}
  .card-h .tt{flex:1}.card-h .tt b{font-size:15px}.card-h .tt small{display:block;color:var(--dim);font-size:12px}
  .pill{padding:5px 10px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}
  .pill.go{background:var(--goBg);color:var(--green-d)}.pill.watch{background:var(--watchBg);color:#b9770a}.pill.stop{background:var(--stopBg);color:#c0353a}
  .card-b{border-top:1px solid var(--line);padding:0 16px;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s}
  .card.open .card-b{max-height:3200px;padding:14px 16px}
  .kv{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
  .kv:last-of-type{border-bottom:none}.kv .k{color:var(--dim)}.kv .v{font-weight:600}
  .why{font-size:13px;color:var(--slate-d);margin:8px 0 0;background:var(--teal-bg);border-radius:8px;padding:9px 11px}
  .embed{margin-top:12px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#eef3f4}
  .embed iframe{width:100%;height:300px;border:0;display:block}
  .embed img{width:100%;display:block}
  .spark{width:100%;height:96px;display:block;margin-top:6px}
  .links{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
  .lnk{font-size:12.5px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 10px;color:var(--slate-d)}
  .kw{font-size:11.5px;color:var(--dim);margin-top:8px;line-height:1.45}.kw b{color:var(--slate-d)}
  .ovr{display:flex;gap:6px;align-items:center;margin-top:10px;flex-wrap:wrap}
  .ovr small{color:var(--dim);font-size:12px}
  .ovr button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:5px 10px;cursor:pointer;font:inherit;font-size:12px;font-weight:700}
  .ovr button.on{color:#fff;border-color:transparent}
  .ovr button[data-v=go].on{background:var(--go)}.ovr button[data-v=watch].on{background:var(--watch)}.ovr button[data-v=stop].on{background:var(--stop)}.ovr button[data-v=auto].on{background:var(--slate)}
  .vtab{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
  .vtab .vt{font-size:11.5px;border:1px solid var(--line);border-radius:8px;padding:6px 9px;background:#fbfdfd;line-height:1.5}
  .vt b{color:var(--slate-d)}
  .vt.south,.vt.warn{border-color:#f3c08a;background:#fff7ee}
  .vt.bad{border-color:#f3a0a3;background:#fdebec}
  .vt.best{border-color:var(--green);background:var(--teal-bg)}
  .foggrid{display:grid;grid-template-columns:96px repeat(3,1fr);align-items:center;gap:5px 4px;margin-top:6px;font-size:11.5px}
  .foggrid .lbl{color:var(--dim);text-align:left}
  .foggrid .hd{color:var(--dim);text-align:center;font-weight:700;font-size:11px}
  .foggrid .c{display:flex;justify-content:center}
  /* general forecast panel */
  .fc{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden}
  .fc-h{display:flex;align-items:center;gap:11px;padding:13px 16px;cursor:pointer;border-bottom:1px solid var(--line)}
  .fc-h .ic{background:#eef2ff}
  .fc-h .tt{flex:1}.fc-h .tt b{font-size:15px}.fc-h .tt small{display:block;color:var(--dim);font-size:12px}
  .fc-b{padding:14px 16px}
  .fc-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
  .fc-tabs button{border:1px solid var(--line);background:#fbfdfd;border-radius:8px;padding:6px 10px;cursor:pointer;font:inherit;font-size:12px;font-weight:700;color:var(--slate-d)}
  .fc-tabs button.on{background:var(--slate);color:#fff;border-color:transparent}
  .fc-text{font-size:13.5px;line-height:1.6;white-space:pre-wrap;max-height:340px;overflow:auto;background:#fbfdfd;border:1px solid var(--line);border-radius:10px;padding:12px}
  .fc-text .day-h{font-weight:800;color:var(--ink);display:block;margin-top:10px}
  .fc-text .day-h:first-child{margin-top:0}
  .fc-day{background:#eef6ff;border:1px solid #cfe0f2;border-radius:10px;padding:10px 12px;margin-bottom:10px;font-size:13.5px;line-height:1.55}
  .fc-day-h{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#3f6b95;font-weight:700;margin-bottom:4px}
  mark{padding:0 2px;border-radius:3px;font-weight:600}
  mark.kw-front{background:#ffd9dc;color:#9c2a2f}
  mark.kw-foehn{background:#ffe0c2;color:#9a5410}
  mark.kw-wind{background:#fde7b0;color:#8a6a00}
  mark.kw-storm{background:#d8eecf;color:#3f6b2b}
  mark.kw-regwind{background:#cfe9f6;color:#1f5b78}
  .fc-legend{font-size:11px;color:var(--dim);margin-top:8px;display:flex;flex-wrap:wrap;gap:10px}
  .fc-legend span{display:inline-flex;align-items:center;gap:4px}
  .fc-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
  .fc-meta{font-size:11px;color:var(--dim);margin-top:8px}
  details.fc-paste{margin-top:10px;font-size:12px;color:var(--dim)}
  details.fc-paste summary{cursor:pointer;color:var(--green-d);font-weight:700}
  #status{margin-top:12px;font-size:13px;color:var(--dim)}
  footer{margin-top:26px;color:var(--dim);font-size:12.5px;line-height:1.6}
  footer .disc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px}
  .toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--slate-d);color:#fff;padding:10px 16px;border-radius:10px;font-size:13px;opacity:0;pointer-events:none;transition:.2s;z-index:50}
  .toast.show{opacity:1}
  .loader{display:inline-block;width:14px;height:14px;border:2px solid #b7efe9;border-top-color:var(--green);border-radius:50%;animation:sp 1s linear infinite;vertical-align:-2px;margin-right:6px}
  @keyframes sp{to{transform:rotate(360deg)}}
  /* Part banners: manual analysis vs AI */
  .part{margin:26px 0 12px;border-radius:14px;padding:14px 18px;color:#fff;box-shadow:var(--shadow)}
  .part b{font-size:16px;display:block}
  .part span{font-size:12.5px;opacity:.92}
  .part.p1{background:linear-gradient(100deg,var(--slate-d),var(--slate))}
  .part.p2{background:linear-gradient(100deg,var(--green-d),var(--green))}
  /* neutral value chips (Part 1, colour only where explicitly defined) */
  .chip{display:inline-block;padding:3px 9px;border-radius:8px;font-weight:800;font-variant-numeric:tabular-nums;background:#eef3f4;color:var(--slate-d)}
  .chip.yellow{background:var(--watchBg);color:#b9770a}
  .chip.red{background:var(--stopBg);color:#c0353a}
  /* raw data table */
  .rt{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px;min-width:0}
  .rt th{color:var(--dim);font-weight:600;font-size:11px;text-transform:uppercase;text-align:left;padding:5px 8px}
  .rt td{padding:5px 8px;border-top:1px dashed var(--line);text-align:left;font-variant-numeric:tabular-nums}
  .rt td.num{font-weight:700}
  /* precipitation hour strip */
  .hstrip{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;margin-top:10px}
  .hstrip .hc{border-radius:8px;padding:7px 2px;text-align:center;font-size:11px;font-weight:700;color:var(--slate-d);background:#eef3f4}
  .hstrip .hc small{display:block;font-weight:600;color:var(--dim);font-size:10px}
  .bignum{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
  .bignum .bn1{flex:1;min-width:130px;background:#fbfdfd;border:1px solid var(--line);border-radius:10px;padding:10px 12px;text-align:center}
  .bignum .bn1 .v{font-size:26px;font-weight:800;line-height:1.1}
  .bignum .bn1 .k{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.4px;margin-top:3px}
  .fc-days{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
  .fc-days button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 10px;cursor:pointer;font:inherit;font-size:12px;font-weight:700;color:var(--slate-d)}
  .fc-days button.on{background:var(--green);color:#fff;border-color:transparent}
  details.fc-full{margin-top:10px;font-size:12px}
  details.fc-full summary{cursor:pointer;color:var(--green-d);font-weight:700}
  .conf{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800;margin-left:8px}
  .conf.hi{background:var(--goBg);color:var(--green-d)}
  .conf.md{background:var(--watchBg);color:#b9770a}
  .conf.lo{background:var(--stopBg);color:#c0353a}
  
  
			
			html {scroll-behavior: smooth;}
            .w3-sidebar a {font-family: "Roboto", sans-serif; font-size: 1.5em}
             body,h1,h2,h3,h4,h5,h6,.w3-wide {font-family: "Montserrat", sans-serif;}
            .w3-third img {margin-bottom: -6px; opacity: 0.8; cursor: pointer}
            .w3-third img:hover {opacity: 1}
            .mySlides {display:none;} /* slideshowhoz kell */

 
            /* Prediction */
            .forecast-container {
              display: flex;
              justify-content: space-between;
              max-width: 1000px;
              margin: auto;
              padding-bottom: 20px;
              }
            .forecast-table {
              flex: 1;
              margin: 0 10px;
              }
            .justified-paragraph {
              text-align: justify;
              max-width: 1000px;
              margin: auto;
             padding-top: 20px;
             }
    /* Prediction */

/* ---- sticky day selector (meteo.html Part 1) ---- */
.days.sticky{position:sticky;top:0;z-index:30;background:var(--bg);padding-top:10px;padding-bottom:8px;margin:0 -4px;padding-left:4px;padding-right:4px}
@media(max-width:992px){.days.sticky{top:4em}} /* below the fixed mobile top bar */

/* ---- per-town precipitation grid ---- */
.pgrid{display:grid;grid-template-columns:110px repeat(9,1fr) 52px 46px;gap:4px 4px;margin-top:10px;align-items:center;font-size:11.5px}
.pgrid .pl{color:var(--slate-d);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pgrid .ph{color:var(--dim);font-weight:700;font-size:10px;text-align:center}
.pgrid .pc{border-radius:6px;padding:5px 0;text-align:center;font-weight:700;font-size:10.5px;background:#eef3f4;color:var(--slate-d)}
.pgrid .ps{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.pgrid .ps small{color:var(--dim);font-weight:600}
@media(max-width:680px){.pgrid{grid-template-columns:84px repeat(9,1fr) 44px 40px;font-size:10.5px}}

/* ---- föhn card: signal sections, hourly strip, corridor chips ---- */
.fsec{margin:14px 0 4px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--dim);font-weight:700}
.fsec:first-child{margin-top:0}
.kv .k small{color:var(--dim);font-weight:500;text-transform:none}
.kv .v small{color:var(--dim);font-weight:500}
.fstrip{display:grid;grid-template-columns:repeat(11,1fr);gap:3px;margin-top:4px}
.fstrip .fh{border-radius:6px;padding:6px 0;text-align:center;font-size:10px;font-weight:700;color:#fff}
.fh.go{background:var(--go)}.fh.watch{background:var(--watch)}.fh.stop{background:var(--stop)}
.fh.na{background:#d4dadd;color:var(--slate-d)}
/* chart left + signal ladder right on wide screens, stacked on mobile */
.frow{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.fcol-chart{flex:1 1 300px;min-width:260px;max-width:420px}
.fcol-sig{flex:1.4 1 320px;min-width:280px}
@media(max-width:760px){.fcol-chart{max-width:none}}
/* ⓘ toggle + explanation box per signal row */
.inf{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;
  background:#dbe4e8;color:var(--slate-d);font-size:10px;font-weight:800;font-style:normal;cursor:pointer;
  margin-left:6px;vertical-align:1px;user-select:none}
.inf:hover{background:var(--slate);color:#fff}
.ftip{display:none;font-size:11.5px;line-height:1.5;color:var(--slate-d);background:#eef6ff;border:1px solid #cfe0f2;border-radius:8px;padding:7px 10px;margin:4px 0 6px}
.ftip.show{display:block}
.senrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.sen{font-size:11.5px;border:1px solid var(--line);border-radius:8px;padding:5px 9px;background:#fbfdfd;line-height:1.5}
.sen b{color:var(--slate-d)}
.sen small{color:var(--dim)}
.sen.warn{border-color:#f3c08a;background:#fff7ee}
.sen.bad{border-color:#f3a0a3;background:#fdebec}

/* ---- cross links between the two pages ---- */
.pagelink{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:16px 18px;margin-top:22px}
.pagelink .tt{flex:1}
.pagelink .tt b{font-size:15px}
.pagelink .tt small{display:block;color:var(--dim);font-size:12.5px}

/* ---- fixes ---- */
/* w3.css sets html{overflow-x:hidden}, which disables position:sticky in Chromium.
   overflow-x:clip clips identically but does not create a scroll container, so sticky works. */
html{overflow-x:clip!important}
.days.sticky{position:-webkit-sticky;position:sticky}

/* fog: locations in 2 columns on wide screens, stacked on narrow */
.fogwrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:2px 28px}
.fogwrap .foggrid{grid-template-columns:118px repeat(3,1fr)}

/* ---- sticky top bar: brand + day selector (meteo.html) ----
   Flex, not grid: the brand can shrink and ellipsize (never slides under the chips),
   and the chip row scrolls inside its own box (never widens the bar). */
.stickybar{position:-webkit-sticky;position:sticky;top:0;z-index:30;background:var(--bg);
  display:flex;align-items:center;gap:12px;
  padding:10px 4px 8px;margin:0 -4px;border-bottom:1px solid var(--line)}
@media(max-width:992px){.stickybar{top:4em}} /* below the fixed mobile top bar */
.sb-brand{display:flex;align-items:center;gap:10px;flex:0 1 auto;min-width:40px;overflow:hidden}
.stickybar .logo{height:40px;width:40px;border-radius:50%;flex:0 0 auto}
.sb-brand .brand{min-width:0;overflow:hidden}
.sb-brand b{font-weight:800;font-size:14.5px;line-height:1.2;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-brand span{display:block;font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stickybar .days{flex:1 1 0;min-width:0;padding:2px 0;margin:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.sb-sp{display:none}
/* center the chips when there is room; auto margins collapse to 0 when the row
   overflows, so the first chip stays reachable while scrolling (unlike justify-content:center) */
.stickybar .days>.day:first-child{margin-left:auto}
.stickybar .days>.day:last-child{margin-right:auto}
@media(max-width:900px){
  .sb-brand .brand{display:none}   /* logo only on small screens */
}

/* ---- reserve image space before load so day-switching doesn't shift the layout ----
   `auto W/H` = use the intrinsic ratio once loaded, the given ratio as placeholder before */
.embed.ar-front img{aspect-ratio:auto 640/478;width:100%}
.embed.ar-pw img{aspect-ratio:auto 1350/900;width:100%}

/* ---- slide-in menu must cover the sticky day bar (z-index 30) ----
   !important beats the inline z-index:3 on #mySidebar */
#mySidebar{z-index:40!important}
#myOverlay{z-index:35}

/* ---- meteoAI v3: hero, deduction list, thermal card ---- */
.hero3{display:flex;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);margin-top:14px;overflow:hidden}
.h3-score{flex:0 0 172px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;color:#fff}
.h3-score .big{font-size:44px;font-weight:800;line-height:1}
.h3-score .lbl{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;margin-top:6px;opacity:.95}
.h3-body{flex:1;min-width:260px;padding:18px 20px}
.h3-date{color:var(--dim);font-size:13px}
.h3-label{font-size:20px;font-weight:800;margin-top:2px}
.h3-head{font-size:14.5px;color:var(--slate-d);margin-top:6px}
.h3-meta{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.h3-meta .conf{margin-left:0}
.metachip{display:inline-block;background:#f1f6f7;border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:12px;color:var(--slate-d)}
.metachip b{color:var(--ink)}
@media(max-width:560px){.h3-score{flex-basis:100%;padding:18px}}
.dcard{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);margin-top:14px;padding:16px 18px}
.dcard-h{font-size:15px;font-weight:800;margin-bottom:8px}
.ded{display:flex;align-items:flex-start;gap:10px;padding:8px 2px;border-bottom:1px dashed var(--line);font-size:14px}
.ded:last-child{border-bottom:none}
.ded .di{font-size:16px;line-height:1.3}
.ded .dtx{flex:1}.ded .dtx small{display:block;color:var(--dim);font-size:12px}
.ded .da{font-weight:800;color:#c0353a;font-variant-numeric:tabular-nums;white-space:nowrap}
.ded.none .da{color:var(--dim)}
.ded.nogo{background:var(--stopBg);border-radius:10px;padding:10px;border-bottom:none}
/* thermal card */
.ttiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:6px}
@media(max-width:640px){.ttiles{grid-template-columns:repeat(2,1fr)}}
.tt1{background:#fbfdfd;border:1px solid var(--line);border-radius:10px;padding:10px 12px;text-align:center}
.tt1 .v{font-size:17px;font-weight:800;line-height:1.25;white-space:nowrap}
.tt1 .k{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.4px;margin-top:3px}
/* time × altitude thermal matrix */
.tmx-wrap{overflow-x:auto;margin-top:12px;-webkit-overflow-scrolling:touch}
.tmx{display:grid;gap:2px;min-width:620px}
.tml{font-size:9.5px;color:var(--dim);display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tmh{font-size:10px;color:var(--dim);text-align:center;font-weight:700;padding-top:2px}
.tmc{border-radius:4px;min-height:16px;display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:700}
.tmc.off{background:transparent}
.tmc.weak{background:#eef2f3;color:#9aa6b1}
.tmc.cloud{background:#f0f3f6;color:#8895a3;font-size:12px}
.tmc.rain{background:#e6ecf1;color:#5b6874;font-size:11px}
.tmc.storm{background:#fef4e3;color:#b9770a;font-size:11px}
.tleg{font-size:11px;color:var(--dim);margin-top:8px}
.tnotes{font-size:12.5px;color:#8a5b12;background:var(--watchBg);border-radius:8px;padding:8px 10px;margin-top:8px}
.tfoot{font-size:12px;color:var(--dim);margin-top:10px}
details.sitebox summary{cursor:pointer;color:var(--green-d);font-weight:700;font-size:13px}

/* ---- mobile: full-width cards, narrower day chips ----
   .wrap sits inside .w3-content.w3-padding which already gives 16px, so drop
   .wrap's own 16px — cards then line up with the header logo above */
@media(max-width:760px){
  .wrap{padding-left:0;padding-right:0}
  .stickybar .day{min-width:72px;padding:8px 8px}
}