/* ===============
MOBILE‑FIRST NEUBRUTALIST THEME (Sharp corners) + Multi‑palette
=============== */
:root{
	--appbar-h: 64px;
	--dock-h: 72px;
	--bg: #fdfdfc; --fg:#111; --card:#ffffff; --border:#111;
	--accent: #1f6feb;  /* blue */
	--accent-2: #cc5500;/* orange */
	--accent-3: #d7263d;/* red */
	--muted:#555; --shadow:2px 2px 0 var(--border); --radius:0; --ring:2px solid var(--border);
}

/* THEMES (set via <html data-theme="…">) */
:root[data-theme="blue"]{
	--bg:#fdfdfc; --fg:#111; --card:#ffffff; --border:#111;
	--accent:#1f6feb; --accent-2:#f5b700; --accent-3:#d7263d; --muted:#575757;
}
:root[data-theme="mint"]{
	--bg:#fbfffc; --fg:#0d0f0e; --card:#ffffff; --border:#0d0f0e;
	--accent:#0aa574; --accent-2:#ffe17a; --accent-3:#ed4b4b; --muted:#4e5a55;
}
:root[data-theme="peach"]{
	--bg:#fffaf7; --fg:#14110f; --card:#ffffff; --border:#14110f;
	--accent:#ff6a55; --accent-2:#ffd166; --accent-3:#304ffe; --muted:#5a5451;
}
:root[data-theme="grape"]{
	--bg:#fbf8ff; --fg:#100b18; --card:#ffffff; --border:#100b18;
	--accent:#6a38f0; --accent-2:#ffcd39; --accent-3:#e9427a; --muted:#5b5363;
}
:root[data-theme="slate"]{
	--bg:#fafbfc; --fg:#0e141b; --card:#ffffff; --border:#0e141b;
	--accent:#0ea5e9; --accent-2:#84cc16; --accent-3:#ef4444; --muted:#586575;
}
:root[data-theme="sand"]{
	--bg:#fffdf7; --fg:#14120f; --card:#ffffff; --border:#14120f;
	--accent:#0077b6; --accent-2:#ffb703; --accent-3:#e85d04; --muted:#625c52;
}

@media (prefers-color-scheme: dark){
	:root{
		--bg:#121212; --fg:#f4f4f4; --card:#1a1a1a; --border:#f4f4f4;
		--accent:#4dabf7; --accent-2:#cc5500; --accent-3:#ff6b6b; --muted:#bcbcbc;
	}
}

*{box-sizing:border-box}
html,body{
	height:100%;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
body{margin:0; background:var(--bg); color:var(--fg); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif; line-height:1.3;}
a {
	color:inherit; 
}

img{max-width:100%; display:block}

/* Utility */
.grid{display:grid}
.row{display:flex}
.wrap{flex-wrap:wrap}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.p-2{padding:.5rem}
.p-3{padding:.75rem}
.p-4{padding:1rem}
.px-4{padding-left:1rem; padding-right:1rem}
.py-3{padding-top:.75rem; padding-bottom:.75rem}
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.w-full{width:100%}

/* Header */
.appbar{
	position:fixed; 
	top:0; 
	left: 0;
	right: 0;
	z-index:100; 
	background:var(--card); 
	opacity: 1;
	border:1px solid var(--border); 
	border-left:none; 
	border-right:none; 
	box-shadow: var(--shadow);
}


/* Dashboard shell */
.shell{
	min-height:100dvh; 
	padding-top: var(--appbar-h);
	padding-bottom: var(--dock-h);
}

/* Cards */
.card h2 {
	margin:0; 
	font-size:1rem; font-weight:900; letter-spacing:.3px; text-transform:uppercase; font-family:"JetBrains Mono",monospace}
.card .toolbar{display:flex; gap:.5rem}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:900; font-family:"JetBrains Mono",monospace; text-transform:uppercase; border:1px solid var(--border); background:var(--bg); padding:.55rem .8rem; border-radius:0; box-shadow:var(--shadow); cursor:pointer}
.btn[aria-pressed="true"], .btn.primary{background:var(--accent); color:#fff}
.btn.warn{background:var(--accent-3); color:#fff}
.btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--border)}

/* Progress bars */
.bar{position:relative; height:18px; border:1px solid var(--border); border-radius:0; background:var(--bg); box-shadow:var(--shadow); overflow:hidden}
.bar > span{display:block; height:100%; background:var(--accent);} 
.bar .tick{position:absolute; inset:0; background: repeating-linear-gradient(90deg, transparent 0 48px, rgba(0,0,0,.08) 48px, rgba(0,0,0,.08) 52px)}

/* Sections */
.section{display:grid; gap:1rem}

/* Meals list */
.meal{display:grid; grid-template-columns:1fr auto; align-items:start; gap:.25rem}
.meal h3{margin:0; font-weight:900; font-size:1rem}
.meta{font-size:.85rem; color:var(--muted)}

/* Sticky bottom nav */
.dock{
	position:fixed; 
	bottom: 0;
	top: auto;
	border-bottom: none;
	inset:auto 0 0 0; 
	background:var(--card); 
	opacity: 1;
	display:grid; 
	grid-template-columns:repeat(5,1fr); 
	gap:.5rem; 
	padding:.65rem .65rem; 
	border-top:1px solid var(--border); 
	box-shadow:0 -2px 0 0 var(--border);
} 

.dock .dock-btn{display:flex; flex-direction:column; align-items:center; gap:.3rem; text-align:center; padding:.55rem .4rem; border:1px solid var(--border); border-radius:0; background:var(--bg); box-shadow:var(--shadow); font-size:.72rem; font-weight:900; font-family:"JetBrains Mono",monospace; text-transform:uppercase;}
.dock .dock-btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--border)}


/* Desktop+ */
@media (min-width: 900px){
	.container{grid-template-columns: 1.25fr .75fr; align-items:start; padding:1.25rem; gap:1.25rem;}
	.section.grid-2{grid-template-columns:1fr 1fr}
	.shell{padding-bottom:2rem}
	.dock{position:sticky; bottom:auto; top:0; box-shadow:var(--shadow); border-top:none; border-bottom:3px solid var(--border)}
	.dock .dock-btn{flex-direction:row; justify-content:center; font-size:.8rem}
}

/* Demo helper styles */
.ghost{opacity:.65}