/* Tasks by What10 — App #8. Inherits central brand tokens (banner injects
   tokens.css); these :root values are a fallback + the surface/ink/border the
   shared banner reads. Light by default; dark via :root[data-theme="dark"]. */
:root {
  --indigo:#4A00E0; --purple:#8E2DE2; --blue:#00D2FF;
  --grad:linear-gradient(135deg,#4A00E0 0%,#8E2DE2 100%);
  --ok:#0E9F6E; --warn:#C27803; --bad:#DC2626;
  --bg:#F7F8FC; --surface:#FFFFFF; --ink:#0B0F19; --ink-soft:#334155;
  --muted:#64748B; --border:#E6E9F2;
  --shadow:0 12px 34px -18px rgba(11,15,25,.24);
  --r-sm:10px; --r:14px; --r-lg:20px; --ease:cubic-bezier(.4,0,.2,1);
  --display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
:root[data-theme="dark"] {
  --bg:#0B0F19; --surface:#121829; --ink:#F1F5F9; --ink-soft:#cbd5e1;
  --muted:#94A3B8; --border:#26262B; --shadow:0 18px 44px -20px rgba(0,0,0,.7);
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body { font-family:var(--body); color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased;
  transition:background .25s var(--ease),color .25s var(--ease); }
.muted { color:var(--muted); }
.wrap { max-width:1180px; margin:0 auto; padding:18px 22px 60px; }

/* gate */
.gate { max-width:440px; margin:70px auto; text-align:center; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg); padding:34px 30px; box-shadow:var(--shadow); }
.gate-ic { font-size:40px; }
.gate h2 { font-family:var(--display); margin:8px 0 6px; }
.gate p { font-size:14.5px; line-height:1.55; margin:0 0 18px; }

/* toolbar */
.toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:8px 0 20px; }
.page-title { font-family:var(--display); font-size:26px; margin:0; letter-spacing:-.02em; }
.page-sub { font-size:13.5px; margin:4px 0 0; }
.tools { display:flex; align-items:center; gap:10px; }
.seg { display:inline-flex; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:3px; }
.seg-btn { appearance:none; border:none; background:none; color:var(--muted); font-family:var(--body); font-weight:600;
  font-size:13.5px; padding:7px 14px; border-radius:999px; cursor:pointer; }
.seg-btn.active { background:var(--grad); color:#fff; }
.btn-primary { appearance:none; border:none; background:var(--grad); color:#fff; font-family:var(--display); font-weight:700;
  font-size:14px; padding:11px 18px; border-radius:var(--r-sm); cursor:pointer; text-decoration:none; display:inline-block;
  box-shadow:0 14px 30px -16px rgba(74,0,224,.5); }
.btn-primary:hover { filter:brightness(1.06); }
.act { background:var(--surface); border:1px solid var(--border); color:var(--ink-soft); border-radius:8px;
  padding:8px 13px; font-size:13px; font-weight:600; cursor:pointer; font-family:var(--body); }
.act.danger:hover { border-color:var(--bad); color:var(--bad); }

/* list selector bar */
.listbar { display:flex; align-items:center; gap:8px; margin:0 0 18px; overflow-x:auto; padding-bottom:4px;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.lpill { appearance:none; flex:none; display:inline-flex; align-items:center; gap:7px; background:var(--surface);
  border:1px solid var(--border); color:var(--ink-soft); font-family:var(--body); font-weight:600; font-size:13.5px;
  padding:7px 13px; border-radius:999px; cursor:pointer; white-space:nowrap; transition:all .15s var(--ease); }
.lpill:hover { border-color:var(--purple); color:var(--ink); }
.lpill.active { background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 10px 22px -14px rgba(74,0,224,.6); }
.lpill .lc { font-size:11.5px; font-weight:700; background:var(--bg); color:var(--muted); border-radius:999px;
  padding:1px 7px; min-width:18px; text-align:center; }
.lpill.active .lc { background:rgba(255,255,255,.22); color:#fff; }
.lpill.add { color:var(--muted); border-style:dashed; }
.lpill.add:hover { color:var(--ink); }
.lpill.ghost { color:var(--muted); padding:7px 11px; }

/* board */
.board { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:start; }
@media (max-width:820px){ .board { grid-template-columns:1fr; } }
.col { background:var(--bg); border:1px solid var(--border); border-radius:var(--r); padding:12px; min-height:120px; }
:root[data-theme="dark"] .col { background:#0d1424; }
.col.drop { border-color:var(--purple); box-shadow:0 0 0 3px rgba(142,45,226,.18); }
.col-h { display:flex; align-items:center; justify-content:space-between; margin:2px 4px 12px; }
.col-h b { font-family:var(--display); font-size:14px; }
.col-h .n { font-size:12px; color:var(--muted); background:var(--surface); border:1px solid var(--border);
  border-radius:999px; padding:1px 9px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 13px; margin-bottom:10px;
  cursor:grab; box-shadow:0 1px 2px rgba(11,15,25,.04); }
.card:hover { border-color:var(--purple); }
.card.dragging { opacity:.5; }
.card.done .ct { text-decoration:line-through; color:var(--muted); }
.card-top { display:flex; align-items:flex-start; gap:9px; }
.card .chk { flex:none; width:18px; height:18px; margin-top:1px; cursor:pointer; accent-color:var(--purple); }
.ct { font-weight:600; font-size:14px; line-height:1.35; word-break:break-word; }
.card .cd { font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.45; }
.meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:9px; }
.due { font-size:12px; font-weight:600; color:var(--ink-soft); background:var(--bg); border:1px solid var(--border);
  border-radius:999px; padding:2px 9px; }
.due.over { color:var(--bad); border-color:rgba(220,38,38,.4); background:rgba(220,38,38,.08); }
.due.soon { color:var(--warn); }
.subprog { font-size:12px; color:var(--muted); }
.col-add { width:100%; text-align:left; color:var(--muted); background:none; border:1px dashed var(--border);
  border-radius:10px; padding:9px 12px; cursor:pointer; font-family:var(--body); font-size:13px; }
.col-add:hover { border-color:var(--purple); color:var(--ink); }

/* collapsible tree (subtasks) */
.tw { appearance:none; border:none; background:none; cursor:pointer; color:var(--muted); font-size:10px;
  width:16px; height:16px; flex:none; padding:0; display:inline-flex; align-items:center; justify-content:center;
  transition:transform .15s var(--ease); }
.tw.open { transform:rotate(90deg); }
.tw:hover { color:var(--purple); }
.tw-sp { width:16px; flex:none; display:inline-block; }
.card .card-top { align-items:flex-start; }
.card .card-top .tw, .card .card-top .tw-sp { margin-top:1px; }
.subtree { margin:9px 0 2px; border-top:1px dashed var(--border); padding-top:7px; }
.tnode { display:flex; align-items:center; gap:7px; font-size:13px; padding:3px 0; }
.tnode .chk { width:16px; height:16px; flex:none; accent-color:var(--purple); cursor:pointer; }
.tnode .tn-t { flex:1; min-width:0; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tnode.done .tn-t { text-decoration:line-through; color:var(--muted); }
.tn-due { font-size:11px; color:var(--muted); flex:none; white-space:nowrap; }
.tn-add { appearance:none; border:none; background:none; color:var(--muted); cursor:pointer; font-size:16px;
  line-height:1; padding:0 4px; flex:none; opacity:0; transition:opacity .15s var(--ease); }
.tnode:hover .tn-add, .li:hover .tn-add { opacity:1; }
.tn-add:hover { color:var(--purple); }
.card-sub-add { width:100%; text-align:left; color:var(--muted); background:none; border:none; cursor:pointer;
  font-family:var(--body); font-size:12.5px; font-weight:600; padding:8px 2px 2px; }
.card-sub-add:hover { color:var(--purple); }

/* list */
.list { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.li { display:flex; align-items:center; gap:9px; padding:11px 16px; border-bottom:1px solid var(--border); }
.li:last-child { border-bottom:none; }
.li.nested { background:var(--bg); }
:root[data-theme="dark"] .li.nested { background:#0d1424; }
.li .chk { width:18px; height:18px; flex:none; cursor:pointer; accent-color:var(--purple); }
.li .li-main { flex:1; min-width:0; cursor:pointer; }
.li .li-t { font-weight:600; font-size:14px; }
.li.done .li-t { text-decoration:line-through; color:var(--muted); }
.li .li-d { font-size:12.5px; color:var(--muted); }
.list-group { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
  padding:12px 16px 6px; background:var(--bg); }
.empty { text-align:center; color:var(--muted); padding:40px 20px; }

/* modal */
.modal-bg { position:fixed; inset:0; background:rgba(11,15,25,.5); backdrop-filter:blur(4px); display:none;
  align-items:center; justify-content:center; padding:20px; z-index:100; }
.modal-bg.open { display:flex; }
.modal { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:26px 26px 22px;
  width:100%; max-width:460px; box-shadow:0 40px 80px -24px rgba(11,15,25,.5); position:relative; text-align:left; }
.modal h2 { font-family:var(--display); margin:0 0 16px; font-size:20px; }
.modal .close { position:absolute; top:14px; right:16px; background:none; border:none; font-size:24px; color:var(--muted); cursor:pointer; }
.field { margin-bottom:14px; }
.field label { display:block; font-size:12px; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px; }
.field input, .field select, .field textarea { width:100%; background:var(--bg); border:1px solid var(--border);
  border-radius:9px; padding:10px 12px; color:var(--ink); font-size:14px; font-family:var(--body); }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(0,210,255,.16); }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.m-parent { margin:-6px 0 14px; font-size:13px; font-weight:600; }
.m-actions { display:flex; align-items:center; gap:10px; margin-top:6px; }

.toast { position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); background:var(--ink);
  color:var(--surface); padding:11px 18px; border-radius:999px; font-size:14px; font-weight:600; opacity:0;
  pointer-events:none; transition:all .25s var(--ease); z-index:200; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }