/* =========================================================================
   Veriu.com · modulo Moti · la pagina del meteo e il blocco della home
   -------------------------------------------------------------------------
   Due colori per i dati, e solo due: l'arancio della temperatura (la linea
   delle ore, la barra dei giorni) e il blu della pioggia (le colonne). Il
   resto sono gli inchiostri e le superfici del portale (--vp-*). I testi
   non prendono mai il colore dei dati: il colore sta sul segno accanto.
   Le coppie sono state provate per il daltonismo e per il contrasto sul
   bianco e sul nero della pagina (ΔE 24,7 / 26,8; ≥ 3:1).

   La pagina si adatta al suo contenitore, non allo schermo: dentro un
   modulo può esserci la colonna laterale (pubblicità, sondaggi), e allora
   lo spazio è meno di quello che dice la finestra.
   ========================================================================= */

.moti {
  --gr-temp: light-dark(#eb6834, #d95926);
  --gr-shi:  light-dark(#2a78d6, #3987e5);
  --al-verdhe: #f2c230; --al-portokalli: #f08a24; --al-kuqe: #d93a2b;
  container-type: inline-size;
  display: grid; gap: 1.25rem; margin: 1.5rem 0 2.5rem;
  & h2 { margin: 0; font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ik { display: block; flex: none; }

/* ── le allerte ───────────────────────────────────────────────────────── */
.moti-alarm {
  --al: var(--al-verdhe);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: start;
  padding: 1rem 1.2rem; border-radius: var(--vp-radius-lg);
  background: color-mix(in srgb, var(--al) 14%, var(--vp-surface)); border: 1px solid color-mix(in srgb, var(--al) 55%, transparent);
  border-inline-start: 6px solid var(--al);
  &.alarm-portokalli { --al: var(--al-portokalli); }
  &.alarm-kuqe { --al: var(--al-kuqe); }
  & .alarm-ikona { width: 2rem; height: 2rem; color: var(--al); --alarm-mbi: light-dark(#1b1b1b, #111); }
  & h2 { font-size: 1.15rem; margin: .1rem 0 .3rem; }
  & p { margin: .2rem 0; color: var(--vp-ink-2); }
  & .alarm-niveli { margin: 0; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--vp-ink); }
  & .alarm-koha { font-size: .85rem; color: var(--vp-ink-3); }
}

/* ── la città, adesso ─────────────────────────────────────────────────── */
.moti-hero {
  --h1: light-dark(#e9f2fc, #14233a); --h2: light-dark(#fbfaf6, #1b2029);
  background: linear-gradient(140deg, var(--h1) 0%, var(--h2) 70%);
  border-radius: var(--vp-radius-lg); box-shadow: var(--vp-shadow); padding: clamp(1.1rem, 3cqi, 1.9rem);
  &.q-diell { --h1: light-dark(#e3f0fd, #11253f); --h2: light-dark(#fdf5e2, #2a2517); }
  &.q-re    { --h1: light-dark(#eceff3, #1b2129); --h2: light-dark(#f8f8f6, #22262d); }
  &.q-shi   { --h1: light-dark(#dfe7f1, #121c28); --h2: light-dark(#eef2f6, #1c232d); }
  &.q-bore  { --h1: light-dark(#eaf2fb, #152234); --h2: light-dark(#fbfdff, #1f2733); }
  &.q-stuhi { --h1: light-dark(#dfe1ea, #161823); --h2: light-dark(#efeef4, #24212c); }
  &.q-nate  { --h1: light-dark(#e2e6f3, #0e1528); --h2: light-dark(#f4f3f8, #1a1c31); }
}
.hero-koka {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem;
  & h1 { margin: 0; font-size: clamp(1.55rem, 4.2cqi, 2.3rem); letter-spacing: -.025em; line-height: 1.1; }
}
.hero-vendi { margin: 0 0 .3rem; font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--vp-ink-3); }
.hero-vendi a { color: inherit; text-decoration: none; &:hover { color: var(--vp-primary); text-decoration: underline; } }

/* ── il motore di ricerca di Moti (_kerko): un campo con i suggerimenti delle città ── */
.moti-kerko {
  display: flex; align-items: center; gap: .4rem; flex: 0 1 22rem; min-width: min(100%, 15rem);
  padding: .25rem .3rem .25rem .8rem; border-radius: 999px; border: 1px solid var(--vp-rule); background: var(--vp-surface);
  &:focus-within { border-color: var(--vp-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vp-primary) 18%, transparent); }
  & svg { width: 1rem; height: 1rem; flex: none; color: var(--vp-ink-3); }
  & input { flex: 1; min-width: 0; font: inherit; font-size: .95rem; border: 0; background: transparent; color: var(--vp-ink); padding: .35rem 0; outline: none;
    &::-webkit-calendar-picker-indicator { opacity: .5; } }
  & .moti-buton { padding: .4rem .9rem; font-weight: 600; font-size: .88rem; background: var(--vp-primary); color: var(--vp-on-primary); border-color: transparent; }
  position: relative;
  & input::-webkit-search-cancel-button { cursor: pointer; }
}

/* Le località mentre si scrive (moti.js, /moti/kerko.json): sotto il campo, sopra la pagina. */
.moti-sugjerime {
  position: absolute; top: calc(100% + .4rem); inset-inline: 0; z-index: 30;
  list-style: none; margin: 0; padding: .3rem; max-height: min(24rem, 60vh); overflow-y: auto; overscroll-behavior: contain;
  background: var(--vp-surface); border: 1px solid var(--vp-rule); border-radius: 14px;
  box-shadow: 0 12px 32px rgb(0 0 0 / .18), 0 2px 6px rgb(0 0 0 / .08);
  &[hidden] { display: none; }
  & .ms {
    display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; align-items: center; gap: .55rem;
    padding: .4rem .6rem; border-radius: 10px; cursor: pointer; color: var(--vp-ink);
    &[aria-selected="true"] { background: color-mix(in srgb, var(--vp-primary) 10%, var(--vp-muted)); }
  }
  & .ms-ikona { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; color: var(--vp-ink-3);
    & .ik { width: 2.1rem; height: 2.1rem; } }
  & .ms-vend .ms-ikona { color: var(--vp-primary); & .ik { width: 1.35rem; height: 1.35rem; } }
  & .ms-emri { display: flex; flex-direction: column; min-width: 0; line-height: 1.25;
    & strong { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    & small { font-size: .76rem; color: var(--vp-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
  & .ms-temp { font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; min-width: 2.4em; text-align: end; }
  & .ms-bosh { padding: .65rem .7rem; font-size: .88rem; color: var(--vp-ink-3); }
}

/* ── le schede delle città: categoria, ricerca dentro Moti, ricerca del portale ── */
.moti-kartat {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  & + .grupi-titull { margin-top: 1.4rem; }
}
.mk {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "koka tani" "gjendja gjendja" "ditet ditet";
  gap: .35rem .6rem; align-items: center; height: 100%; box-sizing: border-box; padding: .8rem .9rem .75rem;
  border-radius: 14px; background: var(--vp-muted); border: 1px solid transparent; color: var(--vp-ink); text-decoration: none;
  transition: border-color .15s, background .15s;
  &:hover { border-color: var(--vp-rule); background: color-mix(in srgb, var(--vp-primary) 6%, var(--vp-muted)); & .mk-emri { color: var(--vp-primary); } }
  &:focus-visible { outline: 2px solid var(--vp-primary); outline-offset: 2px; }
  & .mk-koka { grid-area: koka; display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
  & .mk-emri { font-size: 1.05rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  & .mk-vendi { font-size: .74rem; color: var(--vp-ink-3); }
  & .mk-tani { grid-area: tani; display: flex; align-items: center; gap: .15rem; }
  & .mk-ikona { width: 2.6rem; height: 2.6rem; }
  & .mk-temp { font-size: 1.7rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  & .mk-gjendja { grid-area: gjendja; font-size: .84rem; color: var(--vp-ink-2); }
  & .mk-sot { color: var(--vp-ink-3); white-space: nowrap; & b { color: var(--vp-ink); } }
  & .mk-ditet { grid-area: ditet; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .3rem; margin-top: .2rem; padding-top: .5rem; border-top: 1px solid var(--vp-rule); }
  & .mk-dita { display: flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--vp-ink-3); font-variant-numeric: tabular-nums;
    & small { font-weight: 600; min-width: 2.1em; } & .ik { width: 1.5rem; height: 1.5rem; } & b { color: var(--vp-ink); } }
  & .mk-pa { grid-area: gjendja; font-size: .84rem; color: var(--vp-ink-3); }
}
.moti-hero-kat .hero-koka { align-items: center; }

/* ── la scheda del meteo sopra la ricerca del portale ── */
.moti-ne-kerkim {
  margin: 0 0 1.2rem; padding: 1rem 1.1rem 1.1rem; border-radius: var(--vp-radius-lg); background: var(--vp-surface); box-shadow: var(--vp-shadow);
  & .karte-koka { margin-bottom: .7rem; }
  & .moti-me-shume { font-size: .85rem; font-weight: 600; color: var(--vp-primary); text-decoration: none; &:hover { text-decoration: underline; } }
}

/* ── le categorie come pillole (ricerca senza risultati) ── */
.moti-kategorite {
  margin: 0 0 1rem;
  & p { margin: 0 0 .5rem; color: var(--vp-ink-2); }
  & ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
  & a { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--vp-rule);
    background: var(--vp-surface); color: var(--vp-ink); text-decoration: none; font-weight: 600; font-size: .9rem;
    &:hover { border-color: var(--vp-primary); color: var(--vp-primary); }
    & small { font-weight: 500; color: var(--vp-ink-3); } }
}
.hero-pa { margin: 1.5rem 0 .5rem; color: var(--vp-ink-2); }
.hero-trupi {
  display: grid; gap: 1.5rem; margin-top: 1.4rem; align-items: center;
  @container (min-width: 46rem) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 2.5rem; }
}
.hero-tani {
  display: flex; align-items: center; gap: clamp(.6rem, 2.5cqi, 1.4rem);
  & .hero-ikona { width: clamp(5.5rem, 16cqi, 8.5rem); height: auto; aspect-ratio: 1; }
  & p { margin: 0; }
}
.hero-temp {
  font-size: clamp(3.6rem, 12cqi, 5.8rem); font-weight: 600; line-height: .95; letter-spacing: -.05em; color: var(--vp-ink);
  & .njesia { font-size: .3em; font-weight: 600; letter-spacing: 0; vertical-align: .95em; color: var(--vp-ink-3); margin-inline-start: .1em; }
}
.hero-gjendja { margin-top: .35rem !important; font-size: 1.15rem; font-weight: 600; }
.hero-ndjehet { margin-top: .25rem !important; color: var(--vp-ink-2); display: flex; flex-wrap: wrap; gap: .2rem 1rem;
  & strong { color: var(--vp-ink); } }
.hero-sot { color: var(--vp-ink-3); & span[title="Maksimumi"] { color: var(--vp-ink); font-weight: 700; } }
.hero-detajet {
  margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem;
  @container (min-width: 34rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @container (min-width: 46rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @container (min-width: 64rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  & > div { padding: .6rem .8rem; border-radius: var(--vp-radius); background: color-mix(in srgb, var(--vp-surface) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--vp-rule) 70%, transparent); min-width: 0; }
  & dt { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--vp-ink-3); }
  & dd { margin: .15rem 0 0; font-size: 1.05rem; font-weight: 700; color: var(--vp-ink); display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
    & small { font-size: .78rem; font-weight: 500; color: var(--vp-ink-3); } }
}
.shigjeta { width: .95em; height: .95em; flex: none; color: var(--vp-ink-2); }
.uv { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .3em; border-radius: 6px; font-size: .9em;
  color: #111; background: #8dc63f;
  &.uv-mes { background: #f7d038; } &.uv-larte { background: #f59331; } &.uv-shume { background: #e5453b; color: #fff; } &.uv-ekstrem { background: #9b59b6; color: #fff; } }

/* ── le carte (ore, giorni, mappa, città) ─────────────────────────────── */
.moti-karte { background: var(--vp-surface); border-radius: var(--vp-radius-lg); box-shadow: var(--vp-shadow); padding: 1.1rem clamp(.9rem, 2.4cqi, 1.4rem) 1.2rem; min-width: 0; }
.karte-koka { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.karte-shenim { margin: .6rem 0 0; font-size: .8rem; color: var(--vp-ink-3); }
.moti-buton-rreth {
  width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--vp-rule); background: var(--vp-surface); color: var(--vp-ink-2);
  font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; display: inline-grid; place-items: center; padding: 0 0 .15rem;
  &:hover:not(:disabled) { border-color: var(--vp-ink-3); color: var(--vp-ink); }
  &:disabled { opacity: .35; cursor: default; }
}
.oret-shigjetat { display: flex; gap: .4rem; }
.moti-buton { font: inherit; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--vp-rule); background: var(--vp-surface); cursor: pointer; }

/* ── le prossime ore ──────────────────────────────────────────────────── */
.oret-rrotull {
  overflow-x: auto; overscroll-behavior-x: contain; scroll-behavior: smooth; scrollbar-width: thin;
  margin-inline: calc(-1 * clamp(.9rem, 2.4cqi, 1.4rem)); padding-inline: clamp(.9rem, 2.4cqi, 1.4rem);
  mask-image: linear-gradient(90deg, transparent 0, #000 1rem, #000 calc(100% - 1rem), transparent 100%);
  &:focus-visible { outline: 2px solid var(--vp-primary); outline-offset: -2px; }
}
.oret-brenda { position: relative; width: calc(var(--n) * 3.75rem); }
.gr { display: block; width: 100%; height: auto; overflow: visible; }
.gr-temp { touch-action: pan-x pan-y; }
.gr-nata { fill: color-mix(in srgb, var(--vp-ink) 6%, transparent); }
.gr-mesnate { stroke: var(--vp-rule); stroke-width: 1; }
.gr-dita { fill: var(--vp-ink-3); font: 600 10.5px var(--vp-font-ui); letter-spacing: .02em; }
.gr-zona { fill: var(--gr-temp); opacity: .1; }
.gr-vija { fill: none; stroke: var(--gr-temp); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gr-pika { fill: var(--gr-temp); stroke: var(--vp-surface); stroke-width: 2; }
.gr-etiketa { fill: var(--vp-ink); font: 700 12.5px var(--vp-font-ui); }
.gr-min { fill: var(--vp-ink-2); }
.gr-kryq { stroke: var(--vp-ink-3); stroke-width: 1; visibility: hidden; &.ndezur { visibility: visible; } }
.gr-shi { margin-top: .2rem; }
.gr-kolona { fill: var(--gr-shi); }
.gr-baza { stroke: var(--vp-rule); stroke-width: 1; }
.oret-kolonat {
  list-style: none; margin: .3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), 3.75rem);
  & li { display: flex; flex-direction: column; align-items: center; gap: .12rem; padding: .35rem 0 .4rem; border-radius: 10px; cursor: default; outline: none; }
  & li.aktiv, & li:focus-visible { background: color-mix(in srgb, var(--vp-primary) 9%, transparent); }
  & li:focus-visible { box-shadow: inset 0 0 0 2px var(--vp-primary); }
  & .k-ora { font-size: .76rem; font-weight: 600; color: var(--vp-ink-3); font-variant-numeric: tabular-nums; }
  & li:first-child .k-ora { color: var(--vp-ink); }
  & .k-ikona { width: 2.15rem; height: 2.15rem; }
  & .k-temp { font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }
  & .k-shi { font-size: .7rem; color: var(--vp-ink-2); min-height: 1.1em; white-space: nowrap; }
  & .k-era { display: inline-flex; align-items: center; gap: .15rem; font-size: .72rem; color: var(--vp-ink-3); font-variant-numeric: tabular-nums; & .shigjeta { width: .75rem; height: .75rem; } }
}
.oret-kartela {
  position: absolute; top: .3rem; z-index: 2; pointer-events: none; min-width: 9.5rem;
  padding: .55rem .75rem; border-radius: 10px; background: var(--vp-surface); border: 1px solid var(--vp-rule); box-shadow: var(--vp-shadow-hover);
  font-size: .82rem; color: var(--vp-ink-2); line-height: 1.45;
  & strong { display: block; font-size: 1.15rem; color: var(--vp-ink); }
  & .kartela-ora { font-weight: 600; color: var(--vp-ink-3); font-size: .75rem; }
  & .kartela-vija { display: inline-block; width: .8rem; height: 2px; background: var(--gr-temp); vertical-align: middle; margin-inline-end: .35rem; border-radius: 1px; }
  & .kartela-shi { display: inline-block; width: .8rem; height: 2px; background: var(--gr-shi); vertical-align: middle; margin-inline-end: .35rem; border-radius: 1px; }
}

/* ── i giorni ─────────────────────────────────────────────────────────── */
.ditet-lista { list-style: none; margin: 0; padding: 0; }
.dita {
  display: grid; align-items: center; gap: .3rem .75rem;
  grid-template-columns: 7.5rem 2.5rem minmax(0, 1fr) 2.6rem minmax(5rem, 12rem) 2.6rem 4.6rem 6.4rem;
  padding: .6rem .5rem; border-top: 1px solid var(--vp-rule);
  &:first-child { border-top: 0; }
  &.dita-sot { background: color-mix(in srgb, var(--vp-primary) 5%, transparent); border-radius: 10px; }
  & .d-emri { display: flex; flex-direction: column; line-height: 1.25; & strong { font-weight: 700; } & small { color: var(--vp-ink-3); font-size: .78rem; } }
  & .d-ikona { width: 2.5rem; height: 2.5rem; }
  & .d-gjendja { color: var(--vp-ink-2); font-size: .9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  & .d-min, & .d-max { font-variant-numeric: tabular-nums; text-align: end; }
  & .d-min { color: var(--vp-ink-3); }
  & .d-max { font-weight: 700; text-align: start; }
  & .d-shi { display: inline-flex; align-items: center; gap: .25rem; font-size: .82rem; color: var(--vp-ink-2); white-space: nowrap; }
  & .d-era { font-size: .82rem; color: var(--vp-ink-3); white-space: nowrap; }
  @container (max-width: 50rem) {
    grid-template-columns: 6.3rem 2.3rem 2.4rem minmax(3rem, 1fr) 2.4rem 4.4rem;
    & .d-gjendja, & .d-era { display: none; }
  }
  @container (max-width: 30rem) {
    grid-template-columns: 5.2rem 2.1rem 2.1rem minmax(2.5rem, 1fr) 2.1rem;
    & .d-shi { grid-column: 2 / -1; grid-row: 2; font-size: .75rem; }
    & .d-shi:empty { display: none; }
    & .d-ikona { width: 2.1rem; height: 2.1rem; }
  }
}
.d-shkalla { position: relative; height: .42rem; border-radius: 999px; background: var(--vp-field); }
.d-brezi { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--gr-temp); }
.d-tani { position: absolute; top: 50%; width: .72rem; height: .72rem; translate: -50% -50%; border-radius: 50%; background: var(--vp-ink); box-shadow: 0 0 0 2px var(--vp-surface); }
.ik-pike { width: .55rem; height: .7rem; flex: none; }

/* ── la mappa e le città ──────────────────────────────────────────────── */
.moti-dy {
  display: grid; gap: 1.25rem; align-items: start;
  &.me-harte { @container (min-width: 58rem) { grid-template-columns: minmax(20rem, 26rem) minmax(0, 1fr); } }
}
.moti-rajoni {
  --h-deti: light-dark(#dce8f4, #13233a); --h-toka: light-dark(#ecefe9, #20252c); --h-yni: light-dark(#fcfcf9, #2b313a); --h-kufi: light-dark(#aeb7c2, #4a5465);
  & .harta-mbajtesi { max-width: 26rem; margin: 0 auto; }
}
.harta { display: block; width: 100%; height: auto; border-radius: 12px; }
.h-deti { fill: var(--h-deti); }
.h-toka { fill: var(--h-toka); stroke: var(--h-kufi); stroke-width: .6; stroke-linejoin: round; }
.h-yni { fill: var(--h-yni); stroke-width: .8; }
.h-liqen { fill: var(--h-deti); stroke: var(--h-kufi); stroke-width: .4; }
.h-pika { fill: var(--vp-ink); stroke: var(--vp-surface); stroke-width: 1.4; }
.h-pilula { fill: var(--vp-surface); stroke: var(--vp-rule); stroke-width: .8; filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / .16)); }
.h-temp { fill: var(--vp-ink); font: 700 11px var(--vp-font-ui); }
.h-emri { fill: var(--vp-ink-2); font: 600 9px var(--vp-font-ui); paint-order: stroke; stroke: var(--h-yni); stroke-width: 3px; stroke-linejoin: round; }
.h-qyteti { cursor: pointer;
  &:hover .h-pilula, &:focus-visible .h-pilula { stroke: var(--vp-primary); stroke-width: 1.4; }
  &:focus-visible { outline: none; }
}
.h-zgjedhur { & .h-pilula { stroke: var(--vp-primary); stroke-width: 1.6; } & .h-pika { fill: var(--vp-primary); } }

.grupi-titull { margin: 1.1rem 0 .45rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--vp-ink-3);
  .karte-koka + & { margin-top: 0; } }
.qytetet-lista {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  & a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "emri ikona temp" "sot ikona temp"; align-items: center; column-gap: .45rem; padding: .4rem .6rem .4rem .75rem;
    border-radius: 10px; background: var(--vp-muted); color: var(--vp-ink); text-decoration: none; border: 1px solid transparent; transition: border-color .15s, background .15s;
    &:hover { border-color: var(--vp-rule); background: color-mix(in srgb, var(--vp-primary) 6%, var(--vp-muted)); }
    &[aria-current] { border-color: var(--vp-primary); background: color-mix(in srgb, var(--vp-primary) 8%, var(--vp-surface)); } }
  & .qy-emri { grid-area: emri; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  & .qy-ikona { grid-area: ikona; width: 2rem; height: 2rem; }
  & .qy-temp { grid-area: temp; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2.1em; text-align: end; }
  & .qy-sot { grid-area: sot; font-size: .76rem; color: var(--vp-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
  & .qy-pa { grid-area: temp; color: var(--vp-ink-3); }
  /* Sul telefono due colonne invece di una lista lunga quarantaquattro righe. */
  @container (max-width: 34rem) {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem;
    & a { padding: .35rem .45rem .35rem .6rem; column-gap: .3rem; }
    & .qy-ikona { width: 1.6rem; height: 1.6rem; }
    & .qy-temp { font-size: 1rem; }
    & .qy-emri { font-size: .92rem; }
  }
}
.moti-burimi { margin: .25rem 0 0; font-size: .8rem; color: var(--vp-ink-3); text-align: center; text-wrap: balance;
  & a { color: inherit; } }

/* ── il blocco della home ─────────────────────────────────────────────── */
.moti-widget {
  --al-verdhe: #f2c230; --al-portokalli: #f08a24; --al-kuqe: #d93a2b;
  & a { color: inherit; text-decoration: none; }
}
.mw-alarm { --al: var(--al-verdhe); display: block; margin-bottom: .75rem; padding: .45rem .7rem; border-radius: 8px; font-size: .85rem; line-height: 1.35;
  background: color-mix(in srgb, var(--al) 16%, var(--vp-surface)); border-inline-start: 4px solid var(--al); color: var(--vp-ink) !important;
  &.alarm-portokalli { --al: var(--al-portokalli); } &.alarm-kuqe { --al: var(--al-kuqe); } }
.mw-tani { display: flex; align-items: center; gap: .6rem;
  & .mw-ikona { width: 3.4rem; height: 3.4rem; }
  & .mw-temp { font-size: 2.4rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
  & .mw-vendi { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; & small { color: var(--vp-ink-3); font-size: .82rem; } }
  &:hover .mw-vendi strong { color: var(--vp-primary); }
}
.mw-ditet { list-style: none; margin: .8rem 0 0; padding: .7rem 0 0; border-top: 1px solid var(--vp-rule);
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); text-align: center;
  & li { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
  & .mw-dita { font-size: .76rem; font-weight: 600; color: var(--vp-ink-3); }
  & .ik { width: 2rem; height: 2rem; }
  & .mw-max { font-weight: 700; font-variant-numeric: tabular-nums; }
  & .mw-min { font-size: .82rem; color: var(--vp-ink-3); font-variant-numeric: tabular-nums; }
}
.mw-tjera { list-style: none; margin: .7rem 0 0; padding: 0; border-top: 1px solid var(--vp-rule);
  & a { display: grid; grid-template-columns: minmax(0, 1fr) 1.6rem 2.4rem; align-items: center; gap: .4rem; padding: .32rem 0; font-size: .92rem;
    border-bottom: 1px solid color-mix(in srgb, var(--vp-rule) 60%, transparent);
    &:hover span { color: var(--vp-primary); } }
  & .ik { width: 1.6rem; height: 1.6rem; }
  & strong { text-align: end; font-variant-numeric: tabular-nums; }
}
.mw-fund { margin: .7rem 0 0; display: flex; justify-content: space-between; align-items: baseline; font-size: .85rem;
  & a { color: var(--vp-primary) !important; font-weight: 600; } & small { color: var(--vp-ink-3); font-size: .72rem; } }