/* Todo+ UI base styles */
:root {
	/* Light, fresh orange palette */
	--bg: #fffaf5;
	--fg: #0f172a;
	--muted: #6b7280;
	--border: #fde7d6;
	--surface: rgba(255, 255, 255, 0.6);
	--brand: #f97316; /* orange-500 */
	--brand-ink: #ffffff;
	--danger: #b91c1c;
	--success: #9a3412; /* deep orange for messages */
	--radius: 12px;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--shadow: 0 1px 2px rgba(16, 185, 129, 0.06), 0 8px 28px rgba(22, 163, 74, 0.08);

	/* Label color palette (match legacy kind_1..7) */
	--label1: #58ccff;
	--label1-bg: #8bccf6;
	--label2: #fe8ecd;
	--label2-bg: #fdaddd;
	--label3: #fead36;
	--label3-bg: #f5bc83;
	--label4: #eedd8a;
	--label4-bg: #fff78c;
	--label5: #a4fe6c;
	--label5-bg: #cef59a;
	--label6: #95d5df;
	--label6-bg: #aceadc;
	--label7: #b968d4;
	--label7-bg: #ddb5fe;
}
/* Dark mode disabled per request */

/* Base */
* {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	font-size: 16px;
}
body {
    margin: 0;
    color: var(--fg);
    font-family: -apple-system, BlinkMacSystemFont, 'Yu Gothic UI', 'Yu Gothic', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'BIZ UDPGothic', 'Meiryo', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400; /* avoid heavier default on some JP fallbacks */
    font-size: 1rem; /* lock base to 16px-equivalent */
    line-height: 1.5;
    /* Softer base wash; glassy canvas under floating blobs */
    background: radial-gradient(1200px 800px at 12% 18%, #fff6ee 0%, #fff8f1 40%, var(--bg) 100%);
	position: relative;
	overflow-x: hidden;
	/* Normalize rendering to Safari-like appearance */
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased; /* WebKit */
	-moz-osx-font-smoothing: grayscale; /* Firefox on macOS */
	font-kerning: normal;
	font-synthesis: none;
	font-synthesis-weight: none;
	font-synthesis-style: none;
}
/* Ensure form controls also use the same font */
input,
select,
textarea,
button {
	font: inherit;
}

/* Prefer font metrics to harmonize perceived size across engines */
@supports (font-size-adjust: from-font) {
	body,
	input,
	select,
	textarea,
	button {
		font-size-adjust: from-font;
	}
}
/* Liquid glass-like blobs in the background */
body::before,
body::after {
    content: '';
    position: fixed;
    inset: -25vmax;
    z-index: -1;
    /* white highlight + warm brand tints */
    background:
        radial-gradient(28vmax 22vmax at 14% 16%, rgba(255,255,255,0.52), rgba(255,255,255,0) 62%), /* highlight */
        radial-gradient(40vmax 40vmax at 22% 32%, rgba(251,146,60,0.18), rgba(251,146,60,0) 62%),   /* warm tint 1 */
        radial-gradient(35vmax 35vmax at 78% 18%, rgba(249,115,22,0.14), rgba(249,115,22,0) 62%),   /* warm tint 2 */
        radial-gradient(34vmax 34vmax at 42% 84%, rgba(245,158,11,0.12), rgba(245,158,11,0) 62%);   /* warm tint 3 */
    filter: blur(46px) saturate(1.04);
    pointer-events: none;
    animation: liquid-bounce 18s ease-in-out infinite alternate;
}
body::after {
    opacity: 0.85;
    transform: scale(1.05);
    /* darker pools layer for visible movement */
    background:
        radial-gradient(42vmax 38vmax at 72% 28%, rgba(249,115,22,0.22), rgba(249,115,22,0.04) 64%), /* darker pool A */
        radial-gradient(36vmax 34vmax at 28% 78%, rgba(234,88,12,0.18), rgba(234,88,12,0.03) 64%),  /* darker pool B */
        radial-gradient(26vmax 22vmax at 18% 16%, rgba(255,255,255,0.32), rgba(255,255,255,0) 62%); /* soft highlight */
    filter: blur(54px) saturate(1.05);
    animation: liquid-bounce-2 24s ease-in-out infinite alternate;
}
/* Background liquid bounce animations */
@keyframes liquid-bounce {
    0%   { transform: translate3d(-6%, -4%, 0) scale(1.00); }
    50%  { transform: translate3d( 2%,  5%, 0) scale(1.02); }
    100% { transform: translate3d( 6%, -3%, 0) scale(1.03); }
}
@keyframes liquid-bounce-2 {
    0%   { transform: translate3d( 5%,  4%, 0) scale(1.04); }
    50%  { transform: translate3d(-4%, -3%, 0) scale(1.06); }
    100% { transform: translate3d( 3%,  6%, 0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after { animation: none; }
}

.container {
    max-width: 1200px;
    padding: 0 var(--space-4);
    margin: 0 auto var(--space-6);
}

/* PC only: add a small gap between header and main grid */
@media (min-width: 641px) {
    .appbar + main.container {
        margin-top: var(--space-3);
    }
}

header.appbar {
	position: relative; /* not sticky */
	z-index: 10;
	background: color-mix(in oklab, white 20%, transparent);
	border-bottom: 1px solid color-mix(in oklab, white 20%, var(--border));
	backdrop-filter: blur(10px) saturate(1.2);
	padding-top: constant(safe-area-inset-top, 0); /* iOS < 15 */
	padding-top: env(safe-area-inset-top, 0);
}
.appbar__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) 0;
}
.appbar__inner > .row { width: 100%; }
.appbar .brand { width: auto; flex: 1 1 auto; text-align: center; }
.brand {
	font-weight: 700;
	letter-spacing: 0.2px;
	text-align: center;
	width: 100%;
}
.brand a {
	color: inherit;
	text-decoration: none;
}
/* Icon helpers */
.icon { display:inline-block; vertical-align:middle; }
.icon--cute-gear { color: color-mix(in oklab, var(--fg) 82%, var(--brand) 18%); }
/* Tiny calendar icon indicating "back to today" */
.icon--today { margin-left: 6px; opacity: 0.9; }
.icon--today .today-dot { fill: var(--brand); }
.brand a:hover .icon--today { opacity: 1; }

/* URL helper list */
.url-links { word-break: break-all; }
.url-links .url-row { display:flex; align-items:center; gap:8px; margin:6px 0; }
.url-links .url-row a { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.url-links .copy { padding: 4px 8px; font-size: 12px; }
/* Date nav centered with larger targets */
.nav-controls {
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
}
.nav-controls form {
	display: inline-flex;
	align-items: center;
}
/* Date nav arrows styled like the ＋ button */
.nav-controls .btn {
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 999px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	padding-bottom: 2px;
	color: var(--brand-ink);
	background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 90%, #fed7aa 0%), var(--brand));
	border-color: color-mix(in oklab, var(--brand) 80%, var(--border));
	box-shadow: 0 6px 20px rgba(249, 115, 22, 0.22);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.22);
}
.nav-controls .btn:hover {
	/* Make hover clearly distinct with a brighter top and subtle ring */
	background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 98%, #fed7aa 0%), color-mix(in oklab, var(--brand) 92%, #fb923c 0%));
	box-shadow:
		0 0 0 3px color-mix(in oklab, var(--brand) 18%, transparent),
		0 8px 22px rgba(249, 115, 22, 0.28);
}
.nav-controls .btn:active {
	transform: translateY(1px);
}

@media (max-width: 640px) {
	/* Keep controls on one line and tighten spacing */
	.nav-controls {
		flex-wrap: nowrap;
		gap: var(--space-2);
	}
	.nav-controls .btn {
		width: 40px;
		height: 40px;
		font-size: 22px;
		padding-bottom: 2px;
		flex: 0 0 auto;
	}
	.nav-controls form {
		display: inline-flex;
		align-items: center;
		min-width: 0;
	}
	/* Date size: sufficient but not oversized */
	.nav-controls .input[type='date'] {
		width: clamp(140px, 52vw, 200px);
		height: 40px;
		font-size: 16px; /* keep >=16px to avoid iOS zoom */
		padding: 6px 10px;
	}
}

/* Typography */
h1,
h2,
h3 {
	margin: 0 0 var(--space-3);
	line-height: 1.25;
}
h1 {
	font-size: 24px;
}
h2 {
	font-size: 20px;
}
h3 {
	font-size: 16px;
}
.muted {
	color: var(--muted);
	font-size: 12px;
}
.msg {
	margin: var(--space-3) 0;
	color: var(--success);
}
.error {
	color: var(--danger);
}

/* Toast message at top, auto-hidden via JS */
.toast {
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	padding: 8px 12px;
	background: color-mix(in oklab, var(--brand) 12%, white 88%);
	color: var(--fg);
	border: 1px solid color-mix(in oklab, var(--brand) 20%, var(--border));
	border-radius: 999px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Cards, sections */
.card {
	background: var(--surface);
	border: 1px solid color-mix(in oklab, white 60%, var(--border));
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: var(--space-5);
	backdrop-filter: blur(10px) saturate(1.2);
}
.section {
	border: 1px solid color-mix(in oklab, white 55%, var(--border));
	padding: var(--space-4);
	background: var(--surface);
	backdrop-filter: blur(8px) saturate(1.15);
}
.section__head {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	justify-content: flex-start;
	margin: 0 0 var(--space-2);
}
.section__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 2px 4px;
	border-radius: 0;
	border: none;
	background: transparent;
	color: var(--fg);
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
}
.section__label::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--brand);
	box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand) 12%, transparent);
}
.section__label::before {
	animation: dot-breathe 2.6s ease-in-out infinite;
	transform-origin: center;
}
@keyframes dot-breathe {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand) 12%, transparent);
	}
	50% {
		transform: scale(1.15);
		box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 8%, transparent);
	}
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand) 12%, transparent);
	}
}
.section__label:hover {
	text-decoration: underline;
}
.section__label:active {
	transform: translateY(1px);
}

