main.css

/* main.css — Ignite app styles.
   App-specific layout and components live here.
   Shared foundation lives in base.css. */

:root {
	--color-bg: #0f0f10;
	--color-bg-elevated: #18181b;
	--color-bg-hover: rgba(255, 255, 255, 0.04);
	--color-text: #e8e8ea;
	--color-text-muted: #9a9aa3;
	--color-border: #1f1f22;
	--color-accent: #f56b0a;
	--color-overdue: #c94a4a;

	--sidebar-width: 240px;
	--sidebar-rail-width: 48px;
	--main-max-width: 960px;
	--main-padding: 1.5rem;
	--radius: 6px;
}

/* Visually hidden, but exposed to screen readers + heading navigation.
   Used for a page-level <h1> on views with no visible title (e.g. Today). */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

/* Mobile baseline: stacked layout. */
body {
	display: grid;
	grid-template-columns: 1fr;
	/* Mobile: a slim auto top-bar row + a 1fr content row that fills the viewport.
	   Without explicit rows the grid stretches BOTH rows to fill min-height:100vh,
	   ballooning the top bar. Reset to `none` at >=768px so the desktop sidebar
	   column still fills full height. */
	grid-template-rows: auto 1fr;
	min-height: 100vh;
}

/* Mobile baseline: the sidebar is an off-canvas drawer that slides in from the left.
   visibility:hidden (not just the off-screen transform) removes the closed drawer from
   the tab order + AT tree; it's restored to visible by body.is-drawer-open and at >=768px. */
#sidebar {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: 90;
	width: min(80vw, 300px);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	overflow-y: auto;
	background: var(--color-bg);
	border-right: 1px solid var(--color-border);
	transform: translateX(-100%);
	visibility: hidden;
	transition:
		transform 200ms ease,
		visibility 200ms;
}

#main {
	width: 100%;
	max-width: var(--main-max-width);
	margin-inline: auto;
	padding: var(--main-padding);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Tablet and up: side-by-side layout. */
@media (min-width: 768px) {
	:root {
		--main-padding: 2rem;
	}
	body {
		grid-template-columns: var(--sidebar-width) 1fr;
		grid-template-rows: none;
		transition: grid-template-columns 200ms ease;
	}
	body.is-sidebar-collapsed {
		grid-template-columns: var(--sidebar-rail-width) 1fr;
	}

	#sidebar {
		position: static;
		z-index: auto;
		width: auto;
		overflow-y: visible;
		transform: none;
		visibility: visible;
		border-right: 1px solid var(--color-border);
		border-bottom: none;
	}
}

/* --- Sidebar --- */
/* Toggle is hidden on mobile (sidebar stacks above main, no collapse needed). */
.sidebar__toggle {
	display: none;
	background: none;
	border: 1px solid var(--color-border);
	color: var(--color-text-muted);
	border-radius: var(--radius);
	width: 32px;
	height: 32px;
	cursor: pointer;
	align-self: flex-start;
}
.sidebar__toggle:hover {
	color: var(--color-text);
	border-color: var(--color-text-muted);
}
@media (min-width: 768px) {
	.sidebar__toggle {
		display: block;
	}
}

.sidebar__areas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
/* Truncate long names instead of wrapping / pushing ⋯ off-row (mirrors .task__title).
   Lives here, before the collapsed-state override below, to keep specificity ascending. */
.sidebar__name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sidebar__count {
	font-variant-numeric: tabular-nums;
	color: var(--color-text-muted);
	font-size: 0.85rem;
	flex-shrink: 0;
}

/* Collapsed state — desktop only; hides labels and counts. */
@media (min-width: 768px) {
	body.is-sidebar-collapsed .sidebar__name,
	body.is-sidebar-collapsed .sidebar__count {
		display: none;
	}
}

/* --- Capture --- */
.capture__form {
	display: flex;
}
.capture__input {
	flex: 1;
	background: var(--color-bg-elevated);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 0.6rem 0.75rem;
	font: inherit;
}
.capture__input::placeholder {
	color: var(--color-text-muted);
}
.capture__input:focus {
	outline: none;
	border-color: var(--color-accent);
}

/* --- NEXT card --- */
.next-card {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-left: 3px solid var(--color-accent);
	border-radius: var(--radius);
	padding: 1rem;
}
.next-card__label {
	margin: 0 0 0.5rem;
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	color: var(--color-accent);
	text-transform: uppercase;
}
.next-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* --- Groups --- */
.group__heading {
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.group--overdue .group__heading {
	color: var(--color-overdue);
}
.group__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

/* --- Task row --- */
.task {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto auto auto auto;
	gap: 0.6rem;
	align-items: center;
	padding: 0.5rem 0.6rem;
	border-radius: var(--radius);
}
.task:hover {
	background: var(--color-bg-elevated);
}
.task__check {
	accent-color: var(--color-accent);
	width: 1rem;
	height: 1rem;
	cursor: pointer;
}
.task__title {
	color: var(--color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.task__star,
.task__menu-btn {
	background: none;
	border: none;
	color: var(--color-text-muted);
	cursor: pointer;
	padding: 0.25rem 0.4rem;
	border-radius: var(--radius);
	font-size: 1rem;
}
.task__star[aria-pressed="true"] {
	color: var(--color-accent);
}
.task__star:hover,
.task__menu-btn:hover {
	color: var(--color-text);
	background: var(--color-bg);
}
.task__time-label,
.task__recurring {
	color: var(--color-text-muted);
	font-size: 0.85rem;
}

/* --- Task `…` menu --- */
/* Anchored to the row via the row's position: relative + this absolute. */
.task-menu {
	position: absolute;
	right: 0.5rem;
	top: 100%;
	z-index: 10;
	margin-top: 0.25rem;
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 0.25rem;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
	min-width: 8rem;
}
.task-menu__item {
	display: block;
	width: 100%;
	background: none;
	border: none;
	color: var(--color-text);
	text-align: left;
	padding: 0.4rem 0.6rem;
	border-radius: var(--radius);
	cursor: pointer;
	font: inherit;
	min-block-size: 44px;
}
.task-menu__item:hover:not(:disabled) {
	background: var(--color-bg);
}
.task-menu__item:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}
/* :disabled is unused today (boundary moves are omitted, not greyed) but kept so
   all three menus stay identical — see .sidebar-menu__item. The move picker's
   "No other sections" empty-race hint reuses this style. */
.task-menu__item:disabled {
	color: var(--color-text-muted);
	cursor: not-allowed;
}

/* --- Move-to picker (a sub-face of the task `…` menu) --- */
/* Scrolls so a long target list never overflows the viewport or hides behind
   the fixed bottom capture bar. 50vh keeps it clear on small screens. */
.task-menu--picker {
	max-height: 50vh;
	overflow-y: auto;
}
.task-menu__group {
	padding-block: 0.15rem;
}
/* Decorative area label (the role="group" aria-label names the area for SRs).
   --color-text-muted on --color-bg-elevated ≈ 6.3:1 — passes WCAG AA. */
.task-menu__group-label {
	margin: 0;
	padding: 0.25rem 0.6rem 0.1rem;
	font-size: 0.75rem;
	color: var(--color-text-muted);
}
.task-menu__item--back {
	margin-top: 0.15rem;
	border-top: 1px solid var(--color-border);
}

/* --- Toast --- */
#toast-root {
	position: fixed;
	left: 0;
	right: 0;
	bottom: calc(var(--capture-h) + 0.5rem);
	display: flex;
	justify-content: center;
	pointer-events: none;
	z-index: 100;
}
.toast {
	background: var(--color-bg-elevated);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 0.6rem 0.75rem;
	display: flex;
	gap: 1rem;
	align-items: center;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
	pointer-events: auto;
}
.toast__undo {
	background: none;
	border: none;
	color: var(--color-accent);
	cursor: pointer;
	font: inherit;
	padding: 0.2rem 0.4rem;
}
.toast__undo:hover {
	text-decoration: underline;
}

/* --- Empty state --- */
.empty {
	color: var(--color-text-muted);
	font-style: italic;
	padding: 2rem 0;
	text-align: center;
}

/* ----------------------------------------------------------------- */
/* M3 — Area view + sections                                          */
/* ----------------------------------------------------------------- */

/* Note: capture bar stays visible on both routes (M3 amendment to Q4).
   The `body.is-area-route` class is still toggled by the controller and
   reserved for future area-only styling, but no rule uses it in M3. */

/* Area shell */
.area {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: var(--main-padding, 1.5rem);
}

.area__header {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
}

.area__title {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--color-text);
	margin: 0;
}

