/* Partenze Live — stile del tabellone.
 *
 * Gira dentro temi diversi (GeneratePress child dei locali, notizie-it-v3 di milano): tutto è
 * scoped su .plv. Nessun web font, nessuna immagine. Tabelle a tre colonne che stanno in 320 px:
 * linea (badge), destinazione (va a capo), orario (a destra, mai a capo).
 *
 * Colori delle linee: quelli pubblicati dall'operatore nel GTFS (route_color), altrimenti il
 * grigio del tipo di mezzo. Verde = tempo reale, grigio = programmato: la differenza è anche
 * scritta, mai affidata al solo colore.
 */

.plv {
	--plv-bg: #fff;
	--plv-ink: #1a1a1a;
	--plv-mute: #6b7280;
	--plv-line: #e5e7eb;
	--plv-soft: #f6f7f9;
	--plv-live: #047857;
	--plv-late: #b45309;
	--plv-off: #b91c1c;

	box-sizing: border-box;
	max-width: 100%;
	margin: 1.75rem 0;
	padding: 1rem 1.1rem 0.85rem;
	background: var(--plv-bg);
	border: 1px solid var(--plv-line);
	border-radius: 10px;
	color: var(--plv-ink);
	font-size: 15px;
	line-height: 1.45;
}

.plv *, .plv *::before, .plv *::after { box-sizing: inherit; }

/* ── testata ─────────────────────────────────────────────────────── */

.plv-head {
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var(--plv-line);
}

.plv-title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.2;
	font-weight: 700;
}

.plv-sub,
.plv-legend {
	margin: 0.35rem 0 0;
	font-size: 0.82rem;
	color: var(--plv-mute);
}

.plv-when { white-space: nowrap; }

.plv-key {
	display: inline-block;
	padding: 0 0.4em;
	border-radius: 4px;
	font-weight: 600;
	font-size: 0.78rem;
	white-space: nowrap;
}

.plv-key--live { background: #d1fae5; color: var(--plv-live); }
.plv-key--sched { background: var(--plv-soft); color: var(--plv-mute); border: 1px solid var(--plv-line); }

.plv-notice {
	margin: 0.55rem 0 0;
	padding: 0.45rem 0.6rem;
	background: #fff7ed;
	border-left: 3px solid var(--plv-late);
	font-size: 0.85rem;
}

/* ── messaggi ────────────────────────────────────────────────────── */

.plv-msg {
	margin: 0.9rem 0 0.2rem;
	padding: 0.7rem 0.8rem;
	background: var(--plv-soft);
	border-radius: 6px;
	font-size: 0.92rem;
}

.plv-msg--off { border-left: 3px solid var(--plv-off); }

/* ── salto rapido alle fermate ───────────────────────────────────── */

.plv-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0.8rem 0 0.2rem;
}

.plv-jump a {
	padding: 0.15rem 0.6rem;
	border: 1px solid var(--plv-line);
	border-radius: 999px;
	font-size: 0.8rem;
	color: var(--plv-ink);
	text-decoration: none;
	background: var(--plv-soft);
}

.plv-jump a:hover,
.plv-jump a:focus { border-color: var(--plv-mute); }

/* ── nodi e tabelle ──────────────────────────────────────────────── */

.plv-node { margin-top: 1.1rem; scroll-margin-top: 80px; }

.plv-node-title {
	margin: 0 0 0.35rem;
	font-size: 1.02rem;
	font-weight: 700;
}

.plv-node-empty {
	margin: 0;
	font-size: 0.88rem;
	color: var(--plv-mute);
}

.plv-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	table-layout: auto;
	font-size: 0.92rem;
}

.plv-table th {
	padding: 0.25rem 0.4rem;
	text-align: left;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--plv-mute);
	border-bottom: 1px solid var(--plv-line);
	background: none;
}

.plv-table td {
	padding: 0.42rem 0.4rem;
	vertical-align: top;
	border-bottom: 1px solid var(--plv-line);
	background: none;
}

.plv-table tr:last-child td { border-bottom: 0; }

.plv-cell-line { width: 3.6em; }

.plv-line {
	display: inline-block;
	min-width: 2.6em;
	max-width: 5.5em;
	padding: 0.1em 0.35em;
	border-radius: 5px;
	background: #4b5563;
	color: #fff;
	font-weight: 700;
	font-size: 0.85rem;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}

