/* ==========================================================================
   CTP Iași — componente
   Ordinea: bază · bara spațială · dock · island · HUD · hartă · hero/planner ·
            bento · bilete · pulsul · flota · turistic · pagini · subsol · mobil
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
/* Clasele cu display (ex. .btn) nu au voie să anuleze atributul hidden */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 400 var(--fs-md)/var(--lh-body) var(--font-ui);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
	transition: background-color var(--dur-3) var(--ease-spatial), color var(--dur-3) var(--ease-spatial);
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tracking-display); line-height: 1.08; margin: 0; }
p { margin: 0 0 var(--sp-4); }
.mono, .num { font-family: var(--font-num); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; letter-spacing: -0.01em; }
.muted { color: var(--text-3); }
.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.eyebrow { font: 600 var(--fs-sm)/1.35 var(--font-ui); letter-spacing: 0; color: var(--text-3); margin-bottom: var(--sp-3); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 12px 18px; border-radius: var(--r-pill); font-weight: 700; text-decoration: none; }
.skip:focus { top: 16px; }
main:focus { outline: none; }

:focus-visible { outline: 3px solid var(--emerald-400); outline-offset: 3px; border-radius: 8px; }
.a11y-contrast :focus-visible { outline: 4px solid var(--amber-500); }
.a11y-contrast a { text-decoration: underline; }
/* Mod stație: +100 la grosime (fonturile sunt variabile, deci orice treaptă există) */
.a11y-sun body { font-weight: 500; }
.a11y-sun :is(b, strong, h1, h2, h3, h4, .btn, .price, .num) { font-weight: 800; }
.a11y-sun :focus-visible { outline: 4px solid #000; outline-offset: 3px; }
.toggle--wide { grid-column: 1 / -1; }

/* Sticlă */
.glass {
	background: var(--glass);
	-webkit-backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
	backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
	border: 1px solid var(--glass-border);
	box-shadow: var(--shadow-2);
	border-radius: var(--r-lg);
}

/* Butoane */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: var(--tap); padding: 0 22px; border-radius: var(--r-pill);
	border: 1px solid transparent; font-weight: 700; font-size: var(--fs-sm); text-decoration: none; cursor: pointer;
	transition: transform var(--dur-2) var(--ease-spring), background-color var(--dur-2), box-shadow var(--dur-2);
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--emerald-400); color: var(--on-accent); box-shadow: 0 0 0 0 var(--emerald-glow); }
.btn--primary:hover { box-shadow: 0 0 0 6px rgba(0, 230, 118, 0.18), 0 10px 30px var(--emerald-glow); }
.btn--amber { background: var(--amber-500); color: #1a1100; }
.btn--ghost { background: transparent; border-color: var(--glass-border); color: var(--text); }
.btn--ghost:hover { background: var(--hairline); }
.link-btn { background: none; border: 0; padding: 8px 0; color: var(--text-3); text-decoration: underline; cursor: pointer; min-height: 44px; }
.icon-btn {
	display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 50%;
	border: 1px solid var(--glass-border); background: var(--glass); color: var(--text); cursor: pointer;
	-webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur));
	transition: transform var(--dur-2) var(--ease-spring);
}
.icon-btn:hover { background: var(--glass-strong); }

/* Badge-uri de linie: tramvai = ambră, autobuz = smarald */
.line-badge {
	display: inline-grid; place-items: center; min-width: 2.2em; height: 1.75em; padding: 0 0.45em;
	border-radius: 8px; font: 700 0.95em/1 var(--font-display); font-variant-numeric: tabular-nums;
	background: var(--emerald-400); color: var(--on-accent);
}
.line-badge--tram { background: var(--amber-500); color: #1a1100; }
.line-badge--metro { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--text-3); }
.line-badge--lg { font-size: 1.5rem; border-radius: 12px; }

/* --------------------------------------------------------------------------
   Bara spațială
   -------------------------------------------------------------------------- */
.topbar {
	position: fixed; inset: 0 0 auto 0; z-index: var(--z-top);
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-4);
	padding: 14px var(--gutter);
	pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; justify-self: start; }
.brand__mark { color: var(--text); }
.brand__word { font: 500 1.25rem/1 var(--font-display); letter-spacing: -0.03em; }
.brand__word b { font-weight: 700; }
.topbar__actions { justify-self: end; display: flex; align-items: center; gap: 10px; }

.portal-switch {
	display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 8px;
	border-radius: var(--r-pill); text-decoration: none; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2);
	background: var(--glass); border: 1px solid var(--glass-border);
	-webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur));
}
.portal-switch__track { width: 34px; height: 20px; border-radius: 99px; background: var(--hairline); position: relative; box-shadow: inset 0 0 0 1px var(--glass-border); }
.portal-switch__track span { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-3); transition: transform var(--dur-3) var(--ease-spring), background var(--dur-2); }
.portal-switch.is-on .portal-switch__track span { transform: translateX(14px); background: var(--amber-500); }

/* Dock */
.dock {
	display: flex; gap: 4px; padding: 6px; border-radius: var(--r-pill);
	background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--shadow-2);
	-webkit-backdrop-filter: blur(var(--blur)) saturate(var(--saturate)); backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
}
.dock__item {
	position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
	border-radius: var(--r-pill); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); color: var(--text-2);
	transition: background var(--dur-2), color var(--dur-2), transform var(--dur-2) var(--ease-spring);
}
.dock__item:hover { background: var(--hairline); color: var(--text); }
.dock__item.is-active { background: var(--text); color: var(--bg); }
.dock__item.is-active svg { color: var(--emerald-400); }
[data-theme="light"] .dock__item.is-active svg { color: var(--emerald-400); }

/* --------------------------------------------------------------------------
   Dynamic Island
   -------------------------------------------------------------------------- */
.island { position: fixed; top: 78px; left: 50%; transform: translateX(-50%); z-index: var(--z-island); width: max-content; max-width: calc(100% - 32px); }
.island__pill {
	display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 8px 0 14px; max-width: 100%;
	border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.08); cursor: pointer;
	background: #05070b; color: #f5f7fa; font-size: var(--fs-xs); font-weight: 600;
	box-shadow: 0 10px 30px rgba(0,0,0,.35);
	transition: padding var(--dur-3) var(--ease-spatial), border-radius var(--dur-3) var(--ease-spatial);
}
.island__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.island__time { background: rgba(255,255,255,.08); padding: 4px 10px; border-radius: var(--r-pill); font-size: 0.75rem; }
.pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--emerald-400); box-shadow: 0 0 0 0 var(--emerald-glow); animation: pulse 2.2s var(--ease-inout) infinite; flex: none; }
.island[data-level="amber"] .pulse-dot { background: var(--amber-500); animation-name: pulse-amber; }
.island[data-level="red"] .pulse-dot { background: var(--red-500); animation-name: pulse-amber; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--emerald-glow); } 70% { box-shadow: 0 0 0 10px rgba(0,230,118,0); } 100% { box-shadow: 0 0 0 0 rgba(0,230,118,0); } }
@keyframes pulse-amber { 0% { box-shadow: 0 0 0 0 var(--amber-glow); } 70% { box-shadow: 0 0 0 10px rgba(255,179,0,0); } 100% { box-shadow: 0 0 0 0 rgba(255,179,0,0); } }
.a11y-calm .pulse-dot { animation: none; }
.island__panel {
	margin-top: 8px; width: min(440px, calc(100vw - 32px)); padding: 16px; border-radius: 24px;
	background: #05070b; color: #f5f7fa; box-shadow: 0 30px 60px rgba(0,0,0,.45); font-size: var(--fs-sm);
	transform-origin: top center; animation: island-in var(--dur-3) var(--ease-spatial);
}
@keyframes island-in { from { opacity: 0; transform: scale(.92) translateY(-8px); } }
.island__panel .alert-row { border-color: rgba(255,255,255,.08); }
.island__more { display: block; margin-top: 10px; color: var(--emerald-400); font-weight: 700; text-decoration: none; }

/* Alerte (folosite în island și în pagina Pulsul) */
.alert-row { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.alert-row:last-child { border-bottom: 0; }
.alert-row__icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,179,0,.16); color: var(--amber-500); font-weight: 800; }
.alert-row--ok .alert-row__icon { background: rgba(0,230,118,.14); color: var(--emerald-400); }
.alert-row--red .alert-row__icon { background: rgba(255,82,82,.16); color: var(--red-500); }
.alert-row h3, .alert-row strong { font: 700 var(--fs-sm)/1.3 var(--font-ui); letter-spacing: 0; display: block; margin-bottom: 4px; }
.alert-row p { margin: 0; opacity: .85; }
.alert-row .lines { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; font-size: .8rem; }

