/* dashboards.css — 🥗 food · 💪 exercise · 🛏️ sleep MONITOR cards (mocked).
   the oz dark-card look: var(--surface-2) tiles on a deep ground, color-coded by health semantics.
   display-only — no inputs, no message bubbles. CSS bars + columns, no chart lib. */

.p-dash { background: var(--surface); position: relative; }

/* 🧘 the spa top bar (the bean) — EVERY wellness card (.p-dash: food · sleep · exercise) opens onto the yoga
   studio. one skin, the whole suite matches. bright tropical (light scrim); legibility from a text-shadow. */
.p-dash .card-head {
  background-image: linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.12)), url(wellness-mpb.png);
  background-size: cover; background-position: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.7);
}
.p-dash .card-head, .p-dash .card-head .dash-demo { color: #f3f0e8; }

/* 🎨 each STANDALONE station card gets its OWN personalized top bar (not the shared studio). the three PNGs
   ARE distinct — sleep=night ward · food=produce · exercise=jungle gym — they just never applied to the
   standalone cards (the ws-* overrides below need a .wellness-station wrapper the standalone cards don't have).
   these hook the data-card id every card already carries (cards.js: card.dataset.card = id). left-dark wash = legible title. */
.p-dash[data-card="sleep"] > .card-head    { background-image: linear-gradient(90deg, rgba(0,0,0,.64), rgba(0,0,0,.18) 62%, rgba(0,0,0,.05)), url(sleep-bar.png); }
.p-dash[data-card="food"] > .card-head     { background-image: linear-gradient(90deg, rgba(0,0,0,.64), rgba(0,0,0,.18) 62%, rgba(0,0,0,.05)), url(food-bar.png); }
.p-dash[data-card="exercise"] > .card-head { background-image: linear-gradient(90deg, rgba(0,0,0,.64), rgba(0,0,0,.18) 62%, rgba(0,0,0,.05)), url(exercise-top.png); }

/* 🧘 the WELLNESS super card — the jungle-spa room (its own head=jungle, bottom=floor); 3 stations nest inside */
.p-wellness > .card-body { padding: 0; }
.wellness-stations { display: flex; flex-direction: column; gap: 0; padding: 0; }   /* spacing comes from each station's own .card margin (8px), like every other card */
.wellness-station { flex-shrink: 0; overflow: hidden; border: 1px solid var(--line); }   /* inherit .card → 8px margin + rounded, uniform with all cards (inner = outer) */
.wellness-station > .card-head { cursor: pointer; }
.wellness-station > .card-head .card-grip { display: none; }   /* docked in the super card — no free-float drag */
/* (station-collapse rule retired — the standing-desk uses a flat glance strip + one drawer, no station accordion) */
/* per-station bars — the wood/spa bar PNGs, repurposed below as the thin left accent of each .well-strip */
.wellness-station.ws-food > .card-head { background-image: url(food-bar.png); }
.wellness-station.ws-food > .card-bottom { background-image: url(food-bar.png) !important; }
.wellness-station.ws-exercise > .card-head { background-image: url(exercise-top.png); }
.wellness-station.ws-exercise > .card-bottom { background-image: url(exercise-bottom.png) !important; }
.wellness-station.ws-sleep > .card-head { background-image: url(sleep-bar.png); }
.wellness-station.ws-sleep > .card-bottom { background-image: url(sleep-bar.png) !important; }

/* ⚙️ setup / profile panel — normal flow (NOT an absolute overlay). settings-or-content already hides the
   sibling content, so the panel grows the body and the desk scrolls. absolute inset:0 collapsed to a sliver
   inside an auto-height station body (the sleep gear bug). */
.sleep-setup { position: relative; z-index: 10; background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; max-height: 78vh; }   /* 🎚️ scroll the profile in tiny windows */
.sleep-setup[hidden] { display: none; }
.sleep-setup-head { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-label); font-weight: 700; color: var(--text); }
.sleep-setup-x { background: none; border: 1px solid var(--line); color: var(--text-dim); border-radius: 6px; width: 24px; height: 24px; cursor: pointer; font-size: var(--fs-chrome); }
.sleep-setup-x:hover { background: var(--surface-2); }
.sleep-setup-lede, .sleep-setup-foot { font-size: var(--fs-chrome); line-height: 1.5; color: var(--text-dim); margin: 0; }
.sleep-setup-foot { color: var(--text-dim); font-size: var(--fs-chrome); }
.sleep-setup-block { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.sleep-setup-h { font-size: var(--fs-chrome); font-weight: 700; letter-spacing: 0.5px; color: var(--text); margin-bottom: 8px; }
.sleep-setup ol { margin: 0 0 10px; padding-left: 20px; }
.sleep-setup li { font-size: var(--fs-chrome); line-height: 1.6; color: var(--text-dim); margin-bottom: 3px; }
.sleep-setup p { font-size: var(--fs-chrome); line-height: 1.55; color: var(--text-dim); margin: 0 0 8px; }
.sleep-setup b { color: var(--text); } .sleep-setup i { color: var(--text-dim); }
.sleep-setup code { background: var(--surface); padding: 1px 5px; border-radius: 4px; color: var(--ok-text); font-size: var(--fs-chrome); }
.sleep-imp { background: var(--surface-2); border: 1px solid var(--line); color: var(--lav-bright); border-radius: 8px; padding: 8px 12px; font-size: var(--fs-chrome); font-weight: 600; cursor: pointer; }
.sleep-imp:hover { background: var(--line); }
.sleep-setup-msg { font-size: var(--fs-chrome); line-height: 1.45; }
.sleep-setup-msg.ok   { padding: 8px 10px; border-radius: 8px; background: var(--ok-bg); color: var(--ok-text); border: 1px solid var(--ok-border); }
.sleep-setup-msg.warn { padding: 8px 10px; border-radius: 8px; background: var(--bad-bg); color: var(--bad-text); border: 1px solid var(--bad-border); }
/* 🛏️ sleep profile — the form at the top of the ⚙️ panel; wellness reads these */
.sp-block { background: var(--surface); border: 1px solid var(--lav-deep); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.sp-head { font-size: var(--fs-chrome); font-weight: 700; color: var(--lav-bright); }
.sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sp-grid label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-chrome); color: var(--text-dim); }
.sp-grid label.sp-full { grid-column: 1 / -1; }
.sp-in { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 7px 9px; font-size: var(--fs-chrome); font-family: inherit; min-height: 34px; }
.sp-in:focus { outline: none; border-color: var(--lav); }
.sp-ta { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 7px 9px; font-size: var(--fs-chrome); font-family: inherit; resize: vertical; min-height: 58px; line-height: 1.45; }
.sp-ta:focus { outline: none; border-color: var(--lav); }
.sp-save { background: var(--surface-2); border: 1px solid var(--lav-deep); color: var(--lav-bright); border-radius: 8px; padding: 8px 18px; font-size: var(--fs-chrome); font-weight: 700; cursor: pointer; align-self: flex-start; min-height: 34px; }
.sp-save:hover { background: var(--lav-deep); color: var(--text); }
.sp-msg { font-size: var(--fs-chrome); color: var(--ok-text); min-height: 18px; }
.sp-divider { border: none; border-top: 1px solid var(--line); margin: 2px 0; }
.sp-import-head { font-size: var(--fs-chrome); font-weight: 700; letter-spacing: 0.5px; color: var(--text); }
/* the food + sleep monitor cards now ride makeCard (top bar + bottom resize slider). food + sleep
   wear the wellness-crystal lavender on the border + BOTH bars; exercise stays neutral (still mock). */
.card.dash-lav { border-color: var(--lav); }
.card.dash-lav .card-head   { border-bottom-color: var(--lav); box-shadow: inset 0 -2px 0 var(--lav); }
.card.dash-lav .card-bottom { border-top-color: var(--lav); box-shadow: inset 0 2px 0 var(--lav), inset 0 3px 9px -3px rgba(255,255,255,0.16); }

