/*
 * MacroIndex design system: tokens + components shared by every page.
 *
 * Loaded BEFORE the Tailwind stylesheet, like Tailwind's own components
 * layer: these classes give each element its look, and Tailwind utilities in
 * a template (layout, spacing, one-off tweaks) still win where both apply.
 * Light and dark mode both live in the tokens below; components only ever
 * use var(--...), so they switch with the OS setting automatically.
 */

:root {
	--bg: #f4f4f7;
	--surface: #ffffff;
	--surface-2: #f8f8fb;
	--surface-3: #f0eff5;
	--border: #e4e4eb;
	--border-strong: #d2d3dd;
	--divider: #eeeef3;
	--text: #16161d;
	--muted: #5d5f6e;
	--faint: #8b8d9a;
	--accent: #6d28d9;
	--accent-hover: #5b21b6;
	--accent-text: #6d28d9;
	--accent-soft: #efe9fc;
	--accent-soft-hover: #e5dbfb;
	--on-accent: #ffffff;
	--danger: #c2261f;
	--danger-solid: #c2261f;
	--danger-soft: #fdeeed;
	--danger-border: #f3c4c1;
	--success: #11703a;
	--success-soft: #e7f5ed;
	--success-border: #bde3cb;
	--warn: #7c4a03;
	--warn-soft: #fdf5e4;
	--warn-border: #f0d9a5;
	--info-text: #4c1d95;
	--info-soft: #f4f0fe;
	--info-border: #ddd0fb;
	--track: #e5e7eb;
	--macro-protein: #243a67;
	--macro-carbs: #8b5cf6;
	--macro-fat: #9fb3d9;
	--water: #5b8def;
	--tabbar-bg: rgba(255, 255, 255, 0.94);
	--appbar-bg: rgba(244, 244, 247, 0.9);
	--toast-bg: #1d1e26;
	--toast-text: #ffffff;
	--shadow-sm: 0 1px 2px rgba(16, 16, 29, 0.05);
	--shadow: 0 1px 2px rgba(16, 16, 29, 0.04), 0 6px 20px rgba(16, 16, 29, 0.06);
	--shadow-lg: 0 -10px 40px rgba(16, 16, 29, 0.16);
	--focus-ring: 0 0 0 3px rgba(109, 40, 217, 0.28);
	--radius-sm: 10px;
	--radius: 14px;
	--radius-lg: 20px;
	--tabbar-h: 64px;
	--font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0e0f13;
		--surface: #17181f;
		--surface-2: #1c1d26;
		--surface-3: #23242f;
		--border: #2a2c38;
		--border-strong: #383a49;
		--divider: #24262f;
		--text: #ececf1;
		--muted: #a3a5b3;
		--faint: #767888;
		--accent: #7c3aed;
		--accent-hover: #8b5cf6;
		--accent-text: #c4b1fd;
		--accent-soft: #2a2147;
		--accent-soft-hover: #33285a;
		--danger: #f59e9a;
		--danger-solid: #dc3a32;
		--danger-soft: #3a1d1f;
		--danger-border: #6b2a2b;
		--success: #7ad7a0;
		--success-soft: #15291f;
		--success-border: #285a3c;
		--warn: #f1c46b;
		--warn-soft: #2c2414;
		--warn-border: #5c4519;
		--info-text: #d9ccfd;
		--info-soft: #221b3b;
		--info-border: #3f3170;
		--track: #2a2c38;
		--macro-protein: #7d9ee0;
		--macro-carbs: #8b5cf6;
		--macro-fat: #c9d5ee;
		--water: #6f9cf3;
		--tabbar-bg: rgba(23, 24, 31, 0.94);
		--appbar-bg: rgba(14, 15, 19, 0.88);
		--toast-bg: #2c2e3b;
		--toast-text: #f4f4f7;
		--shadow-sm: none;
		--shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
		--shadow-lg: 0 -10px 40px rgba(0, 0, 0, 0.5);
		--focus-ring: 0 0 0 3px rgba(167, 139, 250, 0.4);
		color-scheme: dark;
	}
}

