/*
 * Calcolatore delle distanze fra porti v2 e tratte piu' cercate (WS-4): /strumenti/distanze-tra-porti/.
 * Caricato solo su quelle due pagine (Strumenti::enqueue_assets). Anatomia e classi dal template di
 * riferimento del design system (templates/pagine/strumento-distanze-porti.html e pagine.css, branch
 * feat/templates-strumenti-portolano-osservatorio): le PROPOSTE di componente .nz-* (combobox, tappe,
 * scelta a chip, azioni della rotta, esito, righe per tratto, tabella dati) stanno qui, confinate sotto
 * .nqs, finche' il design system non le promuove; l'impaginazione della pagina usa .nqs-*.
 * Grammatica 2c: filetti, angoli vivi, nessuna ombra. Colori solo dai ruoli di modalita' --nz-mode-*
 * (terra e mare senza regole proprie): il valore dopo la virgola e' il ripiego se il tema mancasse.
 * Punti di rottura 640, 1024 (quelli del tema). Bersagli toccabili di almeno 44 px.
 */

.nqs {
  --nqs-font-h: var(--nz-font-heading, "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif);
  --nqs-font-d: var(--nz-font-display, var(--nqs-font-h));
  --nqs-font-b: var(--nz-font-body, ui-sans-serif, system-ui, sans-serif);
  --nqs-fg: var(--nz-mode-fg, #1a3152);
  --nqs-body: var(--nz-mode-body, #1a3152);
  --nqs-muted: var(--nz-mode-muted, #3f5a85);
  --nqs-bg: var(--nz-mode-bg, #fcfcfc);
  --nqs-band: var(--nz-mode-band, #f5f0eb);
  --nqs-surface: var(--nz-mode-surface, #ffffff);
  --nqs-field: var(--nz-mode-field, #ffffff);
  --nqs-line: var(--nz-mode-line, rgb(26 49 82 / 0.15));
  --nqs-accent: var(--nz-mode-accent, #99114c);
  --nqs-fill: var(--nz-mode-accent-fill, #99114c);
  --nqs-fill-fg: var(--nz-mode-accent-fill-fg, #ffffff);
  --nqs-btn-bg: var(--nz-mode-btn-bg, #1a3152);
  --nqs-btn-fg: var(--nz-mode-btn-fg, #fcfcfc);
  --nqs-warn: var(--nz-color-warning, #d97706);
  --nqs-navy: var(--nz-color-navy, #1a3152);
  --nqs-paper: var(--nz-color-bg, #fcfcfc);
  /* La carta resta chiara in terra e in mare: linee, legenda e anteprima statica usano i colori di
     assets/map-style.json (nz:tokens accent), non il ruolo di modalita' (round 1 del designer, R6). */
  --nqs-map-accent: #821a34;
  --nqs-gutter: var(--nz-layout-gutter-sm, 1rem);
  --nqs-map-h: max(320px, 50vh);

  color: var(--nqs-body);
  background: var(--nqs-bg);
  font-family: var(--nqs-font-b);
  line-height: 1.55;
  position: relative;
  overflow-x: clip;
}

.nqs *,
.nqs *::before,
.nqs *::after {
  box-sizing: border-box;
}

.nqs a {
  color: var(--nqs-accent);
}

.nqs :where(h1, h2, h3) {
  color: var(--nqs-fg);
}

.nqs-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.nqs-wrap {
  max-width: var(--nz-layout-container, 80rem);
  margin-inline: auto;
  padding-inline: var(--nqs-gutter);
}

/* ── Testata corta ─────────────────────────────────────────────────────── */
.nqs-head {
  padding-block: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--nqs-line);
}

.nqs-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--nqs-muted);
}

.nqs-crumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--nqs-line);
}

.nqs-crumbs a {
  color: var(--nqs-muted);
  text-decoration: none;
}

.nqs-crumbs a:hover {
  color: var(--nqs-accent);
}

.nqs-crumbs [aria-current] {
  color: var(--nqs-fg);
  font-weight: 600;
}

.nqs .nqs-kicker {
  margin: 0 0 0.75rem;
  color: var(--nqs-accent);
}

.nqs-h1 {
  margin: 0 0 0.75rem;
  font-family: var(--nqs-font-d);
  font-weight: 800;
  font-size: clamp(1.875rem, 3.4vw, 3rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--nqs-fg);
}

.nqs-h1 em,
.nqs-h2 em {
  font-style: normal;
  color: var(--nqs-accent);
}

.nqs-lead {
  max-width: 46rem;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* ── Mappa e pannello ──────────────────────────────────────────────────── */
.nqs-routemap {
  position: relative;
  border-bottom: 1px solid var(--nqs-line);
}

.nqs-mapbox {
  position: relative;
}

.nqs .nqs-map {
  margin: 0;
}

.nqs .nqs-map .nzm-frame {
  height: var(--nqs-map-h);
  border: 0;
  border-bottom: 1px solid var(--nqs-line);
  border-radius: 0;
  background: var(--nqs-band);
}

.nqs .nqs-map .nzm-fb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.nqs .nqs-map .nzm-cap {
  margin: 0;
  padding: 0.375rem var(--nqs-gutter);
  font-size: 0.6875rem;
  text-align: right;
}

.nqs .nqs-map .nzm-note {
  font-size: 0.8125rem;
}

/* Nota di errore della mappa (nz-map) dentro il riquadro: in basso a destra, lontano da pannello e legenda, angoli
   vivi, sopra l'anteprima della rotta. */
.nqs .nqs-map .nzm-frame .nzm-note {
  z-index: 4;
  inset: auto 1rem 1rem auto;
  border-radius: 0;
  border-left: 3px solid var(--nqs-accent);
  background: var(--nqs-surface);
  color: var(--nqs-body);
}

.nqs .maplibregl-ctrl-group {
  border-radius: 0;
  box-shadow: none;
  border: 1px solid var(--nqs-line);
}

/* Attribuzione una sola volta: la didascalia sotto la mappa (c'e' anche senza JavaScript e in stampa), non il
   controllo di MapLibre. */
.nqs .maplibregl-ctrl-attrib {
  display: none;
}

.nqs-hint a {
  color: inherit;
  font-weight: 700;
}

/* Anteprima statica della rotta (Strumenti::fallback_svg(), strumenti.js): nel riquadro della mappa, con
   l'immagine italia.webp dentro e il viewBox sulla rotta (R4). Colori della carta, non del modo (R6). */
.nqs-overlay {
  --nqs-accent: var(--nqs-map-accent);

  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

/* N1 (designer round 2): fuori dal raster il colore del mare della carta, non la banda (prima una fascia piatta). */
.nqs-overlay .nqs-overlay__bg {
  fill: #afcfe2;
}

.nqs-overlay .nqs-overlay__leader {
  stroke: var(--nqs-navy);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.nqs-mapbox.is-live .nqs-overlay,
.nqs-mapbox:has(.nzm--ready) .nqs-overlay {
  display: none;
}

.nqs-overlay polyline {
  fill: none;
  stroke: var(--nqs-accent);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.nqs-overlay .nqs-overlay__line {
  stroke-dasharray: 10 8;
}

.nqs-overlay .nqs-overlay__land {
  stroke: var(--nqs-warn);
  stroke-dasharray: 6 6;
}

.nqs-overlay rect,
.nqs-overlay circle {
  fill: var(--nqs-navy);
  stroke: var(--nqs-paper);
  stroke-width: 3;
}

.nqs-overlay .nqs-overlay__stop circle {
  fill: var(--nqs-paper);
  stroke: var(--nqs-navy);
}

.nqs-overlay text {
  font: 700 15px/1 var(--nqs-font-h);
  fill: var(--nqs-paper);
}

.nqs-overlay .nqs-overlay__stop text {
  fill: var(--nqs-navy);
}

/* Etichetta «Posizioni indicative»: sotto la legenda, in alto a destra del pannello, mai sopra i segni (R4). */
.nqs-badge {
  margin: 0.375rem 0 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--nqs-muted);
}

/* Legenda: su fondo chiaro come la carta e il popup, con i colori della carta in entrambi i modi (R6). */
.nqs-keys {
  --nqs-fg: var(--nqs-navy);
  --nqs-body: var(--nqs-navy);
  --nqs-muted: #3f5a85;
  --nqs-accent: var(--nqs-map-accent);
  --nqs-bg: var(--nqs-paper);
  --nqs-line: rgb(26 49 82 / 0.15);

  padding: 0.5rem var(--nqs-gutter);
  border-bottom: 1px solid var(--nqs-line);
  background: var(--nqs-paper);
  font-size: 0.75rem;
  color: var(--nqs-fg);
}

.nqs-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nqs-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.nqs-key {
  flex: none;
  width: 22px;
  height: 0;
  border-top: 3px solid var(--nqs-accent);
}

.nqs-key--line {
  border-top-style: dashed;
}

.nqs-key--land {
  border-top: 3px dashed var(--nqs-warn);
}

.nqs-key--port {
  width: 12px;
  height: 12px;
  border: 2px solid var(--nqs-accent);
  border-radius: 50%;
  background: var(--nqs-bg);
}

.nqs-hint {
  display: none;
  margin: 0.5rem 0 0;
  line-height: 1.4;
}

.nqs-mapbox.is-live .nqs-hint {
  display: block;
}

/* Istruzioni per il mouse o per il tocco (R7). */
.nqs-coarse {
  display: none;
}

@media (pointer: coarse) {
  .nqs-fine {
    display: none;
  }

  .nqs-coarse {
    display: inline;
  }
}

.nqs-mapstatus {
  margin: 0.5rem 0 0;
  padding: 0.375rem 0.5rem;
  border-left: 3px solid var(--nqs-accent);
  background: var(--nqs-bg);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--nqs-fg);
}

.nqs-mapstatus:empty {
  display: none;
}

.nqs-panel {
  display: grid;
  gap: 1.25rem;
  padding: 1.25rem var(--nqs-gutter) 2rem;
  background: var(--nqs-bg);
}

@media (max-width: 639px) {
  .nqs-badge {
    display: none;
  }

}

/* Telefono: modulo, risultato e poi la mappa (R5). */
@media (max-width: 767px) {
  .nqs-routemap {
    display: flex;
    flex-direction: column;
  }

  .nqs-routemap > .nqs-panel {
    order: -1;
  }
}

@media (min-width: 640px) {
  .nqs {
    --nqs-gutter: var(--nz-layout-gutter-md, 1.5rem);
  }
}

@media (min-width: 1024px) {
  .nqs {
    --nqs-gutter: var(--nz-layout-gutter-lg, 2rem);
    --nqs-map-h: clamp(600px, 62vh, 880px);
  }

  .nqs-routemap {
    --nqs-panel-w: 27rem;
    --nqs-panel-x: max(var(--nqs-gutter), calc((100% - var(--nz-layout-container, 80rem)) / 2 + var(--nqs-gutter)));
  }

  /* Pannello e mappa nella stessa cella: la riga e' alta quanto il piu' alto dei due, quindi il pannello non scorre
     mai al suo interno e la mappa si allunga fino in fondo al pannello (R1). Minimo: --nqs-map-h. */
  .nqs-routemap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .nqs-routemap > .nqs-mapbox,
  .nqs-routemap > .nqs-panel {
    grid-area: 1 / 1;
  }

  .nqs-mapbox {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .nqs .nqs-map {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }

  .nqs .nqs-map .nzm-frame {
    flex: 1 1 auto;
    height: auto;
    min-height: var(--nqs-map-h);
  }

  .nqs-panel {
    position: relative;
    z-index: 5;
    align-self: start;
    justify-self: start;
    width: var(--nqs-panel-w);
    margin: 1rem 0 3rem var(--nqs-panel-x);
    padding: 1.25rem;
    border: 1px solid var(--nqs-line);
    border-top: 3px solid var(--nqs-fg);
  }

  .nqs-keys {
    position: absolute;
    z-index: 2;
    top: 1rem;
    left: calc(var(--nqs-panel-x) + var(--nqs-panel-w) + 1rem);
    max-width: min(30rem, calc(100% - var(--nqs-panel-x) - var(--nqs-panel-w) - 5rem));
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--nqs-line);
    background: color-mix(in srgb, var(--nqs-paper) 94%, transparent);
  }

  .nqs-legend {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    column-gap: 1.25rem;
  }

}

/* ── Modulo: tappe, combobox, inverti, aggiungi ───────────────────────── */
.nqs-form {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.nqs .nz-legs {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nqs .nz-leg {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
}

.nqs .nz-leg--extra {
  grid-template-columns: 2rem minmax(0, 1fr) 44px 44px;
}

.nqs .nz-leg__mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 48px;
  border: 1px solid var(--nqs-line);
  font: 700 0.875rem/1 var(--nqs-font-h);
  color: var(--nqs-fg);
}

.nqs .nz-leg__mark--end {
  background: var(--nqs-fg);
  border-color: var(--nqs-fg);
  color: var(--nqs-bg);
}

.nqs .nz-leg__pick,
.nqs .nz-leg__remove {
  display: grid;
  place-items: center;
  width: 44px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--nqs-line);
  background: transparent;
  color: var(--nqs-fg);
  cursor: pointer;
  font-size: 1.25rem;
}

.nqs .nz-leg__pick svg {
  width: 18px;
  height: 18px;
}

.nqs .nz-leg__pick:hover,
.nqs .nz-leg__pick[aria-pressed="true"],
.nqs .nz-leg__remove:hover {
  color: var(--nqs-accent);
  border-color: var(--nqs-accent);
}

.nqs .nz-leg__pick[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px var(--nqs-accent);
}

.nqs .nz-combobox {
  position: relative;
  min-width: 0;
}

.nqs .nz-combobox__field {
  position: relative;
}

.nqs .nz-combobox__input {
  width: 100%;
  height: 48px;
  padding: 0.625rem 2.5rem 0.625rem 0.875rem;
  border: 1px solid var(--nqs-line);
  border-bottom: 2px solid var(--nqs-fg);
  border-radius: 0;
  background: var(--nqs-field);
  color: var(--nqs-fg);
  font: 600 1rem/1.3 var(--nqs-font-b);
}

.nqs .nz-combobox__input::placeholder {
  color: var(--nqs-muted);
  font-weight: 400;
}

.nqs .nz-combobox__input:focus-visible,
.nqs .nz-combobox__input:focus {
  outline: 3px solid var(--nqs-accent);
  outline-offset: 2px;
  border-bottom-color: var(--nqs-accent);
}

.nqs .nz-combobox__pin {
  position: absolute;
  top: 50%;
  right: 0.875rem;
  width: 14px;
  height: 15px;
  transform: translateY(-50%);
  color: var(--nqs-accent);
  pointer-events: none;
}

.nqs .nz-combobox__list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 20rem;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  background: var(--nqs-surface);
  border: 1px solid var(--nqs-fg);
}

.nqs .nz-combobox__list[hidden] {
  display: none;
}

.nqs .nz-combobox__option {
  display: grid;
  gap: 0.125rem;
  min-height: 44px;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--nqs-line);
  cursor: pointer;
}

.nqs .nz-combobox__option:last-child {
  border-bottom: 0;
}

.nqs .nz-combobox__option[aria-selected="true"],
.nqs .nz-combobox__option:hover {
  background: var(--nqs-band);
  box-shadow: inset 3px 0 0 var(--nqs-accent);
}

.nqs .nz-combobox__name {
  font-weight: 700;
  color: var(--nqs-fg);
}

.nqs .nz-combobox__meta,
.nqs .nz-combobox__empty {
  font-size: 0.8125rem;
  color: var(--nqs-muted);
}

.nqs .nz-combobox__empty {
  padding: 0.75rem 1rem;
}

.nqs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}

.nqs .nz-swap,
.nqs .nz-addleg {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font: 700 0.8125rem/1 var(--nqs-font-b);
  text-transform: uppercase;
  cursor: pointer;
}

.nqs .nz-swap {
  margin-left: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--nqs-line);
  background: transparent;
  color: var(--nqs-fg);
  letter-spacing: 0.08em;
}

.nqs .nz-swap svg {
  width: 16px;
  height: 16px;
}

.nqs .nz-swap:hover {
  border-color: var(--nqs-accent);
  color: var(--nqs-accent);
}

.nqs .nz-addleg {
  padding: 0.5rem 0;
  border: 0;
  background: none;
  color: var(--nqs-accent);
  letter-spacing: 0.14em;
}

.nqs .nz-addleg:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Nodi a chip e ora di partenza */
.nqs-pace {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.nqs .nz-field-label {
  display: block;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nqs-muted);
}

.nqs .nz-chipset {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Etichetta sopra i chip: con i chip da 44 px (R16) la riga resta una sola anche nel pannello largo 27rem. */
.nqs .nz-chipset legend {
  float: none;
  margin: 0 0 0.5rem;
  padding: 0;
}

.nqs .nz-chipset__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.nqs .nz-chipset__opt {
  position: relative;
}

.nqs .nz-chipset__opt input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.nqs .nz-chipset__opt span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem 0.375rem;
  border: 1px solid var(--nqs-line);
  font: 700 1rem/1 var(--nqs-font-h);
  font-variant-numeric: tabular-nums;
  color: var(--nqs-fg);
}

.nqs .nz-chipset__opt input:checked + span {
  background: var(--nqs-fg);
  border-color: var(--nqs-fg);
  color: var(--nqs-bg);
}

.nqs .nz-chipset__opt input:focus-visible + span {
  outline: 2px solid var(--nqs-accent);
  outline-offset: 2px;
}

.nqs .nz-chipset__opt:hover span {
  border-color: var(--nqs-accent);
}

.nqs .nz-chipset__custom {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 44px;
  padding: 0 0.375rem 0 0.75rem;
  border: 1px dashed var(--nqs-line);
  font-size: 0.8125rem;
  color: var(--nqs-muted);
}

.nqs .nz-chipset__custom input[type="text"] {
  width: 2.75rem;
  min-height: 40px;
  border: 0;
  border-bottom: 1px solid var(--nqs-fg);
  border-radius: 0;
  background: transparent;
  color: var(--nqs-fg);
  font: 700 1rem/1 var(--nqs-font-h);
  text-align: center;
}

.nqs .nz-timefield {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.nqs .nz-timefield input {
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--nqs-line);
  border-bottom: 2px solid var(--nqs-fg);
  border-radius: 0;
  background: var(--nqs-field);
  color: var(--nqs-fg);
  font: 700 1rem/1 var(--nqs-font-h);
}

/* Azioni della rotta: primaria piena, secondaria a filetto */
.nqs .nz-routeact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
}

.nqs .nz-routeact button {
  min-height: 48px;
  padding: 0.625rem 1rem;
  border: 1px solid var(--nqs-fg);
  border-radius: 0;
  font: 700 0.9375rem/1.1 var(--nqs-font-h);
  cursor: pointer;
}

.nqs .nz-routeact__sea {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--nqs-btn-bg);
  border-color: var(--nqs-btn-bg);
  color: var(--nqs-btn-fg);
}

.nqs .nz-routeact__sea svg {
  flex: none;
  width: 18px;
  height: 18px;
}

.nqs .nz-routeact .nqs-narrow {
  display: none;
}

@media (max-width: 639px) {
  .nqs .nz-routeact .nqs-wide {
    display: none;
  }

  .nqs .nz-routeact .nqs-narrow {
    display: inline;
  }
}

.nqs .nz-routeact .nz-routeact__sea:hover {
  background: var(--nqs-fill);
  border-color: var(--nqs-fill);
  color: var(--nqs-fill-fg);
}

.nqs .nz-routeact__sea[aria-pressed="false"] {
  background: transparent;
  color: var(--nqs-fg);
  border-color: var(--nqs-fg);
}

.nqs .nz-routeact__line {
  background: transparent;
  color: var(--nqs-fg);
}

.nqs .nz-routeact__line:hover {
  border-color: var(--nqs-accent);
  color: var(--nqs-accent);
}

.nqs .nz-routeact .nz-routeact__line[aria-pressed="true"] {
  background: var(--nqs-fg);
  color: var(--nqs-bg);
}

/* ── Esito ─────────────────────────────────────────────────────────────── */
.nqs .nz-tratta {
  container-type: inline-size;
  border-top: 3px solid var(--nqs-fg);
}

.nqs .nz-tratta__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.75rem 0 0;
}

.nqs .nz-tratta__head .nz-kicker {
  margin: 0;
  color: var(--nqs-accent);
}

.nqs .nz-tratta__route {
  margin: 0;
  font: 700 1.0625rem/1.3 var(--nqs-font-h);
  color: var(--nqs-fg);
}

.nqs .nz-tratta__route span {
  padding-inline: 0.25rem;
  color: var(--nqs-accent);
}

.nqs .nz-tratta__main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  margin: 0;
  padding: 0.25rem 0 0.75rem;
}

.nqs .nz-tratta__nm {
  font: 800 clamp(2.75rem, 5vw, 3.5rem)/0.9 var(--nqs-font-d);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--nqs-fg);
}

.nqs .nz-tratta__unit {
  font: 700 1rem/1 var(--nqs-font-h);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nqs-accent);
}

/* Retta provvisoria in modo mare, finche' il motore non ha la rotta (R3). */
.nqs .nz-tratta__prov {
  flex-basis: 100%;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--nqs-muted);
}

.nqs .nz-tratta__prov[hidden] {
  display: none;
}

.nqs .nz-tratta__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--nqs-line);
}

