/* ============================================================================
   destinations.css — Οι έξι προορισμοί δίπλα στον τίτλο «Ημερολόγιο» και το
   παράθυρό τους (views/destinations.js). ΟΛΟ το CSS της λειτουργίας ζει εδώ.

   Τρία κομμάτια:
   1. Η ΘΕΣΗ στην κεφαλίδα (`#titleAddons`): χάπια ή κουμπί — το αποφασίζει η
      `fit()` με ΜΕΤΡΗΣΗ και γράφει `.as-pills` / `.as-button`. Εξ ορισμού
      φαίνεται το κουμπί: αν κάτι πάει στραβά στη μέτρηση, τίποτα δεν ξεχειλίζει.
   2. Το ΠΑΡΑΘΥΡΟ στο <body>: αναπτυσσόμενο κάτω από το χάπι σε υπολογιστή,
      φύλλο από κάτω στο κινητό (ίδιο με το `.rangepanel`: 88dvh, ζώνη home).
   3. ΔΙΚΛΕΙΔΕΣ: χωρίς backdrop-filter, λιγότερη διαφάνεια, υψηλή αντίθεση,
      εξαναγκασμένα χρώματα, λιγότερη κίνηση, εκτύπωση.
   ========================================================================== */

/* ── Χρώματα ────────────────────────────────────────────────────────────────
   Ο ήλιος παίρνει τον ΧΡΥΣΟ της εφαρμογής. Οι στάθμες της ΕΜΥ είναι τα χρώματα
   του MeteoAlarm (κίτρινο/πορτοκαλί/κόκκινο) — ΟΧΙ το --ic-pos, που είναι το
   «πορτοκαλί POS» του ιδιοκτήτη και σημαίνει άλλο πράγμα. Το μελάνι πάνω στο
   τσιπ στάθμης είναι μετρημένο ≥ 4,5:1. */
:root {
  --wx-sun: var(--gold-ink);
  --wx-sun-fill: rgba(224,178,78,.30);
  --wx-moon: #6d7a90;
  --wx-moon-fill: rgba(109,122,144,.12);
  --wx-cloud-fill: #ffffff;
  --wx-rain: #2f74c8;
  --wx-bolt: #d99400;
  --wx-snow: #6f9fd0;
  --wx-fire: #d4561c;
  --wx-fire-fill: rgba(212,86,28,.14);
  --wx-l2: #c99700;  --wx-l2-soft: rgba(230,184,0,.13);  --wx-l2-ink: #1a1a1a;
  --wx-l3: #e0680e;  --wx-l3-soft: rgba(224,104,14,.12); --wx-l3-ink: #1a1a1a;
  --wx-l4: #d32f2f;  --wx-l4-soft: rgba(211,47,47,.11);  --wx-l4-ink: #ffffff;
  /* Η κολλημένη κεφαλίδα του παραθύρου: σχεδόν συμπαγής, αλλιώς οι ειδήσεις
     που κυλούν από κάτω της διαβάζονται μέσα από τον τίτλο. */
  --wx-head: rgba(255,255,255,.94);
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wx-sun: var(--gold); --wx-sun-fill: rgba(225,193,119,.24);
    --wx-moon: #c9d3e6; --wx-moon-fill: rgba(201,211,230,.14);
    --wx-cloud-fill: #22324d;
    --wx-rain: #7fb2f0; --wx-bolt: #f2c14e; --wx-snow: #a9c9ef;
    --wx-fire: #f28a54; --wx-fire-fill: rgba(242,138,84,.18);
    --wx-l2: #f1c232; --wx-l2-soft: rgba(241,194,50,.14);  --wx-l2-ink: #111111;
    --wx-l3: #f5913e; --wx-l3-soft: rgba(245,145,62,.15);  --wx-l3-ink: #111111;
    --wx-l4: #f06a6a; --wx-l4-soft: rgba(240,106,106,.15); --wx-l4-ink: #111111;
    --wx-head: rgba(16,28,48,.96);
  }
}
@media screen {
  :root[data-theme="dark"] {
    --wx-sun: var(--gold); --wx-sun-fill: rgba(225,193,119,.24);
    --wx-moon: #c9d3e6; --wx-moon-fill: rgba(201,211,230,.14);
    --wx-cloud-fill: #22324d;
    --wx-rain: #7fb2f0; --wx-bolt: #f2c14e; --wx-snow: #a9c9ef;
    --wx-fire: #f28a54; --wx-fire-fill: rgba(242,138,84,.18);
    --wx-l2: #f1c232; --wx-l2-soft: rgba(241,194,50,.14);  --wx-l2-ink: #111111;
    --wx-l3: #f5913e; --wx-l3-soft: rgba(245,145,62,.15);  --wx-l3-ink: #111111;
    --wx-l4: #f06a6a; --wx-l4-soft: rgba(240,106,106,.15); --wx-l4-ink: #111111;
    --wx-head: rgba(16,28,48,.96);
  }
}