/* ---- Base ---------------------------------------------------------------- */

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

body.app {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-feature-settings: "cv11", "ss01";
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
}

.link {
	color: var(--accent-text);
	font-weight: 600;
	text-decoration: none;
}

.link:hover {
	text-decoration: underline;
}

.muted { color: var(--muted); }
.faint { color: var(--faint); }
.tabular { font-variant-numeric: tabular-nums; }

.sr-only-focusable:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* ---- Page structure ------------------------------------------------------ */

.page {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
}

.page-narrow {
	max-width: 640px;
	margin: 0 auto;
}

.page-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin: 4px 0 18px;
}

.page-eyebrow,
.eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.page-title {
	margin: 0;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
}

.page-sub {
	margin: 6px 0 0;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.45;
}

@media (min-width: 640px) {
	.page-title { font-size: 34px; }
}

.stack { display: flex; flex-direction: column; gap: 14px; }
.stack-lg { display: flex; flex-direction: column; gap: 20px; }

/* ---- Cards ---------------------------------------------------------------- */

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.card-pad { padding: 16px; }

@media (min-width: 640px) {
	.card-pad { padding: 20px; }
}

.card-inset {
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.card-title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.card-sub {
	margin: 2px 0 0;
	font-size: 14px;
	color: var(--muted);
	line-height: 1.45;
}

/* ---- Buttons -------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: 12px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.08s, opacity 0.15s;
}

.btn:active { transform: scale(0.97); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.btn svg { flex-shrink: 0; }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }

.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-3); }

.btn-soft { background: var(--accent-soft); color: var(--accent-text); }
.btn-soft:hover { background: var(--accent-soft-hover); }

.btn-ghost { background: transparent; color: var(--accent-text); }
.btn-ghost:hover { background: var(--accent-soft); }

.btn-quiet { background: transparent; color: var(--muted); }
.btn-quiet:hover { background: var(--surface-3); color: var(--text); }

.btn-danger { background: var(--surface); color: var(--danger); border-color: var(--danger-border); }
.btn-danger:hover { background: var(--danger-soft); }

.btn-danger-solid { background: var(--danger-solid); color: #ffffff; }
.btn-danger-solid:hover { filter: brightness(0.95); }

.btn-sm { min-height: 40px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
.btn-lg { min-height: 52px; padding: 0 22px; font-size: 16px; border-radius: 14px; }
.btn-block { display: flex; width: 100%; }
.btn-icon { width: 44px; padding: 0; }
.btn-icon.btn-sm { width: 40px; }
.btn-pill { border-radius: 999px; }

.btn.is-busy { pointer-events: none; opacity: 0.75; }
.btn.is-busy::after {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-top-color: transparent;
	animation: ui-spin 0.7s linear infinite;
}

@keyframes ui-spin { to { transform: rotate(360deg); } }

/* ---- Forms ------------------------------------------------------------------ */

.label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
}

.label .optional,
.optional {
	font-weight: 400;
	color: var(--muted);
}

.hint {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--muted);
}

.hint.is-warn { color: var(--warn); }

.input,
.select,
.textarea {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--border-strong);
	border-radius: 12px;
	background: var(--surface);
	color: var(--text);
	font: inherit;
	font-size: 16px; /* 16px keeps iOS Safari from zooming on focus */
	line-height: 1.3;
	transition: border-color 0.15s, box-shadow 0.15s;
	-webkit-appearance: none;
	appearance: none;
}

.textarea {
	min-height: 104px;
	padding: 12px 14px;
	line-height: 1.45;
	resize: vertical;
}

.select {
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238b8d9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	text-overflow: ellipsis;
}

.input::placeholder,
.textarea::placeholder { color: var(--faint); }

.input:focus,
.select:focus,
.textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: var(--focus-ring);
}

.input[type="file"] {
	padding: 10px;
	min-height: 0;
	font-size: 14px;
}