/* Grid */
.grid {
	display: grid;
	gap: var(--space-4);
}
.grid--cols {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.grid--matrix {
	grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 640px) {
	/* Keep 2 columns on small screens to maintain the 2x2 (田) layout */
	.grid--matrix {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Forms */
label {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: var(--space-1);
}
.date-row__left label {
    display: inline-block;
    margin: 0 6px 0 0; /* inline with date input */
    white-space: nowrap; /* avoid wrapping just the label */
}
.field {
	margin-bottom: var(--space-3);
}
.input,
.select,
.textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--fg);
    border-radius: 8px;
}
/* Date input inside date-row should not stretch full width */
.date-row__left .input[type='date'] {
    width: auto;
    flex: 0 0 auto;
}
.textarea {
	min-height: 68px;
	resize: vertical;
}
.input:focus,
.select:focus,
.textarea:focus {
	outline: 2px solid color-mix(in oklab, var(--brand) 30%, transparent);
	outline-offset: 2px;
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--bg);
	color: var(--fg);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}
.btn:focus {
	outline: 3px solid color-mix(in oklab, var(--brand) 35%, transparent);
	outline-offset: 2px;
}
.btn--primary {
    background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 90%, #fed7aa 0%), var(--brand));
    color: var(--brand-ink);
    border-color: color-mix(in oklab, var(--brand) 80%, var(--border));
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.22);
}
.btn--tomorrow {
    background: linear-gradient(180deg, color-mix(in oklab, var(--label1) 90%, white 0%), var(--label1));
    color: #fff;
    border-color: color-mix(in oklab, var(--label1) 80%, var(--border));
    box-shadow: 0 6px 20px color-mix(in oklab, var(--label1) 30%, rgba(0,0,0,0));
}
.btn--later {
    /* Navy tone for "また今度" */
    background: linear-gradient(180deg, #1e3a8a, #1e40af);
    color: #fff;
    border-color: color-mix(in oklab, #1e3a8a 80%, var(--border));
    box-shadow: 0 6px 20px rgba(30, 58, 138, 0.28);
}
.btn--tomorrow:hover,
.btn--later:hover {
    filter: saturate(1.05) brightness(1.02);
}
.btn--tomorrow:active,
.btn--later:active {
    transform: translateY(1px);
}
.btn--ghost {
	background: transparent;
}
.btn--danger {
	border-color: color-mix(in oklab, var(--danger) 50%, var(--border));
	color: var(--danger);
}
.btn--sm {
	padding: 4px 10px;
	font-size: 12px;
}
/* Subtle hover for ghost in glass UI */
.btn--ghost:hover {
	/* More visible hover on glass backgrounds */
	background: color-mix(in oklab, white 45%, transparent);
	border-color: color-mix(in oklab, var(--border) 40%, var(--brand) 20%);
}

/* Task list */
.tasks {
	margin-top: var(--space-2);
	display: grid;
	gap: var(--space-1);
}
.task {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}
.task[draggable='true'] {
	cursor: grab;
}
.drag-handle {
	width: 18px;
	height: 28px;
	border-radius: 6px;
	flex: 0 0 auto;
	background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--fg) 16%, transparent) 0 2px, transparent 2px 4px);
	opacity: 0.65;
	cursor: grab;
	touch-action: none;
}
.drag-handle:active {
	cursor: grabbing;
	opacity: 1;
}
.note {
	padding: 10px 12px;
	border: 1px solid color-mix(in oklab, white 60%, var(--border));
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.55); /* slightly more transparent */
	box-shadow: var(--shadow);
	backdrop-filter: blur(6px) saturate(1.1);
}
.task__check {
	display: flex;
	align-items: center;
	gap: 8px;
}
.task__body {
	flex: 1;
	min-width: 0;
}
.task__meta {
	font-size: 12px;
	color: var(--muted);
}
.task__title {
	font-weight: bold;
	font-size: 14px;
	margin-bottom: 3px;
}
.task--done .task__title {
	text-decoration: line-through;
}