.nqs .nz-tratta__cell {
  padding: 0.625rem 0.75rem;
  border-left: 1px solid var(--nqs-line);
}

.nqs .nz-tratta__cell:first-child {
  padding-left: 0;
  border-left: 0;
}

.nqs .nz-tratta__k {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nqs-muted);
}

.nqs .nz-tratta__v {
  margin: 0;
  font: 700 1.0625rem/1.2 var(--nqs-font-h);
  font-variant-numeric: tabular-nums;
  color: var(--nqs-fg);
}

.nqs .nz-tratta__v small {
  display: block;
  font: 500 0.75rem/1.3 var(--nqs-font-b);
  color: var(--nqs-muted);
}

.nqs .nz-tratta__v > span {
  white-space: nowrap;
}

.nqs .nz-legrows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--nqs-line);
}

.nqs .nz-legrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.125rem 0.75rem;
  align-items: baseline;
  padding: 0.625rem 0;
  border-bottom: 1px dashed var(--nqs-line);
  font-size: 0.875rem;
}

.nqs .nz-legrow__marks {
  font: 700 0.75rem/1 var(--nqs-font-h);
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--nqs-muted);
}

.nqs .nz-legrow__name {
  min-width: 0;
  font-weight: 600;
  color: var(--nqs-fg);
}

