/**
 * Pickwick Live Data
 *
 * Deliberately quiet. Everything is expressed through CSS custom properties
 * that fall back to inheriting the theme's own fonts and colors, so these
 * panels look like part of the site rather than a bolted-on widget.
 *
 * To match the site's palette exactly, set these anywhere in your theme CSS:
 *
 *   :root {
 *     --pwld-accent: #0a2540;
 *     --pwld-accent-soft: #16b8cf;
 *     --pwld-surface: #f4f7fa;
 *     --pwld-border: #e3e9f0;
 *     --pwld-muted: #5b6b7c;
 *   }
 */

/*
 * A custom property may not be defined in terms of itself.
 *
 * This block used to read "--pwld-accent: var(--pwld-accent, currentColor)",
 * meaning to say "keep the theme's value if there is one". CSS treats that as a
 * cycle and throws BOTH away, so every property that used one of these came out
 * unset -- no background, no border, no corners, no gauge fill. Job 286 caught
 * it on the Lake Conditions page, where the panels rendered as bare text.
 *
 * The defaults now live on :root, where a theme rule of the same specificity
 * later in the cascade -- or any more specific one -- simply wins. Each use
 * below also carries its own fallback, so the panels still look right even if
 * this block never loads.
 */
:root {
	--pwld-accent: currentColor;
	--pwld-accent-soft: #2a7fa8;
	--pwld-surface: rgba(0, 0, 0, .025);
	--pwld-border: rgba(0, 0, 0, .12);
	--pwld-muted: rgba(0, 0, 0, .6);
	--pwld-radius: 10px;
}

.pwld-panel {
	background: var(--pwld-surface, rgba(0, 0, 0, .025));
	border: 1px solid var(--pwld-border, rgba(0, 0, 0, .12));
	border-radius: var(--pwld-radius, 10px);
	padding: 1.1rem 1.25rem 1rem;
	margin: 0 0 1.25rem;
	font-family: inherit;
	color: inherit;
}

.pwld-panel__title {
	margin: 0 0 .6rem;
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--pwld-accent, currentColor);
}

.pwld-panel__body > *:last-child {
	margin-bottom: 0;
}

/* The one big number each panel leads with. */
.pwld-big {
	margin: 0;
	font-size: 2.4rem;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--pwld-accent, currentColor);
}

.pwld-unit {
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--pwld-muted, rgba(0, 0, 0, .6));
}

.pwld-sub {
	margin: .15rem 0 0;
	font-size: .9rem;
	color: var(--pwld-muted, rgba(0, 0, 0, .6));
}

/* Lake level against its operating range. */
.pwld-gauge {
	margin: .85rem 0 .35rem;
	height: 8px;
	border-radius: 999px;
	background: var(--pwld-border, rgba(0, 0, 0, .12));
	overflow: hidden;
}

.pwld-gauge__fill {
	height: 100%;
	border-radius: 999px;
	background: var(--pwld-accent-soft, #2a7fa8);
	transition: width .4s ease;
}

.pwld-scale {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	font-size: .78rem;
	color: var(--pwld-muted, rgba(0, 0, 0, .6));
}

.pwld-dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .25rem 1rem;
	margin: .9rem 0 0;
	font-size: .92rem;
}

.pwld-dl dt {
	color: var(--pwld-muted, rgba(0, 0, 0, .6));
}

.pwld-dl dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

.pwld-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9rem;
	margin: .4rem 0 0;
}

.pwld-table th,
.pwld-table td {
	padding: .4rem .5rem;
	border-bottom: 1px solid var(--pwld-border, rgba(0, 0, 0, .12));
	text-align: left;
	vertical-align: top;
}

.pwld-table th[scope="row"] {
	white-space: nowrap;
	font-weight: 600;
	color: var(--pwld-muted, rgba(0, 0, 0, .6));
}

.pwld-table tr:last-child th,
.pwld-table tr:last-child td {
	border-bottom: 0;
}

/* Flood impact rows the river has already reached. */
.pwld-impact--reached th,
.pwld-impact--reached td {
	font-weight: 700;
	color: #8a4b00;
}