/* --------------------------------------------------------------------------
   HUD accesibilitate
   -------------------------------------------------------------------------- */
.hud { position: fixed; inset: 0; z-index: var(--z-hud); display: grid; place-items: start end; padding: 76px var(--gutter) 16px; }
.hud[hidden] { display: none; }
.hud__scrim { position: absolute; inset: 0; background: rgba(5, 7, 11, 0.45); }
.hud__panel { position: relative; width: min(440px, 100%); padding: 22px; max-height: calc(100dvh - 100px); overflow: auto; animation: island-in var(--dur-3) var(--ease-spatial); background: var(--glass-strong); }
.hud__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.hud__head h2 { font-size: var(--fs-lg); }
.hud__lead { color: var(--text-3); font-size: var(--fs-sm); }
.hud__grid { display: grid; gap: 10px; margin: 16px 0; }
.hud__speak { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.seg { border: 0; padding: 0; margin: 0 0 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--hairline); border-radius: 14px; padding: 4px; }
.seg legend { font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); margin-bottom: 6px; padding: 0; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; min-height: 44px; border-radius: 10px; font-size: var(--fs-xs); font-weight: 700; text-align: center; padding: 0 6px; }
.seg input:checked + span { background: var(--bg-elev); box-shadow: var(--shadow-1); }
.seg input:focus-visible + span { outline: 3px solid var(--emerald-400); }
.toggle { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--hairline); cursor: pointer; position: relative; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle__ui { width: 46px; height: 28px; border-radius: 99px; background: var(--text-3); position: relative; transition: background var(--dur-2); }
.toggle__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform var(--dur-3) var(--ease-spring); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.toggle input:checked + .toggle__ui { background: var(--emerald-500); }
.toggle input:checked + .toggle__ui::after { transform: translateX(18px); }
.toggle input:focus-visible + .toggle__ui { outline: 3px solid var(--emerald-400); outline-offset: 2px; }
.toggle b { display: block; font-size: var(--fs-sm); }
.toggle small { color: var(--text-3); font-size: var(--fs-xs); }

/* --------------------------------------------------------------------------
   Harta (canvas 3D sau SVG 2.5D), fixă în fundal
   -------------------------------------------------------------------------- */
.city { position: fixed; inset: 0; z-index: var(--z-canvas); background: var(--map-fog); }
.city canvas, .city svg { width: 100%; height: 100%; }
.city::after { /* lizibilitate: întunecăm stânga unde stă textul */
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 82%, transparent) 0%, color-mix(in srgb, var(--bg) 35%, transparent) 44%, transparent 70%),
		linear-gradient(0deg, color-mix(in srgb, var(--bg) 70%, transparent) 0%, transparent 30%);
}
.city__labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.city-label {
	position: absolute; left: 0; top: 0; transform: translate(-50%, -130%); white-space: nowrap;
	font: 600 11px/1 var(--font-ui); padding: 5px 8px; border-radius: 99px; color: var(--text);
	background: var(--glass); border: 1px solid var(--glass-border);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	transition: opacity var(--dur-2);
}
.city-label--landmark { font-weight: 700; }
.city-label--landmark::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--amber-500); margin-right: 6px; vertical-align: 1px; }
.city__source { position: fixed; right: 16px; top: 128px; z-index: 3; font-size: 11px; color: var(--text-3); background: var(--glass); padding: 6px 10px; border-radius: 99px; border: 1px solid var(--glass-border); }

/* Hartă în cadru (pagini interioare) */
.map-frame { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--map-fog); border: 1px solid var(--glass-border); min-height: 420px; }
.map-frame svg { width: 100%; height: 100%; position: absolute; inset: 0; }

/* --------------------------------------------------------------------------
   Hero + planner
   -------------------------------------------------------------------------- */
.layer { position: relative; z-index: var(--z-content); }
.hero { min-height: 100svh; padding: 132px 0 40px; display: flex; align-items: flex-end; }
.hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: end; }
@media (min-width: 1101px) {
	.sheet { display: grid; grid-template-columns: minmax(0, 600px) minmax(300px, 360px); justify-content: space-between; align-items: end; gap: var(--sp-6); }
}
.hero > .wrap { flex: 0 0 auto; }
.live-badge {
	display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 14px; border-radius: var(--r-pill);
	font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); margin-bottom: var(--sp-5);
	background: var(--glass); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur));
}
.live-badge .sep { opacity: .4; }
.live-badge a { text-decoration: none; }
.hero h1 { font-size: var(--fs-hero); line-height: var(--lh-tight); max-width: 12ch; margin-bottom: var(--sp-5); }
.hero h1 em { font-style: normal; color: var(--accent-ink); }
.hero h1 .amber { color: var(--amber-ink); }

.planner { padding: 20px; max-width: 620px; }
.planner__near { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--hairline); margin-bottom: 12px; font-size: var(--fs-sm); }
.planner__near b { font-weight: 700; }
.planner__near .btn { min-height: 40px; padding: 0 14px; margin-left: auto; font-size: var(--fs-xs); white-space: nowrap; flex: none; }
.planner__fields { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.field { position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 8px 0 16px; border-radius: 16px; background: var(--bg-elev); border: 1px solid var(--glass-border); }
.field:focus-within { border-color: var(--emerald-500); box-shadow: 0 0 0 4px rgba(0,230,118,.18); }
.field__dot { width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--text-3); flex: none; }
.field__dot--to { border-color: var(--emerald-500); background: var(--emerald-500); }
.field input { flex: 1; min-width: 0; height: 54px; border: 0; background: transparent; outline: none; font-size: var(--fs-md); font-weight: 600; }
.field input::placeholder { color: var(--text-3); font-weight: 500; }
.field kbd { font: 600 11px var(--font-num); padding: 4px 7px; border-radius: 7px; border: 1px solid var(--glass-border); color: var(--text-3); }
.field .icon-btn { width: 44px; height: 44px; border: 0; background: transparent; }
.field .icon-btn.is-listening { background: var(--red-500); color: #fff; }
.swap { position: absolute; right: 64px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; z-index: 2; background: var(--bg-elev); }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; list-style: none; margin: 0; padding: 6px; border-radius: 18px; background: var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: var(--shadow-2); max-height: 320px; overflow: auto; -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); }
.suggest li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 48px; border-radius: 12px; cursor: pointer; }
.suggest li[aria-selected="true"], .suggest li:hover { background: var(--hairline); }
.suggest small { margin-left: auto; color: var(--text-3); font-size: var(--fs-xs); }

.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pill {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill);
	background: var(--hairline); border: 1px solid var(--glass-border); text-decoration: none; font-weight: 600; font-size: var(--fs-xs); cursor: pointer;
	transition: transform var(--dur-2) var(--ease-spring), background var(--dur-2);
}
.pill:hover { background: var(--glass-strong); }
.pill--live { background: rgba(255,179,0,.14); border-color: rgba(255,179,0,.45); }
.pill--live .mono { color: var(--amber-ink); font-weight: 700; }

.results { margin-top: 14px; display: grid; gap: 8px; }
.result { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px 16px; border-radius: 16px; background: var(--bg-elev); border: 1px solid var(--glass-border); text-align: left; cursor: pointer; width: 100%; }
.result[aria-pressed="true"] { border-color: var(--emerald-500); box-shadow: 0 0 0 3px rgba(0,230,118,.2); }
.result__legs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--fs-sm); font-weight: 600; }
.result__legs .walk { color: var(--text-3); font-weight: 500; }
.result__time { font: 700 1.35rem/1 var(--font-num); text-align: right; }
.result__time small { display: block; font: 500 11px var(--font-ui); color: var(--text-3); margin-top: 4px; }
.result__meta { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--text-3); }
.results__note { font-size: var(--fs-xs); color: var(--text-3); margin: 4px 2px 0; }

