/* Per-app theme tokens (the app's dark/light palette via light-dark()),
   moved here so the shared css/general.css can be app-agnostic. */
/* Theme tokens via CSS light-dark(): each token is declared once as
   light-dark(<light>, <dark>) and resolves off the element's `color-scheme`.
   "system" leaves color-scheme: light dark (follows the OS); the data-theme
   overrides below force one or the other. The teal brand hue comes from
   variables.css; light uses the darker teal for contrast on white.
   Keep the light/dark --bg in sync with THEME_COLOR in js/theme.js. */
:root {
	color-scheme: light dark;

	--bg:           light-dark(#f4f7f6, #0e0e12);
	--bg-grad-top:  light-dark(#d6f0ec, #0e2a28);
	--surface:      light-dark(#ffffff, #16161d);
	--surface-2:    light-dark(#eef3f1, #1f1f29);
	--surface-3:    light-dark(#e1e9e6, #2a2a36);
	--text:         light-dark(#0f1715, #f4f4f6);
	--text-dim:     light-dark(#586862, #a0a0ad);
	--text-faint:   light-dark(#8a958f, #6c6c79);
	--color-primary-on-surface:     light-dark(var(--color-primary-700), var(--color-primary-400));
	--color-primary-grad:  linear-gradient(135deg,
		light-dark(var(--color-primary-dark), var(--color-primary)) 0%,
		light-dark(var(--color-primary), var(--color-primary-400)) 100%);
	--border:       light-dark(#dbe5e1, #2a2a36);
	--danger:       light-dark(#dc2626, #ef4444);
	--nav-bg:       light-dark(rgba(244, 247, 246, 0.9), rgba(14, 14, 18, 0.92));
	--player-h:     76px;
	--nav-h:        62px;
}

/* ─── Page headers ──────────────────────────────────────────────────────── */
.page-title {
	font: var(--font-h3);
	margin: 4px 0 16px;
}
.section-title {
	font: var(--font-h5);
	margin: 22px 0 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.top-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}
.top-bar .brand {
	font: var(--font-h4);
	display: flex;
	align-items: center;
	gap: 8px;
}
/* Icons are inline SVG (js/icons.js) carrying class="ms". Dimensions live on
   svg.ms (not .ms) so wrapper spans that also carry .ms — e.g. the place-search
   spinner — keep their box. Every existing `.ms { font-size }` rule still sizes
   them. Replaces the old Material Symbols webfont. */
svg.ms {
	width: 1em;
	height: 1em;
	fill: currentColor;
	vertical-align: -0.15em;
	flex-shrink: 0;
}

.top-bar .brand .ms { color: var(--color-primary); font-size: 26px; }

.icon-btn {
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text);
	width: 40px; height: 40px;
	border-radius: 50%;
	display: grid; place-items: center;
	cursor: pointer;
}
.icon-btn:hover { background: var(--surface-3); }
.icon-btn .ms { font-size: 22px; }

.link-btn {
	background: none;
	border: none;
	color: var(--text-dim);
	font: var(--font-body-medium-semibold);
	display: inline-flex;
	align-items: center;
	gap: 5px;
	cursor: pointer;
	padding: 4px 0;
}
.link-btn:hover { color: var(--text); }
.link-btn .ms { font-size: 20px; }
.danger-text { color: var(--danger); }
.danger-text:hover { color: var(--danger); }

.play-btn {
	background: var(--color-primary-grad);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 11px 22px;
	font: var(--font-body-medium-bold);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	white-space: nowrap;
}
.play-btn:active { transform: scale(0.97); }
.play-btn:disabled { background: var(--surface-3); color: var(--text-faint); cursor: not-allowed; }
.ghost-btn {
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 999px;
	padding: 10px 16px;
	font: var(--font-body-medium-medium);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}
.ghost-btn:hover { background: var(--surface-3); }

.row-icon {
	background: none;
	border: none;
	color: var(--text-faint);
	display: grid;
	place-items: center;
	padding: 4px;
	cursor: pointer;
	border-radius: 50%;
	flex-shrink: 0;

	&:hover { color: var(--text); background: var(--surface-3); }
	&:disabled { opacity: 0.3; cursor: default; background: none; }
	& .ms { font-size: 20px; }
}

/* ─── Filter chips ──────────────────────────────────────────────────────── */
.chip-row {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 6px;
	margin-bottom: 12px;
	-webkit-overflow-scrolling: touch;
}
.chip {
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text-dim);
	border-radius: 999px;
	padding: 7px 16px;
	font: var(--font-body-small-semibold);
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
}
.chip:hover { background: var(--surface-3); }
.chip.on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.chip {
	display: inline-grid;
	grid-auto-flow: column;
	align-items: center;
	gap: 7px;
}
.chip-dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.25);
}
.chip.on .chip-dot { border-color: rgba(255, 255, 255, 0.6); }
.chip-add { padding: 7px 12px; }
.chip-add .ms { font-size: 18px; display: block; }

/* ─── Top-bar list menu ─────────────────────────────────────────────────── */
.top-bar-end { display: grid; grid-auto-flow: column; align-items: center; gap: 10px; }
.list-menu-wrap { position: relative; }
.menu-backdrop { position: fixed; inset: 0; z-index: 15; }
.list-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 20;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: var(--shadow-card, 0 8px 24px rgba(0, 0, 0, 0.4));
	padding: 6px;
	min-width: 200px;
	display: grid;

	& button {
		background: none;
		border: none;
		color: var(--text);
		font: var(--font-body-medium-semibold);
		display: grid;
		grid-auto-flow: column;
		justify-content: start;
		align-items: center;
		gap: 10px;
		padding: 10px 12px;
		border-radius: 8px;
		cursor: pointer;
		text-align: left;
		white-space: nowrap;

		&:hover { background: var(--surface-3); }
		&:disabled { opacity: 0.4; cursor: default; background: none; }
		& .ms { font-size: 20px; }
	}
}

/* ─── List editor modal ─────────────────────────────────────────────────── */
.modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 50;
	background: rgba(0, 0, 0, 0.5);
	display: grid;
	place-items: center;
	padding: 20px;
}
.list-editor {
	width: min(420px, 100%);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-modal, 20px);
	padding: 20px;
	/* Grid auto-rows size to content, so the name field keeps its natural
	   single-line height instead of stretching like a flex column would. */
	display: grid;
	gap: 14px;

	& h3 { font: var(--font-h5); margin: 0; }
	& .color-row { border-top: none; padding-top: 0; margin-top: 0; }
}
.modal-actions {
	display: grid;
	grid-auto-flow: column;
	justify-content: end;
	align-items: center;
	gap: 12px;
}

/* ─── Add to-do ─────────────────────────────────────────────────────────── */
/* Grid (not flex): the global `form` rule forces flex-direction: column, which
   would turn .todo-input's flex-basis into a 200px-tall field. */
.todo-add {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}
.todo-input {
	min-width: 0;
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 12px;
	padding: 12px 14px;
	font: var(--font-body-large-regular);
}
.todo-date {
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 12px;
	padding: 11px 12px;
	font: var(--font-body-medium-regular);
	color-scheme: inherit; /* native date picker follows the active theme */
}
.todo-input:focus, .todo-date:focus { outline: none; border-color: var(--color-primary); }

/* ─── To-do list ────────────────────────────────────────────────────────── */
.todo-list { display: flex; flex-direction: column; gap: 6px; }
.todo-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 10px;
	border-radius: 12px;
	background: var(--surface);
	border: 1px solid var(--border);
}
.todo-row.dragging {
	border-color: var(--color-primary);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.todo-row .drag-handle {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	color: var(--text-faint);
	cursor: grab;
	touch-action: none;

	&:active { cursor: grabbing; }
	& .ms { font-size: 22px; }
}
.todo-check {
	background: none;
	border: none;
	padding: 0;
	color: var(--text-faint);
	cursor: pointer;
	display: grid;
	place-items: center;
	flex-shrink: 0;

	& .ms { font-size: 26px; }
}
.todo-row.done .todo-check { color: var(--color-primary); }
.todo-main { flex: 1; min-width: 0; }
.todo-text { font: var(--font-body-large-medium); }
.todo-row.done .todo-text { color: var(--text-dim); text-decoration: line-through; }
.todo-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; flex-wrap: wrap; }
.todo-tag {
	font: var(--font-body-xsmall-bold);
	color: var(--color-primary-on-surface);
	background: color-mix(in oklch, var(--color-primary) 18%, transparent);
	border-radius: 999px;
	padding: 2px 8px;
}
.todo-due {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font: var(--font-body-small-regular);
	color: var(--text-dim);
}
.todo-due .ms { font-size: 15px; }
.todo-due.overdue { color: var(--danger); }

/* ─── Notes grid ────────────────────────────────────────────────────────── */
.notes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 14px;
}
.note-card {
	position: relative;
	display: block;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-card, 16px);
	padding: 16px 16px 12px;
	min-height: 96px;
	cursor: pointer;
	transition: transform 0.12s, border-color 0.12s;
	overflow: hidden;
}
.note-card:active { transform: scale(0.98); }
.note-card:hover { border-color: var(--color-primary); }
.note-title { font: var(--font-body-large-bold); margin-bottom: 6px; padding-right: 24px; }
.note-body {
	font: var(--font-body-medium-regular);
	color: var(--text-dim);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
	white-space: pre-wrap;
}
.note-date { font: var(--font-body-xsmall-regular); color: var(--text-faint); margin-top: 10px; }
.note-pin {
	position: absolute;
	top: 8px; right: 8px;
	background: none;
	border: none;
	color: var(--text-faint);
	cursor: pointer;
	padding: 4px;
	border-radius: 50%;
	display: grid; place-items: center;

	& .ms { font-size: 18px; }
	&:hover { color: var(--text); background: rgba(0, 0, 0, 0.2); }
	&.on { color: var(--color-primary-on-surface); }
}

