:root{
  --paper: #EDEFE9;
  --paper-card: #F7F8F4;
  --ink: #2B3A42;
  --ink-soft: #5B6B72;
  --line: #D9DCD2;
  --gold: #C99656;      /* task */
  --sage: #6E8C74;      /* person */
  --blue: #5E80A3;      /* appointment */
  --rose: #B77489;      /* note */
  --danger: #B5544A;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --radius: 14px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
button{font-family:inherit;}
textarea, input{font-family:inherit;}

#app{
  display:flex;
  flex-direction:column;
  height:100vh;
  max-width:560px;
  margin:0 auto;
  position:relative;
}

/* ---------- Topbar ---------- */
.topbar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:calc(14px + var(--safe-top)) 16px 10px;
  background:var(--paper);
  position:sticky;
  top:0;
  z-index:5;
}
.brand{display:flex;align-items:center;gap:9px;flex:1;}
.brand-mark{
  width:22px;height:22px;border-radius:7px;
  background:var(--ink);
  position:relative;
  flex-shrink:0;
}
.brand-mark::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:11px;height:11px;
  border:2px solid var(--gold);
  border-right-color:transparent;
  border-bottom-color:transparent;
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(45deg);
}
.brand-name{
  font-family:var(--serif);
  font-weight:600;
  font-size:20px;
  letter-spacing:0.2px;
}
.icon-btn{
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;border-radius:10px;
  color:var(--ink);
  cursor:pointer;
}
.icon-btn:active{background:var(--line);}

/* ---------- Search ---------- */
.search-bar{padding:0 16px 10px;}
.search-bar.hidden{display:none;}
#searchInput{
  width:100%;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper-card);
  font-size:15px;
  color:var(--ink);
  outline:none;
}
#searchInput:focus{border-color:var(--ink-soft);}

/* ---------- Filters ---------- */
.filters{
  display:flex;
  gap:8px;
  padding:0 16px 12px;
  overflow-x:auto;
  scrollbar-width:none;
}
.filters::-webkit-scrollbar{display:none;}
.chip{
  flex-shrink:0;
  padding:7px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink-soft);
  font-size:13px;
  font-weight:500;
  cursor:pointer;
}
.chip.active{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
}

/* ---------- Feed ---------- */
.feed{
  flex:1;
  overflow-y:auto;
  padding:4px 16px 24px;
  -webkit-overflow-scrolling:touch;
}
.section-label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:18px 2px 10px;
}
.section-label:first-child{margin-top:6px;}

.empty-state{padding:60px 20px;text-align:center;}
.empty-state.hidden{display:none;}
.empty-title{font-family:var(--serif);font-size:19px;margin:0 0 6px;}
.empty-sub{color:var(--ink-soft);font-size:14px;margin:0;}

.card{
  background:var(--paper-card);
  border-radius:var(--radius);
  padding:13px 14px 13px 16px;
  margin-bottom:10px;
  border:1px solid var(--line);
  border-left:4px solid var(--type-color, var(--ink-soft));
  display:flex;
  gap:11px;
  align-items:flex-start;
  cursor:pointer;
  transform:rotate(var(--tilt, 0deg));
  animation:cardIn 0.28s ease both;
}
@keyframes cardIn{
  from{opacity:0;transform:translateY(6px) rotate(var(--tilt,0deg));}
  to{opacity:1;transform:translateY(0) rotate(var(--tilt,0deg));}
}
.card.done{opacity:0.5;}
.card.done .card-title{text-decoration:line-through;}
.card.flash{animation:cardIn 0.28s ease both, flashPulse 1.1s ease;}
@keyframes flashPulse{
  0%{box-shadow:0 0 0 0 var(--type-color, var(--ink-soft));}
  35%{box-shadow:0 0 0 3px var(--type-color, var(--ink-soft));}
  100%{box-shadow:0 0 0 0 transparent;}
}

.check{
  width:21px;height:21px;
  border-radius:50%;
  border:2px solid var(--line);
  flex-shrink:0;
  margin-top:1px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  padding:0;
  cursor:pointer;
}
.check.checked{background:var(--gold);border-color:var(--gold);}
.check.checked svg{display:block;}
.check svg{display:none;width:12px;height:12px;stroke:white;}
.check.dotOnly{
  border:none;
  background:var(--type-color, var(--ink-soft));
  width:9px;height:9px;
  margin-top:6px;
  margin-left:5px;
  margin-right:5px;
}

.card-body{flex:1;min-width:0;}
.card-title{
  font-size:15px;
  font-weight:500;
  line-height:1.55;
  word-wrap:break-word;
}
.card-meta{
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-soft);
  margin-top:4px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.card-details{
  font-size:13px;
  color:var(--ink-soft);
  margin-top:5px;
  line-height:1.45;
}

/* ---------- Sheets (bottom modals) ---------- */
.sheet{
  position:fixed;
  inset:0;
  background:rgba(43,58,66,0.35);
  z-index:20;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.sheet.hidden{display:none;}
.sheet-inner{
  width:100%;
  max-width:560px;
  background:var(--paper);
  border-radius:20px 20px 0 0;
  padding:18px 18px calc(18px + var(--safe-bottom));
  animation:sheetUp 0.22s ease;
}
@keyframes sheetUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.sheet-item{
  display:block;
  width:100%;
  text-align:left;
  padding:14px 4px;
  background:none;
  border:none;
  border-bottom:1px solid var(--line);
  font-size:15px;
  color:var(--ink);
  cursor:pointer;
}
.sheet-item:last-child{border-bottom:none;}
.sheet-cancel{color:var(--ink-soft);text-align:center;margin-top:4px;}

.edit-header{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:12px;text-transform:uppercase;
  letter-spacing:0.06em;color:var(--ink-soft);
  margin-bottom:10px;
}
.link-btn{background:none;border:none;font-family:var(--sans);font-size:13px;cursor:pointer;color:var(--ink-soft);text-transform:none;letter-spacing:0;}
.link-btn.danger{color:var(--danger);}
#editTitle, #editDetails{
  width:100%;
  border:1px solid var(--line);
  border-radius:10px;
  padding:11px 12px;
  font-size:15px;
  margin-bottom:10px;
  resize:none;
  background:var(--paper-card);
  color:var(--ink);
}
.field-label{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:6px;
}
#editDue{
  width:100%;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  margin-bottom:14px;
  background:var(--paper-card);
  color:var(--ink);
  font-family:var(--sans);
}
.edit-actions{display:flex;gap:10px;}
.btn{
  flex:1;
  padding:12px;
  border-radius:10px;
  border:none;
  font-size:15px;
  font-weight:500;
  cursor:pointer;
}
.btn.primary{background:var(--ink);color:var(--paper);}
.btn.ghost{background:var(--paper-card);color:var(--ink);border:1px solid var(--line);}

/* ---------- Capture bar ---------- */
.capture-bar{
  background:var(--paper);
  border-top:1px solid var(--line);
  padding:10px 12px calc(10px + var(--safe-bottom));
  position:sticky;
  bottom:0;
  z-index:5;
}
.type-row{
  display:flex;
  gap:7px;
  margin-bottom:8px;
  padding-left:2px;
}
.type-chip{
  padding:5px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  font-size:12.5px;
  color:var(--ink-soft);
  cursor:pointer;
}
.type-chip[data-type="note"].active{background:var(--rose);border-color:var(--rose);color:white;}
.type-chip[data-type="task"].active{background:var(--gold);border-color:var(--gold);color:white;}
.type-chip[data-type="person"].active{background:var(--sage);border-color:var(--sage);color:white;}
.type-chip[data-type="appointment"].active{background:var(--blue);border-color:var(--blue);color:white;}

.capture-row{
  display:flex;
  align-items:center;
  gap:6px;
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:4px 4px 4px 14px;
}
#captureInput{
  flex:1;
  border:none;
  background:transparent;
  outline:none;
  font-size:15.5px;
  padding:9px 0;
  color:var(--ink);
}
.icon-btn.send{background:var(--ink);color:var(--paper);}
.icon-btn.send:active{opacity:0.8;}
.icon-btn.mic.hidden{display:none;}
.icon-btn.mic.listening{color:var(--danger);}
.icon-btn.paste{color:var(--ink-soft);}
.icon-btn.paste:active{color:var(--ink);}

/* Type -> color mapping used inline via CSS var, plus class fallback */
.tag-task{--type-color:var(--gold);}
.tag-person{--type-color:var(--sage);}
.tag-appointment{--type-color:var(--blue);}
.tag-note{--type-color:var(--rose);}

@media (min-width:600px){
  #app{border-left:1px solid var(--line);border-right:1px solid var(--line);}
}