/* NetSlank /m — mobile app. Palette from the netslank.dk desktop site:
   deep teal bar (#16526a → #0c2c39), sky #a1cae2, periwinkle #5f83b9,
   pale blue-grey #d4dde7 and the orange accent #f39814. */

@font-face { font-family: "Open Sans"; font-weight: 300; font-display: swap; src: url(/content/fonts/OpenSans-Light-webfont.woff) format("woff"); }
@font-face { font-family: "Open Sans"; font-weight: 400; font-display: swap; src: url(/content/fonts/OpenSans-Regular-webfont.woff) format("woff"); }
@font-face { font-family: "Open Sans"; font-weight: 600; font-display: swap; src: url(/content/fonts/OpenSans-Semibold-webfont.woff) format("woff"); }

:root {
    --teal-950: #0a2430;
    --teal-900: #0c2c39;
    --teal-800: #123f52;
    --teal-700: #16526a;
    --teal-600: #1d6887;
    --teal-100: #e3eef3;
    --teal-50: #f0f6f9;
    --sky: #a1cae2;
    --periwinkle: #5f83b9;
    --pale: #d4dde7;
    --orange: #f39814;
    --orange-strong: #e0850a;
    --bg: #f2f5f7;
    --surface: #ffffff;
    --text: #10232c;
    --muted: #6a7b84;
    --line: #e4eaee;
    --danger: #c0392b;
    /* teal as text and icons (lighter in dark mode), and the strongest text colour */
    --accent: var(--teal-700);
    --ink: var(--teal-900);
    --glass: rgba(255, 255, 255, .92); /* round buttons floating on photos */

    /* macro colours: hues shared by hero bars and list dots */
    --carb: #7fb3d1;
    --prot: #5f83b9;
    --fat: #f39814;
    --alc: #b6b6b6;
    --carb-on-dark: #a1cae2;
    --prot-on-dark: #c7d5ee;
    --fat-on-dark: #f7b24a;

    --radius: 18px;
    --radius-sm: 12px;
    --shadow: 0 1px 2px rgba(12, 44, 57, 0.06), 0 4px 16px rgba(12, 44, 57, 0.06);
    --shadow-lg: 0 10px 40px rgba(12, 44, 57, 0.22);
    --font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --tabbar-h: 64px;
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
    line-height: 1.4;
    overscroll-behavior-y: none;
}
#app { max-width: 560px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; position: relative; background: var(--bg); }
/* The browser's edges (Safari: around the notch, and below the page) follow the page's own
   background, top and bottom alike: teal on the screens that start in teal (the day view, the login —
   .top-teal, set by app.js), else the theme's background. app.js sets theme-color to the same. */
html, body { background-color: var(--bg); }
html.top-teal { background-color: var(--teal-700); }
html.top-teal body { background-color: transparent; }
@media (min-width: 600px) { body { background: #dfe6ea; } #app { box-shadow: 0 0 60px rgba(12, 44, 57, 0.12); } }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: var(--accent); text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- splash / loading ---------- */
.splash { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(180deg, var(--teal-700), var(--teal-900)); }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; animation: spin .8s linear infinite; }
.spinner.dark { border-color: var(--line); border-top-color: var(--teal-700); }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, #e8eef1 0%, #f4f7f9 50%, #e8eef1 100%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 10px; }
@keyframes shimmer { to { background-position: -200% 0; } }

.screen { min-height: 100vh; min-height: 100dvh; padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 24px); animation: screen-in .22s ease; }
/* no fill-mode: a held transform/opacity animation keeps .screen a stacking context, trapping its sheets under the tab bar */
.screen.no-tabs { padding-bottom: calc(var(--safe-b) + 24px); }
@keyframes screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- hero (the desktop top bar, grown up) ---------- */
.hero {
    background: radial-gradient(120% 90% at 85% 0%, var(--teal-600) 0%, transparent 60%), linear-gradient(170deg, var(--teal-700) 0%, var(--teal-900) 100%);
    color: #fff;
    padding: calc(var(--safe-t) + 10px) 16px 56px;
    border-radius: 0 0 28px 28px;
    position: relative;
}
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 44px; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: inherit; }
.icon-btn:active { background: rgba(255,255,255,.12); }
.icon-btn svg { width: 22px; height: 22px; }
.date-title { font-weight: 600; font-size: 17px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; position: relative; }
.date-title:active { background: rgba(255,255,255,.12); }
.date-title svg { width: 16px; height: 16px; opacity: .8; }
.date-title input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }

.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 10px 0 6px; }
.week button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0 8px; border-radius: 14px; color: rgba(255,255,255,.75); }
.week button .wd { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.week button .dn { font-size: 15px; font-weight: 600; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; position: relative; }
.week button .dn svg { position: absolute; inset: 0; width: 32px; height: 32px; transform: rotate(-90deg); }
.week button.sel { background: rgba(255,255,255,.14); color: #fff; }
.week button.today .wd { color: var(--orange); font-weight: 600; }
.week button.future { opacity: .55; }

.ring-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 14px; }
.ring-stat { text-align: center; }
.ring-stat b { display: block; font-size: 20px; font-weight: 600; }
.ring-stat span { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.7); }
.ring { position: relative; width: 176px; height: 176px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 11; }
.ring .track { stroke: rgba(255,255,255,.14); }
.ring .bar { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1), stroke .3s; }
.ring .bar.over { stroke: var(--orange); }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ring-center b { font-size: 38px; font-weight: 300; letter-spacing: -.02em; line-height: 1.05; }
.ring-center span { font-size: 13px; color: rgba(255,255,255,.75); margin-top: 2px; }
.ring-center button { margin-top: 6px; font-size: 12px; color: var(--orange); font-weight: 600; }

.macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.macro { font-size: 13px; }
.macro .lbl { color: rgba(255,255,255,.8); display: flex; justify-content: space-between; }
.macro .track { height: 5px; border-radius: 3px; background: rgba(255,255,255,.14); margin: 6px 0 4px; overflow: hidden; }
.macro .fill { height: 100%; border-radius: 3px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.macro b { font-weight: 600; }
.macros.light .macro .lbl { color: var(--muted); }
.macros.light .macro .track { background: var(--line); }

/* ---------- content cards ---------- */
.content { padding: 0 16px; margin-top: -40px; position: relative; display: flex; flex-direction: column; gap: 12px; }
.content.flat { margin-top: 12px; }
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.card.pad { padding: 16px; }
.card h2 { font-size: 17px; font-weight: 600; }
.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; margin: 12px 4px 0; }

.meal-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; }
.meal-head.tap-head { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.meal-head.tap-head:active .meal-icon { transform: scale(.94); }
.meal-icon { transition: transform .12s; }
.meal-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--teal-50); color: var(--accent); flex: none; }
.meal-icon svg { width: 22px; height: 22px; }
.meal-icon.exercise { background: #fff3e2; color: var(--orange-strong); }
.meal-title { flex: 1; min-width: 0; }
.meal-title h3 { font-size: 16px; font-weight: 600; }
.meal-title p { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.add-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: #fff; flex: none; box-shadow: 0 3px 10px rgba(243, 152, 20, .35); transition: transform .12s; }
.add-btn:active { transform: scale(.92); background: var(--orange-strong); }
.add-btn svg { width: 22px; height: 22px; }
.add-btn.ghost { background: var(--teal-50); color: var(--accent); box-shadow: none; }

.entries { list-style: none; margin: 0; padding: 0 0 6px; border-top: 1px solid var(--line); }
.entries li { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.entries li + li { border-top: 1px solid var(--line); }
.entries li.tap:active { background: var(--teal-50); }
.entries .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--alc); }
.entries .txt { flex: 1; min-width: 0; }
.entries .txt b { display: block; font-weight: 400; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entries .txt small { color: var(--muted); font-size: 13px; }
.entries .kcal { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.entries li.note { font-style: italic; color: var(--muted); font-size: 14px; }
.t-0 { background: var(--prot) !important; }
.t-1 { background: var(--fat) !important; }
.t-2 { background: var(--carb) !important; }
.t-3 { background: var(--alc) !important; }

.start-card { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.start-card p { color: var(--muted); font-size: 14px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 14px; font-weight: 600; font-size: 16px; background: var(--teal-700); color: #fff; transition: transform .1s, background .15s; }
.btn:active { transform: scale(.98); background: var(--teal-800); }
.btn svg { width: 20px; height: 20px; }
.btn.block { width: 100%; }
.btn.accent { background: var(--orange); }
.btn.accent:active { background: var(--orange-strong); }
.btn.soft { background: var(--teal-50); color: var(--accent); }
.btn.soft:active { background: var(--teal-100); }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.danger { background: transparent; color: var(--danger); }
.btn.small { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: 11px; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ---------- bars (screens without a hero) ---------- */
.bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 4px; padding: calc(var(--safe-t) + 6px) 8px 6px; min-height: 56px; background: rgba(242, 245, 247, .92); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); }
.bar h1 { font-size: 17px; font-weight: 600; flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .icon-btn { color: var(--accent); }
.bar .icon-btn:active { background: var(--teal-50); }
.bar .end { min-width: 40px; display: flex; justify-content: flex-end; }
.bar .done { font-weight: 600; color: var(--accent); padding: 8px 10px; }
.page-title { padding: calc(var(--safe-t) + 18px) 20px 8px; }
.page-title h1 { font-size: 30px; font-weight: 600; letter-spacing: -.02em; }
.page-title p { color: var(--muted); }

/* ---------- search ---------- */
.searchbox { display: flex; align-items: center; gap: 8px; background: var(--surface); border-radius: 14px; padding: 0 12px; height: 48px; box-shadow: var(--shadow); margin: 4px 16px 12px; border: 2px solid transparent; transition: border-color .15s; }
.searchbox:focus-within { border-color: var(--sky); }
.searchbox svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.searchbox input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 16px; min-width: 0; }
.searchbox button svg { width: 18px; height: 18px; }

.seg { display: flex; background: #e3e9ed; border-radius: 12px; padding: 3px; gap: 3px; }
.seg button { flex: 1; padding: 8px 10px; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--muted); }
.seg button.on { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.seg.pad { margin: 0 16px 12px; }

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px 12px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.chip svg { width: 15px; height: 15px; }
.chip.on { background: var(--teal-700); color: #fff; }

.list { list-style: none; margin: 0 16px; padding: 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.list li { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; min-height: 60px; }
.list li + li { border-top: 1px solid var(--line); }
.list li.tap:active { background: var(--teal-50); }
.tap { cursor: pointer; } /* (a row that acts like a button: the hand at a desk, not the text cursor) */
.list .txt { flex: 1; min-width: 0; }
.list .txt b { display: block; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .txt small { color: var(--muted); font-size: 13px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.star { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #c3ccd2; flex: none; }
.star.on { color: var(--orange); }
.star svg { width: 20px; height: 20px; }
.quick-add { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-50); color: var(--accent); flex: none; }
.quick-add svg { width: 18px; height: 18px; }
.quick-add:active { background: var(--teal-100); }
.quick-add.done { background: #e4f4ea; color: #2e8b57; }
.empty { text-align: center; color: var(--muted); padding: 36px 24px; }
.empty svg { width: 40px; height: 40px; color: var(--pale); margin-bottom: 8px; }
.more-note { text-align: center; color: var(--muted); font-size: 13px; padding: 12px; }

/* ---------- bottom sheet ---------- */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(10, 36, 48, .45); z-index: 100; animation: fade-in .2s ease both; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 101; max-width: 560px; margin: 0 auto; background: var(--surface); color: var(--text); border-radius: 24px 24px 0 0; padding: 8px 20px calc(20px + var(--safe-b)); max-height: 92vh; overflow-y: auto; animation: sheet-up .28s cubic-bezier(.2,.8,.2,1) both; box-shadow: var(--shadow-lg); }
.sheet .grip { width: 40px; height: 5px; border-radius: 3px; background: var(--pale); margin: 4px auto 14px; }
.sheet h2 { font-size: 20px; font-weight: 600; margin-bottom: 2px; }
.sheet .sub { color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.sheet .actions { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes sheet-up { from { transform: translateY(100%); } }
.sheet-list { list-style: none; margin: 0 -4px; padding: 0; }
.sheet-list li button { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 4px; text-align: left; border-radius: 12px; }
.sheet-list li button:active { background: var(--teal-50); }
.sheet-list li + li { border-top: 1px solid var(--line); }
.sheet-list .txt { flex: 1; }
.sheet-list .txt b { display: block; font-weight: 600; }
.sheet-list .txt small { color: var(--muted); }

/* portion editor */
.portion-kcal { text-align: center; margin: 6px 0 14px; }
.portion-kcal b { font-size: 44px; font-weight: 300; letter-spacing: -.02em; }
.portion-kcal span { color: var(--muted); margin-left: 4px; }
.stepper { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; }
.stepper button { width: 52px; height: 52px; border-radius: 16px; background: var(--teal-50); color: var(--accent); display: grid; place-items: center; flex: none; }
.stepper button:active { background: var(--teal-100); }
.stepper button svg { width: 22px; height: 22px; }
.stepper .field { flex: 1; display: flex; align-items: baseline; justify-content: center; gap: 6px; height: 52px; border-radius: 16px; border: 2px solid var(--line); padding: 0 12px; }
.stepper .field:focus-within { border-color: var(--sky); }
.stepper input { width: 100%; text-align: right; border: 0; outline: 0; font-size: 24px; font-weight: 600; background: transparent; padding: 0; height: 48px; }
.stepper .unit { color: var(--muted); font-weight: 600; white-space: nowrap; flex: none; min-width: 30%; }
.quick-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.quick-chips button { padding: 8px 14px; border-radius: 999px; background: var(--bg); font-weight: 600; font-size: 14px; }
.quick-chips button.on { background: var(--teal-700); color: #fff; }

.field-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field-row label { font-size: 13px; font-weight: 600; color: var(--muted); }
.input { height: 50px; border-radius: 14px; border: 2px solid var(--line); padding: 0 14px; font-size: 17px; outline: 0; background: var(--surface); width: 100%; }
.input:focus { border-color: var(--sky); }
.input.big { font-size: 26px; font-weight: 600; text-align: center; height: 64px; }

/* ---------- tab bar ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; max-width: 560px; margin: 0 auto; height: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: var(--safe-b); background: rgba(255,255,255,.96); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; }
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: #8a99a1; padding: 6px 0; }
.tabbar a svg { width: 24px; height: 24px; }
.tabbar a.on { color: var(--accent); }
.tabbar .fab-wrap { display: grid; place-items: center; }
.fab { width: 56px; height: 56px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; margin-top: -26px; box-shadow: 0 6px 18px rgba(243, 152, 20, .45), 0 0 0 5px var(--bg); transition: transform .12s; }
.fab:active { transform: scale(.94); }
.fab svg { width: 28px; height: 28px; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px); transform: translateX(-50%); z-index: 200; background: var(--teal-900); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 8px; animation: toast-in .25s cubic-bezier(.2,.8,.2,1) both; white-space: nowrap; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; }
.toast svg { width: 18px; height: 18px; color: #7ed3a0; flex: none; }
.no-tabs ~ .toast, .toast.low { bottom: calc(var(--safe-b) + 20px); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } }

/* ---------- login ---------- */
.login { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: radial-gradient(120% 70% at 80% 0%, var(--teal-600) 0%, transparent 60%), linear-gradient(170deg, var(--teal-700), var(--teal-950)); color: #fff; padding: calc(var(--safe-t) + 40px) 24px calc(var(--safe-b) + 24px); }
.login .brand { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.login .brand h1 { font-size: 34px; font-weight: 300; letter-spacing: -.01em; }
.login .brand h1 b { font-weight: 600; }
.login .brand p { color: rgba(255,255,255,.75); font-size: 17px; max-width: 22em; }
.login form { background: var(--surface); color: var(--text); border-radius: 24px; padding: 22px 18px 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-lg); }
.login .msg { color: var(--danger); font-size: 14px; font-weight: 600; text-align: center; }
.login .alt { text-align: center; margin-top: 14px; font-size: 14px; color: rgba(255,255,255,.75); }
.login .alt a { color: #fff; font-weight: 600; }
.login-done { background: var(--surface); color: var(--text); border-radius: 24px; padding: 22px 20px; box-shadow: var(--shadow-lg); }
.login-done p { color: var(--muted); margin-top: 6px; }
.login .alt .btn { color: #fff; display: flex; }
.login .hidden-user { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.login .pw-row { display: flex; gap: 8px; align-items: center; }
.login .pw-row .input { flex: 1; min-width: 0; }

/* ---------- recipes ---------- */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px; }
.rcard { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; color: var(--text); }
.rcard:active { transform: scale(.985); }
.rimg { aspect-ratio: 3 / 4; background: linear-gradient(150deg, var(--teal-100), var(--pale)); display: grid; place-items: center; color: var(--accent); overflow: hidden; position: relative; }
.rimg img { width: 100%; height: 100%; object-fit: contain; display: block; position: relative; }
/* the whole photo is shown; a blurred copy fills any space around a photo that isn't 3:4 */
.rimg img.fill { position: absolute; inset: 0; object-fit: cover; filter: blur(14px) saturate(1.1); transform: scale(1.15); opacity: .85; }
.rimg svg { width: 32px; height: 32px; opacity: .5; }
.rcard .rtxt { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.rcard b { font-size: 14px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rcard small { color: var(--muted); font-size: 12px; margin-top: auto; }
.rcard .fav-badge { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--orange); display: grid; place-items: center; }
.rcard .fav-badge svg { width: 16px; height: 16px; }
.recipe-hero { position: relative; aspect-ratio: 4 / 3; max-height: 46vh; width: 100%; background: linear-gradient(170deg, var(--teal-700), var(--teal-900)); overflow: hidden; }
.recipe-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recipe-hero .icon-btn { position: absolute; top: calc(var(--safe-t) + 10px); left: 10px; background: rgba(255,255,255,.92); color: var(--ink); box-shadow: var(--shadow); }
.recipe-hero .icon-btn.right { left: auto; right: 10px; }
.recipe-hero .icon-btn.right.on { color: var(--orange); }
.recipe-body { background: var(--bg); border-radius: 24px 24px 0 0; margin-top: -24px; position: relative; padding: 22px 16px 0; display: flex; flex-direction: column; gap: 14px; }
.recipe-body h1 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; padding: 0 4px; }
.kcal-chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 4px; }
.kcal-chips span { background: var(--surface); box-shadow: var(--shadow); padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.prose { white-space: pre-line; font-size: 15px; line-height: 1.6; }

/* ---------- progress ---------- */
.stat-big { display: flex; align-items: baseline; gap: 8px; }
.stat-big b { font-size: 34px; font-weight: 300; letter-spacing: -.02em; }
.delta { font-size: 14px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--teal-50); color: var(--accent); }
.delta.up { background: #fff3e2; color: var(--orange-strong); }
.chart { width: 100%; height: auto; display: block; margin-top: 10px; overflow: visible; }
.chart .grid-line { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--muted); font-size: 10px; font-family: var(--font); }
.chart .line { fill: none; stroke: var(--teal-700); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .pt { fill: #fff; stroke: var(--teal-700); stroke-width: 2; }
.chart .bar-ok { fill: var(--teal-600); }
.chart .bar-over { fill: var(--orange); }
.chart .budget { stroke: var(--orange); stroke-width: 1.5; stroke-dasharray: 4 4; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-head h2 { font-size: 17px; }

/* ---------- me ---------- */
.profile-head { display: flex; align-items: center; gap: 14px; padding: 4px 20px 16px; }
.avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(150deg, var(--teal-600), var(--teal-900)); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 20px; flex: none; }
.profile-head .profile-name > b { font-size: 18px; }
.list li .chev { color: #b9c4ca; width: 18px; height: 18px; flex: none; }
.list li .ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--teal-50); color: var(--accent); flex: none; }
.list li .ico svg { width: 19px; height: 19px; }
.list li .val { color: var(--muted); font-size: 15px; }
.list a, .list button.row { display: contents; color: inherit; }
.company-logo { max-height: 28px; max-width: 160px; margin: 20px auto 0; display: block; opacity: .8; }

/* trailing chevrons in lists and sheets */
.list li > svg, .sheet-list li button > svg { width: 18px; height: 18px; color: #b9c4ca; flex: none; }
.sheet-list li button[disabled] { opacity: .5; }
/* "set your goal" prompt under the ring when no budget exists */
.set-goal { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--orange); padding: 5px 12px; border-radius: 999px; box-shadow: 0 3px 10px rgba(0,0,0,.2); }

/* one clear button: ours */
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.date-title { max-width: 72%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============ v2: Lifesum-inspired layout in the netslank palette ============ */

/* hero fades from the desktop teal into the page instead of ending in a card edge */
.hero {
    background:
        radial-gradient(90% 60% at 80% 0%, rgba(161, 202, 226, .35) 0%, transparent 70%),
        linear-gradient(180deg, var(--teal-700) 0%, var(--teal-600) 38%, #4f8fb0 62%, #b9d6e6 82%, var(--bg) 100%);
    border-radius: 0;
    padding: calc(var(--safe-t) + 12px) 16px 8px;
}
.hero-top { height: 48px; }
.pill-btn { width: 52px; height: 40px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; display: grid; place-items: center; }
.pill-btn:active { background: rgba(255,255,255,.28); }
.pill-btn svg { width: 20px; height: 20px; }
.date-pill { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; background: rgba(255,255,255,.16); font-weight: 600; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.date-pill svg { width: 17px; height: 17px; opacity: .9; }
.date-pill input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.date-pill:active { background: rgba(255,255,255,.28); }

.gauge-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 8px; }
.gauge-row .ring-stat span { display: block; font-size: 15px; text-transform: none; letter-spacing: 0; color: rgba(255,255,255,.85); margin-bottom: 2px; }
.gauge-row .ring-stat b { font-size: 30px; font-weight: 600; }
.gauge-wrap { position: relative; }
.gauge { position: relative; width: 220px; height: 192px; }
.gauge svg { width: 100%; height: 100%; overflow: visible; }
.gauge path { fill: none; stroke-width: 14; stroke-linecap: round; }
.gauge .track { stroke: rgba(255,255,255,.2); }
.gauge .bar { stroke: #fff; transition: stroke-dasharray .7s cubic-bezier(.2,.8,.2,1), stroke .3s; }
.gauge .bar.over { stroke: var(--orange); }
.gauge-center { position: absolute; inset: 22px 0 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.gauge-center .lbl { font-size: 15px; color: rgba(255,255,255,.9); }
.gauge-center b { font-size: 56px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.gauge-center .goal { font-size: 15px; color: rgba(255,255,255,.8); font-weight: 600; }
.set-goal { bottom: 4px; }

.macro-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.macro-card { background: var(--surface); border-radius: 16px; padding: 12px 12px 14px; box-shadow: var(--shadow); color: var(--text); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.macro-card b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.macro-card span { font-size: 15px; color: var(--muted); }
.macro-card .track { height: 7px; border-radius: 4px; margin-top: 6px; overflow: hidden; }
.macro-card .fill { height: 100%; border-radius: 4px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.m-carb .track { background: #deecf4; } .m-carb .fill { background: var(--carb); }
.m-prot .track { background: #e2e8f4; } .m-prot .fill { background: var(--prot); }
.m-fat .track { background: #fdebd2; } .m-fat .fill { background: var(--fat); }
.macro-cards.compact { margin-top: 14px; }
.macro-cards.compact .macro-card { box-shadow: none; padding: 0; text-align: center; align-items: center; }
.macro-cards.compact .macro-card .track { width: 100%; order: -1; margin: 6px 0 8px; }
.macro-cards.compact .macro-card b { order: -2; }
.content { margin-top: 12px; }

/* add-food screen */
.round-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); display: grid; place-items: center; color: var(--text); flex: none; }
.round-btn:active { background: var(--teal-50); }
.round-btn svg { width: 22px; height: 22px; }
.bar h1 small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.add-screen .bar { padding-left: 12px; padding-right: 12px; }
.searchbox.pill { background: #e6ecef; box-shadow: none; border-radius: 999px; margin-top: 8px; }
.searchbox.pill:focus-within { background: var(--surface); border-color: var(--sky); }
.intake { margin: 0 16px 14px; }
.intake-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.intake-head b { font-size: 17px; }
.intake-head span { font-size: 16px; }
.track.big { height: 8px; border-radius: 4px; background: var(--line); margin-top: 10px; overflow: hidden; }
.track.big .fill { height: 100%; background: var(--teal-600); border-radius: 4px; transition: width .6s; }
.seg.icons button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; }
.seg.icons svg { width: 20px; height: 20px; }
.seg.icons button span { font-size: 13px; }
.star.on { color: #e0505b; }

/* recipes front page */
.rsection { margin-bottom: 18px; }
.rsection-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 20px 10px; }
.rsection-head h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
.rsection-head button { color: var(--accent); font-weight: 600; font-size: 15px; }
.carousel { display: flex; gap: 12px; overflow-x: auto; padding: 2px 16px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel .rcard { flex: 0 0 calc(50% - 22px); max-width: 230px; scroll-snap-align: start; }
.rcard small { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.rcard .heart { color: #b9c4ca; display: grid; }
.rcard .heart.on { color: #e0505b; }
.rcard .heart svg { width: 20px; height: 20px; }
.recipe-hero .icon-btn.right.on { color: #e0505b; }

/* floating pill tab bar */
.tabbar { background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; height: auto; display: block; padding: 0 12px calc(var(--safe-b) + 10px); pointer-events: none; }
.tabbar-pill { pointer-events: auto; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; height: 68px; border-radius: 34px; background: rgba(255,255,255,.88); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); box-shadow: 0 8px 30px rgba(12, 44, 57, .16), inset 0 0 0 1px rgba(255,255,255,.6); }
.tabbar a { color: #4d5f68; font-size: 12px; gap: 2px; border-radius: 26px; margin: 0 4px; padding: 8px 0; }
.tabbar a.on { color: var(--accent); background: rgba(22, 82, 106, .08); }
.fab { margin-top: 0; width: 52px; height: 52px; box-shadow: 0 6px 16px rgba(243, 152, 20, .45); }
.screen { padding-bottom: calc(var(--safe-b) + 110px); }
.screen.no-tabs { padding-bottom: calc(var(--safe-b) + 24px); }
.toast { bottom: calc(var(--safe-b) + 96px); }
.carousel { scroll-padding: 0 16px; }

/* ============ goals: tappable gauge + macro cards, min/max ranges ============ */
.gauge { display: block; color: #fff; text-align: center; border-radius: 50%; transition: transform .12s; }
.gauge:active { transform: scale(.98); }
.gauge .tick { stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .9; }
button.macro-card { text-align: left; font: inherit; cursor: pointer; transition: transform .12s; }
button.macro-card:active { transform: scale(.97); }
.macro-card .track { position: relative; }
.macro-card .band { position: absolute; top: 0; bottom: 0; background: rgba(12, 44, 57, .12); border-radius: 4px; }
.macro-card .fill { position: relative; }
.macro-card .goal-range { font-size: 12px; color: var(--muted); margin-top: 4px; white-space: nowrap; }
.macro-card.st-ok .fill { background: #3f9f6b; }
.macro-card.st-over .fill { background: #d9534f; }
.macro-card.st-over span.num { color: #c0392b; }
.macro-cards.compact .goal-range { order: 1; }
.goal-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.goal-fields .field-row { margin: 0; }
.goal-fields .field-row > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.unit-input { position: relative; }
.unit-input .input { padding-right: 46px; font-weight: 600; }
.unit-input em { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--muted); font-weight: 600; pointer-events: none; }
.form-msg { color: var(--danger); font-size: 14px; font-weight: 600; margin-top: 10px; }
.chart .budget-min { stroke: var(--teal-600); stroke-width: 1.5; stroke-dasharray: 2 4; }
.m-carb .band { background: rgba(127, 179, 209, .45); }
.m-prot .band { background: rgba(95, 131, 185, .35); }
.m-fat .band { background: rgba(243, 152, 20, .35); }

/* ============ v3: energy distribution ============ */
:root { --carb-d: #a1cae2; --prot-d: #eef3fb; --fat-d: #f7b24a; }

.gauge .seg { fill: none; stroke-width: 14; stroke-linecap: butt; transition: stroke-dasharray .6s cubic-bezier(.2,.8,.2,1), stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1); }
.gauge .inner { fill: none; stroke-width: 5; stroke-linecap: butt; opacity: .55; }
.on-dark-carb { stroke: var(--carb-d); }
.on-dark-prot { stroke: var(--prot-d); }
.on-dark-fat { stroke: var(--fat-d); }
.gauge-center { inset: 40px 0 26px; }
.gauge-center .lbl { font-size: 13px; }
.gauge-center b { font-size: 40px; font-weight: 600; }
.gauge-center b.over { color: var(--fat-d); }
.gauge-center .goal { font-size: 13px; font-weight: 400; }

/* legend under the gauge: actual E% vs goal */
.dist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin: 6px 0 4px; padding: 12px 8px; border-radius: 18px; background: rgba(255,255,255,.12); color: #fff; text-align: left; font: inherit; }
button.dist:active { background: rgba(255,255,255,.2); }
.dist-item { display: flex; flex-direction: column; gap: 1px; padding: 0 6px; min-width: 0; }
.dist-item + .dist-item { border-left: 1px solid rgba(255,255,255,.14); }
.dist-name { font-size: 13px; display: flex; align-items: center; gap: 6px; white-space: nowrap; color: rgba(255,255,255,.85); }
.dist-name i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.d-carb .dist-name i, i.d-carb { background: var(--carb-d); }
.d-prot .dist-name i, i.d-prot { background: var(--prot-d); }
.d-fat .dist-name i, i.d-fat { background: var(--fat-d); }
.dist-item b { font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.dist-diff { font-size: 11px; margin-left: 4px; color: var(--fat-d); vertical-align: middle; }
.dist-goal { font-size: 12px; color: rgba(255,255,255,.75); }
.dist-g { font-size: 12px; color: rgba(255,255,255,.6); }

.dist.light { background: transparent; color: var(--text); padding: 12px 0 0; margin: 0; }
.dist.light .dist-item + .dist-item { border-left-color: var(--line); }
.dist.light .dist-name, .dist.light .dist-goal { color: var(--muted); }
.dist.light .dist-g { color: var(--muted); }
.dist.light .d-carb .dist-name i { background: var(--carb); }
.dist.light .d-prot .dist-name i { background: var(--prot); }
.dist.light .d-fat .dist-name i { background: var(--fat); }
.dist.light .dist-diff { color: var(--orange-strong); }

/* goal sheet */
.field-label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 4px 0 10px; }
.kcal-control { margin-bottom: 20px; }
.kcal-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kcal-row .step { width: 48px; height: 48px; border-radius: 50%; background: var(--teal-50); color: var(--accent); display: grid; place-items: center; }
.kcal-row .step:active { background: var(--teal-100); }
.kcal-row .step svg { width: 22px; height: 22px; }
.kcal-value { font-size: 40px; font-weight: 600; letter-spacing: -.02em; }
.kcal-value small { font-size: 16px; color: var(--muted); font-weight: 600; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 36px; background: transparent; margin-top: 6px; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--teal-600), var(--sky)); }
.range::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--teal-600), var(--sky)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); margin-top: -11px; }
.range::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); }

.split { position: relative; display: flex; height: 52px; border-radius: 16px; overflow: visible; margin: 0 4px; touch-action: none; user-select: none; -webkit-user-select: none; }
.split-seg { display: grid; place-items: center; font-weight: 600; font-size: 15px; transition: width .08s linear; overflow: hidden; white-space: nowrap; }
.split-seg:first-child { border-radius: 16px 0 0 16px; }
.split-seg:nth-child(3) { border-radius: 0 16px 16px 0; }
.s-carb { background: var(--carb); color: #0c2c39; }
.s-prot { background: var(--prot); color: #fff; }
.s-fat { background: var(--fat); color: #fff; }
.split-handle { position: absolute; top: -6px; bottom: -6px; width: 28px; margin-left: -14px; display: grid; place-items: center; cursor: ew-resize; touch-action: none; outline: none; }
.split-handle::before { content: ""; width: 8px; height: 100%; border-radius: 4px; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.3); }
.split-handle:focus-visible::before { box-shadow: 0 0 0 3px var(--sky), 0 1px 6px rgba(0,0,0,.3); }
.presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.chip.small { padding: 6px 12px; font-size: 13px; box-shadow: none; background: var(--bg); }
.chip.small.on { background: var(--teal-700); color: #fff; }
.goal-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 15px; }
.goal-table td { padding: 9px 4px; border-top: 1px solid var(--line); }
.goal-table td:first-child { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.goal-table td.num { text-align: right; }
.goal-table .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.goal-table .d-carb { background: var(--carb); }
.goal-table .d-prot { background: var(--prot); }
.goal-table .d-fat { background: var(--fat); }
.gauge .inner { stroke-width: 4; opacity: 1; }
.dist.light.card { background: var(--surface); box-shadow: var(--shadow); border-radius: 18px; padding: 14px 8px; margin-top: 8px; }
button.dist.light.card:active { background: #f7fafb; }
.goal-table td:first-child { display: table-cell; }
.goal-name { display: flex; align-items: center; gap: 8px; font-weight: 600; }

/* ============ v4: desktop nutrient colours, muted to sit with the teal ============ */
/* desktop charts: protein #468bb2, fat #b11116, carbohydrate #94ad37 */
:root {
    --prot: #4f86a8;
    --fat: #b04a4d;
    --carb: #8ea64c;
    --prot-d: #93c0da;   /* tints for the dark hero */
    --fat-d: #e59a9b;
    --carb-d: #c4d68a;
    --ok: #3d8a5a;
}
.s-carb { background: var(--carb); color: #fff; }
.s-prot { background: var(--prot); color: #fff; }
.s-fat { background: var(--fat); color: #fff; }
.gauge .seg { transition: none; } /* the totals are tweened in JS */

/* goal sheet table: goal next to the chosen day */
.goal-table { margin: 4px 0 22px; }
.goal-table th { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); text-align: right; padding: 0 4px 6px; }
.goal-table td { vertical-align: middle; }
.goal-table td.num b { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 17px; font-weight: 600; }
.goal-table td.num small { display: block; font-size: 12px; color: var(--muted); }
.goal-table td.ok b, .goal-table td.ok small { color: var(--ok); }
.goal-table td.ok svg { width: 16px; height: 16px; }
.goal-table .d-kcal { background: var(--teal-700); }
.goal-table .d-carb { background: var(--carb); }
.goal-table .d-prot { background: var(--prot); }
.goal-table .d-fat { background: var(--fat); }
/* the chosen day's column is shaded; a narrow spacer keeps the shade clear of the goal column */
.goal-table .gap { width: 10px; padding: 0; }
.goal-table td:nth-child(4) { background: var(--teal-50); padding-right: 10px; padding-left: 8px; }
.goal-table thead th:nth-child(4) { background: var(--teal-50); border-radius: 10px 10px 0 0; padding-top: 6px; padding-right: 10px; }
.goal-table tbody tr:last-child td:nth-child(4) { border-radius: 0 0 10px 10px; }
.sheet-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: var(--bg); color: var(--muted); display: grid; place-items: center; }
.sheet-close svg { width: 18px; height: 18px; }
.sheet h2 { padding-right: 44px; }

/* hero without the cards: stay teal behind the whole gauge, fade out below it */
.hero {
    background:
        radial-gradient(90% 60% at 80% 0%, rgba(161, 202, 226, .30) 0%, transparent 70%),
        linear-gradient(180deg, var(--teal-700) 0%, var(--teal-600) 55%, #2f7393 78%, #8fb9cf 92%, var(--bg) 100%);
    padding-bottom: 40px;
}
/* goal sheet: fit a phone screen with less scrolling */
.goal-table td { padding: 7px 4px; }
.goal-table { margin-bottom: 14px; }
.kcal-control { margin-bottom: 12px; }
.kcal-value { font-size: 32px; }
.kcal-row .step { width: 42px; height: 42px; }
.range { height: 30px; }
.split { height: 46px; }
.presets { margin: 10px 0 2px; }
.sheet .actions { margin-top: 14px; }

/* ============ v5: day strip + goal profiles ============ */
.strip { display: flex; gap: 8px; overflow-x: auto; margin: 6px -16px 0; padding: 10px 16px 8px; scrollbar-width: none; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.strip::-webkit-scrollbar { display: none; }
.daychip { position: relative; flex: 0 0 62px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px 9px; border-radius: 16px; color: #fff; background: rgba(255,255,255,.08); border-top: 3px solid var(--c); text-decoration: none; transition: transform .15s; }
.daychip:active { transform: scale(.95); }
.daychip .wd { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.daychip b { font-size: 19px; font-weight: 600; line-height: 1.2; }
.daychip small { font-size: 10px; max-width: 56px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.daychip .dc-bar { width: 36px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.18); margin-top: 4px; overflow: hidden; }
.daychip .dc-bar span { display: block; height: 100%; background: var(--c); border-radius: 2px; }
.daychip.empty { background: rgba(255,255,255,.04); }
.daychip.empty b, .daychip.empty .wd { opacity: .6; }
.daychip.future { opacity: .45; background: transparent; border: 1px dashed rgba(255,255,255,.35); border-top: 3px solid var(--c); }
.daychip.today .wd { color: var(--fat-d); font-weight: 600; opacity: 1; }
.daychip.sel { outline: 2px solid #fff; outline-offset: 2px; }
/* a day that hit its target: filled with its colour, a soft glow and a check */
.daychip.hit { background: var(--c); border-top-color: rgba(255,255,255,.7); box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 4px 16px var(--c); }
.daychip.hit .dc-bar { background: rgba(255,255,255,.35); }
.daychip.hit .dc-bar span { background: #fff; }
.daychip .hit-badge { position: absolute; top: -7px; right: -5px; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--ok); display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.25); animation: pop .4s cubic-bezier(.2,1.6,.4,1) both; }
.daychip .hit-badge svg { width: 13px; height: 13px; stroke-width: 3; }
@keyframes pop { from { transform: scale(0); } }
.daychip.skel { height: 78px; background: rgba(255,255,255,.08); border-top: 3px solid rgba(255,255,255,.15); }
.hero { padding-bottom: 28px; }

.profile-chip { display: inline-flex; align-items: center; gap: 6px; }
.profile-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--pc); flex: none; }
.chip.small.profile-chip.on { background: var(--pc); color: #fff; }
.chip.small.profile-chip.on i { background: #fff; }
.today-chip { border: 1px dashed var(--teal-600); }
.profile-name { color: var(--text); background: color-mix(in srgb, var(--pc) 25%, transparent); padding: 1px 8px; border-radius: 999px; font-weight: 600; }
.swatch { width: 28px; height: 28px; border-radius: 9px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.profile-row .swatch { width: 36px; height: 36px; border-radius: 11px; }
.profile-title { display: flex; align-items: center; gap: 10px; }
.back-link { margin: -4px 0 6px -10px; padding-left: 4px; }
.week-list { list-style: none; margin: 0; padding: 0; }
.week-list li { padding: 8px 0; }
.week-list li + li { border-top: 1px solid var(--line); }
.week-list b { display: block; font-size: 14px; margin-bottom: 4px; }
.week-chips { margin: 0 -20px; padding: 2px 20px 2px; }

/* ============ day chips: white cards ============ */
.strip { scroll-behavior: auto; }
.daychip { background: var(--surface); color: var(--text); border-top: 4px solid var(--c); box-shadow: 0 2px 8px rgba(12, 44, 57, .18); }
.daychip .wd { color: var(--muted); opacity: 1; }
.daychip small { color: var(--muted); opacity: 1; }
.daychip .dc-bar { background: var(--line); }
.daychip.empty { background: var(--surface); }
.daychip.empty b { color: var(--muted); opacity: 1; }
.daychip.empty .wd { opacity: 1; }
.daychip.future { background: var(--surface); opacity: .5; border: 0; border-top: 4px solid var(--c); box-shadow: none; }
.daychip.today .wd { color: var(--orange-strong); }
.daychip.sel { outline: 3px solid #fff; outline-offset: 2px; }
/* on target: stays white, framed and lit in its colour, with the check */
.daychip.hit { background: var(--surface); border-top-color: var(--c); box-shadow: inset 0 0 0 2px var(--c), 0 4px 16px var(--c); }
.daychip.hit b { color: var(--text); }
.daychip.hit .dc-bar { background: var(--line); }
.daychip.hit .dc-bar span { background: var(--c); }
.daychip.hit small { color: var(--text); font-weight: 600; }
.daychip.skel { background: rgba(255,255,255,.5); border-top-color: rgba(255,255,255,.7); }
.split { cursor: ew-resize; }

/* ============ selected day card: tinted, lifted — tapping it opens the day's target ============ */
.daychip.sel { outline: none; background: color-mix(in srgb, var(--c) 24%, #fff); box-shadow: 0 0 0 3px #fff, 0 8px 20px rgba(12, 44, 57, .35); transform: translateY(-3px); }
.daychip.sel small { color: var(--text); font-weight: 600; }
.daychip.sel.hit { box-shadow: 0 0 0 3px #fff, inset 0 0 0 2px var(--c), 0 8px 22px var(--c); }
.daychip.sel::after { content: ""; position: absolute; bottom: -9px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #fff; }
.target-title { display: flex; align-items: center; gap: 10px; }
.target-title .swatch { width: 22px; height: 22px; border-radius: 7px; }
.sheet .presets { margin: 0 0 14px; }
.auto-height { overflow: hidden; transition: height .32s cubic-bezier(.4, 0, .2, 1); }
.saved-note { display: inline-flex; align-items: center; gap: 3px; margin-left: 10px; font-size: 12px; font-weight: 600; color: var(--ok); animation: saved 1.8s ease both; }
.saved-note svg { width: 14px; height: 14px; stroke-width: 3; }
@keyframes saved { 0% { opacity: 0; transform: translateX(-4px); } 12% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }
/* week rows wrap their chips instead of scrolling sideways (a sideways scroller inside
   the height animator got scrolled to the tapped chip, clipping the weekday labels) */
.week-chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0; }
.auto-height { overflow: hidden; overflow: clip; }
/* compact week: short weekday on the left, chips beside it */
.week-list li { display: grid; grid-template-columns: 48px 1fr; align-items: start; gap: 8px; padding: 6px 0; }
.week-list b { margin: 8px 0 0; font-size: 14px; position: relative; }
.week-list .saved-note { position: absolute; left: 0; top: 18px; margin: 0; font-size: 11px; }
.week-chips .chip.small { padding: 5px 10px; font-size: 13px; }
.week-chips { gap: 6px; }

/* ============ dietitian: customer picker + impersonation banner ============ */
.avatar.small { width: 36px; height: 36px; font-size: 13px; }
.customer-row .inactive { font-style: normal; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--bg); padding: 1px 6px; border-radius: 999px; margin-left: 4px; }
.spinner.small { width: 18px; height: 18px; border-width: 2px; }
.impersonation { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 90px); z-index: 60; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); padding: 6px 6px 6px 12px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 13px; box-shadow: 0 6px 18px rgba(0,0,0,.25); white-space: nowrap; }
.impersonation.low { bottom: calc(var(--safe-b) + 16px); }
.impersonation svg { width: 16px; height: 16px; flex: none; }
.impersonation span { overflow: hidden; text-overflow: ellipsis; }
.impersonation button { background: #fff; color: var(--orange-strong); font-weight: 600; font-size: 13px; padding: 5px 12px; border-radius: 999px; flex: none; }
.impersonation ~ .toast { bottom: calc(var(--safe-b) + 136px); }
/* weekly plan: a saved row gets a soft ripple sweeping across it (no text) */
.week-list li { position: relative; overflow: hidden; }
.row-ripple { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--teal-600) 16%, transparent) 45%, color-mix(in srgb, var(--teal-600) 16%, transparent) 55%, transparent 100%); transform: translateX(-100%); animation: row-ripple .8s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes row-ripple { to { transform: translateX(100%); } }

/* ============ meal actions ============ */
.more-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); flex: none; }
.more-btn:active { background: var(--teal-50); }
.more-btn svg { width: 22px; height: 22px; }
.entries li.note { display: flex; align-items: center; gap: 10px; font-style: normal; }
.entries li.note svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.entries li.note span { font-style: italic; }
.day-action { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px auto 0; padding: 10px 16px; color: var(--muted); font-size: 14px; font-weight: 600; border-radius: 999px; }
.day-action:active { background: rgba(0,0,0,.05); }
.day-action svg { width: 16px; height: 16px; }
.locked { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.locked svg { width: 18px; height: 18px; flex: none; }
.note-input { height: auto; padding: 12px 14px; resize: none; font-size: 16px; line-height: 1.4; }
.btn.danger-fill { background: var(--danger); color: #fff; }

/* ============ exercise: hero button, pledges, day-card flame ============ */
.ring-stat.burn { color: #fff; font: inherit; text-align: center; padding: 6px 4px; border-radius: 16px; }
.ring-stat.burn:active { background: rgba(255,255,255,.1); }
.ring-stat.burn span { display: inline-flex; align-items: center; gap: 5px; }
.ring-stat.burn span svg { width: 16px; height: 16px; color: var(--fat-d); }
.ring-stat.burn small { display: block; font-size: 13px; color: rgba(255,255,255,.75); }
.ring-stat.burn.met span svg, .ring-stat.burn.met b { color: #ffd08a; }
/* the last two weeks' burn at the right of the Motion card's header (js/spark.js): a point for each day with
   exercise, placed by its date (gaps are days without), the tallest reaching the top of the header row and a
   baseline along its bottom. 60px is the header's content height (88px less its 14px padding above and below),
   taller than the icon, so the chips and the add button below move down with it. */
.exercise-card .meal-head { min-height: 88px; }
.exercise-card .burn-spark { --mt-c: var(--orange); flex: none; width: 132px; min-width: 0; max-width: none; height: 60px; }
.exercise-card .burn-spark .mt-wash-top { stop-opacity: .38; }
.burn-spark .bs-base { stroke: var(--muted); opacity: .55; stroke-width: 1; }
.burn-spark .bs-dot { fill: var(--mt-c); stroke: var(--surface); stroke-width: 1.5; }
.burn-spark .bs-hit { fill: transparent; }
.burn-spark .bs-link { cursor: pointer; outline: none; }
.burn-spark .bs-link circle:not(.bs-hit) { transition: transform .12s; transform-box: fill-box; transform-origin: center; }
.burn-spark .bs-link:hover circle:not(.bs-hit), .burn-spark .bs-link:focus-visible circle:not(.bs-hit) { transform: scale(1.6); }
.title-icon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: #fff3e2; color: var(--orange-strong); }
.title-icon svg { width: 20px; height: 20px; }

.pledge-chip { display: inline-flex; align-items: center; gap: 2px; color: var(--orange-strong); }
.pledge-chip svg { width: 15px; height: 15px; }
.chip.small.pledge-chip.on { background: var(--orange); color: #fff; }
.pledge-picker { margin: 8px 0 4px; padding: 10px 12px; border-radius: 14px; background: #fff7ec; }
.pledge-picker .field-label { margin: 0 0 8px; }
.pledge-picker .quick-chips { justify-content: flex-start; }
.pledge-picker .quick-chips button { background: #fff; }
.pledge-picker .quick-chips button.on { background: var(--orange); color: #fff; }
.pledge-custom { width: 84px; height: 36px; border-radius: 999px; padding: 0 12px; font-size: 14px; }
.pledge-picker .btn.small { margin-top: 6px; color: var(--danger); padding-left: 4px; }

.daychip .dc-flame { position: absolute; bottom: 6px; right: 6px; width: 14px; height: 14px; color: #c7cfd4; display: grid; place-items: center; }
.daychip .dc-flame svg { width: 13px; height: 13px; }
.daychip .dc-flame.met { color: var(--orange); }
.daychip.future .dc-flame { color: var(--orange); opacity: .7; }
/* side stats may never push the gauge row wider than the screen */
.gauge-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.gauge-row .ring-stat { min-width: 0; }
.ring-stat.burn span { flex-direction: column; gap: 2px; }
.ring-stat.burn span svg { width: 18px; height: 18px; }
.burn-total { margin: 4px 0 8px; }
.burn-total b { font-size: 36px; font-weight: 600; }
.burn-total span { color: var(--muted); }
.track.big .fill.met { background: var(--orange); }
.burn-list .burn-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; }
.burn-row > svg { width: 18px; height: 18px; color: var(--orange-strong); }
.burn-row span { flex: 1; font-weight: 600; }
.burn-row .icon-btn { color: var(--muted); width: 34px; height: 34px; }
.burn-row .icon-btn svg { width: 18px; height: 18px; }

/* ============ exercise sessions as chips ============ */
.session-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.session-chips.in-card { padding: 0 14px 14px 16px; margin: 0; }
.session-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 8px 7px 11px; border-radius: 999px; background: #fff3e2; color: var(--text); font-size: 14px; font: inherit; font-size: 14px; }
.session-chip > svg { width: 15px; height: 15px; color: var(--orange-strong); flex: none; }
.session-chip b { font-weight: 600; }
.session-chip button { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.session-chip button svg { width: 14px; height: 14px; }
/* a session registered: the chip's label opens it to change (its ✕ removes it) */
.session-chip .session-open { width: auto; height: auto; border-radius: 0; display: inline-flex; align-items: center; gap: 6px; color: inherit; font: inherit; text-align: left; }
.session-chip .session-open > svg { width: 15px; height: 15px; color: var(--orange-strong); flex: none; }
.session-chip:has(.session-open) { gap: 2px; }
.session-chip.add { background: var(--orange); color: #fff; padding: 7px 12px; font-weight: 600; }
.session-chip.add > svg { color: #fff; }
.type-recent { margin-bottom: 8px; }
.type-list { max-height: 46vh; overflow-y: auto; }
.estimate { text-align: center; font-size: 22px; font-weight: 600; margin: 12px 0 0; color: var(--orange-strong); }
/* side stats: icons instead of words */
.gauge-row .ring-stat .stat-icon { display: grid; place-items: center; margin: 0 auto 4px; color: #fff; }
.gauge-row .ring-stat .stat-icon svg { width: 32px; height: 32px; }
.ring-stat.burn .stat-icon { color: var(--fat-d); }
.ring-stat.burn.met .stat-icon { color: #ffd08a; filter: drop-shadow(0 0 8px rgba(243, 152, 20, .7)); }
/* pledge flame: a corner badge (top-left), mirroring the hit check */
.daychip .dc-flame { top: -6px; left: -4px; bottom: auto; right: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.daychip .dc-flame svg { width: 16px; height: 16px; }

/* ============ Dagbog: note + the day's goal progress ============ */
.diary { padding-bottom: 12px; }
.diary .meal-icon { background: var(--teal-50); color: var(--accent); }
.goal-banner { margin: 0 16px 10px; padding: 12px 14px; border-radius: 14px; background: var(--teal-50); }
.goal-banner-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.goal-banner-head b { font-size: 15px; }
.goal-banner-head span { font-size: 13px; color: var(--muted); }
.goal-banner .track.big { background: #d6e5ec; margin: 8px 0 6px; }
.goal-banner .track.big .fill { background: var(--teal-600); }
.goal-banner .track.big .fill.done { background: var(--ok); }
.goal-banner small { color: var(--muted); font-size: 12px; }
.diary-items { list-style: none; margin: 0 16px 8px; padding: 0; }
.diary-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; }
.diary-item + .diary-item { border-top: 1px solid var(--line); }
.diary-item > svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.diary-item.achievement > svg { color: var(--orange-strong); }
.diary-note { display: block; width: calc(100% - 32px); margin: 4px 16px 0; padding: 12px 14px; border-radius: 14px; background: var(--bg); text-align: left; font: inherit; color: var(--text); }
.diary-note p { white-space: pre-line; font-size: 15px; line-height: 1.5; margin: 0; }
.diary-note.empty span { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 15px; }
.diary-note.empty svg { width: 16px; height: 16px; }
.diary-comments { list-style: none; margin: 10px 16px 0; padding: 0; }
.diary-comments li { border-left: 3px solid var(--sky); padding: 4px 0 4px 10px; margin-bottom: 6px; }
.diary-comments b { font-size: 13px; color: var(--accent); }
.diary-comments p { white-space: pre-line; font-size: 14px; margin: 2px 0 0; }
.diary-input { min-height: 140px; }
/* the journal's PDF (diary.js JournalSheet): a button that is the file picker, then the chosen file with ✕ */
.journal-attach { position: relative; margin-top: 10px; cursor: pointer; }
.journal-attach input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.journal-file { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 6px 8px 10px; border-radius: 14px; background: var(--bg); }
.journal-file-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fbecea; color: var(--danger); flex: none; }
.journal-file-ico svg { width: 18px; height: 18px; }
.journal-file .txt { flex: 1; min-width: 0; }
.journal-file .txt b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.journal-file .txt small { color: var(--muted); font-size: 12px; }
.journal-file .icon-btn { color: var(--muted); }
.session-chip > span { text-align: left; }

/* ---------- Grupper ---------- */
.tabbar a span { white-space: nowrap; }
.group-screen .content { display: flex; flex-direction: column; gap: 12px; }
.composer { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px; color: var(--muted); font-size: 15px; text-align: left; }
.composer svg { width: 20px; height: 20px; color: var(--accent); }
.post { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.post-head { display: flex; align-items: center; gap: 10px; }
.post-head b { display: block; font-weight: 600; font-size: 15px; }
.post-head small { color: var(--muted); font-size: 12px; }
.post-title { font-size: 16px; font-weight: 600; margin: 0; }
.post-text { margin: 0; font-size: 15px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.post-picture { position: relative; width: calc(100% + 32px); margin: 0 -16px; aspect-ratio: 4 / 5; max-height: 70vh; overflow: hidden; background: var(--teal-50); }
/* as the recipe cards: the whole photo, a blurred copy filling the frame around it */
.post-picture img { position: relative; width: 100%; height: 100%; object-fit: contain; display: block; }
.post-picture img.fill { position: absolute; inset: 0; object-fit: cover; filter: blur(18px) saturate(1.1); transform: scale(1.15); opacity: .85; }
.post-link { color: var(--accent); font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
/* a journal entry's PDF (/m/api/journal-files/…): a file chip with a PDF badge */
.post-link[href^="/m/api/journal-files/"] { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin-top: 6px; padding: 8px 12px 8px 8px; border-radius: 12px; background: var(--bg); text-decoration: none; }
.post-link[href^="/m/api/journal-files/"]::before { content: "PDF"; flex: none; padding: 3px 6px; border-radius: 6px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.post-actions { display: flex; gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.post-actions button { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; color: #4d5f68; font-size: 14px; font-weight: 600; }
.post-actions button:active { background: var(--teal-50); }
.post-actions svg { width: 20px; height: 20px; }
.post-like.on { color: #c2474b; }
.post-like.on svg { animation: like-pop .3s ease; }
@keyframes like-pop { 50% { transform: scale(1.25); } }
.post-more-comments { align-self: flex-start; color: var(--muted); font-size: 13px; font-weight: 600; padding: 0; }
.post-comments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.post-comments li { background: var(--teal-50); border-radius: 14px; padding: 8px 12px; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-line; }
.post-comments li b { font-weight: 600; }
.post-comments li small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.comment-box { display: flex; align-items: center; gap: 6px; }
.comment-box .input { flex: 1; min-width: 0; height: 40px; border-radius: 20px; padding: 0 14px; font-size: 16px; }
.comment-box button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); flex: none; }
.comment-box button:disabled { color: var(--pale); }
.comment-box button svg { width: 20px; height: 20px; }
/* (the Dagbog's day cards: the heart and the comments' count in front of the field, as on .post-actions) */
.comment-box.with-actions { gap: 2px; }
.comment-box.with-actions .input { margin-left: 4px; }
.comment-box .post-like, .comment-box .post-comments-btn { width: auto; min-width: 40px; display: flex; gap: 5px; padding: 0 8px; border-radius: 999px; color: #4d5f68; font-size: 14px; font-weight: 600; }
.comment-box .post-like.on { color: #c2474b; }
.comment-box .post-like:active, .comment-box .post-comments-btn:active { background: var(--teal-50); }
.tab-ico { position: relative; display: grid; place-items: center; }
.badge { position: absolute; top: -5px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--orange); color: #fff; font-size: 11px; font-weight: 700; font-style: normal; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.page-title.with-action { display: flex; align-items: center; justify-content: space-between; }
.bell { position: relative; }
.bell .badge { top: 0; left: 22px; }
.count-pill { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--orange); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; flex: none; }
.post.news { box-shadow: var(--shadow), inset 3px 0 0 var(--orange); }
.new-tag { color: var(--orange); font-weight: 700; }
.post.flash { animation: post-flash 1.6s ease; }
@keyframes post-flash { 0%, 40% { box-shadow: var(--shadow), 0 0 0 3px rgba(243, 152, 20, .55); } }
.post-head .who { flex: 1; min-width: 0; }
.post-menu { color: #9aa8af; width: 36px; height: 36px; }
.post-menu svg { width: 18px; height: 18px; }
.post-picture { cursor: zoom-in; }
.comment-del { color: var(--muted); font-size: 11px; font-weight: 600; padding: 0; text-decoration: underline; }
.comment-del.confirm { color: #c2474b; text-decoration: none; }
.photo-zoom { position: fixed; inset: 0; z-index: 300; background: rgba(8, 20, 26, .94); display: grid; place-items: center; padding: 16px; animation: screen-in .18s ease; }
.photo-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.composer .composer-photo { margin-left: auto; color: var(--muted); }
.compose-add-photo { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.compose-add-photo svg { width: 20px; height: 20px; }
.compose-image { position: relative; margin-top: 10px; }
.compose-image img { width: 100%; max-height: 260px; object-fit: cover; border-radius: 14px; display: block; }
.compose-image .icon-btn { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.55); color: #fff; }
.notif-list li { align-items: flex-start; }
.notif-list li.news { background: #fff7eb; }
.notif-list .ico.like { color: #c2474b; background: #fbecec; }
.notif-list .txt p { margin: 0; font-size: 14px; line-height: 1.4; }
.notif-list .txt p q { color: var(--muted); }
.notif-list .txt small { white-space: normal; margin-top: 2px; }

/* group covers (overview cards + the group page's hero) */
.group-cover { position: relative; overflow: hidden; aspect-ratio: 2 / 1; background: linear-gradient(150deg, var(--teal-600), var(--teal-900)); }
.group-cover img { position: absolute; display: block; }
.group-cover .gc-fill { inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(22px) saturate(1.2); transform: scale(1.25); opacity: .9; }
.group-cover .gc-background { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.group-cover .gc-banner { left: 0; right: 0; top: 50%; width: 100%; height: auto; transform: translateY(-50%); }
.group-cover .gc-thumb { width: 64px; height: 64px; left: 50%; top: 40%; transform: translate(-50%, -50%); border-radius: 18px; box-shadow: 0 6px 18px rgba(0,0,0,.25); object-fit: cover; }
.group-cover .gc-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(8, 28, 36, .6)); }
.group-cover .gc-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px; color: #fff; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.group-card .group-cover { border-radius: var(--radius) var(--radius) 0 0; }
.group-card .group-cover.has-banner .gc-shade, .group-card .group-cover.has-thumb .gc-shade { background: none; }
.group-card .count-pill { height: 26px; padding: 0 10px; border-radius: 13px; }
.group-card { display: block; color: var(--text); overflow: hidden; }
.group-card:active { transform: scale(.99); }
.group-card-txt { display: flex; align-items: center; gap: 10px; padding: 12px 12px 14px 16px; }
.group-card-txt div { flex: 1; min-width: 0; }
.group-card-txt b { display: block; font-size: 16px; font-weight: 600; }
.group-card-txt small { display: block; color: var(--muted); font-size: 13px; }
.group-card-txt > svg { width: 18px; height: 18px; color: #b9c4ca; flex: none; }
.group-cover.hero { aspect-ratio: 16 / 9; max-height: 46vh; }
.group-cover.hero.has-background { aspect-ratio: 4 / 3; }
.group-cover.hero .gc-text { padding: 16px 20px 18px; }
.group-cover.hero .gc-text h1 { font-size: 26px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.group-cover.hero .gc-text small { font-size: 14px; opacity: .9; }
.group-cover.hero.has-thumb .gc-thumb { top: 38%; width: 76px; height: 76px; }
.group-screen { position: relative; }
.cover-back { position: absolute; top: calc(var(--safe-t) + 10px); left: 10px; z-index: 5; background: rgba(255,255,255,.92); color: var(--ink); box-shadow: var(--shadow); }
/* no background photo: the banner/logo and the name stack instead of overlapping, under room for the back button */
.group-cover.hero.has-banner, .group-cover.hero.has-thumb { aspect-ratio: auto; max-height: none; display: flex; flex-direction: column; padding-top: calc(var(--safe-t) + 62px); }
.group-cover.hero.has-banner .gc-banner { position: relative; top: auto; transform: none; }
.group-cover.hero.has-thumb .gc-thumb { position: relative; left: auto; top: auto; transform: none; margin: 0 20px; }
.group-cover.hero.has-banner .gc-text, .group-cover.hero.has-thumb .gc-text { position: relative; }
.group-cover.hero.has-banner .gc-shade, .group-cover.hero.has-thumb .gc-shade { background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(8, 28, 36, .45)); }

/* goal achievements (desktop's ach-<type>.jpg colour bursts) */
.achievement-card { position: relative; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, #f39814, #b04a4d 45%, #4f86a8) center / cover no-repeat; color: #fff; margin: 10px 0; }
.achievement-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10, 30, 38, .18), rgba(10, 30, 38, .62)); }
.ach-body { position: relative; padding: 16px 16px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.ach-badge { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.95); color: var(--orange); display: grid; place-items: center; margin-bottom: 4px; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.ach-badge svg { width: 19px; height: 19px; }
.achievement-card h3 { font-size: 19px; font-weight: 700; margin: 0; line-height: 1.2; }
.achievement-card p { margin: 0; font-size: 14px; opacity: .95; }
.ach-track { align-self: stretch; height: 8px; border-radius: 4px; background: rgba(255,255,255,.3); overflow: hidden; margin-top: 8px; }
.ach-track div { height: 100%; border-radius: 4px; background: #fff; }
.achievement-card small { font-size: 12px; opacity: .9; }
.ach-share { margin-top: 10px; display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.95); color: var(--ink); font-size: 13px; font-weight: 700; text-shadow: none; }
.ach-share svg { width: 16px; height: 16px; }
.post .achievement-card { margin: 0; }
.share-text { margin-top: 4px; }
.link-btn { color: var(--accent); font-weight: 600; padding: 0; text-decoration: underline; }

/* ============ palette: the day view's hero takes the login page's deep teal (it had drifted lighter
   towards the bottom), with soft glows and glassy highlights in the manner of behandler-booking.dk ============ */
.hero {
    background:
        radial-gradient(circle 190px at 50% 164px, rgba(161, 202, 226, .26) 0%, transparent 70%),
        radial-gradient(60% 40% at 6% 62%, rgba(142, 166, 76, .09) 0%, transparent 70%),
        linear-gradient(180deg, var(--teal-700) 0%, var(--teal-800) 30%, var(--teal-900) 54%, var(--teal-800) 64%, #3f7f9c 75%, #b3d0de 87%, var(--bg) 96%);
}
.login {
    background:
        radial-gradient(70% 45% at 88% 4%, rgba(161, 202, 226, .26) 0%, transparent 70%),
        radial-gradient(60% 40% at 6% 70%, rgba(142, 166, 76, .14) 0%, transparent 70%),
        linear-gradient(170deg, var(--teal-700), var(--teal-950));
}
.hero .date-pill, .hero-top > .icon-btn { background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.07)); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
/* the feed rises slightly over the cover; the cover's text makes room for it */
.group-screen .content.flat { margin-top: -12px; position: relative; z-index: 1; }
.group-cover.hero .gc-text { padding-bottom: 30px; }

/* diary feed: a card per day */
.diary-day-head { color: var(--text); }
.diary-day-head > svg { width: 18px; height: 18px; color: #b9c4ca; flex: none; }
.day-badge { flex-direction: column; display: flex; align-items: center; justify-content: center; line-height: 1; background: linear-gradient(150deg, var(--teal-600), var(--teal-900)); }
.day-badge b { font-size: 15px; font-weight: 700; }
.day-badge i { font-style: normal; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; opacity: .85; margin-top: 1px; }
.diary-regs { display: flex; flex-wrap: wrap; gap: 6px; }
.reg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--teal-50); color: var(--ink); font-size: 13px; }
.reg-chip svg { width: 15px; height: 15px; color: var(--accent); }
.reg-chip.goal svg { color: var(--orange); }
.diary .meal-head .add-btn svg { width: 21px; height: 21px; }
/* the day chips' side marks (what was tracked that day) */
.daychip .dc-marks { position: absolute; top: 9px; display: flex; flex-direction: column; gap: 3px; color: var(--accent); opacity: .7; }
.daychip .dc-marks.left { left: 5px; }
.daychip .dc-marks.right { right: 5px; }
.daychip .dc-marks svg { width: 10px; height: 10px; stroke-width: 2.4; color: inherit; } /* not the generic .empty svg (pale) — a note-only day has no food and so is .empty */

/* avatars with photos */
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.tiny { width: 28px; height: 28px; font-size: 11px; }
.avatar.large { width: 84px; height: 84px; font-size: 28px; }
.avatar-btn { padding: 0; border-radius: 50%; }
.post-comments li { background: none; padding: 0; display: flex; align-items: flex-start; gap: 8px; }
.post-comments li .avatar { margin-top: 2px; }
.post-comments .bubble { flex: 1; min-width: 0; background: var(--teal-50); border-radius: 14px; padding: 8px 12px; }
.post-comments .bubble small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
/* personal information */
.photo-row { display: flex; align-items: center; gap: 16px; margin: 6px 0 16px; }
.photo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.photo-actions .btn svg { width: 17px; height: 17px; margin-right: 6px; }
.field { display: block; margin-bottom: 12px; }
.field .field-label { margin: 0 0 6px; }
.day-badge { border-radius: 25%; } /* a date, not a person */
/* diary feed: filters, the day's note in its card, journal entries */
.feed-filter { display: flex; gap: 8px; padding: 0 16px; margin-top: 4px; }
.day-note { display: flex; align-items: flex-start; gap: 8px; background: #fbf7ee; border-radius: 14px; padding: 10px 6px 10px 14px; }
.day-note p { flex: 1; margin: 0; font-size: 15px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.day-note .note-edit { width: 34px; height: 34px; color: var(--accent); flex: none; margin-top: -4px; }
.day-note .note-edit svg { width: 18px; height: 18px; }
.day-note.empty { width: 100%; align-items: center; gap: 10px; color: var(--muted); font-size: 15px; text-align: left; background: var(--teal-50); padding: 12px 14px; }
.day-note.empty svg { width: 18px; height: 18px; color: var(--accent); }
.journal-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #eef1f8; color: #3c4f86; font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.diary-note.readonly { cursor: default; }
.diary-note.readonly small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.post-picture .play-badge { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(0,0,0,.55); }
.post-picture .play-badge::after { content: ''; position: absolute; left: 26px; top: 20px; border-left: 18px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.profile-row .for-days { font-style: normal; font-weight: 500; font-size: 13px; color: var(--muted); margin-left: 4px; }
/* journal entries: fejlindført and corrections stay visible */
.journal-void { background: #fbecea; color: #9b2c2c; border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.journal-wrap.voided .post-text, .journal-wrap.voided .intake-answers { opacity: .55; text-decoration: line-through; }
.intake-answers .post-title { font-size: 15px; }
.intake-answers dl { margin: 6px 0 0; display: grid; gap: 8px; }
.intake-answers dt { font-size: 12px; color: var(--muted); line-height: 1.3; }
.intake-answers dd { margin: 1px 0 0; font-size: 14px; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; }
.intake-answers .btn { margin-top: 6px; padding-left: 0; padding-right: 0; }
.journal-edits { font-size: 13px; color: var(--muted); }
.journal-edits summary { cursor: pointer; font-weight: 600; }
.journal-version { margin-top: 8px; padding: 8px 12px; border-left: 3px solid var(--line); background: var(--teal-50); border-radius: 0 10px 10px 0; }
.journal-version small { display: block; font-size: 11px; margin-bottom: 2px; }
.journal-version p { margin: 0; color: var(--text); white-space: pre-line; }

/* gestures: pull to refresh, no rubber-band fighting it */
html, body { overscroll-behavior-y: none; }
.ptr { position: fixed; top: calc(var(--safe-t) + 8px); left: 50%; margin-left: -20px; z-index: 90; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-lg); display: grid; place-items: center; pointer-events: none; transition: transform .2s ease, opacity .2s ease; }
.ptr-spin { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--teal-100); border-top-color: var(--teal-700); }
.ptr.busy .ptr-spin { animation: spin .7s linear infinite; }
.day-slide-next { animation: day-in-next .22s ease; }
.day-slide-prev { animation: day-in-prev .22s ease; }
@keyframes day-in-next { from { transform: translateX(28px); opacity: .4; } }
@keyframes day-in-prev { from { transform: translateX(-28px); opacity: .4; } }
.override-row { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #fff7eb; font-size: 14px; line-height: 1.4; }
.override-row input { margin-top: 3px; width: 18px; height: 18px; flex: none; }

/* Status: calories as stacked nutrient bars; tap a day for its details */
.chart.bars .seg-carb { fill: var(--carb); }
.chart.bars .seg-prot { fill: var(--prot); }
.chart.bars .seg-fat { fill: var(--fat); }
.chart.bars .target { stroke: var(--teal-900); stroke-width: 2; stroke-linecap: round; opacity: .55; }
.chart.bars .hit { fill: transparent; cursor: pointer; }
.chart.bars .day-bar.picked .hit { fill: var(--teal-50); }
.chart.bars .day-bar:active .stack { opacity: .75; }
.bar-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.bar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bar-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.bar-legend i.d-carb { background: var(--carb); }
.bar-legend i.d-prot { background: var(--prot); }
.bar-legend i.d-fat { background: var(--fat); }
/* the day's burn beside what was eaten, in the flame's orange */
.chart.bars .burn-bar { fill: var(--orange); pointer-events: none; }
.chart.bars .burn-join { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.chart.bars .burn-pt { fill: var(--orange); stroke: var(--surface); stroke-width: 1.5; pointer-events: none; }
.bar-legend i.d-burn { background: var(--orange); }
.bar-legend i.burn-key { height: 3px; width: 14px; border-radius: 2px; background: var(--orange); }
.chart-tip .tip-burn { color: var(--orange-strong); font-weight: 600; }
.bar-legend i.target { height: 2px; width: 14px; border-radius: 1px; background: var(--teal-900); opacity: .55; }
.day-detail-kcal { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 10px; }
.day-detail-kcal b { font-size: 34px; font-weight: 600; }
.day-detail-kcal span { color: var(--muted); }
.day-detail td.num b { font-size: 16px; }
.day-detail-line { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; margin: 4px 0 0; }
.day-detail-line svg { width: 18px; height: 18px; color: var(--orange); }
.gauge .inner-track { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 4; }
/* a day whose dagtype just changed: a pop and a glow in its new colour */
.daychip.retarget { animation: chip-retarget .85s cubic-bezier(.2,.8,.2,1); z-index: 1; }
.daychip.retarget small { animation: chip-name-in .5s ease .1s both; }
@keyframes chip-retarget {
  0% { transform: scale(1); box-shadow: 0 0 0 0 var(--c); }
  30% { transform: scale(1.12); box-shadow: 0 0 0 5px var(--c); }
  100% { transform: scale(1); box-shadow: 0 0 0 16px transparent; }
}
@keyframes chip-name-in { from { opacity: 0; transform: translateY(4px); } }
/* saved as you go: the target's swatch ticks for a moment */
.swatch { position: relative; display: inline-grid; place-items: center; }
.swatch.saved { animation: swatch-saved .5s cubic-bezier(.2,1.6,.4,1); }
.swatch.saved svg { width: 70%; height: 70%; color: #fff; stroke-width: 3.5; }
@keyframes swatch-saved { 40% { transform: scale(1.25); } }

/* the date button's month calendar: registrations as small marks, days on target highlighted */
button.date-pill { border: 0; color: inherit; font: inherit; font-weight: 600; font-size: 15px; letter-spacing: .06em; }
/* the month and its two arrows as one centred group (the close button sits clear of it, in the corner) */
.cal-head { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 8px; }
.cal-head h2 { margin: 0; padding: 0; font-size: 19px; min-width: 8.5em; text-align: center; }
.cal-head .icon-btn { color: var(--accent); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; touch-action: pan-y; }
.cal-wd { text-align: center; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding-bottom: 4px; }
.cal-day { aspect-ratio: 1 / 1.05; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: var(--bg); color: var(--text); padding: 0; }
.cal-day.blank { background: none; }
/* at a desk: a narrower sheet and shorter day rows, so the month fits without a scrollbar */
@media (min-width: 700px) and (hover: hover) and (pointer: fine) {
  .sheet:has(.cal) { max-width: 440px; }
  .cal { gap: 3px; }
  .cal-day { aspect-ratio: auto; height: 44px; gap: 2px; }
  .cal .cal-day b { font-size: 15px; }
}
.cal-day b { font-size: 16px; font-weight: 600; }
.cal-day.future { background: none; color: var(--muted); }
.cal-day.today b { color: var(--orange-strong); }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--orange); }
.cal-day.sel { background: var(--teal-700); color: #fff; }
.cal-day.hit { background: #e8f4dc; }
.cal-day.hit.sel { background: var(--teal-700); }
.cal-marks { display: flex; gap: 2px; height: 5px; }
.cal-marks i, .cal-legend i { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
.m-food { background: var(--carb); }
.m-note { background: var(--orange); }
.m-measure { background: var(--prot); }
.m-exercise { background: var(--fat); }
.m-goal { background: var(--teal-900); }
.cal-day.sel .m-goal { background: #fff; }
.cal-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cal-legend .hit-sample { width: 12px; height: 12px; border-radius: 4px; background: #e8f4dc; display: inline-block; }
.goal-chip { display: inline-flex; align-items: center; gap: 2px; border: 0; font: inherit; cursor: pointer; } .goal-chip svg { width: 14px; height: 14px; margin-right: -4px; }

.list li .ico.danger { background: #fbecea; color: var(--danger); }
.rcard .fav-badge { color: var(--orange) !important; } /* the favourite heart stays orange in both modes */
.theme-seg { margin: 0; }
.lang-select { width: auto; max-width: 46%; flex: none; margin: 0; padding-top: 8px; padding-bottom: 8px; }

/* ============ dark mode: follows the phone, unless Profil → Udseende says otherwise ============ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b1c24;
    --surface: #122a35;
    --text: #e5eef2;
    --muted: #93a8b2;
    --line: #1f3b48;
    --teal-50: #163341;
    --teal-100: #1d4152;
    --pale: #2d4b59;
    --accent: #7cc3de;
    --ink: #eef5f8;
    --glass: rgba(18, 42, 53, .9);
    --danger: #ff8a7a;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, .55);
  }
  :root:not([data-theme="light"]) .meal-icon.exercise, :root:not([data-theme="light"]) .delta.up, :root:not([data-theme="light"]) .title-icon, :root:not([data-theme="light"]) .session-chip { background: rgba(243, 152, 20, .16); }
  :root:not([data-theme="light"]) .seg { background: #0e222b; }
  :root:not([data-theme="light"]) .quick-add.done { background: rgba(46, 139, 87, .22); color: #7fd3a3; }
  :root:not([data-theme="light"]) .m-prot .track, :root:not([data-theme="light"]) .m-fat .track { background: rgba(255, 255, 255, .08); }
  :root:not([data-theme="light"]) .searchbox.pill { background: var(--surface); }
  :root:not([data-theme="light"]) .tabbar-pill { background: rgba(18, 42, 53, .88); box-shadow: 0 8px 30px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .06); }
  :root:not([data-theme="light"]) .tabbar a { color: var(--muted); }
  :root:not([data-theme="light"]) .tabbar a.on { color: var(--accent); background: rgba(124, 195, 222, .12); }
  :root:not([data-theme="light"]) .bar { background: rgba(11, 28, 36, .92); }
  :root:not([data-theme="light"]) .rcard .fav-badge, :root:not([data-theme="light"]) .recipe-hero .icon-btn, :root:not([data-theme="light"]) .cover-back, :root:not([data-theme="light"]) .ach-share { background: var(--glass); color: var(--ink); }
  :root:not([data-theme="light"]) .ach-badge { background: var(--glass); }
  :root:not([data-theme="light"]) button.dist.light.card:active { background: #183846; }
  :root:not([data-theme="light"]) .pledge-picker { background: rgba(243, 152, 20, .1); }
  :root:not([data-theme="light"]) .pledge-picker .quick-chips button { background: var(--surface); }
  :root:not([data-theme="light"]) .daychip .dc-flame { background: var(--teal-100); }
  :root:not([data-theme="light"]) .notif-list li.news { background: rgba(243, 152, 20, .1); }
  :root:not([data-theme="light"]) .notif-list .ico.like { background: rgba(194, 71, 75, .22); }
  :root:not([data-theme="light"]) .day-note { background: rgba(243, 200, 120, .08); }
  :root:not([data-theme="light"]) .journal-tag { background: rgba(140, 160, 230, .18); color: #b9c7f2; }
  :root:not([data-theme="light"]) .journal-void { background: rgba(192, 57, 43, .2); color: #ffb3a8; }
  :root:not([data-theme="light"]) .override-row { background: rgba(243, 152, 20, .12); }
  :root:not([data-theme="light"]) .cal-day.hit, :root:not([data-theme="light"]) .cal-legend .hit-sample { background: rgba(142, 166, 76, .28); }
  :root:not([data-theme="light"]) .ico.danger, :root:not([data-theme="light"]) .list li .ico.danger { background: rgba(192, 57, 43, .2); color: var(--danger); }
  :root:not([data-theme="light"]) .input { color: var(--text); }
  :root:not([data-theme="light"]) .chart.bars .target, :root:not([data-theme="light"]) .bar-legend i.target, :root:not([data-theme="light"]) .m-goal { stroke: var(--ink); background: var(--ink); }
  :root:not([data-theme="light"]) .hero { background: radial-gradient(circle 190px at 50% 164px, rgba(161, 202, 226, .18) 0%, transparent 70%), linear-gradient(180deg, var(--teal-700) 0%, var(--teal-800) 30%, var(--teal-900) 54%, #0e2a36 70%, var(--bg) 92%); }
  :root:not([data-theme="light"]) .skeleton { background: linear-gradient(90deg, #163341 25%, #1d4152 50%, #163341 75%); background-size: 200% 100%; }
  :root:not([data-theme="light"]) .daychip.empty { background: var(--surface); }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b1c24;
    --surface: #122a35;
    --text: #e5eef2;
    --muted: #93a8b2;
    --line: #1f3b48;
    --teal-50: #163341;
    --teal-100: #1d4152;
    --pale: #2d4b59;
    --accent: #7cc3de;
    --ink: #eef5f8;
    --glass: rgba(18, 42, 53, .9);
    --danger: #ff8a7a;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, .55);
}
:root[data-theme="dark"] .meal-icon.exercise, :root[data-theme="dark"] .delta.up, :root[data-theme="dark"] .title-icon, :root[data-theme="dark"] .session-chip { background: rgba(243, 152, 20, .16); }
:root[data-theme="dark"] .seg { background: #0e222b; }
:root[data-theme="dark"] .quick-add.done { background: rgba(46, 139, 87, .22); color: #7fd3a3; }
:root[data-theme="dark"] .m-prot .track, :root[data-theme="dark"] .m-fat .track { background: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .searchbox.pill { background: var(--surface); }
:root[data-theme="dark"] .tabbar-pill { background: rgba(18, 42, 53, .88); box-shadow: 0 8px 30px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .tabbar a { color: var(--muted); }
:root[data-theme="dark"] .tabbar a.on { color: var(--accent); background: rgba(124, 195, 222, .12); }
:root[data-theme="dark"] .bar { background: rgba(11, 28, 36, .92); }
:root[data-theme="dark"] .rcard .fav-badge, :root[data-theme="dark"] .recipe-hero .icon-btn, :root[data-theme="dark"] .cover-back, :root[data-theme="dark"] .ach-share { background: var(--glass); color: var(--ink); }
:root[data-theme="dark"] .ach-badge { background: var(--glass); }
:root[data-theme="dark"] button.dist.light.card:active { background: #183846; }
:root[data-theme="dark"] .pledge-picker { background: rgba(243, 152, 20, .1); }
:root[data-theme="dark"] .pledge-picker .quick-chips button { background: var(--surface); }
:root[data-theme="dark"] .daychip .dc-flame { background: var(--teal-100); }
:root[data-theme="dark"] .notif-list li.news { background: rgba(243, 152, 20, .1); }
:root[data-theme="dark"] .notif-list .ico.like { background: rgba(194, 71, 75, .22); }
:root[data-theme="dark"] .day-note { background: rgba(243, 200, 120, .08); }
:root[data-theme="dark"] .journal-tag { background: rgba(140, 160, 230, .18); color: #b9c7f2; }
:root[data-theme="dark"] .journal-void { background: rgba(192, 57, 43, .2); color: #ffb3a8; }
:root[data-theme="dark"] .override-row { background: rgba(243, 152, 20, .12); }
:root[data-theme="dark"] .cal-day.hit, :root[data-theme="dark"] .cal-legend .hit-sample { background: rgba(142, 166, 76, .28); }
:root[data-theme="dark"] .ico.danger, :root[data-theme="dark"] .list li .ico.danger { background: rgba(192, 57, 43, .2); color: var(--danger); }
:root[data-theme="dark"] .input { color: var(--text); }
:root[data-theme="dark"] .chart.bars .target, :root[data-theme="dark"] .bar-legend i.target, :root[data-theme="dark"] .m-goal { stroke: var(--ink); background: var(--ink); }
:root[data-theme="dark"] .hero { background: radial-gradient(circle 190px at 50% 164px, rgba(161, 202, 226, .18) 0%, transparent 70%), linear-gradient(180deg, var(--teal-700) 0%, var(--teal-800) 30%, var(--teal-900) 54%, #0e2a36 70%, var(--bg) 92%); }
:root[data-theme="dark"] .skeleton { background: linear-gradient(90deg, #163341 25%, #1d4152 50%, #163341 75%); background-size: 200% 100%; }
:root[data-theme="dark"] .daychip.empty { background: var(--surface); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .daychip.sel { background: color-mix(in srgb, var(--c) 30%, var(--surface)); }
  :root:not([data-theme="light"]) .goal-table .d-kcal { background: var(--accent); }
}
:root[data-theme="dark"] .daychip.sel { background: color-mix(in srgb, var(--c) 30%, var(--surface)); }
:root[data-theme="dark"] .goal-table .d-kcal { background: var(--accent); }
/* Status: the goal as a joined line, and the three-week rolling average */
.chart.bars polyline { fill: none; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.chart.bars polyline.target { stroke: var(--ink); stroke-width: 2; opacity: .5; }
.chart.bars, .bar-legend { --avg: #8c63e0; } /* the calories' three-week average: violet, apart from the bars and from the exercise line's orange */
.chart.bars polyline.rolling { stroke: var(--avg); stroke-width: 2.5; }
.chart.bars .target-dot { fill: var(--ink); opacity: .5; }
.chart.bars .rolling-dot { fill: var(--avg); }
.bar-legend i.rolling { height: 3px; width: 14px; border-radius: 2px; background: var(--avg); }
/* the registration sheet's day choice */
.date-chips .date-other { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.date-chips .date-other svg { width: 15px; height: 15px; }
.date-chips .date-other input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.quick-chips .date-other { padding: 8px 14px; border-radius: 999px; background: var(--bg); font-weight: 600; font-size: 14px; }
.quick-chips .date-other.on { background: var(--teal-700); color: #fff; }
/* glass bars: lifted off the card, light seams between the nutrients */
.chart.bars .stack { filter: drop-shadow(0 2px 3px rgba(12, 44, 57, .22)); }
.chart.bars .seam { stroke: rgba(255, 255, 255, .7); stroke-width: 1; }
.chart.bars .gloss { pointer-events: none; }
.gauge .inner { opacity: .7; } /* the ideal split: quieter than what was eaten, still recognisable */
/* Status: one period for the whole page, above the cards */
.period-seg { margin: 0 0 4px; }
.bars-note { font-size: 12px; margin: 6px 0 0; }
.week-days { margin-top: 14px; }
/* the exercise pledge: a thin bar under the burn number, filling as exercise is tracked */
.ring-stat.burn .pledge-bar { display: block; width: 56px; height: 4px; margin: 6px auto 0; border-radius: 2px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.ring-stat.burn .pledge-bar i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--fat-d), var(--orange)); }
.ring-stat.burn.met .pledge-bar i { background: linear-gradient(90deg, #ffd08a, #ffb347); box-shadow: 0 0 8px rgba(255, 179, 71, .7); }
/* exercise just tracked: the flame pulses brighter */
.ring-stat.burn.pulse .stat-icon svg { animation: flame-pulse 1.2s ease; }
@keyframes flame-pulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.28); color: #ffd08a; filter: drop-shadow(0 0 10px rgba(255, 190, 90, .95)); }
  60% { transform: scale(1.08); color: #ffc46e; filter: drop-shadow(0 0 6px rgba(255, 190, 90, .6)); }
  100% { transform: scale(1); }
}
/* a measurement's goal on its card, and the goal path in its chart */
.measure-goal { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; width: 100%; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: var(--teal-50); text-align: left; color: var(--text); }
.measure-goal > svg { grid-row: 1 / span 3; grid-column: 2; width: 18px; height: 18px; color: #b9c4ca; }
.measure-goal .mg-text { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.measure-goal .mg-text svg { width: 16px; height: 16px; color: var(--accent); }
.measure-goal .mg-bar { display: block; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.measure-goal .mg-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.measure-goal small { font-size: 12px; color: var(--muted); }
.chart .goal-path { stroke: var(--orange-strong); stroke-width: 2; stroke-dasharray: 5 5; }
.chart .goal-end { fill: var(--surface); stroke: var(--orange-strong); stroke-width: 2.5; }
.goal-fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
/* the strip scrolls sideways, which clips what sticks out of it: give the selected card's lift and
   shadow room below (and take the room back outside, so nothing else moves) */
.strip { padding-bottom: 30px; margin-bottom: -22px; }
.chart .pt-hit { fill: transparent; cursor: pointer; } .chart .pt-hit:active { fill: rgba(22, 82, 106, .15); }

/* achievements that make themselves seen: lift in, a sweep of light, the star pops with sparkles,
   the bar fills (its width follows the counted-up percentage) */
.ach-progress { align-self: stretch; display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ach-progress .ach-track { flex: 1; margin-top: 0; }
.ach-track div { box-shadow: 0 0 10px rgba(255, 255, 255, .7); }
.ach-pct { font-size: 13px; font-weight: 700; min-width: 3.2em; text-align: right; }
.achievement-card { transform: translateY(8px) scale(.985); opacity: .001; }
.achievement-card.in { animation: ach-in .55s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes ach-in { to { transform: none; opacity: 1; } }
.ach-shine { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 48%, rgba(255, 255, 255, .1) 55%, transparent 70%); transform: translateX(-120%); }
.achievement-card.in .ach-shine { animation: ach-shine 1.4s ease .35s both; }
@keyframes ach-shine { to { transform: translateX(120%); } }
.ach-badge { position: relative; }
.achievement-card.in .ach-badge { animation: ach-pop .7s cubic-bezier(.2, 1.6, .4, 1) .25s both; }
@keyframes ach-pop { 0% { transform: scale(.4) rotate(-25deg); } 100% { transform: none; } }
.spark { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #ffd08a; opacity: 0; pointer-events: none; }
.achievement-card.in .spark { animation: ach-spark .9s ease-out .45s both; }
.spark.s0 { --dx: -26px; --dy: -18px; } .spark.s1 { --dx: 24px; --dy: -22px; } .spark.s2 { --dx: 30px; --dy: 6px; }
.spark.s3 { --dx: -30px; --dy: 8px; } .spark.s4 { --dx: 0px; --dy: -30px; background: #fff; } .spark.s5 { --dx: 14px; --dy: 26px; background: #fff; }
@keyframes ach-spark { 0% { opacity: 1; transform: translate(0, 0) scale(1.4); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.4); } }
@media (prefers-reduced-motion: reduce) {
  .achievement-card, .achievement-card.in { animation: none; transform: none; opacity: 1; }
  .achievement-card.in .ach-shine, .achievement-card.in .ach-badge, .achievement-card.in .spark { animation: none; }
}
.ach-pct { line-height: 1; margin: 0; }
/* toasts that lead somewhere; the achievement one stands out */
.toast span { overflow: hidden; text-overflow: ellipsis; }
.toast.tappable { color: #fff; text-decoration: none; cursor: pointer; }
.toast.tappable > svg:last-child { color: rgba(255, 255, 255, .8); width: 16px; height: 16px; }
.toast.achievement { background: linear-gradient(120deg, #f39814, #e0850a 55%, #c86f00); box-shadow: 0 10px 30px rgba(224, 133, 10, .45); animation: toast-in .25s cubic-bezier(.2,.8,.2,1) both, ach-toast-glow 1.6s ease .3s; }
.toast.achievement > svg:first-child { color: #fff; animation: ach-pop .7s cubic-bezier(.2, 1.6, .4, 1) .15s both; }
@keyframes ach-toast-glow { 50% { box-shadow: 0 10px 34px rgba(255, 190, 90, .85); } }
/* changing day: the old day dims while the new one loads, then the new one fades in */
.meal-cols, .meal-col { display: contents; }
/* the "+" after a main meal and its snacks (meals.js SnackGap): a small dashed circle on a faint line, quiet until
   wanted; tapped, "Indsæt mellemmåltid" in its place */
/* "Book tid" (appointments.js BookButton) beside the coming appointments */
.book-btn svg { width: 17px; height: 17px; }
.feed-appts-actions, .appt-history-head { display: flex; align-items: center; gap: 8px; }
.feed-appts .mp-head { flex-wrap: wrap; gap: 8px; }
.feed-appts .mp-head h3, .feed-appts-actions .btn, .appt-history-head .btn { white-space: nowrap; }
.feed-appts-actions { margin-left: auto; }
.appt-history-head { justify-content: space-between; margin-bottom: 4px; }
.appt-history-head .field-label { margin: 0; }
.snack-gap { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 32px; margin: -6px 0; }
.snack-gap::before { content: ""; position: absolute; left: 24px; right: 24px; top: 50%; border-top: 1px dashed var(--line); z-index: 0; }
.snack-gap > button { position: relative; z-index: 1; }
.snack-gap-plus { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bg); color: var(--muted); border: 1.5px dashed #b9c4ca; transition: color .15s, border-color .15s, background .15s, transform .12s; }
.snack-gap-plus svg { width: 16px; height: 16px; }
.snack-gap-plus:hover, .snack-gap-plus:focus-visible { color: var(--accent); border-color: var(--accent); border-style: solid; background: var(--surface); outline: none; }
.snack-gap-plus:active { transform: scale(.92); }
.snack-gap-insert { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px 8px 12px; border-radius: 999px; background: var(--surface); color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; box-shadow: var(--shadow); animation: snack-gap-in .18s cubic-bezier(.2, .8, .2, 1); }
.snack-gap-insert svg { width: 17px; height: 17px; color: var(--orange-strong); }
.snack-gap-insert:disabled { opacity: .7; }
.snack-gap-x { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bg); color: var(--muted); }
.snack-gap-x svg { width: 15px; height: 15px; }
@keyframes snack-gap-in { from { opacity: 0; transform: scale(.9); } }
@media (prefers-reduced-motion: reduce) { .snack-gap-insert { animation: none; } }
/* (fill backwards, not both: a transform kept after the animation would make the day a containing block
   for position: fixed, and a sheet opened inside it — the day's journal — would be trapped in it) */
.day-body { display: flex; flex-direction: column; gap: 12px; animation: day-in .22s ease-out backwards; }
@keyframes day-in { from { opacity: 0; transform: translateY(6px); } }
.content.stale .day-body { opacity: .45; pointer-events: none; transition: opacity .15s ease .08s; }
@media (prefers-reduced-motion: reduce) { .day-body { animation: none; } }
/* the period picker: one highlight that slides to the chosen period */
.period-seg { position: relative; }
.period-seg .seg-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px - (var(--n) - 1) * 3px) / var(--n)); border-radius: 9px; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.1); transform: translateX(calc(var(--i) * (100% + 3px))); transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.period-seg button { position: relative; z-index: 1; transition: color .2s; padding-left: 4px; padding-right: 4px; white-space: nowrap; }
.period-seg button.on { background: none; box-shadow: none; }
/* a chart waiting for its new period stays put, dimmed; the new one fades in */
.card.stale > * { opacity: .5; transition: opacity .15s ease .08s; }
.card.stale { pointer-events: none; }
.fade-in { animation: day-in .22s ease-out backwards; }
@media (prefers-reduced-motion: reduce) { .period-seg .seg-thumb { transition: none; } .fade-in { animation: none; } }
/* all registrations of a measurement */
.delta.small { font-size: 12px; padding: 2px 8px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; }
.see-all { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; margin: 12px 2px 0; }
.see-all svg { width: 16px; height: 16px; }
/* the add-to-home-screen banner on the day view */
.install-banner { display: flex; align-items: center; gap: 12px; padding: 12px 10px 12px 12px; }
.install-icon { width: 44px; height: 44px; border-radius: 11px; flex: none; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.install-text { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); line-height: 1.35; }
.install-text > b { display: block; color: var(--ink); font-size: 14.5px; margin-bottom: 2px; }
.install-text span b { color: var(--text); }
.share-glyph svg { width: 15px; height: 15px; vertical-align: -2px; color: var(--accent); }
.install-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.install-close svg { width: 18px; height: 18px; }
/* the recipe's heart: red when on (in both themes — the photo buttons' dark-mode colour must not
   win), and on hearting a pop, a ring that spreads and a light that sweeps across */
.recipe-hero .icon-btn.fav { overflow: hidden; }
.recipe-hero .icon-btn.fav.on, :root .recipe-hero .icon-btn.fav.on { color: #e0505b; }
.recipe-hero .icon-btn.fav.just svg { animation: heart-pop .5s cubic-bezier(.2, 1.6, .4, 1); }
.recipe-hero .icon-btn.fav.just { animation: heart-ring .7s ease-out; }
.recipe-hero .icon-btn.fav.just::after { content: ''; position: absolute; top: -20%; bottom: -20%; width: 45%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .95), transparent); transform: skewX(-18deg); animation: heart-shine .75s ease .3s forwards; pointer-events: none; }
@keyframes heart-pop { 0% { transform: scale(.6); } 55% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes heart-ring { from { box-shadow: var(--shadow), 0 0 0 0 rgba(224, 80, 91, .55); } to { box-shadow: var(--shadow), 0 0 0 16px rgba(224, 80, 91, 0); } }
@keyframes heart-shine { to { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .recipe-hero .icon-btn.fav.just, .recipe-hero .icon-btn.fav.just svg, .recipe-hero .icon-btn.fav.just::after { animation: none; } }
/* the cards' hearts: a button of their own (tap to heart without opening the recipe); a change
   plays — hearting pops the red heart in with a soft glow, taking it off fades it out */
.rcard .heart { background: none; border: 0; padding: 6px; margin: -6px -6px -6px 0; border-radius: 50%; cursor: pointer; position: relative; transition: color .25s; }
.rcard .heart:active { transform: scale(.88); }
.rcard .heart.heart-in svg { animation: card-heart-in .55s cubic-bezier(.2, 1.6, .4, 1); }
.rcard .heart.heart-in::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; box-shadow: 0 0 0 0 rgba(224, 80, 91, .5); animation: card-heart-glow .7s ease-out forwards; }
.rcard .heart.heart-out svg { animation: card-heart-out .45s ease; }
@keyframes card-heart-in { 0% { transform: scale(.3); opacity: 0; } 55% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); } }
@keyframes card-heart-glow { to { box-shadow: 0 0 0 10px rgba(224, 80, 91, 0); } }
@keyframes card-heart-out { 0% { transform: scale(1.15); opacity: .25; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rcard .heart svg, .rcard .heart::after { animation: none !important; } }

/* ---------- iPad and other wide screens: the whole width ----------
   Backgrounds and bars run edge to edge; the content sits in a centred column of up to 1080px
   (--side is the space on either side of it). The day's meals and the recipes flow into a grid.
   Tablets, and any phone turned sideways; a phone held upright keeps the layout it has. */
:root { --side: 0px; }
@media (min-width: 700px), (orientation: landscape) {
  :root { --side: max(0px, calc((100vw - 1080px) / 2)); }
  #app { max-width: none; box-shadow: none; }
  body { background: var(--bg); }
  .screen { padding-left: var(--side); padding-right: var(--side); }
  .screen > .hero, .screen > .recipe-hero, .screen > .bar, .screen > .group-cover, .screen > .group-top { margin-left: calc(-1 * var(--side)); margin-right: calc(-1 * var(--side)); width: auto; }
  .screen > .hero { padding-left: calc(16px + var(--side)); padding-right: calc(16px + var(--side)); }
  .screen > .bar { padding-left: calc(8px + var(--side)); padding-right: calc(8px + var(--side)); }
  .hero .strip { margin-left: calc(-16px - var(--side)); margin-right: calc(-16px - var(--side)); padding-left: calc(16px + var(--side)); padding-right: calc(16px + var(--side)); }
  .hero-top, .gauge-row { max-width: 640px; margin-left: auto; margin-right: auto; }
  .content { padding-left: 24px; padding-right: 24px; }
  .page-title { padding-left: 28px; padding-right: 28px; }
  .searchbox { margin-left: 24px; margin-right: 24px; }

  /* the day: the diary and the exercise side by side at the top, then the start card and the meals across */
  .day-body { gap: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .day-body > * { grid-column: 1 / -1; }
  .day-body > .diary { grid-column: 1; grid-row: 1; align-self: stretch; }
  .day-body > .exercise-card { grid-column: 2; grid-row: 1; align-self: stretch; }
  /* the meals as on the desktop: a column per main meal with its snacks under it — three across when they fit */
  .meal-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; gap: 16px; }
  .meal-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  /* recipes: as many columns as fit */
  .grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; padding-left: 24px; padding-right: 24px; }
  .carousel .rcard { flex-basis: 220px; max-width: 240px; }
  .recipe-hero { aspect-ratio: auto; height: 46vh; max-height: none; }
  /* groups: cards side by side */
  .group-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start; gap: 16px; }
  /* sheets: a panel in the middle of the bottom edge rather than the width of the screen */
  .sheet { max-width: 620px; }
}
/* a desk (wide screen, a mouse): a sheet floats a little above the bottom edge, rounded all round, instead of
   sitting flush against it; a phone or a tablet keeps the bottom sheet */
@media (min-width: 700px) and (hover: hover) and (pointer: fine) {
  .sheet { bottom: 24px; border-radius: 24px; padding-bottom: 20px; max-height: calc(92vh - 24px); }
}
/* the recipe's photo: tap it to see it whole. On wide screens it is shown whole in the header too,
   over a blurred wash of itself, instead of blown up and cropped to the width */
.recipe-hero .rh-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(26px) saturate(1.2); transform: scale(1.2); opacity: .9; }
/* the photo ends where the page's rounded top begins, and fills its box (cropping to the middle):
   opening the box to the photo's own shape then reveals it whole, gradually — no switch of mode */
.recipe-hero .rh-photo { position: absolute; top: 0; left: 0; right: 0; bottom: 24px; padding: 0; border: 0; background: none; display: block; width: 100%; height: auto; cursor: zoom-in; }
.recipe-hero .rh-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recipe-hero > .icon-btn { z-index: 1; }
/* opened: the page slid down below the whole photo (the height is set by recipes.js) */
.recipe-hero { transition: height .4s cubic-bezier(.2, .8, .2, 1); }
.recipe-hero.open .rh-photo { cursor: zoom-out; }
@media (prefers-reduced-motion: reduce) { .recipe-hero { transition: none; } }
@media (min-width: 700px), (orientation: landscape) {
  .recipe-hero .rh-fill { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(26px) saturate(1.2); transform: scale(1.2); opacity: .9; }
  .recipe-hero .rh-photo img { object-fit: contain; }
  /* a group's photo: the full width at a fixed height (not a 4:3 box narrowed to fit 46% of the height) */
  .group-cover.hero:not(.has-banner):not(.has-thumb) { aspect-ratio: auto; height: 46vh; max-height: none; }
  .group-cover.hero .gc-text { padding-left: calc(24px + var(--side)); padding-right: calc(24px + var(--side)); }
  /* a group's top image on a wide screen: framed in the column the way its settings preview shows it, not
     stretched edge to edge and cropped — a phone keeps it the device's full width */
  .group-screen:not(.group-admin) > .group-top:not(.none) { margin: calc(var(--safe-t) + 60px) 16px -28px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
  .group-screen:not(.group-admin) > .group-top img { max-height: 34vh; }
}

/* ---------- a group's settings (behind the cog on its cover) ---------- */
.cover-settings { left: auto; right: 10px; }
.group-admin .ga-preview { padding: 4px 0 0; }
/* (the group page's top, framed as a preview: rounded, inset, not taller than a third of the screen) */
.group-admin .ga-preview .group-top { margin: 0 16px -28px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.group-admin .ga-preview .group-top img { max-height: 34vh; }
.group-admin .ga-preview .group-top.none { height: 0; margin-bottom: 0; box-shadow: none; }
.ga-pictures { padding: 4px 0; }
.ga-picture { display: flex; align-items: flex-start; gap: 12px; padding: 12px 12px 12px 14px; }
.ga-picture + .ga-picture { border-top: 1px solid var(--line); }
.ga-thumb { position: relative; flex: none; width: 64px; height: 48px; border-radius: 10px; overflow: hidden; background: var(--teal-50); display: grid; place-items: center; color: var(--muted); }
.ga-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ga-thumb-thumb { width: 48px; }
.ga-thumb svg { width: 20px; height: 20px; }
.ga-busy { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255,255,255,.7); }
.ga-busy .spinner { width: 22px; height: 22px; }
.ga-picture-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ga-picture-txt b { font-weight: 600; }
.ga-picture-txt small { color: var(--muted); font-size: 12.5px; }
.ga-picture-actions { display: flex; align-items: center; gap: 4px; margin: 8px 0 0 -2px; }
.ga-picture-actions label.btn { cursor: pointer; }
.ga-about .field-label { display: block; margin-bottom: 6px; }
.ga-about .seg { margin-bottom: 10px; }
.ga-points { margin: 0 0 14px; padding-left: 20px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.list.plain { margin: 0; box-shadow: none; border-radius: 0; background: none; }
.section-title .count-pill { display: inline-grid; vertical-align: 1px; margin-left: 6px; }
.ga-request { align-items: flex-start !important; }
.ga-request .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ga-request .txt small { color: var(--muted); font-size: 12.5px; }
.ga-request-msg { margin: 6px 0 4px; padding: 8px 10px; border-radius: 10px; background: var(--teal-50); font-size: 14px; white-space: pre-wrap; }
.ga-request .btn-row { margin-top: 6px; }
.ga-members .searchbox.in-card { margin: 12px 12px 4px; box-shadow: none; background: var(--teal-50); }
.ga-members .list li .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ga-members .list li .txt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ga-members .list li .txt small { color: var(--muted); font-size: 12.5px; }
.ga-members .list li > svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.ga-role { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 3px 9px; border-radius: 999px; background: var(--teal-50); color: var(--accent); font-size: 12px; font-weight: 600; }
.ga-role svg { width: 13px; height: 13px; }
.ga-none { padding: 14px 16px; }
.ga-invite .hint { color: var(--muted); font-size: 12.5px; margin: -4px 0 12px; }
.ga-danger { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.btn.danger-fill { background: var(--danger); color: #fff; }
.sheet-list button.danger-row, .sheet-list button.danger-row b { color: var(--danger); }
.ga-member-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ga-member-head h2 { margin: 0; }
.ga-member-head .sub { margin: 0; }
/* text boxes as tall as their text needs */
.group-admin textarea.input { height: auto; min-height: 88px; padding: 12px 14px; line-height: 1.45; resize: vertical; font-size: 16px; }
.group-admin .ga-invite textarea.input { min-height: 150px; }
/* the group's logo beside its name (cover and list cards) */
.group-logo { flex: none; width: 44px; height: 44px; border-radius: 12px; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.18); }
.gc-title { display: flex; align-items: center; gap: 12px; }
.gc-title > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.group-cover.hero .gc-title .group-logo { width: 52px; height: 52px; border-radius: 14px; }
.group-card-txt .group-logo { width: 40px; height: 40px; border-radius: 10px; }
.group-cover .group-logo { position: static; display: block; }

/* ---------- a group's page: the top image at the top, the background photo behind ---------- */
.group-top { position: relative; margin: 0 0 -28px; }
.group-top img { display: block; width: 100%; height: auto; max-height: 60vh; object-fit: cover; }
.group-top.none { height: calc(var(--safe-t) + 70px); }
/* an old 670×150 strip in a 16:9 header: in the middle (below the buttons), its edges fading into
   its own extended colours (set by groups.js) */
.group-top.strip { aspect-ratio: 16 / 9; max-height: 60vh; display: flex; align-items: center; padding: calc(var(--safe-t) + 24px) 0 20px; box-sizing: border-box; }
.group-top.strip img { max-height: none; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); }
.group-backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.group-backdrop img { width: 100%; height: 100%; object-fit: cover; display: block; }
.group-backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 45%, transparent), color-mix(in srgb, var(--bg) 78%, transparent) 55%); }
.group-screen { background: transparent; isolation: isolate; }
/* (isolation keeps the background photo behind the page, but it also traps everything inside — a sheet opened
   here would sit under the impersonation banner and the tab bar; while one is open, the page is lifted above them) */
.group-screen:has(.sheet) { z-index: 102; }
.group-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin: 0 16px; padding: 14px 16px; }
.group-head > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.group-head h1 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.group-head small { color: var(--muted); font-size: 14px; }
.group-head .group-logo { width: 52px; height: 52px; border-radius: 14px; }
.group-screen .content.flat { margin-top: 12px; }
/* the keyboard's place: a visible ring on what has focus when it came from the keyboard */
.list li[tabindex]:focus-visible, .entries li[tabindex]:focus-visible { outline: none; background: var(--teal-50); box-shadow: inset 3px 0 0 var(--accent); }
button:focus-visible, a:focus-visible, .seg button:focus-visible, .chip:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.sheet:focus { outline: none; }
.card.meal[tabindex]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sky), var(--shadow); }

/* ---- selecting lines (copy / move / delete several at once) ---- */
.entries li.tap { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.entries .pick { width: 22px; height: 22px; margin: -7px 0 -7px -7px; flex: none; border-radius: 50%; display: grid; place-items: center; background: transparent;
  border: 2px solid color-mix(in srgb, var(--tc, var(--muted)) 40%, var(--line)); transition: background .12s, border-color .12s; }
.entries .pick svg { width: 13px; height: 13px; color: #fff; stroke-width: 3; opacity: 0; transition: opacity .12s; }
.entries li.note .pick svg { width: 13px; height: 13px; color: #fff; }
.entries li.sel { background: var(--teal-50); }
.entries li.sel .pick { background: var(--accent); border-color: var(--accent); }
.entries li.sel .pick svg { opacity: 1; }
.sel-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar-h) + var(--safe-b) + 12px); z-index: 60; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 8px 6px; border-radius: 18px; background: var(--surface); box-shadow: 0 8px 30px rgba(0,0,0,.18), 0 0 0 1px var(--line); max-width: calc(100vw - 24px); animation: sel-in .18s ease; }
.sel-bar .sel-count { font-weight: 600; font-size: 14px; margin-right: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sel-bar .btn.small { white-space: nowrap; }
@keyframes sel-in { from { opacity: 0; transform: translate(-50%, 12px); } }
@media (max-width: 520px) { .sel-bar .lbl { display: none; } .sel-bar .btn.small { padding-left: 12px; padding-right: 12px; } .sel-bar { gap: 6px; } }
.scale-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; padding: 2px 0 8px; }
.searchbox.in-sheet { margin: 12px 0; box-shadow: none; background: var(--bg); }
.swap-list .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.move-day { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 14px; }
.move-date { position: relative; flex: 1; text-align: center; padding: 10px; border-radius: 12px; background: var(--bg); cursor: pointer; }
.move-date input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }

/* ---- nutrient columns on wide screens (protein, fat, carbohydrate per line and per meal) ---- */
/* a planning desk: more room for the three columns and their nutrient columns */
@media (min-width: 1280px) {
  :root { --side: max(0px, calc((100vw - 1560px) / 2)); }
}
.mcols { display: flex; flex: none; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mcols i { font-style: normal; width: 46px; text-align: right; }
.entries .kcal, .mcols-sum .kcal { width: 44px; text-align: right; flex: none; }
.mcols-sum.head { border-top: 1px solid var(--line); padding-top: 6px; padding-bottom: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.mcols-sum.head .mcols, .mcols-sum.head .kcal { color: var(--muted); font-size: 11px; }
.mcols-sum.head + .entries { border-top: none; }
.mcols-sum { display: flex; align-items: center; gap: 12px; padding: 8px 16px 10px 40px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.mcols-sum .txt { flex: 1; color: var(--muted); }
.mcols-sum .mcols, .mcols-sum .kcal { color: var(--ink, inherit); }
.day-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; }
.day-actions .day-action { margin: 4px 0 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-right: 44px; }
.template-edit li { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.template-edit .input { flex: 1; min-width: 0; }
.template-edit li button { width: auto; flex: none; padding: 10px; }
/* while lines are selected the bar sits where a toast would: the toast goes above it */
body:has(.sel-bar) .toast { bottom: calc(var(--tabbar-h) + var(--safe-b) + 80px); }
.unit-hint { text-align: center; color: var(--muted); font-size: 12px; margin: 8px 0 0; }
.unit-hint b { font-weight: 600; color: var(--text); }
@media (pointer: coarse) { .unit-hint { display: none; } }

/* the day's journal entries in the day's Dagbog card */
.day-journal { list-style: none; margin: 0 16px 12px; padding: 0; display: grid; gap: 8px; }
.day-journal li { background: var(--bg); border-radius: 12px; padding: 10px 12px; box-shadow: inset 3px 0 0 var(--sky); }
.day-journal-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.day-journal-head small { color: var(--muted); }
.day-journal-head .btn.small { margin-left: auto; padding: 2px 8px; }
.day-journal-head .btn.small + .btn.small { margin-left: 0; }
.day-journal p { margin: 4px 0 0; white-space: pre-wrap; font-size: 14px; }

/* the day's journal entries in the day's Dagbog card */
.day-journal { list-style: none; margin: 0 16px 12px; padding: 0; display: grid; gap: 8px; }
.day-journal li { background: var(--bg); border-radius: 12px; padding: 10px 12px; box-shadow: inset 3px 0 0 var(--sky); }
.day-journal-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.day-journal-head small { color: var(--muted); }
.day-journal-head .btn.small { margin-left: auto; padding: 2px 8px; }
.day-journal-head .btn.small + .btn.small { margin-left: 0; }
.day-journal p { margin: 4px 0 0; white-space: pre-wrap; font-size: 14px; }

/* Kropsmål: choosing the measurements to follow */
.section-title-row { display: flex; align-items: center; justify-content: space-between; }
.section-title-row .btn.small { text-transform: none; letter-spacing: 0; }
.toggle { flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--line); position: relative; transition: background .15s; }
.toggle i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.toggle.on { background: var(--accent); }
.toggle.on i { transform: translateX(18px); }
.sheet-list.chart-choice li button[disabled] { opacity: 1; }
.chart-choice button[disabled] .toggle { opacity: .5; }
/* a named exercise's registration: the session's time and kcal after its distance */
.entry-session { font-weight: 400; font-size: 13px; }

/* a new food */
.new-food-btn { display: flex; align-items: center; gap: 10px; margin: 10px 16px 0; padding: 12px 16px; border-radius: 14px; border: 2px dashed var(--line); color: var(--accent); font-weight: 600; width: calc(100% - 32px); text-align: left; }
.new-food-btn svg { width: 18px; height: 18px; flex: none; }
.new-food { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-top: 8px; }
.new-food .wide { grid-column: 1 / -1; }
.nf-field { display: grid; gap: 4px; min-width: 0; }
.nf-field span { font-size: 12px; font-weight: 600; color: var(--muted); }
.nf-field .input { height: 44px; font-size: 16px; }

/* ---- the dietitians' recipe assistant (Claude) ---- */
.as-launch { position: fixed; right: 20px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 20px); z-index: 70; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; background: var(--teal-700); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.22); transition: transform .15s; }
.as-launch:hover { transform: scale(1.05); }
.as-launch svg { width: 24px; height: 24px; }
.assistant { position: fixed; z-index: 150; inset: 0; display: flex; flex-direction: column; background: var(--surface); color: var(--text);
  padding-top: var(--safe-t, env(safe-area-inset-top)); animation: as-in .2s ease; }
@media (min-width: 700px) {
  .assistant { inset: 0 0 0 auto; width: min(460px, 100vw); box-shadow: -12px 0 40px rgba(0,0,0,.16); border-left: 1px solid var(--line); animation: as-slide .22s ease; }
}
@keyframes as-in { from { opacity: 0; } }
@keyframes as-slide { from { transform: translateX(24px); opacity: 0; } }
.as-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--line); }
.as-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--teal-700); color: #fff; flex: none; }
.as-mark svg { width: 18px; height: 18px; }
.as-name { flex: 1; min-width: 0; display: grid; }
.as-name small { color: var(--muted); font-size: 12px; }
.as-list { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.as-empty p { color: var(--muted); font-size: 14px; line-height: 1.5; }
.as-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.as-suggest .chip { box-shadow: none; border: 1px solid var(--line); }
.as-msg { font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.as-msg.as-user { align-self: flex-end; max-width: 85%; background: var(--teal-50); padding: 8px 12px; border-radius: 14px 14px 4px 14px; white-space: pre-wrap; }
.as-msg.as-bot p { margin: 0 0 8px; }
.as-msg.as-bot ul, .as-msg.as-bot ol { margin: 0 0 8px; padding-left: 20px; }
.as-msg.as-bot h4 { font-size: 14.5px; margin: 10px 0 4px; }
.as-msg.as-bot code { font-size: 13px; background: var(--bg); padding: 1px 4px; border-radius: 4px; }
.as-table { overflow-x: auto; margin: 4px 0 10px; }
.as-table table, .as-lines table { border-collapse: collapse; width: 100%; font-size: 13px; }
.as-table th, .as-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.as-table th { font-size: 12px; color: var(--muted); font-weight: 600; }
.as-tool { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; }
.as-tool svg { width: 14px; height: 14px; flex: none; }
.as-card { border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 10px; background: var(--surface); }
.as-card .as-card { border: 0; padding: 0; }
.as-card-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.as-card-head span { color: var(--muted); font-size: 12.5px; }
.as-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.as-kpis b { display: block; font-size: 18px; }
.as-kpis small { color: var(--muted); font-size: 11px; }
.as-epct { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--line); }
.as-epct i { display: block; height: 100%; }
.as-elegend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.as-elegend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
.as-lines summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.as-lines td { padding: 4px 0; border-bottom: 1px solid var(--line); }
.as-lines td.num { text-align: right; padding-left: 8px; white-space: nowrap; }
.as-lines pre { white-space: pre-wrap; font: inherit; font-size: 13px; margin: 8px 0 0; }
.as-approval { border-color: var(--accent); }
.as-title { font-weight: 600; margin: 0; }
.as-actions { display: flex; gap: 8px; }
.as-saved { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.as-saved svg { width: 16px; height: 16px; color: var(--accent); }
.as-saved a { color: var(--accent); font-weight: 600; }
.as-error { font-size: 13.5px; color: var(--danger); }
.as-errors { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: var(--danger); }
.as-errors li { margin: 2px 0; overflow-wrap: anywhere; }
.as-lines td.muted { text-align: right; padding-left: 8px; color: var(--muted); }
.as-files { display: flex; flex-wrap: wrap; gap: 6px; }
.as-msg.as-user .as-files { margin-bottom: 6px; white-space: normal; }
.as-file { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; min-height: 36px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 12.5px; }
.as-file > span:not(.spinner) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-file svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.as-file.img { padding: 0; overflow: hidden; position: relative; }
.as-file.img img { display: block; width: 64px; height: 64px; object-fit: cover; }
.as-file.busy { opacity: .7; }
.as-file .icon-btn { width: 24px; height: 24px; min-width: 24px; padding: 0; }
.as-file.img .icon-btn { position: absolute; top: 2px; right: 2px; background: rgba(0, 0, 0, .55); color: #fff; border-radius: 50%; }
.as-attached { display: grid; gap: 4px; padding: 8px 12px 0; border-top: 1px solid var(--line); }
.as-attached small { font-size: 12px; }
.as-attached + .as-compose { border-top: 0; }
.as-focus { display: flex; align-items: center; gap: 8px; margin: 8px 12px 0; padding: 4px 4px 4px 10px; border: 1px solid rgba(243, 152, 20, .45); border-radius: 10px; background: rgba(243, 152, 20, .08); font-size: 13px; animation: toast-in .25s cubic-bezier(.2,.8,.2,1); }
.as-focus > svg { width: 16px; height: 16px; flex: none; color: var(--orange-strong); }
.as-focus > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-focus .icon-btn { width: 28px; height: 28px; min-width: 28px; padding: 0; }
.as-focus + .as-attached, .as-focus + .as-compose { border-top: 0; }
.as-msg.as-user .as-focus-sent { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.as-focus-sent svg { width: 13px; height: 13px; flex: none; color: var(--orange-strong); }
.as-focus-sent span { overflow: hidden; text-overflow: ellipsis; }
.as-clip { align-self: center; }
.as-photo { display: block; width: 100%; max-height: 180px; object-fit: cover; border-radius: 10px; margin: 4px 0 8px; }
.assistant.dropping { outline: 3px dashed var(--accent); outline-offset: -8px; }
.as-working { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; }
.as-compose { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px calc(10px + var(--safe-b)); border-top: 1px solid var(--line); }
.as-compose textarea { flex: 1; resize: none; border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; font: inherit; font-size: 15px; max-height: 40vh; background: var(--surface); color: var(--text); }
.as-compose textarea:focus { outline: none; border-color: var(--sky); }
.as-compose .btn.small svg { width: 18px; height: 18px; }
.as-list > * { flex-shrink: 0; }
.new-customer-btn { margin: 0 0 12px; width: 100%; }
/* a new customer: the forløb and its months side by side */
.nc-course { display: flex; gap: 12px; align-items: flex-end; }
.nc-course .field:first-child { flex: 1; min-width: 0; }
.nc-course .nc-months { flex: none; width: 104px; }

/* ---------- Fremskridt on a desk: a dashboard ----------
   On a phone the wrappers are not there for layout (display: contents) — the page is as it was. From
   1000px the charts are drawn at their real size (progress.js), with side panels: the registrations
   beside the measurement, the period in numbers beside the calories, the body measurements as tiles */
.stats .st-weight, .stats .st-regs, .stats .st-cal, .stats .st-sum, .stats .st-measures { display: contents; }
.chart-wrap { position: relative; }
.chart.real { margin-top: 14px; }
.chart.real .axis { font-size: 12px; }
.chart.real .line { stroke-width: 2.5; }
.chart .hover-zone { fill: transparent; cursor: pointer; }
.chart .hover-guide { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.chart .pt-hover { fill: var(--surface); stroke: var(--orange-strong); stroke-width: 3; pointer-events: none; }
.chart.bars.real .day-bar.hovered .hit { fill: var(--teal-50); }
.chart-tip { position: absolute; transform: translate(-50%, calc(-100% - 12px)); pointer-events: none; z-index: 2;
  display: grid; gap: 2px; min-width: 140px; max-width: 220px; padding: 8px 12px; border-radius: 12px;
  background: var(--surface); color: var(--text); box-shadow: 0 6px 24px rgba(12, 44, 57, .18); border: 1px solid var(--line); font-size: 13px; white-space: nowrap; }
.chart-tip b { font-size: 16px; font-weight: 600; }
.chart-tip small { color: var(--muted); font-size: 12px; white-space: normal; }
.chart-tip .delta { justify-self: start; }
.tip-split { display: flex; gap: 10px; font-size: 12px; font-variant-numeric: tabular-nums; }
.tip-split span { display: inline-flex; align-items: center; gap: 4px; }
.tip-split i, .ps-split i { display: inline-block; }
.tip-split i { width: 8px; height: 8px; border-radius: 2px; }
.tip-split i.d-carb, .ps-split i.d-carb { background: var(--carb); }
.tip-split i.d-prot, .ps-split i.d-prot { background: var(--prot); }
.tip-split i.d-fat, .ps-split i.d-fat { background: var(--fat); }
@media (min-width: 1000px) {
  .stats { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 16px 20px; align-items: stretch; }
  .stats > .period-seg { grid-column: 1 / -1; justify-self: end; width: 480px; margin: 0; }
  .stats .st-weight, .stats .st-regs, .stats .st-cal, .stats .st-sum, .stats .st-measures { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .stats .st-weight, .stats .st-cal { grid-column: 1; }
  .stats .st-regs, .stats .st-sum { grid-column: 2; }
  .stats .st-measures { grid-column: 1 / -1; }
  .stats .st-weight > .card, .stats .st-cal > .card, .stats .st-sum > .card { flex: 1; }
  /* the registrations as a card of their own beside the chart, the same height */
  .stats .st-regs { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; gap: 0; }
  .stats .st-regs .section-head { padding: 12px 16px 8px; border-bottom: 1px solid var(--line); }
  .stats .st-regs .section-title, .stats .st-regs .see-all { margin: 0; }
  .stats .st-regs .list { box-shadow: none; border-radius: 0; }
  .stats .st-cal .section-title, .stats .st-sum .section-title, .stats .st-measures .section-title { margin-top: 8px; }
  /* the sub-page of one measurement: no calories, so the chart and its registrations are the page */
  .stats:not(:has(.st-cal)) { align-items: start; }
}
.period-sum { display: flex; flex-direction: column; gap: 16px; }
.ps-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.ps-stats small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.ps-stats b { font-size: 24px; font-weight: 300; letter-spacing: -.01em; }
.ps-stats b span { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.ps-vs { display: block; font-size: 12px; color: var(--muted); }
.stats-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.stats-title .period-seg { width: 480px; margin: 0; }
.ps-head { font-size: 14px; font-weight: 600; color: var(--muted); margin: 0 0 8px; }
.ps-bars { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 10px; }
.ps-label { font-size: 12px; color: var(--muted); }
.ps-split { display: flex; height: 10px; border-radius: 999px; overflow: hidden; gap: 2px; background: var(--line); }
.ps-split i { height: 100%; }
.ps-table { margin-top: 6px; font-size: 14px; }
.ps-table td { padding: 6px 4px; }
.ps-table td.ok b { color: var(--accent); }
.ps-table td.ok b::after { content: ' ✓'; }
.ps-move { display: flex; align-items: center; gap: 8px; margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.ps-move svg { width: 18px; height: 18px; color: var(--orange-strong); flex: none; }
.ps-move b { color: var(--text); font-weight: 600; }
.measure-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
/* a tile: the name (and when) on top; the latest value and its change on the left, the line on the right */
.measure-tile { --mt-c: var(--accent); --mt-good: var(--ok); display: grid; align-content: start; gap: 14px; padding: 18px 20px; color: var(--text); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.measure-tile.exercise { --mt-c: var(--orange); }
.measure-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(12, 44, 57, .12); }
.measure-tile:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.mt-head { display: flex; align-items: center; gap: 8px; font-size: 15px; min-width: 0; }
.mt-head > b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-head .mt-when { flex: 1; color: var(--muted); white-space: nowrap; }
.mt-head > svg { width: 16px; height: 16px; color: #b9c4ca; flex: none; margin-left: auto; }
.mt-head .mt-icon { width: 26px; height: 26px; border-radius: 8px; }
.mt-head .mt-icon svg { width: 15px; height: 15px; color: inherit; }
.mt-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-height: 64px; }
.mt-left { display: grid; gap: 10px; min-width: 0; }
.mt-value { display: flex; align-items: baseline; gap: 6px; }
.mt-value b { font-size: 34px; font-weight: 400; letter-spacing: -.01em; line-height: 1; }
.mt-change { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.mt-change b { font-weight: 600; }
.mt-change.good b { color: var(--mt-good); }
.mt-change.bad b { color: var(--danger); }
.mt-change i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid currentColor; flex: none; }
.mt-change.good i { color: var(--mt-good); }
.mt-change.bad i { color: var(--danger); }
.mt-change i svg { width: 11px; height: 11px; stroke-width: 2.5; }
.mt-spark { width: 46%; max-width: 170px; height: auto; display: block; flex: none; overflow: visible; }
.mt-spark .mt-line { fill: none; stroke: var(--mt-c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mt-spark .mt-wash-top { stop-color: var(--mt-c); stop-opacity: .22; }
.mt-spark .mt-wash-bottom { stop-color: var(--mt-c); stop-opacity: 0; }
.mt-spark .mt-guide { stroke: var(--mt-c); stroke-width: 1; stroke-dasharray: 2 3; opacity: .45; }
.mt-spark .mt-dot { fill: var(--mt-c); stroke: var(--surface); stroke-width: 2; }
/* every registration, by month: on a desk one readable column, not stretched across the screen */
@media (min-width: 1000px) {
  .reg-months { width: 100%; max-width: 760px; margin: 0 auto; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chart-tip { box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
}
:root[data-theme="dark"] .chart-tip { box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
@media (min-width: 1000px) {
  /* no registrations in the period: the measurement's card takes the whole width */
  .stats:not(:has(.st-regs)) .st-weight { grid-column: 1 / -1; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chart.real .line { stroke: var(--sky); }
  :root:not([data-theme="light"]) .measure-tile { --mt-good: #7fd19b; }
  :root:not([data-theme="light"]) .chart.real .pt { fill: var(--surface); stroke: var(--sky); }
}
:root[data-theme="dark"] .chart.real .line { stroke: var(--sky); }
:root[data-theme="dark"] .measure-tile { --mt-good: #7fd19b; }
:root[data-theme="dark"] .chart.real .pt { fill: var(--surface); stroke: var(--sky); }
.goal-table.send-login td.num b { overflow-wrap: anywhere; }
/* a body measurement in the phone list: its latest value and when, on the right */
.row-latest { display: grid; justify-items: end; gap: 1px; flex: none; text-align: right; }
.row-latest b { font-size: 15px; font-weight: 600; }
.row-latest small { font-size: 12px; color: var(--muted); }
/* Profil's foot: netslank's wordmark as on the login screen (a company of its own shows its logo) */
.brand-mark { text-align: center; margin: 22px auto 0; font-size: 24px; font-weight: 300; letter-spacing: -.01em; color: var(--text); opacity: .5; }
.brand-mark b { font-weight: 600; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .company-logo { background: #fff; padding: 6px 10px; border-radius: 10px; box-sizing: content-box; }
}
:root[data-theme="dark"] .company-logo { background: #fff; padding: 6px 10px; border-radius: 10px; box-sizing: content-box; }
/* printed (or saved as PDF from the browser): the page's content only — not the floating tab bar,
   the impersonation banner, the assistant's button, a toast or an open sheet */
@media print {
  .tabbar, .impersonation, .as-launch, .toast, .sheet, .sheet-backdrop, .assistant { display: none !important; }
  .screen { min-height: 0; padding-bottom: 0; animation: none; }
  .card, .list { box-shadow: none; border: 1px solid var(--line); break-inside: avoid; }
}

/* ---------- Indsigt (dietitians): the members in numbers, and the lists to follow up on ---------- */
.ins-label { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
.ins-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.ins-trio b { display: block; font-size: 26px; font-weight: 300; letter-spacing: -.01em; }
.ins-trio small { display: block; font-size: 12px; color: var(--muted); line-height: 1.3; }
.ins-logging .ins-trio, .ins-weight .ins-trio { margin-top: 4px; }
.ins-days { display: flex; align-items: flex-end; gap: 2px; height: 56px; margin-top: 16px; }
.ins-days i { flex: 1; border-radius: 3px 3px 1px 1px; background: var(--teal-600); opacity: .85; }
.ins-days i.none { background: var(--line); opacity: 1; }
.ins-note { font-size: 12px; margin: 10px 0 0; }
.ins-sub { font-size: 13px; margin: 2px 4px 8px; }
.ins-empty { font-size: 14px; padding: 4px 4px 0; }
.ins-list .section-title { display: flex; align-items: center; gap: 6px; }
.ins-when { flex: none; font-size: 12px; color: var(--muted); text-align: right; }
.ins-list .customer-row { width: 100%; }
@media (min-width: 1000px) {
  /* a desk: the search and the members across, logging beside weight, then the three follow-up lists
     (gone quiet, forløb ending, forløb ended) side by side */
  .insights { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 20px; align-items: start; }
  .insights .ins-members, .insights .ins-search { grid-column: 1 / -1; }
  .insights .ins-logging, .insights .ins-weight { grid-column: span 3; align-self: stretch; }
  .insights .ins-list { grid-column: span 2; min-width: 0; }
}
/* a number is a way to the members behind it */
.ins-stat { display: block; width: 100%; text-align: left; border: 0; background: none; font: inherit; color: inherit; padding: 6px 8px; margin: -6px -8px; border-radius: 12px; cursor: pointer; transition: background .15s; }
.ins-trio .ins-stat { margin: -6px 0; }
.ins-stat:hover, .ins-stat:focus-visible { background: var(--teal-50); outline: none; }
.ins-stat b { display: block; }
.ins-big { width: auto; }
button.delta.ins-new { border: 0; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }

/* ---------- Virksomhed: the company's logo, name, e-mail and footer ---------- */
.company-logo-edit { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; }
.company-logo-edit .logo-box { flex: 1; min-height: 64px; display: grid; place-items: center; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.company-logo-edit .logo-box img { max-width: 100%; max-height: 60px; display: block; }
.field-hint { display: block; font-size: 12px; margin-top: 6px; }
textarea.input { resize: vertical; min-height: 64px; font: inherit; }
.ins-more { display: block; margin: 8px auto 0; }

/* ---------- closing an account (Slet min konto / Slet kundens konto) ---------- */
.delete-account { display: block; margin: 4px auto 0; padding: 8px 12px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.delete-facts { margin: 4px 0 14px; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; line-height: 1.45; color: var(--text); }
.delete-sure { margin: 4px 0 0; }
.customer-row.closed { display: flex; align-items: center; gap: 12px; padding: 10px 4px; opacity: .85; }
.customer-row.closed .txt { flex: 1; min-width: 0; display: grid; }
.customer-row.closed .btn { flex: none; }

/* ---------- a recipe on a desk: three columns as the day's meals — the recipe and its numbers, the
   ingredients, the method (a phone keeps its one column: the wrappers are not there for layout) ---------- */
.recipe-body .rb-info, .recipe-body .rb-items, .recipe-body .rb-steps { display: contents; }
@media (min-width: 1000px) {
  .recipe-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr); gap: 20px; align-items: start; padding-left: calc(24px + var(--side)); padding-right: calc(24px + var(--side)); }
  .recipe-body .rb-info, .recipe-body .rb-items, .recipe-body .rb-steps { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .recipe-body .rb-info { position: sticky; top: 16px; }
  .recipe-body .rb-items .section-title, .recipe-body .rb-steps .section-title { margin-top: 6px; }
  .recipe-body > div[style] { display: none; }
}

/* ---------- forløb (a member's products) ---------- */
.forlob-list li button { align-items: center; }
.fl-status { flex: none; font-style: normal; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--bg); color: var(--muted); }
.fl-status.on { background: var(--teal-50); color: var(--accent); }
.fl-status.soon { background: #fff3e2; color: var(--orange-strong); }
.fl-status.ended { background: var(--bg); color: var(--muted); }
.delete-facts-p { font-size: 14px; line-height: 1.5; margin: 4px 0 8px; }
.ins-ending { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 0; }
.ins-ending .ins-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 6px 4px 6px 12px; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.ins-ending .ins-open .txt { display: grid; min-width: 0; }
.ins-ending .btn { flex: none; }
.forlob-list .fl-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; } .forlob-list .fl-row .txt { flex: 1; min-width: 0; display: grid; }

/* while a dietitian is in a member's account, the banner floats above the tab bar (or the bottom
   edge): the page reaches a little further, so its last things — the day's Udskriv / PDF, a list's last
   row — can be scrolled clear of it */
body:has(.impersonation) .screen { padding-bottom: calc(var(--safe-b) + 156px); }
body:has(.impersonation) .screen.no-tabs { padding-bottom: calc(var(--safe-b) + 80px); }
/* Indsigt: finding a member, across the top */
.ins-search { display: flex; flex-direction: column; }
@media (min-width: 1000px) { .insights .ins-search { grid-column: 1 / -1; } }
@media (max-width: 999px) { .insights .skeleton.ins-list ~ .skeleton.ins-list { display: none; } }

/* Medlemmer: a day's bar is a way to that day's members — lit under the mouse */
.ins-days .ins-day { flex: 1; height: 100%; display: flex; align-items: flex-end; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 3px; }
.ins-days .ins-day i { display: block; width: 100%; border-radius: 3px 3px 1px 1px; background: var(--teal-600); opacity: .85; transition: opacity .12s, background .12s; }
.ins-days .ins-day.none { cursor: default; }
.ins-days .ins-day.none i { background: var(--line); opacity: 1; }
.ins-days .ins-day:not(.none):hover i, .ins-days .ins-day:focus-visible i { background: var(--orange-strong); opacity: 1; }
.ins-days .ins-day:focus-visible { outline: 2px solid var(--sky); outline-offset: 1px; }

/* ---------- a member's page (Medlemmer → a member): one column on a phone, three on a desk ---------- */
.member-page .mp-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (min-width: 1000px) {
  .member-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
}
.mp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.mp-head h3 { font-size: 16px; font-weight: 600; margin: 0; }
.mp-head .muted { font-size: 13px; }
.mp-sub { font-size: 13px; margin: 0 0 10px; }
.mp-who { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.mp-who b { display: block; font-size: 18px; font-weight: 600; }
.mp-who small { display: block; color: var(--muted); font-size: 13px; }
.mp-state { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--bg); color: var(--muted); }
.mp-state.on { background: var(--teal-50); color: var(--accent); }
.mp-state.closed { background: rgba(192, 57, 43, .12); color: var(--danger); }
.mp-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 14px; font-size: 14px; }
.mp-facts dt { color: var(--muted); }
.mp-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.mp-facts a { color: var(--accent); text-decoration: none; }
.mp-profile .actions { margin-top: 4px; }
.mp-list { list-style: none; margin: 0; padding: 0; }
.mp-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.mp-list li:first-child { border-top: 0; }
.mp-list .txt { flex: 1; min-width: 0; display: grid; }
.mp-list .txt b { font-weight: 600; font-size: 14px; }
.mp-list .txt small { color: var(--muted); font-size: 12.5px; }
.mp-kcal { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 14px 0 8px; }
.mp-kcal b { font-size: 28px; font-weight: 300; }
.mp-kcal .muted { font-size: 13px; }
.mp-bars { display: flex; align-items: flex-end; gap: 2px; height: 70px; }
.mp-bars i { flex: 1; border-radius: 3px 3px 1px 1px; background: var(--teal-600); opacity: .7; }
.mp-bars i.hit { background: var(--ok); opacity: .9; }
.mp-bars i.none { background: var(--line); opacity: 1; }
.mp-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; margin: 8px 0 14px; }
.mp-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--teal-600); opacity: .7; margin-left: 6px; }
.mp-legend i:first-child { margin-left: 0; }
.mp-legend i.hit { background: var(--ok); opacity: .9; }
.mp-legend i.none { background: var(--line); opacity: 1; }
.mp-split-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.mp-split-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.mp-split-legend i.d-carb { background: var(--carb); } .mp-split-legend i.d-prot { background: var(--prot); } .mp-split-legend i.d-fat { background: var(--fat); }
.mp-spark { height: 70px; margin-top: 6px; }
.mp-snippet { font-size: 14px; line-height: 1.5; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.mp-list .mp-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.mp-list .mp-row > svg { width: 16px; height: 16px; color: #b9c4ca; flex: none; }
.mp-list li:has(.mp-row):hover { background: var(--teal-50); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 10px; }
.mp-journal-list { list-style: none; margin: 0 0 12px; padding: 0; }
.mp-journal-list li { padding: 8px 0; border-top: 1px solid var(--line); }
.mp-journal-list li:first-child { border-top: 0; padding-top: 0; }
.mp-journal-list small { display: block; font-size: 12px; margin-bottom: 3px; }
.mp-journal-list .mp-snippet { margin: 0; -webkit-line-clamp: 4; }
.mp-journal-list li.voided .mp-snippet { text-decoration: line-through; color: var(--muted); }

/* appointments from behandler-booking.dk (member page, Profil, calendar) */
.appt { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.appt + .appt { border-top: 1px solid var(--line); }
.appt-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--teal-50); color: var(--accent); }
.appt-ico svg { width: 18px; height: 18px; }
.appt .txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.appt .txt b { font-size: 15px; font-weight: 600; }
.appt .txt b::first-letter { text-transform: uppercase; }
.appt .txt small { font-size: 13px; color: var(--muted); }
.appt-label { font-size: 11px !important; text-transform: uppercase; letter-spacing: .04em; color: var(--accent) !important; font-weight: 600; }
.appt-list { margin-top: 4px; }
.mp-appts .actions { margin-top: 10px; }
.booking-conn { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.booking-state { display: flex; align-items: center; gap: 6px; margin: 2px 0 4px; font-size: 15px; }
.booking-state svg { width: 18px; height: 18px; color: var(--accent); }
.m-appt { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.cal-day.sel .m-appt { box-shadow: inset 0 0 0 1.5px #fff; }
.appt.tap { width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; border-radius: 0; text-decoration: none; cursor: pointer; padding: 8px 0; }
.appt.tap > svg:last-child { margin-left: auto; width: 18px; height: 18px; color: var(--muted); flex: none; }
.appt.tap:active { opacity: .6; }
.cal-appts { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 4px; }
.day-appts { margin: 0 16px 10px; padding: 2px 12px; border-radius: 14px; background: var(--teal-50); }
.day-appts .appt-ico { background: var(--surface); }
.feed-appts .appt + .appt, .appt-history .appt + .appt { border-top: 1px solid var(--line); }
.feed-appts .mp-head .btn { margin-right: -8px; }
.member-page .mp-refused { grid-column: 1 / -1; }
.mp-refused p { max-width: 420px; margin: 0 auto 14px; }

/* GDPR: the consent (the mailed link's page, Profil → Samtykke) */
.consent-page .brand { flex: none; padding: 8px 0 22px; }
.consent-card { background: var(--surface); color: var(--text); border-radius: 24px; padding: 22px 18px 18px; box-shadow: var(--shadow-lg); max-width: 560px; width: 100%; margin: 0 auto; }
.consent-card h2 { font-size: 20px; margin: 0 0 6px; }
/* a desk: the login (and the pages built like it) a column in the middle of the teal, the brand just above
   the form, rather than stretched across the window; the consent's text a little wider */
@media (min-width: 700px) and (hover: hover) and (pointer: fine) {
  .login { justify-content: center; }
  .login > * { width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; }
  .login .brand { flex: none; padding-bottom: 28px; }
  .login.consent-page > * { max-width: 560px; }
}
.consent-text p { font-size: 15px; line-height: 1.5; margin: 0 0 10px; }
.consent-state { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; margin: 12px 0 4px; color: var(--muted); }
.consent-state.given { color: var(--accent); }
.consent-state svg { width: 18px; height: 18px; flex: none; }
.consent-card .alt-dark { text-align: center; margin: 14px 0 0; font-size: 14px; }
.consent-card .alt-dark a { color: var(--accent); font-weight: 600; }
.cpr-shown { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; margin: 4px 0 8px; border-radius: 14px; background: var(--bg); }
.cpr-shown b { font-size: 20px; letter-spacing: .04em; }
.who-title { font-weight: 400; color: var(--muted); }
.consent-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.consent-history li { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.consent-history li.given { color: var(--accent); }
.consent-history svg { width: 16px; height: 16px; flex: none; }
.journal-head .journal-cpr a { color: inherit; text-decoration: underline; }
/* two-factor login */
.tfa-lead { text-align: center; margin: 0 0 4px; }
.code-input { text-align: center; font-size: 22px; letter-spacing: .2em; font-variant-numeric: tabular-nums; }
.tfa-qr { display: grid; place-items: center; margin: 8px auto 6px; width: 200px; padding: 10px; background: #fff; border-radius: 14px; }
.tfa-qr svg { width: 180px; height: 180px; display: block; }
.tfa-key { font-size: 13px; text-align: center; overflow-wrap: anywhere; }
.tfa-key code, .tfa-codes code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tfa-codes { list-style: none; margin: 6px 0 4px; padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; background: var(--bg); border-radius: 14px; font-size: 15px; }
@media (hover: hover) and (pointer: fine) { .tfa-phone { display: none; } }
@media not ((hover: hover) and (pointer: fine)) { .tfa-desk { display: none; } }
.tfa-phone .actions { margin: 4px 0 8px; }
.tfa-hint { font-size: 13px; margin: 0 0 10px; }
.code-row { display: flex; gap: 8px; align-items: stretch; }
.code-row .code-input { flex: 1; min-width: 0; }
.code-row .code-paste { flex: none; width: auto; padding: 0 14px; }
.tfa-member { display: flex; align-items: center; gap: 10px; }
.access-log { list-style: none; margin: 0; padding: 0; }
.access-log li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line, rgba(0,0,0,.06)); font-size: 14px; }
.access-log li span { display: grid; }
.access-log small, .access-log time { color: var(--muted); font-size: 12px; }
.access-log time { white-space: nowrap; }

/* NetSlank as a product: sign-up, the subscription (Virksomhed), the reminder (Profil), the locked screen */
.signup .brand { flex: 0 0 auto; padding: 8px 0 22px; }
.signup-title { font-size: 20px; font-weight: 600; margin: 0; }
.signup-sub { font-size: 14px; color: var(--muted); margin: -4px 0 4px; }
.signup .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.signup-accept { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.signup-accept input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
/* Virksomhed → Slet klinikken: the journals handed back first (company.js DeleteClinic) */
.delete-clinic { padding-bottom: 28px; }
.delete-journals { display: grid; gap: 8px; margin-bottom: 14px; }
.delete-journals .actions { margin: 0; }
.delete-journals .signup-accept { color: var(--text); margin-top: 4px; }
.billing-banner { display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); margin: 0 16px 12px; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--teal-50); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.billing-banner.grace { background: #fdecea; }
.billing-banner > svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
.billing-banner.grace > svg { color: var(--danger); }
.billing-banner > svg:last-child { margin-left: auto; color: var(--muted); }
.billing-banner span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.billing-banner small { font-size: 13px; color: var(--muted); }
.booking-state.warn svg { color: var(--danger); }
.billing .seats { margin: 8px 0 10px; font-size: 14px; }
.billing .seats .track { height: 7px; border-radius: 4px; background: var(--line); margin-top: 6px; overflow: hidden; }
.billing .seats .fill { height: 100%; background: var(--teal-600); border-radius: 4px; }
.billing .seats .fill.full { background: var(--danger); }
.tiers { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 8px; }
.tier { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; }
.tier > div:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tier small { font-size: 12px; color: var(--muted); }
.tier-price { text-align: right; display: flex; flex-direction: column; }
.tier.small { opacity: .5; }
.locked .content { display: grid; place-items: center; min-height: 80vh; }
.locked-card { max-width: 480px; width: 100%; margin: 0 auto; text-align: center; color: var(--text); }
.locked-card h1 { font-size: 22px; margin: 10px 0 6px; color: var(--text); }
.locked-card > p { color: var(--muted); margin: 0 0 8px; }
.locked-card .billing { text-align: left; }
.locked-ico { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--teal-50); color: var(--accent); }
.locked-ico svg { width: 26px; height: 26px; }
.dietitian-list { list-style: none; margin: 4px 0 8px; padding: 0; }
.dietitian-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.dietitian-list li:first-child { border-top: 0; }
.dietitian-list li.off .txt { opacity: .55; }
.dietitian-list .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dietitian-list small { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.tier.plan { margin: 6px 0 4px; }
.locked-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.client-payments .booking-state { align-items: flex-start; }
.sheet .sub + .booking-conn { margin-top: 6px; padding-top: 0; border-top: 0; }
/* the data processing agreement (dpa.js) */
.dpa-text { max-height: 46vh; overflow: auto; border: 1px solid var(--line, rgba(0,0,0,.08)); border-radius: 14px; padding: 12px 14px; margin: 8px 0 12px; font-size: 13px; line-height: 1.5; background: var(--bg); }
.dpa-text h3 { font-size: 14px; margin: 14px 0 6px; }
.dpa-text h4 { font-size: 13px; margin: 10px 0 4px; }
.dpa-text p { margin: 0 0 6px; }
.dpa-text ol { margin: 0 0 6px; padding-left: 22px; }
.dpa-text .dpa-more { padding-left: 22px; }
.dpa-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 6px 0; }
.dpa-table th, .dpa-table td { text-align: left; vertical-align: top; padding: 4px 6px; border-bottom: 1px solid var(--line, rgba(0,0,0,.08)); }
.dpa-agree { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin: 4px 0 8px; }
.dpa-agree input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.list small.warn { color: var(--orange-strong, #c26b00); }
.ins-dpa { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: inherit; border: 1px solid var(--orange-strong, #c26b00); }
.ins-dpa svg { width: 22px; height: 22px; flex: none; color: var(--orange-strong, #c26b00); }
.ins-dpa span { display: grid; gap: 2px; }
.ins-dpa small { color: var(--muted); }
.insights .ins-dpa { grid-column: 1 / -1; }
.buy-note { font-size: 12px; color: var(--muted); text-align: center; margin: 6px 0 0; } .buy-note a { color: inherit; text-decoration: underline; }
.privacy-section h3 { font-size: 16px; margin: 18px 0 6px; }
.privacy-section p { font-size: 15px; line-height: 1.5; margin: 0 0 8px; }
.as-empty p svg { width: 14px; height: 14px; vertical-align: -2px; }

/* ---- Hjemmeside (site.js): the draft in a frame, the assistant's drawer beside it on a desk ---- */
.site-screen { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--bg); }
@media (min-width: 700px) {
  html[data-site-assistant="open"] .site-screen { right: min(460px, 100vw); }
}
.site-bar { position: static; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.site-bar h1 { text-align: left; padding-left: 4px; }
.site-bar h1 small a { color: var(--accent); }
.site-actions { gap: 8px; align-items: center; padding-right: 4px; }
.site-actions .seg button { padding: 6px 8px; }
.site-actions .seg svg { width: 18px; height: 18px; display: block; }
.site-mark.on { background: var(--orange); color: #fff; }
.site-frame.marking iframe { outline: 2px solid var(--orange); outline-offset: -2px; }
.site-frame { position: relative; flex: 1; display: flex; justify-content: center; min-height: 0; padding: 0; }
/* what the Hjemmeside screen says: toasts floating over the bottom of the draft, never pushing it down */
.site-toasts { position: absolute; left: 50%; bottom: calc(20px + var(--safe-b)); transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: min(560px, calc(100% - 32px)); pointer-events: none; }
.site-toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; min-height: 44px; border-radius: 16px; background: var(--teal-900); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.35; box-shadow: var(--shadow-lg); animation: site-toast-in .25s cubic-bezier(.2,.8,.2,1) both; }
.site-toast > svg { width: 18px; height: 18px; flex: none; color: #7ed3a0; }
.site-toast > span { flex: 1; min-width: 0; overflow-wrap: anywhere; padding-right: 4px; }
.site-toast a { color: #fff; text-decoration: underline; }
.site-toast.mark > svg, .site-toast.site-marking > svg { color: var(--orange); }
.site-toast.site-marking { box-shadow: var(--shadow-lg), 0 0 0 2px var(--orange); }
.site-toast.error { background: #7d2a22; }
.site-toast.error > svg { color: #ffb4a8; }
.site-toast.site-hint > svg { color: rgba(255, 255, 255, .7); }
.site-toast .icon-btn { width: 30px; height: 30px; min-width: 30px; padding: 0; color: rgba(255, 255, 255, .85); }
.site-toast-btn { flex: none; border: 1px solid rgba(255, 255, 255, .45); background: transparent; color: #fff; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.site-toast-btn:hover { background: rgba(255, 255, 255, .12); }
@keyframes site-toast-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .site-toast { animation: none; } }
.site-frame iframe { flex: 1; width: 100%; height: 100%; border: 0; background: #fff; }
.site-frame.phone { padding: 16px 0; }
.site-frame.phone iframe { flex: none; width: 390px; max-width: 100%; border-radius: 18px; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
.site-empty { margin: auto; max-width: 460px; padding: 24px; text-align: center; color: var(--muted); }
.site-empty svg { width: 40px; height: 40px; color: var(--accent); }
.site-empty h2 { color: var(--text); font-size: 18px; margin: 12px 0 6px; }
.site-screen ~ .as-launch { bottom: 20px; }
@media (max-width: 699px) {
  .site-actions .seg { display: none; }
}

/* Abonnement: the AI assistant's share of the month's allowance */
.ai-meter { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 6px 0 8px; }
.ai-meter i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.ai-meter i.high { background: var(--orange); }
/* Integrationer → Hjemmeside: its own domain, and found by search engines or not */
.site-domain { margin-top: 14px; }
.check-row { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; cursor: pointer; }
.check-row input { margin-top: 3px; }
.check-row small { display: block; }

/* the assistant's drawer: the conversation put aside after a pause, greyed above the new one */
.as-previous { opacity: .5; filter: grayscale(.4); }
.as-previous a { pointer-events: auto; }
.as-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.as-divider::before, .as-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.as-note { color: var(--muted); font-size: 14px; margin: 4px 2px 10px; }

/* Profil → Integrationer: the list, each row how the integration stands; a row opens its own view */
.sheet .integ-list { margin: 4px 0 8px; box-shadow: none; border: 1px solid var(--line); }
.integ-list .txt small.on { color: var(--accent); }
.sheet .sub + .booking-new { margin-top: 6px; padding-top: 0; border-top: 0; }
.booking-new .check-row a { color: var(--accent); }

/* #/velkommen — "Kom godt i gang" (welcome.js): what is ready, then the steps, one button each */
.welcome { max-width: 760px; margin: 0 auto; padding: calc(var(--safe-t) + 20px) 16px calc(var(--safe-b) + 32px); }
.welcome-head { padding: 8px 4px 18px; }
.welcome-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); }
.welcome-head h1 { font-size: 30px; margin: 6px 0 8px; letter-spacing: -.01em; }
.welcome-lead { color: var(--muted); font-size: 16px; line-height: 1.5; }
.welcome .card.pad { padding: 18px 18px 16px; }
.welcome-ready h2 { font-size: 17px; margin: 0 0 10px; }
.welcome-ready ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.welcome-ready li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.welcome-ready .tick { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--teal-50); color: var(--accent); margin-top: 1px; }
.welcome-ready .tick svg { width: 14px; height: 14px; }
.welcome-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(243, 152, 20, .12); font-size: 14px; line-height: 1.45; }
.welcome-progress { display: flex; align-items: center; gap: 12px; margin: 22px 4px 12px; font-size: 14px; color: var(--muted); font-weight: 600; }
.welcome-progress .welcome-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.welcome-progress .welcome-bar i { display: block; height: 100%; border-radius: 4px; background: var(--orange); transition: width .4s ease; }
.welcome-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.welcome-step { display: flex; gap: 14px; padding: 18px; border: 2px solid transparent; }
.welcome-step.now { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(243, 152, 20, .12), var(--shadow); }
.welcome-step .num { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--teal-50); color: var(--accent); font-weight: 700; font-size: 16px; }
.welcome-step.now .num { background: var(--orange); color: #fff; }
.welcome-step.done .num { background: var(--accent); color: #fff; }
.welcome-step.done .num svg { width: 18px; height: 18px; }
.welcome-step .body { flex: 1; min-width: 0; }
.welcome-step h3 { font-size: 17px; margin: 5px 0 6px; }
.welcome-step h3 small { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--line); padding: 2px 8px; border-radius: 999px; margin-left: 4px; vertical-align: 2px; }
.welcome-step.done h3 { color: var(--muted); }
.welcome-step p { color: var(--muted); font-size: 15px; line-height: 1.5; margin: 0; }
.welcome-step .btn { margin-top: 14px; }
.welcome-howto { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; color: var(--text); }
.welcome-more { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--accent); }
.welcome-foot { margin-top: 20px; }
.welcome-foot .check-row { margin: 0 0 16px; font-size: 15px; }

/* the assistant's setup cards (assistant.js SetupApproval) and links in its answers */
.as-msg a.as-link { color: var(--accent); font-weight: 600; }
.as-diff { width: 100%; border-collapse: collapse; font-size: 14px; margin: 4px 0; }
.as-diff th { text-align: left; font-weight: 600; padding: 4px 8px 4px 0; vertical-align: top; width: 1%; white-space: nowrap; }
.as-diff td { padding: 4px 0; }
.as-report { white-space: pre-wrap; font: inherit; font-size: 14px; margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: var(--bg); max-height: 220px; overflow: auto; }
.booking-one-bill { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
/* the client page's card: its buttons stacked with room between them (they sat flush) */
.mp-profile .actions { display: flex; flex-direction: column; gap: 8px; }
.mp-profile .actions .btn { margin: 0; }
.member-page .lbl-short { display: none; }
/* at a desk, a card's buttons side by side instead of stacked full width (wrapping when the card is narrow);
   a phone keeps them stacked */
@media (min-width: 700px) {
  .desk-row, .actions.desk-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .desk-row > .btn { width: auto; flex: 1 1 auto; margin: 0; min-height: 42px; padding: 0 16px; font-size: 15px; white-space: nowrap; }
  .desk-row > .btn svg { width: 18px; height: 18px; }
}
/* at a desk the three on one line, a size smaller and with shorter labels (they wrap when the column is narrow) */
@media (min-width: 1000px) {
  .mp-profile .actions { flex-direction: row; flex-wrap: wrap; }
  .mp-profile .actions .btn { width: auto; flex: 1 1 auto; min-height: 40px; padding: 0 12px; gap: 6px; font-size: 14px; border-radius: 11px; white-space: nowrap; }
  .mp-profile .actions .btn svg { width: 16px; height: 16px; }
  .member-page .lbl-long { display: none; }
  .member-page .lbl-short { display: inline; }
}

/* the intake form (intake.js): the client's screen, the Dagbog card, the clinic's editor */
.intake-card { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; text-decoration: none; color: inherit; border: 2px solid var(--orange); }
.intake-card .ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(243, 152, 20, .14); color: var(--orange); flex: none; }
.intake-card .ico svg { width: 22px; height: 22px; }
.intake-card > svg { width: 18px; height: 18px; color: #b9c4ca; flex: none; }
.intake-card .txt { flex: 1; min-width: 0; }
.intake-card .txt b { display: block; }
.intake-card .txt small { color: var(--muted); font-size: 13px; }
.intake-screen .content { max-width: 680px; margin: 0 auto; }
.intake-intro { color: var(--muted); line-height: 1.5; margin: 0 0 8px; }
.intake-q { margin-top: 18px; }
.intake-help { display: block; margin: -2px 0 6px; font-size: 13px; }
.intake-num { display: flex; align-items: center; gap: 8px; }
.intake-num .input { max-width: 140px; }
.intake-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.intake-done { text-align: center; }
.intake-done .tick { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--teal-50); color: var(--accent); }
.intake-done .tick svg { width: 26px; height: 26px; }
.intake-edit-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 12px; }
.intake-edit-q { padding: 12px; border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 8px; }
.intake-edit-head { display: flex; gap: 10px; align-items: center; }
.intake-edit-head .num { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--teal-50); color: var(--accent); font-weight: 700; font-size: 13px; }
.intake-edit-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.intake-edit-row select { flex: 1; min-width: 140px; }
.intake-edit-row .check-row { margin: 0; }
.intake-unit { max-width: 100px; }
.intake-edit-tools { display: flex; gap: 6px; justify-content: flex-end; }
.intake-enabled { padding: 12px 14px; border-radius: 12px; background: var(--teal-50); margin-bottom: 8px; }
.intake-preview h3 { margin: 6px 0 4px; }
.as-intake { margin: 8px 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; }
.booking-after { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }

/* Profil → Henvendelser (contact.js) */
.contact-enabled { padding: 12px 14px; border-radius: 12px; background: var(--teal-50); margin-bottom: 8px; }
.contact-empty { margin: 16px 0; }
.contact-list { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.contact-msg + .contact-msg { border-top: 1px solid var(--line); }
.contact-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.contact-head .txt { flex: 1; min-width: 0; }
.contact-head > svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.contact-head .txt b { display: block; }
.contact-head .txt small { display: block; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact-msg.handled .contact-head b { color: var(--muted); font-weight: 500; }
.contact-body { padding: 0 14px 14px; }
.contact-from { margin: 0 0 8px; font-size: 14px; }
.contact-text { white-space: pre-wrap; line-height: 1.5; margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: var(--bg); }

/* the clinic's newsletter (newsletter.js) */
.news-enabled { padding: 12px 14px; border-radius: 12px; background: var(--teal-50); margin-bottom: 10px; }
.news-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 4px; }
.news-counts div { padding: 10px; border-radius: 12px; border: 1px solid var(--line); text-align: center; }
.news-counts b { display: block; font-size: 20px; }
.news-counts small { color: var(--muted); font-size: 12px; }
.news-list, .news-subs { list-style: none; margin: 6px 0 10px; padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.news-list li + li, .news-subs li + li { border-top: 1px solid var(--line); }
.news-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.news-row:disabled { cursor: default; }
.news-row > svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.news-row .txt, .news-subs .txt { flex: 1; min-width: 0; }
.news-row .txt b, .news-subs .txt b { display: block; }
.news-row .txt small, .news-subs .txt small { display: block; color: var(--muted); font-size: 13px; }
.news-subs li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.news-body { font-family: inherit; line-height: 1.5; }
.news-preview { width: 100%; height: 60vh; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.intake-news { margin-top: 18px; }
.as-letter { max-height: 260px; overflow: auto; padding: 8px 12px; margin: 6px 0; border-radius: 10px; background: var(--bg); font-size: 14px; line-height: 1.5; }
.as-letter h2 { font-size: 16px; margin: 10px 0 4px; }

/* #/nyhedsbrev/<id> (newsletter.js): the letter as received, the assistant's drawer beside it on a desk */
.news-screen { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--bg); }
@media (min-width: 700px) { html[data-site-assistant="open"] .news-screen { right: min(460px, 100vw); } }
.news-screen h1 small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.news-frame { flex: 1; min-height: 0; display: flex; }
.news-frame iframe { flex: 1; border: 0; background: #f2f5f7; }
.news-manual { flex: 1; overflow: auto; padding: 16px; max-width: 720px; margin: 0 auto; width: 100%; }
.news-counts.four { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 520px) { .news-counts.four { grid-template-columns: repeat(4, 1fr); } }
.news-progress { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin: 6px 0 12px; }
.news-progress i { display: block; height: 100%; background: var(--orange); }
.news-links { list-style: none; margin: 6px 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.news-links li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; font-size: 14px; }
.news-links li + li { border-top: 1px solid var(--line); }
.news-links .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }

/* the assistant's badges (assistant.js Badge): what was done, named — a new one pops in with the achievements'
   sweep of light (.ach-shine) and its star bursts with sparkles (.spark); the milestones in full orange.
   The stars in the drawer's head count them, bumping with each. */
/* Profil: the earned achievements as shiny chips under the name — a gold chip with a star, a light that
   sweeps over it now and then (staggered, so they are not in step), a "+ n" chip for the ones that do not fit */
.profile-head .profile-name { flex: 1; min-width: 0; }
.ach-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; flex: 0 1 auto; max-width: 52%; margin-left: auto; }
.ach-chip { position: relative; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 10px 4px 5px; border-radius: 999px; overflow: hidden; font-size: 12px; font-weight: 700; line-height: 1.2; color: #fff; background: linear-gradient(120deg, #f7b24a, #f39814 55%, #e0850a); box-shadow: 0 2px 8px rgba(224, 133, 10, .35), inset 0 1px 0 rgba(255, 255, 255, .45); text-shadow: 0 1px 1px rgba(150, 80, 0, .35); }
/* (on Profil: under the name and the clinic, so neither is squeezed onto two lines beside them) */
.profile-name .ach-chips { justify-content: flex-start; max-width: none; margin: 8px 0 0; }
.profile-name .ach-chip-text { max-width: none; }
/* on a member's page (a dietitian's view): a row of their own under the name, from the left */
.ach-chips.inline { justify-content: flex-start; max-width: none; margin: 12px 0 14px; }
.ach-chip:active { transform: scale(.96); }
.ach-chip.more { padding: 4px 10px; }
.ach-chip-star { position: relative; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #fff; color: #e0850a; flex: none; }
.ach-chip-star svg { width: 11px; height: 11px; fill: currentColor; stroke: none; }
.ach-chip-text { min-width: 0; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ach-chip b.num { font-weight: 700; opacity: .85; }
.ach-chip-shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .6) 48%, rgba(255, 255, 255, .15) 56%, transparent 70%); transform: translateX(-130%); animation: chip-shine 6s ease-in-out infinite; animation-delay: calc(1.2s + var(--i, 0) * .8s); }
@keyframes chip-shine { 0% { transform: translateX(-130%); } 22%, 100% { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) { .ach-chip-shine { animation: none; } }
.ach-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; }
.ach-row .ach-chip-star { width: 30px; height: 30px; background: linear-gradient(120deg, #f7b24a, #e0850a); color: #fff; }
.ach-row .ach-chip-star svg { width: 17px; height: 17px; }
.ach-row .txt { flex: 1; min-width: 0; }
.ach-row .txt b { display: block; }
.ach-row .txt small { color: var(--muted); font-size: 13px; }
.ach-row.link { color: inherit; text-decoration: none; border-radius: 12px; }
.ach-row.link > svg { width: 18px; height: 18px; color: #b9c4ca; flex: none; }
.ach-row.link:active { background: var(--teal-50); }
@media (hover: hover) and (pointer: fine) { .ach-row.link:hover { background: var(--teal-50); } }
.as-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 8px; }
.as-badge { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #8a5200; background: linear-gradient(120deg, #fff5e6, #ffe3bd); box-shadow: inset 0 0 0 1px rgba(243, 152, 20, .35); }
.as-badge-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.as-badge-star { position: relative; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #f39814; color: #fff; flex: none; }
.as-badge-star svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.as-badge.big { color: #fff; background: linear-gradient(120deg, #f39814, #e0850a 55%, #c86f00); box-shadow: 0 6px 18px rgba(224, 133, 10, .35); }
.as-badge.big .as-badge-star { background: #fff; color: #e0850a; }
.as-badge.new { animation: as-badge-in .55s cubic-bezier(.2, 1.4, .4, 1) both; }
.as-badge.new .ach-shine { animation: ach-shine 1.3s ease .3s both; }
.as-badge.new .as-badge-star { animation: ach-pop .7s cubic-bezier(.2, 1.6, .4, 1) .15s both; }
.as-badge.new .spark { animation: ach-spark .9s ease-out .35s both; }
.as-badge.big.new { animation: as-badge-in .55s cubic-bezier(.2, 1.4, .4, 1) both, ach-toast-glow 1.6s ease .4s; }
@keyframes as-badge-in { from { opacity: 0; transform: scale(.5) translateY(6px); } }
.as-stars { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px 4px 7px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #fff; background: linear-gradient(120deg, #f39814, #e0850a); box-shadow: 0 4px 12px rgba(224, 133, 10, .3); animation: ach-pop .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.as-stars svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .as-badge:not(.big) { color: #ffcb7d; background: rgba(243, 152, 20, .14); } }
:root[data-theme="dark"] .as-badge:not(.big) { color: #ffcb7d; background: rgba(243, 152, 20, .14); }
@media (prefers-reduced-motion: reduce) {
  .as-badge.new, .as-badge.new .ach-shine, .as-badge.new .as-badge-star, .as-badge.new .spark, .as-stars { animation: none; }
}
.as-badge:not(.big) .spark { background: #f39814; }
/* the conversation's subject in the drawer's head: it settles in when named or renamed */
.as-subject { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: as-subject-in .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes as-subject-in { from { opacity: 0; transform: translateY(4px); filter: blur(2px); } }
@media (prefers-reduced-motion: reduce) { .as-subject { animation: none; } }
.as-name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* what happened on the day (today.js TodayCard; last on a phone, the third across at a desk): the weight, the calories against the average, the goals */
@media (min-width: 1280px) {
  .day-body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .day-body > .happened-card { grid-column: 3; grid-row: 1; align-self: stretch; }
}
.happened-rows { list-style: none; margin: 0; padding: 2px 16px 12px; display: grid; gap: 12px; }
.happened-rows li { display: flex; align-items: center; gap: 12px; }
.happened-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--bg); color: var(--muted); flex: none; }
.happened-ico svg { width: 18px; height: 18px; }
.happened-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.happened-txt b { font-size: 15px; }
.happened-txt small { color: var(--muted); font-size: 13px; }
.happened-chip { flex: none; padding: 4px 9px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--bg); color: var(--muted); }
.happened-chip.down { background: rgba(46, 139, 87, .12); color: #2e8b57; }
.happened-chip.up { background: rgba(243, 152, 20, .14); color: #c06f00; }
.happened-chip.goal { background: rgba(243, 152, 20, .14); color: #c06f00; }
.happened-bar { position: relative; display: block; height: 7px; margin-top: 6px; border-radius: 4px; background: var(--line); overflow: visible; }
.happened-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--teal-600, #16526a); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.happened-bar b { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text); opacity: .55; }
.happened-bar.goal em { position: absolute; top: 0; bottom: 0; border-radius: 0 4px 4px 0; background: #f39814; box-shadow: 0 0 8px rgba(243, 152, 20, .6); }
.happened-fresh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 16px 14px; border-top: 1px solid var(--line); font-size: 13px; }
.happened-fresh b { color: var(--muted); font-weight: 600; margin-right: 2px; }
.happened-fresh .chip { padding: 3px 9px; border-radius: 999px; background: rgba(243, 152, 20, .12); box-shadow: inset 0 0 0 1px rgba(243, 152, 20, .35); }

/* AI use: per behandler this month, and the packs of extra use (billing.js AiUsage / AiPacks; the drawer's offer) */
.ai-people { list-style: none; margin: 10px 0 4px; padding: 0; border-top: 1px solid var(--line); }
.ai-people li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ai-people li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-packs { margin-top: 12px; }
.ai-packs-head { font-size: 14px; margin-bottom: 2px; }
.ai-pack-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.as-buy .ai-packs { margin-top: 8px; }

/* Profil → Forretning: NetSlank's own (company 1's behandlere only) — amber, set apart from the clinic's rows */
.list li.special { position: relative; background: linear-gradient(100deg, rgba(243, 152, 20, .12), rgba(243, 152, 20, .03) 70%); box-shadow: inset 3px 0 0 #f39814; }
.list li.special .ico { background: linear-gradient(135deg, #f7ab3b, #e0850a); color: #fff; box-shadow: 0 4px 10px rgba(224, 133, 10, .35); }
.list li.special .txt b { color: #b36400; display: flex; align-items: center; gap: 8px; }
.list li.special > svg:last-child { color: #e0850a; }
.list li.special:active { background: rgba(243, 152, 20, .2); }
.special-tag { padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #e0850a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .list li.special .txt b { color: #ffc46b; } }
:root[data-theme="dark"] .list li.special .txt b { color: #ffc46b; }

/* ---------- the day at a desk: the gauge as a bar along the top, lines edited where they stand ---------- */
/* room under the plan, so the last meal can be scrolled up and its search list opens with space under it */
.day-screen.roomy { padding-bottom: max(45vh, 320px); }
.mini-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 45; padding: calc(var(--safe-t) + 8px) calc(24px + var(--side)) 8px; color: #fff;
  background: radial-gradient(40% 140% at 50% 0%, rgba(161, 202, 226, .16) 0%, transparent 70%), linear-gradient(180deg, var(--teal-800), var(--teal-900));
  border-radius: 0 0 20px 20px;
  /* raised over the page: a close contact shadow, a softer one further down, and a light edge along the bottom */
  box-shadow: 0 1px 2px rgba(12, 44, 57, .18), 0 6px 14px rgba(12, 44, 57, .22), 0 18px 40px rgba(12, 44, 57, .24), inset 0 -1px 0 rgba(255, 255, 255, .08);
  transform: translateY(-110%); visibility: hidden; transition: transform .32s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .32s; }
.mini-bar.on { transform: none; visibility: visible; transition: transform .32s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
@media (prefers-reduced-motion: reduce) { .mini-bar, .mini-bar.on { transition: none; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mini-bar { box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 14px rgba(0, 0, 0, .45), 0 18px 40px rgba(0, 0, 0, .5), 0 1px 0 rgba(161, 202, 226, .22), inset 0 -1px 0 rgba(255, 255, 255, .1); } }
:root[data-theme="dark"] .mini-bar { box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 14px rgba(0, 0, 0, .45), 0 18px 40px rgba(0, 0, 0, .5), 0 1px 0 rgba(161, 202, 226, .22), inset 0 -1px 0 rgba(255, 255, 255, .1); }
.mb-row { display: flex; align-items: center; gap: 18px; height: 44px; }
.mb-row button { color: inherit; }
.mb-date, .mb-burn { display: flex; align-items: center; gap: 6px; flex: none; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap;
  background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.07)); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.mb-date svg, .mb-burn svg, .mb-eaten svg { width: 16px; height: 16px; }
.mb-burn svg { color: var(--fat-d); }
.mb-burn small { font-weight: 400; color: rgba(255,255,255,.75); }
.mb-gauge { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; }
.mb-eaten { display: flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 600; flex: none; }
.mb-track { flex: 1; min-width: 80px; display: flex; flex-direction: column; gap: 3px; }
.mb-outer, .mb-inner { display: flex; overflow: hidden; background: rgba(255,255,255,.14); }
.mb-outer { height: 10px; border-radius: 5px; }
.mb-inner { height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); }
.mb-track i { display: block; height: 100%; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.mb-left { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; flex: none; }
.mb-left small { font-size: 12px; color: rgba(255,255,255,.75); }
.mb-left b { font-size: 18px; font-weight: 600; }
.mb-left b.over { color: var(--fat-d); }
.mb-dist { display: flex; gap: 14px; flex: none; font-size: 12px; white-space: nowrap; color: rgba(255,255,255,.85); }
.mb-dist > span { display: flex; align-items: center; gap: 4px; }
.mb-dist i { width: 8px; height: 8px; border-radius: 50%; }
.mb-dist b { font-size: 13px; font-weight: 600; color: #fff; }
.mb-dist small { color: rgba(255,255,255,.6); }
@media (max-width: 999px) { .mb-dist { display: none; } }
/* lines scrolled into view stop below the bar */
.day-screen.roomy .entries li { scroll-margin-top: 90px; scroll-margin-bottom: 16px; }
.day-screen.roomy .ie-list { scroll-margin-bottom: calc(var(--safe-b) + 110px); } /* clear of the tab bar */

/* "Tilføj vare" under a meal's lines */
.entries li.add-row { gap: 10px; padding-top: 8px; padding-bottom: 8px; color: var(--muted); font-size: 14px; cursor: pointer; -webkit-user-select: none; user-select: none; }
.entries li.add-row svg { width: 16px; height: 16px; }
.entries li.add-row:hover { color: var(--accent); background: var(--teal-50); }
/* a line being edited: the search field, the amount and its unit, the kcal */
.entries li.inline-edit { position: relative; gap: 8px; padding: 6px 10px 6px 16px; background: var(--teal-50); box-shadow: inset 3px 0 0 var(--accent); }
.inline-edit .ie-title { flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 15px; }
.inline-edit .ie-title:focus, .ie-amount:focus-within { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22, 82, 106, .15); }
.ie-amount { display: flex; align-items: center; flex: none; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.ie-amount.off { opacity: .45; }
.ie-amount input { width: 54px; padding: 6px 2px 6px 8px; border: 0; background: none; text-align: right; font-size: 15px; outline: none; }
.ie-unit { max-width: 70px; padding: 6px 8px 6px 4px; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ie-unit:not([disabled]):hover { color: var(--accent); }
.ie-more { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--muted); }
.ie-more:hover { background: var(--surface); color: var(--accent); }
.ie-more svg { width: 18px; height: 18px; }
/* the search's list, over what comes below */
.ie-list { position: absolute; left: 8px; right: 8px; top: calc(100% + 4px); z-index: 30; list-style: none; margin: 0; padding: 6px; max-height: 340px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); font-style: normal; }
.entries .ie-list li { gap: 10px; padding: 8px 10px; border: 0; border-radius: 8px; cursor: pointer; }
.entries .ie-list li.hi { background: var(--teal-50); }
.ie-list small { flex: none; color: var(--muted); font-size: 12px; white-space: nowrap; }
.entries .ie-list li.ie-head { padding: 4px 10px 2px; cursor: default; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.entries .ie-list li.ie-extra { color: var(--accent); font-weight: 600; font-size: 14px; }
.ie-extra svg { width: 16px; height: 16px; flex: none; }
.ie-extra .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }