:root{
  --paper:#F4F3EE;
  --card:#FAFAF7;
  --ink:#1A1C19;
  --muted:#74776E;
  --rule:#E2E1DA;
  --cal:#3E4C6D;
  --pro:#2E5A4B;
  --warn:#8C4A2F;
  --col:720px;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  height:100dvh;
  overflow:hidden;
}

/* left-anchored column, capped so lines don't run the whole monitor */
.tally > *,
.log,
.pane,
.composer-inner,
.nav-inner{
  width:100%;
  max-width:var(--col);
  margin-right:auto;
}

/* ---- header tally ---- */
.tally{
  padding:14px 18px 0;
  border-bottom:1px solid var(--rule);
  background:var(--paper);
  flex:none;
}
.tally-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.wordmark{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  font-weight:600;
  letter-spacing:.22em;
}
.date{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  color:var(--muted);
  letter-spacing:.06em;
}
.figures{
  display:flex;
  gap:32px;
  margin:10px 0 8px;
}
.figure{display:flex;flex-direction:column}
.num{
  font-family:'IBM Plex Mono',monospace;
  font-size:30px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  line-height:1.05;
  letter-spacing:-.02em;
}
.figure:first-child .num{color:var(--cal)}
.figure:last-child .num{color:var(--pro)}
.num.over{color:var(--warn)}
.lab{
  font-size:11px;
  color:var(--muted);
  letter-spacing:.02em;
  margin-top:3px;
}
.track{
  height:2px;
  background:var(--rule);
  margin-bottom:2px;
}
.fill{
  height:100%;
  width:0;
  transition:width .45s cubic-bezier(.4,0,.2,1);
}
.fill.cal{background:var(--cal)}
.fill.pro{background:var(--pro)}
.minors{
  display:flex;
  gap:18px;
  padding:9px 0;
  font-size:11px;
  color:var(--muted);
  font-family:'IBM Plex Mono',monospace;
}
.minors b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}

/* ---- voice controls ---- */
.head-right{display:flex;align-items:center;gap:10px}
.icon-btn{
  border:none;
  background:none;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  opacity:.4;
  padding:2px;
}
.icon-btn.on{opacity:1}
.mic{
  width:42px;
  height:42px;
  border:1px solid var(--rule);
  border-radius:50%;
  background:var(--card);
  font-size:16px;
  cursor:pointer;
  flex:none;
}
.mic.live{
  background:var(--warn);
  border-color:var(--warn);
  animation:pulse 1.2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1}
  50%{opacity:.55}
}

/* ---- views ---- */
.view{
  flex:1;
  overflow-y:auto;
  display:none;
  -webkit-overflow-scrolling:touch;
}
.view.active{display:block}
.log,.pane{padding:18px 18px 8px}

/* ---- transcript ---- */
.msg{margin-bottom:20px}
.msg.you{text-align:right}
.msg.you span{
  display:inline-block;
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:14px 14px 3px 14px;
  padding:8px 13px;
  text-align:left;
  max-width:82%;
}
.msg.harve .who{
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  font-weight:600;
  letter-spacing:.16em;
  color:var(--muted);
  display:block;
  margin-bottom:5px;
}
.msg.harve p{max-width:60ch}
.msg.harve .ask{color:var(--muted);margin-top:8px}
.msg.err span{color:var(--warn)}

