:root{ --page-pad: 20px; --header-h: 56px }
/* Theme variables */
[data-theme="dark"], :root{
	--bg:#0f1217; --card:#171b22; --text:#e6e9ef; --muted:#9aa4b2; --accent:#7dc4ff; --border:#242a33;
	--input-bg:#0b0e13; --chip-bg:#0b0f15; --progress-bg:#0b0f15; --cal-day-bg:var(--chip-bg);
	/* Dark: tabs match chip background */
	--tab-bg: var(--chip-bg); --tab-text:var(--text); --tab-border:var(--border); --tab-hover-bg:#171c23; --tab-active-border:#7dc4ff; --tab-active-ring:rgba(125,196,255,0.2);
	--lock-bg:#2a1217; --lock-border:#7a2834; --lock-text:#ffd6db;
	--badge-ok-border:#2a6b3f; --badge-ok-text:#9ff0b6;
	--badge-warn-border:#6b2a2a; --badge-warn-text:#f0a7a7;
	--badge-mid-border:#8a6a00; --badge-mid-text:#ffdf70;
}
[data-theme="light"]{
	--bg:#f7fafc; --card:#ffffff; --text:#0b0e13; --muted:#556070; --accent:#0ea5e9; --border:#e5e7eb;
	--input-bg:#ffffff; --chip-bg:#f3f4f6; --progress-bg:#eef2f7; --cal-day-bg:#f9fafb;
	--tab-bg: var(--chip-bg); --tab-text:#0b0e13; --tab-border:#e5e7eb; --tab-hover-bg:#f5f5f5; --tab-active-border:#0ea5e9; --tab-active-ring:rgba(14,165,233,0.2);
	--lock-bg:#fff7f8; --lock-border:#f8c2cc; --lock-text:#8f1f2f;
	--badge-ok-border:#2a6b3f; --badge-ok-text:#256a3f;
	--badge-warn-border:#b45309; --badge-warn-text:#92400e;
	--badge-mid-border:#8a6a00; --badge-mid-text:#7a5a00;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font-body, system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif);overflow-x:hidden}
header{padding:4px var(--page-pad);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-wrap:wrap;width:100%;max-width:100vw;box-sizing:border-box;min-height:var(--header-h);position:relative;z-index:1500;overflow:visible}
h1{font-size:18px;margin:0}
.brand{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0;height:100%}
.brand img.logo{height:100%;max-height:100%;width:auto;max-width:100%;border-radius:6px;display:block;margin:0;object-fit:contain}
header .brand > img.logo{ height: calc(var(--header-h)) !important; width: auto !important; max-height: var(--header-h) !important; }
.brand .title{font-size:18px;font-weight:600}
.actions{display:flex;gap:8px;align-items:center;margin-left:auto;flex-wrap:wrap;min-width:0;justify-content:flex-end}
.actions > *{min-width:0}
.options{position:relative;display:flex;align-items:center}
.options-menu{position:absolute;top:100%;right:0;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.4);padding:8px;display:flex;flex-direction:column;gap:6px;z-index:1001;min-width:180px}
.options-menu a,.options-menu button{width:100%;text-align:left}
.options-menu .menu-user{padding:6px 8px;border-bottom:1px solid var(--border);margin-bottom:6px}
/* Icon button styling */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;padding:6px 8px;min-width:auto}
label.import-label{border:1px dashed var(--border);padding:7px 10px;border-radius:8px;cursor:pointer}
.tabs{display:flex;gap:8px;padding:10px var(--page-pad);border-bottom:1px solid var(--border);flex-wrap:nowrap;width:100%;max-width:100vw;box-sizing:border-box;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;position:relative;z-index:1;margin-top:0}
.tabs{ align-items: center; }
.tabs::-webkit-scrollbar{display:none}
.tab{background:transparent;border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:8px;cursor:pointer;flex:0 0 auto;display:inline-flex;gap:6px;align-items:center;white-space:nowrap;line-height:1}
.tab .tab-icon{display:inline-block}
.tab .tab-label{display:inline-block; line-height:1}