/* ═══ 1. Η ΘΕΣΗ ΣΤΗΝ ΚΕΦΑΛΙΔΑ ═════════════════════════════════════════════════
   ⚠ ΑΔΕΙΑ = ΑΝΥΠΑΡΚΤΗ. Ένα άδειο flex παιδί κρατά ΚΑΙ ΑΥΤΟ το κενό των 12px
   της μπάρας — σε κάθε άλλη οθόνη θα έτρωγε χώρο από τίτλο και κουμπιά. */
.title-addons { display: flex; align-items: center; flex: 0 0 auto; min-width: 0; }
.title-addons:empty { display: none; }
/* Με περιεχόμενο, ο τίτλος ΔΕΝ τεντώνει: τα χάπια κάθονται ΑΜΕΣΩΣ μετά τη
   λέξη, και το #topActions μένει δεξιά με το δικό του margin-inline-start:auto.
   Το `flex-basis: 200px` του base.css ήταν το κατώφλι αναδίπλωσης — εδώ η
   `fit()` φροντίζει να μη χρειαστεί ποτέ αναδίπλωση για τα χάπια. */
.topbar.has-addons > .grow { flex: 0 1 auto; }
/* ⚠ ΜΙΑ ΓΡΑΜΜΗ, ΠΑΝΤΑ. Στα 320px (iPhone SE 1ης γενιάς) το κουμπί του καιρού
   έσπρωχνε την εκτύπωση σε ΔΕΥΤΕΡΗ γραμμή — μετρημένο: μπάρα 101px αντί 62.
   Εδώ η σειρά δεν τυλίγεται: στενεύει ο τίτλος (κόβεται με αποσιωπητικά,
   base.css). Ασφαλές ΜΟΝΟ επειδή στο Ημερολόγιο το #topActions έχει ένα
   εικονίδιο και τα χάπια μπαίνουν μόνο όταν χωράνε (`fit()`). */
.topbar.has-addons { flex-wrap: nowrap; }

.title-addons .dest-pills { display: none; }
.title-addons.as-pills .dest-pills { display: flex; }
/* (30.09.2026 — «Centered in the top bar») Η θέση παίρνει ΟΛΟ τον ελεύθερο χώρο ανάμεσα
   στον τίτλο και τα κουμπιά δεξιά και κεντράρει τη λωρίδα μέσα του. Η `fit()` μετρά τον
   χώρο ΧΩΡΙΣ τη θέση, άρα το τέντωμα δεν αλλάζει την απόφαση λωρίδα/κουμπί. */
.title-addons.as-pills { flex: 1 1 auto; justify-content: center; }
.title-addons.as-pills .dest-btn { display: none; }
/* Η ΜΕΤΡΗΣΗ: αόρατα, έξω από τη ροή, στο φυσικό τους πλάτος. Μετά τον κανόνα
   από πάνω, ώστε να νικά με ίδια ειδικότητα. */
.title-addons.measuring .dest-pills {
  display: flex; position: absolute; top: 0; left: 0;
  width: max-content; visibility: hidden; pointer-events: none;
}

/* ── Η «ΛΩΡΙΔΑ ΚΑΙΡΟΥ» (30.09.2026 — ο ιδιοκτήτης: «i dont like the pill shaped buttons»·
   διάλεξε την επιλογή Α, ενωμένα κουμπιά όπως το «Segmented Button Group» του 21st.dev).
   ΕΝΑ πλαίσιο με γωνίες 10px, έξι κομμάτια χωρισμένα με λεπτή γραμμή· σε κάθε κομμάτι
   εικονίδιο + θερμοκρασία πάνω, η πόλη μικρά από κάτω. Γυάλινο όπως τα κουμπιά (χωρίς
   δικό του θόλωμα — η μπάρα ήδη θολώνει ό,τι περνά από κάτω). ── */