.nqs .nz-legrow__name small {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--nqs-muted);
}

.nqs .nz-legrow__num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.nqs .nz-legrow__num b {
  display: block;
  font-family: var(--nqs-font-h);
  color: var(--nqs-fg);
}

.nqs .nz-legrow__num span {
  font-size: 0.75rem;
  color: var(--nqs-muted);
}

.nqs .nz-legrow__warn,
.nqs-error {
  grid-column: 1 / -1;
  margin: 0.375rem 0 0;
  padding: 0.5rem 0.625rem;
  border-left: 3px solid var(--nqs-warn);
  background: color-mix(in srgb, var(--nqs-warn) 12%, var(--nqs-surface));
  color: var(--nqs-fg);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.nqs-error[hidden],
.nqs-empty[hidden] {
  display: none;
}

.nqs-empty {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--nqs-fg);
}

.nqs .nz-tratta[data-state="empty"] .nz-tratta__main,
.nqs .nz-tratta[data-state="empty"] .nz-tratta__grid {
  opacity: 0.35;
}

.nqs .nz-tratta__notes {
  display: grid;
  gap: 0.375rem;
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--nqs-muted);
}

.nqs .nz-tratta__notes p {
  margin: 0;
}

.nqs .nz-tratta__notes [data-out="seanote"] {
  color: var(--nqs-fg);
}