/* Abbreviate tab labels on small screens */
@media (max-width: 640px){
	:root{ --page-pad: 12px; --header-h: 48px }
	header{ row-gap: 8px; min-height: var(--header-h); padding:4px var(--page-pad); overflow:visible }
	.brand{ height: 100%; }
	.brand img.logo{ height: 100% !important; max-height: 100% !important; }
}

/* Icon-only tabs on very small screens */
@media (max-width: 420px){
	.tab::after{ content: ""; }
}

/* Slightly tighter tab padding on narrower screens to keep single row */
@media (max-width: 900px){
	.tab{ padding:7px 10px; }
}
@media (max-width: 700px){
	.tab{ padding:6px 8px; }
}
.tab.active{background:var(--card);border-color:#334155}
/* Modern pill tabs (dashboard + admin) */
.tabs .tab, .admin-tabs .tab{
	background:var(--tab-bg); color:var(--tab-text); border:1px solid var(--tab-border); border-radius:8px;
	height:36px; padding:0 12px; display:inline-flex; align-items:center; gap:8px;
	transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
	white-space: nowrap; flex: 0 0 auto; min-width: 0;
}
.tabs .tab:hover, .admin-tabs .tab:hover{ background:var(--tab-hover-bg, var(--tab-bg)); color:var(--tab-icon-active, var(--accent)); border-color:var(--tab-border); }
.tabs .tab.active, .admin-tabs .tab.active{ background:var(--tab-active-bg, var(--tab-hover-bg, var(--tab-bg))); border-color:var(--tab-outline, var(--tab-active-border)); color:var(--tab-icon-active, var(--accent)); box-shadow:none; }
/* Client pill tabs (icon bar) */
.pill-tabs{ border-bottom:none; position:relative; z-index: 1002; overflow:visible; justify-content:center; }
.pill-tabs .pill-inner{ display:flex; width:100%; padding:6px 0; box-sizing:border-box; justify-content:center; }
.pill-tabs .pill-bar{ display:inline-flex; gap:6px; padding:4px; border-radius:999px; background: var(--card); border:1px solid var(--tab-active-border, var(--accent)); box-shadow: 0 0 0 1px rgba(0,0,0,0.06) inset, 0 6px 24px rgba(0,0,0,0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); width:auto; justify-content:center; align-items:center; }
.pill-tabs[data-wide="true"] .pill-bar{ max-width: min(96vw, 1240px); }
.pill-tabs .tab.nav-icon{ position:relative; border:none; background:var(--tab-bg); color:var(--tab-icon-inactive, #1f2937); border-radius:50%; padding:0; display:grid; place-items:center; outline:none; transition:transform .2s ease, box-shadow .2s ease, background .2s ease; width:36px; height:36px; }
.pill-tabs .tab.nav-icon:hover{ transform:scale(1.04); background: var(--tab-hover-bg, var(--tab-bg)); box-shadow:none; color: var(--tab-icon-active, var(--accent)); }
.pill-tabs .tab.nav-icon.active{ background: var(--tab-active-circle-bg, var(--tab-active-bg, var(--tab-hover-bg, var(--tab-bg)))); box-shadow:none; color: var(--tab-icon-active, var(--accent)); }
.pill-tabs .tab.nav-icon .material-symbols-outlined{ font-size:20px; line-height:1; display:block; }
/* Light mode polish */
[data-theme="light"] .pill-tabs .pill-bar{ background: var(--card); box-shadow: 0 14px 30px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06) inset; }
.pill-tabs .tab.nav-icon .tip{ position:absolute; left:50%; transform:translateX(-50%); bottom:100%; margin-bottom:10px; background:rgba(0,0,0,0.92); color:#fde047; border:1px solid rgba(253,224,71,0.15); border-radius:8px; padding:6px 9px; font-size:12px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s ease; z-index: 2000; box-shadow:0 8px 24px rgba(0,0,0,.4); }
.pill-tabs .tab.nav-icon:hover .tip{ opacity:1; }
main{padding:20px var(--page-pad)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;align-items:start}
.tab-panel[data-profile-panel="settings"] .grid{ grid-template-columns: 1fr 1fr; }
@media (max-width: 900px){ .tab-panel[data-profile-panel="settings"] .grid{ grid-template-columns: 1fr; } }
/* Cache tab simple layout inherits defaults */
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px}
/* Center all card headers, keep emoji + text inline */
.card > h2{ display:flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; line-height:1.2; text-align:center; margin:0 0 8px 0; padding:0; }
.sched-col h3{ display:flex; align-items:center; gap:6px; }
/* Heading layout with icon above text */
.with-icon-top{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.with-icon-top .icon-emoji{ font-size:20px; line-height:1; }
/* Water + Protein pair container */
#dashboard .wp-pair{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; grid-column: 1 / -1; align-items:stretch }
.meds-card{ grid-column: auto; }
/* Announcements card spans the full width, centered */
#dashboard .announcements{ grid-column: 1 / -1; text-align: center; }
#dashboard .announcements h2{ text-align: center; }
#dashboard .announcements #annList{ align-items: center; }
/* Trim first-child spacing after h2 for tighter look as before */
.card > h2 + *{ margin-top: 6px; }
/* Reset layout button (only shows in edit mode) */
.reset-default{ position:absolute; right:10px; bottom:10px; display:none; }
#dashboard.editing .announcements .reset-default{ display:inline-block; }
/* Medications slots: always stacked (one column) */
.meds-card .slots{ grid-template-columns: 1fr; gap:16px; }
.meds-card .slot-list .pill-row{ padding: 8px 10px; }
.icon{ vertical-align: -2px; margin-right: 6px; }
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;align-items:end;margin-bottom:12px}
/* Utility row with auto-fit narrow buttons */
.row.row-auto{ grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); }
.activity-actions{ grid-template-columns: 1fr !important; }
.activity-card h3{ font-size:14px; color:var(--text); }
.small-reset{ padding:6px 8px; font-size:12px; align-self:end; height:36px; }
label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}
input,select,button,textarea{padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:var(--input-bg);color:var(--text);line-height:1.2}
button{cursor:pointer}
.secondary{background:var(--input-bg);border-color:#3b4352}
.muted{color:var(--muted)}
.small{font-size:12px}
.tab-panel{display:none}
.tab-panel.active{display:block}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.list li{display:flex;gap:8px;align-items:center}
/* Email preferences */
.prefs{display:flex;flex-direction:column;gap:12px}
.prefs .checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.prefs .checks label{flex-direction:row;align-items:center;gap:8px;font-size:14px;color:var(--text)}
.prefs .checks input[type="checkbox"]{margin:0}
.progress{height:10px;background:var(--progress-bg);border:1px solid var(--border);border-radius:999px;overflow:hidden;margin-bottom:8px}
.bar{height:100%;background:var(--accent)}
.vit-list{display:flex;flex-direction:column;gap:8px}
.vit-row{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--chip-bg)}
.vit-meta{color:var(--muted);font-size:12px;margin-left:6px}
/* Neutral type badge (used across dashboard by default) */
.type-badge{ display:inline-block; padding:2px 8px; border:1px solid var(--border); border-radius:999px; text-transform:capitalize; font-size:12px; color:var(--text); background: color-mix(in oklab, var(--chip-bg) 80%, black); }
.cat-list{display:flex;flex-direction:column;gap:8px;width:100%}
/* Tablets card uses normal grid span */
.cat-item{display:grid;grid-template-columns:84px 1.6fr 0.7fr 0.8fr 1.6fr auto;gap:10px;row-gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--chip-bg);width:100%; color: var(--text);}
.cat-actions{display:flex;gap:6px;flex-wrap:wrap}
/* Default cells: single-line with ellipsis on desktop; mobile overrides below stack/wrap */
.cat-item > *{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
/* Emphasize Name */
.cat-item > div:nth-child(2){ font-weight:600; }
/* Keep Time compact and centered */
.cat-item > div:nth-child(3){ white-space:nowrap; text-align:center; font-variant-numeric: tabular-nums; }
/* Hide header when using pill-style rows */
.cat-header{ display:none; }
.cat-header > div:nth-child(3){ text-align:center; }
/* Ensure Name and Dosage get enough width to avoid vertical text */
/* Add breathing space between form row and list */
.card > .row + .cat-header{margin-top:10px}
@media (max-width: 1100px){
	.cat-item{grid-template-columns:84px 1.4fr 0.7fr 0.8fr 1.4fr auto;gap:10px}
	.cat-header{grid-template-columns:84px 1.4fr 0.7fr 0.8fr 1.4fr auto;gap:10px}
}
@media (max-width: 860px){
	.cat-item{grid-template-columns:80px 1fr 0.7fr 0.8fr 1fr auto;gap:8px}
	.cat-header{grid-template-columns:80px 1fr 0.7fr 0.8fr 1fr auto;gap:8px}
}
.card{overflow:hidden}
.cat-list{overflow-x:hidden}
/* Catalog: mobile-friendly stacked layout */
@media (max-width: 900px){
	/* Hide header and stack each item */
	.cat-header{ display: none; }
	.cat-list .cat-item{ grid-template-columns: 1fr; grid-auto-rows:auto; }
	.cat-list .cat-item > *{ white-space: normal; }
	.cat-list .cat-item small{ grid-column: 1 / -1; }
	/* Add readable field labels on small screens */
	.cat-list .cat-item > small::before{ content: "Type: "; color: var(--muted); margin-right:6px; }
	.cat-list .cat-item > div:nth-child(2)::before{ content: "Name: "; color: var(--muted); margin-right:6px; }
	.cat-list .cat-item > div:nth-child(3)::before{ content: "Time: "; color: var(--muted); margin-right:6px; }
	.cat-list .cat-item > div:nth-child(4)::before{ content: "Amount: "; color: var(--muted); margin-right:6px; }
	.cat-list .cat-item > div:nth-child(5)::before{ content: "Dosage: "; color: var(--muted); margin-right:6px; }
	.cat-list .cat-item .cat-actions{ justify-content: flex-end; margin-top: 6px; }
}
/* Type badge styling */
/* Trackers Tablets: accent-styled badges but keep text color */
#catalogCard .type-badge,
#catList .pill-row .type-badge{ border-color: var(--tab-active-border, var(--accent)); background: color-mix(in oklab, var(--chip-bg) 78%, var(--accent)); color: var(--text); }
/* Catalog inline type badge inside grid/mobile items: accent border/bg, keep text color */
.cat-list .cat-item > small{ display:inline-block; padding:2px 8px; border:1px solid var(--tab-active-border, var(--accent)); border-radius:999px; text-transform:capitalize; background: color-mix(in oklab, var(--chip-bg) 78%, var(--accent)); font-size:12px; color: var(--text); width:max-content }

/* Catalog edit mode (wiggle + handle like dashboard) */
#catalogCard{ position: relative; }
#catalogCard .cell-handle{ position:absolute; top:6px; right:6px; background:rgba(0,0,0,0.25); border:1px solid var(--border); border-radius:6px; color:var(--muted); cursor:pointer; padding:4px 6px; display:none; z-index:3; }
#catalogCard.editing .cell-handle{ display:inline-flex; }
/* Hide Edit/Delete buttons until editing to reduce clutter */
/* Hide actions completely to avoid consuming width when not editing */
#catalogCard .cat-list .cat-actions{ display: none; }
#catalogCard.editing .cat-list .cat-actions{ display: flex; }

/* Pill-style rows for Tablets (reuse dashboard styles) */
#catList .pill-row{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--chip-bg); }
#catList .pill-row .type-badge{ display:inline-block; margin-right:8px; padding:2px 8px; border:1px solid var(--border); border-radius:999px; text-transform:capitalize; font-size:12px; background:color-mix(in oklab, var(--chip-bg) 80%, black); color:var(--text); }
#catList .pill-row .vit-meta{ color:var(--muted); font-size:12px; margin-left:6px; }
#catList .pill-row .cat-actions button{ padding:6px 10px; height:auto; }
/* Wiggle rows when editing */
#catalogCard.editing .cat-list .cat-item{ outline:2px dotted var(--muted); outline-offset:-4px; transform: translateZ(0) scale(0.985); animation: dash-wiggle 0.5s ease-in-out infinite alternate }
/* Dragging feedback */
#catalogCard .cat-item.dragging{ opacity:0.75; cursor:grabbing }
#catalogCard .swap-target{ outline:2px dashed var(--accent) !important; outline-offset:-4px !important; }
/* Palettes list layout: full-width inside profile settings tab */
.palettes-card{ grid-column: 1 / -1; }
#palList{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
#palList .cat-item{ grid-template-columns: 1.5fr 2fr auto; align-items:center; width: 100%; }
#palList .cat-item .pal-name{ white-space:normal; overflow:visible; text-overflow:clip; }
#palList .cat-item .pal-swatch{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
@media (max-width: 700px){
	#palList{ grid-template-columns: 1fr; }
	#palList .cat-item{ grid-template-columns: 1fr; }
	#palList .cat-item .pal-swatch{ margin-top:6px; }
	#palList .cat-item .cat-actions{ margin-top:6px; }
}
/* schedule */
.schedule{display:flex;flex-direction:column;gap:16px}
.sched-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.sched-col{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px}
.times{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.pills{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.pill{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border:1px solid var(--border);border-radius:999px;background:var(--chip-bg)}
/* slots */
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.slot h3{margin:4px 0 8px 0;font-size:14px;color:var(--muted)}
.slot-list{display:flex;flex-direction:column;gap:6px}
.pill-row{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--chip-bg)}
footer{padding:12px var(--page-pad);border-top:1px solid var(--border);color:var(--muted);font-size:12px}

/* Ensure all tab panels and their inner grids span full width */
.tab-panel, .tab-panel .grid, .sched-row, .cal-weekdays, .cal-grid{ width: 100%; }
.grid{ justify-content: stretch; align-content: stretch; }
.tab-panel .grid{ margin-left: 0; margin-right: 0; }

/* Adjust card layout to fill available width consistently */
.card{ width: 100%; }
#siteFooter{ text-align:center; }

/* modal */
.hidden{display:none}
.modal.hidden,.modal-overlay.hidden{display:none !important}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.55);backdrop-filter:blur(2px);z-index:3000}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:3001}
.modal-content{width:min(760px,96vw);background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.modal-content > h3{ margin-top: 0; padding-top: 4px; }
.modal-actions{grid-template-columns:repeat(2,minmax(120px,1fr))}

/* Material Symbols icon font helpers (normalize across contexts to avoid layout shifts) */
.material-symbols-outlined { 
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; 
	font-size: 18px; 
	line-height: 1; 
	vertical-align: -3px; 
	display: inline-block;
}
/* Header theme toggle icon slightly larger */
header #btnThemeToggle .material-symbols-outlined{ font-size: 20px; vertical-align: -4px; }
/* Tabs */
.tabs .tab .material-symbols-outlined{ font-size: 16px; vertical-align: -2px; margin-right: 4px; }
/* Card headers */
.card > h2 .material-symbols-outlined{ font-size: 18px; vertical-align: -3px; }
/* Section/sub-headers */
.sched-col h3 .material-symbols-outlined, .slot h3 .material-symbols-outlined{ margin-right: 6px; font-size: 16px; vertical-align: -2px; }
/* Badges (calendar) */
.badge .material-symbols-outlined{ font-size: 14px; vertical-align: -3px; margin-right: 4px; }

/* calendar */
.cal-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-bottom:12px}
.cal-header #calLabel{justify-self:center;font-weight:600}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;color:var(--muted);font-size:12px;margin-bottom:6px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-day{border:1px solid var(--border);border-radius:10px;min-height:90px;padding:6px;background:var(--cal-day-bg);display:flex;flex-direction:column;gap:4px}
.cal-day .cal-date{font-size:12px;color:var(--muted)}
.cal-day.other{opacity:.35}
.cal-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto}
.badge{border:1px solid #334155;border-radius:999px;padding:2px 6px;font-size:11px;color:#a7c7ff;display:inline-flex;align-items:center;gap:4px}
.badge.ok{border-color:var(--badge-ok-border);color:var(--badge-ok-text)}
.badge.warn{border-color:var(--badge-warn-border);color:var(--badge-warn-text)}
.actions #dndBadge.badge{ font-size:12px; padding:2px 8px; }
.badge.mid{border-color:var(--badge-mid-border);color:var(--badge-mid-text)}

/* Calendar: highlight selected day (outline) and its weekday header */
.cal-day.selected{ outline:2px solid var(--accent); outline-offset:2px; }
.cal-weekdays .selected-week{ color: var(--accent); font-weight:600; text-decoration: underline; text-underline-offset: 3px; }

/* Calendar compact stats and plan */
.cal-stats{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.cal-stats .mini{display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border:1px solid var(--border);border-radius:999px;font-size:11px}
.cal-plan{margin-top:4px;display:flex;align-items:center;gap:6px}

/* Food Lookup cards */
.food-card{display:grid;grid-template-columns:1fr;gap:10px;align-items:start}
/* Responsive product image: fill available width, keep aspect ratio, and center */
.food-img{display:block;width:100%;max-width:100%;height:auto;max-height:clamp(120px,40vw,260px);object-fit:contain;border-radius:10px;border:1px solid var(--border);background:var(--chip-bg);margin:0 auto 6px}
/* Placeholder variant (div) should also center its text and reserve space */
div.food-img{display:flex;align-items:center;justify-content:center;min-height:clamp(120px,40vw,260px)}
.nutri-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.chip{border:1px solid var(--border);border-radius:999px;padding:2px 6px;font-size:11px;color:var(--muted);display:inline-flex;align-items:center;gap:4px}
.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:6px}
.stats-grid .stat{display:flex;justify-content:space-between;gap:6px;padding:4px 6px;border:1px dashed var(--border);border-radius:6px}
.stats-grid .label{color:var(--muted)}
.stats-grid .value{font-variant-numeric:tabular-nums}
.food-actions{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.food-actions .group{display:flex;gap:6px;align-items:center}

/* Wider screens: keep image stacked (own line) but allow a 3-column stats grid */
@media (min-width: 900px){
	/* Do not change .food-card layout so image remains above the title/content */
	.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* lock banners */
.lock-banner{border:1px solid var(--lock-border);background:var(--lock-bg);color:var(--lock-text);border-radius:10px;padding:10px;margin:10px 0}
.lock-line{display:flex;gap:8px;align-items:center;justify-content:space-between}
.lock-eta{font-weight:600}
.progress.lock{height:8px;margin-top:6px}
button[disabled]{opacity:.5;cursor:not-allowed}

/* print */
@media print{
	header, nav, main, footer, .modal, .modal-overlay{ display:none !important; }
	.print{ display:block !important; padding:0 !important; background:#fff !important; color:#000 !important; }
	html, body{ background:#fff !important; }
	/* Allow the grid to flow across multiple pages; keep header/sections together if possible */
	.print .inv-header, .print .section{ break-inside: avoid; page-break-inside: avoid; }
	.print .print-scale{ overflow: visible; }
}
.print{ --print-page-width: 8.5in; --print-page-height: 11in; --print-margin: 0.5in; }
.print .inv-container{ width: calc(var(--print-page-width) - 2*var(--print-margin)); margin: 0 auto; }
.print .print-scale{ transform-origin: top left; }
.print{ background:#fff; color:#000; padding:20px; }
.print .inv-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;border-bottom:2px solid #000;padding-bottom:8px}
.print .inv-left{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.print .inv-title{font-size:20px;font-weight:700}
.print .inv-meta{font-size:12px}
.print .inv-logo img{height:40px;width:auto}
.print .inv-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.print .section{border:1px solid #000}
.print .section h4{margin:0;padding:6px;background:#f3f3f3;border-bottom:1px solid #000;font-size:13px}
.print .section .sec-body{padding:6px;font-size:12px}
.print .section.span-2{grid-column:1 / span 2}
.print .muted{color:#333}

@page{ size: Letter portrait; margin: 0.5in; }

/* Mobile responsiveness for dashboard cards */

@media (max-width: 640px){
	:root{ --page-pad: 12px; --header-h: 48px }
	header{ row-gap: 8px; min-height: var(--header-h); padding:4px var(--page-pad); }
	.brand{ height: var(--header-h); }
	.brand img.logo{ height: var(--header-h); max-height: var(--header-h); }
	.brand{ flex: 1 1 100%; justify-content: space-between; }
	.actions{ flex: 1 1 100%; justify-content: space-between; }
	/* One-column stack for grids on small screens */
	section.tab-panel .grid{ grid-template-columns: 1fr; max-width: 100%; margin-left: 0; margin-right: 0; }
	#dashboard .grid{ grid-template-columns: 1fr; }
	.card{ margin-left: 0; margin-right: 0; text-align:left }

	/* Center all content within cards on mobile */
	.card .row{ justify-items: stretch; }
	.card label{ align-items: flex-start; }
	.card .list, 
	.card .vit-list,
	.card .pills,
	.card .slot-list{ align-items: stretch; }
	/* Adjust vit-row layout to look centered on mobile */
	.vit-row{ justify-content: center; gap: 6px; }

	/* Hide scrollbars on mobile while keeping scroll functional */
	html, body{ -ms-overflow-style: none; scrollbar-width: none; }
	html::-webkit-scrollbar, body::-webkit-scrollbar{ display: none; }

	/* Larger, touch-friendly buttons on mobile */
	.card button{ padding:12px 16px; font-size:16px; }
	.row.row-auto button{ padding:12px 16px; font-size:16px; }
	.small-reset{ height:44px; padding:10px 14px; font-size:14px; }
}

/* Guarantee single column on small tablets too for full-width cards */
@media (max-width: 900px){
	section.tab-panel .grid{ grid-template-columns: 1fr; }
}
/* Water + Protein: keep 2-up on medium phones */
@media (max-width: 640px) and (min-width: 401px){
	#dashboard .wp-pair{ grid-template-columns: 1fr 1fr; }
}
/* Water + Protein: stack on very small phones */
@media (max-width: 400px){
	#dashboard .wp-pair{ grid-template-columns: 1fr; }
	.row.row-auto{ grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); }
}

/* Dashboard layout edit mode */
.card{ position: relative; }
.cell-handle{ position:absolute; top:6px; right:6px; left:auto; background:rgba(0,0,0,0.25); border:1px solid var(--border); border-radius:6px; color:var(--muted); cursor:pointer; padding:4px 6px; line-height:1; z-index:3; display:none; pointer-events:auto }
#dashboard .card > .cell-handle{ position:absolute !important; inset:6px 6px auto auto !important; left:auto !important; margin:0 !important; }
#dashboard.editing .cell-handle{ display:inline-flex }
#dashboard .wp-pair{ position:relative }
/* Save layout button removed; edit mode controls via long-press only */

#dashboard.editing .grid > .card:not(.announcements){ outline:2px dotted var(--muted); outline-offset:-4px; transform: translateZ(0) scale(0.985); animation: dash-wiggle 0.5s ease-in-out infinite alternate }
/* Wiggle Water and Protein individually inside the pair; do not wiggle the wrapper or Announcements */
#dashboard.editing .wp-pair > .card{ outline:2px dotted var(--muted); outline-offset:-4px; transform: translateZ(0) scale(0.985); animation: dash-wiggle 0.5s ease-in-out infinite alternate }

@keyframes dash-wiggle{ from{ transform: translateZ(0) rotate(-0.5deg) scale(0.985); } to{ transform: translateZ(0) rotate(0.5deg) scale(0.985); } }

[data-dash-id].dragging{ opacity:0.75; cursor:grabbing }
.drag-placeholder{ border:2px dashed var(--accent); border-radius:12px; min-height:60px }
/* Swap target highlight during drag */
.swap-target{ outline:2px dashed var(--accent) !important; outline-offset:-4px !important; }

/* Keep the X handle pinned to top-right even while dragging/animating */
#dashboard.editing .card > .cell-handle,
[data-dash-id].dragging > .cell-handle{
	position:absolute !important;
	inset:6px 6px auto auto !important;
	right:6px !important;
	left:auto !important;
	margin:0 !important;
	z-index:10;
}

/* Water card: rectangular rising fill with moving wave (fits the card) */
.card[data-dash-id="water"]{ position:relative; overflow:hidden; --fill:0%; --water1:#38bdf8; --water2:#0ea5e9; --wave-h:clamp(12px, 6%, 26px); --wave-speed:8s; --shimmer-speed:12s; }
.card[data-dash-id="water"] > *{ position:relative; z-index:1; }
/* Base water fill rises with --fill; includes a subtle shimmer */
.card[data-dash-id="water"]::before{
	content:""; position:absolute; left:0; bottom:0; width:100%; height:var(--fill);
	background:
		repeating-linear-gradient(-45deg, rgba(255,255,255,0.08) 0 14px, rgba(255,255,255,0) 14px 28px),
		linear-gradient(180deg, var(--water1), var(--water2));
	background-size: 200px 100%, 100% 100%;
	background-position: 0 0, 0 0;
	animation: shimmer var(--shimmer-speed) linear infinite;
	opacity:0.6; pointer-events:none; z-index:0;
}
/* Wave crest at waterline; moves horizontally and bobs slightly */
.card[data-dash-id="water"]::after{
	content:""; position:absolute; left:-50%; width:200%; height:var(--wave-h);
	bottom: calc(var(--fill) - (var(--wave-h) / 2));
	background:
		radial-gradient(var(--wave-h) var(--wave-h) at calc(var(--wave-h)/2) calc(var(--wave-h)/2), rgba(255,255,255,0.75) 45%, rgba(255,255,255,0) 46%) repeat-x;
	background-size: var(--wave-h) var(--wave-h);
	animation: wave-move var(--wave-speed) linear infinite;
	opacity:0.75; pointer-events:none; z-index:0;
}
@keyframes shimmer{ from{ background-position: 0 0, 0 0; } to{ background-position: 200px 0, 0 0; } }
@keyframes wave-move{ 0%{ transform: translateX(0) translateY(0); } 50%{ transform: translateX(-25%) translateY(2px); } 100%{ transform: translateX(-50%) translateY(0); } }
@media (prefers-reduced-motion: reduce){
	.card[data-dash-id="water"]::before, .card[data-dash-id="water"]::after{ animation:none; }
}
@media print{
	.card[data-dash-id="water"]::before, .card[data-dash-id="water"]::after{ display:none !important; content:none !important; }
}