/* ===== SECTIONS =====
   Layout for each section. Anything reusable belongs in components.css; what's
   here is genuinely specific to one screen. */

.section-title {
	margin: var(--s-6) 0 var(--s-3);
	font-size: var(--fs-md);
	font-weight: 600;
}

/* ===== DASHBOARD ===== */
.dash-hero { margin-bottom: var(--s-5); }
.dash-hero h1 { font-size: var(--fs-2xl); letter-spacing: -.025em; }
.dash-hero p { color: var(--text-3); font-size: var(--fs-base); }

/* Every auto-fit / auto-fill grid in this file guards its minimum with
   min(100%, …). Without it the track keeps its stated minimum even when the
   container is narrower than that, and the grid pushes out past the screen —
   which is exactly what a 300px card does inside a 288px phone. */
.stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
	gap: var(--s-3);
	margin-bottom: var(--s-5);
}

.stat-tile {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--s-4);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	color: var(--text);
	text-decoration: none;
	transition: border-color var(--t-fast), transform var(--t-fast);
}
.stat-tile:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.stat-tile-icon { color: var(--text-3); margin-bottom: var(--s-2); }
.stat-tile-icon svg { width: 18px; height: 18px; }
.stat-tile-value { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.stat-tile-label { color: var(--text-2); font-size: var(--fs-sm); }
.stat-tile-hint { color: var(--text-3); font-size: var(--fs-xs); }
.stat-tile.is-warning .stat-tile-value { color: var(--warning); }
.stat-tile.is-warning .stat-tile-hint { color: var(--warning); }
.stat-tile.is-success .stat-tile-value { color: var(--success); }

.dash-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: var(--s-4);
}

.dash-card { padding: var(--s-4) var(--s-5) var(--s-5); }
.dash-card-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }

.dash-link {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--text-3);
	font-size: var(--fs-xs);
	text-decoration: none;
}
.dash-link svg { width: 14px; height: 14px; }
.dash-link:hover { color: var(--accent-text); }

.dash-rows { display: flex; flex-direction: column; gap: 1px; margin: 0 calc(var(--s-2) * -1); }

.dash-row {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: 6px var(--s-2);
	border-radius: var(--r-sm);
	color: var(--text);
	font-size: var(--fs-base);
	text-decoration: none;
	transition: background var(--t-fast);
}
.dash-row:hover { background: var(--surface-2); }
.dash-row .dash-meta { margin-left: auto; flex: none; color: var(--text-3); font-size: var(--fs-xs); }
.dash-icon, .dash-pin { width: 15px; height: 15px; color: var(--text-3); flex: none; }

.dash-dot {
	width: 6px; height: 6px;
	flex: none;
	border-radius: 50%;
	background: var(--border-strong);
}
.dash-dot.is-danger { background: var(--danger); }
.dash-dot.is-warning { background: var(--warning); }

.dash-empty, .dash-lede { color: var(--text-3); font-size: var(--fs-base); }
.dash-lede { margin-bottom: var(--s-2); color: var(--text-2); }

.dash-storage {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin-top: var(--s-4);
	color: var(--text-3);
	font-size: var(--fs-xs);
}
.dash-storage .meter { flex: 1; }

/* ===== VAULT ===== */
.pw-list {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	overflow: hidden;
}

.pw-row {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: 10px var(--s-4);
	border-bottom: 1px solid var(--border);
	cursor: pointer;
	transition: background var(--t-fast);
}
.pw-row:last-child { border-bottom: 0; }
.pw-row:hover { background: var(--surface-2); }

.pw-mark {
	display: grid;
	place-items: center;
	width: 30px; height: 30px;
	flex: none;
	border-radius: var(--r-md);
	background: var(--accent-soft);
	color: var(--accent-text);
	font-size: var(--fs-sm);
	font-weight: 600;
}
.pw-mark.is-small { width: 20px; height: 20px; font-size: 10px; border-radius: var(--r-sm); }

.pw-main { flex: 1; min-width: 0; }
.pw-name { display: flex; align-items: center; gap: 5px; font-weight: 500; }
.pw-star { width: 13px; height: 13px; color: var(--warning); }
.pw-sub { color: var(--text-3); font-size: var(--fs-sm); }

.pw-meta { flex: none; }
.pw-actions { display: flex; gap: 2px; flex: none; opacity: 0; transition: opacity var(--t-fast); }
.pw-row:hover .pw-actions, .pw-row:focus-within .pw-actions { opacity: 1; }

@media (max-width: 700px) {
	.pw-meta { display: none; }
	.pw-actions { opacity: 1; }
}

/* ===== VAULT HEALTH ===== */
.audit { display: flex; flex-direction: column; gap: var(--s-4); }

.audit-score { display: flex; align-items: center; gap: var(--s-6); }
.audit-score-value { font-size: 2.75rem; font-weight: 650; line-height: 1; letter-spacing: -.04em; }
.audit-score-value.is-success { color: var(--success); }
.audit-score-value.is-warning { color: var(--warning); }
.audit-score-value.is-danger { color: var(--danger); }
.audit-score-label { color: var(--text-3); font-size: var(--fs-xs); }
.audit-score-body { flex: 1; display: flex; flex-direction: column; gap: var(--s-2); }
.audit-score-body p { color: var(--text-2); font-size: var(--fs-base); }

.audit-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: var(--s-4);
}