.nqs .nz-tratta__notes [hidden],
.nqs .nz-iconbar[hidden] {
  display: none;
}

.nqs .nz-iconbar {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.75rem;
}

.nqs .nz-iconbtn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--nqs-line);
  background: transparent;
  color: var(--nqs-fg);
  cursor: pointer;
}

.nqs .nz-iconbtn svg {
  width: 18px;
  height: 18px;
}

.nqs .nz-iconbtn:hover {
  color: var(--nqs-accent);
  border-color: var(--nqs-accent);
}

.nqs-toast {
  position: fixed;
  z-index: 50;
  bottom: 1.5rem;
  left: 50%;
  padding: 0.75rem 1rem;
  transform: translateX(-50%);
  background: var(--nqs-fg);
  color: var(--nqs-bg);
  font-size: 0.875rem;
  font-weight: 700;
}

.nqs-toast:empty {
  display: none;
}

/* ── Punti sulla mappa (marker HTML) e finestrella dei porti ──────────── */
.nqs-handle {
  --nqs-accent: var(--nqs-map-accent);

  display: grid;
  place-items: center;
  box-sizing: border-box;
  font: 700 0.8125rem/1 var(--nqs-font-h);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.nqs-handle:active {
  cursor: grabbing;
}

.nqs-handle:focus-visible {
  outline: 3px solid var(--nqs-accent);
  outline-offset: 2px;
}

.nqs-handle--end {
  width: 28px;
  height: 28px;
  background: var(--nqs-navy);
  color: var(--nqs-paper);
  border: 2px solid var(--nqs-paper);
  cursor: default;
}

.nqs-handle--stop {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--nqs-paper);
  color: var(--nqs-navy);
  border: 2.5px solid var(--nqs-navy);
}