/* Dim completed tasks overall */
.task.task--done {
	opacity: 0.4;
}

/* Dragging visuals */
.task.dragging {
	opacity: 0.35;
}
.drag-ghost {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
	pointer-events: none;
	transform: translate3d(0, 0, 0);
	opacity: 0.8; /* スマホで“掴んでいる”感を強化 */
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

/* Decorative checkbox as a button */
.checkbtn {
	--size: 24px;
	width: var(--size);
	height: var(--size);
	display: inline-grid;
	place-items: center;
	border-radius: 6px;
	border: none;
	background: transparent;
	cursor: pointer;
	position: relative;
}
.checkbtn:focus {
	outline: 3px solid color-mix(in oklab, var(--brand) 35%, transparent);
	outline-offset: 2px;
}
.checkbtn__icon {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	border: 2px solid color-mix(in oklab, var(--fg) 60%, transparent);
}
.checkbtn.is-done .checkbtn__icon {
	background: var(--brand);
	border-color: var(--brand);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9);
}
.checkbtn.is-done::after {
	content: '✓';
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--brand-ink);
	font-size: 14px;
	font-weight: 700;
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* Pull the check button slightly left to maximize content area */
.task__check {
	margin-left: -2px;
}

/* Memo indicator: underline the card when memo exists */
.task {
	position: relative;
}
.task__body {
	padding-right: 2px;
	margin-left: -6px;
}
.task.has-memo {
	border-bottom-color: var(--brand);
	border-bottom-width: 2px;
}