.audit-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.audit-head h3 { font-size: var(--fs-md); }
.audit-desc { color: var(--text-2); font-size: var(--fs-sm); }
.audit-items { display: flex; flex-direction: column; gap: 1px; margin: var(--s-3) calc(var(--s-2) * -1) 0; }

.audit-item {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	width: 100%;
	padding: 6px var(--s-2);
	border-radius: var(--r-sm);
	text-align: left;
	transition: background var(--t-fast);
}
.audit-item:hover { background: var(--surface-2); }
.audit-item svg { width: 14px; height: 14px; margin-left: auto; color: var(--text-3); flex: none; }
.audit-item .truncate { flex: 1; }

.audit-note { color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; }
.audit-more { margin-top: var(--s-2); color: var(--text-3); font-size: var(--fs-xs); }
.audit-group { padding: var(--s-2) 0; border-top: 1px solid var(--border); }
.audit-group:first-child { border-top: 0; }
.audit-group .audit-note { display: block; padding: 2px var(--s-2); }

/* ===== NOTES ===== */
.notes-pane { display: grid; grid-template-columns: 296px minmax(0, 1fr); }

.note-list-pane {
	display: flex;
	flex-direction: column;
	min-height: 0;
	border-right: 1px solid var(--border);
	background: var(--surface);
}

.note-list-head { padding: var(--s-3); border-bottom: 1px solid var(--border); }
.note-list-head .search { max-width: none; }

.note-tag-filter {
	display: flex;
	gap: var(--s-1);
	padding: var(--s-2) var(--s-3);
	overflow-x: auto;
	border-bottom: 1px solid var(--border);
	scrollbar-width: none;
}
.note-tag-filter::-webkit-scrollbar { display: none; }
.note-tag-filter button {
	padding: 3px 9px;
	border-radius: var(--r-full);
	background: var(--surface-2);
	color: var(--text-2);
	font-size: var(--fs-xs);
	white-space: nowrap;
	transition: background var(--t-fast), color var(--t-fast);
}
.note-tag-filter button.is-active { background: var(--accent-soft); color: var(--accent-text); }

.note-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-2); }
.note-list-empty { padding: var(--s-8) var(--s-4); color: var(--text-3); font-size: var(--fs-sm); text-align: center; }

.note-card {
	display: block;
	width: 100%;
	padding: 10px var(--s-3);
	margin-bottom: 2px;
	border-radius: var(--r-md);
	text-align: left;
	transition: background var(--t-fast);
}
.note-card:hover { background: var(--surface-2); }
.note-card.is-active { background: var(--accent-soft); }

.note-card-top { display: flex; align-items: center; gap: var(--s-2); }
.note-card-title { font-weight: 500; font-size: var(--fs-base); }
.note-card-pin { width: 13px; height: 13px; color: var(--accent-text); flex: none; }
.note-card-preview {
	margin-top: 2px;
	color: var(--text-3);
	font-size: var(--fs-sm);
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.note-card-foot { display: flex; align-items: center; gap: var(--s-2); margin-top: 6px; }
.note-card-foot > span:first-child { color: var(--text-3); font-size: var(--fs-xs); }

.note-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.note-head {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-4);
	border-bottom: 1px solid var(--border);
}
.note-back { display: none; }

.note-title {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	font-size: var(--fs-lg);
	font-weight: 600;
	letter-spacing: -.015em;
	outline: none;
}
.note-title::placeholder { color: var(--text-3); }

.note-tags {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--s-2);
	padding: var(--s-2) var(--s-4);
	border-bottom: 1px solid var(--border);
}
.note-tags > svg { width: 14px; height: 14px; color: var(--text-3); }

.note-tag {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 4px 2px 8px;
	border-radius: var(--r-full);
	background: var(--surface-2);
	color: var(--text-2);
	font-size: var(--fs-xs);
}
.note-tag button { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; color: var(--text-3); }
.note-tag button svg { width: 11px; height: 11px; }
.note-tag button:hover { background: var(--surface-3); color: var(--text); }

.note-tag-input {
	min-width: 110px;
	border: 0;
	background: none;
	color: var(--text);
	font-size: var(--fs-xs);
	outline: none;
}

.note-body { flex: 1; min-height: 0; display: grid; }
.note-body.is-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.note-body.is-write { grid-template-columns: minmax(0, 1fr); }
.note-body.is-write .note-preview { display: none; }
.note-body.is-read { grid-template-columns: minmax(0, 1fr); }
.note-body.is-read .note-editor { display: none; }

.note-editor { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--border); }
.note-body.is-write .note-editor { border-right: 0; }

.note-preview { min-width: 0; overflow-y: auto; padding: var(--s-5) var(--s-6) var(--s-12); }

.md-toolbar {
	display: flex;
	align-items: center;
	gap: 1px;
	padding: 5px var(--s-2);
	border-bottom: 1px solid var(--border);
	overflow-x: auto;
	scrollbar-width: none;
}
.md-toolbar::-webkit-scrollbar { display: none; }
.md-toolbar-sep { width: 1px; height: 18px; margin: 0 5px; background: var(--border); flex: none; }
.md-status { color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; padding-right: var(--s-2); }

.run-frame {
	width: 100%;
	height: min(60vh, 480px);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	background: #fff;
}

