/* Règles propres aux tâches : lignes, cases, puces, arbre, ajout rapide,
   bandeau du matin, éditeur, projets. Les jetons de couleur sont dans app.css. */

/* ---------- Lignes ---------- */
.task-list{display:flex;flex-direction:column}
.task-row{display:flex;align-items:flex-start;gap:10px;padding:9px 6px;border-bottom:1px solid var(--border);
  cursor:pointer;position:relative;min-width:0;background:var(--bg)}
.task-row:hover{background:var(--surface)}
.task-row.compact{padding:6px}
.task-body{flex:1;min-width:0}
.task-title{font-size:15px;font-weight:600;line-height:1.35;word-break:break-word;overflow-wrap:anywhere}
.task-meta{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:3px;min-width:0}
.chip-meta{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--text-2);
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip-meta svg{width:13px;height:13px;flex-shrink:0}
.chip-meta.project{color:var(--muted)}
.chip-meta.date.late,.chip-meta.deadline.late{color:var(--no)}
.chip-meta.deadline.soon{color:var(--no)}
.chip-meta.deadline.near{color:var(--maybe)}
.chip-meta.rollover{color:var(--maybe);font-weight:800}
.chip-meta.waiting{color:var(--info)}
.chip-lbl{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--text-2);
  background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:0 7px;line-height:18px;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbl-dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex-shrink:0;display:inline-block}
.lbl-dot.big{width:14px;height:14px}
.check{width:24px;height:24px;border-radius:50%;border:2px solid var(--border-strong);flex-shrink:0;margin-top:2px;
  display:grid;place-items:center;color:transparent;transition:background .15s,color .15s}
.check svg{width:14px;height:14px;stroke-width:3}
.check:hover{border-color:var(--accent);color:var(--accent)}
.check.p1{border-color:var(--p1)} .check.p2{border-color:var(--p2)} .check.p3{border-color:var(--p3)}
.check.big{width:32px;height:32px}
.check.big svg{width:18px;height:18px}
.is-done .check{background:var(--ok);border-color:var(--ok);color:#fff}
.is-done .task-title{text-decoration:line-through;color:var(--muted);font-weight:500}
.is-doing{border-left:3px solid var(--accent);padding-left:6px}
.is-deleted .task-title{color:var(--muted)}
.is-pending .task-body::after{content:"";position:absolute;right:6px;top:12px;width:7px;height:7px;border-radius:50%;background:var(--maybe)}
.done-anim{animation:done-out .4s ease forwards}
@keyframes done-out{to{opacity:.3;transform:translateX(6px)}}
.drag-handle{color:var(--muted);width:18px;flex-shrink:0;margin-top:3px;cursor:grab;touch-action:none}
.drag-handle svg{width:16px;height:16px}
.sortable-ghost{opacity:.35}
.sortable-chosen{background:var(--accent-soft)}
.count{color:var(--muted);font-weight:600;font-size:12px}

/* ---------- Sections du jour ---------- */
.day-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 8px}
.day-date b{font-size:17px;font-weight:800;display:block;text-transform:capitalize}
.day-sum{font-size:12.5px;color:var(--text-2);font-weight:600}
.day-section{margin:12px 0 4px}
.day-section h3{font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:var(--text-2);font-weight:800;
  margin-bottom:4px;display:flex;align-items:center;gap:6px}
.day-section h3 .sub{text-transform:none;letter-spacing:0;color:var(--muted);font-weight:600}
.day-done{margin-top:14px}
.day-done summary{font-size:13px;font-weight:700;color:var(--text-2);cursor:pointer;padding:6px 0}
.hint{font-size:12.5px;color:var(--muted)}

/* ---------- Bandeau du matin ---------- */
.banner{background:var(--accent-soft);border:1px solid var(--border);border-radius:14px;padding:10px 12px;margin:0 0 10px}
.banner-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.banner-head svg{width:18px;height:18px;color:var(--accent);flex-shrink:0}
.banner-text{flex:1;min-width:0;font-size:13.5px;font-weight:600}
.banner .icon-btn.sm{width:30px;height:30px}
.banner-list{list-style:none;margin-top:8px;font-size:13px;color:var(--text-2)}
.banner-list li{padding:3px 0;border-top:1px solid var(--border)}
.banner-list b{color:var(--text)}

/* ---------- Ajout rapide ---------- */
.quickadd{flex:0 0 auto;background:var(--surface);border-top:1px solid var(--border);
  padding:8px 10px;padding-left:calc(10px + env(safe-area-inset-left));padding-right:calc(10px + env(safe-area-inset-right))}