/* ─── Note color themes (cards + editor) ────────────────────────────────── */
.color-default { --note-tint: var(--surface-2); }
.color-yellow  { --note-tint: #3a3414; }
.color-green   { --note-tint: #14321f; }
.color-blue    { --note-tint: #14283a; }
.color-pink    { --note-tint: #3a1428; }
.color-purple  { --note-tint: #281438; }
.note-card.color-default { background: var(--surface-2); }
.note-card:not(.color-default) { background: var(--note-tint); }

/* ─── Note editor ───────────────────────────────────────────────────────── */
.editor {
	background: var(--note-tint, var(--surface-2));
	border: 1px solid var(--border);
	border-radius: var(--radius-card, 16px);
	padding: 14px 16px 16px;
	min-height: 70dvh;
	display: flex;
	flex-direction: column;
	transition: background 0.2s;
}
.editor-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}
.editor-status { flex: 1; font: var(--font-body-small-regular); }
.editor-actions { display: flex; gap: 6px; }
.editor-title {
	background: none;
	border: none;
	color: var(--text);
	font: var(--font-h4);
	padding: 6px 2px;
	outline: none;
}
.editor-title::placeholder { color: var(--text-faint); }
.editor-body {
	flex: 1;
	background: none;
	border: none;
	color: var(--text);
	font: var(--font-body-large-regular);
	line-height: 1.6;
	padding: 6px 2px;
	resize: none;
	outline: none;
	min-height: 40dvh;
}
.editor-body::placeholder { color: var(--text-faint); }

.color-row {
	display: flex;
	gap: 10px;
	padding-top: 12px;
	margin-top: 8px;
	border-top: 1px solid var(--border);
}
.swatch {
	width: 28px; height: 28px;
	border-radius: 50%;
	border: 2px solid var(--border);
	cursor: pointer;
	padding: 0;
}
.swatch.on { border-color: var(--text); transform: scale(1.1); }
.swatch-default { background: var(--surface-3); }
.swatch-yellow  { background: #b8a23a; }
.swatch-green   { background: #2f9e63; }
.swatch-blue    { background: #3a86c8; }
.swatch-pink    { background: #c8497e; }
.swatch-purple  { background: #8a52c8; }

/* ─── Empty state ───────────────────────────────────────────────────────── */
.empty {
	text-align: center;
	color: var(--text-dim);
	padding: 60px 20px;
}
.empty .ms { font-size: 54px; color: var(--surface-3); margin-bottom: 12px; }
.empty p { margin: 4px 0; }

/* ─── Search ────────────────────────────────────────────────────────────── */
.search-input {
	width: 100%;
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 12px;
	padding: 13px 16px;
	font: var(--font-body-large-regular);
	margin-bottom: 16px;
}
.search-input:focus { outline: none; border-color: var(--color-primary); }

/* ─── Settings ──────────────────────────────────────────────────────────── */
.settings-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 20px;
}
.stat {
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-card, 16px);
	padding: 18px 12px;
	text-align: center;
}
.stat-num { font: var(--font-h3); color: var(--color-primary-on-surface); }
.stat-label { font: var(--font-body-small-regular); color: var(--text-dim); margin-top: 2px; }
.settings-list { display: flex; flex-direction: column; gap: 8px; }
.settings-item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 12px;
	padding: 15px 16px;
	font: var(--font-body-large-medium);
	cursor: pointer;
}
.settings-item:hover { background: var(--surface-3); }
.settings-item:disabled { opacity: 0.6; cursor: default; }
.settings-item .ms { font-size: 22px; color: var(--text-dim); }
.settings-foot { margin-top: 24px; text-align: center; font: var(--font-body-small-regular); }

/* ─── Segmented control (theme toggle) ──────────────────────────────────── */
.seg {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 3px;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 3px;
	margin-bottom: 16px;

	& button {
		border: none;
		background: none;
		color: var(--text-dim);
		font: var(--font-body-small-semibold);
		padding: 9px 6px;
		border-radius: 9px;
		cursor: pointer;
		display: grid;
		grid-auto-flow: column;
		align-items: center;
		justify-content: center;
		gap: 5px;

		& .ms { font-size: 18px; }
		&.on { background: var(--color-primary); color: #fff; }
	}
}

/* ─── Auth page ─────────────────────────────────────────────────────────── */
.auth-page { min-height: 100dvh; display: grid; place-items: center; padding: 20px; }
.auth-card {
	width: 100%;
	max-width: 380px;
	text-align: center;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 20px;
	padding: 36px 28px;
}
.auth-logo {
	width: 72px; height: 72px;
	border-radius: 20px;
	background: var(--color-primary-grad);
	display: grid; place-items: center;
	margin: 0 auto 18px;
	color: #fff;
}
.auth-logo .ms { font-size: 40px; }
.auth-title { font: var(--font-h3); margin: 0 0 6px; }
.auth-subtitle { color: var(--text-dim); margin: 0 0 26px; font: var(--font-body-medium-regular); }
.auth-actions { display: flex; flex-direction: column; gap: 10px; }
.auth-hint { color: var(--text-dim); font: var(--font-body-small-regular); margin: 0 0 18px; line-height: 1.5; }
.auth-error { color: var(--danger); font: var(--font-body-small-medium); margin-top: 14px; }

@media (max-width: 400px) {
	.notes-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}