/* Bento din dreapta hero */
.hero-bento { display: grid; gap: 12px; }
.card { padding: 20px; }
.card h2, .card h3 { font-size: var(--fs-lg); letter-spacing: -0.02em; }
.card__row { display: flex; gap: 16px; align-items: center; }
.qr { width: 108px; height: 108px; padding: 8px; background: #fff; border-radius: 14px; flex: none; }
.qr img, .qr canvas { width: 100% !important; height: 100% !important; }
.price { font: 700 2rem/1 var(--font-num); letter-spacing: -0.03em; }
.price small { font-size: 0.45em; font-weight: 500; color: var(--text-3); margin-left: 4px; }
.store-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.store-links .btn { min-height: 40px; padding: 0 14px; font-size: var(--fs-xs); }
.l50 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.l50__dir { padding: 12px; border-radius: 14px; background: var(--hairline); }
.l50__dir > span { font-size: var(--fs-xs); color: var(--text-3); display: block; }
.l50__dir b { font: 700 1.5rem/1.1 var(--font-num); color: var(--amber-ink); }
.a11y-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer; color: var(--text); }
.a11y-card__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--text); color: var(--bg); flex: none; }
.a11y-card small { display: block; color: var(--text-3); font-size: var(--fs-xs); }

/* --------------------------------------------------------------------------
   Secțiuni de scroll peste hartă
   -------------------------------------------------------------------------- */
.section { padding: var(--sp-9) 0; position: relative; }
.section__head { max-width: 760px; margin-bottom: var(--sp-7); }
.section__head h2 { font-size: var(--fs-2xl); margin-bottom: var(--sp-4); }
.section__head p { font-size: var(--fs-lg); color: var(--text-2); }
.section--panel { background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.section--solid { background: var(--bg); }

/* Bento tarife */
.fares { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.fare { position: relative; padding: 24px; border-radius: var(--r-xl); background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--shadow-1); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.fare h3 { font-size: var(--fs-lg); letter-spacing: -0.02em; }
.fare .price { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.fare__note { color: var(--text-3); font-size: var(--fs-sm); margin: 0; }
.fare--single { grid-column: span 5; grid-row: span 2; }
.fare--two { grid-column: span 3; }
.fare--day { grid-column: span 4; }
.fare--month { grid-column: span 7; }
.fare__tag { align-self: flex-start; font: 700 11px var(--font-num); padding: 5px 9px; border-radius: 99px; background: var(--hairline); text-transform: uppercase; letter-spacing: .06em; }
.ring { position: relative; width: min(240px, 100%); aspect-ratio: 1; margin: 6px auto; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track { stroke: var(--hairline); }
.ring__bar { stroke: var(--emerald-400); transition: stroke-dashoffset 1s linear; filter: drop-shadow(0 0 8px var(--emerald-glow)); }
.ring__bar.is-low { stroke: var(--amber-500); filter: drop-shadow(0 0 8px var(--amber-glow)); }
.ring__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring__center b { font: 700 2.6rem/1 var(--font-num); letter-spacing: -0.04em; }
.ring__center span { font-size: var(--fs-xs); color: var(--text-3); margin-top: 6px; }
.ring-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.month-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.elevi-cta { padding: 18px; border-radius: 20px; background: linear-gradient(135deg, rgba(0,230,118,.18), rgba(0,200,83,.04)); border: 1px solid rgba(0,230,118,.35); }
.elevi-cta b { font-family: var(--font-display); font-size: 1.15rem; display: block; margin-bottom: 4px; }

/* Metode de plată (tabs) */
.paytabs { margin-top: var(--sp-6); }
.paytabs__list { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px; border-radius: 20px; background: var(--glass); border: 1px solid var(--glass-border); width: max-content; max-width: 100%; -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); }
.paytabs__list button { min-height: 44px; padding: 0 16px; border-radius: 14px; border: 0; background: transparent; font-weight: 700; font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; }
.paytabs__list button[aria-selected="true"] { background: var(--text); color: var(--bg); }
.paytabs__panel { margin-top: 14px; padding: 24px; border-radius: var(--r-xl); display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; }
.paytabs__panel[hidden] { display: none; }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.steps li::before { content: counter(s); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--hairline); font: 700 var(--fs-xs) var(--font-num); }
.kv { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.kv li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.kv li:last-child { border-bottom: 0; }
.kv .mono { font-weight: 700; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Pulsul orașului
   -------------------------------------------------------------------------- */
.pulse-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.status-hero { padding: 28px; border-radius: var(--r-xl); display: flex; flex-direction: column; gap: 12px; }
.status-hero__big { font: 700 clamp(1.6rem, 1rem + 2vw, 2.4rem)/1.1 var(--font-display); letter-spacing: -0.03em; }
.status-hero[data-level="ok"] .status-hero__big { color: var(--accent-ink); }
.status-hero[data-level="amber"] .status-hero__big { color: var(--amber-ink); }
.counters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.counter { padding: 14px; border-radius: 16px; background: var(--hairline); }
.counter b { font: 700 1.8rem/1 var(--font-num); display: block; }
.counter span { font-size: var(--fs-xs); color: var(--text-3); }

/* --------------------------------------------------------------------------
   Flota 3D
   -------------------------------------------------------------------------- */
.fleet { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; align-items: stretch; }
.fleet__stage { position: relative; min-height: 520px; border-radius: var(--r-xl); overflow: hidden; background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--emerald-500) 14%, var(--bg-elev)), var(--bg-elev) 60%); border: 1px solid var(--glass-border); }
.fleet__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
.fleet__stage canvas:active { cursor: grabbing; }
.fleet__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fleet__switch { position: absolute; top: 14px; left: 14px; z-index: 3; }
.hotspot {
	position: absolute; left: 0; top: 0; z-index: 3; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
	border: 2px solid #fff; background: rgba(0, 200, 83, .85); color: #04140a; font: 800 15px var(--font-num); cursor: pointer;
	box-shadow: 0 0 0 0 var(--emerald-glow); animation: pulse 2.4s infinite;
}
.hotspot[aria-expanded="true"] { background: var(--amber-500); }
.fleet__info { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.fleet__info h3 { font-size: var(--fs-xl); }
.fleet__hint { font-size: var(--fs-xs); color: var(--text-3); position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 3; background: var(--glass); padding: 6px 12px; border-radius: 99px; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Iași turistic
   -------------------------------------------------------------------------- */
.lang-toggle { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--hairline); }
.lang-toggle button { min-height: 40px; min-width: 52px; border: 0; border-radius: 10px; background: transparent; font-weight: 700; cursor: pointer; }
.lang-toggle button[aria-pressed="true"] { background: var(--bg-elev); box-shadow: var(--shadow-1); }
[data-lang="en"] .ro, [data-lang="ro"] .en { display: none !important; }
.journey { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: j; }
.journey__step { padding: 22px; border-radius: var(--r-lg); position: relative; }
.journey__step::before { counter-increment: j; content: "0" counter(j); font: 700 var(--fs-xs) var(--font-num); color: var(--amber-ink); display: block; margin-bottom: 10px; }
.journey__step h3 { font-size: var(--fs-lg); margin-bottom: 8px; }
.spots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.spot { padding: 20px; border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 8px; }
.spot h3 { font-size: var(--fs-lg); letter-spacing: -0.02em; }
.spot__stop { font-size: var(--fs-xs); color: var(--text-3); }
.spot__lines { display: flex; flex-wrap: wrap; gap: 4px; font-size: .78rem; }
.spot .btn { align-self: flex-start; min-height: 40px; padding: 0 14px; font-size: var(--fs-xs); margin-top: auto; }
.photo-band { border-radius: var(--r-xl); overflow: hidden; position: relative; aspect-ratio: 1366 / 420; }
.photo-band img { width: 100%; height: 100%; object-fit: cover; }
.photo-band figcaption { position: absolute; left: 16px; bottom: 16px; font-size: var(--fs-xs); padding: 6px 12px; border-radius: 99px; background: rgba(5,7,11,.7); color: #fff; }
.co2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: center; padding: 32px; border-radius: var(--r-xl); }
.co2__num { font: 700 clamp(2.6rem, 1.6rem + 4vw, 5rem)/1 var(--font-num); letter-spacing: -0.05em; color: var(--accent-ink); }
.co2__method { font-size: var(--fs-xs); color: var(--text-3); }

/* --------------------------------------------------------------------------
   Pagini interioare
   -------------------------------------------------------------------------- */
.page-hero { padding: 168px 0 48px; position: relative; z-index: var(--z-content); }
.page-hero h1 { font-size: var(--fs-2xl); max-width: 18ch; margin-bottom: var(--sp-4); }
.page-hero p { font-size: var(--fs-lg); color: var(--text-2); max-width: 62ch; }
.page-body { position: relative; z-index: var(--z-content); padding-bottom: var(--sp-9); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.panel { padding: 24px; border-radius: var(--r-xl); background: var(--bg-elev); border: 1px solid var(--glass-border); box-shadow: var(--shadow-1); }
.panel h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-4); }
.panel h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-3); letter-spacing: -0.02em; }
.stack > * + * { margin-top: var(--sp-6); }
.note { padding: 14px 16px; border-radius: 14px; background: var(--hairline); font-size: var(--fs-sm); color: var(--text-2); }
.note--amber { background: rgba(255,179,0,.12); border: 1px solid rgba(255,179,0,.35); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th, .table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.table th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 700; }
.table td.mono { white-space: nowrap; font-weight: 700; }
.table-wrap { overflow-x: auto; }

