/* CV Water Dashboards — clean, graphical, light theme.
   Uses an external stylesheet (per server branding plan) so a global
   header/footer pass can restyle without touching markup. */

.cvwd-root {
	--cvwd-accent: #2563eb;
	--cvwd-ink: #0f172a;
	--cvwd-muted: #64748b;
	--cvwd-line: #e2e8f0;
	--cvwd-card: #ffffff;
	--cvwd-bg: #f8fafc;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--cvwd-ink);
	background: var(--cvwd-bg);
	border: 1px solid var(--cvwd-line);
	border-radius: 18px;
	padding: 20px;
	box-sizing: border-box;
}

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

.cvwd-loading {
	padding: 48px 0;
	text-align: center;
	color: var(--cvwd-muted);
	font-size: 15px;
}

/* Header + group selector pills */
.cvwd-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}
.cvwd-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.cvwd-sub { margin: 2px 0 0; font-size: 13px; color: var(--cvwd-muted); }

.cvwd-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cvwd-pill {
	border: 1px solid var(--cvwd-line);
	background: var(--cvwd-card);
	color: var(--cvwd-muted);
	font-size: 13px;
	font-weight: 600;
	padding: 7px 14px;
	border-radius: 999px;
	cursor: pointer;
	transition: all .15s ease;
	line-height: 1;
}
.cvwd-pill:hover { color: var(--cvwd-ink); transform: translateY(-1px); }
.cvwd-pill.is-active {
	color: #fff;
	border-color: transparent;
	box-shadow: 0 4px 14px rgba(15, 23, 42, .14);
}