/* editable clinical notes — you OR the AI write them; clear the text to delete (placeholder returns) */
.dash-note { font-size: var(--fs-chrome); line-height: 1.6; color: var(--text-dim); cursor: text; outline: none; border-radius: 6px; padding: 2px 5px; min-height: var(--fs-body); }
.dash-note:hover { background: rgba(167,139,250,0.05); }
.dash-note:focus { color: var(--text); background: rgba(167,139,250,0.09); }
.dash-note:empty::before { content: attr(data-ph); color: var(--text-dim); }
.dash-note p { margin: 0 0 8px; } .dash-note p:last-child { margin-bottom: 0; }
.dash-note b { color: var(--text); }
.dash-ai-note .dash-note { color: var(--note-text); } .dash-ai-note .dash-note b { color: var(--note-bold); }

/* the bottom ＋ manual night entry — choose the night, fill what you know (date only is enough) */
.sleep-entry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 6px 0 10px; }
.sleep-entry-grid label { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-chrome); color: var(--text-dim); }
.se-in { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 7px 9px; font-size: var(--fs-chrome); font-family: inherit; min-height: 34px; }
.se-in:focus { outline: none; border-color: var(--lav); }
.se-add { background: var(--surface-2); border: 1px solid var(--lav-deep); color: var(--lav-bright); border-radius: 8px; padding: 9px 18px; font-size: var(--fs-chrome); font-weight: 700; cursor: pointer; min-height: 34px; }
.se-add:hover { background: var(--lav-deep); color: var(--text); }
.sleep-entry-foot { font-size: var(--fs-chrome); color: var(--text-dim); line-height: 1.45; margin-top: 8px; }

/* the sleep week — tiles + a metric-per-ROW matrix (each metric across Mon→Sun). nav reuses .fc-* */
.sleep-tiles, .sleep-nights { display: flex; flex-direction: column; gap: 12px; }
.sw-weeklabel { flex: 1; text-align: center; font-size: var(--fs-chrome); font-weight: 700; color: var(--text); white-space: nowrap; }
.sw-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.sw-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-chrome); font-variant-numeric: tabular-nums; }
.sw-tbl th, .sw-tbl td { padding: 8px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
.sw-tbl th { color: var(--text-dim); font-weight: 700; }
.sw-tbl th.sw-m, .sw-tbl td.sw-m { text-align: left; color: var(--text); font-weight: 700; position: sticky; left: 0; background: var(--surface-2); }
.sw-tbl td { color: var(--text); }
.sw-tbl td.ok  { color: var(--ok); font-weight: 700; }
.sw-tbl td.bad { color: var(--bad); font-weight: 700; }
.sw-tbl td.z   { color: var(--text-dim); }
.sw-tbl td.sub { color: var(--text-dim); }
.sw-tbl tbody tr:last-child td { border-bottom: none; }
.sw-tbl thead th { background: var(--surface-2); }
/* the two hero bar charts (time-to-sleep · deep) — color-coded, value on top, oz0.3 look */
.sb-chart { padding-top: 4px; }
.sb-chart .dash-cols { height: 128px; align-items: flex-end; }
.sb-val { font-size: var(--fs-chrome); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }

/* the onset-latency section is dismissible — Sum's demo data, noise for a real user. one ✕, 30px target */
.sleep-lat .dash-block-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sleep-lat-x { flex-shrink: 0; background: none; border: 1px solid var(--line); color: var(--text-dim); border-radius: 6px; min-width: 30px; height: 30px; cursor: pointer; font-size: var(--fs-chrome); line-height: 1; }
.sleep-lat-x:hover { border-color: var(--lav); color: var(--text); background: var(--surface-2); }
.dash-demo {
  margin-left: auto; font-size: var(--fs-chrome); letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-dim); border: 1px solid var(--line); border-radius: 5px; padding: 2px 8px;
}
.dash-demo.dash-live { color: var(--ok); border-color: var(--ok-border); background: var(--ok-bg); letter-spacing: 0.5px; }

/* ⚙️ gear — import a Samsung Health export to go live (sleep card) */
.dash-gear { background: none; border: none; cursor: pointer; font-size: var(--fs-label); line-height: 1; padding: 0 4px; margin-left: 8px; }
.dash-gear:hover { transform: scale(1.14); }

/* import status lines */
.dash-msg { font-size: var(--fs-chrome); line-height: 1.4; border-radius: 8px; padding: 8px 11px; }
.dash-msg.warn { background: var(--bad-bg); color: var(--bad-text); border: 1px solid var(--bad-border); }
.dash-msg.ok   { background: var(--ok-bg); color: var(--ok-text); border: 1px solid var(--ok-border); }

/* the flagged deficit block + the honest footer */
.dash-deficit { border: 1px solid var(--bad-border); }
.dash-foot { font-size: var(--fs-chrome); line-height: 1.5; color: var(--text-dim); padding: 2px 2px 0; }
.dash-foot code { background: var(--surface); padding: 1px 5px; border-radius: 4px; color: var(--text-dim); }