.qa-row{display:flex;gap:8px;align-items:center;max-width:760px;margin:0 auto}
.qa-row input{flex:1;min-width:0;padding:10px 12px;border-radius:12px;border:1px solid var(--border-strong);
  background:var(--bg);color:var(--text);font-size:16px;-webkit-appearance:none;appearance:none}
.qa-row input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.qa-btn{width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;flex-shrink:0}
.qa-btn svg{width:20px;height:20px}
.qa-chips{display:flex;gap:6px;flex-wrap:wrap;max-width:760px;margin:6px auto 0}
.qa-chips .chip{padding:3px 9px;font-size:11.5px}
@media (min-width:861px){.quickadd{border-top:none;background:var(--bg);padding-bottom:12px}}

/* ---------- Arbre ---------- */
.tree{list-style:none;margin:0;padding:0}
.tree .tree{margin-left:22px}
.tree.depth-4{margin-left:8px}
.tree-node{min-width:0}
.fold{width:22px;height:22px;flex-shrink:0;margin-top:3px;color:var(--muted);display:grid;place-items:center;border-radius:6px}
.fold svg{width:14px;height:14px;transition:transform .15s}
.fold.closed svg{transform:rotate(-90deg)}
.fold-spacer{width:22px;flex-shrink:0}
@media (max-width:860px){.tree .tree{margin-left:14px}}

/* ---------- Projets ---------- */
.project-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 10px;border-radius:14px;
  background:var(--surface);border:1px solid var(--border);margin-bottom:8px;min-width:0}
.project-row:hover{box-shadow:var(--shadow)}
.proj-icon{width:22px;height:22px;color:var(--accent);flex-shrink:0}
.proj-body{flex:1;min-width:0}
.proj-title{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-sub{font-size:12px;color:var(--text-2)}
.proj-chevron{width:18px;height:18px;color:var(--muted);flex-shrink:0}
.proj-head{margin-bottom:10px}
.proj-head-row{display:flex;align-items:center;gap:10px;min-width:0}
.proj-head-title{font-size:19px;font-weight:800;text-align:left;flex:1;min-width:0;word-break:break-word;overflow-wrap:anywhere;padding:4px 0}
.proj-head-sub{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--text-2);margin-top:6px;flex-wrap:wrap}
.progress{height:6px;border-radius:3px;background:var(--surface-2);border:1px solid var(--border);overflow:hidden;margin-top:6px}
.progress i{display:block;height:100%;background:var(--ok)}

/* ---------- Éditeur ---------- */
.editor{padding-bottom:20px}
.ed-titlerow{display:flex;align-items:flex-start;gap:10px;margin-bottom:6px}
.ed-title{flex:1;min-width:0;font-size:19px;font-weight:800;line-height:1.3;border:none;background:transparent;color:var(--text);
  resize:none;padding:4px 0;overflow:hidden;font-family:inherit}
.ed-title:focus{outline:none;border-bottom:2px solid var(--accent)}
.ed-crumb{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:12.5px;color:var(--text-2);margin-bottom:12px;min-width:0}
.crumb-link{color:var(--text-2);font-weight:600;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb-link:hover{color:var(--accent)}
.crumb-sep{color:var(--muted)}
.crumb{color:var(--muted);font-size:11.5px}
.ed-field{margin:10px 0}
.ed-field>label{display:block;font-size:12px;font-weight:800;color:var(--text-2);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.ed-desc{width:100%;min-height:72px;padding:10px 12px;border-radius:12px;border:1px solid var(--border-strong);background:var(--surface);
  color:var(--text);font-size:15px;line-height:1.45;resize:vertical;font-family:inherit}
.ed-desc:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.segmented{display:flex;width:100%}
.segmented button{flex:1}
.chip.prio.p1.on{background:var(--p1)} .chip.prio.p2.on{background:var(--p2)} .chip.prio.p3.on{background:var(--p3)}
.chip.color{padding:6px}
.time-input{border:none;background:transparent;color:inherit;font-size:13px;font-weight:700;width:70px;padding:0}
.chips.links a{text-decoration:none;max-width:100%}
.activity{list-style:none;font-size:13px;color:var(--text-2);margin-top:6px}
.activity li{padding:4px 0;border-top:1px solid var(--border)}
.activity b{color:var(--text);font-weight:600}
.search-field{position:sticky;top:0;z-index:1;background:var(--bg);padding-bottom:4px}
.search-field input{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border-strong);background:var(--surface);
  color:var(--text);font-size:16px;-webkit-appearance:none;appearance:none}
.search-field input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.date-input{width:100%;padding:10px 12px;border-radius:11px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font-size:16px}
.sheet .menu button.on{background:var(--accent-soft)}