.plv-mode-metro { background: #1f2937; }
.plv-mode-tram { background: #9a3412; }
.plv-mode-battello { background: #0e7490; }
.plv-mode-funicolare,
.plv-mode-funivia { background: #6d28d9; }
.plv-mode-filobus { background: #3f6212; }

.plv-dest { overflow-wrap: anywhere; }

.plv-stop {
	display: block;
	font-size: 0.75rem;
	color: var(--plv-mute);
}

.plv-th-time,
.plv-time {
	text-align: right;
	white-space: nowrap;
	width: 1%;
}

.plv-time time {
	display: block;
	font-weight: 700;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
}

.plv-rel,
.plv-status,
.plv-orig {
	display: block;
	font-size: 0.72rem;
	line-height: 1.3;
}

.plv-rel { color: var(--plv-ink); }
.plv-status { color: var(--plv-mute); }
.plv-orig { color: var(--plv-mute); text-decoration: line-through; }

.plv-row--ontime .plv-status,
.plv-row--early .plv-status { color: var(--plv-live); font-weight: 600; }
.plv-row--late .plv-status,
.plv-row--held .plv-status { color: var(--plv-late); font-weight: 600; }
.plv-row--ontime .plv-time time,
.plv-row--early .plv-time time,
.plv-row--late .plv-time time { color: var(--plv-live); }

/* Pallino «in tempo reale» davanti all'orario stimato. */
.plv-row--ontime .plv-time time::before,
.plv-row--early .plv-time time::before,
.plv-row--late .plv-time time::before {
	content: "";
	display: inline-block;
	width: 0.45em;
	height: 0.45em;
	margin: 0 0.3em 0.12em 0;
	border-radius: 50%;
	background: var(--plv-live);
}

.plv-row--canceled .plv-dest,
.plv-row--canceled .plv-time time { text-decoration: line-through; color: var(--plv-mute); }
.plv-row--canceled .plv-status { color: var(--plv-off); font-weight: 600; }

/* ── treni ─────────────────────────────────────────────────────── */

.plv-trains { margin-top: 1.4rem; }

.plv-trains-title {
	margin: 0 0 0.2rem;
	padding-top: 0.9rem;
	border-top: 2px solid var(--plv-line);
	font-size: 1.15rem;
	font-weight: 700;
}

.plv-cell-train { width: 7.5em; }

.plv-train-name {
	display: block;
	font-weight: 700;
	font-size: 0.85rem;
	line-height: 1.25;
}

.plv-th-bin,
.plv-bin {
	width: 1%;
	text-align: center;
	white-space: nowrap;
	font-weight: 700;
}

.plv-bus-sost { color: var(--plv-late); font-weight: 600; }

.plv-train-at {
	margin: 0.3rem 0 0;
	font-size: 0.72rem;
	color: var(--plv-mute);
}

.plv-table--train .plv-row--late time { color: var(--plv-late); }

/* ── avvisi ──────────────────────────────────────────────────────── */

.plv-alerts { margin-top: 1.2rem; }

.plv-alert {
	margin: 0 0 0.35rem;
	padding: 0.35rem 0.6rem;
	background: #fffbeb;
	border-radius: 6px;
	font-size: 0.86rem;
}

.plv-alert summary { cursor: pointer; font-weight: 600; }
.plv-alert p { margin: 0.4rem 0 0.2rem; }

/* ── fonti ───────────────────────────────────────────────────────── */

.plv-src {
	margin-top: 1rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--plv-line);
	font-size: 0.75rem;
	color: var(--plv-mute);
}

.plv-src p { margin: 0; }
.plv-src a { color: inherit; }

/* ── FAQ ─────────────────────────────────────────────────────────── */

.plv-faq { margin: 1.75rem 0; }
.plv-faq-title { font-size: 1.2rem; margin: 0 0 0.6rem; }
.plv-faq-item { border-bottom: 1px solid #e5e7eb; padding: 0.55rem 0; }
.plv-faq-item summary { cursor: pointer; font-weight: 600; }
.plv-faq-item p { margin: 0.45rem 0 0.2rem; }

@media (max-width: 480px) {
	.plv { padding: 0.8rem 0.7rem 0.7rem; font-size: 14px; }
	.plv-table td { padding: 0.38rem 0.25rem; }
	.plv-table th { padding: 0.25rem; }
	.plv-cell-line { width: 3em; }
	.plv-line { min-width: 2.3em; font-size: 0.8rem; }
	.plv-cell-train { width: 5.8em; }
	.plv-train-name { font-size: 0.78rem; }
}