/* One narrow column: summary, quick entry, then the day log grouped by month (newest first). */
:root{
  --bg:#f3f5f4; --surface:#ffffff; --ink:#1d2a2e; --muted:#5f6f72; --line:#dbe2e0;
  --accent:#1f6f6a; --accent-ink:#ffffff; --accent-soft:#e2efed;
  --gain:#a5512b; --today:#fff4d6; --today-line:#e6c25c;
  --display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#121a1b; --surface:#1a2425; --ink:#e4ecea; --muted:#9aabab; --line:#2c3a3b;
  --accent:#5cc0b5; --accent-ink:#0d1a1a; --accent-soft:#1d3634;
  --gain:#e59a74; --today:#3a3320; --today-line:#9c8238; color-scheme:dark}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45}
.wrap{max-width:640px;margin:0 auto;padding-inline:16px;padding-block:20px 48px;display:flex;flex-direction:column;gap:20px}
h1,h2{font-family:var(--display);margin:0;text-wrap:balance}
h1{font-size:1.05rem;font-weight:500;color:var(--muted);letter-spacing:.02em}
.num{font-variant-numeric:tabular-nums}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.link{background:none;border:0;padding:4px 0;color:var(--accent);font:inherit;font-size:.9rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

.summary{display:flex;flex-direction:column;gap:14px}
.headline{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.big{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,11vw,3.6rem);line-height:1;color:var(--accent);letter-spacing:-.02em}
.big-label{font-size:1.05rem;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.stat{background:var(--surface);padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.stat b{font-family:var(--display);font-weight:700;font-size:1.25rem;font-variant-numeric:tabular-nums}
.stat span{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.since{font-size:.9rem;color:var(--muted);margin:0}

.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px}
.card h2{font-size:1.1rem;font-weight:700}
.fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field.wide{grid-column:1/-1}
label{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
input{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px;width:100%;min-width:0}
input:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.unit{position:relative}
.unit input{padding-right:34px}
.unit::after{content:attr(data-unit);position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:.9rem;pointer-events:none}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
button{font:inherit;cursor:pointer;border-radius:8px;padding:10px 18px;border:1px solid transparent}
.primary{background:var(--accent);color:var(--accent-ink);font-weight:700}
.ghost{background:transparent;color:var(--muted);border-color:var(--line)}
button:disabled{opacity:.5;cursor:default}
.status{font-size:.9rem;color:var(--muted)}
.status.err{color:var(--gain)}

.log-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.log-head h2{font-size:1.1rem}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--surface)}
.seg button{border-radius:999px;padding:6px 14px;font-size:.9rem;background:transparent;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--ink);font-weight:700}
.month{font-family:var(--display);font-weight:500;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:14px 4px 6px}
.list{display:flex;flex-direction:column}
.row{display:grid;gap:8px;align-items:baseline;padding:10px 8px;border:0;border-bottom:1px solid var(--line);background:none;border-radius:0;text-align:left;width:100%;color:var(--ink)}
.can-edit .row:hover{background:var(--accent-soft)}
.row:not(.tappable){cursor:default}
.row.today{background:var(--today);box-shadow:inset 3px 0 0 var(--today-line)}
.row.empty{color:var(--muted)}
.d{display:flex;flex-direction:column;line-height:1.2}
.d small{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.w{font-weight:700}
.w small{display:block;font-weight:400;font-size:.75rem;color:var(--accent)}
.w small.up{color:var(--gain)}
.det{color:var(--muted);overflow-wrap:anywhere}
.dash{color:var(--line)}
.note{color:var(--muted);font-size:.95rem;padding:16px 4px;margin:0}
.row, .cols{grid-template-columns:4.2rem 5.6rem 4rem minmax(0,1fr) 4rem 3rem}
.ph{color:var(--ink)}
.ph.part{color:var(--muted)}
.cols{display:grid;gap:8px;padding:6px 8px;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);border-bottom:1px solid var(--line)}
.p{color:var(--ink)}
.p.low{color:var(--muted)}

/* Protein calculator */
.calc-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.calc-head h2 span{font-weight:500;color:var(--muted);font-size:.95rem;margin-left:6px}
.total{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.total b{font-family:var(--display);font-weight:700;font-size:2.2rem;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.total span{color:var(--muted)}
.bar{height:10px;border-radius:999px;background:var(--accent-soft);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:999px;transition:width .25s ease}
.foods{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.food{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);min-height:52px}
.tick{flex:1;min-width:0;display:flex;align-items:center;gap:12px;background:none;border:0;padding:4px 0;text-align:left;color:var(--ink);border-radius:6px}
.box{flex:none;width:24px;height:24px;border-radius:6px;border:2px solid var(--line);display:grid;place-items:center;color:var(--accent-ink);font-size:.9rem;font-weight:700}
.food.on .box{background:var(--accent);border-color:var(--accent)}
.fname{flex:1;min-width:0;overflow-wrap:anywhere}
.fg{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.qty{display:flex;align-items:center;gap:4px;flex:none}
.qty button{width:34px;height:34px;padding:0;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;font-weight:700}
.qty output{min-width:2.2rem;text-align:center;font-variant-numeric:tabular-nums;font-size:.9rem}
.extra{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.extra label{flex:1;min-width:8rem}
.extra .unit{width:7.5rem}
.edit-row{display:grid;grid-template-columns:minmax(0,1fr) 6rem auto;gap:8px;align-items:center;padding:6px 0}
.edit-row .ghost{padding:8px 10px;font-size:.85rem}
.small{font-size:.9rem;color:var(--muted);margin:0}
.ex .fname{display:flex;flex-direction:column;line-height:1.3}
.ex .fname small{font-size:.8rem;color:var(--muted)}
.ex.notdue .fname span{color:var(--muted)}
.pips{display:flex;gap:8px;flex:none}
.pip{width:38px;height:38px;border-radius:50%;border:2px solid var(--line);background:var(--bg);color:var(--muted);padding:0;font-weight:700;font-size:.85rem}
.pip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.ex.notdue .pip{border-style:dashed}
select{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:9px 8px;min-width:0;max-width:100%}
.edit-row.ex-edit{grid-template-columns:minmax(0,1fr) auto auto}
@media (max-width:420px){ .edit-row.ex-edit{grid-template-columns:minmax(0,1fr) auto} .edit-row.ex-edit input{grid-column:1/-1} }
@media (max-width:420px){
  .row, .cols{grid-template-columns:3.9rem 4.4rem 3.3rem 3.6rem 2.4rem;gap:5px}
  .cols .c-det{display:none}
  .row .p{order:4}
  .row .ph{order:5}
  .d span{white-space:nowrap}
  .det{grid-column:2/-1;order:6}
  .det:empty{display:none}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .field.date{grid-column:1/-1}
}