:root{
  --bg:#f4ece0;            /* warm cream */
  --ink:#3a2618;           /* espresso */
  --line:#cbb79c;          /* soft brown hairline */
  --line-strong:#8a7560;   /* stronger brown line */
  --muted:#8a7560;         /* milky brown */
  --accent:#b5651d;        /* caramel — curve + headline only */
  --hair:1px solid var(--line-strong);
  --radius:6px;
}

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

html,body{background:var(--bg);color:var(--ink);}

body{
  font-family:"SF Mono",ui-monospace,"Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  font-size:15px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

.wrap{
  max-width:620px;
  margin:0 auto;
  padding:20px 16px 48px;
}

/* ---------- two-column layout ---------- */
/* mobile: wrappers vanish, sections flow in one column so the
   sticky hero stays pinned across the whole add/log scroll. */
.col{display:contents;}

.hero{
  position:sticky;
  top:0;
  z-index:5;
}

@media(min-width:860px){
  .wrap{max-width:1040px;}
  .grid{
    display:flex;
    align-items:stretch;            /* result column stretches so the sticky hero can travel */
    gap:22px;
  }
  .col{display:block;}              /* restore real columns */
  .col-result{flex:1 1 0;min-width:0;}
  .col-input{flex:1 1 0;min-width:0;}
  /* hero fills the viewport height; the curve grows to take the slack */
  .hero{
    top:20px;
    margin-bottom:0;
    display:flex;
    flex-direction:column;
    min-height:calc(100vh - 40px);
  }
  .chart-box{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;}
}

/* ---------- header ---------- */
.head{border-bottom:var(--hair);padding-bottom:14px;margin-bottom:18px;}
.head h1{
  font-size:34px;
  font-weight:800;
  letter-spacing:-1px;
  line-height:1;
}
.sub{font-size:12px;color:var(--muted);margin-top:8px;text-transform:uppercase;letter-spacing:.5px;}

/* ---------- hero: verdict + curve in one card ---------- */
.hero{
  border:var(--hair);
  border-radius:var(--radius);
  padding:18px 16px;
  margin-bottom:18px;
  background:#faf5ec;
}
.verdict-big{
  font-size:18px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.3px;
  margin:0 0 6px;
  color:var(--accent);            /* accent: headline */
}
.verdict-quip{font-size:14px;color:var(--accent);font-weight:700;margin-bottom:6px;}
.verdict-now{font-size:13px;color:var(--ink);}

/* smaller headline on mobile */
@media(max-width:859px){
  .verdict-quip{font-size:12px;}
  .verdict-now{font-size:11px;}
}

/* ---------- chart (nested inside hero) ---------- */
.chart-box{
  position:relative;
  margin-top:16px;
  padding-top:16px;
  border-top:var(--hair);
}
.chart-canvas-wrap{height:190px;position:relative;}
@media(min-width:860px){.chart-canvas-wrap{flex:1 1 auto;height:auto;min-height:260px;}}
#chart{width:100%!important;height:100%!important;}
.chart-empty{
  font-size:12px;color:var(--muted);text-align:center;padding:90px 8px;
}
.chart-box.has-data .chart-empty{display:none;}
.chart-box:not(.has-data) .chart-canvas-wrap{display:none;}

/* ---------- generic blocks ---------- */
.block{margin-bottom:18px;}
.block-label{
  font-size:12px;font-weight:700;letter-spacing:1.5px;margin-bottom:10px;display:block;
}

.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

.mono-input{
  font-family:inherit;font-size:15px;
  border:var(--hair);background:#fffaf2;color:var(--ink);
  padding:10px 10px;border-radius:var(--radius);
  -webkit-appearance:none;appearance:none;
  min-height:44px;
}
.mono-input:focus{outline:2px solid var(--accent);outline-offset:-1px;}
.mono-input.narrow{width:84px;}

.unit{font-size:13px;color:var(--muted);}

/* ---------- buttons ---------- */
.btn{
  font-family:inherit;font-size:14px;font-weight:700;
  background:#fffaf2;color:var(--ink);
  border:var(--hair);border-radius:var(--radius);
  padding:11px 14px;min-height:44px;cursor:pointer;
  letter-spacing:.3px;
  transition:background .12s ease, color .12s ease;
}
.btn:hover{background:var(--ink);color:var(--bg);}
.btn:active{transform:translateY(1px);}
.btn-accent{background:var(--ink);color:var(--bg);}
.btn-accent:hover{background:var(--bg);color:var(--ink);}
.btn-ghost{font-weight:400;font-size:12px;color:var(--muted);border-color:var(--muted);padding:6px 9px;min-height:0;}
.btn-ghost:hover{background:var(--muted);color:var(--bg);}

/* ---------- quick add grid ---------- */
.quick-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}
@media(min-width:460px){.quick-grid{grid-template-columns:repeat(3,1fr);}}