.nqs-handle--via,
.nqs-handle--way {
  width: 28px;
  height: 28px;
  background: transparent;
}

.nqs-handle--via::after,
.nqs-handle--way::after {
  content: "";
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--nqs-accent);
  border: 2.5px solid var(--nqs-paper);
  box-shadow: 0 0 0 1px var(--nqs-accent);
  transition: transform 0.12s;
}

.nqs-handle--way::after {
  width: 11px;
  height: 11px;
  background: var(--nqs-paper);
  border-color: var(--nqs-accent);
}

.nqs-handle--via:hover::after,
.nqs-handle--way:hover::after {
  transform: scale(1.35);
}

.nqs-pop {
  display: grid;
  gap: 0.5rem;
  min-width: 13rem;
  font: 0.8125rem/1.35 var(--nqs-font-b);
  color: var(--nqs-navy);
}

.nqs-pop b {
  font: 700 0.9375rem/1.25 var(--nqs-font-h);
}

.nqs-pop__acts {
  display: flex;
  gap: 0.25rem;
}

.nqs-pop__acts button {
  flex: 1;
  min-height: 44px;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--nqs-navy);
  background: var(--nqs-paper);
  color: var(--nqs-navy);
  font: 700 0.75rem/1 var(--nqs-font-b);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.nqs-pop__acts button:hover,