/* Mobile tweaks: tighter padding and clip long titles */
@media (max-width: 640px) {
  /* (reverted) row--cat-date のレイアウト調整は撤回 */

  /* Edge-to-edge grid (no side padding) */
  .container {
    padding-left: 0;
    padding-right: 0;
  }

	/* Narrower gaps for 田 layout */
	.grid {
		gap: var(--space-1);
	}
	.section {
		padding: var(--space-2);
	}
	.section h3 {
		margin: 0 0 var(--space-2);
	}

	/* Task card spacing and constraints */
	.note {
		padding: 6px 2px;
		position: relative; /* for gloss overlay */
		background: rgba(255, 255, 255, 0.5);
	}
	.note::after {
		content: '';
		position: absolute;
		inset: 0;
		border-radius: inherit;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.08) 42%, rgba(255, 255, 255, 0) 60%);
		pointer-events: none;
		mix-blend-mode: screen;
	}
	.task {
		gap: var(--space-2);
		max-width: 100%;
		overflow: hidden;
	}
	/* Show a compact drag handle on mobile */
	.drag-handle {
		display: block;
		width: 10px;
		height: 26px;
		opacity: 0.9;
	}
	/* absolute memo: no layout shift on mobile either */
	.task__title {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: clip;
	}
	.task__body {
		padding-right: 0;
	}

	/* Softer, gently breathing tint for mobile */
	.task::before {
		background: linear-gradient(180deg, color-mix(in oklab, var(--task-accent) 16%, transparent), color-mix(in oklab, var(--task-accent) 10%, transparent));
		opacity: 0.78;
		animation: tint-breathe 8s ease-in-out infinite;
		will-change: opacity;
	}
}

@keyframes tint-breathe {
	0% {
		opacity: 0.6;
	}
	50% {
		opacity: 0.98;
	}
	100% {
		opacity: 0.6;
	}
}

/* Kind color mapping and tint overlay */
:root {
	/* Kind color slots (to be aligned with 指示3.png top→bottom) */
	--kind1: #3b82f6; /* blue-500 (kind=1 is blue) */
	--kind2: #f97316; /* orange-500 */
	--kind3: #fb923c; /* orange-400 */
	--kind4: #f59e0b; /* amber-500 */
	--kind5: #ea580c; /* orange-600 */
}
.task {
	--task-accent: color-mix(in oklab, var(--brand) 70%, #0000);
}

/* 多件数時の初期レンダリング負荷を軽減 */
@supports (content-visibility: auto) {
  .tasks .task {
    content-visibility: auto;
    contain-intrinsic-size: 44px 200px; /* 仮サイズ: 行高さと最大幅の目安 */
  }
}

/* 多件数モードでは各カードの背景アニメーションを停止して描画コストを削減 */
.tasks--many .task::before {
  animation: none !important;
}
.tasks--many .task {
  box-shadow: none; /* 影の計算も抑制 */
}
.task[data-kind='1'] {
	--task-accent: var(--kind1);
}
.task[data-kind='2'] {
	--task-accent: var(--kind2);
}
.task[data-kind='3'] {
	--task-accent: var(--kind3);
}
.task[data-kind='4'] {
	--task-accent: var(--kind4);
}
.task[data-kind='5'] {
	--task-accent: var(--kind5);
}
.task {
	border-left: 3px solid color-mix(in oklab, var(--task-accent) 50%, transparent);
}
/* Apply subtle kind tint as a background layer (frees pseudo-elements) */
/* Liquid glass tint per kind: subtle color pools + highlight */
.task::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(40% 60% at 18% 12%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 60%), radial-gradient(55% 75% at 78% 80%, color-mix(in oklab, var(--task-accent) 16%, transparent) 0%, transparent 70%), linear-gradient(180deg, color-mix(in oklab, var(--task-accent) 10%, transparent), color-mix(in oklab, var(--task-accent) 6%, transparent));
	will-change: transform;
	animation: liquid-drift 18s ease-in-out infinite alternate;
}

/* Slightly desynchronize animations so cards don't move in unison */
.tasks .task:nth-child(4n + 1)::before {
	animation-delay: 0s;
}
.tasks .task:nth-child(4n + 2)::before {
	animation-delay: 2s;
}
.tasks .task:nth-child(4n + 3)::before {
	animation-delay: 4s;
}
.tasks .task:nth-child(4n + 4)::before {
	animation-delay: 6s;
}

@keyframes liquid-drift {
	0% {
		transform: translate3d(-1.2%, -0.8%, 0) scale(1);
	}
	50% {
		transform: translate3d(0.6%, 0.9%, 0) scale(1.01);
	}
	100% {
		transform: translate3d(1.4%, -0.6%, 0) scale(1.02);
	}
}

@media (prefers-reduced-motion: reduce) {
	.task::before {
		animation: none;
	}
}

/* Badges */
.badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	line-height: 1;
	padding: 4px 6px;
	border-radius: 999px;
	border: 1px solid color-mix(in oklab, white 60%, var(--border));
	color: var(--muted);
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(4px);
}
.badge--square { border-radius: 6px; padding: 3px 6px; font-weight: 600; }
.plan-badge--free { color: #0a7f42; border-color: color-mix(in oklab, #0a7f42 60%, var(--border)); background: color-mix(in oklab, #0a7f42 8%, white 92%); }
.badge--memo {
	font-weight: 700;
	letter-spacing: 0.1em;
}

/* Utility */
.row {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
}
.right {
	margin-left: auto;
}
.center {
	text-align: center;
}
/* (reverted) .only-mobile/.only-desktop helpers は使用を取り止め */
.mt-2 {
	margin-top: var(--space-2);
}
.mt-3 {
	margin-top: var(--space-3);
}
.mb-3 {
	margin-bottom: var(--space-3);
}
.mb-4 {
	margin-bottom: var(--space-4);
}

/* Footer */
footer.site {
    border-top: 1px solid color-mix(in oklab, white 60%, var(--border));
    padding: var(--space-4) 0;
    color: var(--muted);
    font-size: 12px;
    /* Liquid glass same as cards/drawers */
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(10px) saturate(1.15);
}

/* Drag target highlight */
.dropzone.is-dropping {
	outline: 3px dashed color-mix(in oklab, var(--brand) 45%, transparent);
	outline-offset: 4px;
}

/* Overlay / Modal */
.overlay[hidden] {
	display: none;
}
.overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
}
.overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(2px) saturate(1.05);
}
.modal {
	position: relative;
	width: min(720px, calc(100% - 24px));
	max-height: calc(100% - 24px);
	overflow: auto;
	padding: var(--space-5);
	background: rgba(255, 255, 255, 0.75);
	border: 1px solid color-mix(in oklab, white 60%, var(--border));
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	backdrop-filter: blur(10px) saturate(1.15);
}

/* PC: widen add/edit modals and make textarea taller */
@media (min-width: 1024px) {
  /* Target only Add/Edit overlays to avoid affecting other small dialogs */
  #overlay-add .modal,
  #overlay-edit .modal {
    width: min(1000px, calc(100% - 24px));
  }
  #overlay-add .textarea,
  #overlay-edit .textarea {
    /* Base min-height is 68px (~4 lines). Add ~2 lines on desktop. */
    min-height: 104px;
  }
}

/* Drawers (liquid glass style) */
.drawer .drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(2px) saturate(1.05);
}
.drawer__panel {
    position: fixed;
    top: 0; bottom: 0;
    width: min(320px, 92vw);
    background: rgba(255, 255, 255, 0.75);
    color: var(--fg);
    border: 1px solid color-mix(in oklab, white 60%, var(--border));
    box-shadow: 0 12px 38px rgba(0,0,0,0.16);
    backdrop-filter: blur(10px) saturate(1.15);
    overflow: auto;
}
.drawer__panel--left { left: 0; border-right-width: 0; }
.drawer__panel--right { right: 0; border-left-width: 0; }
.drawer__head {
    display:flex;align-items:center;justify-content:space-between;
    padding: 12px 14px;
    border-bottom: 1px solid color-mix(in oklab, white 60%, var(--border));
}
.drawer__body { padding: 8px 0; }
.menu { list-style:none; margin:0; padding:0; }
.menu__item { display:block; padding:12px 16px; text-decoration:none; color:inherit; }
.menu__item:hover { background: color-mix(in oklab, var(--brand) 10%, white 90%); }
.menu__item.is-active { background: #eef5ff; font-weight:600; }
.drawer__panel--right .menu__item {
  /* Make right menu items match left menu look */
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  box-shadow: none;
}
.drawer__panel--right .menu__item:hover { background: color-mix(in oklab, var(--brand) 10%, white 90%); }
.drawer__panel--right .menu__item::after { content: none; }
.room-item { display:flex; align-items:center; gap:8px; padding:0 4px; }
.room-item .drag-handle { width: 16px; height: 28px; opacity: .6; }
.room-item .menu__item { flex:1 1 auto; }
@media (max-width: 640px) {
  /* Hide room reorder handle on small screens */
  .drawer__panel--left .room-item .drag-handle { display: none; }
}
.modal header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-4);
}
.modal h2 {
	font-size: 18px;
	margin: 0;
}
.modal .actions {
	display: flex;
	gap: var(--space-3);
}