@media (max-width: 900px) {
	/* On a phone the list and the note are two screens, not two panes. */
	.notes-pane { grid-template-columns: minmax(0, 1fr); }
	.notes-pane .note-pane { display: none; }
	.notes-pane.is-detail .note-list-pane { display: none; }
	.notes-pane.is-detail .note-pane { display: flex; }
	.note-back { display: grid; }
	.note-body.is-split { grid-template-columns: minmax(0, 1fr); }
	.note-body.is-split .note-preview { display: none; }
}

/* ===== FILES ===== */
.files-pane { display: grid; grid-template-columns: 232px minmax(0, 1fr); position: relative; }
.files-pane:has(.files-preview:not([hidden])) { grid-template-columns: 232px minmax(0, 1fr) 340px; }

.files-pane.is-dropping::after {
	content: "Drop to upload";
	position: absolute;
	inset: var(--s-3);
	z-index: 5;
	display: grid;
	place-items: center;
	border: 2px dashed var(--accent);
	border-radius: var(--r-lg);
	background: color-mix(in srgb, var(--accent) 8%, var(--bg));
	color: var(--accent-text);
	font-weight: 500;
	pointer-events: none;
}

.files-tree, .code-tree {
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: var(--surface);
	border-right: 1px solid var(--border);
}

.tree-head {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-3);
	border-bottom: 1px solid var(--border);
	font-size: var(--fs-sm);
	font-weight: 600;
}
.tree-head .truncate { flex: 1; }

.tree-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-2); }

.tree-row {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding-right: var(--s-2);
	border-radius: var(--r-sm);
	color: var(--text-2);
	font-size: var(--fs-sm);
	cursor: pointer;
	transition: background var(--t-fast), color var(--t-fast);
}
.tree-row > svg { width: 15px; height: 15px; flex: none; }
.tree-row:hover { background: var(--surface-2); color: var(--text); }
.tree-row.is-active { background: var(--accent-soft); color: var(--accent-text); }
.tree-row.is-drop { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }

.tree-toggle {
	display: grid;
	place-items: center;
	width: 16px; height: 16px;
	flex: none;
	border-radius: 4px;
	color: var(--text-3);
}
.tree-toggle svg { width: 13px; height: 13px; transition: transform var(--t-fast); }
.tree-toggle.is-open svg { transform: rotate(90deg); }

.storage { padding: var(--s-3); border-top: 1px solid var(--border); }
.storage-row { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: var(--fs-xs); }

.files-main { min-width: 0; overflow-y: auto; padding: var(--s-4) var(--s-5) var(--s-10); }

.crumbs {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-bottom: var(--s-4);
	font-size: var(--fs-sm);
	overflow-x: auto;
	scrollbar-width: none;
}
.crumbs::-webkit-scrollbar { display: none; }
.crumbs button {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 7px;
	border-radius: var(--r-sm);
	color: var(--text-2);
	white-space: nowrap;
	transition: background var(--t-fast), color var(--t-fast);
}
.crumbs button:hover { background: var(--surface-2); color: var(--text); }
.crumbs button:last-child { color: var(--text); font-weight: 500; }
.crumbs svg { width: 14px; height: 14px; }
.crumb-sep { color: var(--text-3); flex: none; }

.selection-bar {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-2) var(--s-3);
	margin-bottom: var(--s-3);
	background: var(--accent-soft);
	border-radius: var(--r-md);
	color: var(--accent-text);
	font-size: var(--fs-sm);
}

.file-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }

.file-row {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: 8px var(--s-3);
	border-bottom: 1px solid var(--border);
	cursor: pointer;
	transition: background var(--t-fast);
}
.file-row:last-child { border-bottom: 0; }
.file-row:hover { background: var(--surface-2); }
.file-row.is-selected { background: var(--accent-soft); }
.file-row.is-drop { box-shadow: inset 0 0 0 1px var(--accent); }

.file-icon { color: var(--text-3); flex: none; }
.file-icon svg { width: 17px; height: 17px; }
.file-row.kind-folder .file-icon { color: var(--accent); }

.file-name { flex: 1; display: flex; align-items: center; gap: 5px; }
.file-star { width: 12px; height: 12px; color: var(--warning); flex: none; }
.file-meta { flex: none; color: var(--text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.file-when { width: 110px; text-align: right; }

@media (max-width: 700px) {
	.file-when { display: none; }
}

.file-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 124px), 1fr));
	gap: var(--s-3);
}

.file-tile {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--s-3);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	cursor: pointer;
	transition: border-color var(--t-fast), transform var(--t-fast);
}
.file-tile:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.file-tile.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.file-tile.is-drop { border-color: var(--accent); }

.file-thumb {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	border-radius: var(--r-md);
	background: var(--surface-2);
	color: var(--text-3);
	overflow: hidden;
}
.file-thumb svg { width: 26px; height: 26px; }
.file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-tile.kind-folder .file-thumb { color: var(--accent); }

.file-tile-name { font-size: var(--fs-sm); font-weight: 500; }
.file-tile-meta { color: var(--text-3); font-size: var(--fs-xs); }