/* Trasee */
.routes-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.routes-toolbar .field { flex: 1 1 280px; min-height: 52px; }
.routes-toolbar .field input { height: 50px; }
.routes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.route { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--bg-elev); border: 1px solid var(--glass-border); cursor: pointer; text-align: left; width: 100%; min-height: 72px; transition: transform var(--dur-2) var(--ease-spring), border-color var(--dur-2); }
.route:hover { border-color: var(--text-3); }
.route[aria-pressed="true"] { border-color: var(--emerald-500); box-shadow: 0 0 0 3px rgba(0,230,118,.2); }
.route span { font-size: var(--fs-sm); font-weight: 600; }
.route-detail { position: sticky; top: 110px; }
.stops { list-style: none; margin: 16px 0 0; padding: 0; position: relative; }
.stops::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--emerald-500); }
.stops--tram::before { background: var(--amber-500); }
.stops li { position: relative; padding: 8px 0 8px 30px; font-weight: 600; }
.stops li::before { content: ""; position: absolute; left: 1px; top: 13px; width: 15px; height: 15px; border-radius: 50%; background: var(--bg-elev); border: 3px solid currentColor; }
.routes-layout { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; align-items: start; }

/* Portal instituțional */
.portal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-6); }
.portal-nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 99px; background: var(--bg-elev); border: 1px solid var(--glass-border); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); }
.portal-nav a:hover { border-color: var(--text-3); }
.doc-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
.doc-list li { break-inside: avoid; padding: 8px 0; border-bottom: 1px solid var(--hairline); font-size: var(--fs-sm); }
.news { display: grid; gap: 10px; }
.news a { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 16px; border-radius: 16px; background: var(--hairline); text-decoration: none; }
.news time { font: 600 var(--fs-xs) var(--font-num); color: var(--text-3); padding-top: 3px; }
.news b { display: block; font-size: var(--fs-sm); }
.people { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.person { padding: 14px 16px; border-radius: 16px; background: var(--hairline); font-size: var(--fs-sm); }
.person b { display: block; }
.person a { color: var(--accent-ink); font-weight: 600; word-break: break-all; }

/* Formular */
.form { display: grid; gap: 12px; }
.form label { font-weight: 700; font-size: var(--fs-sm); display: grid; gap: 6px; }
.form input, .form textarea, .form select { min-height: 52px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--glass-border); background: var(--bg); font-weight: 500; }
.form textarea { min-height: 140px; resize: vertical; }
.form .hp { position: absolute; left: -9999px; }
.flash { padding: 14px 16px; border-radius: 14px; font-weight: 600; }
.flash--ok { background: rgba(0,230,118,.14); color: var(--accent-ink); }
.flash--err { background: rgba(255,82,82,.14); }

/* Articol */
.prose { max-width: 72ch; }
.prose h2 { font-size: var(--fs-xl); margin: 1.6em 0 .6em; }
.prose a { color: var(--accent-ink); }

/* --------------------------------------------------------------------------
   Subsol
   -------------------------------------------------------------------------- */
.footer { position: relative; z-index: var(--z-content); background: var(--bg); border-top: 1px solid var(--hairline); padding: var(--sp-8) 0 120px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-6); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer li a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; color: var(--text-2); }
.footer li a:hover { color: var(--text); text-decoration: underline; }
.footer__tel { display: block; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); font-weight: 700; text-decoration: none; color: var(--accent-ink); margin-bottom: 12px; letter-spacing: -0.04em; }
.footer__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--hairline); font-size: var(--fs-xs); color: var(--text-3); }
.footer__social { grid-template-columns: 1fr 1fr; }
.footer__partner { margin-top: 16px; font-size: var(--fs-xs); }

/* Mod simplu 2D: ținte mari, fără decor */
.a11y-simple .city::after { background: color-mix(in srgb, var(--bg) 55%, transparent); }
.a11y-simple .btn, .a11y-simple .pill, .a11y-simple .dock__item { min-height: 56px; }
.a11y-simple .city-label { font-size: 13px; }

/* --------------------------------------------------------------------------
   Responsiv — mobil întâi pentru stația din ploaie
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.hero__grid { grid-template-columns: 1fr; }
	.hero-bento { grid-template-columns: repeat(2, 1fr); }
	.fares { grid-template-columns: repeat(6, 1fr); }
	.fare--single, .fare--month { grid-column: span 6; grid-row: auto; }
	.fare--two, .fare--day { grid-column: span 3; }
	.fleet, .co2, .routes-layout { grid-template-columns: 1fr; }
	.spots, .grid-3 { grid-template-columns: 1fr 1fr; }
	.journey { grid-template-columns: 1fr 1fr; }
	.footer__grid { grid-template-columns: 1fr 1fr; }
	.route-detail { position: static; }
}

@media (max-width: 860px) {
	.topbar { grid-template-columns: 1fr auto; padding: 10px 16px; }
	.portal-switch__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* rămâne numele linkului */
	.portal-switch { padding: 0 8px; }
	/* Dock-ul coboară jos, la îndemâna degetului mare */
	.dock {
		position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%);
		z-index: var(--z-dock); width: calc(100% - 24px); max-width: 460px; justify-content: space-between; padding: 6px;
	}
	.dock__item { flex: 1; flex-direction: column; gap: 2px; padding: 8px 4px; min-height: 58px; font-size: 11px; border-radius: 20px; }
	.island { top: 70px; }
	.island__time { display: none; }

	.hero { padding: 0; min-height: 0; display: block; }
	.hero__grid { display: block; }
	.hero__intro { padding: 122px 16px 0; min-height: 58svh; }
	.hero h1 { font-size: clamp(2.1rem, 9vw, 3rem); margin-bottom: 0; text-shadow: 0 2px 18px var(--bg); }
	.live-badge { margin-bottom: 14px; border-radius: 16px; }
	.live-badge { flex-wrap: nowrap; white-space: nowrap; border-radius: var(--r-pill); max-width: 100%; }
	.live-badge > a, .live-badge > .sep, .live-badge > span:nth-of-type(2) { display: none; }
	.field { min-width: 0; padding-left: 14px; }
	.field kbd { display: none; }
	.swap { right: 56px; }
	.city-label:not(.city-label--landmark) { display: none; }

	/* Foaia glisantă (Apple Maps / Uber) */
	.sheet {
		position: relative; z-index: var(--z-sheet); margin-top: -24px;
		border-radius: 28px 28px 0 0; padding: 10px 16px 110px;
		background: var(--glass-strong); border: 1px solid var(--glass-border); border-bottom: 0;
		-webkit-backdrop-filter: blur(var(--blur)) saturate(var(--saturate)); backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
		box-shadow: 0 -20px 60px rgba(0,0,0,.25);
	}
	.sheet__grab { display: block; width: 100%; height: 28px; border: 0; background: transparent; cursor: grab; touch-action: none; }
	.sheet__grab::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--text-3); opacity: .5; margin: 0 auto; }
	.sheet .planner { padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
	.hero-bento { grid-template-columns: 1fr; margin-top: 14px; }
	.hero-bento .glass { box-shadow: none; }

	.section { padding: 72px 0; }
	.fares { grid-template-columns: 1fr 1fr; }
	.fare--single, .fare--month { grid-column: span 2; }
	.fare--two, .fare--day { grid-column: span 1; }
	.fare { padding: 18px; }
	.month-split, .pulse-grid, .grid-2, .spots, .grid-3, .journey, .people, .paytabs__panel { grid-template-columns: 1fr; }
	.doc-list { columns: 1; }
	.fleet__stage { min-height: 420px; }
	.footer__grid { grid-template-columns: 1fr; }
	.page-hero { padding: 120px 0 32px; }
	.city::after { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 85%, transparent) 0%, transparent 34%), linear-gradient(0deg, color-mix(in srgb, var(--bg) 60%, transparent), transparent 40%); }
	.city__source { top: auto; bottom: 92px; }
	.counters { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 861px) { .sheet__grab { display: none; } }
