/* ------------------------------------------------------------------
   tasks — a compact kanban board
   Visual language inspired by Nullboard (nullboard.io)
------------------------------------------------------------------- */

@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/fonts/barlow-400.woff2") format("woff2");
}
@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/fonts/barlow-500.woff2") format("woff2");
}
@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/fonts/barlow-600.woff2") format("woff2");
}

:root {
	--ff: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
	--fs: 13px;
	--lh: 1.36;
	--lw: 280px;

	--bg: #f7f8fa;
	--bg-elev: #ffffff;
	--panel: #eaedf0;
	--panel-2: #dfe3e7;
	--list-bg: linear-gradient(#eaedf0 34px, #dde1e5 100%);
	--note-bg: #ffffff;
	--note-solid: #ffffff;
	--ink: #24272b;
	--ink-2: #4d545c;
	--muted: #818890;
	--line: #d8dce0;
	--accent: #1c7dc1;
	--accent-ink: #ffffff;
	--focus: #8eaedd;
	--danger: #c2453d;
	--warn: #b3781e;
	--ok: #2f9e5f;
	--shadow-note: 0 1px 2px #00000014, 0 0 1px #00000010;
	--shadow-pop: 0 12px 36px #0000002b, 0 2px 6px #00000012;
	--radius: 5px;
	--topbar: 48px;
	--tabbar: 40px;
	color-scheme: light;
}

html[data-theme="dark"] {
	--bg: #09090a;
	--bg-elev: #111214;
	--panel: #17171a;
	--panel-2: #202024;
	--list-bg: linear-gradient(#1b1b1f 34px, #151518 100%);
	--note-bg: linear-gradient(#26262a, #202024);
	--note-solid: #232326;
	--ink: #e7e7e9;
	--ink-2: #c9c9cd;
	--muted: #85858c;
	--line: #2a2a2e;
	--accent: #f0b23e;
	--accent-ink: #1b1406;
	--focus: #bc9908;
	--danger: #ff6b61;
	--warn: #e1a84a;
	--ok: #49c483;
	--shadow-note: 0 1px 4px #000000a0, 0 0 1px #00000080;
	--shadow-pop: 0 18px 50px #000000b8, 0 2px 8px #00000090;
	color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	overflow-x: hidden;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--ff);
	font-size: var(--fs);
	line-height: var(--lh);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overscroll-behavior-y: none;
}

button, input, textarea, select {
	font: inherit;
	color: inherit;
}

button {
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

a { color: var(--accent); }

b, strong { font-weight: 600; }

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

::selection { background: #7fb7e0; color: #fff; }
html[data-theme="dark"] ::selection { background: #8a6a12; color: #fff; }

.skip-link {
	position: fixed;
	left: 12px;
	top: -60px;
	z-index: 500;
	padding: 8px 12px;
	border-radius: 6px;
	background: var(--ink);
	color: var(--bg);
	transition: top 120ms ease;
}
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------------
   Top chrome
------------------------------------------------------------------- */

.top {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
	padding-top: env(safe-area-inset-top);
}

.appbar {
	display: flex;
	align-items: center;
	gap: 12px;
	height: var(--topbar);
	padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
}

.brand {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 0 0 auto;
	user-select: none;
}

.brand-mark {
	width: 18px;
	height: 18px;
	display: block;
	color: var(--ink);
}

.brand-name {
	color: var(--ink);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.005em;
	text-decoration: none;
	line-height: 1;
}

.appbar-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}

.icon-btn {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border-radius: 5px;
	color: var(--ink-2);
	font-size: 20px;
	line-height: 1;
	transition: background 120ms ease, color 120ms ease;
}

.icon-btn:hover { background: var(--panel); color: var(--ink); }
.icon-btn:active { background: var(--panel-2); }

.icon-btn svg circle { fill: currentColor; }

.sync-pill {
	display: flex;
	align-items: center;
	gap: 7px;
	height: 30px;
	padding: 0 10px;
	border-radius: 999px;
	color: var(--muted);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.01em;
	transition: background 120ms ease, color 120ms ease;
}

.sync-pill:hover { background: var(--panel); color: var(--ink); }

.sync-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--muted);
	flex: 0 0 auto;
	transition: background 160ms ease, box-shadow 160ms ease;
}

.sync-pill[data-status="synced"] .sync-dot,
.status-card[data-status="synced"] .sync-dot {
	background: var(--ok);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent);
}
.sync-pill[data-status="syncing"] .sync-dot,
.status-card[data-status="syncing"] .sync-dot {
	background: var(--accent);
	animation: sync-pulse 1.1s ease-in-out infinite;
}
.sync-pill[data-status="dirty"] .sync-dot,
.status-card[data-status="dirty"] .sync-dot {
	background: var(--warn);
}
.sync-pill[data-status="offline"] .sync-dot,
.status-card[data-status="offline"] .sync-dot {
	background: var(--warn);
}
.sync-pill[data-status="error"] .sync-dot,
.status-card[data-status="error"] .sync-dot {
	background: var(--danger);
}

@keyframes sync-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.35; transform: scale(0.8); }
}

