/**
 * Online Lists Maker / Smart List Engine — design system.
 * Namespaced (.sle-*). Light + dark themes. Mobile-first. WCAG 2.2 AA targets.
 * See docs/design-system.md for the full spec.
 */

/* ================= Tokens ================= */
.sle-app {
	--sle-bg: #fffdf8;
	--sle-surface: #f7f4ea;
	--sle-surface-2: #ece7d5;
	--sle-text: #14231c;
	--sle-text-muted: #5c6b61;
	--sle-border: #e2dcc9;
	--sle-primary: #0b5c44;
	--sle-primary-hover: #084a37;
	--sle-primary-text: #ffffff;
	--sle-success: #0e7a58;
	--sle-danger: #b3261e;
	--sle-warning-bg: #fff7e6;
	--sle-warning-text: #7a5b00;
	--sle-warning-border: #f0d98c;
	--sle-radius-sm: 8px;
	--sle-radius: 12px;
	--sle-radius-lg: 16px;
	--sle-space-1: 4px;
	--sle-space-2: 8px;
	--sle-space-3: 12px;
	--sle-space-4: 16px;
	--sle-space-6: 24px;
	--sle-space-8: 32px;
	--sle-fs-xs: 0.8rem;
	--sle-fs-sm: 0.85rem;
	--sle-fs-base: 1rem;
	--sle-fs-md: 1.05rem;
	--sle-fs-lg: 1.25rem;
	--sle-fs-xl: 1.6rem;
	--sle-fs-hero: clamp(1.8rem, 4vw, 2.6rem);
	--sle-shadow: 0 1px 2px rgba(20, 35, 28, 0.06), 0 4px 16px rgba(20, 35, 28, 0.08);
	--sle-shadow-lg: 0 8px 32px rgba(20, 35, 28, 0.16);
	--sle-focus: 0 0 0 3px rgba(11, 92, 68, 0.35);
	color-scheme: light;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--sle-text);
	background: var(--sle-bg);
	line-height: 1.5;
	font-size: var(--sle-fs-base);
}

.sle-app[data-theme="dark"] {
	--sle-bg: #0f1512;
	--sle-surface: #161d17;
	--sle-surface-2: #1e2620;
	--sle-text: #e9efe8;
	--sle-text-muted: #9aa89e;
	--sle-border: #2a332c;
	--sle-primary: #57c98d;
	--sle-primary-hover: #6fd8a0;
	--sle-primary-text: #08130d;
	--sle-success: #4ade80;
	--sle-danger: #ff7a7a;
	--sle-warning-bg: #2b230f;
	--sle-warning-text: #ffd97a;
	--sle-warning-border: #6b5518;
	--sle-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35);
	--sle-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
	--sle-focus: 0 0 0 3px rgba(87, 201, 141, 0.4);
	color-scheme: dark;
}

.sle-app *, .sle-app *::before, .sle-app *::after { box-sizing: border-box; }

/* Screen-reader-only utility (announcer, completion cues). */
.sle-visually-hidden {
	position: absolute !important;
	width: 1px !important; height: 1px !important;
	padding: 0 !important; margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.sle-hidden { display: none !important; }

/* ================= Icons ================= */
.sle-icon { display: inline-flex; flex: none; width: 20px; height: 20px; vertical-align: -4px; }
.sle-icon svg { width: 100%; height: 100%; display: block; }
.sle-btn .sle-icon { width: 18px; height: 18px; }

/* ================= Buttons ================= */
.sle-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-height: 44px;
	min-width: 44px;
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--sle-border);
	border-radius: var(--sle-radius);
	background: var(--sle-surface);
	color: var(--sle-text);
	font-size: 0.95rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}
