/* AppCrumb: a cozy catalog skin on top of the shared design system.
   Warm cream, toast brown, terracotta and sage; chunky rounded type and
   sticker-like illustrations. The store is always light: the cream palette is
   the brand, so following the OS dark theme would lose it. */

/* SvelteKit's route announcer is visually hidden with an inline style, which
   the store's CSP blocks. Hide it from here instead so navigation cannot make
   the announcement text visible at the top of the page. */
#svelte-announcer {
	position: absolute; top: 0; left: 0;
	width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@font-face {
	font-family: "Fredoka";
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 100%;
	font-display: swap;
	src: url("/fonts/fredoka-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Fredoka";
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 100%;
	font-display: swap;
	src: url("/fonts/fredoka-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Nunito";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("/fonts/nunito-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Nunito";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("/fonts/nunito-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	color-scheme: light;
	--bg: #fdf8f0;
	--wall-1: rgba(255, 208, 137, 0.5);
	--wall-2: rgba(198, 117, 61, 0.14);
	--wall-3: rgba(166, 179, 142, 0.24);
	--surface: #fffdf8;
	--surface-2: #f6ebd9;
	--glass: rgba(253, 248, 240, 0.86);
	--glass-line: rgba(59, 36, 28, 0.08);
	--ink: #3b241c;
	--dim: #7c5c4b;
	--line: rgba(59, 36, 28, 0.1);
	--accent: #c6753d;
	--accent-strong: #a85c2c;
	--accent-ink: #fffaf3;
	--accent-soft: rgba(198, 117, 61, 0.14);
	--sage: #a6b38e;
	--peach: #ffd891;
	--danger: #c4473a;
	--ok: #5f8a4a;
	--shadow: 0 1px 2px rgba(59, 36, 28, 0.05), 0 10px 30px -18px rgba(59, 36, 28, 0.22);
	--shadow-lift: 0 2px 4px rgba(59, 36, 28, 0.06), 0 26px 50px -24px rgba(59, 36, 28, 0.32);
	--icon-shadow: 0 1px 1px rgba(59, 36, 28, 0.08), 0 6px 14px -6px rgba(59, 36, 28, 0.25);
	--radius: 20px;
	--radius-sm: 14px;
	--page: 1140px;
	--font: "Nunito", "Segoe UI", system-ui, sans-serif;
	--font-display: "Fredoka", "Nunito", system-ui, sans-serif;
}

body {
	font-family: var(--font);
	background:
		radial-gradient(55vw 42vh at 6% -10%, var(--wall-1), transparent 72%),
		radial-gradient(48vw 40vh at 98% 0%, var(--wall-2), transparent 70%),
		radial-gradient(54vw 46vh at 78% 108%, var(--wall-3), transparent 72%),
		var(--bg);
	background-attachment: fixed;
}

h1, h2, h3, .wordmark, .catalog-label, .hero-kicker {
	font-family: var(--font-display);
	letter-spacing: -0.015em;
}
h1 { font-weight: 600; }
h2, h3 { font-weight: 600; }
::selection { background: var(--accent-soft); }
/* Links use the darker terracotta so small text stays readable on cream. */
a { color: var(--accent-strong); }

/* --- top bar: a floating cream strip --- */
.bar {
	border-color: color-mix(in srgb, var(--accent) 20%, var(--glass-line));
	backdrop-filter: saturate(1.4) blur(16px);
	-webkit-backdrop-filter: saturate(1.4) blur(16px);
	box-shadow: 0 1px 2px rgba(59, 36, 28, 0.04), 0 14px 30px -24px rgba(59, 36, 28, 0.3);
}
.bar.scrolled { box-shadow: var(--shadow-lift); }
.brand { gap: 10px; }
.brand img { width: 34px; height: 34px; border-radius: 10px; }
.wordmark { font-weight: 600; font-size: 1.22rem; letter-spacing: -0.03em; color: var(--ink); }
.wordmark .tld { color: var(--accent); }
.nav { background: transparent; gap: 4px; }
.nav a { border-radius: 999px; padding: 6px 15px; font-weight: 700; font-size: 0.88rem; }
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a[aria-current="page"] {
	background: var(--surface);
	color: var(--ink);
	box-shadow: 0 1px 2px rgba(59, 36, 28, 0.07), inset 0 0 0 1px var(--line);
}
.button {
	border-radius: 999px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 3px 10px -6px rgba(59, 36, 28, 0.5);
}
.button:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 14px -6px rgba(59, 36, 28, 0.45); }
.button.ghost { background: var(--surface); border-color: color-mix(in srgb, var(--ink) 12%, var(--line)); box-shadow: 0 1px 2px rgba(59, 36, 28, 0.05); }
.button.ghost:hover { background: var(--surface-2); }
.button.small { padding: 6px 14px; border-radius: 999px; }
.chip { border-radius: 999px; padding: 3px 10px; font-weight: 700; }
.chip.accent { background: var(--accent-soft); color: var(--accent-strong); }
.chip.tag { background: var(--surface-2); color: var(--dim); }
.search-box { border-radius: 999px; }
.input { border-radius: 12px; }
.segmented { border-radius: 999px; }
.segmented > * { border-radius: 999px; }

/* --- home hero: a warm panel with the toast sticker --- */
.home-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(240px, 0.92fr);
	align-items: center;
	gap: clamp(18px, 4vw, 56px);
	margin: 16px 0 34px;
	padding: clamp(26px, 4.6vw, 56px);
	border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
	border-radius: 32px;
	background:
		radial-gradient(70% 100% at 96% 0%, rgba(255, 216, 145, 0.38), transparent 68%),
		radial-gradient(50% 80% at 0% 100%, rgba(166, 179, 142, 0.16), transparent 70%),
		var(--surface);
	box-shadow: 0 1px 2px rgba(59, 36, 28, 0.04), 0 34px 70px -42px rgba(59, 36, 28, 0.35);
}
.hero-copy { position: relative; z-index: 1; max-width: 33rem; }
.hero-kicker {
	margin: 0 0 12px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent-strong);
	animation: rise 0.7s ease both;
}
.home-hero h1 {
	margin: 0 0 16px;
	font-size: clamp(2.35rem, 5vw, 3.6rem);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--ink);
	animation: rise 0.75s ease 0.06s both;
}
.hero-lead {
	margin: 0;
	max-width: 42ch;
	font-size: 1.06rem;
	line-height: 1.6;
	color: var(--dim);
	animation: rise 0.75s ease 0.12s both;
}
.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 26px;
	animation: rise 0.75s ease 0.18s both;
}
.hero-actions .button { padding: 10px 20px; font-size: 0.96rem; font-weight: 700; }
.hero-visual {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 260px;
	animation: rise 0.9s ease 0.1s both;
}
.hero-visual::before {
	content: "";
	position: absolute;
	inset: 8%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 216, 145, 0.55), transparent 66%);
	filter: blur(6px);
}
.hero-mascot {
	position: relative;
	z-index: 1;
	width: min(100%, 400px);
	height: auto;
	transform: rotate(-3deg);
	filter: drop-shadow(0 22px 30px rgba(59, 36, 28, 0.18));
	animation: floaty 5.5s ease-in-out infinite;
}
.hero-crumb { position: absolute; border-radius: 50%; opacity: 0.9; animation: floaty 4.2s ease-in-out infinite; }
.hero-crumb.c1 { z-index: 2; width: 16px; height: 16px; top: 16%; left: 8%; background: var(--accent); animation-delay: -0.6s; }
.hero-crumb.c2 { z-index: 2; width: 11px; height: 11px; top: 24%; right: 8%; background: #f0b14e; animation-delay: -1.8s; }
.hero-crumb.c3 { z-index: 2; width: 8px; height: 8px; bottom: 18%; left: 16%; background: var(--sage); animation-delay: -2.4s; }

@keyframes rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes floaty {
	0%, 100% { transform: translateY(0) rotate(-3deg); }
	50% { transform: translateY(-10px) rotate(-1deg); }
}

/* --- catalog --- */
.catalog-label {
	margin: 0 0 14px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dim);
}
.toolbar { margin-bottom: 16px; }
.search-box {
	height: 44px;
	width: min(420px, 100%);
	padding: 0 18px;
	border-color: var(--line);
	background: var(--surface);
	box-shadow: 0 1px 2px rgba(59, 36, 28, 0.04);
}
.search-box svg { width: 17px; height: 17px; }
.search-box input { font-size: 0.94rem; }
.search-box:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: 0 0 0 4px var(--accent-soft); }