@media (max-width: 860px) {
	/* Cu un traseu afișat, titlul se retrage și harta ocupă tot spațiul de deasupra foii */
	.hero__intro h1, .hero__intro .live-badge { transition: opacity var(--dur-3) var(--ease-spatial), transform var(--dur-3) var(--ease-spatial); }
	.has-route .hero__intro h1, .has-route .hero__intro .live-badge { opacity: 0 !important; transform: translateY(-12px); pointer-events: none; }
	.sheet-up .hero__intro h1, .sheet-up .hero__intro .live-badge { display: none; }
}

@media print {
	.topbar, .dock, .island, .city, .hud { display: none !important; }
	body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   Calculator de tarif
   -------------------------------------------------------------------------- */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 28px; border-radius: var(--r-xl); }
.calc h2 { font-size: var(--fs-xl); margin-bottom: 16px; }
.calc-profiles { border: 0; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.calc-profiles legend { font-weight: 700; font-size: var(--fs-sm); margin-bottom: 10px; padding: 0; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--glass-border); background: var(--bg-elev); font-weight: 600; font-size: var(--fs-sm); }
.chip input:checked + span { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip input:focus-visible + span { outline: 3px solid var(--emerald-400); outline-offset: 2px; }
.range { display: grid; gap: 10px; margin-bottom: 18px; font-weight: 700; font-size: var(--fs-sm); }
.range span { display: flex; justify-content: space-between; gap: 10px; }
.range output { font-size: 1.1rem; color: var(--accent-ink); }
.range input { width: 100%; accent-color: var(--emerald-500); height: 32px; }
.calc-out { padding: 22px; border-radius: 20px; background: var(--bg-elev); border: 1px solid var(--glass-border); align-self: start; }
.calc-verdict { font: 600 var(--fs-lg)/1.35 var(--font-display); letter-spacing: -0.02em; }
.calc-verdict b { color: var(--accent-ink); }
.calc-bar { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: var(--fs-sm); }
.calc-bar__track { height: 8px; border-radius: 99px; background: var(--hairline); overflow: hidden; }
.calc-bar__track i { display: block; height: 100%; border-radius: inherit; background: var(--text-3); transition: width var(--dur-3) var(--ease-spatial); }
.calc-bar.is-best { font-weight: 700; }
.calc-bar.is-best .calc-bar__track i { background: var(--emerald-400); box-shadow: 0 0 12px var(--emerald-glow); }
.h3 { font-size: var(--fs-lg); letter-spacing: -0.02em; }
@media (max-width: 860px) {
	.calc { grid-template-columns: 1fr; padding: 20px; }
	.calc-bar { grid-template-columns: 1fr auto; }
	.calc-bar__track { grid-column: 1 / -1; grid-row: 2; }
}

/* Bara de sus primește sticlă după ce începe scroll-ul */
.topbar::before { content: ""; position: absolute; inset: 0 0 -24px; z-index: -1; opacity: 0; pointer-events: none; transition: opacity var(--dur-3); background: linear-gradient(180deg, var(--bg) 40%, color-mix(in srgb, var(--bg) 0%, transparent)); }
.topbar.is-scrolled::before { opacity: 1; }
@media (max-width: 860px) { .city__source { display: none; } }

/* ==========================================================================
   Pagini interioare peste harta 3D
   ========================================================================== */
.city--page { animation: city-in 1.2s var(--ease-spatial) both; }
@keyframes city-in { from { opacity: 0; } }
.city--page::after {
	background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 70%, transparent) 0%, color-mix(in srgb, var(--bg) 20%, transparent) 46%, transparent 64%);
}
.city--dim::after { background: color-mix(in srgb, var(--bg) 55%, transparent); }
.city--heritage::after {
	background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 78%, transparent) 0%, transparent 58%),
		linear-gradient(0deg, var(--bg) 0%, transparent 45%);
}
.city ~ .split .panel, .city ~ .page-body .panel, .city ~ div .page-body .panel {
	background: var(--glass); border-color: var(--glass-border);
	-webkit-backdrop-filter: blur(var(--blur)) saturate(var(--saturate)); backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
	box-shadow: var(--shadow-2);
}
.city ~ .page-hero, .city ~ div > .page-hero { position: relative; z-index: var(--z-content); }

/* Layout hartă + panou lateral (Trasee, Pulsul) */
.split { position: relative; z-index: var(--z-content); padding: 132px var(--gutter) 96px; pointer-events: none; }
.split__panel { width: min(540px, 100%); display: grid; gap: 14px; pointer-events: auto; }
.split__head { padding: 8px 4px 6px; }
.split__head h1 { font-size: var(--fs-2xl); margin-bottom: 12px; }
.split__head p { color: var(--text-2); font-size: var(--fs-lg); margin: 0; }
.split .planner { max-width: none; }
.split .panel h2 { font-size: var(--fs-lg); letter-spacing: -0.02em; margin-bottom: 12px; }
.split .status-hero { padding: 24px; }
.split .status-hero__big { font-size: var(--fs-xl); margin: 0; }
.split .steps li { font-size: var(--fs-sm); }
.with-badge { display: flex; align-items: center; gap: 12px; }
.badges { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; font-size: .78rem; }
.l50__dir .mono.muted { font-size: var(--fs-xs); }

.routes-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.routes-head h2 { margin: 0 !important; }
.field--search { min-height: 50px; margin: 12px 0 10px; }
.field--search input { height: 48px; }
.seg-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--hairline); margin-bottom: 14px; }
.seg-tabs button { min-height: 40px; border: 0; border-radius: 10px; background: transparent; font-weight: 700; font-size: var(--fs-xs); cursor: pointer; color: var(--text-2); }
.seg-tabs button[aria-pressed="true"] { background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow-1); }
.route-group + .route-group { margin-top: 16px; }
.route-group .eyebrow { margin-bottom: 8px; }
.route-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.route-chip { height: 48px; min-width: 0; border: 0; border-radius: 12px; font-size: 1.05rem; cursor: pointer; transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2); }
.route-chip:hover { filter: brightness(1.08); }
.route-chip[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--text); }
.route-chip.line-badge--metro { box-shadow: inset 0 0 0 1.5px var(--glass-border); background: var(--hairline); }
.route-card { padding: 16px; border-radius: 18px; background: var(--hairline); margin-bottom: 16px; animation: island-in var(--dur-3) var(--ease-spatial); }
.route-card__head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-bottom: 8px; }
.route-card__head h3 { font-size: var(--fs-md); letter-spacing: -0.01em; line-height: 1.3; }
.route-card__head .icon-btn { width: 40px; height: 40px; }
.stops--inline { margin-top: 8px; columns: 2; column-gap: 16px; }
.stops--inline::before { display: none; }
.stops--inline li { break-inside: avoid; padding: 5px 0 5px 22px; font-size: var(--fs-sm); }
.stops--inline li::before { top: 10px; width: 11px; height: 11px; border-width: 2.5px; }
.link-arrow { display: inline-flex; align-items: center; min-height: 40px; font-weight: 700; font-size: var(--fs-sm); color: var(--accent-ink); text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }

/* Ghid turistic: hero înalt, cu Palatul Culturii real în dreapta */
.page-hero--tall { min-height: 82svh; display: flex; align-items: flex-end; padding-bottom: 64px; }
.page-hero--tall .wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); }
.page-hero--tall h1 { font-size: var(--fs-hero); max-width: 14ch; line-height: var(--lh-tight); }

/* Portal: cuprins lateral */
.page-hero--portal { padding-bottom: 32px; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 28px 0 0; max-width: 760px; }
.facts div { padding: 16px; border-radius: 16px; background: var(--bg-elev); border: 1px solid var(--glass-border); }
.facts dt { font-size: var(--fs-xs); color: var(--text-3); order: 2; }
.facts dd { margin: 0 0 4px; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; }
.facts div { display: flex; flex-direction: column-reverse; }
.portal-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 32px; align-items: start; }
.portal-aside { position: sticky; top: 132px; display: grid; gap: 16px; }
.portal-aside .portal-nav { flex-direction: column; flex-wrap: nowrap; gap: 2px; margin: 0; padding-left: 12px; border-left: 2px solid var(--hairline); }
.portal-aside .portal-nav a { background: none; border: 0; border-radius: 10px; min-height: 40px; padding: 0 12px; margin-left: -14px; border-left: 2px solid transparent; border-radius: 0 10px 10px 0; color: var(--text-2); }
.portal-aside .portal-nav a:hover { color: var(--text); background: var(--hairline); }
.portal-aside .portal-nav a[aria-current] { color: var(--text); border-left-color: var(--emerald-500); background: var(--hairline); }
.portal-aside__tel { display: grid; padding: 14px 16px; border-radius: 16px; background: var(--bg-elev); border: 1px solid var(--glass-border); text-decoration: none; }
.portal-aside__tel .eyebrow { margin: 0 0 2px; }
.portal-aside__tel .mono { font-weight: 700; font-size: 1.1rem; }