.files-preview {
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: var(--surface);
	border-left: 1px solid var(--border);
}
.preview-head {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-3);
	border-bottom: 1px solid var(--border);
	font-size: var(--fs-sm);
	font-weight: 500;
}
.preview-head .truncate { flex: 1; }
.preview-body { flex: 1; min-height: 0; display: grid; place-items: center; padding: var(--s-3); overflow: auto; }
.preview-media { max-width: 100%; max-height: 100%; border-radius: var(--r-md); }
.preview-frame { width: 100%; height: 100%; border: 0; background: #fff; border-radius: var(--r-md); }
.preview-foot {
	display: flex;
	justify-content: space-between;
	padding: var(--s-2) var(--s-3);
	border-top: 1px solid var(--border);
	color: var(--text-3);
	font-size: var(--fs-xs);
}

.move-list { display: flex; flex-direction: column; gap: 1px; max-height: 50vh; overflow-y: auto; padding-bottom: var(--s-3); }
.move-item {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: 8px var(--s-3);
	border-radius: var(--r-md);
	text-align: left;
	font-size: var(--fs-base);
	transition: background var(--t-fast);
}
.move-item svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.move-item:hover { background: var(--surface-2); }

.upload-tray {
	position: fixed;
	right: var(--s-4);
	bottom: var(--s-4);
	z-index: 70;
	width: min(340px, calc(100vw - var(--s-8)));
	background: var(--overlay);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
	animation: toast-in var(--t-base) var(--ease);
}
.upload-tray-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
	border-bottom: 1px solid var(--border);
	font-size: var(--fs-sm);
}
.upload-panel { max-height: 240px; overflow-y: auto; padding: var(--s-2); }

.upload-row {
	display: grid;
	grid-template-columns: 1fr 70px auto;
	align-items: center;
	gap: var(--s-2);
	padding: 5px var(--s-2);
	font-size: var(--fs-xs);
}
.upload-row .meter > span { width: 0; }
.upload-row.is-done .meter > span { background: var(--success); }
.upload-row.is-failed .meter > span { background: var(--danger); width: 100% !important; }
.upload-size { color: var(--text-3); text-align: right; }

@media (max-width: 900px) {
	.files-pane, .files-pane:has(.files-preview:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
	.files-tree { display: none; }

	/* A preview on a phone is the whole screen, not a third column squeezed to
	   full width. It used to be inset by the height of the topbar, which is a
	   guess that is wrong the moment anything sits above the bar (the demo
	   banner) or the bar wraps to two rows — the panel then covered the header
	   it was trying to sit under. Covering everything, deliberately, is both
	   simpler and what a viewer should do: it has its own title and its own
	   close button. */
	.files-preview {
		position: fixed;
		inset: 0;
		z-index: 45;
		border-left: 0;
		padding-top: env(safe-area-inset-top, 0px);
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
	.preview-head { padding: var(--s-2) var(--s-3); }
	.preview-head .truncate { font-size: var(--fs-md); }

	.upload-tray { bottom: calc(var(--tabbar-h) + var(--s-3)); }
}

/* ===== CODE ===== */
.code-pane { display: grid; grid-template-columns: 208px minmax(0, 1fr) minmax(0, 1fr); }
.code-pane.is-code { grid-template-columns: 208px minmax(0, 1fr) 0; }
.code-pane.is-code .code-preview { display: none; }
.code-pane.is-preview { grid-template-columns: 208px 0 minmax(0, 1fr); }
.code-pane.is-preview .code-editor { display: none; }

.code-editor { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--border); }

.code-tabs {
	display: flex;
	gap: 1px;
	padding: 4px var(--s-2);
	border-bottom: 1px solid var(--border);
	background: var(--surface);
	overflow-x: auto;
	scrollbar-width: none;
}
.code-tabs::-webkit-scrollbar { display: none; }

.code-tab {
	padding: 4px 10px;
	border-radius: var(--r-sm);
	color: var(--text-3);
	font-size: var(--fs-sm);
	white-space: nowrap;
	max-width: 160px;
	transition: background var(--t-fast), color var(--t-fast);
}
.code-tab:hover { background: var(--surface-2); color: var(--text-2); }
.code-tab.is-active { background: var(--surface-2); color: var(--text); }

.code-preview { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); }

.preview-bar {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: 5px var(--s-3);
	border-bottom: 1px solid var(--border);
}

.preview-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff; }
:root[data-theme="dark"] .preview-stage { background: #1a1a20; }
.preview-stage .preview-frame { flex: 1; border-radius: 0; }

.console {
	height: 40%;
	min-height: 120px;
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--border);
	background: var(--surface);
}
.console-head { display: flex; align-items: center; gap: var(--s-2); padding: 4px var(--s-3); border-bottom: 1px solid var(--border); }
.console-body { flex: 1; overflow-y: auto; padding: var(--s-2) var(--s-3); font-family: var(--mono); font-size: var(--fs-xs); }
.console-line { padding: 3px 0; border-bottom: 1px solid var(--border); white-space: pre-wrap; word-break: break-word; }
.console-line:last-child { border-bottom: 0; }
.console-line.is-error { color: var(--danger); }
.console-line.is-warn { color: var(--warning); }
.console-empty { color: var(--text-3); padding: var(--s-3) 0; }

.project-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: var(--s-4);
}

.project-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--s-4);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	cursor: pointer;
	text-align: left;
	transition: border-color var(--t-fast), transform var(--t-fast);
}
.project-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.project-card span { color: var(--text-3); font-size: var(--fs-xs); }
.project-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-3); }
.project-top > svg { width: 20px; height: 20px; color: var(--accent); }

.project-card.is-new { align-items: flex-start; border-style: dashed; }
.project-add {
	display: grid;
	place-items: center;
	width: 32px; height: 32px;
	margin-bottom: var(--s-3);
	border-radius: var(--r-md);
	background: var(--accent-soft);
	color: var(--accent-text);
}
.project-add svg { width: 17px; height: 17px; }