.quick-cat{
  grid-column:1 / -1;
  font-size:10px;font-weight:700;letter-spacing:1.5px;
  color:var(--muted);
  margin:10px 0 -2px;
}
.quick-cat:first-child{margin-top:0;}

.quick-btn{
  font-family:inherit;
  border:var(--hair);background:#fffaf2;color:var(--ink);
  border-radius:var(--radius);cursor:pointer;
  padding:12px 10px;min-height:62px;
  text-align:left;
  display:flex;flex-direction:row;align-items:center;gap:10px;
}
.quick-btn:hover{background:var(--ink);color:var(--bg);}
.quick-btn:active{transform:translateY(1px);}
.quick-btn .qb-emoji{font-size:24px;line-height:1;flex:none;}
.quick-btn .qb-text{display:flex;flex-direction:column;gap:3px;min-width:0;}
.quick-btn .qb-name{font-size:14px;font-weight:700;line-height:1.1;}
.quick-btn .qb-mg{font-size:11px;letter-spacing:.5px;opacity:.7;}

/* ---------- log ---------- */
.log-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.log-head .block-label{margin-bottom:0;}
.log{list-style:none;}
.log-item{
  display:flex;align-items:center;gap:10px;
  border:var(--hair);border-bottom:none;
  padding:8px 10px;background:#faf5ec;
}
.log-item:first-child{border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);}
.log-item:last-child{border-bottom:var(--hair);border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);}
.log-item .li-time{width:120px;}
.log-item .li-time input{
  font-family:inherit;font-size:13px;border:var(--hair);background:#fffaf2;
  color:var(--ink);padding:6px;border-radius:var(--radius);width:100%;min-height:36px;
}
.log-item .li-name{flex:1;font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.log-item .li-mg{font-size:13px;color:var(--muted);width:58px;text-align:right;}
.log-item .li-del{
  font-family:inherit;font-size:16px;line-height:1;
  border:var(--hair);background:#fffaf2;color:var(--ink);
  width:32px;height:32px;cursor:pointer;border-radius:var(--radius);flex:none;
}
.log-item .li-del:hover{background:var(--accent);color:var(--bg);border-color:var(--accent);}
.log-empty{font-size:12px;color:var(--muted);}

/* ---------- share ---------- */
.share-block{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.share-feedback{font-size:12px;color:var(--muted);}

/* ---------- settings ---------- */
.settings{border:var(--hair);border-radius:var(--radius);margin-bottom:22px;background:#faf5ec;}
.settings summary{
  cursor:pointer;padding:12px 14px;font-size:12px;font-weight:700;letter-spacing:1.5px;
  list-style:none;
}
.settings summary::-webkit-details-marker{display:none}
.settings summary::after{content:" ▾";color:var(--muted);}
.settings[open] summary::after{content:" ▴";}
.settings-body{padding:0 14px 14px;border-top:var(--hair);}
.setting-row{padding-top:14px;}
.setting-row label{font-size:13px;font-weight:700;display:block;margin-bottom:6px;}
.hint{font-size:11px;color:var(--muted);margin-top:6px;}
.disclaimer{
  font-size:12px;color:var(--ink);margin-top:16px;padding-top:12px;border-top:var(--hair);line-height:1.5;
}
.disclaimer code{background:#e9dcc8;padding:1px 4px;font-size:11px;border-radius:3px;}

/* ---------- footer ---------- */
.foot{
  border-top:var(--hair);padding-top:14px;
  font-size:12px;color:var(--muted);text-align:center;
}
.foot a{color:var(--ink);text-decoration:none;border-bottom:var(--hair);}
.foot a:hover{background:var(--ink);color:var(--bg);}
.foot .dot{margin:0 8px;}