/**
 * Leakproof admin styles.
 *
 * Hand-written: no framework, no build step, no CDN, no webfont. Everything is
 * scoped under .leakproof-wrap so nothing escapes into wp-admin or another
 * plugin's screens.
 *
 * The palette lives in custom properties on .leakproof-wrap, so severity
 * colours stay identical across the dashboard, the leak list, the action cards
 * and the ledger, and a single edit restyles the whole plugin.
 *
 * Layout uses logical properties (inset-inline-start, padding-inline-start,
 * text-align: start/end) rather than left/right, so right-to-left languages are
 * handled without a mirrored stylesheet.
 *
 * -----------------------------------------------------------------------------
 * TABLE OF CONTENTS
 * -----------------------------------------------------------------------------
 *
 *  1. Palette and root
 *  2. App bar
 *  3. Page head
 *  4. Buttons
 *  5. Hero and composition bar
 *  6. Cards and labels
 *  7. Pills (severity, risk, measure kind)
 *  8. Leak list
 *  9. Tables
 * 10. Action proposals
 * 11. Autopilot lanes
 * 12. Before to after change panel
 * 13. Forms and empty states
 * 14. Responsive (media queries)
 * 15. Right-to-left
 *
 * -----------------------------------------------------------------------------
 */


.leakproof-wrap {
	--lp-ink: #0b1524;
	--lp-ink-2: #16273d;

	--lp-bg: #f2f5f9;
	--lp-surface: #ffffff;
	--lp-sunk: #f6f8fb;
	--lp-border: #e4e9f0;
	--lp-border-strong: #cfd7e3;

	--lp-text: #101b2b;
	--lp-text-soft: #46566c;
	--lp-text-muted: #6d7c91;

	--lp-brand: #2563eb;
	--lp-brand-deep: #1d4ed8;
	--lp-brand-soft: #eaf1ff;

	--lp-critical: #c0272d;
	--lp-critical-soft: #fdeced;
	--lp-high: #b45309;
	--lp-high-soft: #fdf3e6;
	--lp-medium: #7c6500;
	--lp-medium-soft: #fbf8e5;
	--lp-watch: #7c6500;
	--lp-watch-soft: #fbf8e5;
	--lp-good: #0f7a3d;
	--lp-good-soft: #e9f7ef;

	--lp-r-lg: 16px;
	--lp-r-md: 12px;
	--lp-r-sm: 8px;
	--lp-gap: 18px;

	--lp-shadow-sm: 0 1px 2px rgba(16, 27, 43, .06);
	--lp-shadow: 0 1px 3px rgba(16, 27, 43, .07), 0 8px 24px -12px rgba(16, 27, 43, .18);
	--lp-shadow-lg: 0 2px 6px rgba(16, 27, 43, .08), 0 24px 48px -24px rgba(16, 27, 43, .32);

	margin-inline-end: 20px;
	padding-bottom: 44px;
	color: var(--lp-text);
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
}

/* WordPress puts its own notices above us; keep them from touching the appbar. */
.leakproof-wrap .notice { margin: 12px 0 18px; border-radius: var(--lp-r-sm); }

/* ---------------------------------------------------------------------------
   App bar
   --------------------------------------------------------------------------- */

.leakproof-appbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin: 16px 0 24px;
	padding: 14px 22px;
	border-radius: var(--lp-r-lg);
	background:
		radial-gradient(90% 200% at 100% 0%, rgba(37, 99, 235, .38) 0%, transparent 62%),
		linear-gradient(180deg, var(--lp-ink-2) 0%, var(--lp-ink) 100%);
	box-shadow: var(--lp-shadow-lg);
	color: #fff;
}

.leakproof-appbar__brand {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
}

.leakproof-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: rgba(255, 255, 255, .1);
	color: #eaf1ff;
	flex: none;
}

.leakproof-wordmark {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: #fff;
}