.input-sm { min-height: 40px; font-size: 16px; border-radius: 10px; padding: 0 10px; }
.input-lg { min-height: 56px; font-size: 22px; font-weight: 700; }

body.app input[type="checkbox"],
body.app input[type="radio"] {
	width: 20px;
	height: 20px;
	accent-color: var(--accent);
	flex-shrink: 0;
}

.choice {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
	color: var(--text);
	font-size: 15px;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s;
}

.choice:hover { border-color: var(--border-strong); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

.input-suffix {
	display: flex;
	align-items: center;
	gap: 8px;
}

.input-suffix > span {
	color: var(--muted);
	font-size: 14px;
}

/* ---- Segmented control + tabs --------------------------------------------- */

.seg {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 4px;
	padding: 4px;
	border-radius: 14px;
	background: var(--surface-3);
}

.seg-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 10px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--muted);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.seg-btn:hover { color: var(--text); }
.seg-btn:has(input:focus-visible) { box-shadow: var(--focus-ring); }

.seg-btn[aria-selected="true"],
.seg-btn:has(input:checked),
.seg-btn[aria-current]:not([aria-current="false"]),
.seg-btn.is-active {
	background: var(--accent);
	color: var(--on-accent);
}

.seg-quiet .seg-btn[aria-selected="true"],
.seg-quiet .seg-btn:has(input:checked),
.seg-quiet .seg-btn[aria-current]:not([aria-current="false"]),
.seg-quiet .seg-btn.is-active {
	background: var(--surface);
	color: var(--text);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.tabs {
	display: flex;
	gap: 18px;
	border-bottom: 1px solid var(--divider);
}

.tab {
	min-height: 40px;
	margin-bottom: -1px;
	padding: 0 2px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	color: var(--muted);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.tab[aria-selected="true"] {
	color: var(--text);
	border-bottom-color: var(--accent);
}

/* ---- Chips + badges -------------------------------------------------------- */

.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--text);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.chip:hover { border-color: var(--border-strong); }

.chip[aria-pressed="true"],
.chip.is-active {
	border-color: transparent;
	background: var(--accent);
	color: var(--on-accent);
}

.chip-sm { min-height: 28px; padding: 0 10px; font-size: 12px; }

.badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--surface-3);
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}

.badge-accent { background: var(--accent-soft); color: var(--accent-text); }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }

/* Past target (a macro tile, the day's calories): theme danger colours, so the
   tile stays readable in dark mode (fixed red-50 turned it near-white under light text). */
.card-inset.is-over { background: var(--danger-soft); border-color: var(--danger-border); }
.text-over { color: var(--danger); }

/* ---- Lists ----------------------------------------------------------------- */

.list {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.list-divided > * + *,
.list-divided > * + .list-row { border-top: 1px solid var(--divider); }

.list-row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 56px;
	padding: 12px 16px;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	text-decoration: none;
}

a.list-row:hover,
button.list-row:hover { background: var(--surface-2); }

.list-row-main { flex: 1; min-width: 0; }

.list-row-title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.list-row-sub {
	margin-top: 2px;
	font-size: 13px;
	line-height: 1.35;
	color: var(--muted);
}

.list-row-value {
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.list-chevron { color: var(--faint); flex-shrink: 0; }

.section-label {
	margin: 0 4px 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

/* ---- Alerts ---------------------------------------------------------------- */

.alert {
	border: 1px solid;
	border-radius: var(--radius);
	padding: 12px 14px;
	font-size: 14px;
	line-height: 1.45;
}

.alert-title { margin-bottom: 2px; font-weight: 700; }
.alert a { color: inherit; font-weight: 600; text-decoration: underline; }
.alert-info { background: var(--info-soft); border-color: var(--info-border); color: var(--info-text); }
.alert-warn { background: var(--warn-soft); border-color: var(--warn-border); color: var(--warn); }
.alert-error { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }
.alert-ok { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }

/* ---- Stats + progress -------------------------------------------------------- */

.stat-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.stat-value {
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.stat-unit {
	font-size: 14px;
	font-weight: 500;
	color: var(--muted);
}

.bar {
	height: 8px;
	border-radius: 999px;
	background: var(--track);
	overflow: hidden;
}

/* :where keeps the default fill below a color class like .bg-water. */
.bar > :where(span) {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--accent);
}

/* The macro calorie split bar: fills to today's share of the calorie goal,
   split protein / carbs / fat by calories. */
.macro-bar {
	display: flex;
	height: 16px;
	border-radius: 999px;
	background: var(--track);
	overflow: hidden;
}

.macro-bar > span { height: 100%; }
.bg-protein { background: var(--macro-protein); }
.bg-carbs { background: var(--macro-carbs); }
.bg-fat { background: var(--macro-fat); }
.bg-water { background: var(--water); }

.dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* ---- Tables ----------------------------------------------------------------- */

.table-wrap {
	overflow-x: auto;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
}

.table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.table th {
	padding: 10px 14px;
	background: var(--surface-2);
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.table td {
	padding: 12px 14px;
	border-top: 1px solid var(--divider);
	vertical-align: top;
}

/* Trends chart bars: under / on target / over goal. */
.trend-under { background: var(--border-strong); }
.trend-hit { background: var(--success-bar, #22a35a); }
.trend-over { background: var(--danger-bar, #e5484d); }
.trend-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }

/* ---- Empty states ------------------------------------------------------------- */

.empty {
	padding: 28px 16px;
	text-align: center;
	color: var(--muted);
	font-size: 14px;
}

.empty-title {
	margin-bottom: 4px;
	color: var(--text);
	font-size: 16px;
	font-weight: 700;
}

/* ---- Sheets + dialogs ---------------------------------------------------------- */

.sheet { position: fixed; inset: 0; z-index: 60; }
.sheet[hidden] { display: none; }

.sheet-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 8, 14, 0.5);
	opacity: 0;
	transition: opacity 0.22s;
}

.sheet-panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	max-height: 92vh;
	max-height: 92dvh;
	background: var(--surface);
	border-radius: 24px 24px 0 0;
	box-shadow: var(--shadow-lg);
	transform: translateY(100%);
	transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
	padding-bottom: env(safe-area-inset-bottom);
}

.sheet.is-open .sheet-backdrop { opacity: 1; }
.sheet.is-open .sheet-panel { transform: translateY(0); }

@media (min-width: 640px) {
	.sheet-panel {
		left: 50%;
		right: auto;
		bottom: 24px;
		width: min(560px, calc(100vw - 48px));
		max-height: calc(100vh - 48px);
		border-radius: 24px;
		transform: translate(-50%, calc(100% + 48px));
	}

	.sheet.is-open .sheet-panel { transform: translate(-50%, 0); }
}

.sheet-grabber {
	width: 40px;
	height: 5px;
	margin: 8px auto 2px;
	border-radius: 3px;
	background: var(--border-strong);
	flex-shrink: 0;
}

.sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 16px 12px;
	flex-shrink: 0;
}

.sheet-title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.sheet-body { padding: 0 16px 20px; overflow-y: auto; overscroll-behavior: contain; }

@media (prefers-reduced-motion: reduce) {
	.sheet-panel, .sheet-backdrop { transition: none; }
}

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

.toast-stack {
	position: fixed;
	left: 0;
	right: 0;
	bottom: calc(var(--dock-h, 0px) + 16px);
	z-index: 70;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 0 16px;
	pointer-events: none;
}

.toast {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	max-width: 440px;
	padding: 12px 14px;
	border-radius: 14px;
	background: var(--toast-bg);
	color: var(--toast-text);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
	font-size: 14px;
	line-height: 1.4;
	pointer-events: auto;
	cursor: pointer;
	animation: toast-in 0.22s ease-out;
}

.toast-error { background: var(--danger-solid); color: #ffffff; }
.toast-undo { align-items: center; }
.toast-action {
	margin: -6px -8px -6px 0;
	padding: 6px 10px;
	border-radius: 8px;
	color: #c4b1fd;
	font-weight: 700;
}
.toast-action:hover { background: rgba(255, 255, 255, 0.08); }
.toast svg { flex-shrink: 0; margin-top: 1px; }

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

/* ---- App bar + tab bar ------------------------------------------------------------ */

.appbar {
	position: sticky;
	top: 0;
	z-index: 40;
	padding-top: env(safe-area-inset-top);
	background: var(--appbar-bg);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid transparent;
}

.appbar.is-scrolled { border-bottom-color: var(--border); }

.appbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	max-width: 1080px;
	height: 56px;
	margin: 0 auto;
	padding: 0 16px;
}

@media (min-width: 640px) {
	.appbar-inner { height: 64px; }
}

.appbar-brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--text);
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.appbar-brand img { width: 30px; height: 30px; border-radius: 8px; }

.appbar-nav {
	display: flex;
	align-items: center;
	gap: 4px;
}

.appbar-link {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 12px;
	border-radius: 10px;
	color: var(--muted);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.appbar-link:hover { color: var(--text); background: var(--surface-3); }
.appbar-link[aria-current="page"] { color: var(--accent-text); background: var(--accent-soft); }

.tabbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 45;
	padding-bottom: env(safe-area-inset-bottom);
	background: var(--tabbar-bg);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-top: 1px solid var(--border);
}

.tabbar-inner {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	align-items: center;
	max-width: 560px;
	height: var(--tabbar-h);
	margin: 0 auto;
}

.tab-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	height: 100%;
	border: 0;
	background: none;
	color: var(--muted);
	font: inherit;
	font-size: 11px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.tab-item[aria-current="page"] { color: var(--accent-text); }

.tab-fab {
	justify-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-top: -24px;
	border: 4px solid var(--bg);
	border-radius: 50%;
	background: var(--accent);
	color: #ffffff;
	box-shadow: 0 8px 20px rgba(109, 40, 217, 0.35);
	text-decoration: none;
	cursor: pointer;
}

.tab-fab:active { transform: scale(0.95); }

/* Space for the docked tab bar so nothing hides behind it. */
body.has-tabbar { --dock-h: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }

@media (min-width: 640px) {
	body.has-tabbar { --dock-h: 0px; }
}

.dock-spacer { height: calc(var(--dock-h, 0px) + 24px); }

/* ---- Footer ---------------------------------------------------------------------- */

.site-footer {
	margin-top: 32px;
	border-top: 1px solid var(--border);
	color: var(--muted);
	font-size: 13px;
}

.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent-text); }