.area--not-found {
	color: var(--color-text-muted);
}

.area__back-link {
	color: var(--color-accent);
	text-decoration: underline;
}

.area__sections {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.area__footer {
	margin-top: 0.5rem;
}

.area__add-section {
	background: transparent;
	color: var(--color-text-muted);
	border: 1px dashed var(--color-border);
	border-radius: 8px;
	padding: 0.75rem 1rem;
	width: 100%;
	min-block-size: 44px;
	cursor: pointer;
	font: inherit;
	text-align: left;
}
.area__add-section:hover {
	color: var(--color-text);
	border-color: var(--color-accent);
}
.area__add-section:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* Section block */
.section {
	background: var(--color-bg-elevated);
	border-radius: 12px;
	border: 1px solid var(--color-border);
}

.section__header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0.5rem;
}

.section__toggle {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: transparent;
	border: 0;
	color: inherit;
	font: inherit;
	text-align: left;
	padding: 0.5rem 0.75rem;
	min-block-size: 44px;
	cursor: pointer;
	border-radius: 6px;
}
.section__toggle:hover {
	background: var(--color-bg-hover);
}
.section__toggle:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.section__chevron {
	display: inline-block;
	font-size: 0.85rem;
	color: var(--color-text-muted);
	transition: transform 150ms ease;
}

/* Section title is rendered as <h2>; reset the default H2 user-agent
   styles (margin, font-size) so it sits inline inside the toggle button. */
.section__title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text);
	margin: 0;
	line-height: 1.2;
}

/* Menu trigger */
.section__menu-btn {
	background: transparent;
	border: 0;
	color: var(--color-text-muted);
	font-size: 1.25rem;
	cursor: pointer;
	padding: 0;
	min-block-size: 44px;
	min-inline-size: 44px;
	border-radius: 6px;
}
.section__menu-btn:hover {
	color: var(--color-text);
	background: var(--color-bg-hover);
}
.section__menu-btn:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* Inline rename input */
.section__header--editing {
	padding: 0.25rem 0.5rem;
}
.section__rename-input {
	flex: 1;
	background: var(--color-bg-elevated);
	color: var(--color-text);
	border: 1px solid var(--color-accent);
	border-radius: 6px;
	padding: 0.5rem 0.75rem;
	font: inherit;
	min-block-size: 44px;
}
.section__rename-input:focus {
	outline: none;
}

/* Section body */
.section__body {
	padding: 0 0.5rem 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.section__tasks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

/* Collapsed state — CSS hook on the outer <section> */
.section[data-collapsed="true"] .section__body {
	display: none;
}
.section[data-collapsed="true"] .section__chevron {
	transform: rotate(-90deg);
}

/* Section dropdown menu */
.section-menu {
	position: relative;
	margin: 0 0.5rem;
	list-style: none;
	padding: 0.25rem;
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	display: flex;
	flex-direction: column;
}

.section-menu__item {
	display: block;
	width: 100%;
	background: transparent;
	border: 0;
	color: var(--color-text);
	font: inherit;
	text-align: left;
	padding: 0.5rem 0.75rem;
	min-block-size: 44px;
	cursor: pointer;
	border-radius: 6px;
}
.section-menu__item:hover:not(:disabled) {
	background: var(--color-bg-hover);
}
.section-menu__item:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}
/* :disabled is unused today (boundary moves are omitted, not greyed) but kept so
   all three menus stay identical — see .sidebar-menu__item. */
.section-menu__item:disabled {
	color: var(--color-text-muted);
	cursor: not-allowed;
}