.sle-btn:hover { background: var(--sle-surface-2); border-color: var(--sle-text-muted); }
.sle-btn:active { transform: translateY(1px); }
.sle-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.sle-btn--primary {
	background: var(--sle-primary);
	border-color: var(--sle-primary);
	color: var(--sle-primary-text);
	box-shadow: 0 6px 16px -6px rgba(11, 92, 68, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.sle-btn--primary:hover {
	background: var(--sle-primary-hover);
	border-color: var(--sle-primary-hover);
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -6px rgba(11, 92, 68, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.sle-btn--primary:active { transform: translateY(0); box-shadow: 0 3px 10px -4px rgba(11, 92, 68, 0.5); }
.sle-btn--ghost { background: transparent; border-color: transparent; }
.sle-btn--ghost:hover { background: var(--sle-surface-2); border-color: transparent; }
.sle-btn--danger { color: var(--sle-danger); border-color: var(--sle-danger); background: transparent; }
.sle-btn--danger:hover { background: var(--sle-danger); color: #fff; border-color: var(--sle-danger); }
.sle-app[data-theme="dark"] .sle-btn--danger:hover { color: #0f141b; }
.sle-btn--small { min-height: 44px; padding: 0.35rem 0.85rem; font-size: var(--sle-fs-sm); border-radius: var(--sle-radius-sm); }
.sle-btn.is-copied { border-color: var(--sle-success); color: var(--sle-success); }

.sle-kbd {
	display: inline-block;
	padding: 0.1rem 0.45rem;
	border: 1px solid var(--sle-border);
	border-bottom-width: 2px;
	border-radius: 6px;
	background: var(--sle-surface);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.82em;
	white-space: nowrap;
}

/* ================= Inputs ================= */
.sle-input {
	width: 100%;
	min-height: 44px;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--sle-border);
	border-radius: var(--sle-radius);
	background: var(--sle-bg);
	color: var(--sle-text);
	font-size: var(--sle-fs-base);
	font-family: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sle-input:hover { border-color: var(--sle-text-muted); }
.sle-input::placeholder { color: var(--sle-text-muted); opacity: 1; }
textarea.sle-input { line-height: 1.5; }

.sle-btn:focus-visible, .sle-input:focus-visible,
.sle-item:focus-visible, .sle-item__text:focus-visible {
	outline: none;
	box-shadow: var(--sle-focus);
	border-color: var(--sle-primary);
}

/* ================= Loading / skeletons ================= */
.sle-loading { display: flex; align-items: center; gap: 0.6rem; padding: 2rem; color: var(--sle-text-muted); }
.sle-spinner {
	width: 20px; height: 20px; border-radius: 50%; flex: none;
	border: 3px solid var(--sle-border); border-top-color: var(--sle-primary);
	animation: sle-spin 0.8s linear infinite;
}
@keyframes sle-spin { to { transform: rotate(360deg); } }

.sle-skeleton {
	display: inline-block;
	border-radius: 6px;
	background: linear-gradient(90deg, var(--sle-surface-2) 25%, var(--sle-surface) 50%, var(--sle-surface-2) 75%);
	background-size: 200% 100%;
	animation: sle-shimmer 1.2s ease-in-out infinite;
}
@keyframes sle-shimmer { to { background-position: -200% 0; } }
.sle-skeleton--title { width: 45%; height: 1.6rem; vertical-align: middle; }
.sle-skeleton--circle { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.sle-skeleton--line { height: 1rem; width: 100%; }
.sle-skeleton--short { width: 55%; }
.sle-skeleton-row { align-items: center; }
.sle-skeleton__body { flex: 1; display: flex; flex-direction: column; gap: 6px; }

.sle-error { max-width: 560px; margin: 3rem auto; padding: 2rem; text-align: center; }
.sle-error .sle-icon { width: 44px; height: 44px; color: var(--sle-danger); margin-bottom: 0.5rem; }
.sle-empty { color: var(--sle-text-muted); }
.sle-noscript { padding: 1rem; background: var(--sle-surface); border-radius: var(--sle-radius); }

/* ================= Dashboard ================= */
.sle-dashboard { max-width: 960px; margin: 0 auto; padding: var(--sle-space-4); }
.sle-hero { text-align: center; padding: 2.5rem 1rem 2rem; }
.sle-hero__title { font-size: var(--sle-fs-hero); margin: 0 0 0.6rem; letter-spacing: -0.02em; line-height: 1.2; }
.sle-hero__sub { color: var(--sle-text-muted); margin: 0 0 1.5rem; font-size: 1.1rem; max-width: 34rem; margin-left: auto; margin-right: auto; }
.sle-hero__trust {
	display: flex; gap: 1.1rem; justify-content: center; flex-wrap: wrap;
	margin: 1.25rem 0 0; padding: 0; list-style: none;
	color: var(--sle-text-muted); font-size: var(--sle-fs-sm); font-weight: 600;
}
.sle-hero__trust li { display: inline-flex; align-items: center; gap: 0.35rem; }
.sle-hero__trust .sle-icon { width: 16px; height: 16px; color: var(--sle-success); }
.sle-create { display: flex; gap: 0.6rem; max-width: 560px; margin: 0 auto; }
.sle-create__input { flex: 1; }
.sle-section { margin-top: 2.5rem; }
.sle-section__title { font-size: var(--sle-fs-lg); margin: 0 0 1rem; letter-spacing: -0.01em; }
.sle-recent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.9rem; }
.sle-recent-card {
	background: var(--sle-surface); border: 1px solid var(--sle-border);
	border-radius: var(--sle-radius); padding: 1rem; box-shadow: var(--sle-shadow);
	display: flex; flex-direction: column;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sle-recent-card:hover { transform: translateY(-2px); box-shadow: var(--sle-shadow-lg); }
.sle-recent-card__title {
	background: none; border: none; padding: 0; margin: 0 0 0.25rem;
	font-size: var(--sle-fs-md); font-weight: 700; font-family: inherit;
	color: var(--sle-text); cursor: pointer; text-align: left;
	border-radius: 4px;
}
.sle-recent-card__title:hover { color: var(--sle-primary); }
.sle-recent-card__meta { color: var(--sle-text-muted); font-size: var(--sle-fs-sm); margin: 0 0 0.75rem; }
.sle-recent-card__actions { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: auto; }

/* ================= Templates ================= */
.sle-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.sle-template-card {
	background: var(--sle-surface); border: 1px solid var(--sle-border);
	border-radius: var(--sle-radius); padding: 1.25rem;
	display: flex; flex-direction: column; gap: 0.5rem;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sle-template-card:hover { transform: translateY(-2px); box-shadow: var(--sle-shadow-lg); }
.sle-template-card__title { margin: 0; font-size: var(--sle-fs-md); }
.sle-template-card__desc { margin: 0; color: var(--sle-text-muted); font-size: 0.92rem; flex: 1; }
.sle-template-card__meta { margin: 0; font-size: var(--sle-fs-xs); color: var(--sle-text-muted); }
/* Card CTAs are always prominent full-width buttons — never text links. */
.sle-template-card .sle-btn { width: 100%; margin-top: 0.6rem; }
.sle-template-card__link { display: inline-block; margin-top: 0.55rem; font-size: 0.88rem; font-weight: 600; color: var(--sle-primary); text-decoration: none; }
.sle-template-card__link:hover { text-decoration: underline; }
.sle-templates__cat { margin: 2rem 0 1rem; font-size: var(--sle-fs-lg); }
.sle-templates__cat:first-child { margin-top: 0.5rem; }
.sle-templates__grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 0.5rem; }
@media (min-width: 700px) { .sle-templates__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .sle-templates__grid { grid-template-columns: repeat(3, 1fr); } }

/* ================= List view ================= */
.sle-listview { max-width: 760px; margin: 0 auto; padding: var(--sle-space-4); }
.sle-offline-banner {
	background: var(--sle-warning-bg); color: var(--sle-warning-text);
	border: 1px solid var(--sle-warning-border);
	border-radius: var(--sle-radius); padding: 0.75rem 1rem; margin-bottom: 1rem;
	font-size: 0.92rem; font-weight: 600;
}

.sle-lv-header {
	display: flex; flex-wrap: wrap; gap: 0.75rem;
	align-items: center; justify-content: space-between;
	margin-bottom: 0.75rem;
}
.sle-lv-titlewrap { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex: 1 1 auto; }
.sle-lv-title { font-size: var(--sle-fs-xl); margin: 0; letter-spacing: -0.01em; overflow-wrap: break-word; word-break: normal; line-height: 1.25; }
.sle-lv-title__edit { flex: none; }
.sle-title-edit-row { display: flex; gap: 0.5rem; width: 100%; align-items: center; }
.sle-title-edit { flex: 1; min-width: 0; font-size: var(--sle-fs-lg); font-weight: 700; }
.sle-lv-toolbar { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.sle-lv-search { width: 180px; min-height: 44px; }

/* Vanishing-lists: expiry badge in the list header. */
.sle-lv-expiry {
	flex: none;
	font-size: var(--sle-fs-xs);
	font-weight: 600;
	color: var(--sle-text-muted);
	background: var(--sle-surface-soft, rgba(0, 0, 0, 0.04));
	border: 1px solid var(--sle-border);
	border-radius: 999px;
	padding: 0.25rem 0.6rem;
	white-space: nowrap;
}

/* One-click Copy Link next to the list title. */
.sle-lv-copylink { flex: none; }
.sle-lv-copylink .sle-icon { width: 1em; height: 1em; margin-right: 0.3em; vertical-align: -0.12em; }

/* Vanishing notice in the share dialog. */
.sle-share-expiry {
	background: var(--sle-warning-bg, #fff8e6);
	border: 1px solid var(--sle-warning-border, #f0d98c);
	border-radius: var(--sle-radius, 10px);
	padding: 0.7rem 0.9rem;
}
.sle-share-expiry__text { margin: 0; font-weight: 700; font-size: var(--sle-fs-sm); }
.sle-share-expiry__count { margin: 0.25rem 0 0; font-size: var(--sle-fs-sm); color: var(--sle-text-muted); font-variant-numeric: tabular-nums; }

/* CTA button inside error states (e.g. vanished list). */
.sle-error .sle-btn { margin-top: 1rem; }

/* Sticky toolbar on small screens: Share/menu stay reachable while scrolling. */
@media (max-width: 768px) {
	.sle-lv-header {
		position: sticky; top: 0; z-index: 60;
		background: var(--sle-bg);
		padding: 0.6rem 0;
		margin-left: calc(-1 * var(--sle-space-4));
		margin-right: calc(-1 * var(--sle-space-4));
		padding-left: var(--sle-space-4);
		padding-right: var(--sle-space-4);
		border-bottom: 1px solid var(--sle-border);
	}
}

.sle-progress { margin-bottom: 1rem; }
.sle-progress__bar {
	height: 8px; border-radius: 99px; background-color: var(--sle-surface-2);
	width: 0; transition: width 0.3s ease;
	background-image: linear-gradient(90deg, var(--sle-success), var(--sle-primary));
	background-size: 100% 100%;
}
.sle-progress__label { font-size: var(--sle-fs-sm); color: var(--sle-text-muted); margin-top: 0.3rem; }

.sle-add { display: flex; gap: 0.6rem; margin-bottom: 1rem; }
.sle-add__input { flex: 1; }

/* ================= Items ================= */
.sle-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.sle-item {
	display: flex; align-items: flex-start; gap: 0.6rem;
	background: var(--sle-surface); border: 1px solid var(--sle-border);
	border-radius: var(--sle-radius); padding: 0.65rem 0.75rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sle-item:hover { border-color: var(--sle-text-muted); }
.sle-item.is-dragging { opacity: 0.6; box-shadow: var(--sle-shadow-lg); }
.sle-item--placeholder { border: 2px dashed var(--sle-primary); background: transparent; min-height: 56px; }

/* 44px drag handle hit area. */
.sle-item__grip {
	cursor: grab; color: var(--sle-text-muted);
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; margin: -6px 0 -6px -6px; flex: none;
	touch-action: none; user-select: none; -webkit-user-select: none;
	border-radius: var(--sle-radius-sm);
}
.sle-item__grip:hover { color: var(--sle-text); background: var(--sle-surface-2); }
.sle-item__grip:active { cursor: grabbing; }
.sle-item__grip .sle-icon { width: 18px; height: 18px; }

/* 44px checkbox hit area; the visible circle is drawn in ::before. */
.sle-item__check {
	flex: none; width: 44px; height: 44px; margin: -4px 0 -4px -8px;
	border: none; background: transparent; cursor: pointer;
	position: relative; border-radius: 50%;
}
.sle-item__check::before {
	content: ""; position: absolute; left: 8px; top: 8px;
	width: 28px; height: 28px; border-radius: 50%;
	border: 2px solid var(--sle-border); background: var(--sle-bg);
	transition: border-color 0.15s ease, background 0.15s ease;
}
.sle-item__check:hover::before { border-color: var(--sle-primary); }
.sle-item__check:focus-visible { box-shadow: var(--sle-focus); outline: none; }
.sle-item.is-done .sle-item__check::before { background: var(--sle-success); border-color: var(--sle-success); }
.sle-item.is-done .sle-item__check::after {
	content: ""; position: absolute; left: 8px; top: 8px; width: 28px; height: 28px;
	background: no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sle-item__check:disabled { cursor: default; }
.sle-item__check:disabled::before { opacity: 0.6; }

.sle-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; padding: 0.35rem 0; }
.sle-item__text { font-size: var(--sle-fs-base); overflow-wrap: anywhere; cursor: pointer; border-radius: 4px; line-height: 1.45; }
.sle-item.is-done .sle-item__text { text-decoration: line-through; color: var(--sle-text-muted); }
.sle-item__meta { font-size: var(--sle-fs-xs); color: var(--sle-text-muted); }
.sle-item__note { font-size: var(--sle-fs-sm); color: var(--sle-text-muted); font-style: italic; }

/* 44px delete hit area. */
.sle-item__delete {
	flex: none; width: 44px; height: 44px; margin: -4px -8px -4px 0;
	border: none; background: transparent;
	color: var(--sle-text-muted); cursor: pointer; border-radius: var(--sle-radius-sm);
	display: inline-flex; align-items: center; justify-content: center;
}
.sle-item__delete:hover { color: var(--sle-danger); background: var(--sle-surface-2); }
.sle-item__delete .sle-icon { width: 18px; height: 18px; }

.sle-item.is-pending { opacity: 0.75; }
.sle-item__pending { font-size: 0.78rem; color: var(--sle-text-muted); font-style: italic; }
.sle-item.is-failed { border-color: var(--sle-danger); }
.sle-item__error { font-size: var(--sle-fs-xs); color: var(--sle-danger); font-weight: 600; }

.sle-edit { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sle-edit .sle-input { min-height: 44px; }
.sle-edit__small { flex: 1 1 140px; }

/* ================= Empty states ================= */
.sle-empty-state { text-align: center; padding: 3rem 1rem; color: var(--sle-text-muted); }
.sle-empty-state__art { margin: 0 auto 0.75rem; width: 72px; height: 72px; color: var(--sle-text-muted); opacity: 0.55; }
.sle-empty-state__art .sle-icon, .sle-empty-state__art svg { width: 100%; height: 100%; }
.sle-empty-state__title { margin: 0 0 0.4rem; font-size: var(--sle-fs-lg); color: var(--sle-text); }
.sle-empty-state__text { margin: 0 0 1.25rem; font-size: 0.95rem; max-width: 26rem; margin-left: auto; margin-right: auto; }

/* ================= Dialogs / share ================= */
.sle-overlay {
	position: fixed; inset: 0; background: rgba(10, 15, 25, 0.55);
	display: flex; align-items: flex-start; justify-content: center;
	padding: 10vh 1rem 1rem; z-index: 9999;
}
.sle-dialog {
	background: var(--sle-bg); color: var(--sle-text);
	border-radius: var(--sle-radius-lg); box-shadow: var(--sle-shadow-lg);
	max-width: 520px; width: 100%; padding: 1.5rem;
	display: flex; flex-direction: column; gap: 0.8rem;
	max-height: 85vh; overflow-y: auto;
	border: 1px solid var(--sle-border);
}
.sle-dialog__title { margin: 0; font-size: var(--sle-fs-lg); letter-spacing: -0.01em; }
.sle-dialog__hint { margin: 0; color: var(--sle-text-muted); font-size: 0.9rem; }
.sle-dialog__row { justify-content: flex-start; text-align: left; }
.sle-dialog__textarea { min-height: 160px; resize: vertical; }
.sle-dialog__btnrow { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.sle-share-row { display: flex; flex-direction: column; gap: 0.4rem; }
.sle-share-row__label { font-size: var(--sle-fs-sm); font-weight: 700; display: flex; align-items: center; gap: 0.4rem; }
.sle-share-row__desc { font-size: var(--sle-fs-xs); color: var(--sle-text-muted); margin: 0; }
.sle-share-row__inputrow { display: flex; gap: 0.5rem; }
.sle-share-row__input { flex: 1; min-width: 0; font-size: var(--sle-fs-sm); }
.sle-share-row__btns { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.sle-share-danger { border-top: 1px solid var(--sle-border); padding-top: 0.8rem; }
.sle-share-danger__desc { font-size: var(--sle-fs-xs); color: var(--sle-text-muted); margin: 0 0 0.5rem; }

/* Keyboard shortcut reference table. */
.sle-shortcuts-list { display: flex; flex-direction: column; gap: 0.55rem; margin: 0.25rem 0; }
.sle-shortcuts-list__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.92rem; }
.sle-shortcuts-list__keys { display: flex; gap: 0.3rem; flex: none; }

/* ================= Toasts ================= */
.sle-toasts {
	position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
	display: flex; flex-direction: column; gap: 0.5rem; z-index: 10000;
	width: min(92vw, 480px);
}
.sle-toast {
	background: #1c2530; color: #fff; border-radius: var(--sle-radius);
	padding: 0.8rem 1rem; display: flex; align-items: center; gap: 0.7rem;
	box-shadow: var(--sle-shadow-lg); font-size: 0.92rem;
	border-left: 4px solid transparent;
}
.sle-app[data-theme="dark"] .sle-toast { background: #242f3d; }
.sle-toast--success { border-left-color: var(--sle-success); }
.sle-toast--error { border-left-color: var(--sle-danger); }
.sle-toast__icon { flex: none; width: 20px; height: 20px; display: inline-flex; }
.sle-toast__icon svg { width: 100%; height: 100%; }
.sle-toast--success .sle-toast__icon { color: var(--sle-success); }
.sle-toast--error .sle-toast__icon { color: var(--sle-danger); }
.sle-toast__msg { flex: 1; }
.sle-toast__action {
	background: none; border: 1px solid rgba(255, 255, 255, 0.5); color: #fff;
	border-radius: var(--sle-radius-sm); padding: 0.45rem 0.85rem; min-height: 44px;
	cursor: pointer; font-weight: 600; font-size: var(--sle-fs-sm); font-family: inherit;
}
.sle-toast__action:hover { background: rgba(255, 255, 255, 0.12); }

/* ================= Recent (standalone shortcode) ================= */
.sle-recent { max-width: 960px; margin: 0 auto; padding: var(--sle-space-4); }
.sle-recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.sle-recent-list a { font-weight: 600; color: var(--sle-primary); }
.sle-recent-list__meta { color: var(--sle-text-muted); font-size: var(--sle-fs-sm); }

/* ================= List permalink page ================= */
.sle-list-page { padding: 1rem 0 3rem; }

/* ================= Responsive ================= */
@media (max-width: 768px) {
	.sle-lv-search { flex: 1 1 140px; width: auto; }
	.sle-dashboard { padding: var(--sle-space-3); }
}
@media (max-width: 560px) {
	.sle-create { flex-direction: column; }
	.sle-create .sle-btn { width: 100%; }
	.sle-lv-toolbar { justify-content: flex-start; }
	/* List header: title gets its own full-width line so it never gets
	   squeezed into a sliver between the action buttons. */
	.sle-lv-titlewrap { flex-wrap: wrap; row-gap: 0.65rem; }
	.sle-lv-title { flex: 1 1 100%; font-size: 1.35rem; }
	.sle-add { flex-direction: column; }
	.sle-add .sle-btn { width: 100%; }
	.sle-dialog { padding: 1.1rem; }
	.sle-recent-grid, .sle-templates { grid-template-columns: 1fr; }
	.sle-hero { padding: 1.75rem 0.5rem 1.5rem; }
	.sle-share-row__inputrow { flex-direction: column; }
	.sle-share-row__inputrow .sle-btn { width: 100%; }
}

/* ================= Reduced motion ================= */
@media (prefers-reduced-motion: reduce) {
	.sle-app *, .sle-app *::before, .sle-app *::after {
		animation-duration: 0.001s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001s !important;
	}
	.sle-spinner { animation: none; border-top-color: var(--sle-border); }
}

/* ================= Print ================= */
@media print {
	.sle-lv-header, .sle-add, .sle-toasts, .sle-overlay,
	.sle-item__delete, .sle-item__grip, .sle-offline-banner,
	.sle-lv-search, .sle-lv-title__edit, .sle-empty-state__cta { display: none !important; }
	.sle-app { --sle-bg: #fff; --sle-surface: #fff; --sle-text: #000; --sle-text-muted: #333; }
	.sle-item { break-inside: avoid; border: 1px solid #ccc; background: #fff; box-shadow: none; }
	.sle-item__check::before { border-color: #000; }
	.sle-progress__bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}