/* The compact interface (redesign.js). Loaded after style.css; only applies once the app has opened a profile (body.compact-ui). */

/* ---------- bottom: input row and the four sections ---------- */
#bar.compact { flex-wrap: wrap; gap: 6px; padding: 6px 10px 0; }
#bar.compact textarea { flex: 1 1 0; order: 4; min-width: 0; min-height: 44px; padding: 11px 14px; font-size: 15px; }
#bar.compact #cam { order: 1; } #bar.compact #gallery { order: 2; } #bar.compact #scan { order: 3; }
#bar.compact #mic { order: 5; margin-left: 0; } #bar.compact #send { order: 6; display: none; }
#bar.compact.typing #send { display: inline-flex; } #bar.compact.typing #mic { display: none; }
#bar.compact .round { width: 44px; height: 44px; min-width: 44px; }
#bnav { order: 10; flex: 1 0 100%; display: grid; grid-template-columns: repeat(4, 1fr); margin: 4px -10px 0; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--line); }
#bnav .bn { border: 0; background: none; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0 6px; min-height: 52px; font-size: 12px; font-weight: 500; }
#bnav .bn .pill { width: 32px; height: 3px; border-radius: 2px; background: transparent; margin-bottom: 2px; }
#bnav .bn.on { color: var(--ink); font-weight: 700; }
#bnav .bn.on .pill { background: var(--primary); }
body.compact-ui { padding-bottom: calc(132px + env(safe-area-inset-bottom)); }
body.compact-ui #top { padding: 2px 4px 0; }
body.compact-ui #top h1 { font-size: 20px; }
body.compact-ui .tabs { display: none; }

/* ---------- status lines ---------- */
.spill { display: flex; align-items: center; gap: 8px; min-height: 36px; margin-top: 6px; padding: 0 6px 0 14px; border-radius: 18px; font-size: 13px; background: var(--banner-bg); color: var(--banner-fg); }
.spill.info { background: var(--info-bg); color: var(--info-fg); }
.spill.muted { background: var(--surface-2); color: var(--muted); }
.spill-act { border: 0; background: none; color: inherit; font-weight: 700; min-height: 36px; padding: 0 8px; }
.spill-x { border: 0; background: none; color: inherit; min-width: 36px; min-height: 36px; }