/* Sidebar wordmark + active state */
.sidebar__home {
	background: transparent;
	border: 0;
	color: var(--color-text);
	font-size: 1.1rem;
	font-weight: 700;
	cursor: pointer;
	padding: 0.75rem 1rem;
	min-block-size: 44px;
	text-align: left;
	width: 100%;
}
.sidebar__home:hover {
	color: var(--color-accent);
}
.sidebar__home:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}
.sidebar__home.is-active {
	color: var(--color-accent);
}

/* Sidebar area row buttons */
.sidebar__area {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: transparent;
	border: 0;
	color: var(--color-text);
	font: inherit;
	text-align: left;
	padding: 0.5rem 0.75rem;
	min-block-size: 44px;
	cursor: pointer;
	border-radius: 6px;
}
.sidebar__area:hover {
	background: var(--color-bg-hover);
}
.sidebar__area:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}
.sidebar__area.is-active {
	color: var(--color-accent);
	background: var(--color-bg-hover);
}

/* Reduced motion: disable chevron rotation animation */
@media (prefers-reduced-motion: reduce) {
	.section__chevron {
		transition: none;
	}
}

/* Desktop+ */
@media (min-width: 1024px) {
	.area__title {
		font-size: 1.75rem;
	}
}

/* ===== M5: Sidebar area CRUD ===== */

/* Row is a flex container so .sidebar__menu-btn sits inline-right of .sidebar__area. */
.sidebar__area-row {
	position: relative;
	display: flex;
	align-items: center;
}
.sidebar__area-row .sidebar__area {
	flex: 1;
	min-width: 0;
}

/* Menu trigger — mirrors .section__menu-btn */
.sidebar__menu-btn {
	background: transparent;
	border: 0;
	color: var(--color-text-muted);
	font-size: 1.25rem;
	cursor: pointer;
	padding: 0;
	min-block-size: 44px;
	min-inline-size: 44px;
	border-radius: 6px;
}
.sidebar__menu-btn:hover {
	color: var(--color-text);
	background: var(--color-bg-hover);
}
.sidebar__menu-btn:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* Dropdown — absolute (overlays instead of pushing rows down), anchored to the
   relative row; sizes to content so it can't overflow the 240px sidebar. */
.sidebar-menu {
	position: absolute;
	top: 100%;
	right: 0.5rem;
	z-index: 10;
	list-style: none;
	margin: 0;
	padding: 0.25rem;
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	display: flex;
	flex-direction: column;
}

/* Menu item — mirrors .section-menu__item (separate class per the menu-parity
   convention). :disabled is unused today but kept so all three menus stay identical. */
.sidebar-menu__item {
	display: block;
	width: 100%;
	background: transparent;
	border: 0;
	color: var(--color-text);
	font: inherit;
	text-align: left;
	padding: 0.5rem 0.75rem;
	min-block-size: 44px;
	cursor: pointer;
	border-radius: 6px;
}
.sidebar-menu__item:hover:not(:disabled) {
	background: var(--color-bg-hover);
}
.sidebar-menu__item:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}
.sidebar-menu__item:disabled {
	color: var(--color-text-muted);
	cursor: not-allowed;
}

/* Inline rename — mirrors .section__rename-input */
.sidebar__area-row--editing {
	padding: 0.25rem 0.5rem;
	gap: 0.5rem;
}
.sidebar__rename-input {
	flex: 1;
	min-width: 0;
	background: var(--color-bg-elevated);
	color: var(--color-text);
	border: 1px solid var(--color-accent);
	border-radius: 6px;
	padding: 0.5rem 0.75rem;
	font: inherit;
	min-block-size: 44px;
}
.sidebar__rename-input:focus {
	outline: none;
}

/* + New area — full-width dashed button; mirrors .area__add-section */
.sidebar__add-area-row {
	list-style: none;
	margin-top: 0.5rem;
}
.sidebar__add-area {
	background: transparent;
	color: var(--color-text-muted);
	border: 1px dashed var(--color-border);
	border-radius: 8px;
	padding: 0.5rem 0.75rem;
	width: 100%;
	min-block-size: 44px;
	cursor: pointer;
	font: inherit;
	text-align: left;
}
.sidebar__add-area:hover {
	color: var(--color-text);
	border-color: var(--color-accent);
}
.sidebar__add-area:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* Collapsed state — desktop-only (matches the rail + label/count hides above). */
@media (min-width: 768px) {
	body.is-sidebar-collapsed .sidebar__menu-btn,
	body.is-sidebar-collapsed .sidebar__add-area-row,
	body.is-sidebar-collapsed .sidebar__rename-input {
		display: none;
	}
}

/* --- Inline task rename --- */
/* When a task row is in rename mode, the <li> renders an input-only child.
   Override the grid layout so the input takes the full row width
   (checkbox / star / ⋯ are not rendered during rename — mutually exclusive
   with menu state). Row height is preserved by min-block-size on the input
   matching .task baseline padding so neighbours don't shift. */
.task--editing {
	display: block;
	padding: 0.5rem 0.6rem;
}
.task--editing:hover {
	background: transparent; /* no hover bg during rename — focus border is the affordance */
}
.task__rename-input {
	width: 100%;
	background: var(--color-bg-elevated);
	color: var(--color-text);
	border: 1px solid var(--color-accent);
	border-radius: var(--radius);
	padding: 0.5rem 0.75rem;
	font: inherit;
	min-block-size: 44px;
}
.task__rename-input:focus {
	outline: none;
}

/* ================================================================= */
/* v0.2 — Mobile shell: top bar + off-canvas drawer + pinned capture  */
/* Mobile-first: the rules below are the BASELINE (phones). The        */
/* @media (min-width: 768px) block restores the desktop layout, and    */
/* the body.is-drawer-open state overrides come LAST so specificity     */
/* stays ascending (Biome noDescendingSpecificity).                    */
/* ================================================================= */

:root {
	/* Height reserved for the pinned mobile capture bar (input + padding + the
	   home-indicator safe area). Single source of truth: #main's bottom padding
	   and the toast lift both derive from it so they can't drift. */
	--capture-h: calc(3.4rem + env(safe-area-inset-bottom, 0px));
}

/* Top bar — mobile only (hidden at >=768px). Both buttons are >=44px touch targets. */
#topbar {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0.5rem;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}
.topbar__menu,
.topbar__wordmark {
	background: transparent;
	border: 0;
	color: var(--color-text);
	font: inherit;
	min-block-size: 44px;
	min-inline-size: 44px;
	border-radius: var(--radius);
	cursor: pointer;
}
.topbar__menu {
	font-size: 1.25rem;
}
.topbar__wordmark {
	padding-inline: 0.5rem;
	font-size: 1.1rem;
	font-weight: 700;
}
.topbar__menu:hover,
.topbar__wordmark:hover {
	color: var(--color-accent);
}
.topbar__menu:focus-visible,
.topbar__wordmark:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* Scrim behind the open drawer. Body-level sibling of #main (so it stays tappable
   while #main is inert). Class-driven (not the hidden attribute) so it can fade. */
#scrim {
	position: fixed;
	inset: 0;
	z-index: 80;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 200ms ease,
		visibility 200ms;
}

/* Capture pinned to the bottom of the viewport. */
#capture-root {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 60;
	padding: 0.5rem var(--main-padding);
	padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
	background: var(--color-bg);
	border-top: 1px solid var(--color-border);
}

/* Reserve space so the last task clears the pinned capture bar. */
#main {
	padding-block-end: calc(var(--main-padding) + var(--capture-h));
}

/* Lock background scroll while the drawer is open. */
body.is-drawer-open {
	overflow: hidden;
}

/* Reduced motion: drawer + scrim appear without the slide/fade.
   Placed before the state overrides so #sidebar / #scrim specificity stays ascending. */
@media (prefers-reduced-motion: reduce) {
	#sidebar,
	#scrim {
		transition: none;
	}
}