.nqs-pop__acts button:focus-visible {
  background: var(--nqs-navy);
  color: var(--nqs-paper);
}

.nqs .maplibregl-popup-content {
  border-radius: 0;
  padding: 0.75rem 2.75rem 0.75rem 0.75rem; /* N2: spazio per la chiusura da 44 px */
  background: var(--nqs-paper);
}

/* ── Sotto la mappa: link, domande, metodo ─────────────────────────────── */
.nqs-section {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.nqs-section--slim {
  padding-block: 1.25rem;
}

.nqs-section--band {
  background: var(--nqs-band);
}

.nqs-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.nqs-links a {
  font-weight: 700;
}

.nqs-h2 {
  margin: 0.5rem 0 1rem;
  font-family: var(--nqs-font-d);
  font-weight: 800;
  font-size: clamp(1.75rem, 2.6vw, 2.375rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--nqs-fg);
}

.nqs-faq {
  border-top: 2px solid var(--nqs-fg);
}

.nqs-faq details {
  border-bottom: 1px solid var(--nqs-line);
}

.nqs-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 44px;
  padding: 1rem 0;
  list-style: none;
  cursor: pointer;
}

.nqs-faq summary::-webkit-details-marker {
  display: none;
}

.nqs-faq summary h3 {
  margin: 0;
  font: 700 1.125rem/1.35 var(--nqs-font-h);
}

