/* Redesign, Oct 2026: flat colour, glass cards, rings, pager. Loaded after style.css so it overrides it. */
:root {
  --bg: #f3f3f1; --card: #ffffff; --soft: #eceae6; --line: rgba(21, 23, 31, .09);
  --glass: rgba(255, 255, 255, .7); --glass-line: rgba(255, 255, 255, .95);
  --track: rgba(21, 23, 31, .09); --dash: rgba(21, 23, 31, .28);
  --accent: #d93a3f; --accent-soft: rgba(217, 58, 63, .12); --accent-ink: #ffffff; --choice: #1e48f0; --choice-soft: rgba(30, 72, 240, .13); --choice-ink: #ffffff; --done: #16a06d; --done-ink: #ffffff;
  --good: #16a06d; --ok: #1e48f0; --warn: #e08a1e; --bad: #e0454a;
  --shadow: 0 10px 30px rgba(70, 70, 100, .12), inset 0 1px 0 rgba(255, 255, 255, .9);
  --r: 26px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d0d0f; --card: #1b1c21; --soft: rgba(255, 255, 255, .07); --line: rgba(255, 255, 255, .09);
    --glass: rgba(255, 255, 255, .065); --glass-line: rgba(255, 255, 255, .13);
    --track: rgba(255, 255, 255, .12); --dash: rgba(255, 255, 255, .3);
    --accent: #ff6b70; --accent-soft: rgba(255, 107, 112, .16); --accent-ink: #1a0a0b; --choice: #6b8cff; --choice-soft: rgba(107, 140, 255, .16); --choice-ink: #08121d; --done: #3ccf8e; --done-ink: #04140c;
    --good: #5be0a5; --ok: #6b8cff; --warn: #ffb454; --bad: #ff7070;
    --shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .1);
  }
}
/* appearance switch in Settings: Auto follows the phone, Light and Dark force it */
html[data-mode=light] {
  color-scheme: light;
  --bg: #f3f3f1; --card: #ffffff; --ink: #1d1f24; --mute: #5f6570; --soft: #eceae6; --line: rgba(21, 23, 31, .09);
  --glass: rgba(255, 255, 255, .7); --glass-line: rgba(255, 255, 255, .95); --track: rgba(21, 23, 31, .09); --dash: rgba(21, 23, 31, .28);
  --accent: #d93a3f; --accent-soft: rgba(217, 58, 63, .12); --accent-ink: #ffffff; --choice: #1e48f0; --choice-soft: rgba(30, 72, 240, .13); --choice-ink: #ffffff; --done: #16a06d; --done-ink: #ffffff; --good: #16a06d; --ok: #1e48f0; --warn: #e08a1e; --bad: #e0454a;
  --shadow: 0 10px 30px rgba(70, 70, 100, .12), inset 0 1px 0 rgba(255, 255, 255, .9);
}
html[data-mode=dark] {
  color-scheme: dark;
  --bg: #0d0d0f; --card: #1b1c21; --ink: #eceef2; --mute: #8e94a0; --soft: rgba(255, 255, 255, .07); --line: rgba(255, 255, 255, .09);
  --glass: rgba(255, 255, 255, .065); --glass-line: rgba(255, 255, 255, .13); --track: rgba(255, 255, 255, .12); --dash: rgba(255, 255, 255, .3);
  --accent: #ff6b70; --accent-soft: rgba(255, 107, 112, .16); --accent-ink: #1a0a0b; --choice: #6b8cff; --choice-soft: rgba(107, 140, 255, .16); --choice-ink: #08121d; --done: #3ccf8e; --done-ink: #04140c; --good: #5be0a5; --ok: #6b8cff; --warn: #ffb454; --bad: #ff7070;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .1);
}
/* the Purpose tab is its own darker room, in soft blue */
html[data-theme=purpose] {
  --bg: #121318; --card: #1c1d23; --soft: rgba(255, 255, 255, .07); --ink: #f4f4f6; --mute: rgba(244, 244, 246, .62); --line: rgba(255, 255, 255, .08);
  --glass: rgba(255, 255, 255, .06); --glass-line: rgba(255, 255, 255, .1); --track: rgba(255, 255, 255, .11); --dash: rgba(255, 255, 255, .28);
  --accent: #9cc6f2; --accent-soft: rgba(156, 198, 242, .16); --accent-ink: #0c1722; --choice: #6b8cff; --choice-soft: rgba(107, 140, 255, .16); --choice-ink: #08121d; --done: #3ccf8e; --done-ink: #04140c;
  --good: #5be0a5; --ok: #6b8cff; --warn: #ffb454; --bad: #ff7070; --shadow: 0 10px 30px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .08);
  color-scheme: dark;
}

.card, .glass { background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); border-radius: var(--r);
 }
.card { padding: 16px; }
.mid { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.big { font-size: 38px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.acc { color: var(--accent); } .warn { color: var(--warn); }
.chead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.chead h3 { margin: 0; font-size: 17px; font-weight: 800; }

/* bottom bar: a glass pill of tabs and a round + */
#app { top: 0; left: 0; right: 0; bottom: auto; height: 100%; }
/* screen fit modes (Settings > Screen) */
html[data-fit=remeasure] #app { height: var(--app-h, 100%); }
html[data-fit=tall] #app { height: 100vh; height: 100lvh; }
html[data-fit=free], html[data-fit=free] body { overflow: visible; }
html[data-fit=free] #app { height: 100vh; height: 100lvh; }
.scr { width: 100%; border-collapse: collapse; font-size: 13px; } .scr td { padding: 5px 0; border-bottom: 1px solid var(--line); } .scr td:last-child { text-align: right; font-weight: 700; }
html.ruler::before { content: 'layout bottom'; position: fixed; left: 0; right: 0; bottom: 0; height: 3px; background: #e0454a; color: #e0454a; font: 700 10px/1 sans-serif; z-index: 90; pointer-events: none; }
html.ruler::after { content: ''; position: fixed; left: 0; right: 0; top: calc(100lvh - 3px); height: 3px; background: #16a06d; z-index: 90; pointer-events: none; }
.tabs { background: var(--bg); box-shadow: none; padding: 6px 14px calc(6px + env(safe-area-inset-bottom) * .55); }
.tabs-in { display: flex; gap: 10px; align-items: center; max-width: 640px; margin: 0 auto; }
.tabs-pill { flex: 1; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 6px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); }
.tabs .tabs-pill button { min-height: 56px; padding: 7px 0 6px; border-radius: 999px; gap: 2px; }
.tabs .tabs-pill button em { font-size: 10.5px; font-weight: 700; }
.tabs .tabs-pill button.on { background: var(--accent-soft); color: var(--accent); }
.tabs .plus { flex: none; width: 60px; height: 60px; margin: 0; transform: none; box-shadow: 0 8px 26px color-mix(in srgb, var(--accent) 40%, transparent); }

/* quick-log fan: icon and name on a round button, around the + */
.fan-item { width: 66px; height: 66px; margin: -33px 0 0 -33px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; font-weight: 800; color: var(--ink); }
.fan-item.on { transform: scale(1.22); background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 34px color-mix(in srgb, var(--accent) 60%, transparent); }
.fan-item.sub { width: 58px; height: 58px; margin: -29px 0 0 -29px; font-size: 11px; }
#fan.sticky { pointer-events: auto; } #fan.sticky .fan-item { cursor: pointer; }

/* rings */
.rw { position: relative; display: inline-block; flex: none; }
.rw svg { display: block; overflow: visible; }
.rtrk { fill: none; stroke: var(--track); stroke-width: 5.5; }
.rtrk.dash { stroke: var(--dash); stroke-dasharray: 3 6; stroke-linecap: round; }
.rarc { fill: none; stroke-width: 5.5; stroke-linecap: round; transition: stroke-dasharray .4s ease; stroke: var(--accent); }
.rarc.good { stroke: var(--good); } .rarc.ok { stroke: var(--ok); } .rarc.warn { stroke: var(--warn); } .rarc.bad { stroke: var(--bad); }
.rtrk.bad { stroke: color-mix(in srgb, var(--bad) 35%, var(--track)); }
.rc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: var(--accent); line-height: 1.1; }
.rc b { font-size: 16px; color: var(--ink); } .rc i { font-style: normal; font-size: 10.5px; color: var(--mute); font-weight: 700; }
.rl { font-size: 12px; font-weight: 700; color: var(--mute); }
.rs { font-size: 11px; font-weight: 600; color: var(--mute); line-height: 1.2; }
.rs.dots { display: flex; gap: 4px; justify-content: center; align-items: center; height: 13px; } .rs.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--mute); opacity: .6; }
.rv { font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.rv small { font-size: 12px; color: var(--mute); font-weight: 700; }

/* week strip and pager */
.wkstrip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding-top: 8px; touch-action: pan-y; }
.wd { background: none; border: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; color: var(--ink); cursor: pointer; min-height: 56px; }
.wd small { font-size: 12px; font-weight: 600; color: var(--mute); }
.dc { width: 38px; height: 38px; box-sizing: border-box; border-radius: 50%; border: 3px solid transparent; display: grid; place-items: center; font-size: 15px; font-weight: 700; }
.dc.r0.past { border-color: var(--bad); } .dc.r1 { border-color: var(--warn); } .dc.r2 { border-color: var(--ok); } .dc.r3 { border-color: var(--good); }
.dc.sel { background: var(--ink); color: var(--bg); }
.dc.is-today:not(.sel) { font-weight: 800; color: var(--accent); }
.pillrow { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.pills { flex: 1; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 4px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); }
.pills button { border: 0; background: none; border-radius: 999px; padding: 9px 0; font-weight: 800; font-size: 13px; color: var(--mute); min-height: 44px; cursor: pointer; }
.pills button.on { background: var(--accent-soft); color: var(--accent); }
.gear { position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--glass-line); background: var(--glass); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow); }
.gear .dot { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; }
.pager { margin: 12px 0 0; touch-action: pan-y; }
.pg { display: none; padding: 0 0 24px; min-width: 0; }
.pg.on { display: block; }
/* swiping: the page under the finger and the one coming in sit side by side; the neighbour is lifted out of the flow */
.pager.swiping { position: relative; overflow: hidden; }
.pager.swiping .pg { will-change: transform; }
.pager.swiping .pg.peek { display: block; position: absolute; top: 0; left: 0; right: 0; }
.pg.on.next { animation: pgin .22s ease-out; --dx: 24px; } .pg.on.prev { animation: pgin .22s ease-out; --dx: -24px; }
@keyframes pgin { from { opacity: 0; transform: translateX(var(--dx, 0)); } to { opacity: 1; transform: none; } }
/* changing day: the week strip glides in from the side you swiped towards, and the page eases in after it */
.wkstrip.wk-next { animation: wkin .28s cubic-bezier(.2, .8, .2, 1); --dx: 56px; } .wkstrip.wk-prev { animation: wkin .28s cubic-bezier(.2, .8, .2, 1); --dx: -56px; }
@keyframes wkin { from { opacity: 0; transform: translateX(var(--dx)); } to { opacity: 1; transform: none; } }
.pager.day-next .pg.on { animation: dayin .26s ease-out; --dy: 14px; } .pager.day-prev .pg.on { animation: dayin .26s ease-out; --dy: 14px; } .pager.day-same .pg.on { animation: dayin .2s ease-out; --dy: 8px; }
@keyframes dayin { from { opacity: 0; transform: translateY(var(--dy, 0)); } to { opacity: 1; transform: none; } }
.dc { transition: background-color .2s, color .2s; }