.dest-pills {
  align-items: stretch; gap: 0; flex-wrap: nowrap;
  border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--glass); box-shadow: 0 1px 0 var(--hair) inset;
}
.dest-pill {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-width: 58px; height: 40px; padding: 0 11px; margin: 0;
  border: 0; border-radius: 0; background: transparent; color: var(--ink);
  font: inherit; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background var(--t-btn) var(--spring), box-shadow var(--t-btn) var(--spring);
}
/* Η διαχωριστική: μια γραμμή που ΔΕΝ φτάνει στις άκρες (πιο ήσυχη από πλήρες περίγραμμα). */
.dest-pill + .dest-pill::before {
  content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 1px; background: var(--line-2);
}
.dest-pill:first-child { border-radius: 9px 0 0 9px; }
.dest-pill:last-child { border-radius: 0 9px 9px 0; }
.dest-pill:hover { background: var(--card-2); }
.dest-pill:active { background: var(--card-2); transition-duration: var(--t-press); }
/* Ανοιχτό παράθυρο: χρυσή γραμμή στη βάση του κομματιού (όπως η επιλεγμένη καρτέλα). */
.dest-pill[aria-expanded="true"] { background: var(--gold-soft2); box-shadow: inset 0 -2px 0 var(--gold); }
.dest-pill:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.dest-btn:focus-visible, .dest-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Αφή (iPad): 44px, για να πιάνεται με το δάχτυλο. */
@media (hover: none) { .dest-pill { height: 44px; } }
.dest-top { display: inline-flex; align-items: center; gap: 4px; }
.dest-top .dest-ico { width: 16px; height: 16px; }
.dest-name { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.dest-t { font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.dest-pill.is-stale .dest-t { color: var(--muted); font-weight: 500; }

/* Η τελεία της ΕΜΥ: στη γωνία, σαν ειδοποίηση — δεν αλλάζει το πλάτος του
   χαπιού (η `fit()` δεν ξαναμετρά όταν βγει προειδοποίηση). */
.dest-dot {
  position: absolute; top: 4px; right: 5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--wx-l2); box-shadow: 0 0 0 2px var(--card-solid);
}
.dest-dot[data-lv="3"] { background: var(--wx-l3); }
.dest-dot[data-lv="4"] { background: var(--wx-l4); }
.dest-btn .dest-dot { top: 5px; right: 5px; }

/* Το κουμπί του κινητού (30.09.2026 — «not nice that it has the blue background, i want it
   to be a sun with clouds icon»): ήλιος πίσω από σύννεφο, ΧΩΡΙΣ φόντο, ίδιο μέγεθος και
   ίδιο πέρασμα με τα άλλα εικονίδια της μπάρας (`.btn-icon`: 7px + 18px ≈ 32–38px). */
.dest-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; margin: 0;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-2); cursor: pointer;
  transition: background var(--t-btn) var(--spring), transform var(--t-btn) var(--spring);
}
.dest-btn:hover { background: var(--card-2); }
.dest-btn:active { transform: scale(.94); transition-duration: var(--t-press); }
.dest-btn[aria-expanded="true"] { background: var(--gold-soft2); box-shadow: 0 0 0 2px var(--gold-glow); }
.dest-btn-ico { width: 24px; height: 24px; }
.dest-btn-ico svg { stroke-width: 1.6; }