.tabbar {
	display: flex;
	align-items: center;
	gap: 2px;
	height: var(--tabbar);
	padding: 0 max(16px, env(safe-area-inset-right)) 7px max(16px, env(safe-area-inset-left));
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.tabbar::-webkit-scrollbar { display: none; }

.board-tabs {
	display: flex;
	align-items: center;
	gap: 2px;
	min-width: 0;
}

.tab {
	flex: 0 0 auto;
	max-width: 190px;
	height: 29px;
	padding: 0 10px;
	border-radius: 4px;
	color: var(--muted);
	font-size: 12.5px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background 120ms ease, color 120ms ease;
}

.tab:hover { color: var(--ink); background: var(--panel); }

.tab[aria-selected="true"] {
	color: var(--ink);
	background: var(--panel);
	box-shadow: inset 0 -2px 0 var(--accent);
}

.tab-add {
	flex: 0 0 auto;
	width: 29px;
	height: 29px;
	margin-left: 2px;
	border-radius: 4px;
	color: var(--muted);
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	transition: background 120ms ease, color 120ms ease;
}
.tab-add:hover { background: var(--panel); color: var(--ink); }

/* ------------------------------------------------------------------
   Board + columns
------------------------------------------------------------------- */

.board-scroller {
	overflow-x: auto;
	overflow-y: hidden;
	padding: 16px max(20px, env(safe-area-inset-right)) 90px max(20px, env(safe-area-inset-left));
	scrollbar-width: thin;
	scrollbar-color: var(--line) transparent;
	outline: none;
}

.board-scroller::-webkit-scrollbar { height: 9px; }
.board-scroller::-webkit-scrollbar-track { background: transparent; }
.board-scroller::-webkit-scrollbar-thumb {
	background: var(--line);
	border-radius: 99px;
	border: 2px solid var(--bg);
}

.board {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: max-content;
	margin: 0 auto;
	min-height: calc(100dvh - 210px);
}

.board-empty {
	width: min(420px, 90vw);
	margin: 10vh auto;
	text-align: center;
	color: var(--muted);
}
.board-empty h2 {
	margin: 0 0 6px;
	color: var(--ink);
	font-size: 17px;
	font-weight: 500;
}
.board-empty p { margin: 0 0 16px; }

.list {
	flex: 0 0 auto;
	width: min(var(--lw), 386px);
	background: var(--list-bg);
	border-radius: var(--radius);
	box-shadow: inset 0 0 0 1px #00000008;
	scroll-snap-align: start;
	position: relative;
}

.list-head {
	display: flex;
	align-items: center;
	gap: 2px;
	min-height: 38px;
	padding: 7px 6px 5px 9px;
	position: relative;
}

.list-grip {
	flex: 0 0 auto;
	width: 12px;
	height: 24px;
	margin-right: 1px;
	display: grid;
	place-items: center;
	color: var(--muted);
	cursor: grab;
	opacity: 0;
	transition: opacity 120ms ease, color 120ms ease;
	touch-action: none;
}
.list-grip svg { width: 10px; height: 16px; }
.list:hover .list-grip { opacity: 0.55; }
.list-grip:hover { opacity: 1; color: var(--ink-2); }
.list-grip:active { cursor: grabbing; }

.list-title {
	flex: 1 1 auto;
	min-width: 0;
	padding: 2px 2px;
	text-align: left;
	color: var(--ink);
	font-size: calc(var(--fs) * 1.04);
	font-weight: 500;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: text;
	border-radius: 3px;
}

.list-title:hover { color: var(--accent); }

.list-menu-btn {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: 4px;
	color: var(--muted);
	font-size: 15px;
	line-height: 1;
	opacity: 0;
	transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}
.list:hover .list-menu-btn { opacity: 1; }
.list-menu-btn:hover { opacity: 1; background: #0000000d; color: var(--ink); }
html[data-theme="dark"] .list-menu-btn:hover { background: #ffffff0d; }

.list-title-input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	margin: 0;
	padding: 2px 4px;
	border: 0;
	border-radius: 3px;
	background: var(--bg-elev);
	color: var(--ink);
	font-size: calc(var(--fs) * 1.04);
	font-weight: 500;
	line-height: 1.25;
	outline: 1px solid var(--focus);
}

.notes {
	display: flex;
	flex-direction: column;
	padding: 0 7px;
	min-height: 2px;
}

.list-foot {
	padding: 3px 7px 8px;
}

.add-note {
	display: flex;
	align-items: center;
	gap: 7px;
	width: 100%;
	min-height: 31px;
	padding: 5px 8px;
	border-radius: 4px;
	color: var(--muted);
	font-size: 12px;
	text-align: left;
	transition: background 120ms ease, color 120ms ease;
}
.add-note:hover { color: var(--ink); background: #ffffff66; }
html[data-theme="dark"] .add-note:hover { background: #ffffff0a; }
.add-note .plus { font-size: 15px; line-height: 1; margin-top: -1px; }

.list-empty {
	padding: 10px 10px 14px;
	color: var(--muted);
	font-size: 11.5px;
	text-align: center;
	opacity: 0.7;
}

.add-list {
	flex: 0 0 auto;
	width: min(var(--lw), 386px);
	min-height: 42px;
	padding: 0 14px;
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px dashed var(--line);
	border-radius: var(--radius);
	color: var(--muted);
	font-size: 12.5px;
	text-align: left;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.add-list:hover {
	border-color: var(--accent);
	background: var(--panel);
	color: var(--ink);
}
.add-list .plus { font-size: 17px; line-height: 1; }

/* ------------------------------------------------------------------
   Notes
------------------------------------------------------------------- */

.note {
	position: relative;
	padding: 6px 10px 7px;
	margin-bottom: 5px;
	background: var(--note-bg);
	border-radius: 3px;
	box-shadow: var(--shadow-note);
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	transition: box-shadow 120ms ease, opacity 120ms ease;
}

.note:hover { box-shadow: 0 1px 3px #0000001f, 0 0 1px #00000014; }
html[data-theme="dark"] .note:hover { box-shadow: 0 1px 5px #000000c0; }

.note-text {
	min-height: calc(var(--fs) * var(--lh));
	padding-right: 18px;
	color: var(--ink);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	line-height: var(--lh);
	cursor: text;
}

.note.is-min .note-text {
	max-height: calc(var(--fs) * var(--lh));
	overflow: hidden;
}

.note.is-raw {
	background: transparent;
	box-shadow: none;
	padding-top: 8px;
}
.note.is-raw .note-text { font-weight: 500; }
html[data-theme="dark"] .note.is-raw .note-text { color: #eeeeef; }

.note-tools {
	position: absolute;
	top: 2px;
	right: 2px;
	display: flex;
	align-items: center;
	gap: 0;
	opacity: 0;
	background: linear-gradient(to right, transparent, var(--note-solid) 9px);
	padding-left: 9px;
	border-radius: 0 3px 0 0;
	transition: opacity 140ms ease;
}
.note.is-raw .note-tools { background: none; padding-left: 0; }
.note:hover .note-tools,
.note:focus-within .note-tools { opacity: 1; }

.note-tools button {
	width: 20px;
	height: 20px;
	display: grid;
	place-items: center;
	border-radius: 3px;
	color: var(--muted);
	font-size: 11px;
	line-height: 1;
}
.note-tools button:hover { color: var(--ink); background: #0000000d; }
html[data-theme="dark"] .note-tools button:hover { background: #ffffff12; }
.note-tools .drag-handle { cursor: grab; touch-action: none; }
.note-tools .drag-handle:active { cursor: grabbing; }
.note-tools svg { width: 12px; height: 12px; }

.note.is-editing {
	background: var(--bg-elev);
	box-shadow: none;
	outline: 1px solid var(--focus);
	outline-offset: -1px;
}
.note.is-editing .note-text { display: none; }
.note.is-editing .note-tools { display: none; }

.note-edit {
	display: block;
	width: 100%;
	min-height: calc(var(--fs) * var(--lh));
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
	background: transparent;
	color: var(--ink);
	line-height: var(--lh);
	resize: none;
	overflow: hidden;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.note.is-dragging { opacity: 0.28; }
.note.is-dragging .note-tools { display: none; }

.note-placeholder {
	flex: 0 0 auto;
	margin-bottom: 5px;
	border: 1px dashed var(--accent);
	border-radius: 3px;
	background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.drag-ghost {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	margin: 0;
	pointer-events: none;
	opacity: 0.94;
	box-shadow: 0 10px 30px #00000040, 0 2px 6px #00000020;
	transform-origin: 50% 20%;
}

.list-ghost {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	height: 38px;
	padding: 0 13px;
	display: flex;
	align-items: center;
	border-radius: var(--radius);
	background: var(--bg-elev);
	border: 1px solid var(--accent);
	box-shadow: 0 10px 30px #00000040;
	pointer-events: none;
	color: var(--ink);
	font-weight: 500;
	opacity: 0.96;
}

.list-placeholder {
	flex: 0 0 auto;
	width: min(var(--lw), 386px);
	min-height: 90px;
	border: 1px dashed var(--accent);
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--accent) 6%, transparent);
}

body.is-dragging {
	cursor: grabbing;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}
body.is-dragging * { scroll-snap-type: none !important; }

/* ------------------------------------------------------------------
   Popover menu
------------------------------------------------------------------- */

.popover {
	position: fixed;
	z-index: 300;
	min-width: 215px;
	max-width: calc(100vw - 16px);
	max-height: min(70vh, 520px);
	overflow-y: auto;
	padding: 5px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--bg-elev);
	box-shadow: var(--shadow-pop);
	animation: pop-in 90ms ease-out;
}

@keyframes pop-in {
	from { opacity: 0; transform: translateY(-3px) scale(0.99); }
	to { opacity: 1; transform: none; }
}

.popover[hidden] { display: none; }

.popover button {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	min-height: 33px;
	padding: 6px 9px;
	border-radius: 5px;
	color: var(--ink);
	font-size: 12.5px;
	text-align: left;
	white-space: nowrap;
}
.popover button:hover { background: var(--panel); }
.popover button[disabled] { color: var(--muted); opacity: 0.5; pointer-events: none; }
.popover button.danger { color: var(--danger); }
.popover .sep { height: 1px; margin: 5px 4px; background: var(--line); }
.popover .menu-glyph { width: 15px; color: var(--muted); text-align: center; font-size: 12px; }
.popover .kbd { margin-left: auto; padding-left: 16px; color: var(--muted); font-size: 10.5px; }

/* ------------------------------------------------------------------
   Toasts
------------------------------------------------------------------- */

.toasts {
	position: fixed;
	left: 50%;
	bottom: calc(18px + env(safe-area-inset-bottom));
	z-index: 400;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	width: min(440px, calc(100vw - 22px));
	pointer-events: none;
}

.toast {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 100%;
	padding: 9px 13px;
	border-radius: 7px;
	background: var(--ink);
	color: var(--bg);
	font-size: 12.5px;
	box-shadow: 0 8px 24px #00000033;
	animation: toast-in 150ms ease-out;
}
html[data-theme="dark"] .toast { background: #f0f0f2; color: #151517; }
.toast button {
	flex: 0 0 auto;
	margin-left: 4px;
	color: var(--accent);
	font-weight: 600;
	font-size: 12.5px;
	text-decoration: underline;
	text-underline-offset: 2px;
}
html[data-theme="dark"] .toast button { color: #9b5d00; }
.toast.is-out { opacity: 0; transition: opacity 180ms ease; }

@keyframes toast-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------
   Dialogs / forms
------------------------------------------------------------------- */

dialog.sheet {
	position: fixed;
	inset: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(470px, calc(100vw - 24px));
	max-width: none;
	max-height: calc(100dvh - 24px);
	margin: 0;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--bg-elev);
	color: var(--ink);
	box-shadow: var(--shadow-pop);
	overflow-y: auto;
}
dialog.sheet::backdrop {
	background: #0000004d;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
dialog.sheet[open] { animation: dialog-in 130ms ease-out; }
@keyframes dialog-in {
	from { opacity: 0; transform: translate(-50%, -48%) scale(0.99); }
	to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.sheet-inner { padding: 17px 18px 18px; }

.sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}
.sheet-head h2 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.005em;
}

.field { margin: 0 0 16px; }
.field-label {
	display: block;
	margin-bottom: 6px;
	color: var(--ink-2);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.015em;
}
.field-label output {
	float: right;
	color: var(--muted);
	font-weight: 400;
}
.field input[type="range"] {
	width: 100%;
	margin: 2px 0 0;
	accent-color: var(--accent);
}
.field-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.segmented {
	display: flex;
	gap: 2px;
	padding: 2px;
	border-radius: 6px;
	background: var(--panel);
}
.segmented button {
	flex: 1 1 0;
	min-height: 31px;
	padding: 4px 8px;
	border-radius: 4px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 500;
}
.segmented button:hover { color: var(--ink); }
.segmented button[aria-pressed="true"] {
	background: var(--bg-elev);
	color: var(--ink);
	box-shadow: 0 1px 2px #00000014;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 6px 12px;
	border-radius: 5px;
	background: var(--panel);
	color: var(--ink);
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none;
	transition: background 120ms ease, color 120ms ease, opacity 120ms ease;
}
.btn:hover { background: var(--panel-2); }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.05); }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.btn.big {
	width: 100%;
	min-height: 40px;
	font-size: 13px;
}
.btn:disabled { opacity: 0.45; pointer-events: none; }

.row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 12px;
}
.row-end { justify-content: flex-end; margin-top: 18px; }

.text-input {
	width: 100%;
	min-height: 38px;
	padding: 8px 10px;
	border: 1px solid var(--line);
	border-radius: 5px;
	background: var(--bg);
	color: var(--ink);
	font-size: 13px;
	outline: none;
}
.text-input:focus { border-color: var(--focus); box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus) 25%, transparent); }

.copy-row {
	display: flex;
	align-items: stretch;
	gap: 6px;
}
.copy-row input {
	flex: 1 1 auto;
	min-width: 0;
	height: 34px;
	padding: 6px 9px;
	border: 1px solid var(--line);
	border-radius: 5px;
	background: var(--bg);
	color: var(--ink-2);
	font-size: 11.5px;
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	outline: none;
}
.copy-row input:focus { border-color: var(--focus); }

.hint {
	margin: 6px 0 0;
	color: var(--muted);
	font-size: 11px;
	line-height: 1.45;
}
.hint a { color: var(--accent); }

.lead {
	margin: 0 0 14px;
	color: var(--ink-2);
	font-size: 12.5px;
	line-height: 1.5;
}

.or {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 18px 0 14px;
	color: var(--muted);
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.or:before, .or:after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--line);
}

.status-card {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 11px 12px;
	margin-bottom: 17px;
	border-radius: 6px;
	background: var(--bg);
	border: 1px solid var(--line);
}
.status-card .sync-dot { margin-top: 6px; width: 8px; height: 8px; }
.status-card strong {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
}
.status-card span {
	display: block;
	margin-top: 1px;
	color: var(--muted);
	font-size: 11px;
	line-height: 1.4;
}

/* Onboarding */

.onboard { width: min(505px, calc(100vw - 24px)); }
.onboard-hero { text-align: center; padding: 4px 0 18px; }
.onboard-mark {
	width: 42px;
	height: 42px;
	color: var(--ink);
	margin-bottom: 8px;
}
.onboard-mark.small { width: 30px; height: 30px; margin: 0; }
.onboard-hero h1 {
	margin: 0;
	font-size: 25px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.1;
}
.onboard-hero p {
	margin: 4px 0 0;
	color: var(--muted);
	font-size: 12.5px;
}
.onboard-tips {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: grid;
	gap: 8px;
}
.onboard-tips li {
	position: relative;
	padding: 9px 11px 9px 30px;
	border-radius: 5px;
	background: var(--bg);
	color: var(--ink-2);
	font-size: 12px;
	line-height: 1.4;
}
.onboard-tips li:before {
	content: "";
	position: absolute;
	left: 14px;
	top: 15px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--accent);
}
.onboard-tips b { color: var(--ink); font-weight: 600; }
.sync-link-box {
	padding: 12px;
	margin-bottom: 16px;
	border: 1px solid var(--line);
	border-radius: 7px;
	background: var(--bg);
}
.sync-link-box label {
	display: block;
	margin-bottom: 6px;
	color: var(--ink-2);
	font-size: 11px;
	font-weight: 500;
}
.sync-link-box .hint { margin-top: 7px; }

.about-body p { margin: 0 0 10px; color: var(--ink-2); font-size: 12.5px; line-height: 1.5; }
.about-body ul { margin: 0 0 12px; padding-left: 18px; color: var(--ink-2); font-size: 12px; line-height: 1.5; }
.about-body li { margin-bottom: 4px; }
.about-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}
.about-brand strong { display: block; font-size: 15px; font-weight: 600; }
.about-brand span { display: block; color: var(--muted); font-size: 11px; }

/* ------------------------------------------------------------------
   Responsive
------------------------------------------------------------------- */

@media (max-width: 700px) {
	.appbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
	.tabbar { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
	.board-scroller {
		padding: 11px max(10px, env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
		scroll-snap-type: x proximity;
	}
	.board { margin: 0; gap: 8px; min-height: calc(100dvh - 190px); }
	.list, .add-list, .list-placeholder { width: min(var(--lw), 84vw, 340px); }
	.list-head { min-height: 42px; padding-top: 7px; padding-bottom: 6px; }
	.list-grip { display: none; }
	.list-menu-btn { opacity: 1; width: 32px; height: 32px; font-size: 17px; }
	.tab { height: 32px; font-size: 13px; }
	.tab-add { width: 32px; height: 32px; }
	.add-note { min-height: 36px; }
	.note { padding-top: 7px; padding-bottom: 8px; }
	.note-tools { opacity: 1; }
	.note-tools .drag-handle { display: none; }
	.note-tools button { width: 24px; height: 24px; }
	.note-text { padding-right: 52px; }
	.sync-label { display: none; }
	.sync-pill { padding: 0 9px; }
	dialog.sheet {
		top: auto;
		bottom: 0;
		left: 0;
		transform: none;
		width: 100%;
		max-height: min(90dvh, 720px);
		border-radius: 14px 14px 0 0;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}
	dialog.sheet[open] { animation: sheet-up 170ms ease-out; }
	@keyframes sheet-up {
		from { opacity: 0.6; transform: translateY(28px); }
		to { opacity: 1; transform: none; }
	}
	.sheet-inner { padding: 18px 16px 20px; }
	.popover { min-width: 200px; }
}

@media (max-width: 420px) {
	.brand-name { font-size: 16px; }
	.board-tabs { gap: 0; }
	.tab { max-width: 145px; padding: 0 8px; }
}

@media (hover: none) {
	.note-tools { opacity: 1; }
	.note-tools .drag-handle { display: none; }
	.note-text { padding-right: 52px; }
}

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