/* Cukup dashboard — paper-and-ink design system.
   Every asset is local: no @import, no url(), no remote fonts.
   No inline style attributes anywhere; the CSP forbids them. */

:root {
	color-scheme: light dark;

	--paper: #fff4dd;
	--card: #fffdf7;
	--ink: #26201a;
	--ink-2: #5c5347;
	--ink-3: #6f6455;
	--dot-ink: #26201a1a;

	--accent: #d8400f;
	--accent-fill: #ff5c2b;
	--sun: #ffd84d;
	--rose: #ffb9cc;
	--sky: #a5dcff;
	--mint: #b9e6a6;
	--peach: #ffb07a;
	--empty: #f1e3c4;

	--on-accent: #fffdf7;
	--on-sun: #26201a;

	--under: #9b3a10;
	--under-fill: #ff8b4a;
	--complete: #0f6b34;
	--complete-fill: #4fbd7c;
	--over: #5f3ba6;
	--over-fill: #b48bf0;

	--warning-bg: #ffe9a8;
	--warning-ink: #574208;
	--error-bg: #ffd9d2;
	--error-ink: #7a2411;

	--series-0: #0d5f4e;
	--series-1: #b23c05;
	--series-2: #5f3ba6;
	--series-3: #175a94;

	--focus: #6b2fd6;

	--border-width: 2px;
	--border: var(--border-width) solid var(--ink);
	--shadow: 4px 4px 0 var(--ink);
	--shadow-lg: 6px 6px 0 var(--ink);
	--shadow-sm: 3px 3px 0 var(--ink);
	--radius: 14px;
	--radius-sm: 8px;

	--font-display: ui-rounded, "SF Pro Rounded", "Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif;
	--font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

	--cell-size: 15px;
	--measure: 62ch;

	font-family: var(--font-body);
}

@media (prefers-color-scheme: dark) {
	:root {
		--paper: #17130f;
		--card: #221c16;
		--ink: #f5e7d2;
		--ink-2: #c4b5a1;
		--ink-3: #a2937f;
		--dot-ink: #f6e8cf14;

		--accent: #ff7a4f;
		--accent-fill: #ff5c2b;
		--sun: #e0b93a;
		--rose: #e097ad;
		--sky: #7fbde6;
		--mint: #8ec97b;
		--peach: #e0955f;
		--empty: #3a3025;

		--on-accent: #1a120d;
		--on-sun: #1a120d;

		--under: #ffa877;
		--under-fill: #c2571f;
		--complete: #7fdca6;
		--complete-fill: #2c8a52;
		--over: #cbaaff;
		--over-fill: #6c48b8;

		--warning-bg: #4a3a0c;
		--warning-ink: #ffe9a8;
		--error-bg: #4d2015;
		--error-ink: #ffcabc;

		--series-0: #6fd8bb;
		--series-1: #ff9b72;
		--series-2: #c7a7ff;
		--series-3: #8fc9ff;

		--focus: #d9b9ff;

		--shadow: 4px 4px 0 #0000008f;
		--shadow-lg: 6px 6px 0 #0000008f;
		--shadow-sm: 3px 3px 0 #0000008f;
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background-color: var(--paper);
	background-image: radial-gradient(var(--dot-ink) 1.5px, transparent 1.5px);
	background-size: 22px 22px;
	color: var(--ink);
	font-size: 1rem;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
ul,
ol {
	margin-top: 0;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	letter-spacing: -0.02em;
}

h4 {
	margin-bottom: 0.4rem;
	font-size: 1rem;
}

h1 {
	margin-bottom: 0;
	font-size: clamp(2.25rem, 7vw, 3.5rem);
	line-height: 1;
}

h2 {
	margin-bottom: 0;
	font-size: clamp(1.3rem, 4vw, 1.8rem);
}

h3 {
	margin-bottom: 0.6rem;
	font-size: 1.1rem;
}

a {
	color: var(--accent);
	text-underline-offset: 3px;
}

.eyebrow {
	margin-bottom: 0.3rem;
	color: var(--ink-2);
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.muted {
	color: var(--ink-2);
}

.guidance {
	max-width: var(--measure);
	color: var(--ink-2);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
}

/* Controls */

button,
input,
select {
	font: inherit;
}

button:not(:disabled),
a.button,
input[type="checkbox"]:not(:disabled) {
	cursor: pointer;
}

button,
.button {
	border: var(--border);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
	background: var(--card);
	color: var(--ink);
	padding: 0.5rem 0.85rem;
	font-weight: 650;
	text-decoration: none;
	display: inline-block;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

button:where(:not(:disabled)):hover,
a.button:hover {
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 var(--ink);
}

button:where(:not(:disabled)):active,
a.button:active {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 var(--ink);
}

button[aria-pressed="true"] {
	background: var(--sun);
	color: var(--on-sun);
}

.button {
	background: var(--accent-fill);
	color: var(--on-accent);
}

button[disabled] {
	cursor: progress;
	opacity: 0.7;
	box-shadow: none;
	transform: none;
}

input[type="date"] {
	min-height: 2.75rem;
	border: var(--border);
	border-radius: var(--radius-sm);
	background: var(--card);
	color: var(--ink);
	padding: 0.35rem 0.5rem;
}

/* Frame */

.masthead,
main,
.page-footer {
	width: min(74rem, calc(100% - 2rem));
	margin-inline: auto;
}

.masthead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 2.5rem 1.25rem;
}

.wordmark {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
}

.wordmark-tag {
	border: var(--border);
	border-radius: 2rem;
	background: var(--mint);
	color: var(--on-sun);
	padding: 0.1rem 0.6rem;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.session-actions {
	position: absolute;
	top: 1rem;
	right: max(1rem, calc((100% - 74rem) / 2));
	margin: 0;
}

.freshness {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border: var(--border);
	border-radius: 2rem;
	background: var(--card);
	box-shadow: var(--shadow-sm);
	padding: 0.4rem 0.85rem;
	color: var(--ink-2);
	font-family: var(--font-mono);
	font-size: 0.78rem;
}

.freshness-mark {
	width: 0.7rem;
	height: 0.7rem;
	flex: none;
	border: 2px solid var(--complete);
	border-radius: 50%;
	background: var(--complete-fill);
}

.freshness-partial .freshness-mark {
	border-color: var(--under);
	border-radius: 0;
	background: var(--under-fill);
	transform: rotate(45deg);
}

main {
	display: grid;
	gap: 1.25rem;
	padding-bottom: 3rem;
}

section {
	min-width: 0;
	border: var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	background: var(--card);
	padding: clamp(1rem, 3vw, 1.6rem);
}

.section-heading {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1rem;
	margin-bottom: 1rem;
}

/* Hero status */

.hero {
	background-image: radial-gradient(var(--dot-ink) 1.5px, transparent 1.5px);
	background-size: 18px 18px;
	box-shadow: var(--shadow-lg);
}

.verdict-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem;
}

.verdict {
	border: var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	background: var(--card);
	padding: 1.1rem 1.2rem 1.2rem;
}

.verdict-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.6rem;
	color: var(--ink-2);
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.verdict-stamp {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border: var(--border);
	border-radius: 2rem;
	padding: 0.1rem 0.65rem;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.status-under .verdict-stamp {
	background: var(--under-fill);
	color: var(--on-sun);
}

.status-complete .verdict-stamp {
	background: var(--complete-fill);
	color: var(--on-sun);
}

.status-over .verdict-stamp {
	background: var(--over-fill);
	color: var(--on-sun);
}

.status-mark {
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	border: 2px solid currentColor;
}

.status-under .status-mark {
	transform: rotate(45deg);
}

.status-complete .status-mark {
	border-radius: 50%;
	background: currentColor;
}

.status-over .status-mark {
	border-radius: 50%;
}

.verdict-figure {
	display: inline-block;
	margin-bottom: 0.55rem;
	border-radius: 10px;
	padding: 0 0.5rem 0.1rem;
	background: var(--sun);
	color: var(--on-sun);
	font-family: var(--font-display);
	font-size: clamp(2.1rem, 6.5vw, 3.4rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.08;
	transform: rotate(-1.2deg);
}

.status-under .verdict-figure {
	background: var(--under-fill);
}

.status-complete .verdict-figure {
	background: var(--complete-fill);
}

.status-over .verdict-figure {
	background: var(--over-fill);
}

.verdict-meter {
	display: block;
	width: 100%;
	min-width: 0;
	height: auto;
	margin-block: 0.3rem 0.6rem;
}

.meter-track {
	fill: var(--empty);
	stroke: var(--ink);
	stroke-width: 2;
}

.meter-fill {
	stroke: var(--ink);
	stroke-width: 2;
}

.status-under .meter-fill {
	fill: var(--under-fill);
}

.status-complete .meter-fill {
	fill: var(--complete-fill);
}

.status-over .meter-fill {
	fill: var(--over-fill);
}

.meter-target {
	stroke: var(--ink);
	stroke-width: 2;
	stroke-dasharray: 4 3;
}

.meter-upper {
	stroke: var(--ink);
	stroke-width: 3;
}

.verdict-caption {
	margin-bottom: 0.2rem;
	font-weight: 650;
}

.verdict-target {
	margin-bottom: 0;
	color: var(--ink-2);
	font-family: var(--font-mono);
	font-size: 0.8rem;
}

/* Track selector */

.track-selector {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
}

.track-selector .guidance {
	margin: 0;
}

.track-switch {
	border: 0;
	padding: 0;
}

.track-switch legend {
	border: 0;
	background: none;
	color: var(--ink-2);
	padding: 0 0 0.4rem;
}

.track-options {
	display: flex;
}

.track-options label {
	position: relative;
	cursor: pointer;
}

.track-options label > span {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-height: 2.75rem;
	padding: 0.55rem 1rem;
	border: var(--border);
	background: var(--card);
	font-weight: 700;
}

.track-options label + label > span {
	border-left: 0;
}

.track-options label:first-child > span {
	border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.track-options label:last-child > span {
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.track-options input:checked + span {
	background: var(--sun);
	color: var(--on-sun);
}

.track-options input:focus-visible + span {
	position: relative;
	z-index: 1;
	outline: 3px solid var(--focus);
	outline-offset: 3px;
}

.track-check {
	visibility: hidden;
}

.track-options input:checked + span .track-check {
	visibility: visible;
}

/* Filters */

.filter-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

fieldset {
	min-width: 0;
	margin: 0;
	border: var(--border);
	border-radius: var(--radius);
	padding: 0.9rem 1rem 1rem;
}

fieldset:disabled {
	opacity: 0.55;
}

legend {
	border: var(--border);
	border-radius: 2rem;
	background: var(--sky);
	color: var(--on-sun);
	padding: 0.05rem 0.7rem;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.filter-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.filter-options label {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 2.6rem;
	border: var(--border);
	border-radius: 2rem;
	background: var(--card);
	box-shadow: var(--shadow-sm);
	padding: 0.3rem 0.8rem;
	font-size: 0.92rem;
}

.filter-options label:hover {
	background: var(--empty);
}

fieldset:disabled .filter-options label {
	box-shadow: none;
}

fieldset:disabled .filter-options label:hover {
	background: var(--card);
}

.filter-options input {
	width: 1.05rem;
	height: 1.05rem;
	accent-color: var(--accent-fill);
}

.filter-options input:checked + span {
	font-weight: 750;
}

/* Panel notices */

.panel-notice {
	margin-block: 0.9rem;
	border: var(--border);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
	padding: 0.7rem 0.95rem;
}

.panel-notice.stale {
	background: var(--warning-bg);
	color: var(--warning-ink);
}

.panel-notice.unavailable {
	background: var(--error-bg);
	color: var(--error-ink);
}

/* Charts */

.chart-scroll,
.table-scroll {
	overflow-x: auto;
	padding-bottom: 0.4rem;
}

.scroll-hint {
	display: none;
	color: var(--ink-2);
	font-family: var(--font-mono);
	font-size: 0.78rem;
}

svg {
	display: block;
	width: 100%;
	height: auto;
	color: var(--ink-2);
}

.gantt-chart,
.trend-chart {
	min-width: 45rem;
}

svg text {
	fill: currentColor;
	font-family: var(--font-mono);
	font-size: 14px;
}

.chart-grid {
	stroke: var(--ink);
	stroke-width: 1;
	stroke-dasharray: 3 4;
	opacity: 0.45;
}

/* Gantt timeline */

.activity-period-grid {
	margin-bottom: 1.25rem;
}

.activity-period-card:first-child .verdict-figure {
	background: var(--sky);
}

.activity-period-card:last-child .verdict-figure {
	background: var(--mint);
}

.gantt-plot {
	fill: var(--card);
	stroke: var(--ink);
	stroke-width: 1.5;
}

.gantt-track {
	fill: var(--empty);
	opacity: 0.6;
}

.gantt-axis {
	stroke: var(--ink);
	stroke-width: 1.5;
}

.gantt-bar {
	fill: var(--accent-fill);
	stroke: var(--ink);
	stroke-width: 1;
}

.gantt-union {
	stroke: none;
}

.gantt-union.concurrency-2 {
	fill: var(--sun);
}

.gantt-project {
	fill: var(--sky);
}

.gantt-executor {
	fill: var(--mint);
}

.gantt-label {
	fill: var(--ink);
	font-size: 12px;
}

.gantt-union-label {
	font-weight: 700;
}

.gantt-total {
	fill: var(--ink-2);
	font-size: 12px;
}

.gantt-group {
	fill: var(--ink-3);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.gantt-future {
	fill: var(--ink);
	opacity: 0.06;
}

.gantt-now {
	stroke: var(--accent);
	stroke-width: 2;
	stroke-dasharray: 4 3;
}

.gantt-now-label {
	fill: var(--accent);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.gantt-empty {
	fill: var(--ink-2);
	font-size: 14px;
}

.chart-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	padding: 0;
	list-style: none;
	font-size: 0.9rem;
}

.chart-legend li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	border: var(--border);
	border-radius: 2rem;
	background: var(--card);
	padding: 0.15rem 0.7rem;
}

.block-swatch {
	display: inline-block;
	width: 1.6rem;
	height: 0.85rem;
	border: 2px solid var(--ink);
	border-radius: 4px;
	background: var(--accent-fill);
}

.block-swatch.concurrent {
	background: var(--sun);
}

.block-swatch.project {
	background: var(--sky);
}

.block-swatch.executor {
	background: var(--mint);
}

.legend-line {
	display: inline-block;
	width: 1.75rem;
	border-top: 4px solid;
}

.trend-line {
	fill: none;
	stroke-width: 3.5;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.trend-dot {
	stroke: var(--ink);
	stroke-width: 2;
}

.trend-tag {
	fill: var(--card);
	stroke: var(--ink);
	stroke-width: 2;
}

.trend-tag-text {
	font-weight: 700;
}

.trend-hover {
	opacity: 0;
}

.trend-hover:hover,
.trend-hover:focus {
	opacity: 1;
}

.trend-hit {
	fill: transparent;
	stroke: none;
}

.trend-hover-line {
	stroke: var(--ink);
	stroke-width: 1.5;
	stroke-dasharray: 3 4;
	opacity: 0.75;
	vector-effect: non-scaling-stroke;
}

.trend-hover-dot {
	stroke: var(--ink);
	stroke-width: 2;
}

.trend-hover-tag {
	fill: var(--card);
	stroke-width: 2;
}

.trend-hover-tag.series-0 {
	stroke: var(--series-0);
}

.trend-hover-tag.series-1 {
	stroke: var(--series-1);
}

.trend-hover-tag.series-2 {
	stroke: var(--series-2);
}

.trend-hover-tag.series-3 {
	stroke: var(--series-3);
}

.trend-hover-tag-text {
	font-size: 13px;
	font-weight: 700;
}

.trend-hover-dot.series-0 {
	fill: var(--series-0);
}

.trend-hover-dot.series-1 {
	fill: var(--series-1);
}

.trend-hover-dot.series-2 {
	fill: var(--series-2);
}

.trend-hover-dot.series-3 {
	fill: var(--series-3);
}

.series-0 {
	stroke: var(--series-0);
}

.series-1 {
	stroke: var(--series-1);
	stroke-dasharray: 11 6;
}

.series-2 {
	stroke: var(--series-2);
	stroke-dasharray: 3 6;
}

.series-3 {
	stroke: var(--series-3);
	stroke-dasharray: 15 5 3 5;
}

.legend-line.series-0 {
	border-color: var(--series-0);
}

.legend-line.series-1 {
	border-color: var(--series-1);
	border-top-style: dashed;
}

.legend-line.series-2 {
	border-color: var(--series-2);
	border-top-style: dotted;
}

.legend-line.series-3 {
	border-color: var(--series-3);
	border-top-style: double;
}

.trend-dot.series-0 {
	fill: var(--series-0);
}

.trend-dot.series-1 {
	fill: var(--series-1);
}

.trend-dot.series-2 {
	fill: var(--series-2);
}

.trend-dot.series-3 {
	fill: var(--series-3);
}

/* Calendar heatmap */

.heatmap {
	margin-top: 1.1rem;
}

.heatmap-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2rem 0.8rem;
}

.heatmap-heading h3 {
	margin-bottom: 0.6rem;
}

.heatmap-hint {
	margin-bottom: 0.6rem;
	color: var(--ink-2);
	font-family: var(--font-mono);
	font-size: 0.72rem;
}

.heat-scroll {
	max-width: 100%;
}

/* Cell size is a class, not an inline style: the CSP forbids style attributes,
   so density is chosen from the column count at render time. */
.heat-board {
	--heat-cell: 20px;
	--heat-gap: 4px;
	display: grid;
	grid-template-columns: auto max-content;
	gap: 0.3rem 0.5rem;
	width: max-content;
	max-width: 100%;
}

.heat-medium {
	--heat-cell: 15px;
	--heat-gap: 3px;
}

.heat-compact {
	--heat-cell: 12px;
	--heat-gap: 3px;
}

.heat-dense {
	--heat-cell: 10px;
	--heat-gap: 2px;
}

.heat-months,
.heat-weekdays,
.heat-grid {
	margin: 0;
	padding: 0;
	list-style: none;
}

.heat-months {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: var(--heat-cell);
	gap: var(--heat-gap);
	color: var(--ink-2);
	font-family: var(--font-mono);
	font-size: 0.68rem;
	line-height: 1;
}

.heat-months li {
	white-space: nowrap;
}

.heat-weekdays {
	display: grid;
	grid-template-rows: repeat(7, var(--heat-cell));
	gap: var(--heat-gap);
	color: var(--ink-2);
	font-family: var(--font-mono);
	font-size: 0.62rem;
	line-height: var(--heat-cell);
	text-align: right;
}

.heat-grid {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(7, var(--heat-cell));
	grid-auto-columns: var(--heat-cell);
	gap: var(--heat-gap);
}

.heat-grid > li {
	position: relative;
}

.heat-cell {
	display: block;
	width: 100%;
	height: 100%;
	min-width: 0;
	padding: 0;
	border: 1px solid var(--ink);
	border-radius: 3px;
	box-shadow: none;
	cursor: pointer;
	transition: none;
}

.heat-0 {
	background: var(--empty);
}

.heat-1 {
	background: var(--peach);
}

.heat-2 {
	background: var(--sun);
}

.heat-3 {
	background: var(--accent-fill);
}

.heat-4 {
	background: var(--accent);
}

.heat-selected-week {
	border-color: var(--focus);
	box-shadow: inset 0 0 0 1px var(--focus);
}

/* Hover detail card. Progressive enhancement only: it is pointer-driven, and
   the daily values table below carries the same numbers for everyone else. */
.heat-tip {
	position: absolute;
	bottom: calc(100% + 9px);
	left: 50%;
	z-index: 20;
	translate: -50% 0;
	width: 17rem;
	border: var(--border);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow);
	background: var(--card);
	padding: 0.55rem 0.7rem;
	color: var(--ink);
	font-size: 0.8rem;
	line-height: 1.45;
	text-align: left;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.1s ease;
	pointer-events: none;
}

.heat-tip.tip-start {
	left: 0;
	translate: 0 0;
}

.heat-tip.tip-end {
	right: 0;
	left: auto;
	translate: 0 0;
}

.heat-cell:hover,
.heat-cell:focus-visible,
.heat-cell:active,
.heat-selected {
	outline: 3px solid var(--ink);
	outline-offset: 1px;
	box-shadow: none;
	transform: none;
}

.heat-cell:hover + .heat-tip,
.heat-cell:focus-visible + .heat-tip {
	visibility: visible;
	opacity: 1;
}

.tip-date {
	margin-bottom: 0.15rem;
	color: var(--ink-2);
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tip-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.1rem;
}

.tip-figure {
	font-family: var(--font-display);
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.1;
}

.tip-stamp {
	border: 1px solid currentColor;
	border-radius: 2rem;
	padding: 0 0.45rem;
	font-family: var(--font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.08em;
}

.status-under .tip-figure,
.status-under .tip-stamp {
	color: var(--under);
}

.status-complete .tip-figure,
.status-complete .tip-stamp {
	color: var(--complete);
}

.status-over .tip-figure,
.status-over .tip-stamp {
	color: var(--over);
}

.tip-target {
	margin-bottom: 0.4rem;
	color: var(--ink-2);
	font-family: var(--font-mono);
	font-size: 0.7rem;
}

.tip-breakdown {
	display: grid;
	gap: 0.3rem;
	margin: 0 0 0.4rem;
	border-top: 1px solid var(--empty);
	padding-top: 0.4rem;
}

.tip-breakdown dt {
	color: var(--ink-3);
	font-family: var(--font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tip-breakdown dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.tip-meta,
.tip-note,
.tip-empty {
	margin: 0;
	color: var(--ink-2);
	font-family: var(--font-mono);
	font-size: 0.68rem;
}

.tip-note {
	margin-top: 0.15rem;
	color: var(--ink-3);
}

/* Below this width the widest range scrolls. Extra top room keeps hover and
   selected cards inside the scroll container instead of clipping them. */
@media (max-width: 56rem) {
	.heat-scroll {
		overflow-x: auto;
		padding-block: 18rem 0.4rem;
		margin-top: -18rem;
	}
}

.heat-scale {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.6rem;
	padding: 0;
	list-style: none;
	color: var(--ink-2);
	font-family: var(--font-mono);
	font-size: 0.75rem;
}

.heat-swatch {
	display: inline-block;
	width: 0.9rem;
	height: 0.9rem;
	border: 1px solid var(--ink);
	border-radius: 3px;
}

/* Range controls */

.range-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.custom-range {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.custom-range label {
	display: grid;
	gap: 0.15rem;
	color: var(--ink-2);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Details / tables */

details {
	margin-top: 0.85rem;
	border: var(--border);
	border-radius: var(--radius-sm);
	background: var(--card);
	padding: 0.6rem 0.9rem;
}

summary {
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.text-equivalent {
	font-family: var(--font-mono);
	font-size: 0.85rem;
}

table {
	min-width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

caption {
	padding-bottom: 0.4rem;
	text-align: left;
	font-weight: 700;
}

th,
td {
	border-bottom: 1px solid var(--ink);
	padding: 0.55rem 0.7rem;
	text-align: left;
	white-space: nowrap;
}

/* Executors */

.executor-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.executor-card {
	border: var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	background: var(--card);
	padding: 1rem 1.1rem;
}

.executor-card h3 {
	font-family: var(--font-mono);
	font-size: 0.95rem;
	letter-spacing: 0.02em;
}

.executor-card dl {
	margin: 0;
}

.executor-card dl div {
	display: grid;
	grid-template-columns: minmax(8rem, 0.8fr) 1.2fr;
	gap: 0.5rem;
	border-top: 1px solid var(--ink);
	padding-block: 0.55rem;
}

dt {
	color: var(--ink-2);
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

dd {
	margin: 0;
}

.credential {
	display: inline-block;
	border: var(--border);
	border-radius: 2rem;
	padding: 0 0.6rem;
	font-size: 0.82rem;
	font-weight: 700;
}

.credential::before {
	content: "◻ ";
}

.credential-active {
	background: var(--mint);
	color: var(--on-sun);
}

.credential-active::before {
	content: "✓ ";
}

.credential-revoked {
	background: var(--rose);
	color: var(--on-sun);
}

.credential-revoked::before {
	content: "× ";
}

.credential-not-applicable {
	background: var(--sky);
	color: var(--on-sun);
}

/* Sign-in and message pages */

.centered {
	display: grid;
	place-items: center;
	min-height: 100vh;
	padding-block: 2rem;
}

.centered section {
	width: min(30rem, 100%);
	box-shadow: var(--shadow-lg);
	background-image: radial-gradient(var(--dot-ink) 1.5px, transparent 1.5px);
	background-size: 18px 18px;
	text-align: center;
}

.page-footer {
	padding-bottom: 2.5rem;
	color: var(--ink-2);
	font-family: var(--font-mono);
	font-size: 0.75rem;
}

/* Public landing page. Scoped to body.landing so the dashboard is untouched. */

.skip-link {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 10;
	border: var(--border);
	border-radius: var(--radius-sm);
	background: var(--card);
	color: var(--ink);
	padding: 0.5rem 0.85rem;
	font-weight: 650;
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: none;
}

/* The shared light accent is under 4.5:1 for body-size text on paper, and so is
   light button text on the accent fill. Darken both on this page only. */
.landing {
	--landing-link: #b0360b;
	--landing-on-accent: var(--ink);
}

@media (prefers-color-scheme: dark) {
	.landing {
		--landing-link: var(--accent);
		--landing-on-accent: var(--on-accent);
	}
}

.landing a {
	color: var(--landing-link);
}

.landing a.button {
	color: var(--landing-on-accent);
}

.landing a.skip-link {
	color: var(--ink);
}

.landing .landing-top,
.landing main,
.landing .page-footer {
	width: min(54rem, calc(100% - 2rem));
}

.landing main {
	gap: 1.5rem;
	overflow-wrap: break-word;
}

.landing main:focus {
	outline: none;
}

.landing-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-inline: auto;
	padding-block: 1.5rem 1.25rem;
}

.landing-brand {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0;
}

.landing-brand-name {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 750;
	letter-spacing: -0.02em;
}

.landing-top ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.landing-top a {
	color: var(--ink);
	font-weight: 600;
}

.landing-top a.landing-owner-link {
	color: var(--landing-link);
}

.landing section {
	padding: clamp(1.25rem, 4vw, 2.25rem);
}

.landing h2 {
	margin-bottom: 1rem;
	line-height: 1.2;
}

.landing h3 {
	margin-top: 1.4rem;
}

.landing-hero {
	background-image: radial-gradient(var(--dot-ink) 1.5px, transparent 1.5px);
	background-size: 18px 18px;
	box-shadow: var(--shadow-lg);
}

.landing-hero h1 {
	margin-block: 0.4rem 1.25rem;
	font-size: clamp(2rem, 6.5vw, 3.4rem);
	line-height: 1.08;
}

.landing-lead {
	max-width: var(--measure);
	font-size: clamp(1.05rem, 2.4vw, 1.2rem);
}

.landing-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin: 1.5rem 0 0;
}

.landing-secondary {
	font-weight: 650;
}

.landing-prose {
	max-width: var(--measure);
}

.landing-prose > :first-child {
	margin-top: 0;
}

.landing-prose ul,
.landing-split ul {
	padding-left: 1.2rem;
}

.landing-prose li,
.landing-split li {
	margin-bottom: 0.35rem;
}

.landing-note {
	margin-bottom: 0;
	color: var(--ink-2);
	font-size: 0.92rem;
}

.landing-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin-block: 0.5rem 1.25rem;
	padding: 0;
	list-style: none;
}

.landing-cards li {
	border: var(--border);
	border-radius: var(--radius-sm);
	padding: 1rem;
}

.landing-cards li:nth-child(1) {
	background: var(--sky);
	color: var(--on-sun);
}

.landing-cards li:nth-child(2) {
	background: var(--mint);
	color: var(--on-sun);
}

.landing-cards li:nth-child(3) {
	background: var(--rose);
	color: var(--on-sun);
}

.landing-cards h3 {
	margin-top: 0;
}

.landing-cards p {
	margin-bottom: 0;
}

.landing-figure {
	container: landing-figure / inline-size;
	margin: 1.5rem 0;
	border: var(--border);
	border-radius: var(--radius-sm);
	background: var(--paper);
	padding: 1rem;
}

/* The explainer keeps its 16:9 frame at any width, so the poster is never cropped. */
.landing-video {
	margin: 1.5rem 0 0;
}

.landing-video video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: var(--border);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow);
	background: var(--paper);
}

.landing-video figcaption {
	margin-top: 0.75rem;
	color: var(--ink-2);
	font-size: 0.92rem;
}

.landing-transcript h1 {
	margin-bottom: 1.25rem;
	font-size: clamp(1.75rem, 4vw, 2.4rem);
	line-height: 1.15;
}

.landing-transcript h2 {
	margin-top: 1.75rem;
	font-size: 1.2rem;
}

.landing-timeline {
	display: grid;
	gap: 0.45rem;
}

.landing-row {
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1fr);
	align-items: center;
	gap: 0.75rem;
}

.landing-row-label {
	color: var(--ink-2);
	font-family: var(--font-mono);
	font-size: 0.75rem;
}

.landing-row-total .landing-row-label {
	color: var(--ink);
	font-weight: 700;
}

.landing-row-total {
	margin-top: 0.35rem;
	border-top: 2px dashed var(--ink-3);
	padding-top: 0.6rem;
}

.landing-track {
	position: relative;
	height: 1.1rem;
}

.landing-row-total .landing-track {
	height: 1.5rem;
}

.landing-bar {
	position: absolute;
	top: 0;
	bottom: 0;
	border: 2px solid var(--ink);
	border-radius: 4px;
}

.landing-turn {
	background: var(--accent-fill);
}

.landing-grace {
	background: repeating-linear-gradient(135deg, var(--sun) 0 4px, var(--card) 4px 8px);
}

.landing-union {
	background: var(--complete-fill);
}

/* Synthetic day on a 09:00–12:00 axis: 1% is 1.8 minutes. */
.turn-1 {
	left: 5.556%;
	width: 8.333%;
}

.grace-1 {
	left: 13.889%;
	width: 8.333%;
}

.turn-2 {
	left: 17.778%;
	width: 10%;
}

.grace-2 {
	left: 27.778%;
	width: 8.333%;
}

.turn-3 {
	left: 55.556%;
	width: 6.667%;
}

.grace-3 {
	left: 62.222%;
	width: 8.333%;
}

.union-1 {
	left: 5.556%;
	width: 30.556%;
}

.union-2 {
	left: 55.556%;
	width: 15%;
}

.landing-axis .landing-track {
	height: 1.2rem;
	border-top: 2px solid var(--ink);
}

.landing-tick {
	position: absolute;
	top: 0.15rem;
	color: var(--ink-2);
	font-family: var(--font-mono);
	font-size: 0.7rem;
	transform: translateX(-50%);
}

.landing-tick-0 {
	left: 0;
	transform: none;
}

.landing-tick-1 {
	left: 33.333%;
}

.landing-tick-2 {
	left: 66.667%;
}

.landing-tick-3 {
	right: 0;
	transform: none;
}

.landing-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.1rem;
	margin: 1rem 0 0.75rem;
	font-size: 0.85rem;
}

.landing-legend-item {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	max-width: 100%;
}

.landing-swatch {
	flex: none;
}

.landing-swatch {
	display: inline-block;
	width: 1.4rem;
	height: 0.8rem;
	border: 2px solid var(--ink);
	border-radius: 3px;
}

.landing-figure figcaption {
	color: var(--ink-2);
	font-size: 0.9rem;
}

.landing-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
}

.landing-split h3:first-child {
	margin-top: 0;
}

.landing-status {
	display: grid;
	/* minmax(0, …) lets rows shrink below their longest word at large text sizes. */
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
	margin: 0 0 1.5rem;
	container: landing-status / inline-size;
}

.landing-status div {
	display: grid;
	grid-template-columns: 9rem minmax(0, 1fr);
	gap: 1rem;
	border: var(--border);
	border-radius: var(--radius-sm);
	background: var(--paper);
	padding: 0.85rem 1rem;
}

.landing-status dt {
	font-weight: 700;
}

.landing-status dt,
.landing-status dd {
	overflow-wrap: anywhere;
	hyphens: auto;
}

/* Only very narrow lists, such as 320px with 200% text, give up row padding for words. */
@container landing-status (max-width: 14rem) {
	.landing-status div {
		padding: 0.5rem 0.55rem;
	}
}

.landing-status dd {
	margin: 0;
}

.landing-owner {
	margin-top: 1.75rem;
	border: var(--border);
	border-radius: var(--radius-sm);
	background: var(--warning-bg);
	color: var(--warning-ink);
	padding: 1rem 1.25rem;
}

.landing-owner h3 {
	margin-top: 0;
}

.landing-owner p:last-child {
	margin-bottom: 0;
}

.landing-footer p {
	max-width: var(--measure);
}

@media (max-width: 40rem) {
	.landing-cards,
	.landing-split {
		grid-template-columns: minmax(0, 1fr);
	}

	.landing-status div {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.2rem;
	}

	.landing-figure {
		padding: 0.75rem;
	}
}

/* The figure's own width decides the illustration layout, so narrow screens and
   large text both stack each label above a full-width track. */
@container landing-figure (max-width: 30rem) {
	.landing-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.15rem;
	}

	.landing-axis .landing-row-label {
		display: none;
	}
}

/* Keep only the end ticks when four time labels no longer fit side by side.
   They flow instead of sitting absolutely, so large text wraps rather than overlaps. */
@container landing-figure (max-width: 24rem) {
	.landing-tick-1,
	.landing-tick-2 {
		display: none;
	}

	.landing-axis .landing-track {
		display: flex;
		flex-wrap: wrap;
		height: auto;
	}

	.landing-tick {
		position: static;
	}

	.landing-tick-3 {
		margin-left: auto;
	}
}

@media (max-width: 48rem) {
	.masthead,
	.section-heading {
		flex-direction: column;
		align-items: flex-start;
	}

	.verdict-grid,
	.filter-grid,
	.executor-grid {
		grid-template-columns: 1fr;
	}

	.section-heading .range-controls {
		width: 100%;
	}

	.custom-range {
		justify-content: flex-start;
	}

	.executor-card dl div {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.scroll-hint {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	button:where(:not(:disabled)):hover,
	a.button:hover,
	button:where(:not(:disabled)):active,
	a.button:active {
		transform: none;
	}
}

@media (forced-colors: active) {
	.status-mark,
	.gantt-bar,
	.trend-line,
	.legend-line,
	.heat-cell,
	.meter-fill {
		forced-color-adjust: auto;
	}

	.heat-selected-week {
		border-width: 2px;
	}

	button[aria-pressed="true"] {
		outline: 2px solid ButtonText;
	}

	section,
	.verdict,
	.executor-card,
	.panel-notice {
		box-shadow: none;
	}
}