/* ============================================================
   Maxwell's Demon & Landauer's Principle — page-specific stylesheet
   Loaded after site.css, which supplies the shared tokens, nav
   bar, page header and base reset. This file only styles what's
   unique to this page.

   Sections, top to bottom:
     1. Simulation card (three synced panels)
     2. Sorting-chamber panel (p5 canvas + histograms + controls)
     3. Ledger + entropy-balance panels (right column)
     4. Shared control styling (sliders, selects, buttons)
     5. Prose explanation + KaTeX derivation (same pattern as
        radiation.html / radiation_try.css, reused for consistency)
     6. Responsive tweaks
   ============================================================ */

/* ---------- 1. Simulation card ----------------------------------- */
.sim-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: clamp(16px, 3vw, 28px);
	margin-bottom: 44px;
}

.demon-grid {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	gap: 24px;
}

.panel {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: clamp(14px, 2.5vw, 20px);
}

.panel-title {
	font-family: var(--font-sans);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--ink-soft);
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
}

/* ---------- 2. Sorting-chamber panel ------------------------------ */
.panel-sort {
	flex: 2 1 480px;
	min-width: 0;
}

.chamber-wrap {
	width: 100%;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--line);
	background: #eef1f8;
	line-height: 0;
}
#chamberHost canvas {
	display: block;
	width: 100% !important;
	height: auto !important;
}

.hist-row {
	display: flex;
	gap: 14px;
	margin-top: 12px;
}
.hist-col { flex: 1 1 0; min-width: 0; }
.hist-label {
	display: block;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--ink-soft);
	margin-bottom: 4px;
}
svg.hist { width: 100%; height: 64px; display: block; overflow: visible; }
svg.hist .bar-cold { fill: #3987e5; }
svg.hist .bar-hot { fill: #e0562b; }
svg.hist .thresh-line { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 3 2; }

.readout-row {
	display: flex;
	gap: 24px;
	margin-top: 12px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--ink-soft);
}
.readout-row .cold-val { color: #2563eb; font-weight: 700; }
.readout-row .hot-val { color: #c2410c; font-weight: 700; }

/* ---------- 3. Ledger + entropy-balance panels --------------------- */
.panel-stack {
	flex: 1 1 340px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ledger-readouts {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 4px;
}
.ledger-readouts .row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 0.88rem;
	color: var(--ink-soft);
}
.ledger-readouts .row .big {
	font-family: var(--font-sans);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--accent-dark);
	font-variant-numeric: tabular-nums;
}

svg#entropyChart { width: 100%; height: 200px; display: block; overflow: visible; }
.chart-legend {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 8px;
	font-size: 0.76rem;
	color: var(--ink-soft);
}
.chart-legend .swatch {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	margin-right: 5px;
	vertical-align: middle;
}

/* ---------- 3b. Noiseless-coding panel + empty placeholder panel ---- */
.coding-top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 16px;
}
.coding-top .ctrl { flex: 1 1 280px; margin-bottom: 0; }
.coding-meta {
	font-size: 0.85rem;
	color: var(--ink-soft);
	padding-bottom: 6px;
}

svg.coding-chart-svg { width: 100%; height: 260px; display: block; overflow: visible; }
.coding-chart-svg .axis-label {
	font-size: 10px;
	fill: var(--ink-soft);
}
.coding-chart-svg .rate-point { fill: #15803d; stroke: #fff; stroke-width: 1; }
.coding-chart-svg .rate-point.current { fill: #b45309; stroke: #fff; stroke-width: 2; }

.coding-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	margin-top: 18px;
}
.stat-tile {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 12px 14px;
}
.stat-label {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--ink-soft);
	margin-bottom: 4px;
}
.stat-value {
	font-family: var(--font-sans);
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--accent-dark);
	font-variant-numeric: tabular-nums;
}

/* Reserved for future prose -- deliberately no content, just space. */
.empty-panel { min-height: 140px; }

/* Imported article text (Shannon Entropy.docx) -- reuses the sitewide
   .prose typography from site.css, just adds what that class doesn't
   already cover: tables and standalone display equations. */
.sim-card > .prose { margin: 0 auto; }
.prose-eq {
	margin: 0.4em 0 1.3em;
	overflow-x: auto;
	overflow-y: hidden;
}
.prose-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0.8em 0 1.3em;
	font-family: var(--font-sans);
	font-size: 0.92rem;
}
.prose-table th, .prose-table td {
	border: 1px solid var(--line);
	padding: 7px 12px;
	text-align: left;
}
.prose-table th {
	background: var(--bg);
	color: var(--ink);
}
.prose-table td { font-variant-numeric: tabular-nums; }

/* ---------- 4. Shared control styling ------------------------------ */
.controls-block { margin-top: 16px; }
.controls-block .ctrl { margin-bottom: 12px; }
.controls-block .ctrl:last-child { margin-bottom: 0; }
.controls-block label {
	display: flex;
	justify-content: space-between;
	margin: 0 0 5px;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--ink-soft);
}
.controls-block label span { color: var(--accent); font-weight: 700; }

.slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 5px;
	border-radius: 999px;
	background: #dbe2ef;
	outline: none;
	margin: 0;
	transition: background .2s;
}
.slider:hover { background: #cdd7ea; }
.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--accent);
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
	cursor: pointer;
}
.slider::-moz-range-thumb {
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--accent);
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
	cursor: pointer;
}

.controls-block select {
	width: 100%;
	background: var(--surface);
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 7px 8px;
	font-size: 0.85rem;
	font-family: var(--font-sans);
}

.checkline {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ink-soft);
	margin-bottom: 12px;
}
.checkline input { accent-color: var(--accent); width: 15px; height: 15px; }

.btn-row { display: flex; gap: 8px; margin-top: 4px; }
.btn {
	flex: 1;
	background: var(--surface);
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 9px 10px;
	font-size: 0.85rem;
	font-weight: 600;
	font-family: var(--font-sans);
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.btn:hover { background: #eef1f8; border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-dark); }

/* ---------- 5. Prose explanation + KaTeX derivation ----------------- */
/* Identical structural pattern to radiation.html / radiation_try.css,
   reused here so the write-up reads as the same "kind" of page. */
.a {
	max-width: 1360px;
	margin: 0 auto 48px;
	font-family: var(--font-serif);
	font-size: 1.12rem;
	line-height: 1.75;
	color: #2a3442;
}
.a p { margin: 0 0 1.1em; }
.a ul { margin: 0 0 1.1em; padding-left: 1.3em; }
.a li { margin-bottom: 0.4em; }

.explain-row {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	gap: 28px;
}
.explain-row .col {
	flex: 2 1 420px;
	min-width: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: clamp(18px, 3vw, 32px);
}
.explain-row .mathblock {
	flex: 1 1 320px;
	font-size: 0.95rem;
}
.mathblock .eq-label {
	float: right;
	color: var(--ink-soft);
	font-family: var(--font-sans);
	font-size: 0.85rem;
}
.mathblock .katex-display {
	margin: 0.6em 0 1.1em;
	overflow-x: auto;
	overflow-y: hidden;
}
.mathblock p { margin: 0 0 0.3em; }

/* ---------- 6. Responsive tweaks ------------------------------------ */
@media (max-width: 900px) {
	.demon-grid { flex-direction: column; }
	.panel-sort, .panel-stack { flex: 1 1 100%; width: 100%; }
}
@media (max-width: 720px) {
	.hist-row { flex-direction: column; }
}