@media (max-width: 1100px) {
	.portal-layout { grid-template-columns: 1fr; }
	.portal-aside { position: static; }
	.portal-aside .portal-nav { flex-direction: row; flex-wrap: wrap; border: 0; padding: 0; gap: 6px; }
	.portal-aside .portal-nav a { margin: 0; border: 1px solid var(--glass-border); border-radius: 99px; background: var(--bg-elev); }
	.portal-aside__tel { display: none; }
}
@media (max-width: 860px) {
	/* Pe telefon, harta rămâne vizibilă sus, iar panourile urcă peste ea la scroll */
	.split { padding: 44svh 12px 110px; }
	.split__head { padding: 18px 18px 14px; border-radius: 24px 24px 0 0; margin-bottom: -14px; background: var(--glass-strong); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); }
	.split__head h1 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
	.city--page::after { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 70%, transparent) 0%, transparent 22%); }
	.city--dim::after { background: color-mix(in srgb, var(--bg) 60%, transparent); }
	.city--heritage::after { background: linear-gradient(0deg, var(--bg) 0%, transparent 60%); }
	.page-hero--tall { min-height: 78svh; padding-bottom: 36px; }
	.facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.stops--inline { columns: 1; }
}

/* ==========================================================================
   Feedback la acțiuni (interaction-design): apăsare 120 ms, toast, încărcare
   Mișcarea neprovocată de utilizator rămâne doar intro-ul hărții și pulsul „live”.
   ========================================================================== */
.btn:active, .pill:active, .icon-btn:active, .route-chip:active, .seg-tabs button:active, .chip input:active + span {
	transform: scale(0.96); transition: transform 120ms var(--ease-spatial);
}
.planner__near .pulse-dot, .alert-row .pulse-dot { animation: none; }
.hotspot { animation-iteration-count: 3; }
.city__source { font-family: var(--font-ui); }
.city__source.is-loading::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; border: 2px solid var(--text-3); border-top-color: transparent; vertical-align: -1px; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.a11y-calm .city__source.is-loading::before { animation: none; }

.toast {
	position: fixed; left: 50%; bottom: 32px; z-index: var(--z-hud); transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
	max-width: min(440px, calc(100% - 32px)); padding: 12px 18px; border-radius: 16px;
	background: #05070b; color: #f5f7fa; font-size: var(--fs-sm); font-weight: 600; box-shadow: 0 16px 40px rgba(0,0,0,.4);
	transition: opacity 240ms var(--ease-spatial), transform 240ms var(--ease-spatial);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 860px) { .toast { bottom: 100px; } }

/* ==========================================================================
   Numere fără tremur: cifre tabulare + lățime rezervată pentru valoarea cea mai lungă.
   Placeholderul (--:--, —) încape în aceeași cutie, deci prima valoare reală nu mută nimic.
   ========================================================================== */
.num, .mono, [data-clock], [data-l50-next], [data-l50-clock], [data-l50], [data-vcount], [data-co2], [data-ring-time], .price {
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
}
[data-clock], [data-l50-next], [data-l50-clock] { display: inline-block; min-width: 5ch; text-align: right; }   /* 00:00 */
[data-vcount] { display: inline-block; min-width: 3ch; text-align: right; }                                    /* 0–999 */
.counter [data-vcount] { text-align: left; }
[data-l50] { display: inline-block; min-width: 6ch; }                                                          /* „29 min” */
[data-co2] { display: inline-block; min-width: 5ch; text-align: right; }                                       /* 12.345 */
/* În panoul lateral, fișa traseului curge normal (regula sticky era pentru vechiul layout pe două coloane) */
.split .route-detail { position: static; }

/* Căutare grupată (Sprint 2) */
.suggest__group { padding: 10px 12px 4px; min-height: 0 !important; font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); cursor: default !important; background: none !important; }
.suggest li[role="option"] { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; }
.suggest__name { font-weight: 600; }
.suggest__meta { grid-column: 2; margin-left: 0 !important; display: flex; flex-wrap: wrap; gap: 3px; font-size: 0.75rem; color: var(--text-3); }
.suggest__meta .line-badge { font-size: 0.72rem; height: 1.5em; min-width: 1.9em; }
.suggest__empty { padding: 12px; color: var(--text-2); font-size: var(--fs-sm); cursor: default !important; background: none !important; }

/* Proximitate (Sprint 2): două stații, sosiri în ≤ 5 min */
.near { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: -4px 0 12px; }
.near__stop { padding: 12px 14px; border-radius: 14px; background: var(--bg-elev); border: 1px solid var(--glass-border); }
.near__head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: var(--fs-sm); }
.near ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-sm); }
.near li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
.near li.muted { display: block; font-size: var(--fs-xs); }
.near__to { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.near__src { grid-column: 1 / -1; margin: 0; font-size: var(--fs-xs); }
@media (max-width: 560px) { .near { grid-template-columns: 1fr; } }

/* Cardul cu stațiile liniei (Sprint 2) */
.tl__dirs { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin: 4px 0 8px; }
.tl__dirs button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; }
.tl__note { font-size: var(--fs-xs); margin: 0 0 8px; }
.tl__alertbox { padding: 10px 12px; border-radius: 12px; background: rgba(255,179,0,.12); border: 1px solid rgba(255,179,0,.4); font-size: var(--fs-sm); }
.tl { list-style: none; margin: 4px 0 12px; padding: 0; --axis: var(--emerald-500); }
.tl--tram { --axis: var(--amber-500); }
.tl__stop { position: relative; min-height: 34px; padding: 0 0 12px 30px; }
.tl__stop::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: -6px; width: 3px; background: var(--axis); border-radius: 2px; }
.tl__stop.is-end::before { display: none; }
.tl__stop::after { content: ""; position: absolute; left: 4px; top: 4px; width: 13px; height: 13px; border-radius: 50%; background: var(--bg-elev); border: 3px solid var(--axis); box-sizing: border-box; }
.tl__stop.is-alert::before { background: repeating-linear-gradient(180deg, var(--amber-500) 0 6px, transparent 6px 10px); }
.tl__name { font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; display: block; }
.tl__alert { display: block; font-size: var(--fs-xs); color: var(--amber-ink); font-weight: 600; margin-top: 2px; }
/* vehiculul stă între stația curentă și următoarea, la fracția --f din segment */
.tl__veh {
	position: absolute; left: -4px; top: calc(10px + var(--f) * 100%); z-index: 1; transform: translateY(-50%);
	display: inline-flex; align-items: center; gap: 4px; min-height: 26px; min-width: 26px; padding: 0 8px 0 6px;
	border-radius: 99px; border: 2px solid var(--bg-elev); background: var(--axis); color: #04140a; font: 700 11px var(--font-ui); cursor: pointer;
	transition: top 900ms var(--ease-spatial);
}
.tl--tram .tl__veh { color: #1a1100; }
.tl__veh-id { letter-spacing: -0.02em; }
.tl__veh.is-stale { background: var(--text-3); color: var(--bg); }
.tl__veh.is-selected { outline: 3px solid var(--text); outline-offset: 2px; animation: pulse 2s var(--ease-inout) infinite; }
.a11y-calm .tl__veh { transition: none; }
.a11y-calm .tl__veh.is-selected { animation: none; }
.tl__stop .tl__veh { margin-left: 0; }
/* pe axă, vehiculul e un cerc; numărul de parc apare doar la cel selectat, ca să nu acopere numele stațiilor */
.tl__veh { left: 0; width: 22px; min-width: 22px; height: 22px; min-height: 22px; padding: 0; justify-content: center; font-size: 10px; }
.tl__veh .tl__veh-id { display: none; }
.tl__veh.is-selected { width: auto; padding: 0 8px; left: -2px; }
.tl__veh.is-selected .tl__veh-id { display: inline; }
.tl__veh::after { content: ""; position: absolute; inset: -11px; } /* țintă de atingere 44 px */
/* vehiculul: cerc plin în culoarea textului, cu inel în culoarea liniei; stațiile rămân cercuri goale */
.tl__veh { background: var(--text); color: var(--bg); border: 3px solid var(--axis); }
.tl--tram .tl__veh { color: var(--bg); }
.tl__dirs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Sprint 3: harta primește click-urile din zonele fără interfață ale hero-ului */
.hero { pointer-events: none; }
.hero .sheet, .hero .live-badge, .hero a, .hero button { pointer-events: auto; }

/* Foaia vehiculului selectat */
.vsheet {
	position: fixed; right: 24px; bottom: 24px; z-index: var(--z-sheet); width: min(380px, calc(100% - 32px));
	padding: 18px; border-radius: var(--r-lg); background: var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: var(--shadow-2);
	-webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur));
	animation: vsheet-in 300ms var(--ease-spatial);
}
@keyframes vsheet-in { from { opacity: 0; transform: translateY(16px); } }
.a11y-calm .vsheet { animation: none; }
.vsheet__head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-bottom: 12px; }
.vsheet__title { font-size: var(--fs-lg); letter-spacing: -0.02em; }
.vsheet__facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 0 10px; }
.vsheet__facts div { padding: 10px 12px; border-radius: 12px; background: var(--hairline); }
.vsheet__facts dt { font-size: var(--fs-xs); color: var(--text-3); }
.vsheet__facts dd { margin: 2px 0 0; font-weight: 700; }
.vsheet__note { font-size: var(--fs-xs); }
.vsheet__actions { margin: 0; }
@media (max-width: 860px) { .vsheet { left: 12px; right: 12px; width: auto; bottom: calc(96px + env(safe-area-inset-bottom)); } }
/* containerele care doar așază conținutul nu prind click-uri: golurile dintre ele aparțin hărții */
.layer { pointer-events: none; }
.layer > section:not(.hero) { pointer-events: auto; }
.hero .sheet { pointer-events: none; }
.hero .sheet > * { pointer-events: auto; }
.hero-bento { transition: opacity var(--dur-3) var(--ease-spatial); }
.has-vehicle .hero-bento { opacity: 0; pointer-events: none; }