/* Desktop / tablet: restore the v0.1 layout exactly. */
@media (min-width: 768px) {
	#topbar {
		display: none;
	}
	#scrim {
		display: none;
	}
	#capture-root {
		position: static;
		z-index: auto;
		padding: 0;
		background: transparent;
		border-top: 0;
	}
	#main {
		padding-block-end: var(--main-padding);
	}
	#toast-root {
		bottom: 1rem;
	}
}

/* Open-state overrides — LAST so their higher specificity stays in ascending
   source order. Only meaningful on mobile; harmless at >=768px (matchMedia clears
   is-drawer-open on crossover, and these props are no-ops against the static layout). */
body.is-drawer-open #sidebar {
	transform: none;
	visibility: visible;
}
body.is-drawer-open #scrim {
	opacity: 1;
	visibility: visible;
}

/* ================================================================= */
/* Recurrence dialog — controller-owned modal repeat editor.          */
/* Mobile-first: bottom sheet. >=768px: centered dialog. Background    */
/* `inert` is set by the controller; this is pure presentation.        */
/* ================================================================= */
.repeat-backdrop {
	position: fixed;
	inset: 0;
	z-index: 200; /* above toast (100), scrim (80) */
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: flex-end; /* bottom sheet on mobile */
	justify-content: center;
}
.repeat-panel {
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius) var(--radius) 0 0;
	padding: 1rem;
	padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
	display: flex;
	flex-direction: column;
	gap: 1rem;
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
	animation: repeat-sheet-in 200ms ease;
}
@keyframes repeat-sheet-in {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}
.repeat-panel__heading {
	margin: 0;
	font-size: 1.1rem;
}
.repeat-fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.repeat-fieldset__legend {
	padding: 0;
	font-size: 0.85rem;
	color: var(--color-text-muted);
}
.repeat-cadence {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.repeat-cadence__option {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-block-size: 44px;
	padding-inline: 0.4rem;
	cursor: pointer;
}
.repeat-cadence__input {
	inline-size: 1.1rem;
	block-size: 1.1rem;
	accent-color: var(--color-accent);
}
.repeat-field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.repeat-field--interval {
	flex-flow: row wrap;
	align-items: center;
	gap: 0.5rem;
}
.repeat-field label {
	font-size: 0.85rem;
	color: var(--color-text-muted);
}
.repeat-field__unit {
	color: var(--color-text-muted);
}
.repeat-input {
	min-block-size: 44px;
	padding: 0.5rem;
	background: var(--color-bg);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font: inherit;
}
.repeat-input--interval {
	inline-size: 5rem;
}
.repeat-input:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}
.repeat-weekdays {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}
.repeat-weekday {
	min-inline-size: 44px;
	min-block-size: 44px;
	border: 1px solid var(--color-border);
	background: var(--color-bg);
	color: var(--color-text);
	border-radius: var(--radius);
	cursor: pointer;
	font: inherit;
}
.repeat-weekday[aria-pressed="true"] {
	background: var(--color-accent);
	color: var(--color-bg); /* dark text on orange ≈ AA */
	border-color: var(--color-accent);
}
.repeat-weekday:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}
.repeat-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: flex-end;
	align-items: center;
}
.repeat-btn {
	min-block-size: 44px;
	padding: 0.5rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-bg);
	color: var(--color-text);
	font: inherit;
	cursor: pointer;
}
.repeat-btn--primary {
	background: var(--color-accent);
	color: var(--color-bg);
	border-color: var(--color-accent);
}
.repeat-btn--remove {
	margin-inline-end: auto; /* push Remove to the left of Cancel/Save */
	color: var(--color-overdue);
}
.repeat-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.repeat-btn:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* Reduced motion: no slide-in. */
@media (prefers-reduced-motion: reduce) {
	.repeat-panel {
		animation: none;
	}
}

/* Desktop / tablet: centered dialog instead of a bottom sheet. */
@media (min-width: 768px) {
	.repeat-backdrop {
		align-items: center;
	}
	.repeat-panel {
		inline-size: 420px;
		max-inline-size: 92vw;
		border-radius: var(--radius);
		animation: none;
	}
}