/* ---------- Today ---------- */
.chead { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.chead .arrow { width: 44px; height: 44px; border: 0; border-radius: 22px; background: none; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.chead .arrow:disabled { opacity: .35; }
.chead .ctitle { flex: 1; border: 0; background: none; color: var(--ink); display: flex; flex-direction: column; align-items: center; line-height: 1.15; min-height: 44px; justify-content: center; }
.chead .ctitle small { font-size: 11px; color: var(--muted); }
.chead .ctitle b { font-size: 16px; }
body.compact-ui .week { margin: 2px 0 6px; gap: 2px; }
body.compact-ui .week .day { min-height: 44px; font-size: 11px; border-radius: 12px; }
body.compact-ui .week .day b { font-size: 14px; }
body.compact-ui .week .day i { width: 5px; height: 5px; }
body.compact-ui .card { border-radius: 18px; padding: 12px 14px; margin-top: 6px; }
.csum { display: flex; flex-direction: column; gap: 9px; border: 1px solid var(--line); }
.csum-top { display: flex; align-items: flex-end; gap: 10px; }
.csum-top small { font-size: 12px; color: var(--muted); }
.csum .big { font-family: var(--font-display); font-weight: 800; font-size: 38px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.csum .big.words { font-size: 22px; letter-spacing: 0; }
.csum .big span { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.csum-side { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 12px; color: var(--muted); }
.csum-side b { color: var(--ink); }
.mbar { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.mbar > i { display: block; height: 100%; border-radius: 4px; }
.mac4s { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mac4 { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mac4 > span { font-size: 11px; color: var(--muted); }
.mac4 > b { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mac4 > b small { font-weight: 500; color: var(--muted); font-size: 12px; }
.mac4 .mbar { height: 4px; }
.cfocus { margin-top: -2px; }
.chip.sm { min-height: 44px; padding: 0 12px; font-size: 13px; gap: 6px; }
.chip.sm .plus { color: var(--green-t); }
.crow { padding-top: 8px; }
.qrow { margin-top: 4px; }
.qrow .cap { margin: 4px 2px 0; }
.btn.sm { min-height: 44px; padding: 0 16px; }
.usual { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 8px 8px 12px; border: 1.5px dashed var(--line); border-left: 4px solid var(--ac); border-radius: 16px; }
.usual .grow { display: flex; flex-direction: column; min-width: 0; }
.usual small { font-size: 11px; color: var(--muted); }
.usual b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcard { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--ac); border-radius: 16px; padding: 2px 12px; margin-top: 8px; }
.mhead { display: flex; align-items: center; gap: 8px; min-height: 38px; }
.mhead b.grow { font-size: 15px; }
.mp { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }
.mk { min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
.mhead .mk { color: var(--kcal); }
.frow { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; border-top: 1px solid var(--surface-2); background: none; color: var(--ink); text-align: left; font-size: 14px; }
.frow:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 8px; }
.fname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- section headers and segmented controls ---------- */
.phead { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.phead h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 22px; }
.seg { display: flex; gap: 4px; padding: 4px 0 2px; overflow-x: auto; scrollbar-width: none; }
.seg button { flex: none; min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--line); background: none; color: var(--muted); font-size: 13px; }
.seg button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 700; }

/* ---------- Chat ---------- */
.bubble.card-b { align-self: flex-start; width: 86%; max-width: 420px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.cb-h { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--green-t); }
.cb-r { display: flex; gap: 8px; font-size: 14px; }
.cb-t { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--surface-2); padding-top: 6px; margin-top: 2px; font-size: 14px; }

/* ---------- Progress ---------- */
.seg.rng button { min-height: 36px; padding: 0 10px; font-size: 12px; }
.seg.mini { padding: 0 0 6px; }
.seg.mini button { min-height: 36px; padding: 0 12px; font-size: 12px; }
.hl { background: var(--primary-c) !important; color: var(--on-primary-c); border: 0; }
.hl-top { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.hl-top > span:first-child { flex: 1; }
.hl .streak { background: var(--primary); color: var(--on-sel); border-radius: 10px; padding: 2px 8px; font-weight: 700; }
.hl p { margin: 6px 0 0; font-size: 15px; line-height: 1.35; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kpi > span { font-size: 12px; color: var(--muted); }
.kpi > div { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.kpi b { font-family: var(--font-display); font-size: 20px; font-variant-numeric: tabular-nums; }
.kpi small { font-size: 11px; color: var(--muted); }
.card .kpi { background: var(--surface-2); border: 0; }
.dl { font-size: 12px; font-weight: 700; color: var(--muted); }
.dl.good { color: var(--green-t); } .dl.bad { color: var(--red-t); }
.pcard { border: 1px solid var(--line); }
.pc-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.pc-h b { flex: 1; font-size: 14px; }
.pc-h span { font-size: 12px; color: var(--muted); }
.lgd { display: flex; gap: 10px; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.lgd span { display: inline-flex; align-items: center; gap: 4px; }
.lgd i { width: 8px; height: 8px; border-radius: 2px; }
.sqs { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 4px; margin-bottom: 6px; }
.sqs.many { grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 3px; }
.sq { aspect-ratio: 1; min-height: 16px; border: 0; padding: 0; border-radius: 4px; }
.sq.pm { box-shadow: inset 0 -3px 0 var(--card), inset 0 -5px 0 var(--ink); }
.tip { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--surface-2); font-size: 13px; line-height: 1.35; }
.tip i { width: 10px; height: 10px; border-radius: 3px; background: var(--amber); flex: none; margin-top: 4px; }
.wmini { display: flex; align-items: center; gap: 12px; width: 100%; border: 1px solid var(--line); color: var(--ink); text-align: left; }
.wm-l { display: flex; flex-direction: column; min-width: 110px; }
.wm-l span { font-size: 12px; color: var(--muted); }
.wm-l b { font-family: var(--font-display); font-size: 20px; }
.down { color: var(--green-t); font-weight: 700; font-size: 12px; } .up { color: var(--amber-t); font-weight: 700; font-size: 12px; }
details.more summary { cursor: pointer; font-weight: 700; min-height: 32px; display: flex; align-items: center; }
.vb { position: relative; height: 110px; display: flex; align-items: flex-end; gap: 2px; }
.vb.thin { gap: 1px; }
.vb > span { flex: 1; border-radius: 2px; min-width: 0; }
.vb .goal, .wk .goal { position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--ink); opacity: .45; }
.ax { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 4px; }
.avg { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.an { width: 58px; font-size: 12px; color: var(--muted); }
.at { position: relative; flex: 1; height: 8px; border-radius: 4px; background: var(--surface-2); }
.at > i { display: block; height: 100%; border-radius: 4px; }
.at > em { position: absolute; top: -3px; bottom: -3px; left: 80%; width: 2px; background: var(--ink); opacity: .6; }
.av { width: 74px; text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.av b { color: var(--ink); }
.avg .dl { width: 42px; text-align: right; }
.split { display: flex; height: 26px; border-radius: 6px; overflow: hidden; font-size: 11px; font-weight: 700; color: #06210f; }
.split span { display: flex; align-items: center; padding-left: 6px; white-space: nowrap; overflow: hidden; }
.ft { display: flex; align-items: center; gap: 6px; min-height: 32px; border-top: 1px solid var(--surface-2); font-size: 13px; }
.ft.h { font-size: 11px; color: var(--muted); border-top: 0; min-height: 22px; }
.ft > span:not(.grow) { width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
.ft > span:last-child { width: 64px; }
.eff { font-style: normal; font-weight: 700; font-size: 12px; border-radius: 9px; padding: 1px 7px; }
.eff.ok { background: var(--ok-bg); color: var(--ok-fg); } .eff.warn { background: var(--warn-bg); color: var(--warn-fg); } .eff.bad { background: var(--bad-bg); color: var(--bad-fg); }
.wk { position: relative; height: 96px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; }
.wkc { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; height: 100%; }
.wkc small { font-size: 10px; color: var(--muted); }
.wkc span { width: 100%; border-radius: 4px; }
.wkl { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; text-align: center; margin-top: 4px; }
.wkl div { display: flex; flex-direction: column; font-size: 11px; }
.wkl small { color: var(--green-t); }
.hrs { display: grid; grid-template-columns: repeat(19, minmax(0, 1fr)); gap: 2px; height: 34px; }
.hrs span { border-radius: 3px; background: var(--carb); }
.ml { display: flex; align-items: center; gap: 8px; min-height: 30px; font-size: 13px; }
.mln { width: 84px; display: inline-flex; align-items: center; gap: 6px; }
.mln i { width: 8px; height: 8px; border-radius: 2px; }
.bestday { display: flex; align-items: center; gap: 10px; width: 100%; border: 1px solid var(--line); color: var(--ink); text-align: left; font-size: 13px; }
.bestday > i { width: 10px; height: 10px; border-radius: 3px; background: var(--green); flex: none; }
.bestday .open { color: var(--green-t); font-size: 12px; }
.wtop { display: flex; align-items: baseline; gap: 10px; }
.wtop b { font-family: var(--font-display); font-size: 24px; }
.wtop small { margin-left: auto; font-size: 11px; color: var(--muted); }
.limitc { background: var(--primary-c) !important; color: var(--on-primary-c); }
.limitc .pc-h span { color: inherit; }

/* ---------- fixes after the first look ---------- */
.usual .grow { flex: 1; }
.usual .btn, .usual .chip { width: auto; flex: none; margin: 0; }
#bar.compact textarea { font-size: 14px; padding: 12px 12px; }
#bar.compact textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* My foods and My meals */
.lib-q{width:100%;box-sizing:border-box;margin:0 0 6px}
.lib-list{max-height:58vh;overflow:auto;margin:0 -4px;padding:0 4px}
.lib-pad{padding:12px 4px}
.lib-more{display:block;margin:6px auto 0}
.lib-row{display:block;width:100%;text-align:left;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:8px 10px;margin:0 0 6px;cursor:pointer;font:inherit}
.lib-row.lib-meal{border-left:5px solid var(--ac);background:color-mix(in srgb,var(--ac) 7%,var(--card))}
.lib-main{display:flex;align-items:baseline;gap:8px;min-width:0}
.lib-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lib-when{flex:none}
.lib-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.lib-amt{display:flex;align-items:center;gap:4px;flex:none}
.lib-amt.off{opacity:.35;pointer-events:none}
.lib-pm{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:16px;padding:0;line-height:1;cursor:pointer}
.lib-amt input{width:54px !important;height:30px !important;min-height:0 !important;min-width:0;flex:none;text-align:center;padding:2px 4px;font-size:14px;box-sizing:border-box}
.lib-u{font-size:13px;color:var(--muted);width:12px}
.lib-amtrow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0}
.lib-line{display:flex;align-items:center;gap:6px;padding:2px 0}
.lib-tick{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:none;border:0;color:var(--ink);font:inherit;font-size:14px;text-align:left;padding:2px 0;min-height:36px;cursor:pointer}
.lib-box{flex:none;width:20px;height:20px;border-radius:6px;border:2px solid var(--line);color:transparent;font-size:13px;line-height:16px;text-align:center}
.lib-tick.on .lib-box{background:var(--ink);border-color:var(--ink);color:var(--card)}
.lib-tag{flex:none;font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:10px;padding:1px 6px}
.lib-h{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:8px 0 2px}
.lib-tot{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;font-weight:700;font-size:13px;padding:5px 10px;border:1px solid var(--line);border-radius:12px;margin:2px 0 6px}
.lib-tot b{font-size:17px}
.lib-sticky{position:sticky;top:-1px;z-index:2;background:var(--card)}

/* Kitchen: compact batches */
.kb-list{margin-top:8px}
.kb-row{padding:7px 0 6px;border-bottom:1px solid var(--line);cursor:pointer}
.kb-row:last-child{border-bottom:0}
.kb-top{display:flex;align-items:center;gap:8px;min-width:0}
.kb-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.kb-left{flex:none;font-weight:700;font-size:13px;white-space:nowrap}
.kb-more{flex:none;width:36px;height:30px;border-radius:15px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:18px;line-height:1;cursor:pointer}
.kb-row .bar{margin:4px 0 3px !important;height:5px}
.kb-meta{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lib-chips{flex-wrap:wrap;overflow:visible;margin:0 0 2px;gap:6px}
.lib-chips .chip{min-height:32px;padding:4px 12px;font-size:13px}