/* Livello visivo del Passage Plan: non contiene dati meteo né istruzioni nautiche. */
.passage-route-overview {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(340px,1.1fr);
  gap:clamp(30px,6vw,82px);
  align-items:center;
  margin:28px 0 22px;
  padding:clamp(30px,5vw,56px);
  overflow:hidden;
  border-radius:22px;
  background:
    radial-gradient(circle at 82% 12%,rgba(175,255,244,.32) 0 4%,transparent 5%),
    radial-gradient(circle at 63% 72%,rgba(77,207,205,.22) 0 2%,transparent 3%),
    linear-gradient(142deg,#032f42 0%,#075c70 54%,#159aa2 100%);
  color:white;
}

.passage-route-copy .eyebrow { color:#adfff3; }
.passage-route-copy h2 { max-width:620px; margin:0; font:600 clamp(2.25rem,4.4vw,4.5rem)/.92 "Fraunces",serif; letter-spacing:-.055em; }
.passage-route-copy h2 em { color:#aafff2; font-style:italic; }
.passage-route-copy > p:not(.eyebrow) { max-width:590px; margin:22px 0 0; color:rgba(255,255,255,.88); line-height:1.58; }
.passage-route-safety { padding:12px 15px; border-left:3px solid #aafff2; border-radius:0 10px 10px 0; background:rgba(0,20,31,.22); font-size:.89rem; }
.passage-route-map figcaption { max-width:480px; margin:10px auto 0; color:rgba(255,255,255,.72); font-size:.72rem; line-height:1.45; text-align:center; }
.passage-orientation-notes { margin:18px 0 0; padding:15px; border:1px solid rgba(200,255,249,.28); border-radius:12px; background:rgba(0,20,31,.22); }
.passage-orientation-notes h3 { margin:0; color:#aafff2; font:500 .68rem "DM Mono",monospace; letter-spacing:.07em; text-transform:uppercase; }
.passage-orientation-notes ul { display:grid; gap:9px; margin:12px 0 0; padding:0; list-style:none; }
.passage-orientation-notes li { position:relative; padding-left:18px; color:rgba(255,255,255,.86); font-size:.84rem; line-height:1.5; }
.passage-orientation-notes li::before { content:""; position:absolute; top:.55em; left:0; width:7px; height:7px; border-radius:50%; background:#aafff2; }
.passage-orientation-notes strong { display:block; margin-bottom:2px; color:white; }

.passage-section-heading h2 { max-width:850px; margin:6px 0 0; font:600 clamp(2rem,4vw,3.7rem)/.95 "Fraunces",serif; letter-spacing:-.045em; }
.passage-section-heading .field-hint { max-width:850px; margin:12px 0 0; color:rgba(234,248,246,.72); line-height:1.55; }

.passage-decision-board,
.passage-summary-section,
.passage-model-comparison,
.passage-next-update {
  margin:18px 0;
  padding:clamp(24px,4vw,38px);
  border-radius:18px;
  background:#0b3744;
  color:#eaf8f6;
}

.passage-decision-board { border:1px solid rgba(127,233,222,.24); }
.passage-decision-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:24px 0 0; }
.passage-decision-columns article { padding:20px; border:1px solid rgba(234,248,246,.16); border-radius:14px; background:rgba(255,255,255,.05); }
.passage-decision-columns h3 { margin:0; color:#7fe9de; font:500 .72rem "DM Mono",monospace; letter-spacing:.07em; text-transform:uppercase; }
.passage-decision-columns ul { display:grid; gap:11px; margin:16px 0 0; padding:0; list-style:none; }
.passage-decision-columns li { position:relative; padding-left:22px; line-height:1.5; }
.passage-decision-columns li::before { content:"•"; position:absolute; left:0; color:#7fe9de; font-weight:700; }
.passage-decision-columns article:last-child li::before { content:"!"; color:#e7b35f; }

.passage-table-scroll { margin:24px 0 0; overflow-x:auto; border:1px solid rgba(234,248,246,.16); border-radius:14px; background:rgba(255,255,255,.04); -webkit-overflow-scrolling:touch; }
.passage-table-scroll:focus-visible { outline:3px solid #7fe9de; outline-offset:3px; }
.passage-summary-table,
.passage-model-table { width:100%; min-width:1020px; border-collapse:collapse; }
.passage-model-table { min-width:760px; }
.passage-summary-table th,
.passage-summary-table td,
.passage-model-table th,
.passage-model-table td { padding:14px; border-right:1px solid rgba(234,248,246,.12); border-bottom:1px solid rgba(234,248,246,.12); vertical-align:top; text-align:left; }
.passage-summary-table tr:last-child > *,
.passage-model-table tr:last-child > * { border-bottom:0; }
.passage-summary-table tr > *:last-child,
.passage-model-table tr > *:last-child { border-right:0; }
.passage-summary-table thead th,
.passage-model-table thead th { color:#7fe9de; background:rgba(0,20,31,.26); font:500 .65rem "DM Mono",monospace; letter-spacing:.06em; text-transform:uppercase; }
.passage-summary-table tbody th,
.passage-model-table tbody th { color:#fff; font-weight:700; }
.passage-summary-table td,
.passage-model-table td { color:#cdeeea; font-size:.82rem; line-height:1.45; }
.passage-source-panel { margin:24px 0 0; padding-top:20px; border-top:1px solid rgba(234,248,246,.16); }
.passage-source-panel .passage-source { margin-top:0; }

.passage-rating { display:flex; gap:8px; align-items:flex-start; color:#eaf8f6; font-size:.84rem; line-height:1.45; }
.passage-rating-symbol { flex:none; line-height:1.25; }
.passage-rating.is-compact { min-width:142px; font-size:.76rem; }
.passage-rating-good .passage-rating-symbol { filter:saturate(1.2); }
.passage-rating-caution .passage-rating-symbol { filter:saturate(1.2); }
.passage-rating-danger .passage-rating-symbol { filter:saturate(1.2); }
.passage-rating-unknown { color:#c6d1d1; }

.passage-route-details { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:8px; margin:18px 0 0; }
.passage-route-details div { padding:11px 12px; border:1px solid rgba(234,248,246,.15); border-radius:10px; background:rgba(255,255,255,.04); }
.passage-route-details span { display:block; margin-bottom:5px; color:#9fd4d1; font:500 .59rem "DM Mono",monospace; letter-spacing:.06em; text-transform:uppercase; }
.passage-route-details strong { display:block; color:#eaf8f6; font-size:.82rem; line-height:1.4; }

.passage-phase-assessments { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:24px 0 0; }
.passage-phase-assessments article { padding:15px; border:1px solid rgba(234,248,246,.16); border-radius:12px; background:rgba(255,255,255,.05); }
.passage-phase-assessments h3 { margin:0 0 10px; color:#9fd4d1; font:500 .64rem "DM Mono",monospace; letter-spacing:.06em; text-transform:uppercase; }
.passage-phase-assessments .passage-rating-good { color:#d7f6df; }
.passage-phase-assessments .passage-rating-caution { color:#f5dfb9; }
.passage-phase-assessments .passage-rating-danger { color:#ffd5d2; }

.passage-operational-checks { margin:20px 0 0; padding:18px; border-left:4px solid #e7b35f; border-radius:0 12px 12px 0; background:rgba(231,179,95,.1); }
.passage-operational-checks h3 { margin:0; color:#e7b35f; font:500 .68rem "DM Mono",monospace; letter-spacing:.07em; text-transform:uppercase; }
.passage-operational-checks ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 22px; margin:14px 0 0; padding-left:19px; }
.passage-operational-checks li { color:#eaf8f6; font-size:.84rem; line-height:1.5; }

.passage-next-update { background:linear-gradient(135deg,#0b3744,#075d70); }
.passage-next-update h2 { margin:6px 0 16px; font:600 clamp(2rem,4vw,3.7rem)/.95 "Fraunces",serif; letter-spacing:-.045em; }
.passage-next-update > p:not(.eyebrow) { max-width:820px; margin:8px 0 0; color:#cdeeea; line-height:1.55; }
.passage-next-update #planNextUpdateText { color:white; font-weight:700; }

.passage-route-line {
  position:relative;
  display:grid;
  gap:12px;
  margin:0;
  padding:8px 0 8px 42px;
  list-style:none;
}

.passage-route-line::before {
  content:"";
  position:absolute;
  top:24px;
  bottom:24px;
  left:18px;
  width:2px;
  background:repeating-linear-gradient(to bottom,rgba(203,255,248,.9) 0 7px,transparent 7px 14px);
}

.passage-route-line li {
  position:relative;
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  column-gap:12px;
  min-height:54px;
  align-items:center;
  padding:12px 15px;
  border:1px solid rgba(200,255,249,.32);
  border-radius:13px;
  background:rgba(0,35,49,.26);
}

.passage-route-line li::before {
  content:"";
  position:absolute;
  left:-32px;
  top:50%;
  width:13px;
  height:13px;
  border:3px solid #d6fff8;
  border-radius:50%;
  box-sizing:border-box;
  background:#0e7b8b;
  transform:translateY(-50%);
}

.passage-route-line span { grid-row:span 2; color:#aafff2; font:500 .7rem "DM Mono",monospace; letter-spacing:.06em; }
.passage-route-line strong { align-self:end; font:600 1.28rem/1 "Fraunces",serif; letter-spacing:-.03em; }
.passage-route-line small { align-self:start; color:rgba(255,255,255,.74); font-size:.73rem; }

.passage-day-layout {
  display:grid;
  grid-template-columns:minmax(0,1.16fr) minmax(270px,.84fr);
  gap:clamp(22px,4vw,46px);
  align-items:stretch;
}

.passage-day-story { min-width:0; }
.passage-day-story .passage-day-heading { min-height:96px; }
.passage-day-plan { max-width:760px; margin:20px 0 0; line-height:1.6; }
.passage-navigation { max-width:760px; margin:16px 0 0; padding:13px 15px; border-left:3px solid #1397a1; border-radius:0 11px 11px 0; background:#e2f6f3; color:#24565d; line-height:1.5; }
.passage-navigation strong { display:block; margin-bottom:4px; color:#087b8a; font:500 .65rem "DM Mono",monospace; letter-spacing:.07em; text-transform:uppercase; }
.passage-day-story .passage-overnight { margin:18px 0; }
.passage-day-story .passage-alternative { margin:0; line-height:1.5; }

.passage-day-visual {
  position:relative;
  display:flex;
  min-height:310px;
  margin:0;
  overflow:hidden;
  border-radius:15px;
  isolation:isolate;
  background:#075d70;
}

.passage-day-visual::after {
  content:"";
  position:absolute;
  z-index:1;
  inset:30% 0 0;
  background:linear-gradient(transparent,rgba(0,31,43,.93));
  pointer-events:none;
}

.passage-day-visual img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.08) contrast(1.03);
  transition:transform .6s ease;
}

.passage-day-visual:hover img { transform:scale(1.03); }
.passage-day-visual.is-levanzo-port img { object-position:54% 52%; }
.passage-day-visual.is-levanzo-light img { object-position:50% 45%; }
.passage-day-visual.is-marettimo-coast img { object-position:52% 48%; }
.passage-day-visual.is-favignana-water img { object-position:54% 54%; }

.passage-day-visual figcaption {
  position:relative;
  z-index:2;
  align-self:end;
  width:100%;
  padding:18px;
  color:white;
}

/* Pillole meteo "a semaforo" (Beaufort/Douglas) nella didascalia della foto:
   verde/ambra leggibili a colpo d'occhio, grigio quando il dato non è ancora
   affidabile (richiesta di Silvio, 1° ottobre: niente numeri nudi, niente
   colore "tranquillo" per un dato che non conosciamo ancora). */
.passage-day-pills { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 10px; }
.passage-day-pill { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.16); backdrop-filter:blur(6px); font:600 .74rem "DM Sans",sans-serif; color:#fff; }
.passage-day-pill svg { width:13px; height:13px; flex:none; }
.passage-day-pill.tone-good { background:#2f8a52; }
.passage-day-pill.tone-caution { background:#b9822c; }
.passage-day-pill.tone-calm { background:#2f72ad; }
.passage-day-pill.tone-muted { background:rgba(255,255,255,.14); }
.passage-day-visual figcaption span { display:block; margin-bottom:6px; font:500 .67rem "DM Mono",monospace; letter-spacing:.06em; text-transform:uppercase; }
.passage-day-visual figcaption small { display:block; color:rgba(255,255,255,.78); font-size:.68rem; line-height:1.4; }
.passage-day-visual figcaption a { color:#befff4; text-underline-offset:2px; }
.passage-day-visual figcaption a:focus-visible { outline:2px solid white; outline-offset:3px; }

.passage-day-card .passage-stop-section { margin:24px 0 0; }
.passage-stop-check { margin:13px 0 0; padding-top:11px; border-top:1px solid rgba(7,59,76,.16); }
.passage-stop-check summary { color:#315e61; font:700 .73rem "DM Sans",sans-serif; cursor:pointer; }
.passage-stop-check summary::marker { color:#087b8a; }
.passage-stop-check p { margin:9px 0 0; color:#416b6d; font-size:.78rem; line-height:1.48; }
.passage-stop-check[open] summary { color:#087b8a; }

.passage-weather-pending { display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:start; }
.passage-weather-pending span { grid-row:span 2; padding:5px 7px; border-radius:999px; background:#c7f4f0; color:#087b8a; font:500 .6rem "DM Mono",monospace; letter-spacing:.06em; text-transform:uppercase; }
.passage-weather-pending strong { margin:1px 0 0; }
.passage-weather-pending p { grid-column:2; }

@media (max-width:800px) {
  .passage-route-overview,.passage-day-layout { grid-template-columns:1fr; }
  .passage-decision-columns,.passage-phase-assessments { grid-template-columns:1fr; }
  .passage-route-overview { gap:30px; padding:28px 24px; border-radius:18px; }
  .passage-route-line { padding-left:36px; }
  .passage-route-line li::before { left:-28px; }
  .passage-day-story .passage-day-heading { min-height:0; }
  .passage-day-visual { min-height:270px; }
  .passage-operational-checks ul { grid-template-columns:1fr; }
  .passage-weather-pending { grid-template-columns:1fr; gap:9px; }
  .passage-weather-pending span { grid-row:auto; justify-self:start; }
  .passage-weather-pending p { grid-column:auto; }
}

@media (max-width:520px) {
  .passage-decision-board,
  .passage-summary-section,
  .passage-model-comparison,
  .passage-next-update { padding:22px 18px; }
  .passage-decision-columns article,
  .passage-phase-assessments article { padding:15px; }
  .passage-route-details { grid-template-columns:1fr; }
  .passage-table-scroll { margin-right:-18px; border-radius:12px 0 0 12px; }
}

@media (prefers-reduced-motion:reduce) {
  .passage-day-visual img { transition:none; }
}

/* Pagina intera in versione scura, non solo l'hero dell'itinerario: la bozza
   artifact piaceva di più così (Silvio, 1° ottobre). Stessa struttura e
   stessi dati, solo superfici/testo invertiti; gli accenti verde/ambra/blu
   delle pillole meteo restano gli stessi per non perdere il significato. */
.passage-plan-main .passage-status div { background:#0b3744; }
.passage-plan-main .passage-introduction,
.passage-plan-main .passage-day-card,
.passage-plan-main .passage-climate-outlook { background:#0b3744; }
.passage-plan-main .passage-updated,
.passage-plan-main .passage-validity,
.passage-plan-main .passage-source { color:rgba(234,248,246,.68); }
.passage-plan-main .passage-sources-list li { background:rgba(255,255,255,.05); border-color:rgba(234,248,246,.16); }
.passage-plan-main .passage-source-icon { background:rgba(255,255,255,.08); color:#7fe9de; }
.passage-plan-main .passage-sources-list small { color:rgba(234,248,246,.58); }
.passage-plan-main .passage-day-heading { border-color:rgba(234,248,246,.16); }
.passage-plan-main .passage-overnight { background:rgba(69,217,203,.1); }
.passage-plan-main .passage-overnight-meta { color:#7fe9de; }
.passage-plan-main .passage-alternative { background:rgba(255,255,255,.05); }
.passage-plan-main .passage-decision { background:rgba(231,179,95,.12); border-color:#e7b35f; }
.passage-plan-main .passage-decision strong { color:#e7b35f; }
.passage-plan-main .passage-weather-details > summary { color:#9fd4d1; }
.passage-plan-main .passage-stop-note { background:rgba(69,217,203,.1); }
.passage-plan-main .passage-stop-section { background:rgba(255,255,255,.04); }
.passage-plan-main .passage-stop-card { background:rgba(255,255,255,.06); border-color:rgba(234,248,246,.14); }
.passage-plan-main .passage-stop-check { color:#9fd4d1; border-top-color:rgba(234,248,246,.14); }
.passage-plan-main .passage-stop-check summary { color:#9fd4d1; }
.passage-plan-main .passage-stop-check summary::marker { color:#7fe9de; }
.passage-plan-main .passage-stop-check[open] summary { color:#7fe9de; }
.passage-plan-main .passage-stop-check p { color:#9fd4d1; }
.passage-plan-main .passage-stop-moment { color:#7fe9de; }
.passage-plan-main .passage-data-grid div { border-color:rgba(234,248,246,.16); }
.passage-plan-main .passage-data-grid dt { color:#9fd4d1; }
.passage-plan-main .passage-weather-pending { background:rgba(255,255,255,.05); color:#cdeeea; }
.passage-plan-main .passage-weather-pending strong { color:#7fe9de; }
.passage-plan-main .passage-climate-item { background:rgba(255,255,255,.05); border-color:rgba(234,248,246,.16); }
.passage-plan-main .passage-climate-icon { background:rgba(255,255,255,.08); color:#7fe9de; }
.passage-plan-main .passage-climate-item dt { color:#9fd4d1; }
.passage-plan-main .passage-climate-item dt b { color:#eaf8f6; }
.passage-plan-main .passage-climate-item dd { color:#9fd4d1; }
.passage-plan-main .passage-safety { background:#0b3744; color:#eaf8f6; }
.passage-plan-main .passage-navigation { background:rgba(69,217,203,.1); color:#cdeeea; }
.passage-plan-main .passage-navigation strong { color:#7fe9de; }
.passage-plan-main .eyebrow { color:#7fe9de; }
.passage-plan-main .passage-stop-heading { color:#7fe9de; }

/* Due gruppi di partenza e controlli dei porti: schede leggibili senza
   aggiungere colonne o rientri sui telefoni stretti. */
.passage-plan-main .passage-update-badge {
  display:inline-block; padding:12px 16px; margin:12px 0 18px;
  border:1px solid #0e7b8b; border-radius:12px; background:#d5f5ef;
  color:#083e49; font-size:1rem; line-height:1.5; font-weight:700;
}
.passage-departure-briefing,.passage-harbour-checks {
  margin:18px 0; padding:clamp(22px,4vw,38px); border-radius:18px;
  background:#0b3744; color:#eaf8f6; overflow-wrap:anywhere;
}
.passage-departure-briefing h2,.passage-harbour-checks h2 { color:#eaf8f6; }
.passage-departure-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.passage-departure-option,.passage-harbour-item {
  min-width:0; padding:20px; border:1px solid rgba(234,248,246,.22); border-radius:14px;
  background:rgba(255,255,255,.04);
}
.passage-departure-option h3,.passage-harbour-item h3 { margin:0 0 12px; color:#7fe9de; font-size:1.3rem; line-height:1.35; }
.passage-option-route { font-weight:700; }
.passage-option-facts { margin:16px 0; }
.passage-option-facts div { margin-top:10px; }
.passage-option-facts dt { color:#9fd4d1; font-size:.85rem; font-weight:700; }
.passage-option-facts dd { margin:4px 0 0; line-height:1.6; }
.passage-option-ratings { display:grid; gap:12px; margin:18px 0; }
.passage-option-ratings h4 { margin:0 0 6px; color:#cdeeea; }
.passage-option-decision { border-left:3px solid #7fe9de; padding-left:12px; }
.passage-option-details { margin-top:16px; padding-top:14px; border-top:1px solid rgba(234,248,246,.18); }
.passage-option-details summary { cursor:pointer; color:#9fd4d1; font-weight:700; line-height:1.5; }
.passage-option-details a { color:#7fe9de; }
.passage-harbour-items { display:grid; gap:16px; margin-top:20px; }
.passage-departure-option p,.passage-harbour-item p { line-height:1.65; }
@media (max-width:800px) {
  .passage-departure-options { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .passage-departure-briefing,.passage-harbour-checks { padding:22px 14px; }
  .passage-departure-option,.passage-harbour-item { padding:16px 12px; }
}