/* Wide primary actions (centered buttons in modals) */
.btn--wide { min-width: 160px; }
@media (max-width: 640px) {
  .modal .actions { flex-wrap: wrap; }
  /* Center action row spans full width on narrow screens */
  .modal .actions > .row { flex: 0 0 auto; }
  .btn--wide {
    /* Keep a comfortable width without overflow */
    min-width: 120px;
    width: clamp(120px, 55vw, 220px);
    max-width: 90vw;
  }
}

/* Actions stack: Save centered on first row; left/right on second row */
.actions.actions--stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.actions__center { order: 1; flex: 1 0 100%; display: flex; justify-content: center; }
.actions__left { order: 2; flex: 0 1 auto; }
.actions__right { order: 2; margin-left: auto; }

/* Colored copy button */
.btn--copy {
  background: linear-gradient(180deg, color-mix(in oklab, var(--label2) 90%, white 0%), var(--label2));
  color: #fff;
  border-color: color-mix(in oklab, var(--label2) 80%, var(--border));
  box-shadow: 0 6px 20px color-mix(in oklab, var(--label2) 30%, rgba(0,0,0,0));
}
.btn--copy:hover { filter: saturate(1.05) brightness(1.02); }
.btn--copy:active { transform: translateY(1px); }

/* Kind palette (1..7) */
.kind-palette {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}
.kind-dot {
	width: 22px;
	height: 22px;
	border-radius: 999px;
	border: 2px solid transparent;
	background: var(--c, #ddd);
	cursor: pointer;
	padding: 0;
}
.kind-dot[aria-pressed='true'],
.kind-dot.selected {
	outline: 2px solid color-mix(in oklab, var(--fg) 40%, transparent);
	outline-offset: 2px;
	border-color: rgba(0, 0, 0, 0.2);
}

/* Map dot colors to 1..7 without inline styles */
.kind-palette .kind-dot[data-value='1'] {
	--c: var(--label1-bg);
	border-color: var(--label1);
}
.kind-palette .kind-dot[data-value='2'] {
	--c: var(--label2-bg);
	border-color: var(--label2);
}
.kind-palette .kind-dot[data-value='3'] {
	--c: var(--label3-bg);
	border-color: var(--label3);
}
.kind-palette .kind-dot[data-value='4'] {
	--c: var(--label4-bg);
	border-color: var(--label4);
}
.kind-palette .kind-dot[data-value='5'] {
	--c: var(--label5-bg);
	border-color: var(--label5);
}
.kind-palette .kind-dot[data-value='6'] {
	--c: var(--label6-bg);
	border-color: var(--label6);
}
.kind-palette .kind-dot[data-value='7'] {
	--c: var(--label7-bg);
	border-color: var(--label7);
}

/* Task label color accent (left border) by data-kind */
.task {
	border-left: 4px solid transparent;
}
.task[data-kind='1'] {
	border-left-color: var(--label1);
	--label-c: var(--label1);
	--label-bg: var(--label1-bg);
}
.task[data-kind='2'] {
	border-left-color: var(--label2);
	--label-c: var(--label2);
	--label-bg: var(--label2-bg);
}
.task[data-kind='3'] {
	border-left-color: var(--label3);
	--label-c: var(--label3);
	--label-bg: var(--label3-bg);
}
.task[data-kind='4'] {
	border-left-color: var(--label4);
	--label-c: var(--label4);
	--label-bg: var(--label4-bg);
}
.task[data-kind='5'] {
	border-left-color: var(--label5);
	--label-c: var(--label5);
	--label-bg: var(--label5-bg);
}
.task[data-kind='6'] {
	border-left-color: var(--label6);
	--label-c: var(--label6);
	--label-bg: var(--label6-bg);
}
.task[data-kind='7'] {
	border-left-color: var(--label7);
	--label-c: var(--label7);
	--label-bg: var(--label7-bg);
}

/* Task background color by label */
/* Soften label backgrounds a bit */
.task.note[data-kind='1'] {
	background: color-mix(in oklab, var(--label1-bg) 40%, white 60%);
}
.task.note[data-kind='2'] {
	background: color-mix(in oklab, var(--label2-bg) 40%, white 60%);
}
.task.note[data-kind='3'] {
	background: color-mix(in oklab, var(--label3-bg) 40%, white 60%);
}
.task.note[data-kind='4'] {
	background: color-mix(in oklab, var(--label4-bg) 40%, white 60%);
}
.task.note[data-kind='5'] {
	background: color-mix(in oklab, var(--label5-bg) 40%, white 60%);
}
.task.note[data-kind='6'] {
	background: color-mix(in oklab, var(--label6-bg) 40%, white 60%);
}
.task.note[data-kind='7'] {
	background: color-mix(in oklab, var(--label7-bg) 40%, white 60%);
}

/* Gentle hover background animation on each task (desktop/hover devices only) */
@media (hover: hover) and (pointer: fine) {
	.task.note {
		overflow: hidden;
		position: relative;
	}
	.task.note::after {
		content: '';
		position: absolute;
		inset: -8%;
		border-radius: inherit;
		pointer-events: none;
		/* directional light from top-left */
		background: radial-gradient(120% 140% at 8% 0%, color-mix(in oklab, var(--label-bg, #fff) 80%, white 20%), transparent 55%), conic-gradient(from -20deg at 8% 0%, color-mix(in oklab, var(--label-c, #fff) 28%, transparent) 0 40deg, transparent 60deg 360deg);
		mix-blend-mode: screen;
		opacity: 0;
		transform: scale(1.02) rotate(0.0001deg);
		filter: brightness(1);
		transition: opacity 0.2s ease, filter 0.2s ease;
		will-change: transform, opacity, filter;
	}
	.task.note:hover::after {
		opacity: 0.95;
		animation: taskLightPulse 2.4s ease-in-out infinite alternate;
	}
	@keyframes taskLightPulse {
		0% {
			transform: scale(1.02) rotate(-1deg);
			filter: brightness(1);
		}

		100% {
			transform: scale(1.03) rotate(-1deg);
			filter: brightness(1.02);
		}
	}
	/* halo emphasis without lateral sweep */
	.task.note:hover {
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 28px rgba(0, 0, 0, 0.12), 0 0 0 2px color-mix(in oklab, var(--label-c, var(--brand)) 28%, transparent);
	}
}

/* Date row layout */
.date-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-end; /* align date + quick buttons to right */
}
.date-row__left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.date-row__right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}
@media (max-width: 640px) {
    .date-row {
        flex-wrap: wrap;
    }
    .date-row__left {
        flex: 0 0 auto;
    }
    .date-row__right {
        flex: 1 0 100%;
        justify-content: flex-end;
    }
}

/* Round icon button */
.icon {
	width: 18px;
	height: 18px;
	display: inline-block;
}
.btn--round {
	border-radius: 999px;
	width: 36px;
	height: 36px;
	padding: 0;
	font-size: 18px;
	padding-bottom: 0px;
}
.btn--ghost:hover {
	background: color-mix(in oklab, var(--fg) 5%, transparent);
}

/* ==========================
   Desktop-only refinements
   ========================== */
@media (min-width: 768px) {
	/* Brand title a bit larger on PC */
	.brand a {
		font-size: 26px;
	}

	/* Keep FREE badge small even next to large brand title */
	.brand a.plan-badge--free { font-size: 12px; }

	/* Date controls slightly larger for easier click */
	.nav-controls {
		gap: var(--space-4);
	}
	.nav-controls .btn {
		width: 40px;
		height: 40px;
		font-size: 22px;
		padding: 0;
		padding-bottom: 2px;
	}
	.nav-controls .input[type='date'] {
		height: 42px;
		font-size: 16px;
		padding: 8px 12px;
		min-width: 220px;
	}

	/* Hide drag handle since whole task is draggable */
	.drag-handle {
		display: none;
	}

	/* Tasks: follow liquid design with subtle translucency and gloss */
	.note {
		background: rgba(255, 255, 255, 0.5);
		position: relative;
	}
	.note::after {
		content: '';
		position: absolute;
		inset: 0;
		border-radius: inherit;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.08) 42%, rgba(255, 255, 255, 0) 60%);
		pointer-events: none;
		mix-blend-mode: screen;
	}
}