:root{
  --bg:#14110E; --bg-raised:#1E1A15; --bg-sunken:#0E0C0A;
  --ink:#ECE6DB; --ink-dim:#A79D8C; --ink-faint:#6E665A;
  --line:#2E2820; --accent:#E9A23B; --accent-ink:#14110E;
  --ok:#8FB573; --warn:#E9A23B; --bad:#D2725E; --info:#6FA8B5;
  --font-mono:ui-monospace,"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
  --font-sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Helvetica,Arial,sans-serif;
  --t-eyebrow:.72rem; --t-small:.82rem; --t-body:1rem; --t-h2:1.5rem; --t-h1:2.2rem;
  --lh-body:1.5; --track:.14em;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r:4px; --r-lg:8px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg); color:var(--ink); font-family:var(--font-sans);
  font-size:var(--t-body); line-height:var(--lh-body); min-height:100vh;
  -webkit-font-smoothing:antialiased;}
.mono{font-family:var(--font-mono)}
a{color:var(--accent)}
button, input, textarea{font-family:inherit; font-size:inherit; color:inherit}
button{cursor:pointer}

/* --- PIN gate --- */
#pin-screen{display:flex; align-items:center; justify-content:center; min-height:100vh}
.pin-box{text-align:center}
.pin-box input{background:var(--bg-sunken); border:1px solid var(--line); border-radius:var(--r);
  color:var(--ink); font-family:var(--font-mono); font-size:1.5rem; letter-spacing:.3em;
  text-align:center; padding:var(--s3) var(--s4); width:200px}
.pin-box button{margin-top:var(--s4); background:var(--accent); color:var(--accent-ink);
  border:none; border-radius:var(--r); padding:var(--s2) var(--s5); font-weight:650}
.pin-error{color:var(--bad); font-size:var(--t-small); margin-top:var(--s3); min-height:1.2em}

/* --- App shell --- */
#app{display:none; max-width:1100px; margin:0 auto; padding:var(--s5)}
#app.visible{display:block}
header.top{display:flex; align-items:baseline; justify-content:space-between;
  border-bottom:1px solid var(--line); padding-bottom:var(--s4); margin-bottom:var(--s5)}
header.top h1{font-size:var(--t-h2); letter-spacing:-.01em}
nav.tabs{display:flex; gap:var(--s2)}
nav.tabs button{background:var(--bg-raised); border:1px solid var(--line); border-radius:99px;
  padding:var(--s1) var(--s4); color:var(--ink-dim); font-family:var(--font-mono);
  font-size:var(--t-eyebrow); text-transform:uppercase; letter-spacing:var(--track)}
nav.tabs button.active{border-color:var(--accent); color:var(--accent)}

.view{display:none}
.view.active{display:block}

/* --- Board --- */
.col-group{margin-bottom:var(--s6)}
.col-title{font-family:var(--font-mono); font-size:var(--t-eyebrow); text-transform:uppercase;
  letter-spacing:var(--track); color:var(--ink-faint); margin-bottom:var(--s3);
  display:flex; align-items:center; gap:var(--s2)}
.col-title .count{color:var(--accent)}
.cards{display:flex; flex-direction:column; gap:var(--s2)}
.card{background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s3) var(--s4); display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.card.done{opacity:.45; text-decoration:line-through}
.card .title{flex:1; min-width:160px}
.chip{font-family:var(--font-mono); font-size:var(--t-eyebrow); padding:1px 7px;
  border-radius:99px; border:1px solid var(--line); color:var(--ink-dim); white-space:nowrap}
.chip.due{border-color:var(--info); color:var(--info)}
.chip.contingent{border-color:var(--bad); color:var(--bad)}
.chip.clarify{border-color:var(--warn); color:var(--warn)}
.card .done-btn{background:none; border:1px solid var(--line); border-radius:99px;
  width:22px; height:22px; color:var(--ink-faint); line-height:1}
.card .done-btn:hover{border-color:var(--ok); color:var(--ok)}
.card select.cat-select{background:var(--bg-sunken); border:1px solid var(--line);
  border-radius:var(--r); color:var(--ink-dim); font-family:var(--font-mono); font-size:var(--t-eyebrow); padding:2px 4px}
.empty{color:var(--ink-faint); font-size:var(--t-small); font-style:italic}

.projects-head{font-family:var(--font-mono); font-size:var(--t-eyebrow); text-transform:uppercase;
  letter-spacing:var(--track); color:var(--ink-faint); margin:var(--s6) 0 var(--s3)}
.project-group summary{cursor:pointer; font-weight:650; margin-bottom:var(--s2)}
.project-group{margin-bottom:var(--s4)}

/* --- Add task row --- */
.add-row{display:flex; gap:var(--s2); margin-bottom:var(--s4)}
.add-row input[type=text]{flex:1; background:var(--bg-sunken); border:1px solid var(--line);
  border-radius:var(--r); padding:var(--s2) var(--s3); color:var(--ink)}