/* ==========================================================================
   Sprint 3: indicator magnetic, odometru, bilet dintr-o atingere
   ========================================================================== */
/* Indicatorul magnetic: un singur fundal decupat cu clip-path (fără animarea layout-ului) */
[data-magnetic="on"] { position: relative; isolation: isolate; }
.mag { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: -1; pointer-events: none; contain: strict; background: var(--mag-bg, var(--bg-elev)); box-shadow: var(--shadow-1); transition: transform 280ms cubic-bezier(0.34, 1.3, 0.64, 1), width 280ms cubic-bezier(0.34, 1.3, 0.64, 1), opacity 140ms; }
.paytabs__list { --mag-bg: var(--text); }
.a11y-calm .mag { transition: none; }
/* Opțiunea aleasă își păstrează fundalul real (pentru contrast și instrumente de audit), dar îl primește abia după ce
   indicatorul a alunecat sub ea; cea părăsită îl pierde imediat. Vizual rămâne doar glisarea indicatorului. */
[data-magnetic="on"] button, [data-magnetic="on"] label > span { transition: background-color 0s, box-shadow 0s, color 0s; }
[data-magnetic="on"] [aria-pressed="true"], [data-magnetic="on"] [aria-selected="true"], [data-magnetic="on"] input:checked + span { transition: background-color 0s 240ms, box-shadow 0s 240ms, color 0s 120ms; }
.a11y-calm [data-magnetic="on"] [aria-pressed="true"], .a11y-calm [data-magnetic="on"] [aria-selected="true"], .a11y-calm [data-magnetic="on"] input:checked + span { transition: none; }
[data-magnetic="on"] > :not(.mag) { position: relative; }