.segmented.categories {
	display: flex;
	width: fit-content;
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
	gap: 8px;
	margin: -2px 0 20px;
	padding: 0;
	background: transparent;
}
.segmented.categories > * {
	padding: 7px 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	color: var(--dim);
	font-weight: 700;
	font-size: 0.84rem;
	box-shadow: 0 1px 2px rgba(59, 36, 28, 0.04);
}
.segmented.categories > *:hover { color: var(--ink); background: var(--surface-2); }
.segmented.categories > [aria-pressed="true"] {
	color: var(--accent-ink);
	background: var(--accent);
	border-color: transparent;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 12px -6px rgba(168, 92, 44, 0.7);
}
.segmented.categories > [aria-pressed="true"] .count { background: rgba(255, 250, 243, 0.24); color: var(--accent-ink); }
.segmented.categories .count { background: var(--surface-2); color: var(--dim); }
.segmented.categories > * { white-space: nowrap; }
.chip.removable { border: 0; cursor: pointer; font: inherit; font-size: 0.8rem; padding: 6px 12px; }
.chip.removable:hover { filter: brightness(0.95); }

.cards { gap: 16px; }
.card {
	border-color: color-mix(in srgb, var(--accent) 8%, var(--line));
	border-radius: 24px;
	padding: 20px;
	box-shadow: 0 1px 2px rgba(59, 36, 28, 0.04), 0 16px 34px -28px rgba(59, 36, 28, 0.3);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
	box-shadow: 0 2px 4px rgba(59, 36, 28, 0.05), 0 28px 46px -30px rgba(59, 36, 28, 0.36);
}
.card h3 { font-size: 1.08rem; font-weight: 600; }
.card .dim.small { font-size: 0.83rem; }
.card-actions { padding-top: 8px; }
.card-actions .button.ghost { font-weight: 700; }

/* Softer, pastel app tiles than the shell's saturated gradients. */
.tile-icon {
	border-radius: 16px;
	box-shadow: var(--icon-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.5);
	text-shadow: 0 1px 1px rgba(59, 36, 28, 0.12);
}
.c-sun { background: linear-gradient(160deg, #ffe4a8, #ffc46b 60%, #f2a94f); }
.c-leaf { background: linear-gradient(160deg, #d6ebc2, #a9d096 60%, #8bbc76); }
.c-sky { background: linear-gradient(160deg, #cfe2f8, #9cc0eb 60%, #7fabe0); }
.c-rose { background: linear-gradient(160deg, #fbcedd, #f2a4c2 60%, #e38aae); }
.c-sand { background: linear-gradient(160deg, #cdeae0, #9dd6c6 60%, #82c4b2); }
.c-lilac { background: linear-gradient(160deg, #e4dbfa, #c3b0ee 60%, #aa93e2); }

.empty { color: var(--dim); }
.empty h2 { font-weight: 600; }

/* --- app detail page --- */
.hero {
	border-color: color-mix(in srgb, var(--accent) 12%, var(--glass-line));
	border-radius: 26px;
	box-shadow: 0 1px 2px rgba(59, 36, 28, 0.04), 0 24px 50px -34px rgba(59, 36, 28, 0.3);
}
.hero h1 { font-weight: 600; }
.panel { border-radius: 22px; border-color: color-mix(in srgb, var(--accent) 8%, var(--line)); }
.panel > h2 { font-weight: 600; }
/* The shared styles stretch a panel's button to full width; inline ones (like
   "Create an account" in a sentence) should stay inline. */
.panel p .button { display: inline-flex; width: auto; }
.code { background: var(--surface-2); border-radius: 12px; }
.cap { border-radius: 20px; border-color: color-mix(in srgb, var(--accent) 8%, var(--line)); }
.cap-icon { border-radius: 12px; }
.eyebrow { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.78rem; color: var(--accent-strong); }

/* --- footer --- */
.foot {
	width: min(var(--page), calc(100% - 24px));
	margin: 0 auto;
	padding: 24px 14px 40px;
	border-top: 1px dashed color-mix(in srgb, var(--accent) 30%, var(--line));
}

/* --- shared page bits --- */
.intro { max-width: 720px; margin: 8px 0 30px; }
.intro h1 { margin-bottom: 10px; }
.lead { font-size: 1.05rem; line-height: 1.65; max-width: 62ch; }
.page.narrow { max-width: 820px; }
.steps { line-height: 1.7; padding-left: 20px; }
.steps li { margin: 4px 0; }
.code {
	margin: 10px 0; padding: 12px 14px; overflow-x: auto; border-radius: 12px;
	background: var(--surface-2); border: 1px solid var(--line); font: 0.82rem/1.55 ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace;
}
.link-button { border: 0; background: none; padding: 0; color: var(--accent-strong); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.demo-title { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.account-form { max-width: 460px; }
.policy-check { font-weight: 500; }
.policy-check input { accent-color: var(--accent); }
.app-line { display: flex; align-items: center; gap: 12px; }
.app-line .grow { display: grid; }
.small-icon { width: 36px; height: 36px; font-size: 1.1rem; border-radius: var(--radius-sm); flex: none; }
.release-row { flex-wrap: wrap; }
.release-row .grow { flex: 1; }
.review-note { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.review-note p { margin: 0; }
.chip.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.chip.bad { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.policy-list li { margin-bottom: 10px; }
.release-row .button { display: inline-flex; width: auto; }

@media (max-width: 820px) {
	.home-hero {
		grid-template-columns: 1fr;
		gap: 8px;
		padding: 28px 22px 22px;
		border-radius: 26px;
		text-align: center;
	}
	.hero-copy { max-width: none; }
	.hero-actions { justify-content: center; }
	.hero-lead { margin-inline: auto; }
	.hero-visual { min-height: 200px; padding-top: 6px; }
	.hero-mascot { width: min(72vw, 280px); }
	.brand .wordmark { display: inline; }
}
@media (max-width: 520px) {
	/* Keep all three links and Sign in visible: the toast mark alone is enough
	   branding at this width. */
	.brand { gap: 0; }
	.brand .wordmark { display: none; }
	.bar { gap: 6px; padding: 6px 6px 6px 10px; }
	.nav { gap: 0; }
	.nav a { padding: 5px 9px; font-size: 0.83rem; }
	.bar > .button.small { padding: 6px 11px; font-size: 0.82rem; }
	.hero-actions .button { padding: 9px 15px; font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-kicker, .home-hero h1, .hero-lead, .hero-actions, .hero-visual, .hero-mascot, .hero-crumb { animation: none !important; }
}