/* MeteoSantQuirze · Open-Meteo · 27/10/2026 */
.msqm { --mq-bg:#091c2d; --mq-line:rgba(142,185,212,.16); --mq-text:#edf5fb; --mq-muted:#9eb6ca; --mq-temp:#f2ad64; --mq-rain:#57b9ef; --mq-gust:#54d4b4; color:var(--mq-text); min-width:0; container-type:inline-size; container-name:msq-meteogram; }
.msqm *, .msqm *::before, .msqm *::after { box-sizing:border-box; }
.msqm [hidden] { display:none!important; }
.msqm button { font:inherit; cursor:pointer; }
.msqm button:focus-visible, .msqm input:focus-visible, .msqm a:focus-visible { outline:2px solid #80daf5; outline-offset:3px; }
.msqm-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.msqm-periods { display:flex; padding:4px; gap:4px; border:1px solid var(--mq-line); background:rgba(0,0,0,.13); border-radius:10px; }
.msqm-periods button { padding:9px 13px; border:0; border-radius:7px; background:transparent; color:var(--mq-muted); font-size:12px; min-height:40px; }
.msqm-periods button[aria-pressed=true] { background:#234559; color:#fff; }
.msqm-stamp { color:var(--mq-muted); font-size:11px; }
.msqm-status { display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-size:13px; color:var(--mq-muted); padding:20px 0; }
.msqm-status button { padding:8px 12px; border:1px solid var(--mq-line); border-radius:8px; color:var(--mq-text); background:var(--mq-bg); }
.msqm-summary-caption { font-size:11px; color:var(--mq-muted); margin:0 0 8px; }
.msqm-days { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; padding-bottom:16px; margin-bottom:9px; border-bottom:1px solid var(--mq-line); }
.msqm-day { padding:8px; min-width:0; border-right:1px solid var(--mq-line); }
.msqm-day:last-child { border:0; }
.msqm-day-head { display:flex; align-items:center; justify-content:space-between; gap:5px; }
.msqm-day-head strong { font-weight:500; font-size:12px; }
.msqm-icon { width:27px; height:27px; flex:none; display:inline-flex; align-items:center; justify-content:center; color:#a4d9ee; }
.msqm-icon svg { width:100%; height:100%; }
.msqm-day-temp { font-size:20px; font-weight:500; margin-top:3px; font-variant-numeric:tabular-nums; }
.msqm-day-temp small { font-size:12px; color:var(--mq-muted); font-weight:400; }
.msqm-day-rain, .msqm-day-range { color:var(--mq-muted); font-size:11px; margin-top:3px; }
.msqm-chart-panel { min-width:0; margin-top:13px; }
.msqm-chart-heading { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; padding:0 3px 5px; }
.msqm-chart-heading h3 { font-size:12px; font-weight:500; margin:0; color:var(--mq-text); }
.msqm-chart-heading span, .msqm-chart-heading small { font-size:11px; color:var(--mq-muted); }
.msqm-legend { display:flex; gap:13px; flex-wrap:wrap; }
.msqm-legend i { width:15px; height:2px; display:inline-block; vertical-align:middle; margin-right:5px; background:var(--mq-rain); }
.msqm-legend .msqm-gust-key { background:var(--mq-gust); }
.msqm-plot { display:block; width:100%; overflow:hidden; touch-action:pan-y; }
.msqm-plot text { fill:var(--mq-muted); font:11px Inter,system-ui,sans-serif; }
.msqm-sky { position:relative; height:73px; margin-left:43px; margin-right:12px; }
.msqm-sky-hour { position:absolute; top:1px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:40px; min-height:62px; background:none; border:0; border-radius:6px; color:var(--mq-text); }
.msqm-sky-hour[aria-pressed=true], .msqm-sky-hour:hover { background:rgba(113,179,213,.12); }
.msqm-sky-hour span:last-child { color:var(--mq-muted); font-size:11px; }
.msqm-sky-day { display:none; }
.msqm-detail { display:flex; align-items:center; flex-wrap:wrap; gap:6px 15px; background:rgba(120,183,214,.07); border-radius:9px; padding:12px; margin-top:13px; min-height:48px; font-size:12px; font-variant-numeric:tabular-nums; }
.msqm-detail span { color:var(--mq-muted); }
.msqm-detail strong { color:var(--mq-text); font-weight:500; }
.msqm-slider { display:flex; align-items:center; gap:12px; font-size:11px; color:var(--mq-muted); margin:7px 2px 10px; }
.msqm-slider input { width:100%; min-width:0; min-height:35px; accent-color:var(--mq-rain); }
.msqm-note { color:var(--mq-muted); font-size:11px; line-height:1.55; margin-top:8px; }
.msqm-note a { color:#84d8f1; }
.msqm-fallback { color:#f2c27c; }
.msqm-keyboard-hint { margin-left:auto; }
.msqm-sky-compact .msqm-sky { margin:0; height:auto; display:flex; flex-direction:column; gap:3px; }
.msqm-sky-compact .msqm-sky-group { display:grid; grid-template-columns:55px repeat(4,minmax(0,1fr)); align-items:center; border-bottom:1px solid var(--mq-line); }
.msqm-sky-compact .msqm-sky-day { display:block; color:var(--mq-muted); font-size:11px; grid-row:1; }
.msqm-sky-compact .msqm-sky-hour { position:static; transform:none; width:100%; min-height:58px; grid-row:1; }
.msqm-sky-compact .msqm-sky-hour .msqm-icon { width:24px; height:24px; }
@container msq-meteogram (max-width:700px) {
 .msqm-days { gap:0; } .msqm-day { padding:6px 4px; text-align:center; }
 .msqm-day-head { flex-direction:column; } .msqm-day-temp { font-size:17px; }
 .msqm-day-temp small { display:block; font-size:11px; }
 .msqm-day-head strong, .msqm-day-rain { font-size:11px; }
 .msqm-day-range { font-size:11px; }
 .msqm-sky { margin:0; height:auto; display:flex; flex-direction:column; gap:3px; }
 .msqm-sky-group { display:grid; grid-template-columns:55px repeat(4,minmax(0,1fr)); align-items:center; border-bottom:1px solid var(--mq-line); }
 .msqm-sky-day { display:block; color:var(--mq-muted); font-size:11px; }
 .msqm-sky-hour { position:static; transform:none; width:100%; min-height:58px; }
 .msqm-sky-hour .msqm-icon { width:24px; height:24px; }
 .msqm-keyboard-hint { display:none; }
 .msqm-periods button { padding:9px 10px; font-size:11px; min-height:44px; }
 .msqm-detail { gap:6px 10px; }
}