/* Odometru: fiecare cifră e o celulă cu înălțimea unui rând; doar cifra schimbată alunecă */
.odo { display: inline-flex; vertical-align: bottom; }
.odo__c { display: inline-block; overflow: clip; height: 1.15em; line-height: 1.15em; position: relative; }
.odo__c > span { display: block; }
.odo__c--roll .odo__old { position: absolute; inset: 0; animation: odo-out 220ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.odo__c--roll .odo__new { animation: odo-in 220ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes odo-out { to { transform: translateY(-100%); } }
@keyframes odo-in { from { transform: translateY(100%); } }

/* Bilet dintr-o atingere */
.onetap { display: grid; gap: 14px; padding: 24px; border-radius: var(--r-xl); margin-bottom: 14px; }
.onetap h2 { font-size: var(--fs-xl); margin-bottom: 12px; }
.onetap__types { border: 0; margin: 0 0 12px; padding: 4px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; border-radius: 16px; background: var(--hairline); }
.onetap__types label { position: relative; }
.onetap__types input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.onetap__types span { display: grid; place-items: center; min-height: 48px; padding: 0 8px; border-radius: 12px; font-weight: 700; font-size: var(--fs-sm); text-align: center; }
.onetap__types input:focus-visible + span { outline: 3px solid var(--emerald-400); outline-offset: 2px; }
.onetap__sum { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.onetap__sum .price { font-size: 2rem; }
.onetap__actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 560px) { .onetap__types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.onetap-dialog { position: fixed; inset: 0; z-index: var(--z-hud); display: grid; place-items: center; padding: 16px; }
.onetap-dialog[hidden] { display: none; }
.onetap-dialog__scrim { position: absolute; inset: 0; background: rgba(5, 7, 11, 0.55); }
.onetap-dialog__panel { position: relative; width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 22px; background: var(--glass-strong); animation: island-in 300ms var(--ease-spatial); }
.onetap-dialog__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.onetap-dialog__head h2 { font-size: var(--fs-lg); }
.onetap-demo__line { display: flex; justify-content: space-between; padding: 14px 0; border-block: 1px solid var(--hairline); margin-bottom: 14px; font-weight: 600; }
.onetap-demo__pay { width: 100%; }
.onetap-demo__wait { display: flex; align-items: center; gap: 12px; min-height: 120px; justify-content: center; }
.onetap-demo__spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--hairline); border-top-color: var(--emerald-400); animation: spin 0.8s linear infinite; }
.a11y-calm .onetap-demo__spin { animation: none; }
.onetap-demo__note { font-size: var(--fs-xs); margin: 12px 0; }

/* Cardul virtual: filigranul face parte din bilet și nu se poate ascunde */
.vticket { position: relative; overflow: hidden; border-radius: 20px; padding: 18px; background: #fff; color: #0b0f17; border: 2px dashed #9b1c1c; }
.vticket::before { content: "DEMONSTRAȚIE  DEMONSTRAȚIE  DEMONSTRAȚIE  DEMONSTRAȚIE  DEMONSTRAȚIE  DEMONSTRAȚIE"; position: absolute; inset: -40% -40%; transform: rotate(-24deg); font: 800 15px/2.4 var(--font-display); color: rgba(155, 28, 28, 0.13); word-spacing: 18px; pointer-events: none; white-space: pre-wrap; }
.vticket__head { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 12px; position: relative; }
.vticket__qr { position: relative; width: 200px; height: 200px; margin: 0 auto 12px; }
.vticket__qr img, .vticket__qr canvas { width: 100% !important; height: 100% !important; }
.vticket__wm { position: absolute; inset: 0; display: grid; place-items: center; transform: rotate(-24deg); font: 800 22px var(--font-display); color: #9b1c1c; background: rgba(255, 255, 255, 0.55); letter-spacing: 0.04em; }
.vticket__facts { display: grid; gap: 4px; margin: 0 0 10px; position: relative; font-size: 0.875rem; }
.vticket__facts div { display: flex; justify-content: space-between; gap: 8px; }
.vticket__facts dt { color: #3b4656; }
.vticket__facts dd { margin: 0; font-weight: 700; }
.vticket__stamp { position: relative; margin: 0; padding: 8px; border-radius: 10px; background: #9b1c1c; color: #fff; text-align: center; font-weight: 800; font-size: 0.875rem; }

/* Bara fixă cu căutare (mobil) */
.topbar__search { display: none; }
@media (max-width: 860px) {
	.is-compact .topbar__search {
		display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 99px;
		border: 1px solid var(--glass-border); background: var(--glass-strong); color: var(--text-2); font-weight: 600; font-size: var(--fs-sm);
		-webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); box-shadow: var(--shadow-1);
		animation: compact-in 240ms var(--ease-spatial);
		position: absolute; left: 60px; right: 128px; top: 10px; justify-content: flex-start; overflow: hidden; white-space: nowrap;
	}
	.is-compact .brand__word { opacity: 0; transition: opacity 240ms; }
	.is-compact .island { opacity: 0; transform: translate(-50%, -8px); pointer-events: none; transition: opacity 240ms, transform 240ms var(--ease-spatial); }
	.a11y-calm .is-compact .topbar__search { animation: none; }
}
@keyframes compact-in { from { opacity: 0; transform: scale(0.92); transform-origin: left center; } }

.onetap__types input:checked + span { background: var(--bg-elev); box-shadow: var(--shadow-1); }

/* Cifrele din fostul font monospace: shorthand-ul `font` resetează varianta, deci tnum se repune aici */
.result__time, .price, .l50__dir b, .ring__center b, .counter b, .co2__num, .news time, .fare__tag, .journey__step::before, .steps li::before {
	font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ---------- Ierarhia primei pagini (Sprintul 4) ----------
   Pulsul e singurul capitol cu titlu --fs-2xl; Biletele sunt bandă, Flota și Turistic sunt teasere. */
.section--lead .status-hero__big { font-size: var(--fs-2xl); }
.section--band, .section--teaser { padding: var(--sp-8) 0; }
.section--band .section__head h2, .teaser__text h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.section--band .section__head p, .teaser__text p { font-size: var(--fs-md); color: var(--text-2); }
.section__head--row { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.section__head--row p { margin: 0; }

.teaser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-rows: auto 1fr; gap: var(--sp-4) var(--sp-5); align-items: start; }
.teaser__text { display: flex; flex-direction: column; gap: var(--sp-3); }
.teaser__text > * { margin: 0; }
/* fleet.php rămâne neschimbat: în teaser, info-ul trece sub text, iar scena ocupă coloana din dreapta */
.teaser .fleet { display: contents; }
.teaser .fleet__info { grid-column: 1; padding: var(--sp-4); gap: var(--sp-2); }
.teaser .fleet__info h3 { font-size: var(--fs-lg); }
.teaser .fleet__info p { font-size: var(--fs-sm); margin: 0; }
.teaser .fleet__stage { grid-column: 2; grid-row: 1 / span 2; min-height: 300px; height: 100%; }
.teaser--photo { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: auto; align-items: center; }
.teaser--photo .photo-band { aspect-ratio: 16 / 9; margin: 0; }
.co2-inline { font-size: var(--fs-sm); }
.co2-inline b { font: 700 var(--fs-xl)/1 var(--font-display); color: var(--accent-ink); margin-right: 4px; font-variant-numeric: tabular-nums; }
.co2-inline .muted { display: block; font-size: var(--fs-xs); margin-top: 4px; }

@media (max-width: 860px) {
	.teaser, .teaser--photo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
	.teaser .fleet__info, .teaser .fleet__stage { grid-column: 1; grid-row: auto; }
	.teaser .fleet__stage { min-height: 280px; }
	.section--band, .section--teaser { padding: var(--sp-7) 0; }
}

/* Pictograme (ctp_pic / lib/icons.js): moștenesc culoarea textului, aliniate pe rândul de text */
.pic { flex: none; vertical-align: -0.2em; }
.pill .pic { margin-right: 2px; }
.suggest__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--hairline); color: var(--text-2); }
.tl__alert .pic, .tl__alertbox .pic { color: var(--amber-ink); }

/* Mobil: căutarea intră în primul ecran (juriu, corectura 2). Titlul mai compact, harta rămâne vizibilă
   între bară și foaie, iar câmpurile De la / Până la urcă deasupra blocului „Află ce vine în stația ta”. */
@media (max-width: 860px) {
	.hero__intro { min-height: 40svh; padding-top: 116px; }
	.hero h1 { font-size: clamp(1.9rem, 8.2vw, 2.6rem); }
	.sheet .planner { display: flex; flex-direction: column; }
	.sheet .planner__fields { order: -1; margin-bottom: 12px; }
}

/* Primul cadru (juriu, corectura 1): afișul randat al hărții, apoi canvasul viu apare peste el.
   Afișele sunt randate din aceeași scenă și același cadru („overview”), deci trecerea nu sare. */
.city--poster { background: var(--map-fog) url("../img/harta/harta-dark-desk.webp") center / cover no-repeat; }
[data-theme="light"] .city--poster { background-image: url("../img/harta/harta-light-desk.webp"); }
@media (max-aspect-ratio: 6/5) {
	.city--poster { background-image: url("../img/harta/harta-dark-mob.webp"); }
	[data-theme="light"] .city--poster { background-image: url("../img/harta/harta-light-mob.webp"); }
}
.city--poster > canvas { opacity: 0; transition: opacity 0.9s var(--ease-spatial); }
.city--poster.is-live > canvas { opacity: 1; }
.city--poster.is-flat, .a11y-simple .city--poster, .a11y-calm .city--poster { background-image: none; }

/* ---------- Afișul rețelei de tramvai (secțiunea-semnătură) ---------- */
.np__poster { margin: 0; border-radius: var(--r-xl); background: var(--np-paper); border: 1px solid var(--glass-border); padding: clamp(12px, 3vw, 40px); overflow: hidden; }
:root { --np-paper: #0d121c; --np-wire: #ffb300; --np-ink: #f5f7fa; }
[data-theme="light"] { --np-paper: #fbf8f1; --np-wire: #d98a00; --np-ink: #0b0f17; }
.a11y-sun { --np-paper: #fff; --np-wire: #8a5a00; --np-ink: #000; }
.np__svg { display: block; width: 100%; height: auto; max-height: 78vh; }
.np__case path { fill: none; stroke: var(--np-paper); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.np__wires path { fill: none; stroke: var(--np-wire); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; transition: opacity var(--dur-2) var(--ease-spatial), stroke-width var(--dur-2) var(--ease-spatial); }
.np__stations circle { fill: var(--np-paper); stroke: var(--np-ink); stroke-width: 3; }
.np__labels text { font: 600 17px var(--font-ui); fill: var(--np-ink); paint-order: stroke; stroke: var(--np-paper); stroke-width: 5px; stroke-linejoin: round; }
.np__badge rect { fill: var(--np-wire); }
.np__badge text { font-family: var(--font-display); font-weight: 700; fill: #1a1100; stroke: none; text-anchor: middle; font-feature-settings: "tnum" 1; }
.np__veh circle { fill: var(--np-ink); stroke: var(--np-paper); stroke-width: 2.5; transition: cx 1s linear, cy 1s linear; }
.np__svg.is-estimate .np__veh circle { fill: var(--np-paper); stroke: var(--np-ink); }
.np__svg.has-pick .np__wires path:not(.is-pick), .np__svg.has-pick .np__badge:not(.is-pick) { opacity: 0.14; }
.np__svg.has-pick .np__wires path.is-pick { stroke-width: 7; }
.np__caption { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-2); }
.np__live { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.np__lines { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; }
.np__lines a { display: flex; gap: 12px; align-items: center; min-height: 48px; padding: 8px 12px; border-radius: 14px; text-decoration: none; color: var(--text); background: var(--hairline); }
.np__lines a:hover, .np__lines a:focus-visible { background: var(--glass-strong); }
.np__lines b { flex: none; display: grid; place-items: center; min-width: 34px; height: 30px; border-radius: 9px; background: var(--amber-500); color: #1a1100; font: 700 var(--fs-sm) var(--font-display); }
.np__lines span { font-size: var(--fs-sm); color: var(--text-2); }
.np .section__head h2 { font-size: var(--fs-xl); }
@media (max-width: 640px) {
	.np__labels text { font-size: 30px; stroke-width: 8px; }
	.np__wires path { stroke-width: 7; }
	.np__case path { stroke-width: 13; }
	.np__stations circle { stroke-width: 4.5; }
	.np__poster { padding: 8px; }
}

/* Comutatorul de limbă (RO / EN) din bara de sus */
.lang-link { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border-radius: var(--r-pill); font: 700 var(--fs-xs) var(--font-display); letter-spacing: 0.04em; text-decoration: none; color: var(--text-2); background: var(--glass); border: 1px solid var(--glass-border); }
.lang-link:hover { color: var(--text); background: var(--glass-strong); }

/* Ghidul turistic: RO / EN sunt linkuri către cele două adrese (limba vine din URL) */
.lang-toggle a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 52px; border-radius: 10px; font-weight: 700; color: inherit; text-decoration: none; position: relative; z-index: 1; }
.lang-toggle a[aria-current="true"] { background: var(--bg-elev); box-shadow: var(--shadow-1); }