/* Todo tab: a checklist page sharing the map's top nav and palette (style.css). */
body.todo-page{height:auto;min-height:100%}
#todo{max-width:560px;margin:0 auto;padding:70px 16px 40px}
#todo h1{font-family:var(--serif);font-size:26px;margin:0 0 6px;letter-spacing:.02em}
.todo-key{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 14px;
  font-size:12.5px;color:#7a6f58}
.todo-count{margin-left:auto;font-variant-numeric:tabular-nums}

/* D / W tags in red, like the handwritten list */
.use-tag{display:inline-block;min-width:16px;font-family:var(--serif);font-weight:700;
  font-size:15px;color:#b5302a;text-align:center}
/* line swatches match the map: solid = driving trail, dotted = walking trail */
.sw{display:inline-block;width:22px;height:0;border-top:3px solid var(--accent);margin:0 8px 0 2px}
.sw.walk{border-top-style:dotted}

#todo-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
#todo-list li{border-bottom:1px solid var(--line)}
#todo-list label{display:flex;align-items:center;gap:10px;padding:11px 4px;cursor:pointer}
#todo-list input{flex:0 0 auto;width:18px;height:18px;margin:0;accent-color:var(--accent-2);cursor:pointer}
.uses{flex:0 0 52px;display:flex;align-items:center;gap:1px}
.item-name{font-family:var(--serif);font-size:17px}
.item-note{color:#8a7d63;font-size:13px}
.item-flag{color:#b5302a;font-size:13px;font-weight:600;white-space:nowrap}
.item-text{flex:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}

#todo-list.locked input{cursor:default}
#todo-list.locked label{cursor:default}
#todo-list li.done .item-name{text-decoration:line-through;color:#9a8d70}
#todo-list li.done .item-note,#todo-list li.done .item-flag,#todo-list li.done .uses{opacity:.5}

.todo-foot{margin:16px 0 0;color:#7a6f58;font-size:12px;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:8px}