.leakproof-appbar__tag {
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .11);
	color: rgba(255, 255, 255, .82);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .02em;
	white-space: nowrap;
}

.leakproof-appnav {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-wrap: wrap;
	padding: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .07);
}

.leakproof-appnav__item {
	padding: 7px 15px;
	border-radius: 999px;
	color: rgba(255, 255, 255, .72);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}

.leakproof-appnav__item:hover { color: #fff; background: rgba(255, 255, 255, .1); }

.leakproof-appnav__item.is-active {
	background: #fff;
	color: var(--lp-ink);
	box-shadow: var(--lp-shadow-sm);
}

.leakproof-appnav__item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Page head
   --------------------------------------------------------------------------- */

.leakproof-pagehead {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--lp-gap);
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.leakproof-page-title {
	margin: 0 0 5px;
	padding: 0;
	font-size: 27px;
	font-weight: 700;
	letter-spacing: -0.022em;
	line-height: 1.2;
}

.leakproof-page-subtitle {
	margin: 0;
	max-width: 70ch;
	color: var(--lp-text-soft);
	font-size: 14px;
	line-height: 1.55;
}

.leakproof-section-title {
	margin: 34px 0 12px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--lp-text-muted);
}

.leakproof-breadcrumb { margin: 0 0 10px; font-size: 13px; }
.leakproof-breadcrumb a { text-decoration: none; color: var(--lp-brand); font-weight: 600; }
.leakproof-muted { color: var(--lp-text-muted); font-size: 13px; }

/* Buttons ----------------------------------------------------------------- */

.leakproof-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 17px;
	border-radius: 999px;
	border: 1px solid var(--lp-border-strong);
	background: var(--lp-surface);
	color: var(--lp-text);
	font-size: 13px;
	font-weight: 650;
	cursor: pointer;
	box-shadow: var(--lp-shadow-sm);
	transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}

.leakproof-btn:hover { transform: translateY(-1px); box-shadow: var(--lp-shadow); }
.leakproof-btn:focus-visible { outline: 2px solid var(--lp-brand); outline-offset: 2px; }

.leakproof-btn--primary {
	background: linear-gradient(180deg, var(--lp-brand) 0%, var(--lp-brand-deep) 100%);
	border-color: var(--lp-brand-deep);
	color: #fff;
}

.leakproof-btn__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--lp-good);
	box-shadow: 0 0 0 3px var(--lp-good-soft);
}

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */

.leakproof-hero {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
	gap: var(--lp-gap);
	align-items: stretch;
}

.leakproof-hero__main {
	padding: 26px 28px;
	border-radius: var(--lp-r-lg);
	border: 1px solid var(--lp-border);
	background:
		radial-gradient(120% 150% at 0% 0%, var(--lp-brand-soft) 0%, transparent 58%),
		var(--lp-surface);
	box-shadow: var(--lp-shadow);
}

.leakproof-hero__figure {
	margin: 0;
	font-size: 54px;
	font-weight: 750;
	letter-spacing: -0.035em;
	line-height: 1.05;
	color: var(--lp-text);
}

.leakproof-hero__meta {
	margin: 10px 0 0;
	max-width: 60ch;
	color: var(--lp-text-muted);
	font-size: 13.5px;
	line-height: 1.55;
}

/* Composition bar --------------------------------------------------------- */

.leakproof-bar {
	display: flex;
	gap: 3px;
	margin-top: 22px;
	height: 12px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--lp-sunk);
}

