/* ==========================================================================
   Cotele Dunării — componentele de măsură.
   Stilul cadrului de pagină stă în temă; aici e doar aparatul.
   ========================================================================== */

:root {
	--abis:    #071a2f;
	--adanc:   #0b2c4d;
	--fluviu:  #0e4f9e;
	--mira:    #1b8fd6;
	--spuma:   #7fd4ef;
	--hartie:  #f2f6fa;
	--alb:     #ffffff;

	--atentie: #e8a33d;
	--pericol: #d64545;

	--linie:   rgba(7, 26, 47, 0.14);
	--linie-fina: rgba(7, 26, 47, 0.07);
	--stins:   rgba(7, 26, 47, 0.55);

	--cifre: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	--text:  "Archivo", "Helvetica Neue", Arial, sans-serif;
}

/* ————————————————————————— profilul Dunării ————————————————————————— */

.cd-profil {
	margin: 0;
	color: var(--abis);
}

.cd-profil__cap {
	max-width: 62ch;
	margin-bottom: clamp(18px, 3vw, 34px);
}

.cd-profil__titlu {
	font-family: var(--text);
	font-size: clamp(1.55rem, 3.4vw, 2.7rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 0.5rem;
	text-wrap: balance;
}

.cd-profil__sub {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--stins);
}

.cd-profil[data-tone="alerta"] .cd-profil__titlu { color: var(--pericol); }

.cd-profil__cadru {
	position: relative;
	border-top: 1px solid var(--linie);
	border-bottom: 1px solid var(--linie);
	padding: 6px 0 0;
}

.cd-profil__grafic {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.cd-profil__zero {
	stroke: var(--abis);
	stroke-width: 1;
	stroke-dasharray: 2 4;
	opacity: 0.45;
}

.cd-profil__tija {
	stroke: var(--linie-fina);
	stroke-width: 1;
}

.cd-profil__linie {
	fill: none;
	stroke: var(--fluviu);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cd-statie__punct {
	fill: var(--alb);
	stroke: var(--fluviu);
	stroke-width: 2;
}

.cd-statie--atentie .cd-statie__punct,
.cd-statie--inundatie .cd-statie__punct { stroke: var(--atentie); r: 5; }
.cd-statie--pericol .cd-statie__punct { stroke: var(--pericol); r: 5.5; }

.cd-statie__delta {
	font-family: var(--cifre);
	font-size: 12.5px;
	font-weight: 500;
	text-anchor: middle;
	fill: var(--fluviu);
	font-variant-numeric: tabular-nums;
	paint-order: stroke;
	stroke: var(--alb);
	stroke-width: 4px;
	stroke-linejoin: round;
}

.cd-statie__nume {
	font-family: var(--text);
	font-size: 11px;
	fill: var(--stins);
	text-anchor: start;
	letter-spacing: 0.01em;
}

.cd-statie:hover .cd-statie__nume { fill: var(--abis); }
.cd-statie:hover .cd-statie__punct { fill: var(--spuma); }

.cd-profil__km,
.cd-profil__ax {
	font-family: var(--cifre);
	font-size: 10.5px;
	fill: var(--stins);
	letter-spacing: 0.04em;
}

.cd-profil__ax { font-family: var(--text); font-size: 10.5px; opacity: 0.7; }
.cd-profil__km--dr { text-anchor: end; }

/* Lista de stații: singura formă pe ecran mic, referință pe ecran mare. */

.cd-profil__lista {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: 1px;
	background: var(--linie-fina);
	border: 1px solid var(--linie-fina);
}

.cd-miraset {
	background: var(--alb);
	padding: 9px 11px;
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.cd-miraset__nume {
	flex: 1 1 auto;
	font-size: 0.78rem;
	line-height: 1.2;
	color: var(--stins);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cd-miraset__cota {
	font-family: var(--cifre);
	font-size: 0.95rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--abis);
}

.cd-miraset__cota small {
	font-size: 0.62em;
	margin-left: 1px;
	opacity: 0.5;
}

.cd-miraset__delta {
	font-family: var(--cifre);
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
	min-width: 2.4em;
	text-align: right;
}

.cd-miraset--up .cd-miraset__delta { color: var(--fluviu); }
.cd-miraset--down .cd-miraset__delta { color: var(--stins); }
.cd-miraset--flat .cd-miraset__delta { color: rgba(7, 26, 47, 0.3); }

/* ————————————————————————— topul subiectelor ———————————————————————— */

.cd-top { color: var(--abis); }

.cd-top__cap { max-width: 62ch; margin-bottom: clamp(16px, 2.6vw, 28px); }

.cd-top__titlu {
	font-size: clamp(1.3rem, 2.4vw, 1.85rem);
	font-weight: 600;
	letter-spacing: -0.015em;
	margin: 0 0 0.4rem;
}

.cd-top__ora {
	font-family: var(--cifre);
	font-variant-numeric: tabular-nums;
	color: var(--fluviu);
}

.cd-top__sub {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--stins);
}

.cd-top__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--linie);
}