/* Tailwind's preflight resets button backgrounds with [type='button'] etc.,
   an attribute selector as heavy as one class and loaded after this file;
   restate the backgrounds for typed buttons. */
.btn-primary[type] { background: var(--accent); }
.btn-primary[type]:hover { background: var(--accent-hover); }
.btn-secondary[type] { background: var(--surface); }
.btn-secondary[type]:hover { background: var(--surface-3); }
.btn-soft[type] { background: var(--accent-soft); }
.btn-soft[type]:hover { background: var(--accent-soft-hover); }
.btn-danger[type] { background: var(--surface); }
.btn-danger[type]:hover { background: var(--danger-soft); }
.btn-danger-solid[type] { background: var(--danger-solid); }
.chip[type] { background: var(--surface); }
.chip[type][aria-pressed="true"], .chip[type].is-active { background: var(--accent); }
.seg-btn[type][aria-selected="true"], .seg-btn[type].is-active { background: var(--accent); }
.seg-quiet .seg-btn[type][aria-selected="true"], .seg-quiet .seg-btn[type].is-active { background: var(--surface); }
.tab-fab[type] { background: var(--accent); }

/* Installed iOS web apps have no speech recognition: hide voice entry points. */
.is-standalone [data-voice-trigger] { display: none !important; }