/* ── Εικονίδια καιρού (γραμμή 1,7 όπως τα υπόλοιπα, με χρώμα ανά κομμάτι) ── */
.dest-g { display: inline-flex; flex: none; width: 18px; height: 18px; color: var(--ink-2); }
.dest-g svg {
  display: block; width: 100%; height: 100%; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.dest-g .wx-sun   { stroke: var(--wx-sun); fill: var(--wx-sun-fill); }
.dest-g .wx-moon  { stroke: var(--wx-moon); fill: var(--wx-moon-fill); }
/* ΓΕΜΙΣΜΑ: το σύννεφο ΚΡΥΒΕΙ τον ήλιο από πίσω του («κρυφοκοιτάζει»). */
.dest-g .wx-cloud { stroke: currentColor; fill: var(--wx-cloud-fill); }
.dest-g .wx-rain  { stroke: var(--wx-rain); }
.dest-g .wx-bolt  { stroke: var(--wx-bolt); }
.dest-g .wx-snow  { stroke: var(--wx-snow); }
.dest-g .wx-fog   { stroke: var(--muted); }
.dest-g .wx-fire  { stroke: var(--wx-fire); fill: var(--wx-fire-fill); }
.dest-ico { width: 18px; height: 18px; }
.dest-hero-ico { width: 52px; height: 52px; }
.dest-hero-ico svg { stroke-width: 1.3; }
.dest-hour-ico { width: 24px; height: 24px; }
.dest-day-ico { width: 22px; height: 22px; }
.dest-row-ico { width: 28px; height: 28px; }
.dest-fact-ico { width: 16px; height: 16px; }
.dest-cat { width: 16px; height: 16px; margin-top: 1px; color: var(--muted); }
.dest-cat svg { width: 16px; height: 16px; }

/* ═══ 2. ΤΟ ΠΑΡΑΘΥΡΟ ═════════════════════════════════════════════════════════
   Στο <body>, `position: fixed`. z 50: πάνω από μπάρα (30), μενού (40) και
   αναπτυσσόμενα (45) — ΚΑΤΩ από τα παράθυρα (60) και τα μηνύματα (80), ώστε
   ένα Cmd+N με ανοιχτό καιρό να βγάλει τη φόρμα ΜΠΡΟΣΤΑ. */
.dest-panel {
  position: fixed; z-index: 50;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur-lg); backdrop-filter: var(--blur-lg);
  border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  color: var(--ink); font-size: var(--fs-base);
  animation: dest-in .18s var(--spring);
}
.dest-panel:focus { outline: none; }
/* Αναπτυσσόμενο: θέση/πλάτος/ύψος τα γράφει η `place()` σε px· αυτό είναι η
   ζώνη ασφαλείας αν αλλάξει το πλάτος πριν ξαναμετρηθεί. */