.nqs-faq summary::after {
  content: "+";
  flex: none;
  font: 700 1.5rem/1 var(--nqs-font-h);
  color: var(--nqs-accent);
}

.nqs-faq details[open] summary::after {
  content: "\2212";
}

.nqs-faq details > div {
  max-width: 46rem;
  padding: 0 0 1.25rem;
}

.nqs-faq details > div p {
  margin: 0 0 0.75rem;
}

.nqs-method {
  margin: 0;
  padding-block: 1.25rem;
  border-top: 1px solid var(--nqs-line);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--nqs-muted);
}

.nqs-method a {
  color: inherit;
}

/* ── Tratte piu' cercate: tabella dati ─────────────────────────────────── */
.nqs-table-scroll {
  position: relative;
  overflow-x: auto;
  margin: 0 0 1.5rem;
}

.nqs-table-scroll:focus-visible {
  outline: 2px solid var(--nqs-accent);
  outline-offset: 2px;
}

.nqs .nz-dtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.nqs-section--table {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.nqs .nz-dtable caption {
  padding: 0 0 0.75rem;
  text-align: left;
  font-size: 0.8125rem;
  color: var(--nqs-muted);
}

.nqs .nz-dtable th {
  padding: 0.625rem 0.75rem;
  text-align: left;
  vertical-align: bottom;
  border-bottom: 2px solid var(--nqs-fg);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--nqs-muted);
}

.nqs .nz-dtable td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--nqs-line);
  vertical-align: top;
  color: var(--nqs-fg);
}

.nqs .nz-dtable tbody tr:hover td {
  background: var(--nqs-band);
}

.nqs .nz-dtable .is-num {
  text-align: right;
  white-space: nowrap;
}

.nqs .nz-dtable .is-num b {
  font-family: var(--nqs-font-h);
}

.nqs .nz-dtable .is-sub {
  display: block;
  font-size: 0.75rem;
  color: var(--nqs-muted);
}

.nqs .nz-dtable a {
  font-weight: 700;
  text-decoration: none;
}

.nqs .nz-dtable a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nqs .nz-dtable__group td {
  padding-top: 1.25rem;
  border-bottom-color: var(--nqs-fg);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nqs-accent);
}

/* Colonne bilanciate: luoghi larghi, numeri da 8rem, «Apri» stretto; tutta la riga apre la tratta (R9, R22). */
.nqs .nqs-tratte {
  table-layout: fixed;
}

.nqs .nqs-tratte .nqs-col-num {
  width: 8rem;
}

.nqs .nqs-tratte .nqs-col-open {
  width: 5rem;
}

.nqs .nqs-tratte .nqs-tratta {
  position: relative;
}

.nqs .nqs-tratte .nqs-td-sea b {
  font-size: 1.0625rem;
}

.nqs .nqs-tratte .nqs-via {
  white-space: normal;
}