.cd-subiect {
	display: grid;
	grid-template-columns: 58px 30px minmax(0, 1fr) 132px;
	gap: 18px;
	align-items: start;
	padding: 22px 0;
	border-bottom: 1px solid var(--linie-fina);
}

.cd-subiect:last-child { border-bottom: 1px solid var(--linie); }

.cd-subiect__rang { text-align: right; padding-top: 2px; }

.cd-subiect__cifra {
	display: block;
	font-family: var(--cifre);
	font-size: 2.5rem;
	font-weight: 300;
	line-height: 0.85;
	font-variant-numeric: tabular-nums;
	color: var(--fluviu);
}

.cd-subiect__variatie {
	display: block;
	margin-top: 6px;
	font-family: var(--cifre);
	font-size: 0.7rem;
	letter-spacing: 0.02em;
}

.cd-subiect__variatie--urca { color: var(--fluviu); }
.cd-subiect__variatie--coboara { color: rgba(7, 26, 47, 0.4); }
.cd-subiect__variatie--nou { color: var(--mira); }

/* Mira: bara verticală gradată, cu apa la nivelul scorului. */

.cd-subiect__mira {
	position: relative;
	height: 100%;
	min-height: 96px;
	background:
		repeating-linear-gradient(
			to top,
			color-mix(in srgb, var(--stins) 34%, transparent) 0 1px,
			transparent 1px 12px
		),
		var(--hartie);
	border: 1px solid var(--linie);
	overflow: hidden;
}

.cd-subiect__apa {
	position: absolute;
	inset: auto 0 0 0;
	height: calc(var(--nivel, 0.5) * 100%);
	background: linear-gradient(to bottom, var(--mira), var(--fluviu));
	transition: height 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cd-subiect__apa::before {
	content: "";
	position: absolute;
	inset: -1px 0 auto 0;
	height: 3px;
	background: var(--spuma);
}

.cd-subiect__corp { min-width: 0; }

.cd-subiect__eticheta {
	margin: 0 0 0.45rem;
	font-size: clamp(1.02rem, 1.7vw, 1.32rem);
	font-weight: 500;
	line-height: 1.28;
	letter-spacing: -0.011em;
	max-width: 46ch;
	text-wrap: pretty;
}

.cd-subiect__eticheta a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	text-decoration-color: color-mix(in srgb, var(--fluviu) 45%, transparent);
	transition: text-decoration-color 160ms ease;
}

.cd-subiect__eticheta a:hover,
.cd-subiect__eticheta a:focus-visible {
	text-decoration-color: var(--fluviu);
}

.cd-subiect__cifre {
	margin: 0 0 0.6rem;
	font-size: 0.84rem;
	color: var(--stins);
	font-variant-numeric: tabular-nums;
}

.cd-eticheta--preluare {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border: 1px solid var(--linie);
	border-radius: 2px;
	font-size: 0.72rem;
	color: var(--adanc);
	background: var(--hartie);
}

.cd-subiect__surse {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
	margin: 0 0 0.55rem;
	padding: 0;
}