.leakproof-bar__seg { display: block; height: 100%; border-radius: 999px; }
.leakproof-bar__seg--critical { background: var(--lp-critical); }
.leakproof-bar__seg--high     { background: var(--lp-high); }
.leakproof-bar__seg--medium,
.leakproof-bar__seg--watch    { background: #caa300; }

.leakproof-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.leakproof-legend li {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-size: 12.5px;
	color: var(--lp-text-soft);
}

.leakproof-legend strong { color: var(--lp-text); font-weight: 650; }

.leakproof-legend__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.leakproof-legend__dot--critical { background: var(--lp-critical); }
.leakproof-legend__dot--high     { background: var(--lp-high); }
.leakproof-legend__dot--medium,
.leakproof-legend__dot--watch    { background: #caa300; }

/* Side stats -------------------------------------------------------------- */

.leakproof-hero__side { display: grid; gap: var(--lp-gap); align-content: stretch; }

.leakproof-stat {
	padding: 20px 22px;
	border-radius: var(--lp-r-lg);
	border: 1px solid var(--lp-border);
	background: var(--lp-surface);
	box-shadow: var(--lp-shadow-sm);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.leakproof-stat__figure {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--lp-good);
	line-height: 1.1;
}

.leakproof-stat__meta { margin: 7px 0 0; color: var(--lp-text-muted); font-size: 12.5px; line-height: 1.5; }

/* ---------------------------------------------------------------------------
   Cards and labels
   --------------------------------------------------------------------------- */

.leakproof-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--lp-gap);
}

.leakproof-card {
	background: var(--lp-surface);
	border: 1px solid var(--lp-border);
	border-radius: var(--lp-r-lg);
	box-shadow: var(--lp-shadow-sm);
	padding: 22px 24px;
}