.nqs .nqs-tratte .nqs-td-open a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.nqs .nqs-tratte .nqs-td-open a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.nqs .nqs-tratte .nqs-tratta:hover b {
  color: var(--nqs-accent);
}

.nqs .nqs-tratte .nqs-td-open a:focus-visible {
  outline: none;
}

.nqs .nqs-tratte .nqs-td-open a:focus-visible::after {
  outline: 2px solid var(--nqs-accent);
  outline-offset: -2px;
}

@media (max-width: 639px) {
  .nqs-lead {
    font-size: 1rem;
  }

  .nqs .nz-dtable {
    font-size: 0.875rem;
  }

  .nqs .nz-dtable th,
  .nqs .nz-dtable td {
    padding: 0.5rem;
  }

  /* Sotto 640 px ogni tratta e' una scheda: «Riposto → Catania», le miglia in mare grandi, poi tempo e retta (R8). */
  .nqs-table-scroll {
    overflow: visible;
  }

  .nqs .nqs-tratte,
  .nqs .nqs-tratte tbody {
    display: block;
  }

  .nqs .nqs-tratte colgroup,
  .nqs .nqs-tratte thead {
    display: none;
  }

  .nqs .nqs-tratte caption {
    display: block;
  }

  .nqs .nqs-tratte .nz-dtable__group {
    display: block;
  }

  .nqs .nqs-tratte .nz-dtable__group td {
    display: block;
    padding: 1.25rem 0 0.5rem;
  }

  /*
   * N11 (designer round 2): una riga flessibile, non una griglia. Con le colonne condivise il nome lungo di
   * una riga allargava la colonna del tempo nell'altra («Furnari  → Capo d'Orlando», «2 h 12 min  · retta»):
   * ora lo spazio fra gli elementi e' sempre lo stesso gap, mai uno spazio letterale.
   */
  .nqs .nqs-tratte .nqs-tratta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.25rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--nqs-line);
  }

  .nqs .nqs-tratte .nqs-tratta td {
    padding: 0;
    border: 0;
    text-align: left;
  }

  .nqs .nqs-tratte .nqs-td-da {
    order: 1;
  }

  .nqs .nqs-tratte .nqs-td-a {
    order: 2;
  }

  .nqs .nqs-tratte .nqs-td-a::before {
    content: "\2192\00a0";
    color: var(--nqs-accent);
    font-weight: 700;
  }

  .nqs .nqs-tratte .nqs-td-da b,
  .nqs .nqs-tratte .nqs-td-a b {
    font-family: var(--nqs-font-h);
    font-size: 1rem;
  }

  .nqs .nqs-tratte .nqs-td-sea {
    display: contents;
  }

  .nqs .nqs-tratte .nqs-td-sea b {
    order: 4;
    flex: 0 0 100%;
    margin: 0.25rem 0 0.125rem;
    font: 800 1.75rem/1.1 var(--nqs-font-d);
    color: var(--nqs-fg);
  }

  .nqs .nqs-tratte .nqs-td-time {
    order: 5;
    font-size: 0.8125rem;
    color: var(--nqs-muted);
  }

  .nqs .nqs-tratte .nqs-retta {
    order: 6;
  }

  .nqs .nqs-tratte .nqs-retta::before {
    content: "\00b7\00a0";
  }

  .nqs .nqs-tratte td .is-sub,
  .nqs .nqs-tratte .nqs-via {
    display: none;
  }

  .nqs .nqs-tratte td .nqs-retta {
    display: block;
    font-size: 0.8125rem;
  }

  .nqs .nqs-tratte .nqs-nm.is-sea::after {
    content: " in mare";
    font: 700 0.75rem/1 var(--nqs-font-h);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nqs-accent);
  }

  .nqs .nqs-tratte .nqs-td-open {
    order: 3;
    margin-left: auto;
    font-size: 0.8125rem;
  }

  .nqs .nqs-tratte .nqs-td-open a {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nqs-handle--via::after,
  .nqs-handle--way::after {
    transition: none;
  }
}

@media print {
  .nqs .nqs-panel {
    position: static;
    width: auto;
    max-height: none;
    border: 0;
  }

  .nqs .nz-routeact,
  .nqs .nz-iconbar,
  .nqs .nz-leg__pick,
  .nqs .nz-leg__remove,
  .nqs .nz-swap,
  .nqs .nz-addleg,
  .nqs-hint,
  .nqs-links,
  .nqs-toast {
    display: none;
  }

  .nqs-mapbox.is-live .nqs-overlay {
    display: block;
  }
}