/* El full de la ruta del planificador (planner-panel.js), plegat i desplegat, «Descobreix» (planner-lists.js) i el full
   del dia de mostra (planner-day.js), com els de l'app (RouteSheet, DiscoverPanel, DaySheet). Els colors i les mides,
   els de planner.css (es carrega abans). */

/* ---------------------------------------------------------------- el full (la ruta, les llistes, «Descobreix») */

.pl-panel, .pl-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: var(--radius-card);
  background: var(--glass-strong);
  animation: pl-rise var(--normal) var(--ease);
}
.pl-panel { flex: 0 1 auto; overflow: hidden; }
.pl-panel-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.pl-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 6px 8px 0 16px;
  font-size: 1.0625rem;
  font-weight: 700;
}
.pl-panel-head .pl-i { width: 1.25rem; height: 1.25rem; }
.pl-panel-head h2 { font-size: inherit; font-weight: inherit; }
.pl-panel-count { color: var(--ink-2); font-size: 0.9375rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.pl-panel-note { padding: 0 16px 6px; color: var(--ink-2); font-size: 0.8125rem; }

.pl-close {
  display: grid;
  place-items: center;
  flex: none;
  margin-left: auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--ink-2);
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.pl-close .pl-i { width: 0.875rem; height: 0.875rem; }
.pl-close .pl-svg-stroke { stroke-width: 2.6; }
.pl-close:hover { background: var(--separator); color: var(--ink); }

/* Una fila d'una llista: la icona, el nom i el detall, i la distància. */
.pl-rows { margin: 0; padding: 0 8px 8px; list-style: none; }
.pl-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 8px;
  border: 0;
  border-radius: 14px;
  background: none;
  text-align: left;
  transition: background-color var(--fast) var(--ease);
}
.pl-row:hover, .pl-row:focus-visible { background: var(--accent-soft); }
.pl-rows li { position: relative; }
.pl-rows li + li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 56px;
  right: 8px;
  border-top: 0.5px solid var(--separator);
}
.pl-row-name { display: block; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-row-detail { display: block; color: var(--ink-2); font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-row-detail .pl-queue { margin-left: 4px; }
.pl-row-side { color: var(--ink-2); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.pl-badge {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  color: #FFFFFF;
}
.pl-badge .pl-i { width: 1.125rem; height: 1.125rem; }
.pl-badge-restaurants { background: var(--poi); }
.pl-badge-snowparks { background: #7B3FE4; }
.pl-badge-bases { background: var(--ink); color: var(--surface); }
.pl-badge-lifts { background: var(--lift-ink); color: var(--surface); }
.pl-badge-slopes.pl-d-novice, .pl-badge.pl-d-novice { background: var(--d-novice); }
.pl-badge.pl-d-easy { background: var(--d-easy); }
.pl-badge.pl-d-intermediate { background: var(--d-intermediate); }
.pl-badge.pl-d-advanced { background: var(--d-advanced); color: var(--surface); }
.pl-ref {
  display: inline-grid;
  place-items: center;
  min-width: 2.25rem;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--lift-ink);
  color: var(--surface);
  font-size: 0.75rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.pl-queue {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 7px;
  border-radius: 6px;
  background: var(--tight-fill);
  color: var(--tight-ink);
  font-size: 0.75rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pl-queue .pl-i { width: 0.8125rem; height: 0.8125rem; }

/* ---------------------------------------------------------------- el full de la ruta (plegat i desplegat) */

.pl-sheet-body { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; }
.pl-sheet-top { display: flex; align-items: flex-start; gap: 8px; }
.pl-sheet-top .pl-close { margin-top: 2px; }
.pl-headline {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.pl-big {
  font-family: var(--font-round);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pl-aside { display: grid; justify-items: end; text-align: right; }
.pl-aside-label { color: var(--ink-2); font-size: 0.8125rem; }
.pl-aside-value { font-family: var(--font-round); font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-late .pl-aside-label, .pl-late .pl-aside-value { color: var(--late-ink); }
.pl-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--ink); font-size: 0.875rem; }
.pl-stat { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-stat .pl-i { width: 1rem; height: 1rem; color: var(--ink-2); }
.pl-stat .pl-swatch { width: 9px; height: 9px; }
.pl-bar { display: flex; gap: 2px; height: 6px; border-radius: 999px; overflow: hidden; background: var(--surface-3); }
.pl-bar-part { flex-basis: 0; min-width: 3px; }
.pl-kicker {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--info-ink);
  font-size: 0.8125rem;
  font-weight: 700;
}
.pl-kicker .pl-i { width: 1rem; height: 1rem; }
.pl-strong-line { font-size: 0.9375rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.pl-soft-line { color: var(--ink-2); font-size: 0.875rem; }
.pl-alert {
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-small);
  font-size: 0.875rem;
  font-weight: 600;
}
.pl-alert-late { background: var(--late-fill); color: var(--late-ink); }
.pl-alert .pl-i { width: 1.125rem; height: 1.125rem; }

/* Les alternatives: «Proposada», «Més fàcil», «Menys remuntadors», «Més esquí», com les targetes de l'app. */
.pl-options { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 2px; }
.pl-option {
  display: flex;
  flex: 1 0 6.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 6.5rem;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: var(--surface-2);
  text-align: left;
  transition: background-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.pl-option:hover { background: var(--surface-3); }
.pl-option[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 1.25px var(--accent); }
.pl-option-title { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8125rem; font-weight: 650; white-space: nowrap; }
.pl-option[aria-pressed="true"] .pl-option-title { color: var(--accent-strong); }
.pl-option-title .pl-i { width: 0.875rem; height: 0.875rem; }
.pl-option-value { font-family: var(--font-round); font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-option-detail { color: var(--ink-2); font-size: 0.75rem; line-height: 1.25; }

.pl-note { color: var(--ink-2); font-size: 0.75rem; line-height: 1.35; }

/* La barra de baix, sempre a la vista: «Escolta la ruta» (blava) i «Passos». */
.pl-actions { display: flex; gap: 10px; }
.pl-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 650;
  text-decoration: none;
  transition: background-color var(--fast) var(--ease), transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.pl-button:hover { background: var(--surface-3); }
.pl-button:active { transform: scale(0.97); }
.pl-button .pl-i { width: 1.125rem; height: 1.125rem; }
.pl-button-primary { flex: 1; background: var(--accent-strong); color: #FFFFFF; box-shadow: 0 6px 16px rgba(47, 107, 168, 0.28); }
.pl-button-primary:hover { background: #285E94; }
body[data-theme="nit"] .pl-button-primary { background: #3B82C9; }
.pl-button-primary:disabled { background: var(--surface-3); color: var(--ink-3); box-shadow: none; cursor: not-allowed; }
.pl-button-stop { background: var(--emergency); }
.pl-button-stop:hover { background: var(--emergency-hover); }
.pl-button[aria-expanded="true"] { background: var(--ink); color: var(--surface); }
.pl-button[aria-expanded="true"] .pl-i { transform: rotate(180deg); }
.pl-listen-now {
  padding: 10px 12px;
  border-radius: var(--radius-small);
  background: var(--accent-soft);
  font-size: 0.9375rem;
  font-weight: 600;
}
.pl-listen-hint { color: var(--ink-2); font-size: 0.8125rem; }

/* Desplegat: els passos (o el guiatge), amb una línia de temps i les referències dels remuntadors. */
.pl-expanded { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; border-top: 0.5px solid var(--separator); }
.pl-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 10px; background: var(--surface-2); }
.pl-tabs button {
  min-height: 30px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 650;
}
.pl-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); }
body[data-theme="nit"] .pl-tabs button[aria-selected="true"] { background: var(--surface-3); }

.pl-steps { position: relative; margin: 0; padding: 0; list-style: none; }
.pl-steps::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 18px;
  bottom: 18px;
  border-left: 2px solid var(--surface-3);
}
.pl-step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; padding: 7px 0; }
.pl-step-body { min-width: 0; }
.pl-step-title { display: flex; align-items: center; gap: 6px; font-weight: 650; overflow-wrap: anywhere; }
.pl-step-sub { margin-top: 1px; color: var(--ink-2); font-size: 0.8125rem; }
.pl-step-side { color: var(--ink-2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.pl-step-icon {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  color: #FFFFFF;
  box-shadow: 0 0 0 3px var(--glass-strong);
}
.pl-step-icon .pl-i { width: 1rem; height: 1rem; }
.pl-step-icon.pl-d-novice { background: var(--d-novice); }
.pl-step-icon.pl-d-easy { background: var(--d-easy); }
.pl-step-icon.pl-d-intermediate { background: var(--d-intermediate); }
.pl-step-icon.pl-d-advanced { background: var(--d-advanced); color: var(--surface); }
.pl-step-icon-lift { background: var(--lift-ink); color: var(--surface); }
.pl-step-icon-link { width: 14px; height: 14px; margin-top: 8px; background: var(--d-none); }
.pl-step-end { background: var(--surface); color: var(--origin); box-shadow: 0 0 0 3px var(--glass-strong), inset 0 0 0 2.5px var(--origin); }
.pl-step-end.pl-step-dest { color: var(--destination); box-shadow: 0 0 0 3px var(--glass-strong), inset 0 0 0 2.5px var(--destination); }
.pl-step-end .pl-i { width: 0.875rem; height: 0.875rem; }
.pl-step.is-now .pl-step-title { color: var(--accent-strong); }
.pl-sector {
  margin: 8px 0 2px 44px;
  color: var(--info-ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pl-say { margin: 0; padding: 0; list-style: none; counter-reset: say; }
.pl-say li {
  position: relative;
  padding: 8px 0 8px 36px;
  border-bottom: 0.5px solid var(--separator);
  counter-increment: say;
  font-size: 0.9375rem;
}
.pl-say li::before {
  content: counter(say);
  position: absolute;
  left: 0;
  top: 8px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 700;
}
.pl-say li.is-now { color: var(--accent-strong); font-weight: 650; }
.pl-say li.is-now::before { background: var(--accent-strong); color: #FFFFFF; }

/* Les voltes d'un circuit: «1 · S9 TC8 Soldeu · arribada a dalt estimada 10:15 · +1,4 km de pistes noves». */
.pl-laps { margin: 0; padding: 0; list-style: none; }
.pl-lap {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 0;
  border: 0;
  border-bottom: 0.5px solid var(--separator);
  background: none;
  text-align: left;
}
.pl-lap:hover .pl-lap-title { color: var(--accent-strong); }
.pl-lap-n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lift-ink);
  color: var(--surface);
  font-size: 0.8125rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.pl-lap-title { display: block; font-weight: 650; }
.pl-lap-detail { display: block; color: var(--ink-2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

.pl-busy { display: flex; align-items: center; gap: 10px; padding: 18px 16px; color: var(--ink-2); }
.pl-busy::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--surface-3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: pl-spin 0.8s linear infinite;
}
@keyframes pl-spin { to { transform: rotate(360deg); } }
.pl-noroute { display: grid; gap: 12px; padding: 16px; }
.pl-noroute p { font-weight: 550; }

/* ---------------------------------------------------------------- «Descobreix» */

.pl-discover-body { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; }
.pl-lengths { display: flex; gap: 8px; }
.pl-length {
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.9375rem;
  font-weight: 650;
  white-space: nowrap;
  transition: background-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.pl-length:last-child:not(:nth-child(-n+3)) { flex: 1; }
.pl-length:hover:not(:disabled) { background: var(--accent-soft); transform: translateY(-1px); }
.pl-length:disabled { color: var(--ink-3); cursor: not-allowed; }
.pl-circle {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #FFFFFF;
}
.pl-circle .pl-i { width: 1.125rem; height: 1.125rem; }
.pl-circle .pl-svg-stroke { stroke-width: 2.1; }
.pl-row-wrap .pl-row-name { white-space: normal; }

/* ---------------------------------------------------------------- el peu del full i el dia de mostra */

.pl-sheet-foot { flex: none; padding: 10px 16px 16px; border-top: 0.5px solid var(--separator); }
.pl-discover-body .pl-busy { padding: 4px 0; }

.pl-day { width: min(28rem, calc(100% - var(--side) - 8rem)); padding: 16px 20px 24px; }
.pl-day-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pl-day-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--info-fill);
  color: var(--info-ink);
  font-size: 0.8125rem;
  font-weight: 650;
}
.pl-day-badge .pl-i { width: 1rem; height: 1rem; }
.pl-day-title { margin-top: 10px; font-size: 1.5rem; font-weight: 750; letter-spacing: -0.01em; }
.pl-day-date { color: var(--ink-2); }
.pl-day-hours { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pl-day-intro { margin-top: 10px; font-size: 0.875rem; line-height: 1.4; }
.pl-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.pl-number { padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); }
.pl-number-value { font-family: var(--font-round); font-size: 2.125rem; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.pl-number-unit { margin-left: 4px; color: var(--ink-2); font-family: var(--font); font-size: 1.125rem; font-weight: 650; }
.pl-number-label { color: var(--ink-2); font-size: 0.875rem; }
.pl-day-section { margin-top: 22px; }
.pl-day-section > .pl-h { margin-bottom: 10px; }
.pl-timebar { display: flex; gap: 2px; height: 18px; border-radius: 6px; overflow: hidden; }
.pl-slice { flex-basis: 0; min-width: 3px; }
.pl-slice-skiing { background: var(--slice-ski); }
.pl-slice-lift { background: var(--slice-lift); }
.pl-slice-queue { background: var(--slice-queue); }
.pl-slice-rest { background: var(--slice-rest); }
.pl-slice-other { background: var(--slice-other); }
.pl-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 0.8125rem; }
.pl-legend li { display: flex; align-items: center; gap: 6px; }
.pl-legend-dot { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.pl-legend-value { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pl-dbars { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pl-dbar { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 4.5rem; align-items: center; gap: 10px; font-size: 0.875rem; }
.pl-dbar-track { height: 12px; }
.pl-dbar-fill { display: block; height: 100%; border-radius: 4px; }
.pl-dbar-value { color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.pl-facts { margin: 0; padding: 0; list-style: none; }
.pl-fact { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; min-height: 40px; padding: 8px 0; border-bottom: 0.5px solid var(--separator); }
.pl-fact:last-child { border-bottom: 0; }
.pl-fact > .pl-i { align-self: center; color: var(--ink-2); }
.pl-fact-title { display: block; }
.pl-fact-detail { display: block; color: var(--ink-2); font-size: 0.8125rem; }
.pl-fact-value { font-weight: 650; font-variant-numeric: tabular-nums; }
.pl-daymap-box { padding: 8px; border-radius: var(--radius); background: var(--surface-2); }
.pl-daymap { display: block; width: 100%; height: auto; max-height: 22rem; }
.pl-daymap path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pl-daymap-piste { stroke: var(--surface-3); stroke-width: 1.6; }
.pl-daymap-lift { stroke: #8E95A0; stroke-width: 2; stroke-dasharray: 3 3; }
.pl-daymap-run { stroke-width: 3; }
.pl-daymap-box + .pl-note { margin-top: 8px; }
.pl-timeline { margin: 0; padding: 0; list-style: none; }
.pl-tl-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  width: 100%;
  padding: 8px 4px;
  border: 0;
  border-bottom: 0.5px solid var(--separator);
  border-radius: 0;
  background: none;
  text-align: left;
}
.pl-tl-row:hover { background: var(--accent-soft); border-radius: 10px; }
.pl-tl-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #FFFFFF; }
.pl-tl-icon .pl-i { width: 1rem; height: 1rem; }
.pl-tl-icon.pl-d-advanced { color: var(--surface); }
.pl-tl-neutral { background: var(--surface-2); color: var(--ink); }
.pl-tl-title { display: block; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-tl-detail { display: block; color: var(--ink-2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.pl-tl-time { display: grid; justify-items: end; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.pl-tl-end { color: var(--ink-2); font-size: 0.8125rem; }
.pl-day-privacy { margin-top: 16px; }

.pl-summary { display: grid; gap: 4px; flex: 1; min-width: 0; }
.pl-summary .pl-bar { margin-top: 6px; }
.pl-summary .pl-note { margin-top: 2px; }