/* body page */
.calcard { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.rside { background: none; border: 0; text-align: right; color: var(--ink); padding: 0; cursor: pointer; min-height: 44px; }
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sleepcard .chead { margin-bottom: 0; } .sleepcard .chead h3 { font-size: 22px; }
/* Today's cards: bigger titles sitting nearer the top, less empty space above them */
.wcell > .card { padding-top: 11px; } .wcell .chead { margin-bottom: 6px; } .wcell .chead h3 { font-size: 22px; letter-spacing: -.01em; } .sleepcard .rcol { padding-top: 0; }
.tbox { border-radius: 20px; background: var(--soft); padding: 10px 8px; text-align: center; min-width: 0; }
.tbox .tl { font-size: 11.5px; font-weight: 700; color: var(--mute); min-height: 28px; }
.tbox input[type=time] { width: 100%; min-width: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 18px; font-weight: 800; text-align: center; min-height: 40px; padding: 0; margin: 4px 0; }
.tbox .now { width: 100%; min-height: 44px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); font-weight: 800; border: 0; cursor: pointer; font-size: 14px; }
.rcol { background: none; border: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 0; color: var(--ink); cursor: pointer; min-width: 0; }
.rcol .rl { font-size: 13px; font-weight: 800; color: var(--ink); }
.grid2b { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rbox { display: flex; align-items: center; gap: 10px; padding: 10px; min-height: 76px; border-radius: 20px; background: var(--soft); border: 0; text-align: left; color: var(--ink); cursor: pointer; min-width: 0; }
.rt { display: flex; flex-direction: column; min-width: 0; }
.wline { display: flex; align-items: center; gap: 10px; background: var(--soft); border-radius: 20px; padding: 10px; }
.wrow { display: flex; gap: 12px; align-items: center; flex: 1; min-width: 0; cursor: pointer; }
.wrow .grow { display: flex; flex-direction: column; min-width: 0; }
.wic { width: 44px; height: 44px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.pbtn { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; flex: none; }

/* habits page */
.hhead { display: flex; align-items: center; gap: 14px; }
.swipebtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.hlist { padding: 4px 14px; }
.hrow { display: flex; align-items: center; gap: 4px; width: 100%; min-height: 48px; border-bottom: 1px solid var(--line); background: var(--card); position: relative; }
.hmain { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 48px; background: none; border: 0; color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; padding: 0; }
.grip { flex: none; width: 44px; height: 48px; display: grid; place-items: center; color: var(--mute); opacity: .7; touch-action: none; cursor: grab; }
.wrowedit.dragging { position: relative; z-index: 5; box-shadow: var(--shadow); border-radius: 14px; background: var(--card); }
.step svg { display: block; }
.hrow.dragging { z-index: 5; box-shadow: var(--shadow); border-radius: 14px; background: var(--card); opacity: .98; }
.hrow:last-child { border-bottom: 0; }
.hrow.done .grow { color: var(--mute); }
.hck { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--dash); display: grid; place-items: center; flex: none; color: #fff; }
.hck.on { background: var(--good); border-color: var(--good); } .hck.later { border-color: var(--warn); } .hck.next { border-color: var(--accent); }

/* food page */
.grid3b { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.ftile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border-radius: 24px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); color: var(--ink); cursor: pointer; }
.ftile .rl { color: var(--ink); font-size: 13px; font-weight: 800; }
.shortcuts { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.shortcuts button { min-height: 48px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); color: var(--ink); font-weight: 800; font-size: 13px; cursor: pointer; }

/* add food: three ways, then your cookbook */
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.way { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 12px; min-height: 104px; border-radius: 20px; background: var(--soft); border: 1px solid var(--line); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.way b { font-size: 15px; } .way small { font-size: 11.5px; color: var(--mute); line-height: 1.3; font-weight: 600; }
.wico { width: 38px; height: 38px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.way:nth-child(n+3) .wico { background: var(--track); color: var(--ink); }
/* food picker: search plus scan / new product, and the layer that sits above a sheet */
.fp-acts { display: flex; gap: 8px; margin-top: 8px; } .fp-acts .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.layer { position: fixed; inset: 0; z-index: 25; background: rgba(10, 12, 20, .5); display: flex; align-items: flex-end; justify-content: center; }
.layer-panel .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.layer-panel { background: var(--card); color: var(--ink); width: 100%; max-width: 640px; max-height: 94%; overflow: auto; border-radius: 26px 26px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); }
.scanbox { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: #000; }
.scanvid { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanbox.plate { aspect-ratio: 3 / 4; max-height: 62vh; }
.shutter { position: absolute; left: 50%; bottom: 16px; width: 70px; height: 70px; margin-left: -35px; padding: 0; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .95); background: rgba(255, 255, 255, .35); box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .25); cursor: pointer; }
.shutter:active { background: rgba(255, 255, 255, .8); }
.shutter:disabled { opacity: .4; }
.scanframe { position: absolute; left: 12%; right: 12%; top: 32%; bottom: 32%; border: 3px solid rgba(255, 255, 255, .85); border-radius: 14px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .28); pointer-events: none; }
.togo { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 18px; background: var(--soft); margin-bottom: 10px; font-size: 14px; }
.afcard { display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 20px; background: var(--soft); margin-bottom: 8px; }
.afcard .grow b { display: block; font-size: 15.5px; line-height: 1.2; }
.aft { width: 56px; height: 56px; border-radius: 15px; background: var(--track); display: grid; place-items: center; overflow: hidden; flex: none; color: var(--mute); }
.aft img { width: 100%; height: 100%; object-fit: cover; }
.fit { padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); font-size: 12px; font-weight: 800; flex: none; }
.estcard { background: var(--accent-soft); border-radius: 22px; padding: 14px 16px; margin: 10px 0 12px; }
.step { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--track); color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; }
.irow .step + input { margin: 0 2px; }
.irow input { width: 68px; }
.seg { background: var(--glass); border: 1px solid var(--glass-line); border-radius: 999px; padding: 4px; box-shadow: var(--shadow); }
.seg button { border-radius: 999px; font-weight: 800; }
.seg button.on { background: var(--accent-soft); color: var(--accent); box-shadow: none; }

/* meal prep and shopping */
.prow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.prow .grow b { display: block; font-size: 15px; line-height: 1.2; }
.pcount { min-width: 44px; text-align: center; font-weight: 800; font-size: 16px; }
.step.on { background: var(--accent-soft); color: var(--accent); }
.dashbtn { width: 100%; min-height: 48px; margin-top: 8px; border-radius: 16px; border: 1.5px dashed var(--dash); background: none; color: var(--accent); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.hv { border-radius: 18px; padding: 10px 12px; } .hv small { display: block; font-size: 12px; font-weight: 800; } .hv b { font-size: 24px; }
.hv.good { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.hv.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.note { margin: 10px 0; padding: 10px 14px; border-radius: 16px; background: color-mix(in srgb, var(--warn) 13%, transparent); font-size: 13px; font-weight: 600; line-height: 1.4; }
.shopgrp { padding: 12px 14px 4px; }
.shoprow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; background: none; border: 0; border-top: 1px solid var(--line); color: var(--ink); font-size: 15.5px; text-align: left; cursor: pointer; padding: 0; }
.shoprow b { color: var(--mute); font-size: 15px; }
.shoprow.on .grow, .shoprow.on b { text-decoration: line-through; color: var(--mute); }

/* progress graphs */
.gcard .chead { align-items: flex-start; }
.gchart { width: 100%; height: auto; display: block; margin-top: 4px; }
.gchart .gaxis { stroke: var(--line); stroke-width: 1; }
.gchart .gl { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.gchart .gd { fill: var(--accent); opacity: .85; }
.gchart .gb { fill: var(--accent); } .gchart .gb.good { fill: var(--good); } .gchart .gb.warn { fill: var(--warn); } .gchart .gb.bad { fill: var(--bad); }
.gchart .gtar { stroke: var(--accent); stroke-opacity: .85; stroke-width: 1.5; stroke-dasharray: 4 5; }
.gchart .gavg { stroke: var(--mute); stroke-width: 1.2; stroke-dasharray: 2 4; }
.gchart .gt { fill: var(--mute); font-size: 9.5px; font-weight: 600; }
.rangechips { display: flex; gap: 6px; margin-top: 8px; }
.rangechips button { border: 0; border-radius: 999px; padding: 0 14px; min-height: 40px; font-size: 12.5px; font-weight: 800; background: none; color: var(--mute); cursor: pointer; }
.rangechips button.on { background: var(--ink); color: var(--bg); }
.gridw { display: grid; grid-template-columns: 78px repeat(7, minmax(0, 1fr)); align-items: center; row-gap: 6px; }
.gh { text-align: center; font-size: 11px; color: var(--mute); font-weight: 700; }
.gr { font-size: 13px; font-weight: 700; }
.gc { display: flex; justify-content: center; }

/* money */
.grid3b3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.act { min-height: 78px; border-radius: 22px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-weight: 800; font-size: 12.5px; cursor: pointer; }
.act svg { color: var(--accent); }
.act.wide { min-height: 54px; border-radius: 999px; flex-direction: row; font-size: 14px; gap: 8px; }
.mt { border-radius: 22px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); padding: 12px; }
.mt small { display: block; font-size: 12px; color: var(--mute); font-weight: 700; } .mt b { font-size: 19px; letter-spacing: -.02em; } .mt b.good { color: var(--good); }
.txnlist { padding: 4px 14px; }
.monthnav { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.catrow { display: block; width: 100%; padding: 10px 0; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.catrow:last-child { border-bottom: 0; } .catrow .bar { margin: 6px 0 4px; } .catrow.on b { color: var(--accent); }
.txn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 0; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); text-align: left; cursor: pointer; min-height: 60px; }
.txn:last-child { border-bottom: 0; }
.txn .grow { display: flex; flex-direction: column; min-width: 0; } .txn b { font-size: 15px; }
.tic { width: 40px; height: 40px; border-radius: 14px; background: var(--soft); display: grid; place-items: center; flex: none; color: var(--ink); }
.tic.in { color: var(--good); }
.tamt { font-weight: 800; font-size: 15px; } .tamt.in { color: var(--good); }
.acctile { background: var(--soft); border: 0; border-radius: 18px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink); cursor: pointer; min-width: 0; }
.acctile b { font-size: 15px; }
.dashcard { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 10px; border-radius: 24px; border: 1.5px dashed var(--dash); background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.dashcard .grow { display: flex; flex-direction: column; }
.pbtn.soft { background: var(--accent-soft); color: var(--accent); }
.two3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; }
.card.flat { box-shadow: none; background: var(--soft); border-color: transparent; margin-bottom: 10px; }
.payline { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 8px; }
.pf { flex: 1; min-width: 0; } .pf.grow2 { flex: 2; } .pf small { display: block; font-size: 11px; font-weight: 700; color: var(--mute); }
.pf input { width: 100%; font: inherit; font-size: 16px; font-weight: 700; color: var(--ink); background: var(--card); border: 2px solid transparent; border-radius: 12px; padding: 8px 10px; min-height: 44px; outline: none; }
.pf input:focus { border-color: var(--accent); }
.pf.amt { text-align: right; } .pf.amt b { display: block; font-size: 16px; padding: 12px 0; color: var(--accent); }
.tgl { width: 52px; height: 32px; border-radius: 999px; border: 0; background: var(--track); position: relative; cursor: pointer; flex: none; padding: 0; }
.tgl i { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: left .15s; }
.tgl.on { background: var(--good); } .tgl.on i { left: 23px; }

/* purpose */
.wstrip { display: flex; gap: 2px; align-items: flex-end; height: 26px; margin-top: 12px; }
/* empty weeks are soft filled ticks: outlined ones read as a row of zeros */
.wstrip i { flex: 1; height: 8px; border-radius: 2px; background: var(--soft); }
.wstrip i.fut { opacity: .55; }
.wstrip i.log { height: 16px; background: color-mix(in srgb, var(--accent) 38%, transparent); border-color: transparent; }
.wstrip i.done { height: 16px; background: var(--good); border-color: transparent; }
.wstrip i.cur { height: 26px; background: var(--accent); border-color: transparent; }
.chal { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.chrow { display: flex; align-items: center; gap: 12px; background: none; border: 0; color: var(--ink); text-align: left; min-height: 48px; cursor: pointer; padding: 0; font: inherit; }
.chrow .grow { display: flex; flex-direction: column; }
.chrow.on .grow b { text-decoration: line-through; color: var(--mute); }
.intent { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; color: var(--mute); font-weight: 600; }
.micbtn { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 35%, transparent); flex: none; }
.lcard { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; margin-bottom: 8px; border-radius: 22px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); color: var(--ink); text-align: left; cursor: pointer; font: inherit; min-height: 60px; }
.lcard .grow { display: flex; flex-direction: column; min-width: 0; } .lcard b { font-size: 15.5px; line-height: 1.25; }
.card .lcard { box-shadow: none; background: var(--soft); border-color: transparent; }
.chatdock { position: sticky; bottom: 8px; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 8px; margin-top: 14px; border-radius: 999px; background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid var(--glass-line); box-shadow: var(--shadow); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); z-index: 2; }
.chatdock input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 16px; outline: none; min-height: 44px; }
.cav { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 800; flex: none; }
.cav.big { width: 60px; height: 60px; font-size: 26px; }
.cbtn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; cursor: pointer; flex: none; }
.chatlog { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.bub { max-width: 86%; padding: 12px 14px; border-radius: 20px; line-height: 1.45; white-space: pre-wrap; }
.bub.me { align-self: flex-end; background: var(--accent-soft); border-radius: 20px 20px 6px 20px; }
.bub.bot { align-self: flex-start; background: var(--glass); border: 1px solid var(--glass-line); border-radius: 6px 20px 20px 20px; }
.bub.off { color: var(--mute); }
.minibars { display: flex; align-items: flex-end; gap: 3px; height: 74px; }
.minibars i { flex: 1; border-radius: 4px; background: var(--accent); min-width: 3px; }
.minibars i.none { background: var(--track); } .minibars i.good { background: var(--good); } .minibars i.ok { background: var(--ok); } .minibars i.warn { background: var(--warn); } .minibars i.bad { background: var(--bad); }
.titlein { width: 100%; font: inherit; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); background: none; border: 0; outline: none; padding: 6px 0; }
.bare { width: 100%; font: inherit; font-size: 16px; line-height: 1.5; color: var(--ink); background: none; border: 0; outline: none; resize: vertical; margin-top: 6px; }
.rangef { display: block; margin: 8px 0 14px; } .rangef input { width: 100%; accent-color: var(--accent); }
.lbl { margin: 10px 4px 6px; font-weight: 700; }
.filters { margin-bottom: 8px; } .filters summary { cursor: pointer; padding: 8px 4px; font-size: 13px; font-weight: 700; color: var(--mute); list-style: none; }
.filters summary::-webkit-details-marker { display: none; } .filters summary::after { content: ' ▾'; } .filters[open] summary::after { content: ' ▴'; }
.hd { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--track); }
.hd.Solid { background: var(--good); } .hd.Wobbly { background: var(--warn); } .hd.Neglected { background: var(--bad); }
.tag2 { padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--accent-soft); color: var(--accent); }
.chk3 { padding: 10px 0; border-top: 1px solid var(--line); } .chk3 .seg { margin-top: 8px; }
.minutes { white-space: pre-wrap; font: inherit; font-size: 14.5px; line-height: 1.55; margin: 8px 0 0; }
.ygrid { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 4px; }
.yc { aspect-ratio: 1; border-radius: 6px; border: 1.5px solid var(--line); background: none; color: var(--mute); font-size: 9px; font-weight: 800; cursor: pointer; padding: 0; }
.yc.log { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); }
.yc.done { background: var(--good); border-color: var(--good); color: #fff; }
.yc.cur { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.legend { display: flex; gap: 14px; margin-top: 12px; font-size: 11.5px; font-weight: 700; color: var(--mute); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -2px; border: 1.5px solid var(--line); }
.legend i.cur { background: var(--accent); border-color: var(--accent); } .legend i.log { background: var(--accent-soft); } .legend i.done { background: var(--good); border-color: var(--good); }
.recbox { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 22px; background: var(--soft); margin-bottom: 12px; }
.recbtn { width: 60px; height: 60px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; cursor: pointer; flex: none; }
.recbtn.on { background: var(--bad); color: #fff; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bad) 45%, transparent); } 50% { box-shadow: 0 0 0 12px transparent; } }

/* widgets */
.wgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wcell.L { grid-column: span 2; } .wcell > .card, .wcell > .ftile { margin: 0; height: 100%; }
.wide-btn { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; color: var(--ink); cursor: pointer; font: inherit; }
.wide-btn .grow { display: flex; flex-direction: column; }
.wrowedit { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.wrowedit .grow { display: flex; flex-direction: column; min-width: 0; } .wrowedit b { font-size: 14.5px; }
.seg.mini { padding: 3px; } .seg.mini button { min-width: 36px; padding: 6px 8px; min-height: 36px; font-size: 12.5px; }
.gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.galtile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border-radius: 20px; background: var(--soft); border: 1px solid var(--line); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.galtile i { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; }

/* full-screen sheets (Log work, Edit meal) */
/* mood: three steps on a dark full screen */
.sheet.moodsheet { position: fixed; inset: 0; height: 100%; max-height: none !important; max-width: none; border-radius: 0; padding: calc(8px + env(safe-area-inset-top)) 0 0; background: #000; color: #f4f4f6; display: flex; flex-direction: column; overflow: hidden; --line: rgba(255, 255, 255, .1); --serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif; }
.mhead { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px 8px; }
.mround { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #f4f4f6; display: grid; place-items: center; cursor: pointer; padding: 0; }
.mround.ghost { background: none; }
.mround svg { display: block; }
.mtitle { display: block; color: #fff; margin: 4px 26px 0; font-family: var(--serif); font-size: 31px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; text-align: center; }
.mquads { margin: auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; padding: 24px 26px calc(40px + env(safe-area-inset-bottom)); }
.mquad { aspect-ratio: 1; border: 0; border-radius: 50%; background: linear-gradient(180deg, var(--c1), var(--c2)); color: #1d2333; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 8px; font-family: var(--serif); cursor: pointer; box-shadow: var(--ring) 0 4px color-mix(in srgb, var(--c2) 72%, #000 8%); }
.mquad b { font-size: 21px; font-weight: 700; line-height: 1.2; }
.mquad:active { transform: scale(.97); }
.msearch { width: 100%; min-height: 46px; border: 0; border-radius: 999px; padding: 0 16px; background: rgba(255, 255, 255, .12); color: #f4f4f6; font: inherit; font-size: 16px; outline: none; }
.msearch::placeholder { color: rgba(255, 255, 255, .5); }
.mfield::-webkit-scrollbar { display: none; }
.mfield { scrollbar-width: none; flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; position: relative; }
.mgrid { position: relative; }
.mb { position: absolute; width: 104px; height: 104px; border-radius: 50%; border: 0; padding: 8px; display: grid; place-items: center; color: #1d2333; font-family: var(--serif); font-size: 16px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; cursor: pointer; will-change: transform; transition: opacity .15s, box-shadow .15s; }
.mb.on { box-shadow: 0 0 0 3px #f4f4f6, 0 10px 30px rgba(0, 0, 0, .5); }
.mb.dim { opacity: .18; }
.mcard { flex: none; min-height: 100px; display: flex; align-items: center; gap: 12px; margin: 8px 12px calc(12px + env(safe-area-inset-bottom)); padding: 14px 14px 14px 20px; border-radius: 28px; background: #1c1c20; }
.mcard .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mcard b { font-size: 22px; font-weight: 700; font-family: var(--serif); } .mcard span { font-size: 15px; color: rgba(255, 255, 255, .85); line-height: 1.3; }
.mnext { flex: none; width: 64px; height: 64px; border-radius: 50%; border: 0; background: #f4f4f6; color: #141518; display: grid; place-items: center; cursor: pointer; padding: 0; }
.mstep { font-weight: 800; font-size: 17px; }
.mbody { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 16px 16px; }
.mchosen { border-radius: 24px; padding: 18px 20px; color: #141518; display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.mchosen b { font-size: 28px; font-weight: 700; font-family: var(--serif); } .mchosen span { font-size: 15px; font-weight: 600; }
.mline { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; margin-bottom: 14px; border-radius: 20px; background: #1c1c20; font-size: 14px; line-height: 1.35; }
.mline b { font-size: 16px; } .mline .mute { color: rgba(255, 255, 255, .55); }
.mgroup { margin-bottom: 14px; } .mgroup label { display: block; margin: 0 2px 8px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .6); }
.moodsheet .chip { background: rgba(255, 255, 255, .1); color: #f4f4f6; } .moodsheet .chip.on { background: #f4f4f6; color: #141518; }
.mgroup textarea, .mgroup input[type=time] { width: 100%; border: 0; border-radius: 16px; padding: 12px 14px; background: rgba(255, 255, 255, .1); color: #f4f4f6; font: inherit; font-size: 16px; outline: none; color-scheme: dark; }
.mrow { display: flex; align-items: center; gap: 12px; } .mrow label { margin: 0; flex: none; } .mrow input { flex: 1; }
.mbar { flex: none; display: flex; gap: 10px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .1); }
.mbar .btn { flex: 1; min-height: 52px; } .mbar .btn.ghost { background: rgba(255, 255, 255, .1); color: #f4f4f6; }
.mdot { flex: none; width: 34px; height: 34px; border-radius: 50%; margin-right: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.chip.rm { color: var(--bad); }
.mdots { display: flex; flex-wrap: wrap; gap: 12px; padding: 2px 0 4px; }
.mdots .mdot { width: 46px; height: 46px; margin: 0; padding: 0; border: 0; cursor: pointer; }
.mdots .mdot.add { background: none; box-shadow: none; border: 2px dashed var(--line); color: var(--accent); display: grid; place-items: center; }
.sheet.full { height: 100%; max-height: none !important; border-radius: 0; max-width: none; padding: calc(10px + env(safe-area-inset-top)) 16px 0; display: flex; flex-direction: column; overflow: hidden; }
.fullhead { flex: none; display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
.fullhead h3 { margin: 0; font-size: 22px; }
.fullbody { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 6px 0 18px; }
.fullbar { flex: none; display: flex; gap: 10px; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--card); }
.fullbar .btn { flex: 1; min-height: 52px; }
/* inputs inside the grey cards are always boxes, not only once tapped */
.card.flat .field input, .card.flat .field select, .card.flat .field textarea { background: var(--card); border: 2px solid var(--line); }
.card.flat .field input:focus { border-color: var(--accent); }
.field input[type=date], .field input[type=time] { min-width: 0; width: 100%; -webkit-appearance: none; appearance: none; text-align: left; }
.expline { margin-bottom: 10px; }
.rcpt { display: flex; align-items: center; gap: 12px; margin-top: -2px; }
.rcptbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px dashed var(--dash); background: none; color: var(--accent); font-weight: 700; font-size: 13px; cursor: pointer; }
.expthumb { width: 56px; height: 56px; object-fit: cover; border-radius: 12px; background: var(--soft); }

/* income */
.seg5 button { font-size: 12.5px; padding: 8px 2px; }
.comingcard { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; color: var(--ink); cursor: pointer; font: inherit; }
.comingcard .grow { display: flex; flex-direction: column; }
.wkstep { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.wkstep .grow { display: flex; flex-direction: column; text-align: center; } .wkstep b { font-size: 17px; }
.jobblock { background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); border-radius: var(--r); padding: 4px 14px; margin-bottom: 10px; }
.jobhead { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.jobhead .grow { display: flex; flex-direction: column; } .jobhead b { font-size: 16px; }
.jobamt { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .jobamt b { font-size: 16px; }
.tagc { font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--soft); color: var(--mute); }
.tagc.good { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.tagc.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.tagc.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.datebox { width: 46px; height: 50px; border-radius: 14px; background: var(--soft); display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; }
.datebox small { font-size: 10.5px; font-weight: 800; color: var(--mute); text-transform: uppercase; } .datebox b { font-size: 18px; line-height: 1.1; }
b.good { color: var(--good); } b.bad { color: var(--bad); } b.warn { color: var(--warn); }

.rc .u { font-size: 11px; font-weight: 700; color: var(--mute); margin: 0 2px 0 1px; }

/* Colour roles (v36): red (the accent) = add or log something, so the eye goes there first;
   blue = choosing an option (selected chips, tabs, links, focus, charts); green = done (Save, Done, Log it, Mark as paid). */
.btn { background: var(--done); color: var(--done-ink); }
.chip.on { background: var(--choice); color: var(--choice-ink); }
.seg button.on, .pills button.on, .tabs .tabs-pill button.on, .step.on { background: var(--choice); color: var(--choice-ink); }
.tabs button.on, .icon-btn.flat.on, .catrow.on b, details.more summary, #toast button { color: var(--choice); }
.link { color: var(--choice); }
.link[data-a="add"], .link[data-a="today"] ~ .link[data-a="add"], [data-a="add"].link { color: var(--accent); }
.cal .d.sel, .yc.cur, .legend i.cur { background: var(--choice); border-color: var(--choice); color: var(--choice-ink); }
.cal .d.today { box-shadow: inset 0 0 0 2px var(--choice), var(--shadow); }
.yc.log { background: var(--choice-soft); border-color: color-mix(in srgb, var(--choice) 40%, transparent); color: var(--choice); }
.dc.is-today:not(.sel) { color: var(--choice); }
.tag2 { background: var(--choice-soft); color: var(--choice); }
.wheel-band { background: color-mix(in srgb, var(--choice) 14%, transparent); }
.chk input, .rangef input { accent-color: var(--choice); }
:focus-visible, label:focus-within { outline-color: var(--choice); }
.stat:focus-within { box-shadow: 0 0 0 2px var(--choice); }
.search:focus, .field input:focus, .field select:focus, .field textarea:focus, .irow input:focus, .pf input:focus, .card.flat .field input:focus { border-color: var(--choice); }
.rarc, .rarc.accent, .tile .arc { stroke: var(--choice); }
.bar > i, .minibars i { background: var(--choice); }
.gchart .gl, .gchart .gtar { stroke: var(--choice); } .gchart .gd, .gchart .gb { fill: var(--choice); }
.wstrip i.log { background: color-mix(in srgb, var(--choice) 38%, transparent); } .wstrip i.cur { background: var(--choice); }
.cav { background: var(--choice); color: var(--choice-ink); }
/* buttons that add or log something straight away stay red; ones that finish a form are green */
.btn[data-a="add"], .btn.sm[data-x="log"], .btn[data-a="eatleft"], .btn[data-a="cook"], .btn[data-a="finplanadd"], #capture .btn { background: var(--accent); color: var(--accent-ink); }
.pbtn.soft { background: var(--choice-soft); color: var(--choice); }
/* "Log it" buttons (a whole meal or session going into the log) are near-black, calm and clean;
   red stays for adding to a tracker (+ Add food, Add squats, the + button) */
.btn[data-x="log"], .btn.sm[data-x="log"], .btn[data-a="add"][data-v="meal"], .pbtn[data-a="add"][data-v="meal"], .pbtn[data-a="add"][data-v="workout"] { background: var(--ink); color: var(--bg); }

/* the + is near-black like the Log buttons */
.tabs .plus { background: var(--ink); color: var(--bg); box-shadow: 0 8px 26px rgba(0, 0, 0, .28); }
.fan-item.on { background: var(--ink); color: var(--bg); box-shadow: 0 0 34px rgba(0, 0, 0, .3); }

/* Settings › Colours: a strip per tracker with three handles */
.band { padding: 12px 0 10px; border-top: 1px solid var(--line); } .band:first-of-type { border-top: 0; }
.bstrip { position: relative; height: 14px; margin: 16px 14px 6px; touch-action: none; }
.bsegs { position: absolute; inset: 0; border-radius: 999px; overflow: hidden; background: var(--track); }
.bsegs i { position: absolute; top: 0; bottom: 0; }
.bsegs i.bad { background: var(--bad); } .bsegs i.warn { background: var(--warn); } .bsegs i.ok { background: var(--ok); } .bsegs i.good { background: var(--good); }
.bh { position: absolute; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .3), inset 0 0 0 2px rgba(21, 23, 31, .12); touch-action: none; cursor: grab; }
.bh.on { transform: scale(1.15); cursor: grabbing; }
.bh:focus-visible { outline: 3px solid var(--choice); outline-offset: 2px; }
.bnums { position: relative; height: 18px; margin: 0 14px; font-size: 12px; font-weight: 800; }
.bnums span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.bsay { font-size: 12px; color: var(--mute, #5f6570); margin-top: 4px; }

/* Today cards sit higher: less space above the titles, sleep rings a touch smaller */
.wcell > .card { padding-top: 8px; padding-bottom: 12px; } .wcell .chead { margin-bottom: 2px; } .wcell .chead h3 { line-height: 1.15; }
.sleepcard .cols3 { gap: 4px; } .sleepcard .rcol { gap: 2px; }
/* two grey dots in the bottom middle = edit or show more, as under the sleep rings */
.editdots { display: flex; gap: 5px; justify-content: center; align-items: center; width: 100%; min-height: 30px; margin: 4px 0 -6px; background: none; border: 0; cursor: pointer; }
.editdots i { width: 6px; height: 6px; border-radius: 50%; background: var(--mute); opacity: .55; }
/* habits: a bar that fills, and ticked rows lifting away */
.hhead { display: block; } .hhead .mid { font-size: 20px; }
.hbar { height: 12px; border-radius: 999px; background: var(--track); overflow: hidden; margin-top: 10px; }
.hbar i { display: block; height: 100%; border-radius: 999px; transition: width .5s cubic-bezier(.2, .8, .2, 1); background: var(--bad); }
.hbar.warn i { background: var(--warn); } .hbar.ok i { background: var(--ok); } .hbar.good i { background: var(--good); }
.hrow.fly { transition: transform .26s ease-in, opacity .26s ease-in; transform: translateY(-46px) scale(.92); opacity: 0; pointer-events: none; }
.hdone { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }
.hdone .hrow { border: 0; background: none; width: 100%; text-align: left; color: var(--mute); font: inherit; cursor: pointer; padding: 0 4px; }
@media (prefers-reduced-motion: reduce) { .hbar i { transition: none; } }
/* the selected tab in the bottom bar is near-black, like the + beside it */
.tabs .tabs-pill button.on { background: var(--ink); color: var(--bg); }

/* half-width (S) cards: the same card, scaled down, so the type shrinks with it */
.calcard.small { flex-direction: column; gap: 8px; }
.calcard.small .big { font-size: 28px; } .calcard.small .mid { font-size: 18px; }
.calcard.small .rside { text-align: left; min-height: 0; }
.wcell.S .chead h3 { font-size: 17px; }
.sleepcard.small { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; border: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.sleepcard.small .ss-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sleepcard.small .ss-l h3 { margin: 0 0 4px; font-size: 17px; font-weight: 800; }
.sleepcard.small .rl { font-size: 13px; font-weight: 800; }
.sleepcard.small .rc b { font-size: 12.5px; letter-spacing: -.02em; white-space: nowrap; } .sleepcard.small .rc b .u { font-size: 9px; }
/* the number wheel keeps its momentum: a flick rolls on through several numbers, a slow let-go stays where it is */
.wheel > div { scroll-snap-stop: normal; }

/* workout sheet: a card per movement, sets as kg × reps, and a dark + Add movement */
.moves { display: flex; flex-direction: column; gap: 10px; }
.mv { background: var(--soft); border-radius: 18px; padding: 10px 12px; }
.mvhead { display: flex; gap: 8px; align-items: center; }
.mvname { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-weight: 800; font-size: 16px; color: var(--ink); padding: 6px 0; }
.mvx { width: 36px; height: 36px; border-radius: 50%; border: 0; background: none; color: var(--mute); font-size: 22px; cursor: pointer; }
.mvlast { margin: 0 0 4px; }
.mvset { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto minmax(0, 1fr) 36px; gap: 8px; align-items: center; padding: 4px 0; }
.mvset input { width: 100%; min-width: 0; box-sizing: border-box; border: 0; border-radius: 10px; background: var(--card); padding: 9px 8px; font: inherit; font-weight: 700; text-align: center; color: var(--ink); }
.mvdel { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--card); color: var(--mute); font-size: 18px; cursor: pointer; }
.mvaddset { padding: 6px 0 0; }
.mvadd { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border: 0; border-radius: 16px; background: var(--ink); color: var(--bg); font: inherit; font-weight: 700; cursor: pointer; }
.mvquick { margin-top: -2px; }
.mvkept { padding: 2px 4px; line-height: 1.45; }
.sheet .mv .mvname { background: none; border: 0; padding: 6px 0; min-height: 0; font-weight: 800; font-size: 16px; }

/* Body card: Measurements opens the figure */
.mbtn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; margin-top: 10px; padding: 0 14px; border: 0; border-radius: 16px; background: var(--soft); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; text-align: left; }
.mbtn .mute { margin-left: auto; font-weight: 500; }
/* Measurements: the figure, the 12 points beside it, and the box to type into */
.mfig { position: relative; width: 100%; max-width: 420px; margin: 0 auto; aspect-ratio: 358 / 560; background: var(--card); border-radius: 26px; }
.mfig svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mbody { fill: color-mix(in srgb, var(--choice) 12%, var(--card)); stroke: color-mix(in srgb, var(--choice) 50%, var(--card)); stroke-width: 2; stroke-linejoin: round; }
.mmus { fill: none; stroke: color-mix(in srgb, var(--choice) 30%, var(--card)); stroke-width: 1.6; stroke-linecap: round; }
.mline { stroke: var(--choice); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: .7; } .mline.on { opacity: 1; stroke-dasharray: none; }
.mdotp { fill: var(--choice); }
.mpts { position: absolute; inset: 0; }
.mpt { position: absolute; width: 22.5%; min-height: 44px; display: flex; flex-direction: column; justify-content: center; padding: 4px 8px; border: 0; border-radius: 12px; background: var(--card); box-shadow: 0 4px 14px rgba(70, 70, 100, .14); font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.mpt span { font-size: 11px; color: var(--mute); } .mpt b { font-size: 14px; } .mpt i { font-style: normal; font-size: 11px; color: var(--choice); font-weight: 700; }
.mpt.old b { color: var(--mute); } .mpt.on { box-shadow: 0 0 0 2px var(--choice), 0 4px 14px rgba(70, 70, 100, .14); }
.mhint { padding: 10px 4px; }
.medit { margin-top: 12px; padding: 12px 14px; border-radius: 18px; background: var(--card); }
.medit label { display: block; margin-bottom: 8px; }
.medit input { flex: 1; min-width: 0; font-size: 20px; font-weight: 800; }
.mpt b.acc { color: var(--accent); }
.medit input { border: 0; border-radius: 12px; background: var(--soft); padding: 10px 12px; color: var(--ink); font-family: inherit; }

/* Screen fit: Lower and Lowest use the Tall height and sit the tab bar nearer the bottom edge */
html[data-fit=lower] #app, html[data-fit=lowest] #app { height: var(--app-h, 100%); }
html[data-fit=lower] .tabs { padding-bottom: 12px; }
html[data-fit=lowest] .tabs { padding-bottom: 3px; }

/* ---------- Motion (from the prototype board) ----------
   A press squashes a little and springs back; sheets spring up from the bottom; cards rise in when you arrive
   on a page; rings fill with a spring and pop when they turn green; the tab you pick gives a small bounce. */
:root { --spring: cubic-bezier(.34, 1.56, .64, 1); --spring-soft: cubic-bezier(.34, 1.25, .64, 1); --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-drawer: cubic-bezier(.32, .72, 0, 1); }
.btn, .pbtn, .chip, .ftile, .rbox, .rcol, .mdot, .tabs-pill button, .tabs .plus, .mbtn, .mvadd, .galtile, .mpt, .wide-btn, .seg button, .pills button {
  transition: transform .16s var(--ease-out), background-color .2s, color .2s, box-shadow .2s; }
:is(.btn, .pbtn, .chip, .ftile, .rbox, .rcol, .mdot, .tabs-pill button, .tabs .plus, .mbtn, .mvadd, .galtile, .mpt, .wide-btn, .seg button, .pills button):active {
  transform: scale(.96); transition-duration: .1s; }
.rarc { transition: stroke-dasharray .6s var(--ease-out), stroke .3s; }
.rw.pop { animation: ringpop .6s var(--spring); }
@keyframes ringpop { 0% { transform: scale(1); } 40% { transform: scale(1.16); } 100% { transform: scale(1); } }
.rise { animation: rise .32s var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.scrim { animation: shadein .25s ease both; }
.scrim > .sheet { animation: sheetup .4s var(--ease-drawer) both; }
@keyframes shadein { from { background-color: transparent; } }
@keyframes sheetup { from { transform: translateY(100%); } to { transform: none; } }
@keyframes tabpop { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .btn, .pbtn, .chip, .ftile, .rbox, .rcol, .mdot, .tabs-pill button, .tabs .plus, .mbtn, .mvadd, .galtile, .mpt, .wide-btn, .seg button, .pills button, .rarc { transition: none; }
  .rise, .rw.pop, .scrim, .scrim > .sheet, .tabs-pill button.on svg { animation: none; }
}
/* the two dots go black while what they open is showing */
.editdots[aria-expanded="true"] i { background: var(--ink); opacity: 1; }
/* a small round icon button (photo of a label, scan) */
.iconbtn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--soft); color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: none; }
/* card titles sit tight in the top-left corner */
.wcell > .card { padding: 6px 12px 12px; } .wcell .chead { margin-bottom: 4px; } .wcell .chead h3 { margin-left: 2px; }

/* Settings: four pages behind buttons at the top; a tracker's target sits beside its name */
/* the Settings tabs stay at the top; a band of page colour behind them so text scrolling up never shows around the pill */
.setbar { position: sticky; top: 0; z-index: 3; margin: 0 -16px 12px; padding: 0 16px 12px; background: linear-gradient(var(--bg) 78%, transparent); }
.setseg { margin: 0; }
.btgt { display: flex; align-items: center; gap: 6px; }
.btgt input { width: 78px; min-height: 36px; padding: 4px 8px; border: 0; border-radius: 10px; background: var(--soft); color: var(--ink); font: inherit; font-weight: 800; text-align: right; }
.band .mute.small .link { padding: 0; min-height: 0; }

/* Full-screen home-screen app: the app now runs under the clock and down to the bottom edge.
   The clock and battery are white in this mode, so a soft dark fade sits behind them to keep them readable. */
@media (display-mode: standalone) {
  body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: calc(env(safe-area-inset-top) + 14px); background: linear-gradient(rgba(10, 12, 20, .42), rgba(10, 12, 20, 0)); z-index: 80; pointer-events: none; }
}

/* New product: a full page like Edit meal. Grey page, white cards, one row per number, a live total, Save at the bottom. */
.layer.full { align-items: stretch; background: var(--bg); }
.layer.full .layer-panel { height: 100%; max-height: none; max-width: none; border-radius: 0; background: var(--bg); padding: calc(10px + env(safe-area-inset-top)) 16px 0; display: flex; flex-direction: column; overflow: hidden; }
.layer.full .fullbar { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.np-src { display: flex; gap: 8px; margin-bottom: 10px; }
.np-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border: 0; border-radius: 999px; background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow); }
.np-msg { margin: -2px 4px 10px; }
.np-msg:empty { display: none; }
.np-card { padding: 6px 14px; margin-bottom: 12px; }
.np-name, .np-brand { display: block; width: 100%; border: 0; background: none; color: var(--ink); font: inherit; outline: none; }
.np-name { font-size: 17px; font-weight: 800; padding: 10px 0 9px; border-bottom: 1px solid var(--line); }
.np-brand { font-size: 15px; padding: 10px 0 8px; }
.np-h { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0 4px; }
.np-row { display: flex; align-items: center; gap: 10px; min-height: 50px; border-top: 1px solid var(--line); margin: 0; }
.np-h + .np-row { border-top: 0; }
.np-row > span { flex: 1; font-weight: 600; font-size: 15px; }
.np-row input { width: 88px; padding: 8px 10px; border: 0; border-radius: 10px; background: var(--soft); color: var(--ink); font: inherit; font-weight: 700; text-align: right; }
.np-row input.np-unit { width: 150px; text-align: left; font-weight: 600; }
.np-row input:focus { outline: 2px solid var(--choice); }
.np-row small { width: 40px; color: var(--mute); font-size: 13px; }
.np-sum { padding: 14px 16px; margin-bottom: 12px; }
.np-kcal { font-size: 28px; letter-spacing: -.02em; }
.np-kcal small { font-size: 14px; color: var(--mute); font-weight: 600; }
.np-macros { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; margin-top: 4px; }
.np-more summary { list-style: none; cursor: pointer; color: var(--mute); font-size: 14px; min-height: 44px; display: flex; align-items: center; padding: 0 4px; }
.np-more summary::-webkit-details-marker { display: none; }
.np-more summary::after { content: ' \203A'; margin-left: 4px; }
.np-more[open] summary::after { content: ' \2304'; }

/* Log workout: same layout as Edit meal and New product */
.sheet.full.wk { background: var(--bg); }
.sheet.full.wk .fullbar { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.sheet.full.wk .fullbar .btn.ghost { display: none; }
.sheet.full.wk .fullbar .btn:not(.danger) { flex: 2; background: var(--done); color: var(--done-ink); }
.sheet.full.wk .fullbar .btn.danger { flex: 1; background: var(--soft); color: var(--bad); }
.sheet.wk .np-row input { width: 104px; min-height: 0; }
.sheet.wk .np-name { min-height: 0; border-radius: 0; }
.sheet.wk textarea[name=notes] { width: 100%; border: 0; background: none; padding: 10px 0; min-height: 80px; resize: vertical; font: inherit; color: var(--ink); outline: none; }
.wkmoves .field { margin: 0; }
.wkmoves .moves { display: flex; flex-direction: column; gap: 0; }
.wkmoves .mv { background: none; border-radius: 0; padding: 8px 0 10px; border-top: 1px solid var(--line); }
.wkmoves .mv:first-child { border-top: 0; }
.wkmoves .mvset input, .wkmoves .mvdel { background: var(--soft); }
.wkmoves .mvadd { margin: 6px 0 10px; background: none; color: var(--ink); border: 1px dashed var(--mute); min-height: 44px; border-radius: 14px; }
.wkmoves .mvquick { margin: 0 0 8px; }
.sheet.full.wk > * { align-self: stretch; }
.sheet.wk .np-row input[type=time] { width: 128px; text-align: right; }

/* Mood, first two pages: one screen split in two. A paler shade at rest; the half under your finger grows and lights up. */
.mpick { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 6px 16px calc(18px + env(safe-area-inset-bottom)); touch-action: none; user-select: none; -webkit-user-select: none; outline: none; }
.mhalf { flex: 1; min-height: 0; border: 0; border-radius: 34px; color: #1d2333; font-family: var(--serif); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; padding: 16px;
  background: color-mix(in srgb, var(--h) 50%, #fff 50%); transform: scale(.97); transition: transform .28s var(--spring, cubic-bezier(.2, .9, .3, 1.2)), opacity .2s ease, background-color .2s ease, box-shadow .28s ease; }
.mhalf b { font-size: 30px; font-weight: 700; line-height: 1.15; }
.mhalf span { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; opacity: .7; }
.mhalf.lit { background: var(--h); opacity: 1; transform: scale(1.02); box-shadow: 0 0 0 2px color-mix(in srgb, var(--h) 60%, #fff), 0 0 44px color-mix(in srgb, var(--h) 70%, transparent); }
@media (prefers-reduced-motion: reduce) { .mhalf { transition: none; } }

/* Finance: each account tile has two grey dots and opens its own page; a dashed tile adds another account */
.acctile .editdots { margin: 2px 0 -6px; min-height: 14px; }
.acctile.add { background: none; border: 1.5px dashed var(--line); color: var(--mute); justify-content: center; gap: 4px; font-weight: 600; }
.sheet.full.acct { background: var(--bg); }
.sheet.full.acct .fullbar { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.sheet.full.acct .fullbar .btn:not(.danger) { flex: 2; background: var(--done); color: var(--done-ink); }
.sheet.full.acct .fullbar .btn.danger { flex: 1; background: var(--soft); color: var(--bad); }
.sheet.acct .np-row input { width: 120px; min-height: 0; }
.sheet.acct .np-name { min-height: 0; border-radius: 0; }
.sheet.acct .np-row > b { font-size: 15px; }

/* How each employer pays: the pay day is a blue thumb you slide along the seven days */
.dayslide { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); height: 44px; padding: 4px; margin: 6px 0 12px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; outline: none; }
.dayslide:focus-visible { box-shadow: inset 0 0 0 2px var(--choice); }
.dsthumb { position: absolute; top: 4px; bottom: 4px; width: calc((100% - 8px) / 7); left: calc(4px + var(--i) * (100% - 8px) / 7); border-radius: 999px; background: var(--choice); box-shadow: 0 2px 8px color-mix(in srgb, var(--choice) 40%, transparent); transition: left .32s var(--spring, cubic-bezier(.2, .9, .3, 1.2)), transform .15s ease; }
.dayslide.drag .dsthumb { transition: none; transform: scaleY(1.08); }
.dsday { position: relative; z-index: 1; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--mute); transition: color .15s ease; }
.dsday.on { color: var(--choice-ink); }
.lumpdate { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-weight: 700; -webkit-appearance: none; appearance: none; }
@media (prefers-reduced-motion: reduce) { .dsthumb { transition: none; } }

/* Mood pages: the two halves touch, and the one under your finger grows and pushes the other down (or up) */
.mpick { gap: 0; }
.mhalf { border-radius: 0; transform: none; flex: 1 1 0; transition: flex-grow .36s var(--spring, cubic-bezier(.2, .9, .3, 1.2)), background-color .2s ease, box-shadow .3s ease; position: relative; }
.mhalf:first-child { border-radius: 34px 34px 0 0; }
.mhalf:last-child { border-radius: 0 0 34px 34px; }
.mhalf.lit { flex-grow: 1.7; transform: none; z-index: 1; box-shadow: 0 0 40px color-mix(in srgb, var(--h) 55%, transparent); }
.mhalf b { transition: font-size .3s ease; }
.mhalf.lit b { font-size: 36px; }

/* The strips (pay day, how often, for work done) share one thumb that slides along n choices */
.dsthumb { width: calc((100% - 8px) / var(--n, 7)); left: calc(4px + var(--i) * (100% - 8px) / var(--n, 7)); }
.dayslide { grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); }
.dsday { font-size: 13px; padding: 0 2px; text-align: center; line-height: 1.1; }
.dayslide[data-n="3"] .dsday { font-size: 12.5px; }
/* Log work: pay, mileage and expenses on single lines */
.card.flat.lw { padding: 8px 12px; margin-bottom: 8px; }
.lwh { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.lwh b { font-size: 15px; }
.lwh .mute { flex: 1; }
.lwh .link { margin-left: auto; min-height: 32px; }
.lwline { display: flex; align-items: center; gap: 6px; margin: 2px 0 6px; }
.payline.lwline { align-items: center; margin: 2px 0 6px; }
.lwline input { width: 70px; min-width: 0; min-height: 40px; padding: 6px 8px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-weight: 700; text-align: center; outline: none; }
.lwline input:focus { border-color: var(--choice); }
.lwline .lwwhat { flex: 1; width: auto; text-align: left; font-weight: 600; }
.lwl { width: 62px; font-size: 15px; }
.lwu { font-size: 12px; color: var(--mute); white-space: nowrap; }
.lwline .pf.amt { margin-left: auto; text-align: right; flex: none; }
.lwline .pf.amt b { padding: 0; font-size: 15px; color: var(--ink); }
.lwlink { display: block; padding: 0 0 4px; min-height: 30px; }
.lwline .step { width: 36px; height: 36px; }
.lwph { position: relative; flex: none; }
.lwph .expthumb { display: block; width: 36px; height: 36px; border-radius: 9px; }
.lwphx { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; border: 0; background: var(--ink); color: var(--card); display: grid; place-items: center; padding: 0; cursor: pointer; }
/* Plans */
.plancard { display: block; width: 100%; text-align: left; font: inherit; color: var(--ink); border: 0; cursor: pointer; padding-bottom: 6px; }
.plkind { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--choice); }
.plbar { height: 8px; background: var(--soft); }
.plbar > i { background: var(--choice); }
.plancard .editdots { margin: 6px 0 -4px; }
.sheet.full.plan { background: var(--bg); }
.sheet.full.plan .fullbar { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.sheet.full.plan .fullbar .btn:not(.danger) { flex: 2; background: var(--done); color: var(--done-ink); }
.sheet.full.plan .fullbar .btn.danger { flex: 1; background: var(--soft); color: var(--bad); }
.sheet.plan .np-row input { width: 130px; min-height: 0; }
.sheet.plan .np-row input.plwhat { flex: 1; width: auto; text-align: left; font-weight: 600; min-width: 0; }
.sheet.plan .plrow input[type=number] { width: 96px; }
.sheet.plan .plrow { gap: 8px; }
.sheet.plan .np-name { min-height: 0; border-radius: 0; }
.plkinds { padding: 10px 0 8px; }
.plad { margin: 8px 0 2px; min-height: 44px; }
.plideas, .plquick { padding: 6px 0 8px; }
.pltotal { border-top: 2px solid var(--ink); margin-top: 6px; }
.pltotal .pltot { font-size: 18px; }
.sheet.plan .np-row input[type=date] { width: 160px; padding-right: 6px; }
/* full-page forms: the white cards sit flat on the grey page. A shadow would be clipped by the scroll area and show as grey bands. */
.sheet.full .card.np-card, .sheet.full .card.np-sum, .layer.full .card.np-card, .layer.full .card.np-sum { box-shadow: none; border: 1px solid var(--line); }

/* Tracking: the body card, with the figure, a period and a chart for the point you tap */
.bodycard .mfig { background: none; max-width: 400px; }
.bodycard .mpt { background: var(--soft); }
.bodycard .mpt.old { opacity: .55; }
.bodycard .rangechips { margin: 10px 0 6px; }
.mchart { margin-top: 4px; }
.bttitle { font-size: 17px; }
.mgrow { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 4px; }
.mgrow b { font-size: 26px; letter-spacing: -.02em; }
.mdelta { font-style: normal; font-weight: 800; font-size: 14px; color: var(--mute); }
.mdelta.up { color: var(--choice); }
.mdelta.down { color: var(--ink); }
.mtiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.mtile { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 10px 10px 8px; border: 0; border-radius: 16px; background: var(--soft); color: var(--ink); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.mtile span { font-size: 11px; color: var(--mute); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtile b { font-size: 16px; } .mtile b small { font-size: 11px; color: var(--mute); font-weight: 600; }
.mtile i { font-style: normal; font-size: 12px; font-weight: 800; }
.mtile.on { box-shadow: 0 0 0 2px var(--choice); }

/* Sleep card: bigger rings, with the numbers inside grown to match */
.sleepcard:not(.small) .rc b { font-size: 19px; letter-spacing: -.02em; white-space: nowrap; }
.sleepcard:not(.small) .rc i { font-size: 12px; }
.sleepcard:not(.small) .rc .u { font-size: 12px; margin: 0 1px 0 0; }

/* Habits: the one up next is just its name, large */
.habitnow { display: grid; place-items: center; min-height: 120px; margin: 12px 0 8px; padding: 18px 20px; text-align: center; }
.habitnow b { font-size: clamp(38px, 12.5vw, 56px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; overflow-wrap: anywhere; }

/* Today > Food: the day's meals under Breakfast, Lunch and Dinner */
.mealhead { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 8px 6px; font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.mealhead span + span { font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--mute); }
.mealempty { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 4px; }

/* Budget: a full page like the plans and accounts */
.sheet.full.bud { --bg: #fff; --card: #f3f3f1; --soft: #e6e5e1; --line: #e1e0dc; --ink: #1d1f24; --mute: #5f6570; background: #fff; color: var(--ink); color-scheme: light; }
.sheet.full.bud .fullbar { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.sheet.full.bud .fullbar .btn { flex: 1; background: var(--done); color: var(--done-ink); }
.sheet.bud .np-row input { width: 120px; min-height: 0; }

/* Wish list */
.wishbtn { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--ink); border: 0; cursor: pointer; }
.wishbtn .grow { display: flex; flex-direction: column; gap: 2px; }
.sheet.full.wish { --bg: #fff; --card: #f3f3f1; --soft: #e6e5e1; --line: #e1e0dc; --ink: #1d1f24; --mute: #5f6570; --dash: rgba(29, 31, 36, .3); --accent: #1d1f24; background: #fff; color: var(--ink); color-scheme: light; }
.sheet.full.wish .fullbar { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.sheet.full.wish .fullbar .btn { flex: 1; background: var(--done); color: var(--done-ink); }
.sheet.wish .np-row input { width: 96px; min-height: 0; }
.sheet.wish .np-row input.plwhat { flex: 1; width: auto; text-align: left; font-weight: 600; min-width: 0; }
.wsitem { border-top: 1px solid var(--line); }
.np-h + .wsitem { border-top: 0; }
.wsitem .wsrow { border-top: 0; gap: 8px; min-height: 52px; }
.wsact { padding: 0 0 8px 52px; margin-top: -6px; }

/* Budget categories: lock, less, amount, more, take away */
.sheet.bud .np-row.bcat { gap: 6px; }
.sheet.bud .np-row.bcat input { width: 72px; padding: 8px 6px; }
.sheet.bud .np-row.bcat.locked input { background: transparent; color: var(--mute); }
.sheet.bud .blk { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--soft); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.sheet.bud .blk.on { background: #1d1f24; color: #fff; }
.sheet.bud .step { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--soft); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.sheet.bud .step.bx { background: none; color: var(--mute); width: 28px; }
.sheet.bud .np-row.bcat.locked .step:not(.bx) { opacity: .35; }
.sheet.bud .badd { gap: 8px; }
.sheet.bud .badd input { flex: 1; width: auto; text-align: left; font-weight: 600; min-width: 0; }
.sheet.bud .badd .btn { flex: none; min-height: 40px; padding: 8px 14px; }
.np-bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--soft); margin: 8px 0 4px; gap: 2px; }
.np-bar i { display: block; height: 100%; }

/* Plan types: two dots under the chips, then a list to add to or take away from */
.sheet.plan .plkdots { display: flex; margin: 0 auto 4px; }
.sheet.plan .plkedit .np-row { border-top: 1px solid var(--line); }
.sheet.plan .plkedit .np-row:first-of-type { border-top: 0; }
.sheet.plan .badd { gap: 8px; }
.sheet.plan .badd input { flex: 1; width: auto; text-align: left; font-weight: 600; min-width: 0; }
.sheet.plan .badd .btn { flex: none; min-height: 40px; padding: 8px 14px; }
.np-sum .row.between { flex-wrap: wrap; gap: 2px 10px; }

/* Budget: tap a category's name for what it is made of */
.sheet.bud .bname { flex: 1; min-width: 0; text-align: left; border: 0; background: none; color: var(--ink); font: inherit; display: flex; flex-direction: column; gap: 0; padding: 4px 0; cursor: pointer; min-height: 44px; justify-content: center; }
.sheet.bud .bname b { font-size: 15px; font-weight: 600; }
.sheet.bud .bname small { width: auto; font-size: 12px; }
.sheet.bud .np-row.hasparts input { background: transparent; color: var(--mute); }
.sheet.bud .np-row.hasparts .step:not(.bx) { opacity: .35; }
.sheet.bud .plrow { gap: 8px; }
.sheet.bud .plrow input[data-k=amount] { width: 96px; }
.sheet.bud .plrow input.plwhat { flex: 1; width: auto; text-align: left; font-weight: 600; min-width: 0; }
.sheet.bud .plad { margin: 8px 0 2px; }
.sheet.bud .plideas { margin: 8px 0 4px; }
.sheet.bud .pltotal { border-top: 1px solid var(--line); margin-top: 8px; }

/* Edge: the whole screen height, nothing clipped at the line iPhone reports as the bottom */
html[data-fit=free], html[data-fit=free] body { overflow: visible; overscroll-behavior: none; }
html[data-fit=free] #main { overscroll-behavior: contain; }
html.ruler body::after { content: ''; position: absolute; left: 0; right: 0; top: calc(100lvh - 3px); height: 3px; background: #1e48f0; z-index: 90; pointer-events: none; }

/* Today > Calendar */
.calhead { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 8px; }
.calnext { margin: 10px 4px 6px; }
.calday { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 8px 6px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); }
.calday.sel { color: var(--ink); }
.calday .link { text-transform: none; letter-spacing: 0; }
.pg .cal .d { box-shadow: none; border: 1px solid var(--line); }
.pg .cal .d.today { box-shadow: inset 0 0 0 2px var(--accent); }
.pg .cal .d.sel { border-color: transparent; }

/* Food rings: one card, three to a row, bigger */
.fringcard { padding: 12px 8px 4px; }
.fringcard .grid3b { gap: 10px 6px; }
.fringcard .ftile .rl { font-size: 14px; font-weight: 800; }
.fringcard .editdots { margin: 2px 0 0; }
.tgl { flex: none; width: 46px; height: 28px; border-radius: 99px; border: 0; background: var(--soft); position: relative; cursor: pointer; padding: 0; }
.tgl::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .18s; }
.tgl.on { background: var(--done); } .tgl.on::after { transform: translateX(18px); }
.arrrings .wrowedit .rname { text-align: left; border: 0; background: none; color: var(--ink); font: inherit; display: flex; flex-direction: column; padding: 0; min-height: 44px; justify-content: center; cursor: pointer; }
.arrrings .wrowedit.off { opacity: .85; }

/* Calculate macros */
.sheet.full.macros { background: var(--bg); }
.sheet.full.macros .fullbar { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.sheet.full.macros .fullbar .btn { flex: 1; background: var(--done); color: var(--done-ink); }
.sheet.full.macros .fullbar .btn:disabled { opacity: .4; }
.mtiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 6px 0; }
.mtl { background: var(--soft); border-radius: 14px; padding: 8px 10px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mtl b { font-size: 17px; font-weight: 800; }
.mgoal { display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.mgoal .step { width: 28px; height: 28px; }
.mdate { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-weight: 800; font-size: 14px; padding: 2px 0; }
.mpace { font-size: 13px; padding: 4px 0 2px; font-weight: 700; } .mpace.good { color: var(--good); } .mpace.warn { color: var(--warn); }
.macdark { background: #1d1f24; color: #fff; border-color: transparent; }
.macdark .mute { color: rgba(255, 255, 255, .7); }
.mkcal { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; } .mkcal small { font-size: 16px; font-weight: 600; opacity: .7; }
.mrow { gap: 8px; } .mrow .mg { width: 62px; text-align: center; font-size: 16px; } .mdot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.sheet.macros .blk { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--soft); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.sheet.macros .blk.on { background: #1d1f24; color: #fff; }
.sheet.macros .step { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--soft); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.sheet.macros .np-row input { width: 90px; min-height: 0; }
#about-me .np-row input { width: 90px; min-height: 0; }
#about-me .step { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--soft); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }

/* Meal planner and the planned meal on Today */
.plhead { margin-bottom: 8px; }
.plhead .plwk { text-align: center; }
.plavg { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.plavg b { font-size: 17px; margin-left: 6px; } .plavg small { color: var(--mute); }
.plday { margin-top: 10px; } .plh { margin: 0 8px 4px; font-size: 13px; font-weight: 800; color: var(--mute); text-transform: uppercase; letter-spacing: .04em; }
.plday.today .plh { color: var(--ink); }
.plslot { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; padding: 6px 4px; cursor: pointer; border-top: 1px solid var(--line); }
.plslot:first-child { border-top: 0; }
.pls { width: 76px; flex: none; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }
.pln { flex: 1; font-weight: 600; font-size: 15px; min-width: 0; } .plpick { flex: 1; color: var(--accent); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; }
.pltag { flex: none; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 99px; background: var(--soft); color: var(--mute); }
.pltag.fit { background: color-mix(in srgb, var(--done) 25%, transparent); color: var(--good); }
.plansheet .plopts { margin-top: 12px; }
.afcard.on { outline: 2px solid var(--choice); }
.plannow .planlbl { letter-spacing: .05em; font-weight: 800; }
.plansum { margin: 4px 8px 12px; }

/* Pay card and invoice */
.sheet.full.paycard .prshift, .sheet.full.invoice .fullbody { }
.prshift { width: 100%; background: none; border: 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.prshift .grow { flex: 1; min-width: 0; }
.sheet.full.paycard .fullbar .btn, .sheet.full.invoice .fullbar .btn { flex: 1; }
.sheet.full.paycard .fullbar .btn:not(.ghost), .sheet.full.invoice .fullbar .btn:not(.ghost) { background: var(--done); color: var(--done-ink); }
.invpaper { background: #fff; color: #1d1f24; border-radius: 14px; padding: 18px 16px; box-shadow: var(--shadow); font-size: 13px; }
.invpaper .mute { color: #5f6570; }
.invname { font-size: 20px; letter-spacing: -.01em; }
.invto { display: flex; flex-direction: column; gap: 2px; margin: 16px 0 14px; } .invto b { font-size: 15px; }
.invh, .invr { display: grid; grid-template-columns: 1.1fr 1.4fr .6fr .8fr .9fr; gap: 6px; padding: 7px 0; align-items: baseline; }
.invh { font-size: 10px; font-weight: 800; color: #5f6570; border-top: 1px solid #e1e0dc; border-bottom: 1px solid #e1e0dc; }
.invr { border-bottom: 1px solid #f0efec; } .invh span:nth-child(n+3), .invr span:nth-child(n+3) { text-align: right; }
.invh2 { margin-top: 16px; font-size: 10px; font-weight: 800; color: #5f6570; padding-bottom: 4px; border-bottom: 1px solid #e1e0dc; }
.invx { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f0efec; }
.invtot { margin-top: 14px; margin-left: 30%; } .invtot > div { display: flex; justify-content: space-between; padding: 4px 0; }
.invgrand { border-top: 1px solid #1d1f24; margin-top: 6px; padding-top: 8px !important; font-weight: 800; font-size: 16px; }

/* October budget: where the month goes */
.budtop { padding: 16px; }
.budsplit { display: flex; height: 10px; border-radius: 99px; overflow: hidden; gap: 2px; margin-top: 10px; background: var(--soft); }
.budsplit i { display: block; height: 100%; }
.budlines { padding: 4px 16px; }
.bln { display: flex; flex-direction: column; gap: 5px; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.bln:last-child { border-bottom: 0; }
.bln .bar { margin-top: 0; }
.bln b { font-size: 14.5px; } .bln .row span { font-size: 14px; }
.sheet.bud .pcost { border-top: 1px solid var(--line); padding-bottom: 8px; } .sheet.bud .np-h + .pcost { border-top: 0; }
.sheet.bud .pcsub { display: flex; align-items: center; gap: 8px; padding: 0 0 2px; }
.sheet.bud .pcsub select, .sheet.bud .pcsub input { min-height: 0; padding: 7px 8px; border: 0; border-radius: 10px; background: var(--soft); color: var(--ink); font: inherit; font-size: 13px; }
.sheet.bud .pcsub select { width: 112px; } .sheet.bud .pcsub input { flex: 1; width: auto; min-width: 0; text-align: left; font-weight: 600; }
.sheet.bud .pcsub small { flex: none; }

/* (old calendar filters, replaced by the board layout below) */
.calfilters { gap: 6px; margin: 4px 0 10px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .calfilters::-webkit-scrollbar { display: none; }
.calfilters .chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; font-size: 13px; }
.cdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.calsum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 10px 8px; margin-top: 10px; text-align: center; }
.calsum div { display: flex; flex-direction: column; gap: 1px; } .calsum b { font-size: 20px; }
.sheet.full.evform .fullbar .btn:not(.danger) { flex: 1; background: var(--done); color: var(--done-ink); }
.sheet.evform .chips.tight { gap: 6px; }
.sheet.evform .np-notes { width: 100%; min-height: 70px; border: 0; background: var(--soft); border-radius: 12px; padding: 10px; color: var(--ink); font: inherit; margin: 6px 0 8px; resize: vertical; }
.sheet.evform .np-row input { width: 150px; min-height: 0; }
.sheet.evform .np-brand, .sheet.evform .np-name { min-height: 0; }

/* Cookbook groups, stars and tags; Cook mode */
.rstars { display: flex; gap: 0; margin: 2px 0 4px; }
.rstars .star { border: 0; background: none; padding: 0 2px; font-size: 17px; line-height: 1; color: var(--track); cursor: pointer; min-height: 28px; min-width: 24px; }
.rstars .star.on { color: #f2b01e; }
.rstars.big .star { font-size: 28px; min-width: 40px; min-height: 40px; }
.rtags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.rtag { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: var(--card); color: var(--mute); }
.rquote { margin-top: 6px; font-style: italic; }
.book-chips.quick .chip { font-size: 13px; }
.sheet.full.cookmode { background: var(--bg); }
.cookbody { display: flex; flex-direction: column; gap: 18px; }
.cstepbar { height: 6px; border-radius: 99px; background: var(--soft); overflow: hidden; } .cstepbar i { display: block; height: 100%; background: var(--done); transition: width .25s; }
.cstep { font-size: 26px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; padding: 6px 2px; }
.ctimer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 18px; background: var(--soft); } .ctimer b { font-size: 36px; font-variant-numeric: tabular-nums; }
.sheet.full.cookmode .fullbar .btn { flex: 1; } .sheet.full.cookmode .fullbar .btn:not(.ghost) { background: var(--done); color: var(--done-ink); }

/* Describe: the foods split out, with weights */
.sheet.full.describe { background: var(--bg); }
.sheet.full.describe .fullbar .btn { flex: 1; }
.dlogged { background: color-mix(in srgb, var(--done) 18%, var(--card)); }
.dfood { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); } .np-card > .dfood:first-of-type { border-top: 0; }
.dfood .grow { min-width: 0; } .dfood b { font-size: 15px; }
.dgrams { display: flex; align-items: center; gap: 4px; flex: none; } .dgrams input { width: 64px; padding: 8px 6px; border: 0; border-radius: 10px; background: var(--soft); color: var(--ink); font: inherit; font-weight: 700; text-align: right; }
.dk { flex: none; width: 74px; text-align: right; font-size: 14px; }

/* Live workout */
.sheet.full.live { background: var(--bg); }
.livehead { gap: 10px; } .livename { width: 100%; border: 0; background: none; color: var(--ink); font: inherit; font-size: 22px; font-weight: 800; padding: 0; outline: none; }
.liverest { display: flex; align-items: center; gap: 12px; } .liverest[hidden] { display: none; } .liverest b { flex: 1; font-size: 28px; font-variant-numeric: tabular-nums; }
.livemove { padding-bottom: 8px; }
.liveset { display: grid; grid-template-columns: 34px 1fr 64px 64px 40px; gap: 6px; align-items: center; padding: 5px 0; border-top: 1px solid var(--line); font-size: 14px; }
.liveset.head { border-top: 0; font-size: 10px; font-weight: 800; color: var(--mute); letter-spacing: .05em; }
.liveset .n { font-weight: 800; text-align: center; }
.liveset input { width: 100%; min-width: 0; padding: 8px 6px; border: 0; border-radius: 10px; background: var(--soft); color: var(--ink); font: inherit; font-weight: 700; text-align: center; min-height: 0; }
.liveset .tick { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--soft); color: var(--mute); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.liveset .tick.on { background: var(--done); color: var(--done-ink); }
.liveset.done input { opacity: .6; }
.wklive { margin: 8px 0 4px; }

/* Today > Calendar, as laid out on the board */
.calwrap { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.calgrid { display: grid; grid-template-columns: minmax(0, 1fr) 146px; column-gap: 14px; }
.caltitle { grid-column: 1; grid-row: 1; align-self: stretch; background: #d93a3f; color: #fff; border-radius: 16px; padding: 8px 18px 9px; display: flex; flex-direction: column; justify-content: center; }
.caltitle h1 { margin: 0; font-size: 29px; font-weight: 800; letter-spacing: -.015em; line-height: 1.1; color: #fff; } .caltitle span { font-size: 17px; font-weight: 600; opacity: .92; line-height: 1.2; }
.calmini { grid-column: 2; grid-row: 1 / 3; align-self: start; margin-bottom: 14px; border: 0; background: var(--card); border-radius: 16px; padding: 7px 8px 8px; font: inherit; color: var(--ink); width: 146px; cursor: pointer; }
.mini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px 2px; font-size: 9px; font-weight: 700; text-align: center; }
.mini .mh { color: var(--mute); opacity: .8; } .mini .md { position: relative; display: grid; place-items: center; height: 15px; border-radius: 50%; }
.mini .md i { position: absolute; left: 50%; bottom: -1px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; } .mini .md.now { background: var(--ink); color: var(--bg); }
.caltab { grid-column: 1; grid-row: 2; align-self: end; position: relative; background: var(--card); border-radius: 22px 22px 0 0; padding: 14px 18px 2px; margin-top: 4px; }
.caltab b { font-size: 25px; line-height: 1.15; letter-spacing: -.01em; }
.caltab::after { content: ''; position: absolute; right: -14px; bottom: 0; width: 14px; height: 14px; background: radial-gradient(circle at 100% 0, transparent 13.5px, var(--card) 14px); }
.calsel { grid-column: 1 / 3; background: var(--card); border-radius: 0 24px 24px 24px; padding: 6px 16px 14px; display: flex; flex-direction: column; gap: 4px; }
.weekline { font-size: 13px; color: var(--mute); padding: 4px 0 2px; } .weekline b { color: var(--ink); }
.ev { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); cursor: default; } .ev[role=button] { cursor: pointer; } .ev.last { border-bottom: 0; }
.evcol { width: 4px; align-self: stretch; border-radius: 4px; flex: none; } .ev b { font-size: 15px; } .evsub { font-size: 12px; color: var(--mute); }
.calday { font-size: 12px; font-weight: 800; color: var(--mute); margin: 10px 4px 0; } .calblock { background: var(--card); border-radius: 22px; padding: 0 16px; }
.caladd { margin-top: 8px; min-height: 54px; border: 0; border-radius: 16px; background: var(--ink); color: var(--bg); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
/* the month page */
.sheet.full.calmonth { background: var(--bg); } .calmbody { display: flex; flex-direction: column; gap: 12px; }
.calmh { margin: 0; font-size: 24px; font-weight: 800; } .roundbtn { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--card); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.calbig { background: var(--card); border-radius: 24px; padding: 10px 8px; }
.calbigh, .calbigg { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; } .calbigh { font-size: 11px; font-weight: 800; color: var(--mute); text-align: center; margin-bottom: 4px; }
.mc { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 58px; padding: 4px 3px; border: 0; border-radius: 12px; background: transparent; font: inherit; color: var(--ink); cursor: pointer; }
.mc.sel { background: color-mix(in srgb, #1e48f0 16%, var(--card)); box-shadow: inset 0 0 0 2px #1e48f0; }
.mc .mn { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; } .mc .mn.now { background: var(--ink); color: var(--bg); }
.mc .mcb { display: flex; flex-direction: column; gap: 2px; width: 100%; } .mc .mcb i { display: block; height: 4px; border-radius: 3px; }
.callegend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--mute); padding: 8px 6px 2px; } .callegend span { display: flex; align-items: center; gap: 5px; } .callegend i { width: 10px; height: 4px; border-radius: 3px; }
.calsum3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .calsum3 div { background: var(--card); border-radius: 18px; padding: 10px 12px; display: flex; flex-direction: column; } .calsum3 span { font-size: 12px; color: var(--mute); } .calsum3 b { font-size: 18px; }
/* add to calendar */
.sheet.full.evform { background: var(--bg); } .evh { margin: 0; font-size: 24px; font-weight: 800; }
.evbody { display: flex; flex-direction: column; gap: 16px; }
.evseg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; background: var(--soft); border-radius: 999px; padding: 4px; }
.evseg button, .evseg2 button { min-height: 44px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 14px; color: var(--mute); cursor: pointer; } .evseg button.on, .evseg2 button.on { background: var(--card); color: var(--ink); font-weight: 700; }
.evf { display: flex; flex-direction: column; gap: 6px; } .evf label, .evlab { font-size: 13px; color: var(--mute); }
.evin { min-height: 50px; box-sizing: border-box; border: 0; border-radius: 14px; padding: 0 14px; background: var(--card); font: inherit; font-size: 16px; color: var(--ink); width: 100%; }
.evtwo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.evtile { display: block; background: var(--card); border-radius: 14px; padding: 8px 14px; } .evtile small { display: block; font-size: 12px; color: var(--mute); } .evtile input { border: 0; background: none; color: var(--ink); font: inherit; font-size: 20px; font-weight: 700; padding: 0; width: 100%; }
.evnote { font-size: 12px; color: var(--mute); } .evinfo { background: var(--card); border-radius: 18px; padding: 12px 14px; font-size: 13px; color: var(--mute); line-height: 1.4; } .evinfo b { color: var(--ink); }
.sheet.evform .chips .chip { min-height: 42px; padding: 0 15px; background: var(--card); } .sheet.evform .chips .chip.on { background: #1e48f0; color: #fff; }
.sheet.full.evform .fullbar.evbar { flex-direction: column; align-items: stretch; gap: 10px; background: var(--card); margin: 0 -16px; padding: 12px 18px 22px; }
.evtime { display: flex; align-items: center; gap: 10px; } .evtime > span { font-size: 13px; color: var(--mute); width: 46px; } .evseg2 { flex: 1; display: flex; gap: 4px; background: var(--soft); border-radius: 999px; padding: 4px; } .evseg2 button { flex: 1; }
.sheet.full.evform .evsave { min-height: 54px; border-radius: 16px; background: #16a06d; color: #fff; font-size: 16px; font-weight: 700; flex: none; }

/* every part of a full page spans the page, however little is in it */
.sheet.full > * { align-self: stretch; }

/* the Calendar page takes the whole screen: no day strip, no tabs (swipe from Body to reach it) */
.today.calonly .wkstrip, .today.calonly .pillrow, .today.calonly .center { display: none; }
.today.calonly .calwrap { padding-top: 14px; }

/* the tab bar slides away to the right on the Calendar page, and takes no room there */
.tabs { transition: transform .28s cubic-bezier(.22, .8, .3, 1), visibility 0s; }
.tabs.away { transform: translateX(105%); visibility: hidden; pointer-events: none; transition: transform .28s cubic-bezier(.22, .8, .3, 1), visibility 0s .28s; }

/* Today > Food, as on the board: rings three to a row inside one card, tidy meal rows, the planned meal */
.fringcard { padding: 12px 8px 4px; border-radius: 26px; }
.fringcard .grid3b { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 6px; margin: 0; }
.fringcard .ftile { padding: 8px 4px; gap: 3px; border-radius: 18px; background: none; border: 0; box-shadow: none; }
.fringcard .ftile .rl { font-size: 14px; font-weight: 800; } .fringcard .ftile .rs { font-size: 12px; color: var(--mute); }
.foodrows { padding: 4px 14px; border-radius: 22px; }
.foodrows .item { padding: 12px 0; min-height: 0; gap: 12px; }
.foodrows .item .t { font-size: 15px; font-weight: 700; } .foodrows .item .mute.small { font-size: 12px; }
.foodrows .emoji { width: 44px; height: 44px; border-radius: 12px; background: var(--soft); font-size: 0; flex: none; }
.foodrows .mthumb { width: 44px; height: 44px; border-radius: 12px; }
.foodrows .kc { font-size: 0; } .foodrows .kc b { font-size: 16px; color: var(--ink); } .foodrows .kc small { display: none; }
.mealempty .link { color: #d93a3f; font-weight: 700; min-height: 44px; }
.snackbtn { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 30%, transparent); margin-top: 4px; }
.snackcap { font-size: 12px; color: var(--mute); text-align: center; margin: 8px 0 4px; }
.plannow { background: var(--card); border-radius: 26px; overflow: hidden; margin-bottom: 12px; }
.planhero { height: 150px; background: linear-gradient(135deg, #e6c99a, #d7b98a); overflow: hidden; } .planhero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.planbody { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.planlbl { font-size: 12px; font-weight: 800; color: #1e48f0; } .plantitle { font-size: 22px; letter-spacing: -.01em; } .plansub { font-size: 13px; color: var(--mute); }
.planbtns { display: flex; gap: 8px; } .planbtns button { flex: 1; min-height: 48px; border: 0; border-radius: 14px; background: var(--ink); color: var(--bg); font: inherit; font-weight: 700; cursor: pointer; } .planbtns button.soft { background: var(--soft); color: var(--ink); }
.planelse { min-height: 44px; border: 0; background: none; color: #1e48f0; font: inherit; font-weight: 600; cursor: pointer; }
.planrow { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); } .planrow.last { border-bottom: 0; } .planrow b { font-size: 15px; }
.plancheck { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px dashed var(--track); display: grid; place-items: center; font-size: 14px; color: #fff; } .plancheck.on { background: #16a06d; border: 0; }

/* The meal page, as on the Edit meal and Your lunch boards */
.sheet.full.mealpage, .sheet.full.describe { background: var(--bg); padding-left: 0; padding-right: 0; }
.sheet.full.mealpage .fullhead { padding: 8px 18px 0; } .mph { margin: 0; font-size: 22px; font-weight: 800; }
.mpbody { display: flex; flex-direction: column; gap: 12px; padding: 8px 16px 18px; }
.mpcard { background: var(--card); border-radius: 22px; padding: 12px 14px; }
.mpphoto { display: flex; gap: 12px; align-items: center; padding: 12px; }
.mpthumb { width: 76px; height: 76px; border-radius: 16px; background: linear-gradient(135deg, #e9d9bf, #c9a77c); flex: none; display: grid; place-items: center; overflow: hidden; color: #8a7d6b; font-size: 12px; } .mpthumb img { width: 100%; height: 100%; object-fit: cover; }
.mpside { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; } .mpside > b { font-size: 15px; }
.mpbtns { display: flex; gap: 8px; } .mpbtn { flex: 1; min-height: 40px; border-radius: 999px; background: var(--soft); color: var(--ink); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; } .mpbtn.red { background: #d93a3f; color: #fff; }
.mprate { display: flex; align-items: center; } .mprate span { font-size: 13px; color: var(--mute); margin-right: 6px; }
.mprate .star { border: 0; background: none; padding: 0 2px; min-height: 32px; font-size: 22px; line-height: 1; color: var(--track); cursor: pointer; } .mprate .star.on { color: #f2b01e; }
.mpname { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 4px 0 8px; font: inherit; font-size: 17px; font-weight: 800; background: none; color: var(--ink); outline: none; }
.mpslots { display: flex; gap: 6px; overflow-x: auto; margin: 10px 0 6px; scrollbar-width: none; } .mpslots::-webkit-scrollbar { display: none; }
.mpslots button { flex: none; min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--soft); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .mpslots button.on { background: #1e48f0; color: #fff; }
.mptime { display: flex; justify-content: space-between; align-items: center; font-size: 14px; } .mptime span { color: var(--mute); } .mptime input { border: 0; background: none; color: var(--ink); font: inherit; font-weight: 700; text-align: right; }
.mpings { padding: 6px 14px 10px; }
.mping { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); } .mping b { font-size: 15px; } .mping .grow { min-width: 0; }
.mpsub { font-size: 12px; color: var(--mute); } .mpsub.good { color: #16a06d; font-weight: 700; } .mpsub.new { color: #b26a00; font-weight: 700; }
.mpstep { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--soft); color: var(--ink); font-size: 18px; line-height: 34px; padding: 0; text-align: center; cursor: pointer; flex: none; }
.mpg { width: 58px; padding: 7px 8px; border: 0; border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; font-weight: 700; text-align: right; } .mpu { font-size: 13px; color: var(--mute); }
.mprm { width: 24px; height: 34px; border: 0; background: none; color: var(--mute); cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.mpadd { display: flex; gap: 8px; margin-top: 8px; } .mpadd button { flex: 1; min-height: 44px; border-radius: 14px; font: inherit; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.mpadd .dash, .mp-dash { border: 1px dashed var(--dash); background: none; color: #d93a3f; } .mpadd .dark, .mpdesc .dark { border: 0; background: var(--ink); color: var(--bg); } .mpdesc .wide { width: 100%; min-height: 44px; border-radius: 14px; font: inherit; font-weight: 700; }
.mpdesc { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; } .mpdesc textarea, .mpnotes { width: 100%; border: 0; border-radius: 14px; background: var(--bg); color: var(--ink); font: inherit; padding: 10px 12px; resize: vertical; }
.mplink { min-height: 44px; border: 0; background: none; color: var(--mute); font: inherit; font-size: 14px; text-align: left; padding: 0 4px; cursor: pointer; }
.mptotals { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; } .mptot { font-size: 28px; letter-spacing: -.02em; } .mptot small { font-size: 14px; color: var(--mute); font-weight: 600; }
.mpchips { display: flex; gap: 14px; font-size: 13px; flex-wrap: wrap; }
.mpnums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .mpnums label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--mute); } .mpnums input { width: 70px; border: 0; border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; font-weight: 700; text-align: right; padding: 7px 8px; }
.sheet.full.mealpage .mpbar, .dbbar { flex: none; display: flex; gap: 10px; padding: 10px 16px calc(18px + env(safe-area-inset-bottom) * .5); background: var(--card); border-top: 1px solid var(--line); margin: 0; }
.mpbar button, .dbbar button { flex: 1; min-height: 52px; border: 0; border-radius: 14px; font: inherit; font-weight: 600; cursor: pointer; background: var(--soft); color: var(--ink); } .mpbar .dark { background: var(--ink); color: var(--bg); } .mpbar .go2, .dbbar .go2 { background: #16a06d; color: #fff; } .mpbar .go2 { flex: 2; } .mpbar .del { color: #d93a3f; }
/* Describe */
.dbhead { display: flex; justify-content: space-between; align-items: center; padding: calc(10px + env(safe-area-inset-top)) 18px 8px; } .dbhead h1 { margin: 0; font-size: 20px; font-weight: 800; } .dbhead .link { padding: 0; min-height: 44px; }
.dbbody { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; }
.dbcard { background: var(--card); border-radius: 22px; padding: 12px; display: flex; flex-direction: column; gap: 10px; } .dbhint { font-size: 13px; color: var(--mute); }
.dbtext { min-height: 76px; border: 0; border-radius: 14px; background: var(--bg); color: var(--ink); padding: 10px 12px; font: inherit; font-size: 16px; line-height: 1.4; resize: vertical; }
.dbgo { min-height: 48px; border: 0; border-radius: 14px; background: var(--ink); color: var(--bg); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; } .dbwarn { font-size: 13px; color: var(--warn); }
.dblogged { display: flex; align-items: center; gap: 8px; background: rgba(22, 160, 109, .14); color: #0f7a52; border-radius: 14px; padding: 10px 14px; font-size: 14px; font-weight: 700; } .dblogged button { border: 0; background: none; color: #0f7a52; font: inherit; font-weight: 800; min-height: 32px; cursor: pointer; }
.dbtick { width: 22px; height: 22px; border-radius: 50%; background: #16a06d; color: #fff; display: grid; place-items: center; font-size: 13px; flex: none; }
.dbfoods { padding: 2px 14px 6px; gap: 0; } .dbrow { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); } .dbrow .grow { min-width: 0; } .dbrow b { font-size: 15px; }
.dbst { font-size: 12px; color: var(--mute); font-weight: 700; } .dbst.new { color: #b26a00; } .dbmac { font-size: 12px; color: var(--mute); }
.dbright { text-align: right; flex: none; } .dbg { display: inline-flex; align-items: center; gap: 3px; justify-content: flex-end; } .dbg input { width: 58px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; text-align: right; padding: 0; } .dbg span { font-size: 15px; font-weight: 700; } .dbk { font-size: 12px; color: var(--mute); }
.dbnote { font-size: 12px; color: var(--mute); padding: 10px 0 4px; }
.dbnow { flex-direction: row; justify-content: space-between; align-items: baseline; padding: 12px 16px; } .dbnow span { font-size: 13px; color: var(--mute); } .dbnow b { font-size: 22px; } .dbnow small { font-size: 13px; color: var(--mute); font-weight: 600; }

/* Edge mode, made permanent: his phone only used the whole screen while the edge lines were showing. Those lines are
   three real boxes at the bottom (fixed at the layout bottom, fixed at the full screen height, and one placed in the page
   at the full screen height). Having them there, in the page colour so they cannot be seen, is what makes iPhone give the
   app the whole screen, so they are always there in Edge mode. */
html[data-fit=free]:not(.ruler)::before { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 3px; background: var(--bg); z-index: 1; pointer-events: none; }
html[data-fit=free]:not(.ruler)::after { content: ''; position: fixed; left: 0; right: 0; top: calc(100lvh - 3px); height: 3px; background: var(--bg); z-index: 1; pointer-events: none; }
html[data-fit=free]:not(.ruler) body::after { content: ''; position: absolute; left: 0; right: 0; top: calc(100lvh - 3px); height: 3px; background: var(--bg); z-index: 1; pointer-events: none; }

/* the camera screens (scan your meal, scan a barcode) take the whole screen: the picture fills it, the controls sit under it */
.layer:has(.scanbox) { align-items: stretch; }
.layer:has(.scanbox) .layer-panel { max-height: none; height: 100%; max-width: none; border-radius: 0; padding: 0; display: flex; flex-direction: column; background: #000; color: #fff; overflow: hidden; }
.layer:has(.scanbox) .book-head { position: absolute; top: 0; left: 0; right: 0; z-index: 3; margin: 0; padding: calc(10px + env(safe-area-inset-top)) 16px 30px; background: linear-gradient(rgba(0, 0, 0, .6), transparent); }
.layer:has(.scanbox) .book-head h3, .layer:has(.scanbox) .book-head .link { color: #fff; }
.layer:has(.scanbox) .scanbox { flex: 1; min-height: 0; aspect-ratio: auto; max-height: none; border-radius: 0; }
.layer:has(.scanbox) .scanbox .shutter { bottom: 22px; }
.layer:has(.scanbox) .layer-panel > :not(.book-head):not(.scanbox) { flex: none; margin-left: 16px; margin-right: 16px; }
.layer:has(.scanbox) .layer-panel > [data-k=msg] { color: rgba(255, 255, 255, .85); }
.layer:has(.scanbox) .layer-panel > label.btn { background: rgba(255, 255, 255, .16); color: #fff; width: auto; }
.layer:has(.scanbox) .layer-panel > :last-child { margin-bottom: calc(16px + env(safe-area-inset-bottom)); }
.layer:has(.scanbox) .field label { color: rgba(255, 255, 255, .75); } .layer:has(.scanbox) input[data-k=code] { background: rgba(255, 255, 255, .16); color: #fff; border: 0; }
.layer:has(.scanbox) .layer-panel > :not(.book-head):not(.scanbox) { box-sizing: border-box; margin-left: 16px !important; margin-right: 16px !important; }
.layer:has(.scanbox) .layer-panel > label.btn { width: calc(100% - 32px) !important; }
.layer:has(.scanbox) .layer-panel > [data-k=msg] { margin-top: 12px !important; margin-bottom: 10px !important; }

/* Cook it, laid out like the Describe page */
.sheet.full.cookpage { background: var(--bg); padding-left: 0; padding-right: 0; }
.ckname { font-size: 17px; font-weight: 800; line-height: 1.25; }
.cookpage .dbcard .field { margin: 0; } .cookpage .dbcard .field label { font-size: 13px; color: var(--mute); }
.cookpage .dbcard input:not([type=checkbox]), .cookpage .dbcard select { background: var(--bg); border: 0; border-radius: 14px; color: var(--ink); }
.cookpage .dbcard .chip { background: var(--bg); color: var(--ink); } .cookpage .dbcard .chip.on { background: #1e48f0; color: #fff; }
.cookpage .dbcard .seg { background: var(--bg); border: 0; box-shadow: none; }
.cookpage .dbcard .seg button.on { background: var(--card); color: var(--ink); }
.cookpage .dbfoods #ck-items { display: flex; flex-direction: column; } .cookpage .ckrow:last-child { border-bottom: 0; }
.cookpage .ckrow .step { width: 36px; height: 36px; min-height: 0; padding: 0; flex: none; background: var(--soft); }
.cookpage .ckrow input { width: 60px; min-height: 0; padding: 7px 8px; border-radius: 10px; text-align: right; font-weight: 700; margin: 0 2px; }
.cookpage .dbnote2 { font-size: 14px; line-height: 1.5; } .cookpage #ck-eat-sum { margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: var(--bg); }
.cookpage .dbcard .chk { padding: 4px 0; }
.cookpage .dbbar .go2 { flex: 2; }

/* the ingredient search on the meal page: the box rises to the top, the list gets the room, the buttons step aside while you type */
.sheet.full.mealpage.typing .mpbar { display: none; }
.mpbody.picking { padding-bottom: 55vh; }
.mpbar .dark { background: var(--ink); color: var(--bg); }
#mp-pick .search { background: var(--bg); }
#mp-pick .sugg { background: var(--bg); border-radius: 16px; }
#mp-pick .sugg button { flex-direction: column; align-items: flex-start; gap: 2px; padding: 11px 14px; min-height: 52px; }
#mp-pick .sugg button > span { font-weight: 700; } #mp-pick .sugg small { font-size: 12.5px; }

/* Edit meal: Delete, Save to cookbook and Save in one bar */
.mpbar.three .del { flex: .9; } .mpbar.three .cb { flex: 1.6; font-size: 14px; } .mpbar.three .go2 { flex: 1.2; } .mpbar .cb:disabled { opacity: .55; }

/* Add ingredient or product: the title, and two buttons that stay at the bottom of the list */
.fp-title { font-size: 17px; font-weight: 800; padding: 2px 2px 10px; }
.fp-none { padding: 14px; font-size: 14px; color: var(--mute); }
.fp-acts { display: flex; gap: 10px; margin: 10px 0 0; }
.fp-acts button { flex: 1; min-height: 50px; border: 0; border-radius: 14px; background: var(--soft); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.fp-acts button.dark { background: var(--ink); color: var(--bg); }

/* Add food: a full page, the four ways, then the cookbook as a wheel */
.sheet.full.addfood { background: var(--bg); padding-left: 0; padding-right: 0; }
.addfood .ways { margin: 0; gap: 8px; }
.addfood .way { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; align-items: center; gap: 1px 10px; min-height: 72px; padding: 10px 12px; border-radius: 18px; background: var(--bg); border: 0; }
.addfood .way .wico { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 12px; }
.addfood .way b { grid-column: 2; font-size: 15px; align-self: end; } .addfood .way small { grid-column: 2; font-size: 11.5px; align-self: start; }
.afcook { gap: 10px; } .afhead { display: flex; justify-content: space-between; align-items: baseline; } .afhead b { font-size: 17px; font-weight: 800; }
.afcook .search { background: var(--bg); border: 0; margin: 0; }
.afslots { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; } .afslots::-webkit-scrollbar { display: none; }
.afslots .chip { flex: none; background: var(--bg); color: var(--ink); } .afslots .chip.on { background: #1e48f0; color: #fff; }
.afwheel { position: relative; height: 372px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; cursor: grab;
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.afwheel:focus-visible { outline: 2px solid var(--choice); border-radius: 16px; }
.afw { position: absolute; left: 4px; right: 4px; top: 50%; height: 96px; margin-top: -48px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 22px; background: var(--bg); will-change: transform, opacity; }
.afw .aft { width: 64px; height: 64px; border-radius: 18px; } .afw .grow { min-width: 0; } .afw .grow b { display: block; font-size: 16px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.afw.on { box-shadow: 0 10px 26px rgba(21, 23, 31, .16), 0 0 0 2px var(--choice); }
.afw:not(.on) .btn { visibility: hidden; }
.afnote { text-align: center; padding: 0 0 4px; min-height: 18px; }

/* five kinds of calendar entry now (Valued), so the buttons are a little tighter */


/* What to track: a full page, like the other logging pages */
.sheet.full.whattotrack { background: var(--bg); padding-left: 0; padding-right: 0; }
.whattotrack .dbcard .wrowedit { background: none; border-bottom: 1px solid var(--line); border-radius: 0; padding: 10px 0; } .whattotrack .dbcard .wrowedit:last-child { border-bottom: 0; }
.whattotrack .gal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .whattotrack .galtile { background: var(--bg); }
.whattotrack .dbbar .go2 { flex: 1; }

/* the habits done today: a full page */
.sheet.full.habitsdone { background: var(--bg); padding-left: 0; padding-right: 0; }
.habitsdone .hdonelist { margin-top: 4px; } .habitsdone .hrow { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; text-align: left; font: inherit; color: var(--ink); display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0; cursor: pointer; }
.habitsdone .hdonelist .hrow:last-child { border-bottom: 0; } .habitsdone .hrow .grow { font-size: 16px; font-weight: 600; }
.habitsdone .dbbar .go2 { flex: 1; }

/* a way into the Menu from the Food page: when nothing is planned, and under the planned meals */
.plannone { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 56px; padding: 0 18px; font: inherit; color: var(--ink); text-align: left; cursor: pointer; border: 0; }
.plannone b { color: #1e48f0; font-size: 15px; } .plannone span { font-size: 14px; }
.planedit { display: block; min-height: 44px; margin: 2px 4px 0; padding: 0; text-align: left; font-weight: 700; }

/* Valued: a switch at the bottom of Add to calendar; on, the entry gets a gold ring round the outside of its card */
:root { --gold: #d4a017; }
.evval { justify-content: space-between; }
.evswitch { position: relative; width: 52px; height: 32px; flex: none; border: 0; border-radius: 999px; background: var(--track); cursor: pointer; padding: 0; transition: background .2s; }
.evswitch i { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s; }
.evswitch.on { background: var(--gold); } .evswitch.on i { transform: translateX(20px); }
.sheet.full.evform .evbody.valued { box-shadow: inset 0 0 0 2px var(--gold); border-radius: 22px; margin: 0 -4px; padding-left: 4px; padding-right: 4px; }
.ev.valued { box-shadow: 0 0 0 2px var(--gold); border-radius: 14px; background: color-mix(in srgb, var(--gold) 10%, transparent); padding-left: 10px; padding-right: 10px; margin: 4px 0; }
@media (prefers-reduced-motion: reduce) { .evswitch, .evswitch i { transition: none; } }

/* the weight in the calories card is as big as the calories beside it */
.calcard .rside .bigw { font-size: 38px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.calcard .rside .bigw small { font-size: 20px; font-weight: 700; letter-spacing: 0; color: var(--mute); }
.calcard .rside .bigw.acc { font-size: 32px; }
.snackcap + .plannone { margin-top: 12px; }

/* the camera screens: Take a photo and Photos (the library) side by side */
.scanpics { display: flex; gap: 10px; }
.layer:has(.scanbox) .scanpics label.btn { flex: 1; width: auto; background: rgba(255, 255, 255, .16); color: #fff; }

/* the meal page on the same backbone as Describe: which meal on top, then what went in, the foods, the totals and the details */
.mpslots.top { margin: 0 0 2px; padding: 0 2px; }
.mpaddcard { display: flex; flex-direction: column; gap: 10px; }
.mpadd3 { display: flex; gap: 8px; } .mpadd3 > * { flex: 1; min-height: 46px; border-radius: 14px; font: inherit; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font-size: 14px; }
.mpadd3 .dash { border: 1px dashed var(--dash); background: none; color: #d93a3f; } .mpadd3 .dark { border: 0; background: var(--ink); color: var(--bg); }
.mpphotobtn { position: relative; border: 0; background: var(--soft); color: var(--ink); } .mpphotobtn.busy { opacity: .5; pointer-events: none; }
.mpdetails { display: flex; flex-direction: column; gap: 10px; } .mpdetails .mpphoto { padding: 6px 0 0; border-top: 1px solid var(--line); margin-top: 2px; }
.mpbar.three .go2 { flex: 1.2; }

/* Describe: Describe and Photo side by side; which meal on top, as on the meal page */
.dbbtns { display: flex; gap: 8px; } .dbbtns .dbgo { flex: 1; }
.dbphoto { flex: 1; min-height: 48px; border-radius: 14px; background: var(--soft); color: var(--ink); font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 6px; position: relative; cursor: pointer; } .dbphoto.busy { opacity: .5; pointer-events: none; }
.sheet.full.describe .mpslots.top { margin: 0 0 2px; padding: 0 2px; }

/* the header rides sideways with Body as it swipes to the Calendar: nothing may scroll sideways because of it */
#main { overflow-x: hidden; }

/* the header rides with Body, so the Calendar is held up over the space it leaves: let it show above the pager while swiping (only the sides are clipped) */
@supports (overflow: clip) { .pager.swiping { overflow-x: clip; overflow-y: visible; } }
/* full pages with their own header: the notch height was counted twice (page and header), which left a band of empty space at the top on a phone */
.sheet.full.describe, .sheet.full.mealpage { padding-top: 0; }
.mpaddmore { width: 100%; min-height: 46px; margin-top: 10px; border: 1px dashed var(--dash); background: none; color: #d93a3f; border-radius: 14px; font: inherit; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }

/* meal page: Describe and Photo on top, then one Add food; the search it opens has Add ingredient and Add product right under the box */
.mpaddcard .mpaddmore { margin-top: 0; }

/* Add food: which meal it is added as, along the bottom */
.dbbar.afbar { flex-direction: column; align-items: stretch; gap: 6px; padding-top: 10px; }
.afbar .afas { display: flex; align-items: center; gap: 10px; } .afbar .afas > span { flex: none; font-size: 13px; font-weight: 600; color: var(--mute); }
.afbar .mpslots { flex: 1; min-width: 0; margin: 0; gap: 6px; }
.afbar .mpslots button { flex: 1; min-height: 42px; padding: 0 6px; border-radius: 999px; font-size: 14px; }

/* meal page: everything about what went in is one card: the meal, then Add food / Describe / Photo, then the foods as they are added */
.mpaddcard .mpslots { margin: 0; padding: 0; gap: 6px; }
.mpaddcard .mpslots.fit button { flex: 1 0 auto; padding: 0 8px; min-height: 38px; }
.mpaddcard .mpslots button:not(.on) { box-shadow: inset 0 0 0 1px var(--line); }
.mpadd3 .dash { flex: 1.25; }
.mpaddcard .mpings { padding: 0; margin-top: 2px; } .mpaddcard .mping:last-child { border-bottom: 0; }

/* haptics: the invisible native switch laid over a button (haptics.js). It keeps the switch's own look, only invisible:
   Safari ticks only for the real control. */
.hx { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; z-index: 2; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* Press feedback on every other control (emil-design-eng: buttons must feel responsive; make-interfaces: always 0.96).
   The individual "scale" property, so controls whose transform is set elsewhere keep it. :where() keeps any transition
   a control already has. */
:where(.way, .mpadd3 > *, .mpslots button, .mpaddmore, .dbbar button, .fp-acts button, .mpstep, .np-btn, .ev, .evswitch, .link, .afw .btn, .sugg button, .mpbtn, .mplink, .swipebtns button, .fullbar .btn, .caladd, .shortcuts button, .snackbtn, .plannone, .editdots) {
  transition: scale .16s var(--ease-out), background-color .2s, color .2s; }
:where(.way, .mpadd3 > *, .mpslots button, .mpaddmore, .dbbar button, .fp-acts button, .mpstep, .np-btn, .ev, .evswitch, .link, .afw .btn, .sugg button, .mpbtn, .mplink, .swipebtns button, .fullbar .btn, .caladd, .shortcuts button, .snackbtn, .plannone, .editdots):active:not(:disabled) {
  scale: .96; transition-duration: .1s; }
/* controls are not text: a long press must not select the label (mobile-native) */
button, .chip, .way, label.btn, label.mpbtn, label.mpphotobtn, [role="button"] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* the weight steppers and the remove cross are small: a 44 px touch area around them (make-interfaces: minimum hit area) */
.mpstep, .mprm { position: relative; }
.mpstep::before { content: ''; position: absolute; inset: -5px; }
.mprm::before { content: ''; position: absolute; inset: -5px -10px; }
/* typing grams must not zoom the page on iPhone (inputs under 16 px do) */
.mpg { font-size: 16px; }
/* numbers that change while you watch keep their width */
.mptot, .mpchips b, .bigw, .np-kcal, .np-macros b, .mpg, .afw .small { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  :where(.way, .mpadd3 > *, .mpslots button, .mpaddmore, .dbbar button, .fp-acts button, .mpstep, .np-btn, .ev, .evswitch, .link, .afw .btn, .sugg button, .mpbtn, .mplink, .swipebtns button, .fullbar .btn, .caladd, .shortcuts button, .snackbtn, .plannone, .editdots) { transition: none; }
}

/* a sheet leaves the way it came, quicker than it arrived; it no longer takes taps while it goes */
.scrim.closing { pointer-events: none; animation: shadeout .22s ease forwards; }
.scrim.closing > .sheet { animation: sheetdown .22s var(--ease-out) forwards; }
@keyframes shadeout { to { background-color: transparent; } }
@keyframes sheetdown { to { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .scrim.closing, .scrim.closing > .sheet { animation: none; } }

/* while a page is being swiped the tab bar drops its blur (it is 90% solid anyway): re-blurring the moving page behind it
   every frame is the one costly effect left during a swipe on iPhone (animation-performance: blur cost) */
body:has(#pager.swiping) .tabs { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--card); }
.scrfold summary { padding: 6px 4px; cursor: pointer; } .scrfold[open] summary { margin-bottom: 4px; }