/* Gut Notes — warm and friendly. Cream page, ivory cards with soft radii and faint shadows, deep plum ink and primary buttons,
 * coral for symptoms and severity, sage for "fine", pastel icon tiles per entry type. Light is the default; a warm
 * aubergine dark palette uses the same variables. No emoji (inline SVG icons only). Values come from mockups/d.html. */
:root {
  --bg: #FBF5EC; --outer: #EFE6DA; --card: #FFFCF7; --sheet: #FFFBF5; --ink: #3A2A33; --ink2: #6B5A63; --ink3: #7D6B74; --line: #EADFD2; --ctl: #CDBBAE;
  --acc: #3A2A33; --accT: #FBE4DA; --accInk: #FFF6EC; --link: #9A3B28; --focus: #C4553F; --chev: #A8959B;
  --coral: #E07A64; --coralD: #C4553F; --coralT: #9A3B28; --coralS: #FBDCD1; --coralL: #EFB3A6; --coralW: #FDEDE6; --roseS: #F8DADD; --roseT: #8E2E49;
  --sage: #7BA68D; --sageD: #3E6B55; --sageS: #DCEADF; --sageL: #C4DACB; --sageW: #E9F2EB;
  --red: #BC4A34; --ambX: #8A5A12; --amber: #C98A1E; --green: #3E6B55; --redT: #FBDCD1; --ambT: #F8E6BE; --amberL: #EBD39B;
  --l0: #F2EADF; --l1: #F8E8C4; --l2: #F6D3A4; --l3: #E8917A; --onl3: #3A2A33;
  --tagbg: #F3E8DA; --track: #F1E8DC; --thumbbg: #F3E8DA; --prog: #7BA68D;
  --mk-med: #4F74B0; --mk-period: #B8445F; --mk-ill: #C98A1E;
  --fab: #C4553F; --fabInk: #FFFFFF; --switch: #C4553F;
  --tile-meal: #FBD8B8; --tile-sym: #F8CFC9; --tile-bowel: #EBDCC4; --tile-check: #DCE9EC; --tile-event: #DDEBE0; --tile-food: #F9E3D5;
  --hero1: #FBD2BB; --hero2: #FCE2D2; --hero-glow: rgba(255, 244, 234, .9); --glass: rgba(255, 252, 247, .8);
  --scrim: rgba(58, 42, 51, .52); --grab: #DCCFC3;
  --shadow: 0 1px 2px rgba(90, 50, 40, .05), 0 6px 18px rgba(90, 50, 40, .07);
  --tab-h: 80px; --gut: 20px;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}
/* Dark tokens live in two places (OS dark unless the user forced light; user forced dark): keep them identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --bg: #1E1519; --outer: #140D10; --card: #2A1D23; --sheet: #2A1D23; --ink: #F7EBE3; --ink2: #CDB9B6; --ink3: #AE9A98; --line: #42303A; --ctl: #6E5963;
    --acc: #F7EBE3; --accT: #4A2A2B; --accInk: #2A1D23; --link: #F2A592; --focus: #F2A592; --chev: #8E7A80;
    --coral: #E8806A; --coralD: #E8806A; --coralT: #F6A894; --coralS: #4E2C2B; --coralL: #7E4A44; --coralW: #3A2325; --roseS: #4A2733; --roseT: #F2A6BA;
    --sage: #8DBBA0; --sageD: #A6D0B6; --sageS: #243629; --sageL: #4C6C58; --sageW: #22332A;
    --red: #F08F7B; --ambX: #E8B04F; --amber: #E8B04F; --green: #A6D0B6; --redT: #4E2C2B; --ambT: #43361C; --amberL: #6E5A2A;
    --l0: #3A2A31; --l1: #6E5A2A; --l2: #A8683F; --l3: #B8493A; --onl3: #fff;
    --tagbg: #38292F; --track: #3C2B33; --thumbbg: #38292F; --prog: #8DBBA0;
    --mk-med: #8FAEE0; --mk-period: #EE8FAB; --mk-ill: #E8B04F;
    --fab: #E8806A; --fabInk: #2B1519; --switch: #E8806A;
    --tile-meal: #4A3226; --tile-sym: #4E2C2B; --tile-bowel: #3F3226; --tile-check: #27393D; --tile-event: #26382C; --tile-food: #43302A;
    --hero1: #4B2B2E; --hero2: #33202A; --hero-glow: rgba(120, 70, 60, .25); --glass: rgba(42, 29, 35, .7);
    --scrim: rgba(10, 5, 8, .6); --grab: #5A4650;
    --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 6px 18px rgba(0, 0, 0, .25);
  }
}
:root[data-theme=dark] {
  color-scheme: dark;
  --bg: #1E1519; --outer: #140D10; --card: #2A1D23; --sheet: #2A1D23; --ink: #F7EBE3; --ink2: #CDB9B6; --ink3: #AE9A98; --line: #42303A; --ctl: #6E5963;
  --acc: #F7EBE3; --accT: #4A2A2B; --accInk: #2A1D23; --link: #F2A592; --focus: #F2A592; --chev: #8E7A80;
  --coral: #E8806A; --coralD: #E8806A; --coralT: #F6A894; --coralS: #4E2C2B; --coralL: #7E4A44; --coralW: #3A2325; --roseS: #4A2733; --roseT: #F2A6BA;
  --sage: #8DBBA0; --sageD: #A6D0B6; --sageS: #243629; --sageL: #4C6C58; --sageW: #22332A;
  --red: #F08F7B; --ambX: #E8B04F; --amber: #E8B04F; --green: #A6D0B6; --redT: #4E2C2B; --ambT: #43361C; --amberL: #6E5A2A;
  --l0: #3A2A31; --l1: #6E5A2A; --l2: #A8683F; --l3: #B8493A; --onl3: #fff;
  --tagbg: #38292F; --track: #3C2B33; --thumbbg: #38292F; --prog: #8DBBA0;
  --mk-med: #8FAEE0; --mk-period: #EE8FAB; --mk-ill: #E8B04F;
  --fab: #E8806A; --fabInk: #2B1519; --switch: #E8806A;
  --tile-meal: #4A3226; --tile-sym: #4E2C2B; --tile-bowel: #3F3226; --tile-check: #27393D; --tile-event: #26382C; --tile-food: #43302A;
  --hero1: #4B2B2E; --hero2: #33202A; --hero-glow: rgba(120, 70, 60, .25); --glass: rgba(42, 29, 35, .7);
  --scrim: rgba(10, 5, 8, .6); --grab: #5A4650;
  --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 6px 18px rgba(0, 0, 0, .25);
}
:root[data-theme=light] { color-scheme: light; }
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; background: var(--outer); }
body { background: var(--outer); color: var(--ink); font: 400 17px/22px var(--sans); -webkit-font-smoothing: antialiased; }
body.noscroll { overflow: hidden; }
#app {
  max-width: 480px; margin: 0 auto; min-height: 100vh; background: var(--bg); overflow-x: clip;
  padding: calc(env(safe-area-inset-top) + 12px) var(--gut) calc(var(--tab-h) + env(safe-area-inset-bottom) + 32px);
}
body.no-tabs #app { padding-bottom: calc(env(safe-area-inset-bottom) + 24px); }
@media (min-width: 481px) { #app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }
a { color: var(--link); }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
h1:focus, h1:focus-visible { outline: none; }
.hidden { display: none !important; }
.small { font-size: 14px; line-height: 20px; }
.muted { color: var(--ink2); }
svg.i { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; width: 22px; height: 22px; flex: none; }
svg.chev { width: 16px; height: 16px; color: var(--chev); stroke-width: 2; flex: none; }

/* page chrome */
.page > * { min-width: 0; }
.title { font: 700 28px/34px var(--sans); letter-spacing: -.02em; padding: 4px 0 10px; }
.sub { font: 400 17px/22px var(--sans); color: var(--ink2); padding: 16px 0 10px; }
.nav { height: 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.nav .t { font: 700 17px/22px var(--sans); text-align: center; }
.nav .back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 8px 0 0; border: 0; background: none; color: var(--link); font: 600 17px/22px var(--sans); justify-self: start; }
.nav .back svg { width: 20px; height: 20px; stroke-width: 2.2; }
.page.form > .nav + * { margin-top: 8px; }
.lab { font: 700 13px/16px var(--sans); color: var(--ink2); padding: 14px 0 6px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lab.t { padding: 10px 0 6px; }
.lab .note { font-weight: 500; font-size: 12px; text-align: right; }
.hint { font: 400 13px/18px var(--sans); color: var(--ink2); margin-top: 8px; }
.tip { font: 400 13px/18px var(--sans); color: var(--ink3); margin-top: 8px; }
.nd2 { font: 400 12px/16px var(--sans); color: var(--ink3); padding-top: 12px; }
.nd2 .lnk { font-size: 12px; }
.err { font: 400 14px/18px var(--sans); color: var(--red); margin-top: 8px; }
.lnk { background: none; border: 0; padding: 0; font: 700 13px/18px var(--sans); color: var(--link); text-decoration: none; position: relative; display: inline-block; }
.lnk::before { content: ""; position: absolute; inset: -14px -8px; }
.text-btn { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--link); font: 600 17px/22px var(--sans); }
.icon-btn { width: 44px; height: 44px; border: 0; background: none; color: var(--ink2); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.icon-btn svg { width: 16px; height: 16px; stroke-width: 2.2; }

/* cards & rows */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; min-width: 0; }
.card.pad { padding: 16px; }
.card + .card, .card.gap { margin-top: 12px; }
.card.pad > * + * { margin-top: 10px; }
.card.empty { display: grid; gap: 10px; }
.card.empty p { color: var(--ink2); font-size: 15px; line-height: 21px; margin: 0; }
.card.warnbox { border-color: var(--amber); }
.row { display: flex; align-items: center; gap: 12px; padding: 0 16px; min-height: 44px; border-top: 1px solid var(--line); min-width: 0; }
.row:first-child { border-top: 0; }
.row.flat { padding: 0; border: 0; }
.row .tx { flex: 1; min-width: 0; }
.row .nm { font: 400 17px/22px var(--sans); overflow-wrap: anywhere; }
.row .nm.b { font-weight: 700; }
.nm.acc { color: var(--link); font-weight: 700; }
.row .ds { font: 400 13px/17px var(--sans); color: var(--ink2); }
.row.link { text-decoration: none; color: var(--ink); min-height: 52px; width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; }
button.row.link { border-top: 1px solid var(--line); }
.row.mt { display: block; padding: 8px 16px; }
.row.mt .ds { margin-bottom: 4px; }
.row.inrow { min-height: 52px; cursor: text; }
.row.setrow { min-height: 56px; padding-top: 6px; padding-bottom: 6px; }
.row.kv { align-items: flex-start; padding-top: 12px; padding-bottom: 12px; }
.row.kv .k { width: 96px; flex: none; color: var(--ink2); font-size: 15px; }
.row.kv .v { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dot { width: 10px; height: 10px; border-radius: 5px; flex: none; display: inline-block; }
.dot.red { background: var(--red); } .dot.amber { background: var(--amber); } .dot.green { background: var(--sage); } .dot.grey { background: var(--ctl); }
.row.act.danger .nm { color: var(--red); }
.insight .head { gap: 10px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation-duration: 2s !important; scroll-behavior: auto !important; } }
@media (max-width: 380px) { :root { --gut: 14px; } .stats3 .v { font-size: 15px; } .cal { padding: 6px; } .cal .wd, .cal .days { gap: 2px; } }