/* clinical sleep report (ported from oz0.3) — report head, deep-sleep tank, provider table, callout */
.sleep-rpt-title { font-size: var(--fs-label); font-weight: 700; color: var(--text); }
.sleep-rpt-sub { font-size: var(--fs-chrome); color: var(--text-dim); margin-top: 2px; }
.sleep-tank { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: var(--surface); margin: 8px 0 5px; }
.sleep-tank-fill { background: var(--warn); color: #000; font-size: var(--fs-chrome); font-weight: 700; display: flex; align-items: center; padding-left: 7px; white-space: nowrap; }
.sleep-tank-miss { background: #7f1d1d44; color: var(--bad); font-size: var(--fs-chrome); display: flex; align-items: center; justify-content: flex-end; padding-right: 7px; white-space: nowrap; }
.sleep-tank-scale { display: flex; justify-content: space-between; font-size: var(--fs-chrome); color: var(--text-dim); }
.sleep-tank-scale .ok { color: var(--ok-text); }
.sleep-table .sleep-trow { display: grid; grid-template-columns: 58px 64px 58px 1fr 44px 44px 38px; gap: 6px; align-items: center; font-size: var(--fs-chrome); color: var(--text); padding: 4px 0; border-bottom: 1px solid var(--surface-2); }
.sleep-table .sleep-trow.head { color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; font-size: var(--fs-chrome); border-bottom-color: var(--line); }
.sleep-table .sleep-trow span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sleep-table .bad { color: var(--bad); font-weight: 600; }
.sleep-table .ok  { color: var(--ok); font-weight: 600; }
.dash-callout { background: #1a1320; border: 1px solid var(--surface-2); border-radius: 12px; padding: 12px 14px; }
.dash-callout-label { font-size: var(--fs-chrome); font-weight: 700; color: var(--ex-hard); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.dash-callout p { font-size: var(--fs-chrome); line-height: 1.55; color: var(--text-dim); margin: 0 0 8px; }
.dash-callout p:last-child { margin-bottom: 0; }
.dash-callout b { color: var(--text); }
.sleep-lat-stat { font-size: var(--fs-chrome); line-height: 1.5; color: var(--text-dim); margin-top: 8px; }
.sleep-lat-stat b { color: var(--bad); }

/* 🐕 toto's note — the AI that's genuinely worried about you (warm, not clinical) */
.dash-ai-note { background: #0f1a16; border: 1px solid var(--ok-border); border-radius: 12px; padding: 12px 14px; }
.dash-ai-note-head { font-size: var(--fs-chrome); font-weight: 700; color: var(--ok-text); margin-bottom: 6px; }
.dash-ai-note p { font-size: var(--fs-chrome); line-height: 1.6; color: var(--note-text); margin: 0; }
.dash-ai-note b { color: var(--note-bold); }

/* 🥗 food — green-field: a fuel gauge + icon cards with dot-grid fill (a pantry you operate) */
.fc-fuel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.fc-fuel-top { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-chrome); color: var(--text-dim); margin-bottom: 8px; }
.fc-fuel-top b { font-size: var(--fs-label); color: var(--text); } .fc-fuel-top small { color: var(--text-dim); }
.fc-fuel-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--surface); }
.fc-fuel-bar span.p { background: var(--bad); } .fc-fuel-bar span.c { background: var(--warn); } .fc-fuel-bar span.f { background: var(--ok); }
.fc-fuel-key { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--fs-chrome); margin-top: 7px; }
.fc-fuel-key .p { color: var(--bad); } .fc-fuel-key .c { color: var(--warn); } .fc-fuel-key .f { color: var(--ok); }

.fc-group-title { font-size: var(--fs-chrome); letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); margin: 6px 0 8px; }
.fc-items { display: flex; flex-wrap: wrap; gap: 8px; }
.fc { background: var(--surface-2); border: 1px solid var(--surface-2); border-radius: 10px; padding: 10px 8px 9px; width: 92px; text-align: center; }
.fc.fresh { border-color: var(--fc-fresh); } .fc.stock { border-color: var(--fc-stock); } .fc.aging { border-color: var(--fc-aging); } .fc.restock { border-color: var(--fc-restock); }
.fc-icon { font-size: var(--fs-body); display: block; line-height: 1; margin-bottom: 3px; cursor: text; outline: none; border-radius: 5px; min-width: 1.2em; }
.fc-icon:hover { background: rgba(255,255,255,0.06); }
.fc-icon:focus { background: rgba(167,139,250,0.24); box-shadow: 0 0 0 1px var(--lav); }
.fc-name { font-size: var(--fs-chrome); font-weight: 600; color: var(--text); line-height: 1.2; min-height: 24px; display: flex; align-items: center; justify-content: center; }
.fc-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 5px 0 1px; }
.fc-btn { background: var(--surface-2); border: 1px solid var(--line); color: var(--text-dim); width: 32px; height: 32px; border-radius: 5px; cursor: pointer; font-size: var(--fs-label); line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.fc-btn:hover { background: var(--line); color: #fff; }
.fc-ct { font-size: var(--fs-label); font-weight: 800; color: var(--ok); min-width: 16px; } .fc-ct.none { color: var(--bad); }
.fc-unit { font-size: var(--fs-chrome); color: var(--text-dim); }
.fc-dots { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; margin-top: 6px; }
.fc-dot { width: 7px; height: 7px; border-radius: 2px; background: var(--surface-2); }
.fc-dot.on { background: var(--ok); }
.fc.stock .fc-dot.on, .fc.aging .fc-dot.on { background: var(--cool); }
/* notes — editable everywhere. pantry item note: faint "＋ note" until you write one */
.fc-note { font-size: var(--fs-chrome); color: var(--text-dim); margin-top: 4px; line-height: 1.35; cursor: text; outline: none; border-radius: 4px; padding: 1px 3px; transition: background .12s; }
.fc-note:hover { background: rgba(148,163,184,0.06); }
.fc-note:focus { color: var(--text); background: rgba(148,163,184,0.1); }
.fc-note:empty::before, .fc-mnote:empty::before { content: attr(data-ph); }
.fc-note:empty::before { color: var(--text-dim); }
/* per-meal note (the log) — nests under the meal name; brightens on hover/focus */
.dash-meal-row { border-bottom: 1px solid var(--line); }
.dash-meal-row:last-child { border-bottom: none; }
.dash-meal-row .dash-meal { border-bottom: none; }
.fc-mnote { font-size: var(--fs-chrome); color: var(--text-dim); line-height: 1.35; padding: 0 0 6px 64px; cursor: text; outline: none; }
.fc-mnote:empty::before { color: var(--text-dim); }
.dash-meal-row:hover .fc-mnote:empty::before { color: var(--text-dim); }
.fc-mnote:focus { color: var(--text); }
.fc-daycol .fc-mnote { padding-left: 0; }

/* planning ahead — slide → past today into blank future days, fill them with planned meals */
.fc-planbanner { display: flex; align-items: center; gap: 8px; font-size: var(--fs-chrome); color: var(--lav-bright); background: rgba(167,139,250,0.14); border: 1px solid var(--lav-deep); border-radius: 8px; padding: 7px 10px; line-height: 1.4; }
.fc-planbanner.past { color: var(--text-dim); background: rgba(148,163,184,0.07); border-color: var(--line); }
.fc-planbanner b { color: var(--text); } .fc-planbanner.past b { color: var(--text); }
/* the always-on "today" pill, dead center in the range row — lavender when you've wandered, calm when home */
.fc-range.fc-today-mid { color: var(--lav-bright); border-color: var(--lav-deep); font-weight: 700; }
.fc-range.fc-today-mid:hover { background: var(--surface-2); color: var(--lav-bright); border-color: var(--lav); }
.fc-range.fc-today-mid.on-today { color: var(--text-dim); border-color: var(--line); background: var(--surface); }
/* the add button turns indigo when you're planning the future */
.fc-add.plan { background: var(--surface-2); border-color: var(--lav); color: var(--lav-bright); }
.fc-add.plan:hover { background: var(--surface-2); }
/* planned meals (the future) — indigo + italic + a little tag */
.dash-meal-row.planned .dash-meal-what { color: var(--lav-bright); font-style: italic; }
.dash-meal-row.planned .dash-meal-what::after { content: 'planned'; font-size: var(--fs-chrome); font-style: normal; color: var(--lav-bright); border: 1px solid var(--lav-deep); border-radius: 4px; padding: 0 4px; margin-left: 6px; vertical-align: 1px; }
.dash-meal-row.planned .dash-meal-kcal { color: var(--lav-bright); }
.fc-warn { font-size: var(--fs-chrome); color: var(--bad); margin-top: 3px; }
.fc-reorder { font-size: var(--fs-chrome); line-height: 1.5; color: var(--text-dim); border: 1px solid var(--bad-border); background: #1a1014; border-radius: 10px; padding: 9px 12px; }
.fc-reorder b { color: var(--text); }
.food-soon { color: var(--text-dim); font-style: italic; }
.fc-snap { background: var(--surface); border: 1px dashed var(--line); color: var(--text-dim); border-radius: 10px; padding: 10px 12px; font-size: var(--fs-chrome); cursor: pointer; width: 100%; line-height: 1.4; }
.fc-snap:hover { border-color: var(--lav); color: var(--text); }

/* food tabs (Pantry · Eat Now · Log · Grocery) + manual-entry rows */
.ftabs { display: flex; gap: 4px; background: var(--surface); border-radius: 10px; padding: 4px; }
.ftab { flex: 1; background: none; border: none; color: var(--text-dim); font-size: var(--fs-chrome); font-weight: 600; padding: 7px 4px; border-radius: 7px; cursor: pointer; }
.ftab:hover { background: var(--surface-2); color: var(--text); }
.ftab.on { background: var(--lav); color: #fff; }
.fview { display: flex; flex-direction: column; gap: 12px; }
.fc-eat { width: 100%; margin: 5px 0 1px; background: var(--lav-deep); border: 1px solid var(--lav); color: var(--lav-bright); border-radius: 6px; padding: 6px 4px; font-size: var(--fs-chrome); font-weight: 700; cursor: pointer; }
.fc-eat:hover { background: var(--lav-deep); color: #fff; }
.fc-empty { font-size: var(--fs-chrome); color: var(--text-dim); padding: 8px 2px; }
.fc-addrow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fc-in { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 6px 9px; font-size: var(--fs-chrome); }
.fc-in-n, .fc-in-g { flex: 1; min-width: 0; } .fc-in-k { width: 70px; }
.fc-in-note { flex: 1 1 100%; min-width: 0; }   /* the notes box wraps to its own full-width line */
.fc-in-note::placeholder { color: var(--text-dim); }
.fc-add { background: var(--surface-2); border: 1px solid var(--line); color: var(--lav-bright); border-radius: 6px; padding: 6px 12px; font-size: var(--fs-chrome); font-weight: 600; cursor: pointer; white-space: nowrap; }
.fc-add:hover { background: var(--line); }
.fc-sel { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 6px 8px; font-size: var(--fs-chrome); }
/* log time-range controls (day · 3-day · week · month + ←/→) */
.fc-logctrl { display: flex; align-items: center; gap: 8px; }
.fc-arrow { background: var(--surface-2); border: 1px solid var(--line); color: var(--text-dim); width: 34px; height: 34px; border-radius: 6px; cursor: pointer; font-size: var(--fs-label); flex-shrink: 0; }
.fc-arrow:hover { background: var(--line); color: #fff; }
.fc-ranges { display: flex; gap: 4px; flex: 1; }
.fc-range { flex: 1; background: var(--surface); border: 1px solid var(--line); color: var(--text-dim); font-size: var(--fs-chrome); font-weight: 600; padding: 6px 4px; border-radius: 6px; cursor: pointer; }
.fc-range:hover { background: var(--surface-2); color: var(--text); }
.fc-range.on { background: var(--lav); border-color: var(--lav); color: #fff; }
.fc-avg { font-size: var(--fs-chrome); color: var(--text-dim); margin-top: 8px; } .fc-avg b { color: var(--text); }

/* 3-day = one day ×3, side by side (a column per day) · slides one day at a time */
.fc-3day { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fc-3day.fc-2day { grid-template-columns: 1fr 1fr; }   /* the Journal tab: left = yesterday · right = today */
.fc-daycol { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px; min-width: 0; }
.fc-daycol-h { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; font-size: var(--fs-chrome); font-weight: 700; color: var(--text); padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px solid var(--line); }
.fc-daycol-h .k { color: var(--lav-bright); font-variant-numeric: tabular-nums; }
.fc-daycol .dash-meal { gap: 6px; padding: 5px 0; }
.fc-daycol .dash-meal-when { width: auto; font-size: var(--fs-chrome); }
.fc-daycol .dash-meal-what { font-size: var(--fs-chrome); }
.fc-daycol .dash-meal-kcal { font-size: var(--fs-chrome); }

/* the ×N badge on the week/month meal-frequency list */
.fc-x { color: var(--lav-bright); font-weight: 800; font-variant-numeric: tabular-nums; font-size: var(--fs-chrome); }

/* the breakdown table — kcal · P/F/C grams · six serving counts · total + avg/day. scrolls x if narrow */
.fc-tablewrap { overflow-x: auto; margin: 2px 0; }
.fc-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-chrome); font-variant-numeric: tabular-nums; }
.fc-tbl th, .fc-tbl td { padding: 5px 6px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
.fc-tbl th { color: var(--text-dim); font-weight: 700; }
.fc-tbl th.d, .fc-tbl td.d { text-align: left; color: var(--text); }
.fc-tbl td { color: var(--text); }
.fc-tbl .z { color: var(--line); }
.fc-tbl tr.tot td { border-top: 2px solid var(--line); font-weight: 700; color: #fff; }
.fc-tbl tr.avg td { color: var(--note-text); font-weight: 700; border-bottom: none; }
.fc-cap { font-size: var(--fs-chrome); color: var(--text-dim); margin-top: 6px; line-height: 1.4; }

/* 💪 exercise — ported from oz0.3 health-activity.html */
/* step bar */
.ex-step-top { font-size: var(--fs-chrome); color: var(--text-dim); margin-bottom: 8px; }
.ex-step-big { font-size: var(--fs-title); color: var(--text); font-weight: 800; }
.ex-step-track { height: 10px; background: rgba(255,255,255,.06); border-radius: 5px; overflow: hidden; margin: 6px 0 4px; }
.ex-step-fill { height: 100%; border-radius: 5px; background: var(--lav-bright); transition: width .4s; }
.ex-step-scale { display: flex; justify-content: space-between; font-size: var(--fs-chrome); color: var(--text-dim); }
/* timeline nav + layout */
.ex-tl-block .dash-block-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ex-nav { display: flex; align-items: center; gap: 8px; }
.ex-nav-btn { background: none; border: 1px solid var(--line); color: var(--text-dim); border-radius: 4px; width: 32px; height: 32px; cursor: pointer; font-size: var(--fs-label); line-height: 1; }
.ex-nav-btn:hover:not(:disabled) { border-color: var(--lav); color: var(--text); }
.ex-nav-btn:disabled { opacity: .35; cursor: default; }
.ex-nav-label { font-size: var(--fs-chrome); color: var(--text-dim); }
.ex-tl-wrap { display: flex; gap: 0; margin: 8px 0 4px; }
.ex-time-axis { display: flex; flex-direction: column; justify-content: space-between; width: 36px; flex-shrink: 0; padding-bottom: 28px; }
.ex-time-lbl { font-size: var(--fs-chrome); color: var(--text-dim); text-align: right; line-height: 1; }
.ex-days-grid { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ex-day-col { display: flex; flex-direction: column; gap: 2px; }
.ex-day-head { font-size: var(--fs-chrome); color: var(--text-dim); text-align: center; line-height: 1.4; }
.ex-day-head.today { color: var(--lav-bright); }
.ex-day-date { display: block; font-size: var(--fs-chrome); color: var(--text-dim); }
.ex-tl-slot { position: relative; height: 360px; background: rgba(255,255,255,.025); border-radius: 4px; overflow: hidden; }
.ex-act-block { position: absolute; left: 1px; right: 1px; border-radius: 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; gap: 1px; }
.ex-act-lbl { font-size: var(--fs-chrome); font-weight: 700; color: #1a1a1a; text-align: center; padding: 0 2px; line-height: 1.1; text-transform: uppercase; letter-spacing: .3px; }
.ex-act-dur { font-size: var(--fs-chrome); color: #4d4d4d; text-align: center; }
.t-light   { background: var(--cool); }
.t-mod     { background: var(--ex-mod); }
.t-hard    { background: var(--ex-hard); }
.t-intense { background: var(--bad); }
/* per-day total MET-min — a tag under each bar (green in the scope) */
.ex-step-cell { text-align: center; font-size: var(--fs-chrome); color: var(--text-dim); margin-top: 6px; }
.ex-step-cell.has {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1;
  padding: 4px 6px 3px; border-radius: 6px;
  background: rgba(2,40,22,0.6); border: 1px solid rgba(52,211,153,0.3);
}
.ex-step-cell.has b { color: #6ee7a8; font-weight: 800; font-size: var(--fs-label); font-variant-numeric: tabular-nums; font-family: 'Courier New', monospace; }
.ex-step-cell.has span { color: rgba(52,211,153,0.85); font-size: 13px; letter-spacing: .5px; text-transform: uppercase; }
/* legend */
.ex-legend { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.ex-leg-item { display: flex; align-items: center; gap: 4px; font-size: var(--fs-chrome); color: var(--text-dim); }
.ex-leg-dot { width: 10px; height: 10px; border-radius: 2px; }
/* averages */
.ex-avg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.ex-avg-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.ex-avg-card.cool .ex-avg-val { color: var(--cool); }
.ex-avg-card.warn .ex-avg-val { color: var(--warn); }
.ex-avg-card.good .ex-avg-val { color: var(--ok); }
.ex-avg-val { font-size: var(--fs-title); font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.ex-avg-lbl { font-size: var(--fs-chrome); color: var(--text-dim); margin-top: 3px; }
.ex-avg-goal { font-size: var(--fs-chrome); color: var(--text-dim); margin-top: 2px; }
/* log activity */
.ex-presets { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.ex-preset { font-size: var(--fs-chrome); padding: 6px 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; color: var(--text-dim); cursor: pointer; min-height: 34px; }
.ex-preset:hover { border-color: var(--lav); color: var(--lav-bright); }
.ex-preset.active { border-color: var(--lav); color: var(--lav-bright); background: rgba(167,139,250,.1); }
.ex-log-form { display: flex; flex-direction: column; gap: 8px; }
.ex-log-row { display: flex; gap: 6px; align-items: flex-end; flex-wrap: wrap; }
.ex-log-field { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-chrome); color: var(--text-dim); }
.ex-lf-name { flex: 2 1 120px; }
.ex-lf-dur  { flex: 0 0 60px; }
.ex-lf-met  { flex: 1 1 180px; }
.ex-log-in { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 7px 9px; font-size: var(--fs-chrome); font-family: inherit; min-height: 34px; width: 100%; }
.ex-log-in:focus { outline: none; border-color: var(--lav); }
.ex-log-submit { background: var(--lav-deep); border: 1px solid var(--lav); color: var(--lav-bright); border-radius: 8px; padding: 8px 16px; font-size: var(--fs-chrome); font-weight: 700; cursor: pointer; white-space: nowrap; min-height: 34px; align-self: flex-end; box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.ex-log-submit:hover { background: var(--lav); color: #fff; }
.ex-log-status { font-size: var(--fs-chrome); color: var(--ok-text); min-height: 20px; }

.dash-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 14px; }

/* metric tiles */
.dash-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dash-tile { background: var(--surface-2); border-radius: 12px; padding: 14px; border-left: 4px solid var(--line); }
.dash-tile.good  { border-left-color: var(--ok); }
.dash-tile.warn  { border-left-color: var(--warn); }
.dash-tile.alert { border-left-color: var(--bad); }
.dash-tile.cool  { border-left-color: var(--cool); }
.dash-tile-label { font-size: var(--fs-chrome); color: var(--text-dim); }
.dash-tile-value { font-size: var(--fs-title); font-weight: 800; color: var(--text); line-height: 1.1; margin: 6px 0 4px; }
.dash-tile-sub   { font-size: var(--fs-chrome); color: var(--text-dim); }

/* a labelled section */
.dash-block { background: var(--surface-2); border-radius: 12px; padding: 14px 16px; }
.dash-block-label { font-size: var(--fs-chrome); color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }

/* progress bars */
.dash-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.dash-bar-row:last-child { margin-bottom: 0; }
.dash-bar-label { font-size: var(--fs-chrome); color: var(--text); width: 62px; flex-shrink: 0; }
.dash-bar-track { flex: 1; height: 12px; background: var(--surface); border-radius: 6px; overflow: hidden; }
.dash-bar-fill  { display: block; height: 100%; border-radius: 6px; }
.dash-bar-right { font-size: var(--fs-chrome); color: var(--text-dim); width: 56px; text-align: right; flex-shrink: 0; }

/* column chart (CSS) */
.dash-cols { display: flex; align-items: flex-end; gap: 8px; height: 110px; }
.dash-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 5px; }
.dash-col-bar { width: 100%; max-width: 34px; border-radius: 4px 4px 0 0; min-height: 3px; }
.dash-col-key { font-size: var(--fs-chrome); color: var(--text-dim); }

/* food log */
.dash-meal { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-label); }
.dash-meal:last-child { border-bottom: none; }
.dash-meal-when { color: var(--text-dim); width: 64px; flex-shrink: 0; }
.dash-meal-what { color: var(--text); flex: 1; }
.dash-meal-kcal { color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* the food-doc watcher's toast — a glass-box pulse when wellness's edit_food_doc lands on the card (no refresh) */
.fc-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(10px); z-index: 9999;
  background: var(--lav-deep); color: var(--lav-bright); border: 1px solid var(--lav);
  border-radius: 999px; padding: 9px 18px; font-size: var(--fs-chrome); font-weight: 700;
  box-shadow: 0 6px 22px -6px rgba(0,0,0,.6); opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.fc-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ════ 🩺 OSC + 📓 JOURNAL — two collapsible sub-cards in the exercise card (2026-06-19, Sum). osc = a CRT
   (osc-crt.png brass bezel + green phosphor); journal = cream cardstock + a stitched-leather border (CSS now,
   a png border later). lavender dropped here — leather + cream. cards within a card. ════ */

/* sub-card chrome — collapsible. the head is the handle; the body folds. */
.dash-sub { position: relative; border-radius: 14px; margin-bottom: 14px; overflow: hidden; }
.dash-sub:last-child { margin-bottom: 0; }
.dash-sub-head { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; padding: 10px 16px; font-size: var(--fs-chrome); font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.dash-sub-caret { font-size: var(--fs-label); transition: transform .18s ease; }
.dash-sub.collapsed .dash-sub-caret { transform: rotate(-90deg); }
/* EXPANDED: only the JOURNAL hides its spine bar when open (the book pages frame themselves) — its toggle is
   a thin strip over the top border. the OSC KEEPS its EKG header bar always (Sum: the thin strip was too hard
   to find), so the EKG sits above the scope content as the obvious toggle. */
.dash-sub.dash-journal-card:not(.collapsed) .dash-sub-head { position: absolute; top: 0; left: 0; right: 0; z-index: 6; height: 22px; padding: 0 14px; background: transparent !important; background-image: none !important; font-size: 0; letter-spacing: 0; justify-content: flex-end; text-shadow: none; }
/* the stamp — a black triangle in the leather top-right so the toggle is findable (the whole strip still clicks) */
.dash-sub.dash-journal-card:not(.collapsed) .dash-sub-head { align-items: flex-start; padding-top: 4px; }
.dash-sub.dash-journal-card:not(.collapsed) .dash-sub-caret { font-size: var(--fs-ui); color: #0d0d0d; background: #f3e3c0; border: 1px solid #2a1d12; border-radius: 3px; padding: 2px 6px; box-shadow: 0 1px 2px rgba(0,0,0,.45); }
.dash-sub-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; overflow-x: hidden; }
.dash-sub.collapsed .dash-sub-body, .dash-sub.collapsed .dash-sub-slider { display: none; }
/* each sub-card's own resize handle — drag to set its body height (it scrolls inside), mirrors the card's ⇕ */
.dash-sub-slider { display: none; }   /* ⇕ retired — scope/journal are one-at-a-time full-height tabs now, no in-card resize */
.dash-sub.dash-osc .dash-sub-slider { color: #aef5c8; background: rgba(0,42,25,0.9); border-top: 1px solid rgba(52,211,153,0.45); }
.dash-sub.dash-osc .dash-sub-slider:hover { background: rgba(0,64,38,0.95); }
.dash-sub.dash-journal-card .dash-sub-slider { color: #f0d9ab; background: #3a2616; border-top: 1px solid #6b4f2e; }
.dash-sub.dash-journal-card .dash-sub-slider:hover { background: #4a3320; }

/* ── 🩺 the oscilloscope — green phosphor inside the brass CRT bezel (osc-crt.png) ── */
.dash-sub.dash-osc { background: #0a1410; border: 26px solid transparent; border-image: url(osc-crt.png) 72 fill stretch; }
.dash-sub.dash-osc::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(rgba(52,211,153,0.05) 0 1px, transparent 1px 4px); }
.dash-sub.dash-osc .dash-sub-head { color: #6ee7a8; font-family: 'Courier New', monospace; background-color: #000; background-image: url(osc-top.png); background-size: cover; background-position: center; text-shadow: 0 0 6px #000, 0 1px 2px #000; }
.dash-sub.dash-osc .dash-sub-body { background: radial-gradient(120% 90% at 50% 30%, rgba(20,60,40,0.5), rgba(4,14,9,0.85)); box-shadow: inset 0 0 60px rgba(52,211,153,0.1); }
.dash-sub.dash-osc .dash-tile { background: rgba(0,20,12,0.4); border-left-color: rgba(52,211,153,0.5); }
.dash-sub.dash-osc .dash-tile-value { color: #6ee7a8; font-family: 'Courier New', monospace; }
.dash-sub.dash-osc .dash-tile-label, .dash-sub.dash-osc .dash-tile-sub { color: rgba(110,231,168,0.6); }
.dash-sub.dash-osc .dash-block { background: rgba(0,18,10,0.38); }
.dash-sub.dash-osc .dash-block-label { color: #34d399; font-family: 'Courier New', monospace; letter-spacing: 1px; }
.dash-sub.dash-osc .ex-step-big, .dash-sub.dash-osc .ex-step-top { color: #6ee7a8; font-family: 'Courier New', monospace; }
.dash-sub.dash-osc .ex-step-track { background: rgba(0,30,18,0.6); }
.dash-sub.dash-osc .ex-step-fill { background: #34d399; }   /* was lavender — now scope green */
.dash-sub.dash-osc .ex-step-scale, .dash-sub.dash-osc .dash-foot { color: rgba(110,231,168,0.55); }
.dash-sub.dash-osc .ex-time-lbl, .dash-sub.dash-osc .ex-day-head { color: rgba(110,231,168,0.7); font-family: 'Courier New', monospace; }
.dash-sub.dash-osc .ex-day-date { color: rgba(110,231,168,0.45); }
.dash-sub.dash-osc .ex-day-head.today { color: #aef5c8; }
.dash-sub.dash-osc .ex-tl-slot { background: rgba(0,10,6,0.6); border: 1px solid rgba(52,211,153,0.16); box-shadow: inset 0 0 16px rgba(52,211,153,0.07); }
.dash-sub.dash-osc .ex-legend, .dash-sub.dash-osc .ex-leg-item { color: rgba(110,231,168,0.6); }

/* ── 📓 the journal — cream cardstock + a stitched-leather border (CSS first pass) ── */
/* ── 📓 the journal — the real leather book: a closed-book SPINE header (wellness-topbar.png) over the OPEN
   book, two pages (wellness-page-left / -right). content is ink on the cream pages. ── */
.dash-sub.dash-journal-card { background: #241811; color: #3a2c1a; box-shadow: 0 6px 18px rgba(0,0,0,0.5); }
.dash-sub.dash-journal-card .dash-sub-head { color: #f3e3c0; background-image: url(wellness-topbar.png); background-size: cover; background-position: center; text-shadow: 0 1px 2px rgba(0,0,0,0.7); }
.dash-sub.dash-journal-card .dash-sub-body { padding: 8px; background: #241811; }
.dash-sub.dash-journal-card .dash-sub-slider { color: #d8b27a; background: #1a120b; }

/* the open book — two pages flush (left page | right page). max-width keeps it book-shaped (not stretched
   across a 1900px card) + centered; the wide outer padding pushes the cards in off the leather binding. */
.journal-pages { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; max-width: 1120px; margin: 0 auto; }
.journal-page { background-size: 100% 100%; background-repeat: no-repeat; display: flex; flex-direction: column; gap: 14px; min-height: 470px; }
.journal-page.left  { background-image: url("wellness-page-left.png");  padding: 40px 30px 40px 60px; }
.journal-page.right { background-image: url("wellness-page-right.png"); padding: 40px 60px 40px 30px; }

/* the journal runs BIG (Sum) — fill the open book, bigger ink + inputs, nothing clipped */
.dash-sub.dash-journal-card .dash-block-label { font-size: var(--fs-label); }
.dash-sub.dash-journal-card .ex-avg-card { padding: 14px 16px; }
.dash-sub.dash-journal-card .ex-avg-val { font-size: 40px; line-height: 1; }
.dash-sub.dash-journal-card .ex-avg-lbl, .dash-sub.dash-journal-card .ex-avg-goal { font-size: var(--fs-chrome); }
.dash-sub.dash-journal-card .ex-preset { font-size: var(--fs-label); padding: 9px 14px; }
.dash-sub.dash-journal-card .ex-log-field { font-size: var(--fs-label); }
.dash-sub.dash-journal-card .ex-log-in { font-size: var(--fs-label); min-height: 42px; }
.dash-sub.dash-journal-card .ex-log-submit { font-size: var(--fs-label); padding: 12px 28px; }
/* the journal's notes — written on the page (handwriting feel, ink on cream) */
.jrnl-note { width: 100%; min-height: 96px; resize: vertical; background: rgba(255,253,247,0.55); border: 1px solid #cdb992; border-radius: 6px; padding: 10px 13px; color: #2a2014; line-height: 1.5; font-family: 'Caveat', Georgia, serif; font-size: 19px; }
.jrnl-note:focus { outline: none; border-color: #8a6d44; background: rgba(255,253,247,0.82); }
.jrnl-note::placeholder { color: #a8966f; font-style: italic; }
/* editable presets — ✕ to delete (on the chip), "＋ save as preset" from the form */
.dash-sub.dash-journal-card .ex-preset { position: relative; padding-right: 24px; }
.dash-sub.dash-journal-card .ex-preset-x { position: absolute; top: 3px; right: 5px; font-size: var(--fs-ui); line-height: 1; color: #b08a5a; opacity: .5; padding: 2px; }
.dash-sub.dash-journal-card .ex-preset-x:hover { opacity: 1; color: #9a3412; }
.dash-sub.dash-journal-card .ex-preset-add { align-self: flex-start; margin-top: 6px; background: rgba(255,255,255,.4); border: 1px dashed #8a6d44; color: #5b3f25; border-radius: 6px; padding: 8px 14px; font-size: var(--fs-chrome); cursor: pointer; }
.dash-sub.dash-journal-card .ex-preset-add:hover { background: #e8d8b6; color: #3a2c1a; }
/* 🖨 the clinician-report button — print this week / Save as PDF */
.dash-sub.dash-journal-card .ex-print { align-self: stretch; margin: 2px 0 4px; background: #5b3f25; color: #f3e8d2; border: 1px solid #6b4f2e; border-radius: 8px; padding: 11px 14px; font-size: var(--fs-chrome); font-weight: 700; letter-spacing: .5px; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.dash-sub.dash-journal-card .ex-print:hover { background: #6b4f2e; color: #fff; }
/* food's clinician-report button (food isn't on the leather journal yet — lavender to match its skin) */
.fc-print-food { display: block; width: 100%; margin-top: 8px; background: var(--lav-deep); border: 1px solid var(--lav); color: var(--lav-bright); border-radius: 8px; padding: 10px 14px; font-size: var(--fs-chrome); font-weight: 700; cursor: pointer; }
.fc-print-food:hover { background: var(--lav); color: #fff; }

/* sleep's journal content on the cream page — keep it legible (dark ink, light inputs, leather button) */
.dash-sub.dash-journal-card .dash-note { color: #3a2c1a; }
.dash-sub.dash-journal-card .dash-note:empty::before { color: #a8966f; }
.dash-sub.dash-journal-card .se-in { background: rgba(255,253,247,.88); border: 1px solid #cdb992; color: #2a2014; }
.dash-sub.dash-journal-card .sleep-entry-grid label, .dash-sub.dash-journal-card .sleep-entry-foot { color: #7a6346; }
.dash-sub.dash-journal-card .se-add { background: #5b3f25; border: 1px solid #6b4f2e; color: #f3e8d2; box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.dash-sub.dash-journal-card .se-add:hover { background: #6b4f2e; color: #fff; }
.sleep-ts-soon { font-size: var(--fs-chrome); color: #7a6346; line-height: 1.5; font-style: italic; }
/* the 48-hour view (last 2 nights) on the cream page — clean ink rows + the dream for that night */
.s48-night { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #d8c8a6; }
.s48-night:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.s48-day { font-weight: 800; color: #3a2c1a; margin-bottom: 5px; font-size: var(--fs-label); }
.s48-rows { display: flex; flex-wrap: wrap; gap: 5px 16px; font-size: var(--fs-chrome); }
.s48-rows > div { display: flex; gap: 6px; align-items: baseline; }
.s48-rows span { color: #7a6346; }
.s48-rows b { color: #2a2014; font-variant-numeric: tabular-nums; }
.s48-dream { margin-top: 6px; font-family: 'Caveat', Georgia, serif; font-size: 18px; color: #4a3a26; line-height: 1.3; }
.s48-dream.s48-empty { color: #a8966f; font-style: italic; }

/* a single full-width journal page (food tabs use one page, not the open 2-page book) */
.journal-pages.single { grid-template-columns: 1fr; max-width: 760px; }
/* food's journal content on the cream page — ink + light inputs (2-day diary + log) */
.dash-sub.dash-journal-card .fc-daycol { background: rgba(255,253,247,0.5); border: 1px solid #d8c8a6; }
.dash-sub.dash-journal-card .fc-daycol-h { color: #3a2c1a; border-bottom-color: #d8c8a6; }
.dash-sub.dash-journal-card .fc-daycol-h .k { color: #8a5a2a; }
.dash-sub.dash-journal-card .dash-meal-what { color: #2a2014; }
.dash-sub.dash-journal-card .dash-meal-when, .dash-sub.dash-journal-card .dash-meal-kcal, .dash-sub.dash-journal-card .fc-mnote { color: #7a6346; }
.dash-sub.dash-journal-card .dash-meal-row { border-bottom-color: #e0d3b5; }
.dash-sub.dash-journal-card .sw-weeklabel { color: #3a2c1a; }
.dash-sub.dash-journal-card .fc-arrow, .dash-sub.dash-journal-card .fc-range { background: rgba(255,253,247,0.6); border: 1px solid #cdb992; color: #5b3f25; }
.dash-sub.dash-journal-card .fc-range.fc-today-mid { border-color: #8a6d44; }
.dash-sub.dash-journal-card .fc-in { background: rgba(255,253,247,0.88); border: 1px solid #cdb992; color: #2a2014; }
.dash-sub.dash-journal-card .fc-add { background: #5b3f25; border: 1px solid #6b4f2e; color: #f3e8d2; }
.dash-sub.dash-journal-card .fc-planbanner { background: rgba(91,63,37,0.1); border: 1px solid #cdb992; color: #5b3f25; }
.dash-sub.dash-journal-card .fc-planbanner b, .dash-sub.dash-journal-card .fc-empty { color: #5b3f25; }
/* the meal-log optional macros + servings — compact inputs */
.fc-mac, .fc-serv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 5px; width: 100%; }
.fc-mac-lbl { font-size: var(--fs-chrome); color: var(--text-dim); margin-right: 4px; }
.fc-in-m { width: 52px; }
.fc-serv-in { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-chrome); }
.fc-in-s { width: 42px; }
.dash-sub.dash-journal-card .fc-mac-lbl { color: #7a6346; }
/* the recipe method — step tabs + the ordered steps on the cream page */
.recipe-steps { margin: 8px 0 0; padding-left: 22px; color: #2a2014; line-height: 1.6; }
.recipe-steps li { margin-bottom: 5px; }
.recipe-head { font-weight: 800; font-size: var(--fs-label); color: #3a2c1a; }
.recipe-sub { font-size: var(--fs-chrome); color: #7a6346; margin: 2px 0 6px; }
.recipe-steptabs { grid-column: 1 / -1; background: #efe4cb; padding: 4px; border-radius: 8px 8px 0 0; }
/* the expanded-journal collapse stamp sits top-right — pad content down so the nav / cards don't overlap it */
.dash-sub.dash-journal-card:not(.collapsed) .dash-sub-body { padding-top: 28px; }
/* per-journal print buttons (grocery list · recipe · week) */
.fc-jprint { background: #5b3f25; border: 1px solid #6b4f2e; color: #f3e8d2; border-radius: 8px; padding: 8px 14px; font-size: var(--fs-chrome); font-weight: 700; cursor: pointer; margin: 4px 0 8px; }
.fc-jprint:hover { background: #6b4f2e; color: #fff; }
.dash-sub.dash-journal-card .ftabs { background: rgba(91,63,37,0.1); }
.dash-sub.dash-journal-card .ftab { color: #7a6346; }
.dash-sub.dash-journal-card .ftab:hover { background: rgba(91,63,37,0.12); color: #3a2c1a; }
.dash-sub.dash-journal-card .ftab.on { background: #5b3f25; color: #f3e8d2; }
/* the pantry's attach ＋ (snap groceries → wellness reads them) — leather chips on the cream page */
.fc-attach { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.fc-att { background: #5b3f25; border: 1px solid #6b4f2e; color: #f3e8d2; border-radius: 8px; padding: 8px 13px; font-size: var(--fs-chrome); font-weight: 600; cursor: pointer; }
.fc-att:hover { background: #6b4f2e; color: #fff; }
/* the grocery shopping list — toggle-check items off (ink on cream) */
.grocery-list { display: flex; flex-direction: column; gap: 1px; margin: 4px 0 12px; }
.gl-item { display: flex; align-items: center; gap: 9px; padding: 8px 6px; border-bottom: 1px solid #e0d3b5; cursor: pointer; font-size: var(--fs-label); color: #2a2014; }
.gl-item:last-child { border-bottom: none; }
.gl-check { width: 18px; height: 18px; accent-color: #5b3f25; cursor: pointer; flex-shrink: 0; }
.gl-icon { font-size: var(--fs-label); }
.gl-item.gl-done .gl-name { text-decoration: line-through; color: #a8966f; }
.gl-item.gl-done .gl-icon { opacity: .45; }

/* content = ink on the cream page: transparent boxes, dark ink, the data keeps its hue */
.dash-sub.dash-journal-card .dash-block { background: transparent; border: none; padding: 0; }
.dash-sub.dash-journal-card .dash-block-label { color: #9a7a4c; }
.dash-sub.dash-journal-card .ex-avg-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.dash-sub.dash-journal-card .ex-avg-card { background: rgba(255,255,255,0.26); border: 1px solid rgba(120,90,50,0.28); padding: 8px 10px; }
.dash-sub.dash-journal-card .ex-avg-lbl, .dash-sub.dash-journal-card .ex-avg-goal { color: #7a6346; }
.dash-sub.dash-journal-card .ex-avg-val { color: #3a2c1a; line-height: 1.1; }
.dash-sub.dash-journal-card .ex-avg-card.cool .ex-avg-val { color: #2b6cb0; }
.dash-sub.dash-journal-card .ex-avg-card.warn .ex-avg-val { color: #b7791f; }
.dash-sub.dash-journal-card .ex-avg-card.good .ex-avg-val { color: #2f855a; }
.dash-sub.dash-journal-card .ex-preset { background: rgba(255,255,255,0.4); border: 1px solid #cdb992; color: #5b3f25; }
.dash-sub.dash-journal-card .ex-preset:hover { border-color: #8a6d44; color: #3a2c1a; }
.dash-sub.dash-journal-card .ex-preset.active { background: #e8d8b6; border-color: #8a6d44; color: #3a2c1a; }
.dash-sub.dash-journal-card .ex-log-field { color: #7a6346; }
.dash-sub.dash-journal-card .ex-log-in { background: rgba(255,253,247,0.85); border: 1px solid #cdb992; color: #2a2014; }
.dash-sub.dash-journal-card .ex-log-in:focus { border-color: #8a6d44; }
.dash-sub.dash-journal-card .ex-log-submit { background: #5b3f25; border: 1px solid #6b4f2e; color: #f3e8d2; box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.dash-sub.dash-journal-card .ex-log-submit:hover { background: #6b4f2e; color: #fff; }
.dash-sub.dash-journal-card .ex-log-status { color: #7a6346; }

/* osc tiles tighter */
.dash-sub.dash-osc .dash-tiles { gap: 8px; }
.dash-sub.dash-osc .dash-tile { padding: 10px 12px; }

/* 🖨 master-report range chooser — pops under the wellness top-bar print button */
.card.p-wellness { position: relative; }
.wm-range { position: absolute; top: 42px; right: 12px; z-index: 60; background: #fff; border: 1px solid #d8c9e8; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.32); padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 132px; }
.wm-range[hidden] { display: none; }
.wm-range-h { font-size: var(--fs-ui); text-transform: uppercase; letter-spacing: .6px; color: #8a7da0; padding: 3px 8px 5px; }
.wm-r { text-align: left; background: #f6f1fb; border: 1px solid #e6dcf0; border-radius: 5px; padding: 6px 10px; font-size: var(--fs-ui); color: #3a3147; cursor: pointer; }
.wm-r:hover { background: #ede2f7; border-color: #c9b3e3; }

/* ── 🧘 standing-desk — the flat wetware glance strip + the one slide-up drawer (replaces the 3 nested stations) ── */
.well-glance { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; }
/* one strip = a mini-card: its OWN personalized top bar (station art + signature color) over the metric row */
.well-strip { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); transition: border-color .12s; }
.well-strip:hover { border-color: var(--lav-deep); }
/* ── THE personalized top bar — distinct station art + a signature color wash + the icon/label/dot/＋ ── */
.well-band { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 12px; min-height: 42px; overflow: hidden; }
.well-band::before { content: ''; position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .34; z-index: 0; }
.well-band::after  { content: ''; position: absolute; inset: 0; z-index: 1; }   /* the per-station signature wash */
.well-band > * { position: relative; z-index: 2; }
.well-strip[data-station="sleep"]    .well-band::before { background-image: url(sleep-bar.png); }
.well-strip[data-station="food"]     .well-band::before { background-image: url(food-bar.png); }
.well-strip[data-station="exercise"] .well-band::before { background-image: url(exercise-top.png); }
.well-strip[data-station="sleep"]    .well-band::after { background: linear-gradient(90deg, rgba(124,109,214,.62), rgba(124,109,214,.10) 55%, transparent); }
.well-strip[data-station="food"]     .well-band::after { background: linear-gradient(90deg, rgba(74,167,110,.62),  rgba(74,167,110,.10) 55%,  transparent); }
.well-strip[data-station="exercise"] .well-band::after { background: linear-gradient(90deg, rgba(224,146,58,.62),  rgba(224,146,58,.10) 55%,  transparent); }
.well-id { display: flex; align-items: center; gap: 7px; font-size: var(--fs-label); font-weight: 800; letter-spacing: .5px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.65); }
.well-ic { font-size: 18px; }
.well-band .well-dot { margin-left: auto; }
/* the metric row below the bar */
.well-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.well-metric { flex: 1 1 auto; font-size: var(--fs-chrome); color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.well-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 6px currentColor; }
.well-dot-ok   { background: var(--ok);   color: var(--ok); }
.well-dot-warn { background: var(--warn); color: var(--warn); }
.well-dot-bad  { background: var(--bad);  color: var(--bad); }
.well-spark { flex: 0 0 108px; height: 22px; }
.well-spark .dash-cols { height: 22px; gap: 2px; }
.well-spark .dash-col-key { display: none; }
.well-add { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(255,255,255,.5); background: rgba(0,0,0,.28); color: #fff; font-size: 17px; line-height: 1; cursor: pointer; }
.well-add:hover { background: rgba(0,0,0,.5); }

/* the shared "how i feel today" wetware footer */
.well-moot { padding: 12px 16px 12px 20px; display: flex; flex-direction: column; gap: 7px; }
.well-moot-lbl { font-size: var(--fs-chrome); color: var(--text-dim); letter-spacing: .3px; }

/* the mood widget — 5 faces (grayscale → color when pressed) · a 4-bar energy meter · a one-line note */
.mood-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mood-faces { display: inline-flex; gap: 2px; }
.mood-face { background: none; border: none; font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 3px; border-radius: 6px; filter: grayscale(1) opacity(.55); transition: filter .12s, background .12s; }
.mood-face:hover { filter: grayscale(.3) opacity(.9); background: var(--surface-2); }
.mood-face[aria-pressed="true"] { filter: none; background: var(--lav-deep); }
.mood-energy { display: inline-flex; align-items: center; gap: 1px; font-size: var(--fs-ui); color: var(--text-dim); }
.mood-e { background: none; border: none; color: var(--line); font-size: var(--fs-ui); cursor: pointer; padding: 0 1px; line-height: 1; }
.mood-e[data-on] { color: var(--warn); }
.mood-note { flex: 1 1 140px; min-width: 120px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; color: var(--text); font-size: var(--fs-chrome); }
.mood-note::placeholder { color: var(--text-dim); }

/* [today ▾] chip + the top-bar control cluster */
.well-topctrls { display: inline-flex; align-items: center; gap: 8px; }
.well-daychip { background: var(--surface-2); border: 1px solid var(--lav-deep); color: var(--lav-bright); border-radius: 8px; padding: 4px 10px; font-size: var(--fs-chrome); font-weight: 600; cursor: pointer; white-space: nowrap; }
.well-daychip:hover { background: var(--lav-deep); color: #fff; }
.well-daymenu { top: 42px; right: 52px; }

/* ── the ONE drawer — slides up over the strips (position:absolute inside the relative card-body) ── */
.well-drawer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--surface); border-top: 1px solid var(--lav-deep); box-shadow: 0 -10px 30px rgba(0,0,0,.4); transform: translateY(100%); transition: transform .22s ease; max-height: 82%; display: flex; flex-direction: column; }
.well-drawer.open { transform: translateY(0); }
.well-drawer-tabs { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.well-drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }   /* 🎚️ the drawer scrolls in tiny windows */
.well-drawer-station { font-size: var(--fs-label); font-weight: 700; color: var(--text); margin-right: 6px; }
.well-dtab { background: none; border: 1px solid var(--line); color: var(--text-dim); border-radius: 7px; padding: 5px 12px; font-size: var(--fs-chrome); cursor: pointer; }
.well-dtab:hover { background: var(--surface-2); color: var(--text); }
.well-dtab.on { background: var(--lav-deep); border-color: var(--lav-deep); color: #fff; }
.well-drawer-x { margin-left: auto; background: none; border: 1px solid var(--line); color: var(--text-dim); border-radius: 6px; width: 26px; height: 26px; cursor: pointer; font-size: var(--fs-chrome); }
.well-drawer-x:hover { background: var(--surface-2); color: var(--text); }
.well-drawer-body { padding: 14px 16px; overflow-y: auto; overflow-x: hidden; }

/* the drawer's Log tab — the shrunk, human-knows-it-only forms */
.well-log { display: flex; flex-direction: column; gap: 11px; }
.well-log-row { display: flex; gap: 10px; flex-wrap: wrap; }
.well-log label, .well-log .wl-full { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-chrome); color: var(--text-dim); }
.well-log .wl-grow { flex: 1 1 160px; }
.well-log .wl-full { width: 100%; }
.wl-in { background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; color: var(--text); font-size: var(--fs-chrome); font-family: inherit; }
.wl-in:focus { outline: none; border-color: var(--lav); }
.wl-ta { resize: vertical; min-height: 40px; }
.well-log-mood { display: flex; flex-direction: column; gap: 5px; }
.wl-lbl { font-size: var(--fs-chrome); color: var(--text-dim); }
.wl-macros summary { font-size: var(--fs-chrome); color: var(--lav-bright); cursor: pointer; padding: 2px 0; }
.wl-macros[open] { display: flex; flex-direction: column; gap: 8px; }
.wl-save { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--lav-deep); color: var(--lav-bright); border-radius: 8px; padding: 8px 16px; font-size: var(--fs-chrome); font-weight: 600; cursor: pointer; }
.wl-save:hover { background: var(--lav-deep); color: #fff; }
.wl-msg { font-size: var(--fs-chrome); color: var(--ok); min-height: 14px; }
.wl-hint { font-size: var(--fs-chrome); color: var(--text-dim); line-height: 1.5; }
/* History/Profile tabs mount the station's REAL body — let it flow (drop the fixed heights it sets on itself) */
.well-drawer-body > .card-body { height: auto !important; overflow: visible !important; }
.well-drawer-body > .sleep-setup { position: relative; inset: auto; }

/* ════ (Sum 2026-07-10) the JOURNAL opens first; its CLOSED tab is a BIG leather spine — an easy target down
   at the bottom. click the OSC head for the readout (one-at-a-time). (leather is CSS for now — a real spine png
   is a fun TNG upgrade.) ════ */
.dash-sub.dash-journal-card.collapsed .dash-sub-head {
  min-height: 62px; padding: 20px 22px; font-size: var(--fs-label); letter-spacing: 3px; gap: 14px;
  background: linear-gradient(180deg, #5c4527 0%, #3a2616 100%); color: #f3e3c0;
  border: 2px solid #6b4f2e; border-radius: 12px; text-shadow: 0 1px 2px rgba(0,0,0,.6);
  box-shadow: inset 0 1px 0 rgba(255,220,160,.18), 0 3px 8px rgba(0,0,0,.45);
}
.dash-sub.dash-journal-card.collapsed .dash-sub-head:hover { background: linear-gradient(180deg, #6a5030 0%, #43301c 100%); }
.dash-sub.dash-journal-card.collapsed .dash-sub-caret { font-size: 15px; color: #f3e3c0; }

/* ════ NAKED skins (clinical + corporate) strip the wellness textures too: the green CRT oscilloscope + the
   leather journal → flat surfaces, solid ink. semantic data colors (good/bad greens & reds) are left alone. ════ */
[data-tier="clean"] .dash-sub.dash-osc { background: var(--surface) !important; border: 1px solid var(--line) !important; border-image: none !important; }
[data-tier="clean"] .dash-sub.dash-osc::after { display: none !important; }   /* scanlines off */
[data-tier="clean"] .dash-sub.dash-osc .dash-sub-head,
[data-tier="clean"] .dash-sub.dash-journal-card.collapsed .dash-sub-head {
  background: var(--surface-2) !important; background-image: none !important; color: var(--text) !important;
  border: 1px solid var(--line) !important; box-shadow: none !important; text-shadow: none !important; font-family: inherit !important;
}
[data-tier="clean"] .dash-sub.dash-journal-card.collapsed .dash-sub-caret { color: var(--text) !important; }
[data-tier="clean"] .dash-sub.dash-osc .dash-sub-body { background: var(--surface) !important; box-shadow: none !important; }
[data-tier="clean"] .dash-sub.dash-journal-card { background: var(--surface) !important; }
/* the green phosphor CHROME text (labels/values) → solid ink; leave the good/bad data colors */
[data-tier="clean"] .dash-sub.dash-osc .dash-tile-value,
[data-tier="clean"] .dash-sub.dash-osc .dash-tile-label,
[data-tier="clean"] .dash-sub.dash-osc .dash-tile-sub,
[data-tier="clean"] .dash-sub.dash-osc .dash-block-label,
[data-tier="clean"] .dash-sub.dash-osc .ex-step-big,
[data-tier="clean"] .dash-sub.dash-osc .ex-step-top,
[data-tier="clean"] .dash-sub.dash-osc .ex-time-lbl,
[data-tier="clean"] .dash-sub.dash-osc .ex-day-head,
[data-tier="clean"] .dash-sub.dash-osc .dash-foot { color: var(--text) !important; font-family: inherit !important; }