@media (max-width: 900px) {
	.code-pane, .code-pane.is-code, .code-pane.is-preview { grid-template-columns: minmax(0, 1fr); }
	.code-tree { display: none; }
	.code-pane .code-preview { display: none; }
	.code-pane.is-preview .code-preview { display: flex; }
	.code-pane.is-preview .code-editor { display: none; }
}

/* ===== TO-DO ===== */
.todo-page { max-width: none; }

.todo-board {
	display: flex;
	gap: var(--s-4);
	align-items: flex-start;
	overflow-x: auto;
	padding-bottom: var(--s-4);
}

.todo-column {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	width: 300px;
	flex: none;
	padding: var(--s-3);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
}

.todo-column-head { display: flex; align-items: center; gap: var(--s-2); }
.todo-column-head strong { flex: 1; font-size: var(--fs-base); }

.todo-items { display: flex; flex-direction: column; gap: 2px; max-height: 55vh; overflow-y: auto; }
.todo-empty { padding: var(--s-4) var(--s-2); color: var(--text-3); font-size: var(--fs-sm); }

.todo-item {
	display: flex;
	align-items: flex-start;
	gap: var(--s-2);
	padding: 6px var(--s-2);
	border-radius: var(--r-md);
	border-left: 2px solid transparent;
	transition: background var(--t-fast), opacity var(--t-fast);
}
.todo-item:hover { background: var(--surface-2); }
.todo-item.is-over { box-shadow: inset 0 2px 0 var(--accent); }
.todo-item.is-done { opacity: .5; }
.todo-item.is-done .todo-text > span:first-child { text-decoration: line-through; }
.todo-item.p-high { border-left-color: var(--danger); }
.todo-item.p-medium { border-left-color: var(--warning); }
.todo-item.p-low { border-left-color: var(--info); }

.todo-item .checkbox { margin-top: 2px; }
.todo-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; font-size: var(--fs-base); }
.todo-text > span:first-child { overflow-wrap: anywhere; }
.todo-more { opacity: 0; flex: none; }
.todo-item:hover .todo-more, .todo-item:focus-within .todo-more { opacity: 1; }

.todo-add {
	width: 100%;
	padding: 7px var(--s-2);
	border: 0;
	border-radius: var(--r-md);
	background: var(--surface-2);
	font-size: var(--fs-base);
	outline: none;
}
.todo-add:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }

.todo-add-column {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	width: 220px;
	flex: none;
	padding: var(--s-4);
	border: 1px dashed var(--border-strong);
	border-radius: var(--r-lg);
	color: var(--text-3);
	font-size: var(--fs-base);
	transition: border-color var(--t-fast), color var(--t-fast);
}
.todo-add-column:hover { border-color: var(--accent); color: var(--accent-text); }

@media (max-width: 700px) {
	.todo-board { flex-direction: column; overflow-x: visible; }
	.todo-column, .todo-add-column { width: 100%; }
	.todo-items { max-height: none; }
}

/* ===== ROUTINE =====
   Built thumb-first. The day view is one column of targets no smaller than a
   fingertip, with everything that isn't a target — times, notes, the more menu —
   deliberately quieter than the thing you came to tap. */
.rt-page { max-width: 660px; }

/* Follows the thumb during a swipe and springs back when the gesture is
   abandoned. The transition is cleared for the duration of the drag itself, so
   the day tracks the finger exactly rather than easing behind it. */
.rt-day { transition: transform var(--t-base) var(--ease); }

/* Day strip */
.rt-strip {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin-bottom: var(--s-4);
}
.rt-strip-label {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	padding: var(--s-1) var(--s-2);
	border-radius: var(--r-md);
	text-align: left;
}
.rt-strip-label:hover { background: var(--surface-2); }
.rt-strip-label strong { font-size: var(--fs-lg); letter-spacing: -.015em; }
.rt-strip-label span { color: var(--text-3); font-size: var(--fs-xs); }

/* Present for its picker, not for its looks: the visible control is the date
   label beside it. */