.leakproof-card__label {
	margin: 0 0 9px;
	color: var(--lp-text-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.leakproof-card__figure {
	margin: 0;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.1;
}

.leakproof-card__figure--xl { font-size: 44px; }
.leakproof-card__figure--sm { font-size: 17px; font-weight: 650; }
.leakproof-card__figure--good { color: var(--lp-good); }
.leakproof-card__meta { margin: 10px 0 0; color: var(--lp-text-muted); font-size: 13px; line-height: 1.5; }

/* ---------------------------------------------------------------------------
   Pills
   --------------------------------------------------------------------------- */

.leakproof-severity,
.leakproof-risk {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 11px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .015em;
	line-height: 1.75;
	white-space: nowrap;
}

/* A dot as well as a colour, so severity never depends on colour alone. */
.leakproof-severity::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.leakproof-severity--critical { color: var(--lp-critical); background: var(--lp-critical-soft); }
.leakproof-severity--high     { color: var(--lp-high);     background: var(--lp-high-soft); }
.leakproof-severity--medium,
.leakproof-severity--watch    { color: var(--lp-medium);   background: var(--lp-medium-soft); }
.leakproof-severity--resolved { color: var(--lp-good);     background: var(--lp-good-soft); }

.leakproof-risk--safe     { color: var(--lp-good);     background: var(--lp-good-soft); }
.leakproof-risk--approval { color: var(--lp-high);     background: var(--lp-high-soft); }
.leakproof-risk--manual   { color: var(--lp-critical); background: var(--lp-critical-soft); }

/* ---------------------------------------------------------------------------
   Leak list (Today)
   --------------------------------------------------------------------------- */

.leakproof-leaklist { display: grid; gap: 10px; }

.leakproof-leak {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 22px;
	padding-inline-start: 26px;
	border: 1px solid var(--lp-border);
	border-radius: var(--lp-r-md);
	background: var(--lp-surface);
	box-shadow: var(--lp-shadow-sm);
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	transition: transform .13s ease, box-shadow .17s ease, border-color .17s ease;
}

.leakproof-leak:hover {
	transform: translateY(-1px);
	box-shadow: var(--lp-shadow);
	border-color: var(--lp-border-strong);
}

.leakproof-leak:focus-visible { outline: 2px solid var(--lp-brand); outline-offset: 2px; }

.leakproof-leak__rail { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 5px; }
.leakproof-leak--critical .leakproof-leak__rail { background: var(--lp-critical); }
.leakproof-leak--high     .leakproof-leak__rail { background: var(--lp-high); }
.leakproof-leak--medium   .leakproof-leak__rail,
.leakproof-leak--watch    .leakproof-leak__rail { background: #caa300; }

.leakproof-leak__body { flex: 1; min-width: 0; }
.leakproof-leak__top { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.leakproof-leak__type { color: var(--lp-text-muted); font-size: 12px; font-weight: 600; }

.leakproof-leak__title {
	display: block;
	font-size: 16px;
	font-weight: 650;
	letter-spacing: -0.01em;
	line-height: 1.35;
	color: var(--lp-text);
}

.leakproof-leak__affected { display: block; margin-top: 5px; color: var(--lp-text-muted); font-size: 12.5px; }

.leakproof-leak__right { text-align: end; flex: none; }

.leakproof-leak__amount {
	display: block;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.025em;
}

.leakproof-leak__cta { display: block; margin-top: 5px; color: var(--lp-brand); font-size: 12.5px; font-weight: 650; }

/* ---------------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------------- */

.leakproof-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--lp-r-md); }

.leakproof-table.widefat {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--lp-surface);
	border: 1px solid var(--lp-border);
	border-radius: var(--lp-r-md);
	box-shadow: var(--lp-shadow-sm);
	overflow: hidden;
}

.leakproof-table th,
.leakproof-table td {
	padding: 14px 18px;
	text-align: start;
	border-bottom: 1px solid var(--lp-border);
	vertical-align: middle;
	font-size: 14px;
}

.leakproof-table thead th {
	background: var(--lp-sunk);
	color: var(--lp-text-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.leakproof-table tbody tr:last-child td { border-bottom: 0; }
.leakproof-table tbody tr:hover td { background: var(--lp-sunk); }
.leakproof-table tr.is-reverted td { opacity: .5; }

.leakproof-table .is-numeric { text-align: end; white-space: nowrap; }
.leakproof-table__title { font-weight: 650; }
.leakproof-table__title a { text-decoration: none; color: var(--lp-brand); }
.leakproof-table__title a:hover { text-decoration: underline; }

.leakproof-table__type {
	display: block;
	margin-top: 3px;
	color: var(--lp-text-muted);
	font-size: 12px;
	font-weight: 400;
}

.leakproof-table__impact { font-weight: 700; font-size: 15px; }

.leakproof-table tfoot th,
.leakproof-table tfoot td {
	background: var(--lp-sunk);
	font-weight: 700;
	border-bottom: 0;
	border-top: 2px solid var(--lp-border-strong);
}

/* ---------------------------------------------------------------------------
   Action proposals
   --------------------------------------------------------------------------- */

.leakproof-proposals {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
	gap: var(--lp-gap);
}

.leakproof-proposal {
	position: relative;
	background: var(--lp-surface);
	border: 1px solid var(--lp-border);
	border-radius: var(--lp-r-lg);
	box-shadow: var(--lp-shadow-sm);
	padding: 22px 24px;
	overflow: hidden;
}

.leakproof-proposal::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 5px; }
.leakproof-proposal--safe::before     { background: var(--lp-good); }
.leakproof-proposal--approval::before { background: var(--lp-high); }
.leakproof-proposal--manual::before   { background: var(--lp-critical); }

.leakproof-proposal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 13px;
}

.leakproof-proposal__amount { font-size: 21px; font-weight: 700; letter-spacing: -0.025em; }
.leakproof-proposal__title { margin: 0 0 7px; font-size: 15.5px; font-weight: 650; line-height: 1.4; }
.leakproof-proposal__summary { margin: 0 0 11px; color: var(--lp-text-soft); font-size: 14px; line-height: 1.5; }
.leakproof-proposal__meta { margin: 0 0 17px; color: var(--lp-text-muted); font-size: 12.5px; line-height: 1.5; }

/* ---------------------------------------------------------------------------
   Autopilot
   --------------------------------------------------------------------------- */

.leakproof-lanes { display: grid; gap: 12px; margin-bottom: 24px; }

.leakproof-lane {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lp-gap);
	flex-wrap: wrap;
	background: var(--lp-surface);
	border: 1px solid var(--lp-border);
	border-radius: var(--lp-r-lg);
	box-shadow: var(--lp-shadow-sm);
	padding: 20px 24px;
}