.pwld-forecast,
.pwld-news {
	list-style: none;
	margin: .9rem 0 0;
	padding: 0;
	font-size: .92rem;
}

.pwld-forecast li,
.pwld-news li {
	padding: .3rem 0;
	border-bottom: 1px solid var(--pwld-border, rgba(0, 0, 0, .12));
}

.pwld-forecast li:last-child,
.pwld-news li:last-child {
	border-bottom: 0;
}

.pwld-alert {
	border-left: 4px solid #b45309;
	background: rgba(180, 83, 9, .07);
	padding: .6rem .8rem;
	border-radius: 6px;
	margin: 0 0 .6rem;
	font-size: .92rem;
}

.pwld-alert--severe {
	border-left-color: #b32d2e;
	background: rgba(179, 45, 46, .08);
}

.pwld-alert p {
	margin: .25rem 0 0;
}

.pwld-footnote {
	margin: .9rem 0 0;
	font-size: .76rem;
	line-height: 1.45;
	color: var(--pwld-muted, rgba(0, 0, 0, .6));
}

.pwld-footnote a {
	color: inherit;
}

.pwld-disclaimer {
	display: block;
	margin-top: .35rem;
	font-style: italic;
}

/* The combined panel. */
.pwld-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
}

.pwld-grid .pwld-panel {
	margin-bottom: 0;
}

@media (max-width: 560px) {
	.pwld-big {
		font-size: 2rem;
	}

	.pwld-panel {
		padding: 1rem;
	}
}

/* The one-line flood summary, for the home page. */
.pwld-line {
	margin: 0;
	padding: .55rem .85rem;
	border-left: 3px solid var(--pwld-accent-soft, #2a7fa8);
	background: var(--pwld-surface, rgba(0, 0, 0, .025));
	font-size: .95em;
	line-height: 1.4;
}

.pwld-line--alert {
	border-left-color: #a3302a;
	background: rgba(163, 48, 42, .07);
	font-weight: 600;
}

.pwld-line a {
	white-space: nowrap;
}

/*
 * A schedule block that has already happened. Muted, not hidden: the morning's
 * generation still tells you what the river has been doing.
 */
.pwld-table .pwld-past th,
.pwld-table .pwld-past td {
	opacity: .55;
}

/*
 * A gap under the whole block, so whatever follows it does not sit flush
 * against the last panel. Job 286 noticed it under the Shiloh panel.
 *
 * My first attempt at this put the margin on .pwld-grid and then cancelled it
 * two lines later with a last-child reset — and since the grid is usually the
 * only child, it is the last child, so the reset always won. Job 294 measured
 * the gap at 0 px and said so rather than taking the fix on trust.
 *
 * The margin belongs on the block itself. The reset stays, because its actual
 * job is to stop the last panel INSIDE the block adding a second gap.
 */
.pwld-conditions {
	margin-bottom: 1.25rem;
}

.pwld-conditions > *:last-child {
	margin-bottom: 0;
}

/*
 * The link in the one-line summary. The theme's default link colour is pink,
 * which is off-palette on the gold band; inheriting the accent keeps it in the
 * site's own colours wherever the line is placed.
 */
.pwld-line a {
	color: var(--pwld-accent, currentColor);
	text-decoration: underline;
}

/* ---- Links inside our own sentences --------------------------------- */

/*
 * Elementor removes link underlines across the whole site, which left the
 * flood-page link distinguishable from the text around it only by its color.
 * That fails WCAG 1.4.1 and disappears entirely for a red-green color-blind
 * reader. The !important is deliberate and is the only one in this file:
 * Elementor's rule is more specific than anything we can write without it.
 */
.pwld-cta,
.pwld-line a,
.pwld-note a,
.pwld-disclaimer a {
	text-decoration: underline !important;
	text-underline-offset: 2px;
}

.pwld-cta:hover,
.pwld-cta:focus-visible {
	text-decoration-thickness: 2px !important;
}

/* A visible focus ring, for anybody driving the page from a keyboard. */
.pwld-cta:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}