.rt-date { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Summary */
.rt-summary {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding: var(--s-4) var(--s-5);
	margin-bottom: var(--s-5);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
}

/* A conic gradient rather than an SVG arc: one element, one custom property,
   and it inherits the theme's colours without any JavaScript to keep in sync. */
.rt-ring {
	position: relative;
	display: grid;
	place-items: center;
	width: 60px; height: 60px;
	flex: none;
	border-radius: 50%;
	background: conic-gradient(var(--accent) calc(var(--rt-p) * 1%), var(--surface-3) 0);
}
.rt-ring::after {
	content: "";
	position: absolute;
	inset: 5px;
	border-radius: 50%;
	background: var(--surface);
}
.rt-ring-value {
	position: relative;
	z-index: 1;
	font-size: var(--fs-sm);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.rt-summary-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rt-summary-text strong { font-size: var(--fs-md); }
.rt-summary-text span { color: var(--text-3); font-size: var(--fs-sm); }

.rt-streak {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	flex: none;
	color: var(--warning);
}
.rt-streak svg { width: 17px; height: 17px; }
.rt-streak strong { font-size: var(--fs-lg); line-height: 1.1; font-variant-numeric: tabular-nums; }
.rt-streak span { color: var(--text-3); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }

/* The day list */
.rt-group { margin-bottom: var(--s-5); }
.rt-group-title {
	margin-bottom: var(--s-2);
	color: var(--text-3);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.rt-items {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	overflow: hidden;
}

.rt-item {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: 2px var(--s-3) 2px var(--s-4);
	border-bottom: 1px solid var(--border);
}
.rt-item:last-child { border-bottom: 0; }

.rt-check {
	display: grid;
	place-items: center;
	width: 26px; height: 26px;
	flex: none;
	border: 1.75px solid var(--border-strong);
	border-radius: 50%;
	color: transparent;
	transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.rt-check svg { width: 15px; height: 15px; }
.rt-check:hover { border-color: var(--accent); }
.rt-item.is-done .rt-check {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--text-invert);
}

/* The whole row is the target, not just the circle — on a phone, aiming at a
   26px dot seventeen times a day is a tax.

   Two columns: a gutter for the clock and one column for everything that is
   words. A name long enough to wrap, and any note beneath it, stay inside that
   second column instead of running back under the time. */
.rt-body {
	flex: 1;
	min-width: 0;
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	column-gap: var(--s-2);
	row-gap: 1px;
	align-items: baseline;
	padding: 12px 0;
	text-align: left;
}
/* Nothing to put in the gutter, so it collapses rather than indenting text
   past an empty space. */
.rt-body.is-untimed { grid-template-columns: 0 minmax(0, 1fr); column-gap: 0; }

.rt-time {
	grid-column: 1;
	color: var(--text-3);
	font-size: var(--fs-xs);
	font-variant-numeric: tabular-nums;
}
.rt-text { grid-column: 2; font-size: var(--fs-md); overflow-wrap: anywhere; }
.rt-bell {
	display: inline-block;
	width: 13px; height: 13px;
	margin-left: 5px;
	vertical-align: -1px;
	color: var(--text-3);
}
.rt-note { grid-column: 2; color: var(--text-3); font-size: var(--fs-xs); }
.rt-daynote {
	grid-column: 2;
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--accent-text);
	font-size: var(--fs-xs);
}
.rt-daynote svg { width: 11px; height: 11px; flex: none; }

.rt-item.is-done .rt-text { color: var(--text-3); text-decoration: line-through; }
.rt-item.is-done .rt-time { opacity: .6; }

.rt-more { opacity: 0; flex: none; }
.rt-item:hover .rt-more, .rt-item:focus-within .rt-more { opacity: 1; }

.rt-blank { padding: var(--s-8) 0; color: var(--text-3); text-align: center; }

/* Report */
.rt-range { margin-bottom: var(--s-5); }

.rt-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
	gap: var(--s-3);
	margin-bottom: var(--s-5);
}
.rt-stat {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: var(--s-4);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
}
.rt-stat-value { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.rt-stat-label { color: var(--text-2); font-size: var(--fs-sm); }
.rt-stat-hint { color: var(--text-3); font-size: var(--fs-xs); }

.rt-panel { margin-bottom: var(--s-4); }
.rt-panel-lede { margin: var(--s-1) 0 var(--s-3); color: var(--text-3); font-size: var(--fs-sm); }

.rt-heat-wrap { margin-top: var(--s-3); overflow-x: auto; }
.rt-heat {
	display: grid;
	grid-template-rows: repeat(7, 1fr);
	grid-auto-flow: column;
	gap: 3px;
	width: max-content;
}
.rt-cell {
	display: block;
	width: 12px; height: 12px;
	border-radius: 3px;
	background: var(--surface-2);
}
.rt-cell.is-blank { background: transparent; }
.rt-cell.is-rest { background: var(--surface-2); opacity: .5; }
.rt-cell.is-zero { background: var(--surface-3); }
.rt-cell.is-low { background: color-mix(in srgb, var(--danger) 45%, var(--surface-2)); }
.rt-cell.is-1 { background: color-mix(in srgb, var(--accent) 35%, var(--surface-2)); }
.rt-cell.is-2 { background: color-mix(in srgb, var(--accent) 65%, var(--surface-2)); }
.rt-cell.is-3 { background: var(--accent); }

.rt-legend {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: var(--s-3);
	color: var(--text-3);
	font-size: var(--fs-xs);
}
.rt-legend > span:last-child { margin-left: var(--s-2); }

.rt-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: var(--s-2);
	margin-top: var(--s-3);
}
.rt-weekday { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.rt-weekday-pct { color: var(--text-3); font-size: 10px; font-variant-numeric: tabular-nums; }
.rt-weekday.is-best .rt-weekday-pct { color: var(--text-2); font-weight: 600; }
.rt-bar {
	display: flex;
	align-items: flex-end;
	width: 100%;
	height: 64px;
	background: var(--surface-2);
	border-radius: var(--r-sm);
	overflow: hidden;
}
.rt-bar > span { width: 100%; background: var(--accent); border-radius: var(--r-sm) var(--r-sm) 0 0; }
.rt-weekday-name { color: var(--text-3); font-size: var(--fs-xs); }

.rt-breakdown { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.rt-break-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 90px 52px 44px;
	align-items: center;
	gap: var(--s-3);
	font-size: var(--fs-sm);
}
.rt-break-name { color: var(--text); }
.rt-break-count, .rt-break-percent {
	color: var(--text-3);
	font-size: var(--fs-xs);
	font-variant-numeric: tabular-nums;
	text-align: right;
}
.rt-break-percent { color: var(--text-2); font-size: var(--fs-sm); }

.rt-missed { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.rt-missed-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); }
.rt-missed-days { color: var(--danger); font-size: var(--fs-xs); flex: none; }

/* Setup */
.rt-reminders { margin-bottom: var(--s-5); }
.rt-reminder-head { display: flex; align-items: flex-start; gap: var(--s-4); }
.rt-reminder-head strong { font-size: var(--fs-md); }
.rt-reminder-sub { margin-top: var(--s-1); color: var(--text-2); font-size: var(--fs-sm); }

.switch {
	position: relative;
	width: 44px; height: 26px;
	flex: none;
	border-radius: var(--r-full);
	background: var(--surface-3);
	transition: background var(--t-base) var(--ease);
}
.switch.is-on { background: var(--accent); }
.switch:disabled { opacity: .45; cursor: not-allowed; }
.switch-knob {
	position: absolute;
	top: 3px; left: 3px;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	transition: transform var(--t-base) var(--ease);
}
.switch.is-on .switch-knob { transform: translateX(18px); }

.rt-edit-list { display: flex; flex-direction: column; gap: var(--s-3); }

.rt-edit-card {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	padding: var(--s-4);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
}
.rt-edit-card.is-dragging { opacity: .5; }
.rt-edit-card.is-over { border-color: var(--accent); }

.rt-edit-head { display: flex; align-items: center; gap: var(--s-2); }
.rt-grip { color: var(--text-3); cursor: grab; }
.rt-edit-text { flex: 1; font-size: var(--fs-md); }

.rt-edit-times { display: flex; align-items: flex-end; gap: var(--s-3); flex-wrap: wrap; }
.rt-edit-field { display: flex; flex-direction: column; gap: 3px; }
.rt-edit-field > span { color: var(--text-3); font-size: var(--fs-xs); }
.rt-edit-field .input { width: 130px; font-variant-numeric: tabular-nums; }

.rt-edit-warn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding-bottom: 8px;
	color: var(--warning);
	font-size: var(--fs-xs);
}
.rt-edit-warn svg { width: 13px; height: 13px; }