/* A sheet that is an ordinary inline panel on wide screens (Today's Add food). */
@media (min-width: 1024px) {
	.sheet-inline-lg,
	.sheet-inline-lg[hidden] { position: static; display: block; z-index: auto; }
	.sheet-inline-lg > .sheet-backdrop,
	.sheet-inline-lg .sheet-grabber,
	.sheet-inline-lg [data-sheet-close] { display: none; }
	.sheet-inline-lg > .sheet-panel {
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		width: auto;
		max-height: none;
		transform: none;
		padding-top: 10px;
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-sm);
	}
	.sheet-inline-lg .sheet-body { overflow: visible; }
}

/* ---- Signed-out account pages ------------------------------------------------- */

.auth-wrap { max-width: 420px; margin: 8px auto 0; }
.auth-head { margin-bottom: 20px; text-align: center; }
.auth-logo { display: inline-block; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 14px; }

.auth-or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0;
	color: var(--faint);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.auth-or::before,
.auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--divider); }

/* <input type="file" class="input file-input"> */
.file-input { padding: 7px; font-size: 14px; color: var(--muted); }
.file-input::file-selector-button {
	margin-right: 12px;
	padding: 7px 12px;
	border: 0;
	border-radius: 8px;
	background: var(--accent-soft);
	color: var(--accent-text);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* ---- Long-form markdown (legal docs, changelog) ------------------------------- */

.prose-doc { font-size: 15px; line-height: 1.65; color: var(--text); }
.prose-doc > :first-child { margin-top: 0; }
.prose-doc h1, .prose-doc h2, .prose-doc h3 { margin: 1.4em 0 0.4em; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.prose-doc h1 { font-size: 22px; }
.prose-doc h2 { font-size: 18px; }
.prose-doc h3 { font-size: 16px; }
.prose-doc p { margin: 0.6em 0; color: var(--muted); }
.prose-doc ul, .prose-doc ol { margin: 0.6em 0; padding-left: 1.3em; color: var(--muted); }
.prose-doc ul { list-style: disc; }
.prose-doc ol { list-style: decimal; }
.prose-doc li + li { margin-top: 0.3em; }
.prose-doc a { color: var(--accent-text); font-weight: 600; }
.prose-doc strong { color: var(--text); }
.prose-doc code { padding: 1px 5px; border-radius: 6px; background: var(--surface-3); font-size: 0.9em; }
.prose-doc hr { margin: 1.5em 0; border: 0; border-top: 1px solid var(--divider); }

/* Tag autocomplete menu (food form + quick add) */
.tag-suggest { background: var(--surface); border-color: var(--border); }
.tag-suggest [data-tag-option]:hover,
.tag-suggest [data-tag-option].is-active { background: var(--surface-3); }

.skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 80;
	padding: 8px 14px;
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--accent-text);
	font-size: 14px;
	font-weight: 600;
	box-shadow: var(--shadow);
}

/* File drop targets (scan sheet) */
.drop-zone {
	border: 2px dashed var(--border-strong);
	border-radius: var(--radius-lg);
	transition: border-color 0.15s, background-color 0.15s;
}
.drop-zone.is-dragging { border-color: var(--accent); background: var(--accent-soft); }

/* Voice logging listening indicator */
.voice-pulse { border: 4px solid var(--accent-soft-hover); background: var(--accent-soft); }

/* ---- Card menu (⋯ on Today's optional cards) ---------------------------------- */

.card-menu { position: relative; }
.card-menu > summary { list-style: none; }
.card-menu > summary::-webkit-details-marker { display: none; }
.card-menu[open] > summary { background: var(--surface-3); }
.card-menu-pop {
	position: absolute;
	right: 0;
	top: calc(100% + 4px);
	z-index: 30;
	min-width: 190px;
	padding: 4px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: 0 10px 30px rgba(16, 16, 29, 0.16);
	animation: toast-in 0.14s ease-out;
}
.card-menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 44px;
	padding: 0 12px;
	border-radius: var(--radius-sm);
	color: var(--text);
	font-size: 14px;
	font-weight: 600;
	text-align: left;
}
.card-menu-item:hover, .card-menu-item:focus-visible { background: var(--surface-3); outline: none; }