.leakproof-lane__name { margin: 0 0 4px; font-size: 15.5px; font-weight: 700; }
.leakproof-lane__desc { margin: 0; color: var(--lp-text-muted); font-size: 13px; max-width: 58ch; }

.leakproof-segmented {
	display: inline-flex;
	background: var(--lp-sunk);
	border: 1px solid var(--lp-border);
	border-radius: 999px;
	padding: 3px;
	gap: 2px;
}

.leakproof-segmented__option {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 7px 17px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 650;
	color: var(--lp-text-muted);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.leakproof-segmented__option input {
	position: absolute;
	inset: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.leakproof-segmented__option:hover { color: var(--lp-text); }

.leakproof-segmented__option.is-active {
	background: var(--lp-surface);
	color: var(--lp-text);
	box-shadow: var(--lp-shadow-sm);
}

.leakproof-segmented__option input:focus-visible + span {
	outline: 2px solid var(--lp-brand);
	outline-offset: 3px;
	border-radius: 4px;
}

/* The promises panel ------------------------------------------------------ */

.leakproof-never { position: relative; overflow: hidden; }
.leakproof-never::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 5px; background: var(--lp-critical); }
.leakproof-never__title { margin: 0 0 12px; font-size: 15.5px; font-weight: 700; }

.leakproof-never__list {
	margin: 0 0 13px;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 7px 20px;
}

.leakproof-never__list li {
	margin: 0;
	padding-inline-start: 24px;
	position: relative;
	font-size: 14px;
	color: var(--lp-text-soft);
}

.leakproof-never__list li::before {
	content: "\00d7";
	position: absolute;
	inset-inline-start: 5px;
	top: -1px;
	color: var(--lp-critical);
	font-weight: 800;
	font-size: 15px;
}

.leakproof-never__note { margin: 0; color: var(--lp-text-muted); font-size: 13px; line-height: 1.55; max-width: 74ch; }

/* ---------------------------------------------------------------------------
   Forms, empty states
   --------------------------------------------------------------------------- */

.leakproof-form.form-table th { font-weight: 650; color: var(--lp-text); }
.leakproof-notice-card { position: relative; overflow: hidden; }
.leakproof-notice-card::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 5px; background: var(--lp-brand); }
.leakproof-notice-card p { margin: 0 0 6px; font-size: 14px; }
.leakproof-notice-card p:last-child { margin-bottom: 0; }

.leakproof-empty { text-align: center; padding: 48px 24px; }
.leakproof-empty__title { margin: 0 0 7px; font-size: 16.5px; font-weight: 700; }
.leakproof-empty__body { margin: 0 auto; max-width: 52ch; color: var(--lp-text-muted); font-size: 14px; line-height: 1.55; }

.leakproof-footnote { margin-top: 20px; color: var(--lp-text-muted); font-size: 12px; }

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */

