/* ==========================================================================
   Pulse — built from the "Pulse" screen of design/Epileptic News.dc.html.
   Reuses the Feed's panel and histogram primitives, so feed.css loads with it.
   ========================================================================== */

.epi-pulse {
	max-width: var(--shell);
	margin: 0 auto;
	padding: 30px var(--gutter) 80px;
}

.epi-pulse__head { margin-bottom: 26px; }

.epi-pulse__eyebrow {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 2.2px;
	color: var(--fg-faint);
	text-transform: uppercase;
	margin-bottom: 10px;
}

.epi-pulse__title {
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -1.4px;
}

.epi-pulse__top,
.epi-pulse__bottom {
	display: grid;
	gap: 20px;
	margin-bottom: 20px;
}

.epi-pulse__top { grid-template-columns: 1.6fr 1fr; }
.epi-pulse__bottom { grid-template-columns: 1fr 1fr; }

.epi-pulse__figure {
	font-size: 76px;
	font-weight: 800;
	letter-spacing: -3.4px;
	line-height: 0.9;
}

.epi-pulse__mood {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 1.6px;
	color: var(--fg-label);
	text-transform: uppercase;
	margin-top: 10px;
}

.epi-pulse__working {
	font-family: var(--font-mono);
	font-size: 10px;
	line-height: 1.6;
	letter-spacing: 0.6px;
	color: var(--fg-ghost);
	margin-top: 8px;
}

/* --- split by class -------------------------------------------------------- */

.epi-classline { margin-bottom: 16px; }

.epi-classline__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 7px;
}

.epi-classline__k {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--fg-dim);
}

.epi-classline__v {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--fg-soft);
}

.epi-classline__track {
	display: block;
	height: 6px;
	border-radius: 4px;
	background: var(--bg-well);
	overflow: hidden;
}

.epi-classline__fill { display: block; height: 100%; }

/* --- movers ---------------------------------------------------------------- */

.epi-mover {
	display: grid;
	grid-template-columns: 90px minmax(0, 1fr) 90px 80px;
	gap: 12px;
	align-items: center;
	padding: 9px 0;
	border-bottom: 1px solid var(--line-soft);
}

.epi-mover:last-child { border-bottom: 0; }

.epi-mover__sym {
	font-family: var(--font-mono);
	font-size: 11.5px;
	font-weight: 600;
	color: #DDE2EC;
	letter-spacing: 0.6px;
}

.epi-mover__sym a { color: #DDE2EC; }

.epi-mover__track {
	height: 6px;
	border-radius: 3px;
	background: var(--bg-well);
	overflow: hidden;
}

.epi-mover__fill {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #1B5AD9, var(--ui-accent));
}

.epi-mover__n,
.epi-mover__delta {
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--fg-faint);
	text-align: right;
	letter-spacing: 0.8px;
}

/* --- source ledger --------------------------------------------------------- */

.epi-ledger__head,
.epi-ledger__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 60px 90px 70px;
	gap: 12px;
	align-items: center;
}

.epi-ledger__head {
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 1.6px;
	color: var(--fg-ghost);
	text-transform: uppercase;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line-strong);
	margin-bottom: 6px;
}

.epi-ledger__head span:not(:first-child),
.epi-ledger__row span:not(:first-child) { text-align: right; }

.epi-ledger__row {
	padding: 10px 0;
	border-bottom: 1px solid var(--line-soft);
}

.epi-ledger__row:last-child { border-bottom: 0; }

.epi-ledger__src {
	font-size: 13.5px;
	color: var(--fg-soft);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.epi-ledger__src a { color: var(--fg-soft); }

.epi-ledger__n,
.epi-ledger__mix {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--fg-mute);
}

@media (max-width: 1080px) {
	.epi-pulse__top,
	.epi-pulse__bottom { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
	.epi-pulse { padding: 22px var(--gutter) 60px; }
	.epi-pulse__title { font-size: 30px; letter-spacing: -1.2px; }
	.epi-pulse__figure { font-size: 52px; letter-spacing: -2.2px; }
	.epi-mover { grid-template-columns: 64px minmax(0, 1fr) 62px; }
	.epi-mover__n { display: none; }
	.epi-ledger__head,
	.epi-ledger__row { grid-template-columns: minmax(0, 1fr) 46px 62px; }
	.epi-ledger__head span:nth-child(3),
	.epi-ledger__row span:nth-child(3) { display: none; }
}

/* ==========================================================================
   The windowed distribution panel.

   Shares .epi-range and .epi-histogram with the Feed, so the control looks and
   behaves identically on both screens — the whole point of putting it here.
   ========================================================================== */

.epi-pulse__window {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--line-soft);
}

.epi-pulse__windowhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.epi-pulse__split {
	margin-top: 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.epi-pulse__window.is-loading .epi-histogram,
.epi-pulse__window.is-loading .epi-pulse__split { opacity: 0.45; }

.epi-pulse__split { transition: opacity 160ms ease; }

@media (max-width: 720px) {
	.epi-pulse__windowhead .epi-range { width: 100%; justify-content: space-between; }
	.epi-pulse__windowhead .epi-range__btn { flex: 1; text-align: center; padding: 6px 4px; }
}