/* ============================================================
   Ideas — folders › titles › checkbox ideas
   ============================================================ */

/* ── Folder card (grid view) ─────────────────────────────── */
.folder{
  position:relative;
  display:flex; flex-direction:column;
  padding:16px;
  min-height:148px;
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  text-align:left;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.folder:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); border-color:var(--accent-border); }
.folder__glyph{
  width:40px; height:40px; margin-bottom:12px;
  display:grid; place-items:center;
  border-radius:11px;
  background:var(--accent-tint); color:var(--accent-ink);
}
.folder__glyph svg{ width:20px; height:20px; }
.folder__title{ font-size:14px; font-weight:600; letter-spacing:-.008em; }
.folder__meta{ margin-top:2px; font-size:12.5px; color:var(--faint); }
.folder__bar{
  display:flex; align-items:center; gap:8px;
  margin-top:auto; padding-top:14px;
}
.folder__prog{
  flex:1; height:4px; border-radius:99px;
  background:var(--hair); overflow:hidden;
}
.folder__prog i{
  display:block; height:100%; border-radius:99px;
  background:var(--accent);
  transition:width .3s var(--ease);
}
.folder__pct{ font-size:11.5px; color:var(--faint); font-variant-numeric:tabular-nums; }

/* ── Editor ──────────────────────────────────────────────── */
.ideas{
  flex:1; overflow-y:auto;
  padding:26px 22px 100px;
}
.ideas__inner{ width:100%; max-width:720px; margin:0 auto; }

.grp{
  margin-bottom:12px;
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  overflow:hidden;
}
.grp.is-collapsed .grp__body{ display:none; }

.grp__head{
  display:flex; align-items:center; gap:6px;
  padding:11px 12px;
}
.grp__toggle{
  display:grid; place-items:center;
  width:22px; height:22px; flex:none;
  border-radius:6px; color:var(--faint);
  transition:background .14s var(--ease), transform .16s var(--ease);
}
.grp__toggle:hover{ background:var(--hair); color:var(--ink); }
.grp__toggle svg{ width:14px; height:14px; }
.grp.is-collapsed .grp__toggle{ transform:rotate(-90deg); }

.grp__title{
  flex:1; min-width:0;
  padding:4px 7px; margin-left:-3px;
  border:1px solid transparent; border-radius:var(--r-sm);
  background:transparent;
  font-size:15px; font-weight:600; letter-spacing:-.01em;
}
.grp__title::placeholder{ color:var(--faint); font-weight:500; }
.grp__title:hover{ background:var(--surface-2); }
.grp__title:focus{
  outline:none; background:var(--surface);
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint);
}
.grp__count{
  flex:none; font-size:12px; color:var(--faint);
  font-variant-numeric:tabular-nums;
}
.grp__tools{ display:flex; gap:1px; flex:none; opacity:0; transition:opacity .14s var(--ease); }
.grp:hover .grp__tools,
.grp:focus-within .grp__tools{ opacity:1; }

.grp__body{ padding:0 12px 6px; }

/* ── Idea row (Apple Notes style checklist) ──────────────── */
.idea{
  display:flex; align-items:flex-start; gap:9px;
  padding:5px 4px 5px 0;
  border-radius:var(--r-sm);
  transition:background .12s var(--ease);
}
.idea:hover{ background:var(--surface-2); }

.idea__grip{
  flex:none; width:18px; align-self:center;
  display:grid; place-items:center;
  color:var(--faint); opacity:0;
  transition:opacity .14s var(--ease);
  margin-left:-4px;
}
.idea__grip svg{ width:14px; height:14px; }
.idea:hover .idea__grip{ opacity:.75; }

.idea__box{
  flex:none; width:19px; height:19px; margin-top:2px;
  display:grid; place-items:center;
  border:1.75px solid #C9CDD4; border-radius:50%;
  background:var(--surface);
  color:transparent;
  transition:background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease);
}
.idea__box svg{ width:11px; height:11px; stroke-width:3; }
.idea__box:hover{ border-color:var(--accent); }
.idea.is-done .idea__box{
  background:var(--accent); border-color:var(--accent); color:#fff;
}

.idea__text{
  flex:1; min-width:0;
  padding:1px 2px;
  border:0; background:transparent;
  font-size:14.5px; line-height:1.5;
  resize:none; overflow:hidden;
  font-family:inherit;
}
.idea__text:focus{ outline:none; }
.idea__text::placeholder{ color:var(--faint); }
.idea.is-done .idea__text{ color:var(--faint); text-decoration:line-through; }

.idea__del{
  flex:none; margin-top:1px;
  opacity:0; transition:opacity .14s var(--ease);
}
.idea:hover .idea__del,
.idea__del:focus-visible{ opacity:1; }

.idea-add{
  display:flex; align-items:center; gap:9px;
  width:100%; padding:6px 4px 8px 27px;
  color:var(--faint); font-size:14px;
  border-radius:var(--r-sm);
  text-align:left;
}
.idea-add:hover{ background:var(--surface-2); color:var(--accent-ink); }
.idea-add svg{ width:15px; height:15px; }

.grp-add{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:13px;
  border:1px dashed var(--hair-2); border-radius:var(--r-lg);
  color:var(--muted); font-size:14px; font-weight:500;
  transition:background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease);
}
.grp-add:hover{
  background:var(--accent-tint);
  border-color:var(--accent-border);
  color:var(--accent-ink);
}
.grp-add svg{ width:16px; height:16px; }

.ideas__empty{ padding:48px 20px 30px; }

@media (max-width:640px){
  .ideas{ padding:18px 12px 90px; }
  .idea__grip{ display:none; }
  .idea-add{ padding-left:8px; }
  .idea__del{ opacity:1; }
}