/* inputs */
input, textarea, select { font: 400 17px/22px var(--sans); color: var(--ink); }
input.bare { border: 0; background: transparent; min-height: 44px; min-width: 0; text-align: right; max-width: 62%; }
input.bare.num { width: 96px; flex: none; }
.row.inrow { justify-content: space-between; }
.row.inrow > .tx { flex: none; max-width: 55%; }
input.bare[type=date], input.bare[type=datetime-local] { flex: 1 1 auto; width: 100%; max-width: none; min-width: 0; padding: 0; font-size: 15px; }
input.bare[type=date]::-webkit-date-and-time-value, input.bare[type=datetime-local]::-webkit-date-and-time-value { text-align: right; }
input.bare.wide { flex: 1.4; max-width: none; }
input.bare::placeholder, .notes::placeholder { color: var(--ink3); }
.notes { width: 100%; min-height: 72px; border: 0; background: transparent; resize: vertical; display: block; }
select { min-height: 44px; border: 1.5px solid var(--ctl); border-radius: 22px; background: var(--card); padding: 0 12px; font-size: 15px; max-width: 48%; }
.field { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border: 1.5px solid var(--ctl); border-radius: 26px; background: var(--card); margin-top: 8px; }
.field svg.lead { width: 18px; height: 18px; stroke: var(--link); stroke-width: 2.2; }
.field input.bare { flex: 1; text-align: left; max-width: none; }

/* buttons */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 56px; border-radius: 28px; border: 0; background: var(--acc); color: var(--accInk); font: 700 17px/22px var(--sans); text-decoration: none; flex: none; }
.btn svg.i { width: 20px; height: 20px; stroke-width: 2.4; }
.btn.danger { background: transparent; border: 1.5px solid var(--red); color: var(--red); }
.btn2 { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 22px; background: var(--card); border: 1.5px solid var(--ctl); color: var(--ink); font: 600 15px/20px var(--sans); flex: 1; min-width: 0; padding: 0 14px; text-decoration: none; }
.btn2.fit { flex: none; }
.btn2.block { width: 100%; height: 48px; flex: none; }
.btn2.danger { color: var(--red); border-color: var(--red); }
.btn-pair { display: flex; gap: 8px; margin-top: 12px; }
.btn-pair > * { flex: 1; width: auto; }
.btn-stack { display: grid; gap: 8px; margin-top: 12px; }
.savebar { position: sticky; bottom: 0; z-index: 5; background: var(--bg); padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); margin-top: 8px; }
.sheet .savebar { background: var(--sheet); }

/* chips, segmented controls, checkboxes */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chips.tight { margin-top: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1.5px solid transparent; border-radius: 22px; background: var(--tagbg); font: 600 15px/20px var(--sans); color: var(--ink); max-width: 100%; }
.chip .dot { width: 8px; height: 8px; border-radius: 4px; }
.chip.guess { border-style: dashed; border-color: var(--ctl); background: transparent; color: var(--ink2); }
.chip em { font-style: normal; font-weight: 700; color: var(--ink2); }
.chip-name { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; color: inherit; overflow-wrap: anywhere; text-align: left; }
.chip-x { width: 44px; height: 44px; margin: 0 -14px 0 -8px; border: 0; background: none; display: inline-flex; align-items: center; justify-content: center; color: var(--ink2); }
.chip-x svg { width: 12px; height: 12px; stroke-width: 2.2; }
.chip.add { color: var(--ink); background: transparent; border-color: var(--ink); }
.chip.add svg { width: 12px; height: 12px; stroke: var(--ink); stroke-width: 2.4; }
.chip.still { min-height: 32px; font-size: 14px; font-weight: 500; padding: 0 12px; }
.chip[aria-pressed=true] { background: var(--acc); border-color: var(--acc); color: var(--accInk); }
.seg { display: flex; gap: 2px; padding: 4px; border-radius: 26px; background: var(--tagbg); min-width: 0; margin-top: 6px; }
.seg button { flex: 1; min-width: 0; height: 44px; padding: 0 6px; border: 0; border-radius: 22px; background: transparent; font: 600 14px/18px var(--sans); color: var(--ink2); }
.seg button[aria-pressed=true] { background: var(--acc); color: var(--accInk); }
.seg.top { margin: 0 0 6px; }
.row.mt .seg { margin-top: 2px; }
.pick { margin-top: 8px; display: grid; gap: 8px; }
.pick .seg, .pick .card { margin-top: 0; }
.cb { width: 24px; height: 24px; border-radius: 8px; border: 1.5px solid var(--ink3); background: var(--card); flex: none; display: flex; align-items: center; justify-content: center; }
.cb svg { width: 14px; height: 14px; stroke: var(--accInk); stroke-width: 3; display: none; }
.on > .cb, [aria-checked=true] > .cb { background: var(--acc); border-color: var(--acc); }
.on > .cb svg, [aria-checked=true] > .cb svg { display: block; }
.nsr { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin-top: 6px; }
.nsr .q { font: 700 13px/16px var(--sans); color: var(--ink2); min-width: 0; }
.ns { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border: 0; background: none; font: 600 14px/18px var(--sans); flex: none; }
.meal { display: flex; align-items: center; gap: 12px; padding: 6px 16px; min-height: 60px; width: 100%; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; min-width: 0; }
.meal:first-child { border-top: 0; }
.meal .tx { flex: 1; min-width: 0; }
.meal .nm { font: 700 15px/20px var(--sans); }
.meal .ds { font: 400 12.5px/16px var(--sans); color: var(--ink2); }
.meal.on { background: var(--accT); }
.more { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 16px; border: 0; border-top: 1px solid var(--line); background: none; font: 700 15px/20px var(--sans); color: var(--link); }
.bristol { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 6px 16px; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; }
.bristol:first-child { border-top: 0; }
.bristol.on { background: var(--accT); }
.bristol .n { width: 22px; font: 700 20px/24px var(--sans); text-align: center; flex: none; }
.bristol .tx { flex: 1; min-width: 0; display: block; }
.bristol .nm, .bristol .ds { display: block; }
.bristol .nm { font: 600 16px/20px var(--sans); }
.bristol .ds { font: 400 13px/17px var(--sans); color: var(--ink2); }
.switch { width: 52px; height: 32px; border-radius: 16px; border: 0; background: var(--ctl); position: relative; flex: none; padding: 0; }
.switch::before { content: ""; position: absolute; inset: -8px -4px; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 13px; background: #fff; box-shadow: 0 1px 3px rgba(40, 20, 20, .25); transition: transform .15s; }
.switch[aria-checked=true] { background: var(--switch); }
.switch[aria-checked=true] .knob { transform: translateX(20px); }
.sw-row { min-height: 56px; padding-top: 6px; padding-bottom: 6px; }
@media (prefers-reduced-motion: reduce) { .switch .knob { transition: none; } .spinner { animation-duration: 3s; } }

/* Log page */
.big { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 0 18px; border-radius: 22px; margin-bottom: 10px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; min-width: 0; }
.big .tx { flex: 1; min-width: 0; }
.big .nm { font: 700 17px/22px var(--sans); }
.big .ds { font: 400 13px/18px var(--sans); color: var(--ink2); }
.big.p { background: var(--acc); border-color: var(--acc); color: var(--accInk); min-height: 76px; }
.big.p .ds { color: inherit; opacity: .85; }
.big.p svg.chev { color: var(--accInk); }

/* meal form: photo */
.photo { padding: 14px; }
.photo > * + * { margin-top: 10px; }
.photo .t { display: flex; gap: 12px; align-items: center; min-width: 0; }
.photo .t p { flex: 1; min-width: 0; font: 400 14px/18px var(--sans); }
.photo .bs { display: flex; gap: 8px; flex-wrap: wrap; }
.photo .lnk { display: inline-block; }
.thumb { width: 56px; height: 56px; flex: none; border-radius: 16px; background: var(--thumbbg); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink3); overflow: hidden; object-fit: cover; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb svg { width: 26px; height: 26px; }
.bigthumb { display: block; width: 100%; max-width: 260px; border-radius: 22px; margin-top: 12px; }
.spinner { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--coralD); animation: spin .8s linear infinite; vertical-align: -3px; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* pastel tinted icon tiles (entry types) */
.tile { width: 36px; height: 36px; border-radius: 12px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--tile-food); color: var(--ink); }
.tile svg.i { width: 19px; height: 19px; stroke-width: 1.8; }
.tile.meal { background: var(--tile-meal); } .tile.sym { background: var(--tile-sym); color: var(--coralT); } .tile.bowel { background: var(--tile-bowel); }
.tile.check { background: var(--tile-check); } .tile.event { background: var(--tile-event); } .tile.period { background: var(--roseS); color: var(--roseT); }

/* Diary */
.hero { margin: calc(-12px - env(safe-area-inset-top)) calc(-1 * var(--gut)) 0; padding: calc(12px + env(safe-area-inset-top)) var(--gut) 4px;
  background: radial-gradient(circle at 50% 70%, var(--hero-glow), rgba(255, 244, 234, 0) 60%), linear-gradient(180deg, var(--hero1) 0%, var(--hero2) 60%, var(--bg) 100%); }
.dtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; }
.dtop small { display: block; font: 700 11.5px/14px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.dtop h1 { font: 700 28px/32px var(--sans); letter-spacing: -.02em; }
.dtop .rt { display: flex; align-items: center; gap: 6px; flex: none; }
.round { width: 44px; height: 44px; border-radius: 22px; border: 0; background: var(--glass); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.round svg { width: 20px; height: 20px; stroke-width: 2.2; }
.round:disabled { opacity: .35; }
.chiprow { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 4px; }
.pchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 14px; background: var(--roseS); color: var(--roseT); font: 700 12px/16px var(--sans); white-space: nowrap; }
.pchip svg.i { width: 13px; height: 13px; stroke-width: 2; fill: currentColor; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); margin: 0 -6px; }
.wk { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; min-height: 64px; padding: 4px 0 0; border: 0; background: none; color: var(--ink); min-width: 0; }
.wk span { font: 700 10.5px/12px var(--sans); letter-spacing: .06em; color: var(--ink2); }
.wk i { width: 34px; height: 34px; border-radius: 17px; display: flex; align-items: center; justify-content: center; font: 700 14px/18px var(--sans); font-style: normal; border: 2.5px solid transparent; background: var(--glass); }
.wk i.l0 { border-color: var(--l0); } .wk i.l1 { border-color: var(--l1); } .wk i.l2 { border-color: var(--l2); } .wk i.l3 { border-color: var(--l3); }
.wk i.today { background: var(--acc); color: var(--accInk); border-color: var(--acc); }
.wk i.fut { border: 2px dashed var(--ctl); background: transparent; color: var(--ink2); }
.wk.sel i { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.wk b { width: 5px; height: 5px; border-radius: 3px; background: var(--coral); margin-top: 1px; }
.wk b.n { background: transparent; }
.wk:disabled { opacity: 1; cursor: default; }
.sumr { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2px 10px; min-height: 40px; padding-top: 6px; }
.sumr h2 { font: 700 17px/22px var(--sans); letter-spacing: -.01em; display: flex; align-items: center; gap: 6px; }
.sumr h2 svg.i { width: 16px; height: 16px; color: var(--ink3); stroke-width: 2.2; }
.sumr .sum { font: 600 12px/16px var(--sans); color: var(--ink2); }
.sumr .sum b { color: var(--coralT); font-weight: 700; }
.pill { display: inline-block; font: 700 11px/16px var(--sans); color: var(--link); background: var(--accT); border-radius: 8px; padding: 0 6px; white-space: nowrap; }
.btn-pill { position: relative; border: 0; }
.btn-pill::before { content: ""; position: absolute; inset: -14px -10px; }
.pill.sun { color: var(--amber); background: var(--ambT); }
.pill.muted { color: var(--ink2); background: var(--tagbg); }

.medb { position: relative; display: block; margin-top: 8px; padding: 9px 14px 20px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); text-decoration: none; color: var(--ink); min-height: 56px; }
.medb .r1 { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.medb .r1 svg.i { width: 16px; height: 16px; color: var(--sageD); stroke-width: 2.1; }
.medb .tx { flex: 1; min-width: 0; font: 700 13px/18px var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.medb .tx em { font-style: normal; font-weight: 500; color: var(--ink2); }
.medb svg.chev { width: 14px; height: 14px; }
.medb .r2 { margin-left: 24px; font: 500 12px/16px var(--sans); color: var(--coralT); }
.medb .pb { position: absolute; left: 14px; right: 14px; bottom: 9px; height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.medb .pb i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--sage); }
.medb.warn .pb i { background: var(--coral); }

/* timeline */
.tl { margin-top: 2px; }
.ti { position: relative; display: grid; grid-template-columns: 44px 16px minmax(0, 1fr); padding-bottom: 10px; min-width: 0; }
.ti > .tm { grid-column: 1; }
.ti > :not(.tm):not(.nd) { grid-column: 3; min-width: 0; }
.ti::before { content: ""; position: absolute; left: 51px; top: 0; bottom: 0; width: 2px; background: var(--line); border-radius: 1px; }
.ti .nd { position: absolute; left: 47px; top: 17px; width: 10px; height: 10px; border-radius: 5px; background: var(--ink3); box-shadow: 0 0 0 3px var(--bg); }
.ti.sy .nd { background: var(--coral); }
.ti.q .nd { width: 6px; height: 6px; left: 49px; top: 12px; background: var(--bg); border: 1.5px solid var(--ctl); box-shadow: 0 0 0 3px var(--bg); }
.tm { padding-top: 10px; font: 700 12.5px/14px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.tm small { display: block; font: 500 10.5px/12px var(--sans); color: var(--ink3); text-transform: lowercase; }
.tm.sm { font: 600 10.5px/13px var(--sans); color: var(--ink3); padding-top: 11px; }
.ti.q .tm { padding-top: 7px; font: 600 11.5px/14px var(--sans); color: var(--ink3); }
.ti.q .tm.sm { font-size: 10.5px; padding-top: 8px; }
.ti.q .tm small { display: none; }
.mc { position: relative; background: var(--card); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.mh2 { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 10px; align-items: center; min-height: 68px; }
.mh2 .th { width: 48px; height: 48px; border-radius: 16px; background: var(--tile-meal); color: var(--ink); display: flex; align-items: center; justify-content: center; overflow: hidden; object-fit: cover; }
.mh2 .th svg.i { width: 24px; height: 24px; stroke-width: 1.7; }
.mh2 img.th { display: block; }
.mh2 .nm { font: 700 15px/20px var(--sans); overflow-wrap: anywhere; }
.mh2 .nm a { color: inherit; text-decoration: none; }
.mt2 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-height: 22px; }
.mt2 span.n { font: 500 12px/16px var(--sans); color: var(--ink2); margin-right: 2px; }
.tg { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; background: var(--coralS); color: var(--coralT); font: 700 11px/20px var(--sans); white-space: nowrap; }
.tg.m { background: var(--tagbg); color: var(--ink2); }
.stretch { color: inherit; text-decoration: none; }
.stretch::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.fine { background: var(--sageW); padding: 10px 12px 12px; }
.fine .l1 { display: flex; align-items: center; gap: 6px; font: 700 13px/16px var(--sans); color: var(--sageD); }
.fine .l1 svg.i { width: 16px; height: 16px; stroke-width: 2.4; }
.fine .l2 { font: 500 12px/16px var(--sans); color: var(--ink2); margin-top: 1px; padding-left: 22px; }
.faces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; position: relative; z-index: 1; }
.fc { height: 44px; border-radius: 22px; background: var(--card); border: 0; box-shadow: inset 0 0 0 1.5px var(--sageL); display: flex; align-items: center; justify-content: center; gap: 5px; font: 700 13px/16px var(--sans); color: var(--ink); padding: 0 4px; min-width: 0; }
.fc svg.i { width: 21px; height: 21px; stroke-width: 1.9; }
.fc.f svg.i { color: var(--sageD); } .fc.a svg.i { color: var(--amber); } .fc.s svg.i { color: var(--coralD); }
.fc.a { box-shadow: inset 0 0 0 1.5px var(--amberL); } .fc.s { box-shadow: inset 0 0 0 1.5px var(--coralL); }

.hang { margin-left: 12px; padding-left: 22px; }
.hr { position: relative; min-height: 46px; padding-top: 8px; }
.hr::before { content: ""; position: absolute; left: -22px; top: 0; width: 22px; height: 26px; border-left: 2px solid var(--coralL); border-bottom: 2px solid var(--coralL); border-radius: 0 0 0 12px; }
.hr:not(:last-child)::after { content: ""; position: absolute; left: -22px; top: 26px; bottom: 0; width: 2px; background: var(--coralL); }
.sc { position: relative; display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 4px 12px; border-radius: 19px; background: var(--coralS); color: var(--coralT); text-decoration: none; font: 700 13px/18px var(--sans); min-width: 0; }
.sc::before { content: ""; position: absolute; inset: -3px 0; }
.sc svg.i { width: 16px; height: 16px; stroke-width: 2; }
.sc .t { min-width: 0; overflow-wrap: anywhere; }
.sc em { font-style: normal; font-weight: 500; font-size: 12.5px; opacity: .9; }
.sc .dt { margin-left: auto; display: flex; gap: 3px; flex: none; }
.sc .dt u { width: 6px; height: 6px; border-radius: 3px; background: var(--coralL); }
.sc .dt u.on { background: var(--coralD); }

.ul { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 58px; padding: 6px 6px 6px 10px; border-radius: 20px; background: var(--coralW); box-shadow: inset 0 0 0 1.5px var(--coralL); }
.ul .ci { width: 36px; height: 36px; border-radius: 18px; background: var(--coralS); color: var(--coralT); display: flex; align-items: center; justify-content: center; }
.ul .ci svg.i { width: 18px; height: 18px; }
.ul b { display: block; font: 700 14px/18px var(--sans); overflow-wrap: anywhere; }
.ul b a { color: inherit; text-decoration: none; }
.ul small { display: block; font: 500 11.5px/15px var(--sans); color: var(--ink2); }
.lk { position: relative; z-index: 1; height: 44px; padding: 0 14px; border-radius: 22px; display: inline-flex; align-items: center; gap: 5px; border: 0; font: 700 13px/16px var(--sans); color: var(--coralT); background: var(--card); box-shadow: inset 0 0 0 1.5px var(--coralL); }
.lk svg.i { width: 15px; height: 15px; stroke-width: 2.2; }
.bw { position: relative; display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 2px 0; font: 500 12.5px/18px var(--sans); color: var(--ink2); min-width: 0; }
.bw .tile { width: 28px; height: 28px; border-radius: 10px; }
.bw .tile svg.i { width: 15px; height: 15px; }
.bw .t { min-width: 0; overflow-wrap: anywhere; }
.bw a { color: inherit; text-decoration: none; }
.empty-day { margin-top: 8px; }

/* Insights */
.ihead { padding: 4px 0 10px; }
.ihead .title { padding-bottom: 8px; font-weight: 800; font-size: 28px; }
.tc { position: relative; margin-top: 10px; padding: 14px 16px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow); border: 1px solid var(--line); color: var(--ink); text-decoration: none; display: block; }
.tc.likely { --t: var(--coralS); --d: var(--coralD); }
.tc.possible { --t: var(--ambT); --d: var(--amber); }
.tc .tp { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: start; }
.tc .ico { width: 48px; height: 48px; border-radius: 16px; background: var(--t, var(--tile-food)); display: flex; align-items: center; justify-content: center; color: var(--ink); }
.tc .ico svg.i { width: 26px; height: 26px; stroke-width: 1.7; }
.tc h3 { font: 700 17px/22px var(--sans); letter-spacing: -.01em; overflow-wrap: anywhere; }
.tc p { font: 400 13px/18px var(--sans); color: var(--ink2); }
.tc p b { color: var(--ink); font-weight: 700; }
.lb { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.lbar { position: relative; flex: 1; height: 10px; border-radius: 5px; background: var(--track); }
.lbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--d, var(--coralD)); }
.lbar u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); border-radius: 1px; }
.lb strong { font: 800 20px/22px var(--sans); letter-spacing: -.01em; min-width: 52px; text-align: right; }
.tf { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; min-height: 26px; }
.tm2 { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--tagbg); font: 700 12px/16px var(--sans); color: var(--ink); }
.tm2 svg.i { width: 13px; height: 13px; stroke-width: 2.2; }
.tf .sn { font: 500 12px/16px var(--sans); color: var(--ink2); }
.sech { display: flex; align-items: baseline; justify-content: space-between; margin: 20px 0 8px; }
.sech h2 { font: 700 17px/22px var(--sans); letter-spacing: -.01em; }
.sech .note { font: 500 12px/16px var(--sans); color: var(--ink2); }
.safechips { display: flex; flex-wrap: wrap; gap: 8px; }
.sf { min-height: 44px; padding: 0 14px 0 10px; border-radius: 20px; background: var(--sageS); color: var(--sageD); display: inline-flex; align-items: center; gap: 6px; font: 700 14px/18px var(--sans); text-decoration: none; }
.sf svg.i { width: 15px; height: 15px; stroke-width: 2.6; }
.all { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; min-height: 48px; padding: 0 18px; border-radius: 24px; background: var(--tagbg); color: var(--ink); text-decoration: none; font: 700 15px/20px var(--sans); }
.all svg.chev { color: var(--ink2); }
.cyc2 { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 16px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); }
.cyc2 .tx { flex: 1; min-width: 0; }
.cyc2 h3 { font: 700 13.5px/18px var(--sans); display: flex; align-items: center; gap: 6px; }
.cyc2 h3 svg.i { width: 14px; height: 14px; color: var(--sageD); stroke-width: 2.1; flex: none; }
.cyc2 p { font: 500 12px/16px var(--sans); color: var(--ink2); margin-top: 2px; }
.mb { flex: none; width: 90px; height: 40px; display: flex; align-items: flex-end; gap: 2px; }
.mb i { flex: 1; border-radius: 2px 2px 1px 1px; background: var(--sage); opacity: .75; }
.mb i.now { opacity: 1; outline: 2px solid var(--ink); outline-offset: 1px; }
.mb i.w { background: var(--coral); opacity: 1; }
.disc { font: 400 11.5px/16px var(--sans); color: var(--ink3); text-align: center; padding: 16px 12px 0; }
.disc .lnk { font-size: 11.5px; }

.food:not(.bd) { align-items: flex-start; padding: 10px 16px; text-decoration: none; color: var(--ink); min-height: 52px; }
.food .dot { margin-top: 6px; }
.food .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; }
.food .nm { font-weight: 700; }
.food svg.chev { margin-top: 3px; align-self: center; }
.tag { font: 600 12px/18px var(--sans); color: var(--ink2); background: var(--tagbg); border-radius: 9px; padding: 0 8px; white-space: nowrap; flex: none; }
.safe { min-height: 52px; padding: 8px 16px; text-decoration: none; color: var(--ink); }
.safe .a { font: 400 15px/20px var(--sans); } .safe .a b { font-weight: 700; }
.safe .b { font: 700 15px/20px var(--sans); color: var(--link); }
.fcard { padding: 12px 14px; }
.strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.strip .d { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; font: 600 13px/14px var(--sans); color: var(--ink2); }
.strip .d.today { color: var(--ink); font-weight: 700; }
.sq { display: inline-block; border: 1px solid transparent; }
.strip .sq { width: 100%; max-width: 30px; height: 28px; border-radius: 10px; }
.sq.l0 { background: var(--l0); } .sq.l1 { background: var(--l1); } .sq.l2 { background: var(--l2); } .sq.l3 { background: var(--l3); }
.sq.nd { background: var(--card); border: 1px dashed var(--ctl); }
.strip .sq.today { outline: 2px solid var(--ink); outline-offset: 1px; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font: 500 12px/16px var(--sans); color: var(--ink2); margin-top: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 4px; }
.legend .sq { width: 11px; height: 11px; border-radius: 4px; }
.stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.stats3 > div { min-width: 0; }
.stats3 .v { font: 700 17px/22px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats3 .l { font: 400 12px/16px var(--sans); color: var(--ink2); white-space: nowrap; }
.cmp { font: 600 12px/16px var(--sans); color: var(--ink2); margin-top: 6px; }
.cmp.good { color: var(--green); } .cmp.bad { color: var(--red); }
.basis { font: 400 12px/16px var(--sans); color: var(--ink2); margin-top: 6px; }
.med { margin-top: 8px; border: 1px solid var(--line); border-radius: 20px; padding: 10px 16px; background: var(--card); }
.med .a { font: 400 13px/18px var(--sans); color: var(--ink2); }
.med .b { font: 400 12px/16px var(--sans); color: var(--ink3); }
.prog { height: 4px; border-radius: 2px; background: var(--track); margin: 6px 0; overflow: hidden; }
.prog i { display: block; height: 4px; background: var(--prog); border-radius: 2px; }
.notice { margin-top: 12px; padding: 12px 16px; }
.notice p { font: 400 14px/20px var(--sans); margin: 0 0 6px; }
.notice .sw-row { padding: 0; border: 0; }
.notice .lnk { margin-top: 4px; }

/* All foods / food detail */
.insight .head { display: flex; align-items: center; }
.insight .name { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; font: 700 17px/22px var(--sans); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.insight .pills { display: flex; flex-wrap: wrap; gap: 4px; }
.bar { position: relative; height: 10px; background: var(--track); border-radius: 5px; margin: 14px 0 10px; }
.bar .fill { position: absolute; inset: 0 auto 0 0; background: var(--sage); border-radius: 5px; }
.bar.hot .fill { background: var(--coralD); }
.bar .tick { position: absolute; top: -4px; width: 2px; height: 18px; background: var(--ink); border-radius: 1px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.stats b { display: block; font: 700 16px/22px var(--sans); }
.stats span { font: 400 11px/14px var(--sans); color: var(--ink2); }
.explain { font: 400 15px/21px var(--sans); }
.warnnote { font: 400 13px/18px var(--sans); background: var(--ambT); border-radius: 14px; padding: 10px 12px; }
.lagstrip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; text-align: center; }
.lagcell { padding: 8px 2px; border-radius: 14px; background: var(--tagbg); border: 1.5px solid transparent; }
.lagcell b { display: block; font-size: 15px; }
.lagcell span { font-size: 11px; color: var(--ink2); }
.lagcell.best { border-color: var(--amber); background: var(--ambT); }
.lagcell.empty { opacity: .5; }
details > summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
details ul { margin: 4px 0 8px; padding-left: 20px; }
details li { margin: 6px 0; }
.card.adv > summary, .card.patterns > summary { padding: 0 16px; }
.card.adv > .row { border-top: 1px solid var(--line); }
.card.patterns { padding-bottom: 12px; margin-top: 16px; }
.card.patterns > .hint, .card.patterns > .card { margin-left: 12px; margin-right: 12px; }
.card.patterns > .card { margin-top: 10px; }
.setgroup + .setgroup { border-top: 1px solid var(--line); }
.setgroup .sw-row { border-top: 0; min-height: 48px; }
.setgroup > .row:first-child { border-top: 0; }

/* Calendar & patterns */
.mnav { display: flex; align-items: center; justify-content: space-between; height: 48px; }
.mnav b { font: 700 17px/22px var(--sans); }
.dnav .a, .mnav .a { width: 44px; height: 44px; border: 0; border-radius: 22px; background: var(--tagbg); display: flex; align-items: center; justify-content: center; color: var(--ink); }
.dnav .a svg, .mnav .a svg { width: 22px; height: 22px; stroke-width: 2.2; }
.dnav .a:disabled { opacity: .3; }
.cal { padding: 10px; }
.cal .wd, .cal .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal .wd { display: grid; min-height: 0; padding: 0; }
.cal .wd div { height: 22px; text-align: center; font: 700 11px/22px var(--sans); letter-spacing: .06em; color: var(--ink3); }
.cell { position: relative; height: 48px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; font: 600 15px/20px var(--sans); min-width: 0; border: 1px solid transparent; background: transparent; color: var(--ink); padding: 0; }
.cell .dn { display: block; }
.cell.l0 { background: var(--l0); } .cell.l1 { background: var(--l1); } .cell.l2 { background: var(--l2); }
.cell.l3 { background: var(--l3); color: var(--onl3); }
.cell.nd { border: 1.5px dashed var(--ctl); color: var(--ink3); background: transparent; }
.cell.today { outline: 2.5px solid var(--ink); outline-offset: 1px; font-weight: 800; }
.cell.sel { border: 2px solid var(--coralD); }
.marks { display: flex; justify-content: center; align-items: center; gap: 3px; height: 6px; margin-top: 2px; }
.mk { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex: none; padding: 0; border: 0; margin: 0; }
.mk-dose { background: var(--mk-med); } .mk-period { background: var(--mk-period); } .mk-ill { background: var(--mk-ill); }
.cell.l3 .mk { outline: 1px solid var(--card); }
.legend .mk { width: 8px; height: 8px; }
.calsum { font: 400 15px/20px var(--sans); margin-top: 10px; }
.sel .h { padding: 14px 16px 12px; }
.card.sel { margin-top: 12px; }
.sel .h b { font: 700 17px/22px var(--sans); } .sel .h p { font: 400 15px/20px var(--sans); color: var(--ink2); margin-top: 2px; }
.pbars { display: grid; gap: 6px; margin: 10px 0; }
.prow { display: grid; grid-template-columns: 52px 1fr 64px; gap: 8px; align-items: center; min-height: 30px; }
.plbl { font-size: 13px; color: var(--ink2); }
.ptrack { height: 12px; background: var(--track); border-radius: 6px; overflow: hidden; display: block; }
.pfill { display: block; height: 100%; background: var(--sage); border-radius: 6px; }
.prow.best .pfill { background: var(--coralD); }
.prow.best .plbl, .prow.best .pval { color: var(--ink); font-weight: 700; }
.prow.empty { opacity: .55; }
.pval { font-size: 13px; text-align: right; line-height: 1.1; }
.pval small { display: block; font-size: 11px; color: var(--ink2); font-weight: 400; }
.phase-row { padding: 10px 0; border-top: 1px solid var(--line); }
.card.pad h3 { font: 700 16px/22px var(--sans); margin: 0; }
.oc { font: 600 12px/16px var(--sans); color: var(--ink2); background: var(--tagbg); border-radius: 8px; padding: 0 7px; white-space: nowrap; }

/* tab bar */
#tabs {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 20;
  display: flex; background: var(--card); border-top: 1px solid var(--line);
  padding: 8px 6px env(safe-area-inset-bottom); min-height: var(--tab-h);
}
body.no-tabs #tabs { display: none; }
#tabs a { flex: 1; min-width: 0; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; font: 600 11.5px/14px var(--sans); color: var(--ink3); text-decoration: none; }
#tabs a .pl { width: 60px; height: 32px; border-radius: 16px; display: flex; align-items: center; justify-content: center; }
#tabs a svg { width: 24px; height: 24px; }
#tabs a[aria-current=page] { color: var(--ink); font-weight: 700; }
#tabs a[aria-current=page] .pl { background: var(--coralS); color: var(--coralT); }
#tabs a[aria-current=page] svg { stroke-width: 2.1; }
#tabs a.plus { font-size: 11.5px; line-height: 14px; color: var(--ink); }
#tabs .plus .b { width: 56px; height: 56px; border-radius: 28px; background: var(--fab); margin-top: -24px; display: flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 0 0 4px var(--card), 0 8px 18px rgba(196, 85, 63, .35); }
#tabs .plus .b svg { width: 28px; height: 28px; fill: none; stroke: var(--fabInk); stroke-width: 2.8; stroke-linecap: round; }
#tabs .plus > span:last-child { margin-top: 1px; }
#tabs .plus[aria-current=page] .b { box-shadow: 0 0 0 4px var(--card), 0 0 0 6px var(--ink), 0 8px 18px rgba(196, 85, 63, .35); }

/* sheet + toast */
.overlay { position: fixed; inset: 0; background: var(--scrim); z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; background: var(--sheet); border-radius: 32px 32px 0 0; box-shadow: 0 -10px 30px rgba(58, 42, 51, .18); padding: 4px var(--gut) calc(env(safe-area-inset-bottom) + 20px); }
.sheet::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--grab); margin: 6px auto 2px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
.sheet-head h2 { font: 700 22px/28px var(--sans); letter-spacing: -.01em; }
#toast {
  position: fixed; left: 50%; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 24px); transform: translate(-50%, 12px);
  background: var(--ink); color: var(--bg); padding: 12px 20px; border-radius: 24px; font: 600 15px/20px var(--sans); box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60; max-width: min(92vw, 440px); text-align: center;
}
body.no-tabs #toast { bottom: calc(env(safe-area-inset-bottom) + 90px); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { #toast { transition: none; } }

/* ================= Stage B: forms, Log, Calendar, Settings, foods (same warm D look) ================= */
.nav .back { background: var(--card); border-radius: 22px; padding: 0 14px 0 8px; box-shadow: inset 0 0 0 1.5px var(--line); }
.nav .t { font-weight: 800; font-size: 18px; }
details > summary { list-style: none; justify-content: space-between; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: ""; width: 9px; height: 9px; margin: 0 4px 3px 8px; border-right: 2.5px solid var(--chev); border-bottom: 2.5px solid var(--chev); transform: rotate(45deg); flex: none; }
details[open] > summary::after { transform: translateY(3px) rotate(-135deg); }
.field:focus-within { border-color: var(--coralD); }
.sq.l0 { border-color: var(--line); }
.wk i.l0 { border-color: var(--sageL); }
.btn2 svg.i { width: 18px; height: 18px; margin-right: 6px; stroke-width: 2; }
.row .tile { width: 40px; height: 40px; border-radius: 14px; }
.row .tile svg.i { width: 20px; height: 20px; }

/* diary fixes: faces on one line, quiet note */
.fine { padding: 10px 10px 12px; }
.fc { gap: 4px; padding: 0 2px; font-size: 12.5px; white-space: nowrap; }
.fc svg.i { width: 18px; height: 18px; }
.quietnote { padding: 0 12px 10px; font: 500 12px/16px var(--sans); color: var(--ink3); }
@media (max-width: 380px) { .fc { font-size: 12px; gap: 3px; } .fc svg.i { width: 16px; height: 16px; } }

/* Log page */
.big { min-height: 76px; gap: 14px; padding: 0 16px; margin-bottom: 10px; }
.big .tile { width: 48px; height: 48px; border-radius: 16px; }
.big .tile svg.i { width: 24px; height: 24px; }
.big.p { background: var(--card); color: var(--ink); border-color: var(--line); min-height: 92px; box-shadow: 0 2px 4px rgba(90, 50, 40, .06), 0 10px 24px rgba(90, 50, 40, .1); }
.big.p .tile { width: 56px; height: 56px; border-radius: 18px; }
.big.p .tile svg.i { width: 28px; height: 28px; }
.big.p .nm { font-size: 18px; line-height: 24px; }
.big.p .ds { color: var(--ink2); opacity: 1; }
.big.p svg.chev { color: var(--chev); }
.tip { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; padding: 12px 14px; border-radius: 18px; background: var(--coralW); color: var(--ink2); font: 500 13px/18px var(--sans); }
.tip svg.i { width: 18px; height: 18px; color: var(--coralD); }

/* meal form */
.photo { padding: 0; margin-top: 6px; }
.frame { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--ink3); border: 1px solid var(--line); box-shadow: var(--shadow); background: linear-gradient(160deg, var(--tile-meal), var(--hero2)); }
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame .ph svg.i { width: 44px; height: 44px; stroke-width: 1.4; opacity: .7; }
.retake { position: absolute; right: 12px; bottom: 12px; height: 44px; padding: 0 16px; border-radius: 22px; border: 0; background: var(--glass); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink); font: 700 14px/18px var(--sans); display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 2px 8px rgba(58, 42, 51, .18); }
.retake svg.i { width: 18px; height: 18px; }
.pmsg { font: 400 14px/20px var(--sans); color: var(--ink2); }
.banner { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 12px 14px; border-radius: 18px; background: var(--sageW); color: var(--sageD); font: 600 14px/20px var(--sans); }
.banner svg.i { width: 20px; height: 20px; }

/* meal form: describe-your-meal box + ingredient chip remove button */
.desc { margin-top: 6px; }
.desc[hidden] { display: none; }
.field.descf { padding-right: 6px; margin-top: 0; }
.field.descf input { flex: 1; min-width: 0; }
.send { width: 40px; height: 40px; flex: none; border: 0; border-radius: 20px; background: var(--acc); color: var(--accInk); display: inline-flex; align-items: center; justify-content: center; }
.send svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2.4; }
.send:disabled { opacity: .7; }
.send .spinner { margin: 0; border-color: var(--accInk); border-top-color: transparent; vertical-align: 0; }
.chip { padding-right: 6px; }
.chip-x { width: 32px; height: 32px; margin: 0 0 0 2px; border-radius: 16px; background: var(--card); border: 1px solid var(--ctl); color: var(--ink); flex: none; position: relative; }
.chip-x::before { content: ""; position: absolute; inset: -6px; }
.chip-x svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.6; }
.chip.guess .chip-x { background: transparent; }
span.chip { background: var(--tile-food); }
.chip.guess { background: transparent; }
.chip .dot { background: var(--coralD); }
.field.add { border-style: dashed; border-color: var(--coralL); background: transparent; }
.field.add svg.lead { stroke: var(--coralD); }
.timepill { position: relative; display: flex; align-items: center; gap: 12px; min-height: 60px; margin-top: 8px; padding: 8px 16px 8px 10px; min-width: 0; border-radius: 30px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.timepill .tile { width: 40px; height: 40px; border-radius: 20px; }
.timepill .tx { flex: 1; min-width: 0; display: block; }
.timepill b { display: block; font: 700 16px/20px var(--sans); }
.timepill .tx span { display: block; font: 500 12.5px/16px var(--sans); color: var(--ink2); }
.timepill svg.pen { width: 18px; height: 18px; color: var(--ink2); }
.timepill:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.tp-in { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; cursor: pointer; font-size: 16px; }
.tp-in::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.lab + .timepill { margin-top: 0; }

/* symptom form */
.sgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.stile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px; padding: 10px 2px 8px; min-width: 0; border-radius: 20px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.stile svg.i { width: 28px; height: 28px; stroke-width: 1.6; color: var(--coralD); }
.stile .sl { max-width: 100%; font: 700 11px/14px var(--sans); text-align: center; }
.stile.on { background: var(--fab); border-color: var(--fab); color: var(--fabInk); }
.stile.on svg.i { color: var(--fabInk); }
.stile .cnt { position: absolute; top: 6px; right: 6px; display: none; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; background: var(--card); color: var(--coralT); font: 800 11px/20px var(--sans); text-align: center; }
.stile.on .cnt { display: block; }
@media (max-width: 380px) { .sgrid { gap: 6px; } .stile .sl { font-size: 10.5px; } }
.strlist { display: grid; gap: 8px; }
.str { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; min-height: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: var(--shadow); }
.str:first-child { border-top: 1px solid var(--line); }
.str b { display: flex; align-items: center; gap: 8px; width: auto; min-width: 96px; flex: none; font: 700 15px/20px var(--sans); color: var(--ink); }
.str b svg.i { width: 20px; height: 20px; color: var(--coralD); }
.rate { display: flex; justify-content: space-between; gap: 6px; flex: 1 1 auto; min-width: 0; }
.rate button { width: 44px; height: 44px; flex: none; border: 0; border-radius: 22px; background: var(--tagbg); color: var(--ink); font: 700 16px/20px var(--sans); }
.rate button[aria-pressed=true] { background: var(--fab); color: var(--fabInk); }
.nsr { margin-top: 16px; }
.nsr .q { font: 700 15px/20px var(--sans); color: var(--ink); }
.ns { padding: 0 14px; border-radius: 22px; background: var(--tagbg); font: 700 14px/18px var(--sans); color: var(--ink); gap: 6px; }
.ns .cb { display: none; }
.ns.on { background: var(--acc); color: var(--accInk); }
.ns.on > .cb { display: flex; width: 16px; height: 16px; border: 0; background: transparent; }
.ns.on > .cb svg { display: block; width: 14px; height: 14px; stroke: var(--accInk); }
.mrow { display: flex; gap: 10px; overflow-x: auto; margin: 4px calc(-1 * var(--gut)) 0; padding: 6px var(--gut) 12px; scroll-snap-type: x proximity; scrollbar-width: none; }
.mrow::-webkit-scrollbar { display: none; }
.mcard { position: relative; flex: none; width: 136px; display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 8px; min-width: 0; border-radius: 20px; border: 2px solid transparent; background: var(--card); box-shadow: var(--shadow); text-align: left; scroll-snap-align: start; }
.mcard.on { border-color: var(--coralD); }
.mcard .mth { width: 100%; height: 72px; margin-bottom: 4px; border-radius: 14px; background: var(--tile-meal); display: flex; align-items: center; justify-content: center; object-fit: cover; overflow: hidden; color: var(--ink); }
.mcard .mth svg.i { width: 28px; height: 28px; stroke-width: 1.6; }
.mcard .mn { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 700 14px/18px var(--sans); }
.mcard .mw { font: 500 12px/16px var(--sans); color: var(--ink2); }
.mcard .mlag { align-self: flex-start; max-width: 100%; margin-top: 2px; padding: 0 8px; height: 22px; border-radius: 11px; background: var(--tagbg); color: var(--ink2); font: 700 11px/22px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcard.on .mlag { background: var(--coralS); color: var(--coralT); }
.mcard > .cb { position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; border-radius: 12px; border: 0; background: var(--fab); }
.mcard:not(.on) > .cb { display: none; }
.mcard > .cb svg { stroke: var(--fabInk); }
.bristol .n { width: 36px; height: 36px; border-radius: 12px; background: var(--tile-bowel); display: flex; align-items: center; justify-content: center; font: 800 17px/20px var(--sans); }
.bristol.on .n { background: var(--card); }
.bristol .cb { border-radius: 12px; }

/* Calendar (soft day circles, dots below the number) */
.cal { padding: 10px 6px 6px; }
.cal .wd, .cal .days { gap: 0; }
.cell { height: auto; min-height: 56px; padding: 2px 0; border: 0; border-radius: 0; justify-content: flex-start; gap: 3px; }
.cell.l0, .cell.l1, .cell.l2, .cell.l3, .cell.nd { background: none; border: 0; color: var(--ink); }
.cell .dn { width: 40px; height: 40px; border-radius: 20px; display: flex; align-items: center; justify-content: center; border: 0; font: 600 15px/20px var(--sans); }
.cell.l0 .dn { background: var(--l0); } .cell.l1 .dn { background: var(--l1); } .cell.l2 .dn { background: var(--l2); }
.cell.l3 .dn { background: var(--l3); color: var(--onl3); }
.cell.nd .dn { color: var(--ink3); }
.cell.fut .dn { color: var(--ink3); font-weight: 500; }
.cell.today { outline: 0; }
.cell.today .dn { font-weight: 800; box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); }
.cell.sel { border: 0; }
.cell.sel .dn { box-shadow: inset 0 0 0 2.5px var(--coralD); }
.cell.today.sel .dn { box-shadow: inset 0 0 0 2.5px var(--coralD), 0 0 0 2px var(--card), 0 0 0 4px var(--ink); }
.marks { margin-top: 0; }
.cell.l3 .mk { outline: 0; }
.mnav b { font: 800 20px/24px var(--sans); letter-spacing: -.01em; }
.calsum { margin-top: 12px; padding: 10px 14px; border-radius: 16px; background: var(--tagbg); font: 600 14px/20px var(--sans); }
.card.patterns > summary { min-height: 56px; font: 700 17px/22px var(--sans); }

/* All foods + food detail (trigger-card style) */
.tc.safe { --t: var(--sageS); --d: var(--sage); }
.tc.sm { padding: 12px 14px; }
.tc.sm .tp { grid-template-columns: 40px minmax(0, 1fr); }
.tc.sm .ico { width: 40px; height: 40px; border-radius: 14px; }
.tc.sm .ico svg.i { width: 22px; height: 22px; }
.tc.sm h3 { font-size: 16px; line-height: 20px; }
.tc.sm .lb strong { font-size: 17px; }
.tc .st { color: var(--ink); font-weight: 700; }
.tc .st::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 4px; background: var(--d, var(--ctl)); }
.insight .head { gap: 12px; }
.insight .head .ico { width: 44px; height: 44px; flex: none; border-radius: 15px; background: var(--tile-food); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.insight .head .ico svg.i { width: 24px; height: 24px; stroke-width: 1.7; }
.insight .head.likely .ico { background: var(--coralS); } .insight .head.possible .ico { background: var(--ambT); } .insight .head.safe .ico { background: var(--sageS); }
.insight .name { min-height: 0; font: 800 19px/24px var(--sans); }
.bar { height: 12px; border-radius: 6px; } .bar .fill { border-radius: 6px; }
.stats > div { background: var(--tagbg); border-radius: 14px; padding: 8px 2px; }

/* ---- Stage 2A: packaged food (picker, product cards, label scan) ---- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.err[hidden] { display: none; }
.ingwrap > * + * { margin-top: 10px; }
.chip.pkg { padding: 0 16px 0 12px; }
.chip.pkg svg.i { width: 16px; height: 16px; stroke-width: 2; }
.chip.pkg[aria-pressed=true] svg.i { stroke: var(--accInk); }
.scanopen { margin-top: 10px; }
.scanopen svg.i { margin-right: 8px; }

.pickcard { margin-top: 12px; padding: 12px 12px 8px; }
.pickcard > * + * { margin-top: 0; }
.pickcard .lab { padding: 0 2px 2px; color: var(--ink); }
.pickcard .lab .pt { font-size: 15px; }
.cand { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 6px 10px; border: 0; border-radius: 16px; background: transparent; text-align: left; color: var(--ink); margin-top: 4px; }
.cand.sel { background: var(--coralW); box-shadow: inset 0 0 0 1.5px var(--coralL); }
.cand .tx { flex: 1; min-width: 0; }
.cand .nm { font: 700 14.5px/18px var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cand .br { display: flex; align-items: center; gap: 6px; min-width: 0; font: 400 12.5px/16px var(--sans); color: var(--ink2); }
.cty { height: 16px; padding: 0 6px; border-radius: 8px; background: var(--tagbg); font: 700 10px/16px var(--sans); letter-spacing: .04em; color: var(--ink2); white-space: nowrap; }
.thumb { width: 40px; height: 40px; border-radius: 11px; flex: none; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--tile-food); color: var(--coralT); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .ph svg.i { width: 20px; height: 20px; }
.use { height: 34px; padding: 0 12px; border-radius: 17px; display: inline-flex; align-items: center; gap: 5px; font: 700 13px/16px var(--sans); flex: none; box-shadow: inset 0 0 0 1.5px var(--ctl); color: var(--ink); background: var(--card); }
.use.on { background: var(--acc); color: var(--accInk); box-shadow: none; }
.use svg.i { width: 14px; height: 14px; stroke-width: 2.6; }
.pk-none { min-height: 44px; padding: 0 4px; font-size: 14px; }

.pc { margin-top: 0; padding: 12px 12px 8px; overflow: visible; }
.pc .hd { display: flex; align-items: center; gap: 8px; }
.pc .tile.sm { width: 34px; height: 34px; border-radius: 11px; flex: none; }
.pc .tile.sm svg.i { width: 18px; height: 18px; }
.pc .hd .tx { flex: 1; min-width: 0; }
.pc .hd b { display: block; font: 700 15.5px/20px var(--sans); overflow-wrap: anywhere; }
.pc .hd small { display: flex; align-items: center; gap: 5px; font: 500 12px/16px var(--sans); color: var(--ink2); }
.pc .hd small svg.i { width: 12px; height: 12px; stroke-width: 2.4; color: var(--sageD); }
.pc-edit { position: relative; width: 32px; height: 32px; flex: none; border: 0; border-radius: 16px; background: transparent; color: var(--ink2); display: inline-flex; align-items: center; justify-content: center; }
.pc-edit::before { content: ""; position: absolute; inset: -6px; }
.pc-edit svg.i { width: 16px; height: 16px; stroke-width: 2; }
.pc-name { width: 100%; min-height: 36px; border: 1.5px solid var(--ctl); border-radius: 10px; background: var(--card); padding: 0 8px; font: 700 15px/20px var(--sans); color: var(--ink); }
.bd { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px; font: 700 11px/22px var(--sans); white-space: nowrap; flex: none; }
.bd.prod, .tg.prod { background: var(--acc); color: var(--accInk); }
.pc .chips { margin-top: 10px; }
.chip.vague { border-style: dashed; border-color: var(--ctl); background: transparent; color: var(--ink2); }
span.chip.vague { background: transparent; }
.chip .vg { display: inline-flex; color: var(--amber); }
.chip .vg svg.i { width: 15px; height: 15px; stroke-width: 2; }
.lg2 { display: flex; flex-wrap: wrap; gap: 3px 14px; margin-top: 9px; font: 500 11.5px/16px var(--sans); color: var(--ink2); }
.lg2 span { display: inline-flex; align-items: center; gap: 6px; }
.lg2 i { width: 7px; height: 7px; border-radius: 4px; background: var(--coralD); }
.lg2 u { width: 16px; height: 11px; border-radius: 6px; border: 1.5px dashed var(--ctl); }
.sbtn { margin-top: 10px; width: 100%; min-height: 44px; border-radius: 22px; border: 0; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 8px; font: 700 14.5px/18px var(--sans); }
.sbtn svg.i { width: 19px; height: 19px; }
.pc-rm { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; margin-top: 2px; border: 0; background: none; color: var(--red); font: 700 13px/18px var(--sans); }
.pc-rm svg.i { width: 13px; height: 13px; stroke-width: 2.6; }

/* label scan layer (dark in both themes, like the camera screen in the mockup) */
.scanlayer { position: fixed; inset: 0; z-index: 60; background: #2C2026; color: #FFF6EC; display: flex; flex-direction: column; max-width: 480px; margin: 0 auto; overflow-y: auto; padding-top: env(safe-area-inset-top); }
.scanlayer .snav { height: 56px; flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--gut); }
.scanlayer .snav .t { font: 700 17px/22px var(--sans); }
.scanlayer .cl { width: 44px; height: 44px; border-radius: 22px; border: 0; background: rgba(255, 246, 236, .14); color: #FFF6EC; display: flex; align-items: center; justify-content: center; justify-self: start; }
.scanlayer .cl svg.i { width: 18px; height: 18px; stroke-width: 2.2; }
.scanlayer :focus-visible { outline-color: #FFF6EC; }
.scanbody { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.scanlayer .cam { flex: none; height: 266px; margin: 0 var(--gut); border-radius: 26px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #4A3841, #2C2026 75%); }
.scanlayer .cam svg.art { display: block; width: 100%; height: 100%; }
.scanlayer .ins { flex: none; text-align: center; font: 600 15px/20px var(--sans); padding: 14px 28px 0; }
.scanlayer .ins small { display: block; font: 400 13px/18px var(--sans); color: #CDB9B6; margin-top: 2px; }
.scanlayer .ins .err { color: #F6A894; margin-top: 8px; }
.scanlayer .spinner { border-color: rgba(255, 246, 236, .3); border-top-color: #FFF6EC; }
.scanlayer .shut { flex: none; display: flex; justify-content: center; margin-top: 10px; }
.shutter { width: 72px; height: 72px; border-radius: 36px; border: 4px solid #FFF6EC; background: transparent; display: flex; align-items: center; justify-content: center; padding: 0; }
.shutter b { width: 50px; height: 50px; border-radius: 25px; background: #FFF6EC; display: block; }
.scanlib { flex: none; display: flex; justify-content: center; padding: 14px var(--gut) calc(env(safe-area-inset-bottom) + 20px); }
.scanbtn { min-height: 44px; padding: 0 20px; border-radius: 22px; border: 1.5px solid rgba(255, 246, 236, .5); background: transparent; color: #FFF6EC; display: inline-flex; align-items: center; gap: 8px; font: 600 15px/20px var(--sans); }
.scanbtn svg.i { width: 18px; height: 18px; }
.scanmsg { margin: 24px var(--gut); display: grid; gap: 12px; font: 400 16px/22px var(--sans); }
.pillb { height: 52px; border-radius: 26px; display: flex; align-items: center; justify-content: center; gap: 8px; font: 700 16px/20px var(--sans); border: 0; }
.pillb svg.i { width: 18px; height: 18px; stroke-width: 2.4; }
.scanmsg .pillb.d { background: #FFF6EC; color: #2C2026; }
.rsheet { margin-top: auto; background: var(--sheet); color: var(--ink); border-radius: 32px 32px 0 0; padding: 0 var(--gut) calc(env(safe-area-inset-bottom) + 22px); box-shadow: 0 -10px 30px rgba(20, 10, 15, .35); display: flex; flex-direction: column; }
.rsheet .grab { width: 40px; height: 5px; border-radius: 3px; background: var(--grab); margin: 8px auto 4px; flex: none; }
.rsheet h3 { font: 700 20px/26px var(--sans); letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.rsheet h3 svg.i { width: 20px; height: 20px; color: var(--sageD); stroke-width: 2.4; }
.rsheet .fl { font: 700 12px/16px var(--sans); color: var(--ink2); padding: 10px 0 4px; }
.rsheet .inp { min-height: 44px; border-radius: 14px; background: var(--card); border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px 0 6px; }
.rsheet .inp input.bare { flex: 1; text-align: left; max-width: none; font: 600 16px/20px var(--sans); color: var(--ink); }
.rsheet .inp svg.i { width: 16px; height: 16px; color: var(--ink3); }
.rsheet .inp:focus-within { border-color: var(--coralD); }
.scantxt { width: 100%; min-height: 132px; max-height: 38vh; resize: vertical; border-radius: 14px; background: var(--tagbg); border: 1.5px solid var(--line); padding: 9px 12px; font: 400 14px/20px var(--sans); color: var(--ink); }
.rsheet .pmsg { margin-top: 6px; }
.rsheet .rbtns { display: flex; gap: 10px; margin-top: 14px; }
.rsheet .pillb.d { background: var(--acc); color: var(--accInk); flex: 1; min-width: 0; }
.rsheet .pillb.l { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); padding: 0 22px; flex: none; }
@media (prefers-reduced-motion: reduce) { .scanlayer * { transition: none !important; } }

/* ---- Stage 2B: Insights / All foods / product + ingredient pages (values from mockups/g.html) ---- */
.bd.ingr { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.bd.grp { background: var(--tagbg); color: var(--ink2); }
.bd.food { background: var(--sageS); color: var(--sageD); }
.ixf { flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ixf .chip { flex: 1 1 auto; justify-content: center; padding: 0 12px; font-size: 14px; }
.pct { font: 700 17px/20px var(--sans); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pct.c { color: var(--coralT); } .pct.p { color: var(--ambX); } .pct.g { color: var(--sageD); }
.gbar { position: relative; height: 8px; border-radius: 4px; background: var(--track); flex: none; --f: var(--sage); }
.gbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--f); }
.gbar u { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--ink); text-decoration: none; }
.gbar.lv-likely { --f: var(--coral); } .gbar.lv-possible { --f: var(--amber); } .gbar.lv-ok { --f: var(--sage); }
.gbar.sm { height: 6px; border-radius: 3px; } .gbar.sm i { border-radius: 3px; } .gbar.sm u { top: -2px; bottom: -2px; width: 1.5px; }
.gbar.dash { background: none; height: 8px; }
.gbar.dash::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 2px dashed var(--ctl); }

.ixt { width: 40px; height: 40px; border-radius: 13px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--tile-food); color: var(--ink); }
.ixt svg.i { width: 21px; height: 21px; stroke-width: 1.8; }
.ixt.k-product { background: var(--tile-sym); color: var(--coralT); } .ixt.k-food { background: var(--tile-meal); } .ixt.k-group { background: var(--tile-check); } .ixt.k-meal { background: var(--tile-event); color: var(--sageD); }
.ixt.sm { width: 34px; height: 34px; border-radius: 11px; } .ixt.sm svg.i { width: 18px; height: 18px; }
.ixt.lg { width: 52px; height: 52px; border-radius: 16px; } .ixt.lg svg.i { width: 27px; height: 27px; }

.ixc { display: block; margin-top: 10px; padding: 12px 14px; color: var(--ink); text-decoration: none; }
.ixh { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ixh .tx { flex: 1; min-width: 0; }
.ixh .nm { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font: 700 16px/20px var(--sans); overflow-wrap: anywhere; }
.ixh .ds { font: 400 12.5px/16px var(--sans); color: var(--ink2); overflow-wrap: anywhere; }
.ixc .gbar { margin-top: 10px; }
.ixwhy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font: 500 12.5px/16px var(--sans); color: var(--ink2); }
.ixwhy b { font-weight: 700; color: var(--ink); }
.ixwhy.plain { display: block; }
.mini { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 11px; background: var(--coralS); color: var(--coralT); font: 600 11.5px/14px var(--sans); }
.sf small { font: 600 11px/14px var(--sans); opacity: .85; }

.card.compact { padding: 12px 14px; }
.card.compact p { font-size: 14px; line-height: 20px; }
.lr { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 14px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; min-width: 0; }
.lr:first-child { border-top: 0; }
.lr .tx { flex: 1; min-width: 0; }
.lr .nm { font: 700 15.5px/20px var(--sans); overflow-wrap: anywhere; }
.lr .ds { font: 400 12.5px/16px var(--sans); color: var(--ink2); overflow-wrap: anywhere; }
.lr .rt { width: 92px; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.lr .rt .p { display: flex; align-items: center; gap: 7px; }
.lr .rt .pct { font-size: 15.5px; }
.lr .rt .gbar { width: 84px; }
.foot2 { display: flex; align-items: center; gap: 8px; padding: 12px 2px 0; font: 500 12.5px/16px var(--sans); color: var(--ink2); }
.foot2 .tk { width: 2px; height: 12px; background: var(--ink); border-radius: 1px; flex: none; }

.ph2 { display: flex; gap: 12px; align-items: flex-start; }
.ph2 .tx { flex: 1; min-width: 0; }
.ph2 h2 { font: 700 24px/28px var(--sans); letter-spacing: -.02em; overflow-wrap: anywhere; }
.ph2 .br { font: 500 14px/18px var(--sans); color: var(--ink2); }
.ph2 .src { display: flex; align-items: flex-start; gap: 5px; font: 500 12px/16px var(--sans); color: var(--ink3); margin-top: 2px; }
.ph2 .src svg.i { width: 13px; height: 13px; stroke-width: 2.2; color: var(--sageD); margin-top: 1.5px; flex: none; }
.vd { margin-top: 12px; padding: 13px 14px 14px; border-radius: 20px; background: var(--coralW); border: 1.5px solid var(--coralL); }
.vd.ok { background: var(--sageW); border-color: var(--sageL); }
.vd.neutral { background: var(--tagbg); border-color: var(--line); }
.vd .hd { display: flex; gap: 10px; align-items: flex-start; }
.vd .ci { width: 30px; height: 30px; border-radius: 15px; background: var(--coralS); color: var(--coralT); display: flex; align-items: center; justify-content: center; flex: none; }
.vd.ok .ci { background: var(--sageS); color: var(--sageD); } .vd.neutral .ci { background: var(--card); color: var(--ink2); }
.vd .ci svg.i { width: 17px; height: 17px; }
.vd h3 { font: 700 16px/20px var(--sans); letter-spacing: -.005em; padding-top: 5px; overflow-wrap: anywhere; }
.vd p { font: 400 13.5px/19px var(--sans); color: var(--ink); margin-top: 7px; }
.vd p.need { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink2); }
.vd p.need svg.i { width: 15px; height: 15px; }
.ps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
.ps3 > div { padding: 10px 12px; border-left: 1px solid var(--line); min-width: 0; }
.ps3 > div:first-child { border-left: 0; }
.ps3 .v { font: 700 20px/24px var(--sans); letter-spacing: -.02em; }
.ps3 .v.c { color: var(--coralT); } .ps3 .v.p { color: var(--ambX); }
.ps3 .k { font: 500 12px/15px var(--sans); color: var(--ink2); }
.leg { font: 400 12.5px/17px var(--sans); color: var(--ink2); margin: 0 0 8px; }
.leg b { color: var(--ink); font-weight: 700; }
.ir2 { display: flex; gap: 10px; align-items: flex-start; min-height: 52px; padding: 8px 14px 9px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; min-width: 0; }
.ir2:first-child { border-top: 0; }
.ir2 .dot { margin-top: 5px; }
.dot.likely { background: var(--coralD); } .dot.possible { background: var(--amber); }
.dot.ring { background: transparent; box-shadow: inset 0 0 0 2px var(--ctl); }
.ir2 .m { flex: 1; min-width: 0; }
.ir2 .l1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-height: 20px; }
.ir2 .n { display: inline-flex; align-items: center; gap: 6px; font: 600 15px/20px var(--sans); min-width: 0; overflow-wrap: anywhere; }
.ir2 .vg { display: inline-flex; color: var(--amber); flex: none; }
.ir2 .vg svg.i { width: 15px; height: 15px; stroke-width: 2; }
.ir2 .v { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; flex: none; }
.ir2 .v b { font: 700 15px/20px var(--sans); }
.ir2 .pct.g { color: var(--ink); }
.ir2 .v small { font: 500 11.5px/14px var(--sans); color: var(--ink3); }
.ir2 .gbar { margin-top: 6px; }
.ir2 .need2 { font: italic 500 12px/16px var(--sans); color: var(--ink3); margin-top: 3px; }
.ir2.none .n { color: var(--ink2); }
.key { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px 2px 0; font: 500 11.5px/16px var(--sans); color: var(--ink2); }
.key span { display: inline-flex; align-items: center; gap: 6px; }
.key svg.i { width: 13px; height: 13px; color: var(--amber); stroke-width: 2; }

.wr2 { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 14px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; min-width: 0; }
.wr2:first-child { border-top: 0; }
.wr2 .tx { flex: 1; min-width: 0; }
.wr2 .l1 { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 7px; }
.wr2 .n { font: 600 15px/20px var(--sans); min-width: 0; overflow-wrap: anywhere; }
.wr2 .gbar { margin-top: 8px; height: 7px; }
.wr2 .rr { width: 52px; flex: none; text-align: right; }
.wr2 .rr .pct { display: block; font-size: 16px; }
.wr2 .rr small { font: 500 11px/14px var(--sans); color: var(--ink3); }
.cover { margin-top: 10px; display: flex; gap: 12px; align-items: center; padding: 12px 14px; }
.cover .dts { display: flex; flex-wrap: wrap; gap: 4px; flex: none; max-width: 100px; }
.cover .dts i { width: 14px; height: 14px; border-radius: 7px; background: var(--coral); }
.cover .dts i.o { background: var(--tagbg); box-shadow: inset 0 0 0 1.5px var(--ctl); }
.cover p { font: 500 13.5px/18px var(--sans); color: var(--ink2); min-width: 0; }
.cover p b { color: var(--ink); }
.pk2 { display: flex; flex-wrap: wrap; gap: 8px; }
.pkc { min-height: 44px; padding: 0 14px 0 12px; border-radius: 22px; background: var(--tagbg); color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font: 600 13.5px/18px var(--sans); max-width: 100%; overflow-wrap: anywhere; }
.pkc svg.i { width: 15px; height: 15px; color: var(--ink3); stroke-width: 2; flex: none; }
.ixc:focus-visible, .lr:focus-visible, .ir2:focus-visible, .wr2:focus-visible, .pkc:focus-visible { outline-offset: -3px; }
@media (max-width: 380px) { .lr .rt { width: 80px; } .lr .rt .gbar { width: 72px; } .ps3 > div { padding: 10px 8px; } .ps3 .v { font-size: 18px; } }

/* Notes box: the meal form wraps the textarea in a <label class="card pad">; labels are inline by default, which broke the card into fragments. */
label.card { display: block; }
label.card.pad > textarea.notes { min-height: 96px; padding: 0; line-height: 22px; outline: none; }
label.card:focus-within { border-color: var(--coralD); }
.notes { box-sizing: border-box; font: 400 17px/22px var(--sans); color: var(--ink); }

/* ---- Insights restructure: Triggers | Safe foods | All data ---- */
.seg button[aria-selected=true] { background: var(--acc); color: var(--accInk); }
.seg button[role=tab]:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
#ins-tab-panel:focus { outline: none; }
.trsum { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 14px 0 0; font: 400 15px/20px var(--sans); color: var(--ink); }
.trsum b { font-weight: 700; }
.trsum .dot { margin-right: -2px; }
.ixintro { font: 400 14px/20px var(--sans); color: var(--ink2); margin: 2px 2px 0; }
.card.empty .btn2.block, .card.empty .btn { text-align: center; }
.trh { display: flex; align-items: center; gap: 8px; margin: 16px 2px 0; font: 700 14px/18px var(--sans); color: var(--ink); }
.trh .n { font-weight: 500; color: var(--ink2); }
.trh + .ixc { margin-top: 8px; }
.trmore { display: block; margin: 10px auto 0; padding: 4px 8px; }
.lr.sfr { align-items: flex-start; gap: 10px; padding: 12px 14px; }
.sfr > .dot { margin-top: 5px; }
.sfr .sfb { flex: 1; min-width: 0; }
.sfr .sfh { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sfr .sfh .nm { display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; min-width: 0; }
.sfr .sfh .nm svg.i { width: 16px; height: 16px; flex: none; color: var(--sageD); stroke-width: 2.1; }
.sfr .sfh .nm small { font: 400 12.5px/20px var(--sans); color: var(--ink2); }
.sfr .sfh .pct { flex: none; font-size: 15.5px; line-height: 20px; }
.sfr .ds { margin-top: 2px; }
.sfr .gbar { width: 100%; margin-top: 8px; }
.basis + .disc, .card + .basis { text-align: center; }
@media (max-width: 380px) { .trsum { font-size: 14px; } }

/* ---- consistent vertical rhythm for stacked cards (spacing fix) ----
 * Insights views: tab control, then one flex column with a single gap, so cards/chips/headings never touch. */
.page > .seg.top { margin: 4px 0 14px; }
.page > .seg.top + div { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.page > .seg.top + div > * { margin-top: 0; margin-bottom: 0; }
.page > .seg.top + div > .lab { margin-bottom: -6px; }
.page > .seg.top + div > .chiprow { padding-bottom: 0; }
.page > .seg.top + div > .trsec { display: flex; flex-direction: column; gap: 12px; }
.page > .seg.top + div > .trsec > * { margin-top: 0; margin-bottom: 0; }
.page > .seg.top + div > .ixintro { margin: 0; }
/* generic: any page that stacks cards directly gets the same gap */
.page > .card + .card, .page > .card + .lab, .page > .lab + .card { margin-top: 14px; }
.page > .seg.top + div > div:first-child > .lab:first-child, .page > .seg.top + div > div:first-child > h2:first-child { margin-top: 0; padding-top: 0; }
.page > .seg.top + div > div:first-child > div:first-child.sech { margin-top: 0; }

.dtsum { padding: 8px 4px 0; font-size: 13px; color: var(--ink2); }
.quicktime { margin-top: 10px; }

.cust-row { display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 16px; margin-top: 10px; }
.cust-in { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--ink); height: 40px; outline: none; text-align: left; }
.cust-in::placeholder { color: var(--ink3); }
.srow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.srow .ci { width: 30px; height: 30px; border-radius: 10px; background: var(--tagbg); display: flex; align-items: center; justify-content: center; flex: none; color: var(--coralT, var(--ink)); }
.srow .ci svg { width: 18px; height: 18px; }
.srow .tx { flex: 1; min-width: 0; }
.srow .nm { font-weight: 600; display: flex; gap: 8px; align-items: center; }
.srow .rt { text-align: right; white-space: nowrap; }
.srow .rt small { display: block; color: var(--ink3); font-size: 12px; }
.sbar { height: 6px; border-radius: 3px; background: var(--track, var(--tagbg)); margin-top: 6px; overflow: hidden; }
.sbar i { display: block; height: 100%; background: var(--coral, #E07A64); border-radius: 3px; }
.pill.mini { font-size: 11px; padding: 0 7px; line-height: 18px; height: 18px; }

/* ---------- Patterns tab ---------- */
.symfilter { min-height: 52px; }
.symfilter { cursor: pointer; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin: 0 calc(var(--gut) * -1); padding-left: var(--gut); padding-right: var(--gut); scrollbar-width: none; }
.chips.scroll::-webkit-scrollbar { display: none; }
.chips.scroll .chip { flex: none; }
.pcard h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ptile { width: 30px; height: 30px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--coralT); }
.ptile svg { width: 18px; height: 18px; }
.ptile.t-meal { background: var(--tile-meal); } .ptile.t-sym { background: var(--tile-sym); } .ptile.t-check { background: var(--tile-check); color: #3F6B78; }
.ptile.t-event, .ptile.t-ok { background: var(--tile-event); color: var(--sageD); } .ptile.t-food { background: var(--tile-food); } .ptile.t-warn { background: var(--ambT); color: var(--ambX); }
.pbadge { margin-left: auto; font-size: 11px; font-weight: 700; line-height: 18px; padding: 0 8px; border-radius: 9px; background: var(--tagbg); color: var(--ink2); white-space: nowrap; }
.pbadge.g { background: var(--sageS); color: var(--sageD); } .pbadge.r { background: var(--coralS); color: var(--coralT); }
.psec { font-weight: 700; font-size: 13px; color: var(--ink2); display: flex; justify-content: space-between; align-items: center; }
.psec .note { font-weight: 500; font-size: 12px; color: var(--ink3); }
.psub { font-weight: 700; font-size: 13px; color: var(--ink2); margin: 16px 0 6px; }
.pwhy { font-size: 14.5px; line-height: 20px; color: var(--ink2); margin: 4px 0 0; }
.pwhy b { color: var(--ink); } .pwhy.dim { color: var(--ink3); } .pwhy.sm { font-size: 13px; line-height: 18px; margin-top: 8px; }
.ptk { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.ptk:first-of-type { border-top: 0; }
.ptk p { margin: 0; font-size: 14.5px; line-height: 20px; color: var(--ink2); } .ptk p b { color: var(--ink); }
.pdot { width: 10px; height: 10px; border-radius: 5px; flex: none; margin-top: 6px; background: var(--ctl); }
.pdot.r { background: var(--coralD); } .pdot.a { background: var(--amber); } .pdot.g { background: var(--sage); }
.pbars { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.pbr { display: grid; grid-template-columns: 100px 1fr 44px; gap: 8px; align-items: center; min-height: 32px; }
.pbr .l { font-size: 13.5px; font-weight: 600; line-height: 16px; color: var(--ink); }
.pbr .l small { display: block; font-size: 11px; font-weight: 500; line-height: 13px; color: var(--ink3); }
.pbr .t { position: relative; height: 12px; border-radius: 6px; background: var(--track); }
.pbr .f { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--amberL); }
.pbr .f.hi { background: var(--coral); } .pbr .f.mid { background: var(--amber); } .pbr .f.lo { background: var(--sage); } .pbr .f.ok { background: var(--amberL); }
.pbr .tick { position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: 1px; background: var(--ink); }
.pbr .v { font-size: 14px; font-weight: 700; text-align: right; color: var(--ink2); }
.pbr .v.hi { color: var(--coralT); } .pbr .v.mid { color: var(--ambX); } .pbr .v.lo { color: var(--sageD); }
.pbr.nd .t { background: none; height: 0; border-top: 2px dashed var(--ctl); border-radius: 0; }
.pbr.nd .v { font-size: 11px; font-weight: 500; color: var(--ink3); }
.plegend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; line-height: 14px; color: var(--ink3); margin-top: 10px; align-items: center; }
.plegend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.plegend i.tk2 { width: 2px; height: 12px; border-radius: 1px; background: var(--ink); } .plegend i.c.hi { background: var(--coral); } .plegend i.c.lo { background: var(--sage); }
.plegend i.c.ml { background: var(--acc); } .plegend i.c.sn { background: var(--l2); } .plegend i.c.on { background: var(--coralD); height: 5px; vertical-align: 2px; }
.plegend.lg { margin-top: 6px; }
.pfoot { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; line-height: 16px; color: var(--ink3); margin-top: 10px; }
.pfoot svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.pchart { position: relative; margin-top: 12px; color: var(--ink); }
.pcols { display: flex; align-items: flex-end; gap: 5px; height: 112px; }
.pcols.tall { height: 120px; }
.pcols .c { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 2px; }
.pcols .c i { display: block; border-radius: 5px 5px 2px 2px; background: var(--coralL); }
.pcols .c i.recent { background: var(--coral); } .pcols .c i.gap { height: 3px; background: none; border-top: 2px dashed var(--ctl); border-radius: 0; }
.pcols .c i.ml { background: var(--acc); } .pcols .c i.sn { background: var(--l2); border-radius: 5px 5px 0 0; }
.pline { position: absolute; left: 0; top: 0; width: 100%; height: 120px; overflow: visible; }
.paxis { display: flex; justify-content: space-between; font-size: 11px; line-height: 14px; color: var(--ink3); margin-top: 6px; }
.pmarks { display: flex; gap: 5px; margin-top: 4px; } .pmarks i { flex: 1; height: 6px; border-radius: 3px; background: var(--track); } .pmarks i.on { background: var(--coralD); }
.pchips { margin-top: 12px; } .pchips.tight { gap: 6px; }
.pchip { font-size: 12px; font-weight: 600; padding: 0 10px; line-height: 26px; border-radius: 13px; background: var(--tagbg); color: var(--ink2); }
.ptwo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.pbox { background: var(--bg); border-radius: 16px; padding: 12px; min-width: 0; }
.pbox .pn { font-size: 26px; line-height: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--ink2); }
.pbox .pn.hi { color: var(--coralT); } .pbox .pn.lo { color: var(--sageD); } .pbox .pn.none { color: var(--ink3); }
.pbox .k { font-size: 13px; font-weight: 600; line-height: 16px; color: var(--ink); overflow-wrap: anywhere; } .pbox .sub { font-size: 12px; line-height: 15px; color: var(--ink3); margin-top: 2px; }
.pbox .tr { position: relative; height: 8px; border-radius: 4px; background: var(--track); margin-top: 8px; }
.pbox .tr i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--coral); } .pbox .tr em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); border-radius: 1px; }
.prh { display: grid; grid-template-columns: 34px 1fr; gap: 6px 8px; align-items: center; margin-top: 8px; }
.prh .d { font-size: 12px; font-weight: 600; color: var(--ink3); }
.prh .tr { position: relative; height: 22px; border-radius: 11px; background: var(--track); overflow: hidden; }
.prh .tr b { position: absolute; top: 4px; width: 14px; height: 14px; border-radius: 7px; background: var(--acc); }
.prh .tr b.sn { background: var(--l2); box-shadow: inset 0 0 0 2px var(--amber); width: 10px; height: 10px; top: 6px; margin-left: 2px; }
.prh .tr u { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(201,138,30,.28) 0 4px, rgba(201,138,30,.1) 4px 8px); }
.prh .ax { grid-column: 2; display: flex; justify-content: space-between; font-size: 11px; color: var(--ink3); }
.phint { display: flex; gap: 8px; align-items: flex-start; background: var(--coralW); border-radius: 14px; padding: 10px 12px; font-size: 13px; line-height: 18px; color: var(--coralT); margin-top: 12px; }
.phint svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.pcard .seg { margin-top: 10px; } .pcard .seg.sm span, .pcard .seg.sm button { min-height: 34px; font-size: 14px; }
.pcard .btn2.block { margin-top: 12px; }
.pcal { padding: 0; } .pcal summary { font-weight: 700; font-size: 15px; cursor: pointer; padding: 16px; list-style-position: inside; } .pcal[open] summary { border-bottom: 1px solid var(--line); } .pcal > .hint, .pcal > p { margin: 12px 16px 0; } .pcal > .card, .pcal > div:not(.card) { margin: 12px 14px 0; } .pcal > :last-child { margin-bottom: 14px; }
.pchips .chip { font-size: 14px; padding-left: 14px; padding-right: 14px; min-height: 38px; }

/* Meal form, bottom: Dish name, Cuisine and Notes share one field look (rounded, 1.5px border). */
.field.cuisinef { padding: 0 8px 0 16px; }
.cuisinef .fl { flex: none; color: var(--ink2); }
.cuisine-sel { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; min-height: 48px; border: 0; outline: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8959B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 6px center / 16px; padding: 0 28px 0 8px; text-align: right; text-align-last: right; font-weight: 600; color: var(--ink); max-width: none; }
.field.notesf { align-items: flex-start; padding: 14px 16px; border-radius: 22px; }
.notesf textarea.notes { min-height: 84px; resize: none; padding: 0; margin: 0; outline: none; line-height: 22px; }
.banner .bt { flex: 1; min-width: 0; }
.banner .bt .btn2 { margin-top: 10px; }

/* Dropdown pill + checked list sheet (pickBtn) */
.pickbtn { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; min-height: 38px; max-width: 70%; padding: 0 10px 0 14px; border: 0; border-radius: 19px; background: var(--tagbg); color: var(--ink); font: 600 15px/20px var(--sans); cursor: pointer; }
.pickbtn .pv { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pickbtn svg { width: 16px; height: 16px; flex: none; stroke: var(--ink3); stroke-width: 2.2; }
.pickbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.picklist { display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; margin: 4px -4px 8px; padding: 0 4px; }
.popt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 8px 14px; border: 0; border-radius: 16px; background: transparent; color: var(--ink); text-align: left; font: 500 17px/22px var(--sans); cursor: pointer; }
.popt small { display: block; font: 500 12.5px/16px var(--sans); color: var(--ink3); }
.popt .tick { width: 24px; height: 24px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--acc); color: var(--accInk); opacity: 0; }
.popt .tick svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 3; }
.popt.on { background: var(--tagbg); font-weight: 700; } .popt.on .tick { opacity: 1; }
.field.cuisinef { padding: 0 8px 0 16px; }
.setgroup .row .pickbtn { max-width: 52%; flex: none; }
.tx.pad2 { padding: 12px 0; }

/* ---------- Settings page: one consistent row system ---------- */
.settings .lab { padding: 0; margin: 28px 4px 8px; }
.settings .lab.t { margin-top: 8px; }
.settings .card .row { padding: 12px 16px; min-height: 56px; gap: 14px; }
.settings .row .nm { font: 500 16px/22px var(--sans); }
.settings .row .ds { font: 400 13px/18px var(--sans); color: var(--ink3); margin-top: 2px; }
.settings .row.mt { padding: 14px 16px; }
.settings .row.mt .ds { margin: 0; font-size: 13.5px; line-height: 19px; color: var(--ink2); }
.settings .row.mt .seg { margin-top: 10px; }
.settings .row.inrow { padding-top: 10px; padding-bottom: 10px; }
.settings .row.link { padding-top: 12px; padding-bottom: 12px; }
.settings .row .lnk { font-weight: 600; font-size: 14px; }
.settings .row.stack { flex-direction: column; align-items: stretch; gap: 8px; }
.settings .row.stack > .tx { flex: none; max-width: none; }
.settings .row.stack input.bare { flex: none; width: 100%; max-width: none; min-height: 46px; padding: 0 14px; text-align: left; background: var(--bg); border-radius: 14px; }
.settings .sw-row { padding-top: 12px; padding-bottom: 12px; }
.settings .setgroup > .row:first-child { padding-bottom: 8px; }
.settings .setgroup > .sw-row { min-height: 40px; padding: 0 16px 12px; }
.settings .setgroup > .sw-row .nm { font: 400 14px/20px var(--sans); color: var(--ink2); }
.settings .setgroup > .row:only-child { padding-bottom: 12px; }
.settings details.adv > summary { padding: 16px; font-weight: 700; font-size: 15px; cursor: pointer; list-style-position: inside; }
.settings details.adv[open] > summary { border-bottom: 1px solid var(--line); }
.settings .card .btn2 { margin: 0; }
.settings .card.gap > .row:first-child { border-top: 0; }

/* Accounts */
.acctform { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.acctform .field { margin-top: 0; }
.acctform .btn.danger { background: var(--red); }
.lead { font: 400 17px/24px var(--sans); color: var(--ink2); margin: -4px 0 4px; }
.lnk.center { display: block; text-align: center; padding: 14px 0; }
.err { color: var(--red); font: 600 14px/20px var(--sans); margin: 0; min-height: 0; }
.err:empty { display: none; }
.acctpage { display: flex; flex-direction: column; gap: 14px; }
.acctpage .lead { margin: 0; }