.rt-edit-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	flex-wrap: wrap;
}
.rt-days { display: flex; gap: 5px; }
.rt-day-chip {
	width: 32px; height: 32px;
	border: 1px solid var(--border);
	border-radius: 50%;
	color: var(--text-3);
	font-size: var(--fs-xs);
	font-weight: 600;
	transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.rt-day-chip:hover { border-color: var(--border-strong); }
.rt-day-chip.is-on { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }

.rt-edit-note { font-size: var(--fs-sm); }

.rt-note-add {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	align-self: flex-start;
	color: var(--text-3);
	font-size: var(--fs-xs);
}
.rt-note-add svg { width: 13px; height: 13px; }
.rt-note-add:hover { color: var(--accent-text); }

.rt-starter {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-10) var(--s-5);
	background: var(--surface);
	border: 1px dashed var(--border-strong);
	border-radius: var(--r-lg);
	text-align: center;
}
.rt-starter h3 { font-size: var(--fs-md); }
.rt-starter p { max-width: 42ch; color: var(--text-2); font-size: var(--fs-base); }

.rt-add-wrap { margin-top: var(--s-4); }
.rt-setup-foot { margin-top: var(--s-3); color: var(--text-3); font-size: var(--fs-xs); }

@media (max-width: 620px) {
	.rt-summary { gap: var(--s-3); padding: var(--s-3) var(--s-4); }
	.rt-body { grid-template-columns: 52px minmax(0, 1fr); }
	.rt-break-row { grid-template-columns: minmax(0, 1fr) 60px 44px; }
	.rt-break-count { display: none; }
	.rt-edit-field .input { width: 118px; }

	/* Names and dates each get a full line rather than fighting over one, which
	   is what truncated both of them. */
	.rt-missed-row { flex-direction: column; align-items: flex-start; gap: 1px; }
	.rt-missed-row .rt-break-name { max-width: 100%; }
}

/* ===== HEALTH ===== */
.stat-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
	gap: var(--s-3);
}
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-value { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.stat-label { color: var(--text-3); font-size: var(--fs-xs); }

.heatmap {
	display: grid;
	grid-template-rows: repeat(7, 1fr);
	grid-auto-flow: column;
	gap: 3px;
	margin-top: var(--s-3);
	overflow-x: auto;
}
.heat-cell {
	width: 11px; height: 11px;
	border-radius: 3px;
	background: var(--surface-2);
}
.heat-cell.is-1 { background: color-mix(in srgb, var(--accent) 40%, var(--surface-2)); }
.heat-cell.is-2 { background: color-mix(in srgb, var(--accent) 70%, var(--surface-2)); }
.heat-cell.is-3 { background: var(--accent); }

.workout-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: var(--s-4);
}

.workout-card {
	display: flex;
	flex-direction: column;
	padding: var(--s-4);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
}
.workout-top { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.workout-top strong { flex: 1; font-size: var(--fs-md); }

.workout-exercises { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.workout-exercise {
	display: flex;
	justify-content: space-between;
	gap: var(--s-3);
	color: var(--text-2);
	font-size: var(--fs-sm);
}
.workout-exercise span:last-child { color: var(--text-3); font-variant-numeric: tabular-nums; flex: none; }

.workout-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-2);
	margin-top: var(--s-4);
	padding-top: var(--s-3);
	border-top: 1px solid var(--border);
	color: var(--text-3);
	font-size: var(--fs-xs);
}