@media screen and (max-width: 1100px) {
	.leakproof-hero { grid-template-columns: minmax(0, 1fr); }
	.leakproof-hero__side { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

@media screen and (max-width: 782px) {
	.leakproof-wrap { margin-inline-end: 12px; }
	.leakproof-hero__figure { font-size: 38px; }
	.leakproof-leak { flex-direction: column; align-items: flex-start; gap: 12px; }
	.leakproof-leak__right { text-align: start; }
	.leakproof-lane { flex-direction: column; align-items: flex-start; }
	.leakproof-appnav { width: 100%; }
}

/* !important is required here and only here: it must beat the transition and
   animation values set on the individual rules above, for viewers who have
   asked their system to reduce motion. */
@media (prefers-reduced-motion: reduce) {
	.leakproof-wrap *,
	.leakproof-wrap *::before,
	.leakproof-wrap *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* Inline leak icons -------------------------------------------------------- */

.leakproof-leak__type { display: inline-flex; align-items: center; gap: 6px; }
.leakproof-icon { flex: none; opacity: .75; }
.leakproof-stat__figure--plain { color: var(--lp-text); }

/* ---------------------------------------------------------------------------
   Before → after change panel
   --------------------------------------------------------------------------- */

.leakproof-change {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 20px;
	padding: 26px 28px;
	border-radius: var(--lp-r-lg);
	border: 1px solid var(--lp-border);
	background:
		linear-gradient(90deg, var(--lp-sunk) 0%, var(--lp-surface) 46%, rgba(253,236,237,.5) 100%);
	box-shadow: var(--lp-shadow-sm);
}

.leakproof-change__side { text-align: center; }

.leakproof-change__when {
	margin: 0 0 8px;
	color: var(--lp-text-muted);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.leakproof-change__figure {
	margin: 0;
	font-size: 46px;
	font-weight: 750;
	letter-spacing: -.035em;
	line-height: 1;
	color: var(--lp-text-muted);
}

.leakproof-change__side--after .leakproof-change__figure { color: var(--lp-critical); }

.leakproof-change__unit { margin: 6px 0 0; color: var(--lp-text-muted); font-size: 13px; }

.leakproof-change__arrow { color: var(--lp-border-strong); display: flex; align-items: center; }

.leakproof-change__delta {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-top: 6px;
	padding-top: 18px;
	border-top: 1px solid var(--lp-border);
}

.leakproof-delta {
	display: inline-flex;
	align-items: center;
	padding: 4px 13px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
}

.leakproof-delta--up   { color: var(--lp-critical); background: var(--lp-critical-soft); }
.leakproof-delta--down { color: var(--lp-good);     background: var(--lp-good-soft); }

.leakproof-change__note {
	flex-basis: 100%;
	margin: 2px 0 0;
	color: var(--lp-text-muted);
	font-size: 12.5px;
	line-height: 1.55;
	max-width: 78ch;
}

@media screen and (max-width: 782px) {
	.leakproof-change { grid-template-columns: 1fr; }
	.leakproof-change__arrow { transform: rotate(90deg); justify-content: center; }
	.leakproof-change__figure { font-size: 36px; }
}

/* Observed vs exposed split, and the per-row measure badge ------------------ */

.leakproof-split {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--lp-border);
}

.leakproof-split__item { display: flex; flex-direction: column; gap: 2px; }

.leakproof-split__label {
	color: var(--lp-text-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.leakproof-split__value { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }

.leakproof-kind {
	padding: 2px 9px;
	border-radius: 999px;
	border: 1px solid var(--lp-border-strong);
	color: var(--lp-text-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.leakproof-kind--exposure   { color: var(--lp-high); border-color: #f0d3ae; background: var(--lp-high-soft); }
.leakproof-kind--projection { color: var(--lp-medium); border-color: #ecdfa4; background: var(--lp-medium-soft); }


/* ---------------------------------------------------------------------------
   Right-to-left
   --------------------------------------------------------------------------- */

/* Layout flips on its own: the rules above use logical properties
   (inset-inline-start, padding-inline-start, text-align: start/end) rather than
   left/right, so no mirrored stylesheet is needed. Only two things carry a
   direction of their own and must be told to turn round. */

[dir="rtl"] .leakproof-change {
	background: linear-gradient(270deg, var(--lp-sunk) 0%, var(--lp-surface) 46%, rgba(253,236,237,.5) 100%);
}

[dir="rtl"] .leakproof-change__arrow svg,
[dir="rtl"] .leakproof-leak__cta {
	transform: scaleX(-1);
}