/* Stat strip */
.cvwd-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin-bottom: 16px;
}
.cvwd-stat {
	background: var(--cvwd-card);
	border: 1px solid var(--cvwd-line);
	border-radius: 14px;
	padding: 14px 16px;
}
.cvwd-stat .v { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.cvwd-stat .l { font-size: 12px; color: var(--cvwd-muted); margin-top: 2px; }

/* Gauge grid */
.cvwd-gauges {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 14px;
	margin-bottom: 18px;
}
.cvwd-gauge {
	background: var(--cvwd-card);
	border: 1px solid var(--cvwd-line);
	border-radius: 16px;
	padding: 16px 14px 12px;
	text-align: center;
	position: relative;
	transition: box-shadow .15s ease, transform .15s ease;
}
.cvwd-gauge:hover { box-shadow: 0 8px 24px rgba(15,23,42,.08); transform: translateY(-2px); }
.cvwd-gauge .name { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.cvwd-gauge .canvas-wrap { position: relative; height: 96px; }
.cvwd-gauge .reading {
	position: absolute;
	left: 0; right: 0; bottom: 6px;
	font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
}
.cvwd-gauge .reading small { display: block; font-size: 11px; font-weight: 500; color: var(--cvwd-muted); }
.cvwd-gauge .sub { font-size: 11px; color: var(--cvwd-muted); margin-top: 6px; }

/* Map */
.cvwd-map-wrap {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--cvwd-line);
}
.cvwd-map { width: 100%; }
.cvwd-layers {
	position: absolute;
	top: 12px; right: 12px;
	z-index: 500;
	background: rgba(255,255,255,.94);
	backdrop-filter: blur(6px);
	border: 1px solid var(--cvwd-line);
	border-radius: 12px;
	padding: 8px 10px;
	font-size: 12px;
	box-shadow: 0 6px 18px rgba(15,23,42,.10);
}
.cvwd-layers label { display: flex; align-items: center; gap: 7px; padding: 3px 0; cursor: pointer; color: var(--cvwd-ink); }
.cvwd-layers input { accent-color: var(--cvwd-accent); }
.cvwd-layers .future { color: var(--cvwd-muted); cursor: not-allowed; }
.cvwd-layers .future input { pointer-events: none; }

/* Leaflet marker bubbles */
.cvwd-marker {
	border-radius: 50%;
	border: 2.5px solid #fff;
	box-shadow: 0 2px 6px rgba(15,23,42,.35);
}
.cvwd-pop { font: 13px/1.4 -apple-system, "Segoe UI", Roboto, sans-serif; }
.cvwd-pop b { font-size: 14px; }
.cvwd-pop .row { display:flex; justify-content:space-between; gap:14px; margin-top:3px; }
.cvwd-pop .row span:last-child { font-weight:600; }

.cvwd-foot { margin-top: 12px; font-size: 11px; color: var(--cvwd-muted); text-align: right; }

@media (max-width: 600px) {
	.cvwd-root { padding: 14px; border-radius: 14px; }
	.cvwd-title { font-size: 18px; }
}

/* ===== Animated pumps layer (concept) ===== */

.cvwd-interstitial {
	position: absolute;
	inset: 0;
	z-index: 800;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: radial-gradient(120% 120% at 50% 40%, rgba(241,245,249,.86), rgba(203,213,225,.92));
	backdrop-filter: blur(2px);
	animation: cvwd-fade-in .35s ease both;
}
.cvwd-interstitial.out { animation: cvwd-fade-out .45s ease both; }
.cvwd-inter-scene { position: relative; width: 210px; height: 110px; display:flex; align-items:flex-end; justify-content:center; }
.cvwd-inter-caption { text-align:center; font-weight:700; font-size:18px; color:#0f172a; letter-spacing:-.01em; }
.cvwd-inter-caption small { display:block; font-weight:500; font-size:12px; color:#64748b; margin-top:2px; }
.cvwd-waterpump.inter { position: relative; z-index: 2; filter: drop-shadow(0 6px 8px rgba(15,23,42,.18)); }

.cvwd-dustcloud {
	position:absolute; bottom:14px;
	width:42px; height:42px; border-radius:50%;
	background: radial-gradient(circle at 40% 40%, #fef3c7, #d6c1a3);
	opacity:0; filter: blur(2px);
}
.cvwd-dustcloud.d1 { left:38px; animation: cvwd-puff 1.6s ease-out .15s infinite; }
.cvwd-dustcloud.d2 { left:74px; width:54px; height:54px; animation: cvwd-puff 1.6s ease-out .45s infinite; }
.cvwd-dustcloud.d3 { left:114px; animation: cvwd-puff 1.6s ease-out .75s infinite; }
.cvwd-dustcloud.d4 { left:96px; width:34px; height:34px; animation: cvwd-puff 1.6s ease-out .9s infinite; }
@keyframes cvwd-puff {
	0%   { opacity:0; transform: translateY(0) scale(.4); }
	30%  { opacity:.9; }
	100% { opacity:0; transform: translateY(-30px) scale(1.5); }
}
@keyframes cvwd-fade-in  { from{opacity:0} to{opacity:1} }
@keyframes cvwd-fade-out { from{opacity:1} to{opacity:0} }

/* Water spurting from the discharge */
.cvwd-wp-flow .drop { opacity:0; animation: cvwd-spurt 1.05s ease-out infinite; }
.cvwd-wp-flow .drop.d2 { animation-delay: .35s; }
@keyframes cvwd-spurt {
	0%   { opacity:0; transform: translate(0,0); }
	25%  { opacity:.95; }
	100% { opacity:0; transform: translate(7px,-7px); }
}

/* Pump markers dropping onto the map */
.cvwd-pump-icon { background: none; border: none; }
.cvwd-pump { position: relative; transform-origin: bottom center; animation: cvwd-drop .55s cubic-bezier(.2,1.4,.4,1) both; }
.cvwd-pump.leaving { animation: cvwd-lift .24s ease-in forwards; }
.cvwd-pump .cvwd-waterpump { display:block; filter: drop-shadow(0 4px 5px rgba(15,23,42,.30)); }
.cvwd-pump.is-proposed .cvwd-waterpump { opacity:.92; }
.cvwd-pump.is-proposed { filter: saturate(.9); }
@keyframes cvwd-drop {
	0%   { transform: translateY(-46px) scale(.6); opacity:0; }
	60%  { opacity:1; }
	80%  { transform: translateY(3px) scale(1.04); }
	100% { transform: translateY(0) scale(1); opacity:1; }
}
@keyframes cvwd-lift { to { transform: translateY(-30px) scale(.5); opacity:0; } }

/* Landing dust puff under each pump */
.cvwd-pump .cvwd-pump-dust {
	position:absolute; left:-3px; bottom:-4px;
	width:30px; height:18px; border-radius:50%;
	background: radial-gradient(circle at 50% 60%, rgba(214,193,163,.95), rgba(214,193,163,0));
	opacity:0; animation: cvwd-landdust .7s ease-out .42s 1;
}
@keyframes cvwd-landdust {
	0%   { opacity:0; transform: scale(.3); }
	35%  { opacity:.95; }
	100% { opacity:0; transform: scale(2.1) translateY(-4px); }
}

/* Pump label badge */
.cvwd-pump-badge {
	position:absolute; top:-6px; left:50%; transform: translateX(-50%);
	white-space:nowrap; font: 600 10px/1 -apple-system,"Segoe UI",Roboto,sans-serif;
	background:#fff; color:#0f172a; padding:3px 7px; border-radius:999px;
	border:1.5px solid #0891b2; box-shadow:0 2px 5px rgba(15,23,42,.18);
	opacity:0; animation: cvwd-badge-in .4s ease .5s both;
}
.cvwd-pump.is-proposed .cvwd-pump-badge { border-style: dashed; color:#475569; }
@keyframes cvwd-badge-in { from{opacity:0; transform:translate(-50%,4px);} to{opacity:1; transform:translate(-50%,0);} }

@media (prefers-reduced-motion: reduce) {
	.cvwd-dustcloud, .cvwd-pump, .cvwd-pump .cvwd-pump-dust, .cvwd-wp-flow .drop { animation: none !important; }
	.cvwd-pump { opacity:1; }
}

/* ===== Custom marker image icons ===== */
.cvwd-marker-img {
	display:block; width:46px; height:auto;
	filter: drop-shadow(0 4px 5px rgba(15,23,42,.30));
	pointer-events:none;
}

/* ===== Flow-meter (stream-gauging) layer ===== */
.cvwd-flow-icon { background:none; border:none; }
.cvwd-flow { position:relative; transform-origin:bottom center; animation: cvwd-drop .55s cubic-bezier(.2,1.4,.4,1) both; }
.cvwd-flow.leaving { animation: cvwd-lift .24s ease-in forwards; }
.cvwd-flow .cvwd-flowmeter { display:block; filter: drop-shadow(0 4px 5px rgba(15,23,42,.30)); }
.cvwd-flow.is-proposed { filter: saturate(.9); }
.cvwd-flow.is-proposed .cvwd-flow-badge { border-style: dashed; color:#475569; }

.cvwd-flow .cvwd-flow-dust {
	position:absolute; left:-3px; bottom:-4px;
	width:30px; height:18px; border-radius:50%;
	background: radial-gradient(circle at 50% 60%, rgba(214,193,163,.95), rgba(214,193,163,0));
	opacity:0; animation: cvwd-landdust .7s ease-out .42s 1;
}
.cvwd-flow .cvwd-flow-ripple {
	position:absolute; left:50%; bottom:-2px;
	width:12px; height:7px; border-radius:50%;
	border:2px solid rgba(56,189,248,.85);
	transform: translateX(-50%) scale(.4); opacity:0;
	animation: cvwd-ripple .8s ease-out .42s 1;
}
@keyframes cvwd-ripple {
	0%   { opacity:0; transform: translateX(-50%) scale(.3); }
	30%  { opacity:.9; }
	100% { opacity:0; transform: translateX(-50%) scale(3); }
}
.cvwd-fm-wave { transform-box: fill-box; }
@keyframes cvwd-fmwave { from { transform: translateX(0); } to { transform: translateX(-8px); } }
@keyframes cvwd-fmpulse { 0%,100% { opacity:.5; } 50% { opacity:1; } }

.cvwd-flow-badge {
	position:absolute; top:-6px; left:50%; transform: translateX(-50%);
	white-space:nowrap; font: 600 10px/1 -apple-system,"Segoe UI",Roboto,sans-serif;
	background:#fff; color:#0f172a; padding:3px 7px; border-radius:999px;
	border:1.5px solid #0891b2; box-shadow:0 2px 5px rgba(15,23,42,.18);
	opacity:0; animation: cvwd-badge-in .4s ease .5s both;
}

@media (prefers-reduced-motion: reduce) {
	.cvwd-flow, .cvwd-flow .cvwd-flow-dust, .cvwd-flow .cvwd-flow-ripple { animation: none !important; }
	.cvwd-flow { opacity:1; }
}

/* ===== Image / sprite-driven interstitial ===== */
.cvwd-inter-img { display:block; max-width:220px; max-height:140px; height:auto; filter: drop-shadow(0 6px 8px rgba(15,23,42,.18)); }
.cvwd-sprite { background-repeat:no-repeat; background-position:0 0; image-rendering:auto; }
@keyframes cvwd-sprite { to { background-position-x:100%; } }
@media (prefers-reduced-motion: reduce) { .cvwd-sprite { animation:none !important; } }

/* ===== Placement dust-cloud GIF (rendered atop the icon, any item type) ===== */
.cvwd-effect {
	position:absolute; left:50%; top:50%;
	transform: translate(-50%, -58%);
	pointer-events:none; z-index:6;
	animation-name: cvwd-effect-fade; animation-timing-function: ease; animation-fill-mode: forwards;
}
@keyframes cvwd-effect-fade { 0%{opacity:0;} 12%{opacity:1;} 78%{opacity:1;} 100%{opacity:0;} }

/* ===== Placed (click-to-place) items ===== */
.cvwd-place-icon { background:none; border:none; }
.cvwd-place { position:relative; transform-origin:bottom center; animation: cvwd-drop .55s cubic-bezier(.2,1.4,.4,1) both; }
.cvwd-place.leaving { animation: cvwd-lift .24s ease-in forwards; }
.cvwd-place .cvwd-disc { display:block; width:26px; height:26px; border-radius:50%; border:2.5px solid #fff; box-shadow:0 2px 6px rgba(15,23,42,.35); }
.cvwd-place .cvwd-pump-dust {
	position:absolute; left:50%; bottom:-4px; transform:translateX(-50%);
	width:28px; height:16px; border-radius:50%;
	background: radial-gradient(circle at 50% 60%, rgba(214,193,163,.95), rgba(214,193,163,0));
	opacity:0; animation: cvwd-landdust .7s ease-out .42s 1;
}
.cvwd-place-badge {
	position:absolute; top:-6px; left:50%; transform: translateX(-50%);
	white-space:nowrap; font: 600 10px/1 -apple-system,"Segoe UI",Roboto,sans-serif;
	background:#fff; color:#0f172a; padding:3px 7px; border-radius:999px;
	border:1.5px solid #475569; box-shadow:0 2px 5px rgba(15,23,42,.18);
	opacity:0; animation: cvwd-badge-in .4s ease .5s both;
}
@media (prefers-reduced-motion: reduce) {
	.cvwd-effect, .cvwd-place, .cvwd-place .cvwd-pump-dust { animation: none !important; }
	.cvwd-place { opacity:1; }
	.cvwd-effect { opacity:1; }
}

/* ===== Gauge sections: reservoirs vs pumps/flows (differentiated + separated) ===== */
.cvwd-gauge-zones { margin-bottom: 18px; }
.cvwd-gauge-section { margin: 0; }
.cvwd-gauge-section.is-flow-section {
	margin-top: 18px; padding-top: 16px;
	border-top: 1px dashed var(--cvwd-line);   /* physical separation */
}
.cvwd-gauge-head {
	display:flex; align-items:center; gap:8px;
	margin: 0 2px 10px; font-size:12px; font-weight:700;
	letter-spacing:.05em; text-transform:uppercase; color:var(--cvwd-muted);
}
.cvwd-gauge-head .chip { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.is-res-section  .cvwd-gauge-head .chip { background:#0891b2; }
.is-flow-section .cvwd-gauge-head .chip { background:#6366f1; }
.cvwd-gauge-head .count {
	margin-left:auto; font-weight:600; font-size:11px; letter-spacing:0;
	color:var(--cvwd-muted); background:var(--cvwd-card);
	border:1px solid var(--cvwd-line); border-radius:999px; padding:1px 9px;
}

/* Pump / flow cards read distinctly from reservoir cards */
.cvwd-gauge.is-flow { background:#f6f7ff; border-color:#e3e6f7; }
.cvwd-gauge.is-flow:hover { box-shadow:0 8px 24px rgba(99,102,241,.12); }
.cvwd-gauge .tag {
	position:absolute; top:9px; right:9px;
	font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
	padding:2px 7px; border-radius:999px;
}
.cvwd-gauge.is-flow .tag { background:#e0e7ff; color:#3730a3; }
.cvwd-gauge.is-res  .name,
.cvwd-gauge.is-flow .name { padding:0 4px; }

/* ===== Gauge sets as grouped columns (Reservoirs | Pumps | Flows) ===== */
.cvwd-gauge-zones {
	display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
	gap:16px; align-items:start;
}
.cvwd-gauge-section.is-flow-section { margin-top:0; padding-top:0; border-top:0; }  /* columns, not stacked */
.is-pump-section .cvwd-gauge-head .chip { background:#6366f1; }
.is-flow-section .cvwd-gauge-head .chip { background:#0d9488; }
.cvwd-gauge.is-pump { background:#f6f7ff; border-color:#e3e6f7; }
.cvwd-gauge.is-flow { background:#f0fbf8; border-color:#cdeee4; }
.cvwd-gauge.is-pump:hover { box-shadow:0 8px 24px rgba(99,102,241,.12); }
.cvwd-gauge.is-flow:hover { box-shadow:0 8px 24px rgba(13,148,136,.12); }

/* ===== Canvas dial gauges (scaled, with average band + needle) ===== */
.cvwd-gauge-zones { display:block; }                                  /* stacked type sets, not tall columns */
.cvwd-gauge-section { margin:0 0 18px; }
.cvwd-gauge-section.is-flow-section { margin-top:0; padding-top:0; border-top:0; }
.cvwd-gauges { grid-template-columns:repeat(auto-fill, minmax(148px, 1fr)); }

.cvwd-gauge .canvas-wrap { height:74px; }
.cvwd-gauge .canvas-wrap canvas { width:100%; height:100%; display:block; }
.cvwd-gauge .reading {                                                /* now below the dial, not overlaid */
	position:static; bottom:auto; left:auto; right:auto;
	margin-top:2px; font-size:19px; font-weight:700; letter-spacing:-.02em;
}
.cvwd-gauge .reading small { display:inline; font-size:11px; font-weight:500; color:var(--cvwd-muted); }
.cvwd-gauge .scale {
	display:flex; justify-content:space-between; gap:6px;
	font-size:9px; color:var(--cvwd-muted); margin-top:1px; padding:0 4px;
}
.cvwd-gauge .scale span:last-child { font-weight:600; }

/* ===== Reimagined gauge labelling ===== */
.cvwd-gauge .canvas-wrap { height:86px; }
.cvwd-gauge .reading { margin-top:1px; }
.cvwd-gauge .reading small { color:var(--cvwd-muted); }
.cvwd-gauge .ctx { font-size:10.5px; color:var(--cvwd-muted); margin-top:3px; line-height:1.3; }
.cvwd-gauge .ctx .af { color:var(--cvwd-ink); font-weight:600; }
.cvwd-gauge .ctx .dl { font-weight:600; }
.cvwd-gauge .ctx .dl.hi   { color:#0d9488; }
.cvwd-gauge .ctx .dl.mid  { color:#64748b; }
.cvwd-gauge .ctx .dl.lo   { color:#b45309; }
.cvwd-gauge .ctx .dl.crit { color:#dc2626; }
.cvwd-gauge .fc-line { font-size:9.5px; font-weight:600; color:#b45309; margin-top:2px; }

/* Per-section legend explaining the dial marks */
.cvwd-leg { display:flex; flex-wrap:wrap; gap:12px; margin:-2px 2px 12px; font-size:10.5px; color:var(--cvwd-muted); }
.cvwd-leg .lg { display:inline-flex; align-items:center; gap:5px; }
.cvwd-leg .lg::before { content:''; display:inline-block; border-radius:2px; }
.cvwd-leg .now::before { width:2px; height:11px; background:#0f172a; }
.cvwd-leg .avg::before { width:13px; height:4px; background:rgba(71,85,105,.45); }
.cvwd-leg .fc::before  { width:2px; height:11px; background:#b45309; }

/* ===== CDEC/SLDMWA-style doughnut gauges: center number + range arc ===== */
.cvwd-gauge .canvas-wrap { height:92px; position:relative; }
.cvwd-gauge .center {
	position:absolute; left:50%; bottom:15px; transform:translateX(-50%);
	text-align:center; line-height:1; pointer-events:none;
}
.cvwd-gauge .center b { display:block; font-size:23px; font-weight:800; letter-spacing:-.03em; }
.cvwd-gauge .center span { display:block; font-size:9.5px; font-weight:600; color:var(--cvwd-muted); margin-top:2px; }
/* legend: current = needle, historical range = colored band swatch */
.cvwd-leg .now::before { width:2px; height:11px; background:#0f172a; }
.cvwd-leg .avg::before { width:13px; height:8px; border-radius:2px; background:#cfe0ef; }

/* ===== Click-to-expand line chart lightbox ===== */
.cvwd-gauge { cursor:pointer; }
.cvwd-lightbox {
	position:fixed; inset:0; z-index:99999;
	background:rgba(15,23,42,.55); display:flex; align-items:center; justify-content:center; padding:20px;
}
.cvwd-lb-card {
	background:#fff; border-radius:16px; width:min(760px,95vw); max-height:90vh;
	display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.3); overflow:hidden;
}
.cvwd-lb-head { display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid #eef2f7; }
.cvwd-lb-title { font-weight:700; font-size:15px; flex:1; color:#0f172a; }
.cvwd-lb-range { display:flex; gap:6px; }
.cvwd-lb-range button { border:1px solid #e2e8f0; background:#fff; border-radius:999px; padding:5px 12px; font-size:12px; cursor:pointer; color:#475569; }
.cvwd-lb-range button.on { background:#0f172a; color:#fff; border-color:#0f172a; }
.cvwd-lb-x { border:none; background:transparent; font-size:22px; line-height:1; cursor:pointer; color:#64748b; padding:0 4px; }
.cvwd-lb-body { position:relative; height:min(50vh,380px); padding:14px 16px 4px; }
.cvwd-lb-note { padding:4px 16px 14px; font-size:11px; color:#64748b; }

/* ===== Water-Year-Type Projection widget ===== */
.cvwt-root { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--cvwd-ink,#0f172a); background:var(--cvwd-bg,#f8fafc); border:1px solid var(--cvwd-line,#e2e8f0); border-radius:18px; padding:18px 20px; }
.cvwt-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.cvwt-title { margin:0; font-size:18px; font-weight:700; letter-spacing:-.01em; }
.cvwt-year { font-size:13px; padding:6px 10px; border:1px solid var(--cvwd-line,#e2e8f0); border-radius:10px; background:#fff; color:#0f172a; }
.cvwt-valley { margin-bottom:16px; }
.cvwt-vhead { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:6px; }
.cvwt-vhead .vname { font-size:13px; font-weight:600; }
.cvwt-vhead .vproj { font-size:12px; color:var(--cvwd-muted,#64748b); }
.cvwt-vhead .vproj.inprog { color:#2563eb; font-weight:600; }
.cvwt-vhead .vproj b { color:#0f172a; }
.cvwt-scale { position:relative; height:48px; border-radius:8px; overflow:hidden; border:1px solid var(--cvwd-line,#e2e8f0); }
.cvwt-zone { position:absolute; top:0; bottom:0; display:flex; align-items:flex-end; justify-content:center; }
.cvwt-zone span { font-size:8.5px; font-weight:600; color:rgba(15,23,42,.5); padding-bottom:3px; white-space:nowrap; }
.cvwt-zone.z-crit { background:#fde2e2; } .cvwt-zone.z-dry { background:#fdebd0; }
.cvwt-zone.z-bn { background:#fef3c7; } .cvwt-zone.z-an { background:#dbeafe; } .cvwt-zone.z-wet { background:#dcfce7; }
.cvwt-band { position:absolute; border-radius:3px; }
.cvwt-band.clim { top:9px; height:14px; background:rgba(15,23,42,.13); }
.cvwt-band.p { top:11px; height:10px; background:rgba(15,23,42,.3); }
.cvwt-tick { position:absolute; top:0; bottom:0; width:2px; transform:translateX(-50%); }
.cvwt-tick.median { background:#0f172a; }
.cvwt-tick.official { background:#7c3aed; box-shadow:0 0 0 1px rgba(255,255,255,.6); }
.cvwt-tick.prior { background:#475569; }
.cvwt-cap { font-size:11px; color:var(--cvwd-muted,#64748b); margin-top:6px; line-height:1.5; }
.cvwt-cap b { color:#0f172a; }
.cvwt-note { color:#b45309; }
.cvwt-leg { display:flex; flex-wrap:wrap; gap:12px; margin-top:4px; font-size:10.5px; color:var(--cvwd-muted,#64748b); }
.cvwt-leg .lg { display:inline-flex; align-items:center; gap:5px; }
.cvwt-leg .lg::before { content:''; display:inline-block; border-radius:2px; }
.cvwt-leg .clim::before { width:14px; height:9px; background:rgba(15,23,42,.13); }
.cvwt-leg .p::before { width:14px; height:7px; background:rgba(15,23,42,.3); }
.cvwt-leg .median::before { width:2px; height:12px; background:#0f172a; }
.cvwt-leg .official::before { width:2px; height:12px; background:#7c3aed; }
.cvwt-leg .prior::before { width:2px; height:12px; background:#475569; }

/* ===== CVP/SWP Allocation timeline widget ===== */
.cvalloc-root { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:#0f172a; background:#f8fafc; border:1px solid #e2e8f0; border-radius:18px; padding:18px 20px; }
.cvalloc-title { margin:0 0 12px; font-size:18px; font-weight:700; letter-spacing:-.01em; }
.cvalloc-controls { display:flex; flex-wrap:wrap; gap:14px; align-items:center; font-size:12px; color:#475569; margin-bottom:12px; }
.cvalloc-controls label { display:inline-flex; align-items:center; gap:6px; }
.cvalloc-controls select { font-size:12px; padding:4px 8px; border:1px solid #e2e8f0; border-radius:8px; background:#fff; }
.cvalloc-controls input { accent-color:#08519c; }
.cvalloc-chart { position:relative; width:100%; }
.cvalloc-chart canvas { width:100% !important; }
.cvalloc-chart.idx { margin-top:12px; }
.cvalloc-foot { font-size:10.5px; color:#94a3b8; margin-top:8px; text-align:right; }

/* ===== Station selector dropdowns (add reservoirs / stream gauges / pumps) ===== */
.cvwd-stationsel { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.cvwd-dd { position:relative; }
.cvwd-dd-btn { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--cvwd-line); background:var(--cvwd-card); border-radius:999px; padding:6px 13px; font-size:12px; font-weight:600; color:var(--cvwd-muted); cursor:pointer; line-height:1; }
.cvwd-dd-btn:hover { color:var(--cvwd-ink); }
.cvwd-dd-btn .n { background:var(--cvwd-bg); border:1px solid var(--cvwd-line); border-radius:999px; padding:1px 7px; font-size:11px; color:var(--cvwd-ink); }
.cvwd-dd-btn .caret { font-size:9px; font-style:normal; }
.cvwd-dd.open .cvwd-dd-btn { border-color:#94a3b8; color:var(--cvwd-ink); }
.cvwd-dd-panel { display:none; position:absolute; z-index:600; top:calc(100% + 6px); left:0; min-width:210px; max-height:280px; overflow:auto; background:#fff; border:1px solid var(--cvwd-line); border-radius:12px; box-shadow:0 12px 32px rgba(15,23,42,.16); padding:8px; }
.cvwd-dd.open .cvwd-dd-panel { display:block; }
.cvwd-dd-panel label { display:flex; align-items:center; gap:8px; padding:5px 7px; font-size:12px; color:var(--cvwd-ink); border-radius:7px; cursor:pointer; white-space:nowrap; }
.cvwd-dd-panel label:hover { background:var(--cvwd-bg); }
.cvwd-dd-panel input { accent-color:#2563eb; flex:0 0 auto; }

/* ===== Custom-grouping bar (Default / Custom toggle + save) ===== */
.cvwd-custombar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; }
.cvwd-viewlbl { color:var(--cvwd-muted); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:11px; margin-right:2px; }
.cvwd-mode, .cvwd-savecustom, .cvwd-clearcustom { border:1px solid var(--cvwd-line); background:var(--cvwd-card); border-radius:999px; padding:5px 13px; font-size:12px; font-weight:600; color:var(--cvwd-muted); cursor:pointer; line-height:1; }
.cvwd-mode.on { background:#0f172a; color:#fff; border-color:#0f172a; }
.cvwd-mode:disabled { opacity:.45; cursor:not-allowed; }
.cvwd-savecustom { color:#0e7490; border-color:#cdeae2; }
.cvwd-savecustom:hover { background:#f0fbf8; color:#0e7490; }
.cvwd-clearcustom { color:#b45309; }
.cvwd-clearcustom:hover { background:#fff7ed; }

/* available-count hint on station selector buttons (lozenge = selected, "of N" = available) */
.cvwd-dd-btn .avail { color:var(--cvwd-muted); font-weight:500; font-size:11px; }

/* ===== WYT "learn more" link + info lightbox ===== */
.cvwt-foot { margin-top:6px; }
.cvwt-learn { border:none; background:transparent; color:#2563eb; font-size:12px; font-weight:600; cursor:pointer; padding:4px 0; text-decoration:underline; text-underline-offset:2px; }
.cvwt-learn:hover { color:#1d4ed8; }
.cvwt-info-body { padding:14px 18px 18px; overflow:auto; max-height:70vh; font-size:13px; line-height:1.6; color:#334155; }
.cvwt-info-body p { margin:0 0 10px; }
.cvwt-info-body b { color:#0f172a; }
.cvwt-formula { font-family:var(--font-mono,ui-monospace,Menlo,Consolas,monospace); font-size:12px; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:8px; padding:8px 10px; color:#0f172a; }
.cvwt-src { font-size:11.5px; color:#64748b; border-top:1px solid #eef2f7; padding-top:10px; }

.cvalloc-chart:not(.idx) canvas { cursor:pointer; }

/* ===== Allocation zoom: region select + exposure legend ===== */
.alb-region { font-size:12px; padding:4px 9px; border:1px solid #e2e8f0; border-radius:8px; background:#fff; color:#0f172a; }
.alb-legend { display:flex; flex-wrap:wrap; gap:12px; padding:6px 16px 0; font-size:11px; color:#475569; }
.alb-legend .alb-lg { display:inline-flex; align-items:center; gap:5px; }
.alb-legend .alb-lg i { width:12px; height:8px; border-radius:2px; display:inline-block; }