.dest-panel.is-drop { max-width: calc(100vw - 16px); }
@keyframes dest-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes dest-up { from { opacity: .6; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* Φύλλο κινητού — ίδιο με το `.rangepanel` στα ≤760: dvh (όχι vh: η μπάρα
   διευθύνσεων του Safari τρώει ύψος) και η ζώνη του home στο πόδι. */
.dest-panel.is-sheet {
  left: 0; right: 0; bottom: 0; top: auto; width: auto;
  max-height: 88vh; max-height: 88dvh;
  border-radius: var(--r) var(--r) 0 0; border-bottom: 0;
  padding: 0 var(--safe-r) var(--safe-b) var(--safe-l);
  z-index: 56; animation-name: dest-up; animation-duration: .24s;
}
/* Κινητό ΠΛΑΓΙΑΣΤΟ (ή tablet αφής χωρίς ύψος): φύλλο στο κέντρο, όχι 844px
   φαρδύ — οι γραμμές ειδήσεων γίνονται αδιάβαστες σε τέτοιο πλάτος. */
@media (min-width: 600px) {
  .dest-panel.is-sheet { max-width: 560px; margin-inline: auto; }
}
.dest-scrim { position: fixed; inset: 0; z-index: 55; display: none; background: var(--overlay); }
.dest-scrim.show { display: block; }
.dest-grab { display: none; }
.dest-panel.is-sheet .dest-grab {
  display: block; flex: none; width: 36px; height: 4px; margin: 8px auto 0;
  border-radius: 2px; background: var(--line);
}

.dest-head {
  position: sticky; top: 0; z-index: 1; flex: none;
  display: flex; align-items: center; gap: 6px;
  padding: 10px 8px 8px 14px; background: var(--wx-head);
  border-bottom: 1px solid var(--line-2);
}
.dest-back { margin-inline-start: -6px; }
.dest-x { margin-inline-start: auto; }
.dest-title { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.dest-h {
  margin: 0; font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dest-h:focus { outline: none; }
.dest-head > .dest-h { flex: 1 1 auto; }
.dest-area { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dest-body { display: flex; flex-direction: column; gap: 14px; padding: 12px 14px 14px; }
.dest-skel { height: 56px; border-radius: var(--r-sm); }
.dest-note { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.dest-list > .dest-note, .dest-panel > .dest-note { padding: 10px 14px 0; }

/* Λίστα (κουμπί κινητού/iPad) */
.dest-list { display: flex; flex-direction: column; gap: 2px; padding: 6px; }
.dest-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px;
  padding: 8px 10px; margin: 0; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--ink); font: inherit; text-align: start; cursor: pointer;
  transition: background var(--t-fast);
}
.dest-row:hover { background: var(--card-2); }
.dest-row-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dest-row-name { font-size: var(--fs-md); font-weight: 600; }
.dest-row-sky { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dest-row-t { font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.dest-row-t.is-stale { color: var(--muted); }
.dest-row-car { display: inline-flex; color: var(--faint); }
.dest-row-car svg { width: 14px; height: 14px; }

/* 1. Τώρα */
.dest-hero { display: flex; align-items: center; gap: 10px; }
.dest-hero-t {
  font-size: var(--fs-3xl); font-weight: 300; line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.dest-hero-side { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-inline-start: 4px; }
.dest-sky { font-size: var(--fs-md); font-weight: 600; }
.dest-sub { font-size: var(--fs-sm); color: var(--muted); }

/* 2. ΕΜΥ — χρώμα στάθμης στην αριστερή ακμή, κείμενο σε κανονικό μελάνι. */
.dest-alerts { display: flex; flex-direction: column; gap: 8px; }
.dest-alert {
  padding: 9px 11px; border: 1px solid var(--line-2); border-inline-start: 4px solid var(--wx-l2);
  border-radius: var(--r-sm); background: var(--wx-l2-soft); font-size: var(--fs-sm); line-height: 1.4;
}
.dest-alert[data-lv="3"] { border-inline-start-color: var(--wx-l3); background: var(--wx-l3-soft); }
.dest-alert[data-lv="4"] { border-inline-start-color: var(--wx-l4); background: var(--wx-l4-soft); }
.dest-alert-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.dest-alert-ev { font-weight: 700; }
.dest-alert-area { margin-top: 2px; color: var(--ink-2); }
.dest-alert-when { margin-top: 4px; font-weight: 600; }
.dest-alert-src { margin-top: 2px; font-size: var(--fs-xs); color: var(--muted); }
.dest-alert-more { margin-top: 6px; }
.dest-alert-more summary { cursor: pointer; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); }
.dest-alert-more p { margin: 6px 0 0; }
.dest-alert-more a { display: inline-block; margin-top: 6px; color: var(--info); }
.dest-lvchip {
  display: inline-block; padding: 2px 8px; border-radius: var(--r-pill);
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .02em; line-height: 1.4;
  background: var(--wx-l2); color: var(--wx-l2-ink);
}
.dest-lvchip[data-lv="3"] { background: var(--wx-l3); color: var(--wx-l3-ink); }
.dest-lvchip[data-lv="4"] { background: var(--wx-l4); color: var(--wx-l4-ink); }

/* 3. Άνεμος · υγρασία · UV */
.dest-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.dest-fact {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--glass); font-size: var(--fs-sm); color: var(--ink-2);
}

/* Ενότητες */
.dest-sec { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dest-sec-h {
  margin: 0; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint);
}

/* 4. Ανά ώρα — οριζόντια κύλιση όπως στο iPhone. */
.dest-hours {
  display: flex; gap: 2px; margin: 0 -4px; padding: 0 0 4px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.dest-hour {
  flex: 0 0 44px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 0; border-radius: var(--r-sm); scroll-snap-align: start;
}
.dest-hour:first-child { background: var(--gold-soft2); }
.dest-hour-h { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.dest-hour-t { font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }

/* 5. Επόμενες μέρες */
.dest-days { display: flex; flex-direction: column; }
.dest-day {
  display: grid; grid-template-columns: 44px 28px 1fr auto; align-items: center; gap: 8px;
  padding: 6px 2px; border-top: 1px solid var(--line-2); font-size: var(--fs-sm);
}
.dest-day:first-child { border-top: 0; }
.dest-day-wd { font-weight: 600; }
.dest-day-t { font-variant-numeric: tabular-nums; }
.dest-day-t b { font-weight: 700; }
.dest-day-t span { color: var(--muted); }
.dest-day-w { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }

/* 6. Ειδήσεις */
.dest-news { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.dest-news-i { display: flex; align-items: flex-start; gap: 8px; }
.dest-news-b { min-width: 0; }
.dest-news-a {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  font-size: var(--fs-sm); font-weight: 500; line-height: 1.35; color: var(--ink); text-decoration: none;
}
a.dest-news-a:hover { text-decoration: underline; }
.dest-news-m {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
  margin-top: 2px; font-size: var(--fs-xs); color: var(--muted);
}
.dest-maybe {
  padding: 0 6px; border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: var(--fs-2xs); color: var(--ink-2);
}
.dest-ok { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--ok); }
.dest-ok-i { display: inline-flex; }
.dest-ok-i svg { width: 16px; height: 16px; }
/* «Δεν απάντησαν: …» / «Οι προειδοποιήσεις ΕΜΥ δεν είναι διαθέσιμες»: πηγή
   πεσμένη ≠ «όλα ήσυχα». ΟΥΔΕΤΕΡΟ διακεκομμένο πλαίσιο — ΟΧΙ κίτρινο, που θα
   διαβαζόταν ως κίτρινη προειδοποίηση ΕΜΥ. */
.dest-sec-b { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dest-srcnote {
  padding: 6px 9px; border: 1px dashed var(--line); border-radius: var(--r-sm);
  font-size: var(--fs-xs); line-height: 1.4; color: var(--ink-2);
}
/* Μόνο για αναγνώστη οθόνης: η κατηγορία που το μάτι βλέπει ως εικονίδιο. */
.dest-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* 7. Πηγές */
.dest-foot {
  display: flex; flex-direction: column; gap: 2px; padding-top: 10px;
  border-top: 1px solid var(--line-2); font-size: var(--fs-2xs); line-height: 1.5; color: var(--muted);
}
.dest-foot p { margin: 0; }
.dest-foot a { color: var(--ink-2); }

/* ═══ 3. ΔΙΚΛΕΙΔΕΣ ═══════════════════════════════════════════════════════════
   Ίδια λογική με το τέλος του components.css: όταν το γυαλί δεν μπορεί ή δεν
   πρέπει, γυρίζουμε σε ΣΥΜΠΑΓΗ επιφάνεια. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dest-panel { background: var(--card-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .dest-panel { background: var(--card-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .dest-head { background: var(--card-solid); }
  .dest-pill, .dest-fact { background: var(--card-solid); }
}
@media (prefers-contrast: more) {
  .dest-panel {
    background: var(--card-solid); -webkit-backdrop-filter: none; backdrop-filter: none;
    border-color: var(--line);
  }
  .dest-head { background: var(--card-solid); border-bottom-color: var(--line); }
  .dest-pill, .dest-fact, .dest-alert, .dest-day, .dest-foot { border-color: var(--line); }
  .dest-pills { background: var(--card-solid); border-color: var(--line); }
  .dest-name, .dest-sub, .dest-area, .dest-news-m, .dest-foot, .dest-hour-h,
  .dest-day-w, .dest-row-sky, .dest-alert-src, .dest-sec-h, .dest-note { color: var(--ink-2); }
}
/* Εξαναγκασμένα χρώματα (Windows High Contrast): τα όρια γίνονται ορατά, και
   οι ΣΤΑΘΜΕΣ κρατούν το χρώμα τους — εδώ το χρώμα ΕΙΝΑΙ η πληροφορία (και
   υπάρχει ήδη ως λέξη στο aria-label / στο τσιπ). */
@media (forced-colors: active) {
  .dest-panel, .dest-pills, .dest-fact, .dest-alert { border: 1px solid CanvasText; }
  .dest-pill + .dest-pill::before { background: CanvasText; }
  .dest-srcnote { border-color: CanvasText; }
  .dest-alert { border-inline-start-width: 4px; }
  .dest-pill[aria-expanded="true"] { outline: 2px solid Highlight; }
  .dest-dot, .dest-lvchip { forced-color-adjust: none; }
  .dest-dot { outline: 1px solid CanvasText; }
  .dest-g .wx-sun, .dest-g .wx-moon, .dest-g .wx-rain, .dest-g .wx-bolt,
  .dest-g .wx-snow, .dest-g .wx-fog, .dest-g .wx-fire { stroke: CanvasText; fill: none; }
  .dest-g .wx-cloud { stroke: CanvasText; fill: Canvas; }
  .dest-hour:first-child { outline: 1px solid CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  .dest-panel, .dest-panel.is-sheet { animation: none; }
  .dest-pill, .dest-btn, .dest-row { transition: none; }
  .dest-btn:active { transform: none; }
}
/* Η μπάρα κρύβεται ήδη στο χαρτί (base.css)· το παράθυρο ζει στο <body>, οπότε
   χρειάζεται ΔΙΚΟ του κανόνα (έχει και `.no-print`, αυτό είναι δεύτερη ζώνη). */
@media print {
  .dest-panel, .dest-scrim, .title-addons { display: none !important; }
}