/* ---- ledger card ---- */
.ledger{
  border:1px solid var(--rule);
  background:var(--card);
  margin-top:12px;
  max-width:60ch;
}
.ledger-head{
  display:flex;
  justify-content:space-between;
  padding:7px 12px;
  border-bottom:1px solid var(--rule);
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.line{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:14px;
  padding:5px 12px;
  font-size:13px;
}
.line:not(:last-child){border-bottom:1px solid var(--rule)}
.line span:nth-child(n+2){
  font-family:'IBM Plex Mono',monospace;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
  min-width:44px;
  text-align:right;
}
.line.sum{background:var(--paper);font-weight:500}
.line.sum span:nth-child(n+2){color:var(--ink)}

/* ---- empty states ---- */
.empty{
  color:var(--muted);
  max-width:34ch;
  margin-top:40px;
  font-size:14px;
}
.empty.small{margin-top:6px;font-size:13px}

/* ---- charts ---- */
.chart-block{margin-bottom:26px}
.chart-block h3{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.chart-block h3 em{
  font-style:normal;
  color:var(--ink);
  letter-spacing:0;
  text-transform:none;
  font-size:13px;
  display:flex;
  align-items:center;
  gap:6px;
}
.chart{width:100%;height:auto;display:block}
.dot{fill:var(--ink)}
.avg-line{fill:none;stroke:var(--cal);stroke-width:1.75}
.bar{fill:var(--rule)}
.bar.cal{fill:var(--cal);opacity:.75}
.bar.pro{fill:var(--pro);opacity:.75}
.bar.fat{fill:var(--warn);opacity:.8}
.bar.carb{fill:var(--muted);opacity:.5}
.target{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3;opacity:.45}
.ax{
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;
  fill:var(--muted);
}
.cap{font-size:12px;color:var(--muted);margin-top:7px;max-width:52ch}
.key{display:inline-block;width:9px;height:9px;border-radius:2px}
.key.fat{background:var(--warn)}
.key.carb{background:var(--muted);opacity:.5}

/* ---- composer ---- */
.composer{
  padding:11px 18px;
  border-top:1px solid var(--rule);
  background:var(--paper);
  flex:none;
}
.composer-inner{display:flex;gap:9px}
#input{
  flex:1;
  font:inherit;
  font-size:16px;
  padding:11px 14px;
  border:1px solid var(--rule);
  border-radius:22px;
  background:var(--card);
  color:var(--ink);
}
#input:focus{outline:2px solid var(--cal);outline-offset:-1px}
#send{
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:var(--ink);
  color:var(--paper);
  font-size:17px;
  cursor:pointer;
  flex:none;
}
#send:disabled{opacity:.35}
#send:focus-visible{outline:2px solid var(--cal);outline-offset:2px}

/* ---- nav ---- */
.nav{
  border-top:1px solid var(--rule);
  background:var(--paper);
  padding-bottom:env(safe-area-inset-bottom);
  flex:none;
}
.nav-inner{display:flex}
.tab{
  flex:1;
  padding:12px 0;
  border:none;
  background:none;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  cursor:pointer;
  border-top:2px solid transparent;
  margin-top:-1px;
}
.tab.active{color:var(--ink);border-top-color:var(--ink)}

/* ---- lock screen ---- */
body.gate{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100dvh;
  overflow:hidden;
}
body.gate form{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  width:230px;
}
body.gate .wordmark{font-size:13px}
.gate-line{color:var(--muted);font-size:14px;margin-top:-6px}
body.gate input{
  width:100%;
  font:inherit;
  font-size:19px;
  font-family:'IBM Plex Mono',monospace;
  letter-spacing:.35em;
  padding:11px 14px;
  border:1px solid var(--rule);
  border-radius:4px;
  background:var(--card);
  color:var(--ink);
}
body.gate input:focus{outline:2px solid var(--cal);outline-offset:-1px}
body.gate button{
  width:100%;
  font:inherit;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:12px;
  border:none;
  border-radius:4px;
  background:var(--ink);
  color:var(--paper);
  cursor:pointer;
}
.gate-err{color:var(--warn);font-size:13px;min-height:1em}

@media (prefers-reduced-motion:reduce){
  .fill{transition:none}
  .mic.live{animation:none}
}
body.gate form input + input{margin-top:-4px}
body.gate input::placeholder{letter-spacing:normal;color:var(--muted);opacity:.6}
body.gate #handle{letter-spacing:normal;font-size:17px}
/* ---- onboarding header ---- */
.tally.slim{padding-bottom:12px}
.setup-line{
  font-size:12px;
  color:var(--muted);
  font-family:'IBM Plex Mono',monospace;
  letter-spacing:.08em;
  margin-top:8px;
}
[hidden]{display:none !important}
.tab-link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
  opacity: .5;
  font: inherit;
  font-size: 13px;
}
.tab-link:hover { opacity: 1; }