.add-row select{background:var(--bg-sunken); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s2) var(--s3); color:var(--ink-dim)}
.add-row button{background:var(--accent); color:var(--accent-ink); border:none; border-radius:var(--r);
  padding:var(--s2) var(--s4); font-weight:650}

/* --- Ramble view --- */
#ramble-text{width:100%; min-height:220px; background:var(--bg-sunken); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s4); color:var(--ink); resize:vertical; line-height:1.6}
.ramble-actions{display:flex; gap:var(--s3); margin-top:var(--s3)}
.btn{background:var(--accent); color:var(--accent-ink); border:none; border-radius:var(--r);
  padding:var(--s2) var(--s5); font-weight:650}
.btn.secondary{background:none; border:1px solid var(--line); color:var(--ink-dim)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.decode-status{color:var(--ink-faint); font-size:var(--t-small); margin-top:var(--s2)}

.preview-list{margin-top:var(--s5); display:flex; flex-direction:column; gap:var(--s2)}
.preview-card{background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s4)}
.preview-card .row1{display:flex; justify-content:space-between; gap:var(--s3)}
.preview-card .title{font-weight:650}
.preview-card .meta{color:var(--ink-dim); font-size:var(--t-small); margin-top:var(--s1)}
.preview-card label{display:flex; align-items:center; gap:var(--s2); font-size:var(--t-small); color:var(--ink-dim)}

/* --- Someday --- */
.someday-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--s4)}
.someday-card{background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s5); display:flex; flex-direction:column; gap:var(--s3); min-height:120px}
.someday-card .title{font-size:1.05rem; font-weight:650}
.someday-card button{align-self:flex-start; background:none; border:1px solid var(--accent);
  color:var(--accent); border-radius:var(--r); padding:var(--s1) var(--s3); font-size:var(--t-small)}

/* --- Materials tap-to-expand --- */
.card .title{cursor:pointer}
.card .title:hover{color:var(--accent)}
.chip.mat-chip{background:none; cursor:pointer}
.chip.mat-chip:hover{border-color:var(--accent); color:var(--accent)}
.materials-list{flex-basis:100%; background:var(--bg-sunken); border:1px dashed var(--line);
  border-radius:var(--r); padding:var(--s2) var(--s3); margin-top:var(--s1)}
.materials-list ul{list-style:none}
.materials-list li{font-family:var(--font-mono); font-size:var(--t-small); color:var(--ink-dim);
  padding:2px 0}
.materials-list li::before{content:"→ "; color:var(--accent)}

/* --- Task modal --- */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:40; display:flex;
  align-items:flex-end; justify-content:center}
@media(min-width:640px){.overlay{align-items:center}}
.modal{background:var(--bg-raised); border:1px solid var(--line);
  border-radius:var(--r-lg) var(--r-lg) 0 0; width:100%; max-width:560px; max-height:92vh;
  overflow-y:auto; padding:var(--s5)}
@media(min-width:640px){.modal{border-radius:var(--r-lg)}}
.modal h2{font-family:var(--font-mono); font-size:var(--t-eyebrow); letter-spacing:var(--track);
  text-transform:uppercase; color:var(--accent); margin-bottom:var(--s4)}
.modal label{display:block; margin:var(--s3) 0 var(--s1)}
.modal label span{font-family:var(--font-mono); font-size:var(--t-eyebrow);
  text-transform:uppercase; letter-spacing:var(--track); color:var(--ink-faint)}
.modal input:not([type=checkbox]), .modal select{width:100%; background:var(--bg-sunken);
  border:1px solid var(--line); border-radius:var(--r); padding:var(--s2) var(--s3); color:var(--ink)}
.modal input:focus, .modal select:focus{outline:1px solid var(--accent); border-color:var(--accent)}
.mrow{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3)}
.check-row{display:flex; align-items:center; gap:var(--s2); margin-top:var(--s4)}
.modal-clarify{font-family:var(--font-mono); font-size:var(--t-small); color:var(--warn);
  margin-top:var(--s3)}
.modal .btns{display:flex; gap:var(--s3); margin-top:var(--s5); flex-wrap:wrap}
.btn.danger{background:none; border:1px solid var(--bad); color:var(--bad)}
.btn.done-green{background:var(--ok); color:var(--accent-ink)}

/* --- Toast --- */
.toast{position:fixed; bottom:var(--s5); left:50%; transform:translateX(-50%); z-index:60;
  background:var(--bg-raised); border:1px solid var(--accent); color:var(--ink);
  font-family:var(--font-mono); font-size:var(--t-small); padding:var(--s3) var(--s5);
  border-radius:var(--r)}

@media(max-width:700px){
  #app{padding:var(--s4)}
  header.top{flex-direction:column; align-items:flex-start; gap:var(--s3)}
}