.cd-subiect__surse li {
	font-family: var(--cifre);
	font-size: 0.69rem;
	line-height: 1;
	padding: 4px 6px;
	color: var(--adanc);
	background: var(--hartie);
	border: 1px solid var(--linie-fina);
}

.cd-subiect__surse-rest { color: var(--stins) !important; background: transparent !important; border-style: dashed !important; }

.cd-subiect__articole summary {
	cursor: pointer;
	font-size: 0.82rem;
	color: var(--fluviu);
	width: fit-content;
}

.cd-subiect__articole[open] summary { margin-bottom: 0.5rem; }

.cd-subiect__articole ul {
	list-style: none;
	margin: 0;
	padding: 0 0 0 14px;
	border-left: 2px solid var(--linie-fina);
}

.cd-subiect__articole li { margin-bottom: 0.42rem; font-size: 0.86rem; line-height: 1.4; }
.cd-subiect__articole a { color: var(--adanc); text-decoration: none; border-bottom: 1px solid var(--linie); }
.cd-subiect__articole a:hover { border-bottom-color: var(--fluviu); }

.cd-subiect__sursa {
	font-family: var(--cifre);
	font-size: 0.68rem;
	color: var(--stins);
	margin-left: 6px;
}

.cd-subiect__istoric { padding-top: 4px; }

.cd-spark { display: block; width: 132px; height: 44px; }
.cd-spark__bara { fill: color-mix(in srgb, var(--stins) 32%, transparent); }
.cd-spark__bara--sus { fill: var(--mira); }

.cd-subiect__istoric-eticheta {
	display: block;
	margin-top: 5px;
	font-family: var(--cifre);
	font-size: 0.66rem;
	color: var(--stins);
}

.cd-subiect--preluare .cd-subiect__cifra { color: var(--stins); }

.cd-subiect--mutat .cd-subiect__cifra,
.cd-subiect--intrat .cd-subiect__cifra { animation: cd-puls 1.6s ease-out 1; }

@keyframes cd-puls {
	0%   { color: var(--spuma); }
	100% { color: var(--fluviu); }
}

/* ————————————————————————————— coborâte ————————————————————————————— */

.cd-coborate {
	margin-top: clamp(24px, 4vw, 44px);
	padding-top: 18px;
	border-top: 1px solid var(--linie);
}

.cd-coborate__titlu {
	margin: 0 0 0.7rem;
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--stins);
}

.cd-coborate__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.cd-coborate__lista li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 0.88rem;
	color: var(--stins);
	padding-bottom: 6px;
	border-bottom: 1px dotted var(--linie-fina);
}

.cd-coborate__eticheta { color: var(--adanc); }

.cd-coborate__urma {
	flex: 0 0 auto;
	font-family: var(--cifre);
	font-size: 0.76rem;
	white-space: nowrap;
}

/* ————————————————————————————— gol / eroare ————————————————————————— */

.cd-top--gol,
.cd-profil--gol {
	padding: 26px;
	border: 1px dashed var(--linie);
	color: var(--stins);
	background: var(--hartie);
}

.cd-top--gol p,
.cd-profil--gol p { margin: 0; max-width: 50ch; }

/* ————————————————————————————— ecran mic ———————————————————————————— */

@media (max-width: 860px) {
	.cd-profil__cadru { display: none; }
	.cd-profil__lista { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }

	.cd-subiect {
		grid-template-columns: 44px 22px minmax(0, 1fr);
		gap: 12px;
		padding: 18px 0;
	}

	.cd-subiect__cifra { font-size: 1.9rem; }
	.cd-subiect__istoric { grid-column: 3; padding-top: 8px; }
	.cd-spark { width: 100%; max-width: 200px; }
	.cd-subiect__mira { min-height: 70px; }
}

@media (prefers-reduced-motion: reduce) {
	.cd-subiect__apa { transition: none; }
	.cd-subiect--mutat .cd-subiect__cifra,
	.cd-subiect--intrat .cd-subiect__cifra { animation: none; }
}