.session-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	padding: 10px var(--s-4);
	border-bottom: 1px solid var(--border);
}
.session-row:last-child { border-bottom: 0; }
.session-row strong { display: block; font-size: var(--fs-base); font-weight: 500; }
.session-sub, .session-when { color: var(--text-3); font-size: var(--fs-xs); }

/* Session runner */
.run-body { padding-bottom: var(--s-4); }
.run-step { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-6) 0 var(--s-2); text-align: center; }
.run-kind { color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.run-name { font-size: var(--fs-xl); }
.run-hint { color: var(--text-2); font-size: var(--fs-sm); max-width: 40ch; }
.run-clock { font-size: 3rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.04em; line-height: 1; }
.run-next { color: var(--text-3); font-size: var(--fs-sm); }
.run-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); width: 100%; max-width: 320px; text-align: left; }
.run-fields .field { margin-bottom: 0; }
.run-input { text-align: center; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.run-buttons { display: flex; gap: var(--s-2); }
.run-done { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-8) 0 var(--s-4); text-align: center; }
.run-done h3 { font-size: var(--fs-lg); }
.run-done p { color: var(--text-2); }

/* Workout builder */
.builder-list { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-3); }
.builder-row { padding: var(--s-3); background: var(--surface-2); border-radius: var(--r-md); }
.builder-grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) 100px 80px 70px 80px auto;
	gap: var(--s-2);
	align-items: center;
}
.builder-note { margin-top: var(--s-2); font-size: var(--fs-sm); }

@media (max-width: 700px) {
	.builder-grid { grid-template-columns: 1fr 1fr; }
	.builder-grid > *:first-child { grid-column: 1 / -1; }
}

/* Session history */
.history { display: flex; flex-direction: column; gap: var(--s-3); padding-bottom: var(--s-3); max-height: 60vh; overflow-y: auto; }
.history-entry { padding: var(--s-3); background: var(--surface-2); border-radius: var(--r-md); }
.history-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.history-head span { color: var(--text-3); font-size: var(--fs-xs); flex: 1; }
.history-sets { display: flex; flex-direction: column; gap: 3px; }
.history-row { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); }
.history-row .mono { color: var(--text-2); font-size: var(--fs-xs); }

/* ===== TOUCH =====
   The last pass over every section for a screen that is held rather than
   pointed at: rows tall enough to hit, controls that a hover was hiding, and
   the handful of places where a desktop density simply doesn't survive being
   cut to 390px. */
@media (max-width: 700px) {

	/* A row menu that only appears on hover is, on a phone, a menu that does
	   not exist. The vault's row already had this fix; the to-do board and the
	   routine's day never got it. */
	.todo-more, .rt-more { opacity: 1; }

	/* Lists are the app's main surface, and every one of them was built at a
	   density meant for a mouse. */
	.dash-row { padding: 9px var(--s-2); }
	.file-row { padding: 11px var(--s-3); }
	.audit-item { padding: 9px var(--s-2); }
	.note-card { padding: var(--s-3); }
	.session-row { padding: var(--s-3) var(--s-4); }
	.move-item { padding: 11px var(--s-3); }

	/* Three actions on a vault row leave a login called "Bank (personal)" about
	   forty pixels to say so in. The username copy stays in the row's menu,
	   which has both copies in it; the password — the reason anyone opens a
	   vault on a phone — keeps its own button. */
	.pw-copy-user { display: none; }
	.pw-row { padding: var(--s-2) var(--s-3); }

	.rt-check { width: 30px; height: 30px; }
	.rt-check svg { width: 17px; height: 17px; }
	.rt-day-chip { width: 38px; height: 38px; }

	.note-tag-filter { padding: var(--s-2); }
	.note-tag-filter button { padding: 6px 12px; font-size: var(--fs-sm); }
	.note-tag button { width: 20px; height: 20px; }

	.code-tab { padding: 8px var(--s-3); font-size: var(--fs-base); }

	.rt-stats { gap: var(--s-2); }
	.workout-exercise { font-size: var(--fs-base); }

	/* Rows answer a tap the way they answered a cursor. Without this a list is
	   completely inert under a finger until the next screen arrives, which on a
	   slow connection is long enough to tap again. */
	.pw-row:active,
	.file-row:active,
	.dash-row:active,
	.audit-item:active,
	.note-card:active,
	.move-item:active,
	.session-row:active { background: var(--surface-3); }
	.file-tile:active, .project-card:active, .stat-tile:active { border-color: var(--border-strong); }
	.rt-item:active { background: var(--surface-2); }
}

/* A tablet has the room for the wide layout and none of the hovering that
   layout assumed, so it gets the revealed controls without the resizing. */
@media (hover: none) and (min-width: 701px) {
	.pw-actions, .todo-more, .rt-more { opacity: 1; }
}

/* Small phones. auto-fit does the right thing down to about 360px and then
   drops every number grid to a single column, which turns four short facts into
   a page you have to scroll. Two columns is still comfortable at 320px, so it
   is asked for by name rather than inferred from a minimum width. */
@media (max-width: 560px) {
	.stat-grid, .rt-stats, .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The narrowest phones still in use. Two columns hold, but only if the figure
   inside them gives up a few points first. */
@media (max-width: 360px) {
	.stat-tile { padding: var(--s-3); }
	.stat-tile-value, .rt-stat-value, .stat-value { font-size: var(--fs-xl); }
}