:root{
  --bg:#0f1720;
  --card:#0b1220;
  --muted:#9aa4b2;
  --accent:#2E8B57;
}
*{box-sizing:border-box}
body{font-family:Inter,Segoe UI,Arial,sans-serif;margin:0;background:linear-gradient(180deg,#071021 0%,#0b1522 100%);color:#f3f6f9;min-height:100vh;zoom:0.67}

/* Fallback for browsers without zoom support (e.g., Firefox) */
@supports not (zoom:1) {
  body {
    transform: scale(0.67);
    transform-origin: 0 0;
    /* expand width to compensate for scaling */
    width: calc(100% / 0.67);
  }
}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(255,255,255,0.02);backdrop-filter:blur(6px)}
.brand{font-weight:700;font-size:18px}
.panel{background:rgba(255,255,255,0.03);border-radius:12px;padding:16px;margin:16px}
.muted{color:var(--muted);margin-top:8px}
.hidden{display:none}
main{padding:12px}

#projects-view{display:flex;gap:12px;align-items:flex-start}

#projects-list-placeholder{}
.projects-list{max-width:360px;flex:0 0 360px;transition:flex 240ms ease,width 240ms ease,opacity 240ms ease,padding 240ms ease;margin 240ms ease}
#projects .project{padding:10px;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}
.row{display:flex;gap:8px}
input,button{padding:8px;border-radius:8px;border:0;outline:none}
button{background:var(--accent);color:white;cursor:pointer}

.board{flex:1;transition:all 240ms ease}
.board-header{display:flex;align-items:center;justify-content:space-between}
.lists{display:flex;gap:12px;flex-wrap:wrap;overflow-y:auto;padding:12px 0;align-items:flex-start;align-content:flex-start}
.list{flex:0 0 260px;background:rgba(255,255,255,0.02);padding:12px;border-radius:8px}
.list .list-title{font-weight:600;margin-bottom:8px}
.item{background:rgba(255,255,255,0.02);padding:8px;border-radius:6px;margin-bottom:8px}
.item-row{display:flex;align-items:center;gap:8px}
.task-heading{font-weight:600}
.heading-block{padding:8px 10px;border-radius:6px;background:transparent;font-weight:600;margin-bottom:8px;color:inherit;transition:background 120ms ease,box-shadow 120ms ease}
.heading-block[contenteditable="true"]{cursor:text}
.heading-block[contenteditable="true"]:focus{background:rgba(255,255,255,0.02);box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);outline:none}
.item .content{flex:1}
/* Subtle editable styling for task and heading text */
.content[contenteditable="true"]{padding:4px 6px;border-radius:6px;min-height:20px;font-weight:500;letter-spacing:0.1px}
.content[contenteditable="true"]:focus{background:rgba(255,255,255,0.02);box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);outline:none}
.item.dragging{opacity:0.6}
.item .subtasks{margin-left:0;margin-top:8px}
.subtasks .subtask{margin-left:28px}

/* completed state */
.item.done .content,
.subtask.done .content { text-decoration: line-through; opacity: 0.7; color: var(--muted); }

/* projects column */
.projects-list{transition:width 0.18s, opacity 0.18s}
.projects-list.hidden { width: 0; padding:0; margin:0; opacity:0; overflow:hidden; flex:0 0 0 }
.item .subtask{display:flex;align-items:center;gap:8px;padding:6px;border-radius:6px;background:rgba(255,255,255,0.01);margin-bottom:6px}
.toggle{width:40px;height:40px;border-radius:8px;background:rgba(255,255,255,0.02);border:0;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px}
.toggle:hover{background:rgba(255,255,255,0.04);color:#fff}
.toggle:active{transform:translateY(1px)}
.toggle.open{transform:rotate(90deg)}
/* improve touch response */
.toggle{touch-action:manipulation}

/* Hide per-item action buttons until the item or subtask is focused/clicked */
.item .item-row button.item-action,
.subtask button.item-action,
.heading-block button.item-action {
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.item:focus-within .item-row button.item-action,
.subtask:focus-within button.item-action,
.heading-block:focus-within button.item-action,
.list.show-controls .heading-block button.item-action,
.list.show-controls .item-row button.item-action,
.list.show-controls .subtask button.item-action {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* Keep the toggle button visible always */
.item .item-row button.toggle { opacity: 1; pointer-events: auto; transform: none }

/* checklist header */
.list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.list-header .list-title{font-weight:700}

/* subtle delete button */
.delete-list{
  background:transparent;
  border:0;
  color:var(--muted);
  padding:6px 8px;
  border-radius:6px;
  cursor:pointer;
  font-size:14px;
}
.delete-list:hover{ background: rgba(255,255,255,0.03); color:#ff6b6b }
.delete-list:active{ transform:translateY(1px) }
.add-list{display:flex;gap:8px;align-items:center;margin:8px}

@media (max-width:800px){
  .board{margin-left:0}
  .lists{flex-wrap:wrap;overflow:auto}
  .projects-list{margin-bottom:12px}
  .toggle{width:48px;height:48px;font-size:18px}
}

/* hide checklist entry rows until the checklist is activated (clicked/tapped) */
.list .list-controls,
.list .heading-row {
  display: none;
  gap: 8px;
  align-items: center;
}
.list.show-controls .list-controls,
.list.show-controls .heading-row,
.list:focus-within .list-controls,
.list:focus-within .heading-row {
  display: flex;
}