/* Duy My Do — dark theme copied from TickTick's Mac app */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  /* dark only — this makes the UA paint native bits (select popups, scrollbars,
     the date input, form focus rings) dark instead of light */
  color-scheme: dark;
  --bg: #161616; --panel: #1c1c1c; --panel2: #191919;
  --line: #2a2a2a; --text: #d9d9d9; --muted: #8b8b8b;
  --accent: #4772fa; --red: #e05252; --hover: #242424; --sel: #2a2d33;
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #4a4a4a; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }
/* buttons/inputs don't inherit colour — without this their SVG strokes use the
   UA default (near-black) and disappear on the dark panels */
button, input, select, textarea { color: inherit; font-family: inherit; }
html, body { height: 100%; }
body {
  display: flex; background: var(--bg); color: var(--text);
  font: 15.4px/1.45 -apple-system, "SF Pro Text", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; overflow: hidden;
}

/* ── left sidebar ─────────────────────────────────────── */
#sidebar { width: 264px; min-width: 264px; background: var(--panel); border-right: 1px solid var(--line); padding: 15.4px 8px; overflow-y: auto; display: flex; flex-direction: column; }
#searchWrap { display: flex; align-items: center; gap: 8px; margin: 0 2px 13.2px; padding: 7px 11px; background: #232323; border: 1px solid var(--line); border-radius: 9px; }
#searchWrap:focus-within { border-color: var(--accent); }
#searchIco { display: flex; color: var(--muted); }
#search { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font-size: 13.1px; }
#searchClear { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 11.2px; padding: 0; }
#searchClear:hover { color: var(--text); }
.dm-hint { display: block; margin-top: 8px; font-size: 11.2px; color: #6f6f6f; }
.row.selected { box-shadow: inset 2px 0 0 var(--accent); }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; font-size: 14px; border-radius: 8px; cursor: pointer; color: var(--text); user-select: none; }
.nav-item:hover { background: var(--hover); }
.nav-item.active { background: var(--sel); }
.nav-item .ico { width: 22px; display: inline-flex; align-items: center; justify-content: center; color: #9aa0a6; }
.nav-item.active .ico { color: var(--text); }
.nav-item.list-item { padding-left: 13.2px; }
/* nested lists: a twisty for folders, a matching gap for leaves so every
   name in a level lines up */
.twisty { background: none; border: 0; color: var(--muted); cursor: pointer; width: 14px; padding: 0;
  font-size: 13px; transition: transform .12s; transform: rotate(0deg); }
.twisty.open { transform: rotate(90deg); }
.twisty:hover { color: var(--text); }
.twisty-gap { width: 14px; }
.ml-select { width: 100%; background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 8.8px; padding: 8px 10px; font-size: 14.3px; outline: 0; }
.ml-select:focus { border-color: var(--accent); }
.nav-item svg, .pop-item svg, .qd svg, .d-date svg, .d-flag svg, .d-addsub svg, .check svg { vertical-align: middle; flex: none; }
.pop-item svg, .d-addsub svg { margin-right: 2px; }
/* keeps list names aligned whether or not a list has an emoji */
.pop-ico { display: inline-flex; width: 17.6px; justify-content: center; }
.nav-item .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .count { color: var(--muted); font-size: 12.1px; }
/* no hover affordance on lists — right-click is the only way in (Duy) */
.section-label { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12.1px; padding: 17.6px 11px 6px; }
.section-label button { background: none; border: 0; color: var(--muted); font-size: 14.9px; cursor: pointer; }
.section-label button:hover { color: var(--text); }
#bottomNav { margin-top: auto; padding-top: 15.4px; border-top: 1px solid var(--line); }

/* ── middle: task list ────────────────────────────────── */
#main { flex: 1.35; min-width: 418px; background: var(--panel2); display: flex; flex-direction: column; border-right: 1px solid var(--line); }
#viewTitle { display: flex; align-items: center; justify-content: space-between; font-size: 22px; font-weight: 700; padding: 19.8px 22px 11px; }
#sortBtn { background: none; border: 0; color: #9aa0a6; cursor: pointer; padding: 4px 6px; border-radius: 7px; display: flex; }
#sortBtn:hover { background: var(--hover); color: var(--text); }
#sortBtn.on { color: var(--accent); }
#quickAddWrap { display: flex; align-items: center; gap: 11px; margin: 0 17.6px 11px; padding: 9px 15.4px; background: #222; border: 1px solid var(--line); border-radius: 11px; }
#quickAddWrap:focus-within { border-color: var(--accent); }
#quickAddWrap .plus { color: var(--muted); }
#quickAdd { flex: 1; background: none; border: 0; outline: 0; color: var(--text); font-size: 15.4px; }
#quickAdd::placeholder { color: var(--muted); }
#rows { overflow-y: auto; flex: 1; padding-bottom: 33px; }
.row { display: flex; align-items: center; gap: 12.1px; padding: 11px 22px; border-bottom: 1px solid #222; cursor: pointer; }
.row:hover { background: var(--hover); }
.row.selected { background: var(--sel); }
.row .meta { display: flex; align-items: center; gap: 8px; font-size: 13.2px; color: var(--muted); white-space: nowrap; }
.row .cc { display: inline-flex; align-items: center; gap: 3px; }
.row .cc svg { width: 14.3px; height: 14.3px; }
.d-del svg { width: 16.5px; height: 16.5px; }
.row .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.done .title { color: var(--muted); text-decoration: line-through; }
.row.child { padding-left: 50.6px; }
/* inline subtask entry — looks like a row, not a dialog (Duy, 2026-08-05) */
.row-input { background: var(--hover); cursor: default; }
.row-input .check { border-color: #4a4a4a; }
.sub-input { flex: 1; background: none; border: 0; outline: 0; color: var(--text); font-size: 14.3px; font-family: inherit; }
.sub-input::placeholder { color: #6f6f6f; }
.d-sub-input { font-size: 12.1px; }
.row.child .title { font-size: 14.3px; }
.check.wont { border-color: #555; color: #8b8b8b; background: #2b2b2b; }
.check.restore { border-color: #444; color: #9a9a9a; font-size: 14.3px; }
.chip-today { color: var(--accent); }
.chip-over { color: var(--red); }
.chip-future { color: var(--muted); }
.check { width: 19.8px; height: 19.8px; min-width: 19.8px; border: 2px solid #555; border-radius: 5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 13.2px; color: transparent; }
.check.p1 { border-color: var(--accent); } .check.p3 { border-color: #f5a623; } .check.p5 { border-color: var(--red); }
.check.p7 { border-color: #a371f7; }   /* One Thing */
.check:hover, .check.done { color: #9a9a9a; }
.check.done { background: #333; border-color: #333; }
.empty-view { color: var(--muted); text-align: center; margin-top: 88px; font-size: 14.3px; }

/* ── right: detail panel ──────────────────────────────── */
#detail { flex: 1; min-width: 374px; background: var(--panel2); display: flex; flex-direction: column; }
.detail-empty { margin: auto; color: var(--muted); font-size: 13.1px; }
.d-head { display: flex; align-items: center; gap: 13.2px; padding: 15.4px 19.8px; border-bottom: 1px solid var(--line); }
.d-date { background: none; border: 0; color: var(--accent); cursor: pointer; font-size: 13.1px; display: flex; gap: 6px; align-items: center; }
.d-date.overdue { color: var(--red); }
.d-date.none { color: var(--muted); }
.d-flag { margin-left: auto; background: none; border: 0; font-size: 14.9px; cursor: pointer; }
/* body grows so the comments block always sits at the bottom (Duy, 2026-08-05) */
.d-body { flex: 1; overflow-y: auto; }
.d-title { padding: 17.6px 19.8px 6px; }
/* NOT the `font:` shorthand — `font: 700 21px/1.35 inherit` is invalid CSS
   (inherit can't be a shorthand component), so the browser dropped the whole
   declaration and the title fell back to the textarea's tiny 13px default */
.d-title textarea { width: 100%; background: none; border: 0; outline: 0; resize: none; color: var(--text);
  font-family: inherit; font-size: 18.7px; font-weight: 700; line-height: 1.35; }
.d-subs { padding: 4px 19.8px 0; }
.d-sub { display: flex; align-items: center; gap: 11px; padding: 7px 0; font-size: 13.1px; }
.d-sub .struck { color: var(--muted); text-decoration: line-through; }
.d-addsub { padding: 6px 19.8px 15.4px; }
.d-addsub button { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 13.1px; padding: 0; }
.d-addsub button:hover { color: var(--accent); }
.d-comments-section { border-top: 1px solid var(--line); }
.d-comments-head { padding: 13.2px 19.8px 4px; font-size: 13.1px; font-weight: 600; }
.d-comments-head .c-n { color: var(--muted); font-weight: 400; margin-left: 4px; }
.d-comments { max-height: 34vh; overflow-y: auto; padding: 4px 19.8px; }
.comment { display: flex; gap: 11px; padding: 8px 0; }
.comment .c-av { width: 28.6px; height: 28.6px; min-width: 28.6px; border-radius: 50%; background: #3a4a6b; color: #cfd8ea; font-size: 10.9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.comment .c-who { font-size: 12.1px; font-weight: 600; }
.comment .c-time { color: var(--muted); font-size: 10.9px; font-weight: 400; margin-left: 6px; }
.comment .c-text { font-size: 13.1px; margin-top: 2px; }
.c-img { display: block; max-width: 100%; max-height: 286px; margin-top: 6px; border-radius: 8px; border: 1px solid var(--line); }
.c-missing { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 4px 9px; background: #232323; border: 1px dashed #3a3a3a; border-radius: 8px; color: var(--muted); font-size: 11.2px; }
.comment { position: relative; }
.comment .c-del { position: absolute; top: 6px; right: 0; display: block; opacity: .35; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px; }
.comment:hover .c-del { opacity: 1; }
.comment .c-del:hover { color: var(--red); }
.d-comment-wrap { margin: 8px 17.6px 13.2px; padding: 9px 14.3px; background: #222; border: 1px solid var(--line); border-radius: 11px; }
.d-comment-wrap:focus-within { border-color: var(--accent); }
.dc-row { display: flex; align-items: center; gap: 11px; }
.dc-row input { flex: 1; background: none; border: 0; outline: 0; color: var(--text); }
.d-comment-wrap button { background: none; border: 0; color: var(--muted); cursor: pointer; display: flex; padding: 0; }
.d-comment-wrap button:hover { color: var(--accent); }
/* staged image waits here until Post (Duy: never post on paste) */
.dc-staged { position: relative; display: inline-block; margin-bottom: 8px; }
.dc-staged img { max-height: 99px; max-width: 100%; border-radius: 8px; border: 1px solid var(--line); display: block; }
.dc-staged button { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,.65); border-radius: 50%; padding: 3px; color: #fff; }
.dc-staged button:hover { background: var(--red); color: #fff; }
.dc-post { background: var(--accent) !important; color: #fff !important; border-radius: 7px !important; padding: 5px 13.2px !important; font-size: 11.2px; font-weight: 600; }
.dc-post:hover:not(:disabled) { background: #5a83fb !important; }
.dc-post:disabled { background: #333 !important; color: #777 !important; cursor: default; }
#detail.dropping { outline: 2px dashed var(--accent); outline-offset: -6px; }
.d-comment-wrap:focus-within { border-color: var(--accent); }
.d-comment-wrap input { width: 100%; background: none; border: 0; outline: 0; color: var(--text); }
.d-foot { display: flex; align-items: center; justify-content: space-between; padding: 11px 17.6px; border-top: 1px solid var(--line); }
.d-foot select { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font-size: 12.1px; outline: 0; }
/* buttons don't inherit colour — without this the SVG strokes currentColor
   against the UA default (near-black) and vanish on the dark panel */
.d-del { background: none; border: 0; cursor: pointer; color: #9aa0a6; display: flex; padding: 4px; }
.d-del:hover { color: var(--red); }

/* ── popover (date / priority menus) ──────────────────── */
/* above #modal (z 20) — the emoji picker opens from inside the edit dialog */
#pop { position: fixed; z-index: 30; background: #262626; border: 1px solid #333; border-radius: 13.2px; box-shadow: 0 11px 37.4px rgba(0,0,0,.5); padding: 6px; min-width: 255.2px; }
.pop-item { display: flex; align-items: center; gap: 11px; padding: 8px 13.2px; border-radius: 8px; cursor: pointer; font-size: 14.3px; }
.pop-item:hover { background: var(--hover); }
.pop-item .tick { margin-left: auto; color: var(--accent); }
.pop-item.cur { color: var(--accent); }
/* second-level menu sits beside the first, so nothing needs a back button */
#pop2 { position: fixed; z-index: 31; background: #262626; border: 1px solid #333; border-radius: 13.2px;
  box-shadow: 0 11px 37.4px rgba(0,0,0,.5); padding: 6.6px; min-width: 220px; max-height: 70vh; overflow-y: auto; }
#pop2[hidden] { display: none; }
.pop-sep { height: 1px; background: #333; margin: 5px 4px; }
.pop-label { color: var(--muted); font-size: 12.1px; padding: 6px 13.2px 2px; }

/* quick-date / priority icon rows (shared by picker + right-click menu) */
.qd-row { display: flex; gap: 4px; padding: 2px 8px 6px; }
.qd { flex: 1; display: flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 8px; padding: 7px 0; cursor: pointer; color: var(--text); }
.qd:hover { background: var(--hover); }
.qd.on { background: var(--sel); }
.pri-row { padding-bottom: 8px; }
.pri-row .qd { padding: 8px 0; }

/* hover labels (TickTick shows these on its icon rows) */
#tip { position: fixed; z-index: 40; background: #2f2f2f; border: 1px solid #3a3a3a; color: var(--text);
  font-size: 13.2px; padding: 5px 11px; border-radius: 8px; pointer-events: none; white-space: nowrap;
  box-shadow: 0 6px 19.8px rgba(0,0,0,.45); }
#tip[hidden] { display: none; }

/* quick-add autocomplete (@date · !priority) */
#acMenu { position: fixed; z-index: 35; background: #262626; border: 1px solid #333; border-radius: 13.2px;
  box-shadow: 0 11px 37.4px rgba(0,0,0,.5); padding: 6px; min-width: 209px; }
#acMenu[hidden] { display: none; }
.ac-item { display: flex; align-items: center; gap: 9px; padding: 8px 13.2px; border-radius: 8px; font-size: 14.3px; cursor: pointer; }
.ac-item.on, .ac-item:hover { background: var(--sel); }

/* calendar */
.cal { padding: 4px 8px 8px; border-top: 1px solid #333; }
.cal-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px 6px; }
.cal-title { font-size: 14.3px; font-weight: 600; }
.cal-nav button { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 15.4px; padding: 2px 6px; }
.cal-nav button:hover { color: var(--text); }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; color: var(--muted); font-size: 12.1px; padding-bottom: 4px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
/* square box + margin auto, else the 50% radius stretches into an oval when
   the grid column is wider than the cell is tall */
.cal-d { background: none; border: 0; color: var(--text); font-size: 13.2px; width: 30.8px; height: 30.8px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; }
.cal-d:hover { background: var(--hover); }
.cal-d.out { color: #4a4a4a; }
.cal-d.today { color: var(--accent); font-weight: 700; }
.cal-d.sel { background: var(--accent); color: #fff; font-weight: 700; }
.cal-foot { display: flex; gap: 8px; padding: 8px 8px 4px; }
.cal-btn { flex: 1; background: #2f2f2f; border: 0; color: var(--text); border-radius: 8px; padding: 8px 0; font-size: 14.3px; cursor: pointer; }
.cal-btn:hover { background: #383838; }
.cal-btn.primary { background: var(--accent); color: #fff; }
.cal-btn.primary:hover { background: #5a83fb; }

/* ── edit-list dialog ─────────────────────────────────── */
#modal { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; }
#modal[hidden] { display: none; }
.modal-card { background: #232323; border: 1px solid #333; border-radius: 15.4px; padding: 22px; width: 418px; box-shadow: 0 22px 66px rgba(0,0,0,.6); }
.modal-title { text-align: center; font-weight: 700; font-size: 16.5px; margin-bottom: 19.8px; }
.ml-row { display: flex; gap: 11px; align-items: center; background: var(--panel); border: 1px solid var(--accent); border-radius: 11px; padding: 8px 11px; }
.ml-icon { width: 33px; height: 33px; min-width: 33px; border: 0; border-radius: 8px; background: #2e2e2e; color: var(--muted); font-size: 17.6px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ml-icon:hover { background: #383838; color: var(--text); }
.ml-row input { flex: 1; background: none; border: 0; outline: 0; color: var(--text); font-size: 16.5px; font-weight: 600; }
.ml-label { color: var(--muted); font-size: 13.2px; margin: 19.8px 0 8px; }
.ml-colors { display: flex; gap: 11px; }
.ml-sw { width: 26.4px; height: 26.4px; border-radius: 50%; border: 0; cursor: pointer; color: var(--muted); font-size: 13.2px; line-height: 1; }
.ml-sw.on { outline: 2px solid var(--accent); outline-offset: 2px; }
.ml-foot { display: flex; align-items: center; gap: 8px; margin-top: 24.2px; }
.ml-spacer { flex: 1; }
.ml-foot .cal-btn { flex: none; padding: 8px 19.8px; }
.ml-del { background: none; border: 0; color: var(--muted); cursor: pointer; display: flex; align-items: center; gap: 5px; font-size: 13.2px; }
.ml-del:hover { color: var(--red); }

/* emoji picker */
.em-search { padding: 6px; }
.em-search input { width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; color: var(--text); outline: 0; font-size: 14.3px; }
.em-search input:focus { border-color: var(--accent); }
.em-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 231px; overflow-y: auto; padding: 4px 6px; }
.em { background: none; border: 0; font-size: 18.7px; padding: 4px 0; border-radius: 7px; cursor: pointer; }
.em:hover { background: var(--hover); }
.em-none { grid-column: 1 / -1; color: var(--muted); font-size: 13.2px; padding: 11px 4px; }

/* footer toggle for the comments block (Duy, 2026-08-05) */
.d-foot-btn { background: none; border: 0; color: #9aa0a6; cursor: pointer; display: flex; align-items: center;
  gap: 4px; padding: 4px 7px; border-radius: 7px; margin-left: auto; font-size: 11.9px; }
.d-foot-btn:hover { background: var(--hover); color: var(--text); }
.d-foot-btn.on { color: var(--accent); }
.d-foot-btn .fb-n { font-size: 11.9px; }
.d-foot { gap: 8px; }
.d-comments-section[hidden] { display: none; }

/* task description (TickTick calls it Description; imported from `content`) */
.d-notes { padding: 0 19.8px 10px; }
.notes-view { font-size: 13.1px; color: #b9b9b9; white-space: pre-wrap; cursor: text;
  border-radius: 8px; padding: 6px 8px; margin-left: -8px; }
.notes-view:hover { background: var(--hover); }
.notes-view.empty { color: #6f6f6f; }
.notes-view a { color: var(--accent); }


/* groups hold lists, not tasks — flatter look, no task-view highlight */
.nav-item.group .name { color: #b8b8b8; font-weight: 600; }
.nav-item.list-item.dragging { opacity: .4; }
.nav-item.list-item.drop-above { box-shadow: inset 0 2px 0 var(--accent); }
.nav-item.list-item.drop-below { box-shadow: inset 0 -2px 0 var(--accent); }
.nav-item.list-item.drop-into { background: var(--sel); box-shadow: inset 0 0 0 1px var(--accent); }

.ml-check { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13.1px; color: var(--muted); cursor: pointer; }
.ml-check input { accent-color: var(--accent); }

/* subtask fold — twisty only when the task has children, blank slot otherwise
   so every title still lines up (Duy, 2026-08-05) */
.row-twisty { flex: none; color: #7d7d7d; }
.row .twisty-gap { flex: none; }
.row.child { padding-left: 50.6px; }
.row-input { padding-left: 50.6px; }

/* keyboard shortcut sheet */
.sc-card { width: 520px; }
.sc-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.sc-table tr { border-bottom: 1px solid #2b2b2b; }
.sc-table tr:last-child { border-bottom: 0; }
.sc-key { width: 108px; padding: 9px 0; vertical-align: top; }
.sc-key kbd { display: inline-block; background: #303030; border: 1px solid #3d3d3d; border-bottom-width: 2px;
  border-radius: 6px; padding: 3px 8px; font: 600 12.5px/1.3 -apple-system, monospace; color: var(--text); }
.sc-desc { padding: 9px 0 9px 12px; font-size: 13.1px; color: #b9b9b9; }

/* checkbox lines inside a description — "[] milk" / "[x] milk".
   These are part of the notes text, not subtasks. */
.nt-line { min-height: 1.1em; }
.nt-item { display: flex; align-items: flex-start; gap: 9px; padding: 2px 0; }
.nt-item.done > span { color: var(--muted); text-decoration: line-through; }
.nt-box { flex: none; width: 16px; height: 16px; margin-top: 2px; border: 1.5px solid #5a5a5a;
  border-radius: 4px; background: none; color: transparent; cursor: pointer; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.nt-box:hover { border-color: var(--accent); color: #7d7d7d; }
.nt-box.on { background: #333; border-color: #333; color: #9a9a9a; }

/* always-live description editor (Notion-style): no edit mode, typing []
   turns the line into a checkbox immediately */
.notes-edit { font-size: 13.5px; color: #b9b9b9; line-height: 1.6; outline: 0;
  border-radius: 8px; padding: 6px 8px; margin-left: -8px; min-height: 30px; white-space: pre-wrap; }
.notes-edit:hover { background: #1f1f1f; }
.notes-edit:focus { background: #1f1f1f; }
.notes-edit:empty::before, .notes-edit .nt-line:only-child:empty::before {
  content: attr(data-placeholder); color: #6f6f6f; }
.notes-edit a { color: var(--accent); }
.nt-txt { flex: 1; outline: 0; }

/* undo pill — appears at the bottom the moment something changes, with the
   undo arrow right in it (Duy, 2026-08-05) */
#toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 50;
  display: flex; align-items: center; gap: 12px; background: #2b2b2b; border: 1px solid #3a3a3a;
  color: var(--text); font-size: 13.1px; padding: 9px 10px 9px 16px; border-radius: 11px;
  box-shadow: 0 10px 30px rgba(0,0,0,.55); animation: toast-in .14s ease-out; }
#toast[hidden] { display: none; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }
#toastUndo { background: none; border: 0; color: #f0b429; cursor: pointer; font-size: 15px;
  padding: 2px 8px; border-radius: 7px; display: flex; align-items: center; }
#toastUndo:hover { background: #3a3a3a; }

/* Trash header action — the only place anything is destroyed for good */
.empty-trash { display: flex; align-items: center; gap: 6px; background: none; border: 1px solid #3a3a3a;
  color: #9aa0a6; cursor: pointer; font-size: 12.5px; padding: 5px 11px; border-radius: 8px; }
.empty-trash:hover { border-color: var(--red); color: var(--red); }

/* date rows: two of them now, so give the second row a filler cell to keep the
   buttons the same width as the first */
.qd-spacer { flex: 1; }

/* drop a task onto another to nest it under that one */
.row.dragging { opacity: .4; }
.row.nest-into { background: var(--sel); box-shadow: inset 0 0 0 1px var(--accent); }

/* a task hovering over a sidebar list */
.nav-item.drop-tasks { background: var(--sel); box-shadow: inset 0 0 0 1px var(--accent); }

/* tags: typed as #hashtag in quick-add, listed in the sidebar, shown per row */
.tag-chip { color: #8fa6ff; background: #232a3d; border-radius: 5px; padding: 1px 6px; font-size: 11.5px; }
#tags .nav-item .ico { color: #8fa6ff; font-weight: 700; }

/* a group is a container, not a list — the folder glyph is the one place a
   generic icon belongs (Duy, 2026-08-06) */
.nav-item.group .ico { color: #9aa0a6; }
.pop-label.group-label { display: flex; align-items: center; gap: 7px; color: #9aa0a6; padding-top: 9px; }

.tag-hint { color: #6f6f6f; font-size: 11.5px; padding: 2px 11px 6px 24px; }
#tags .nav-item .ico svg { width: 15px; height: 15px; }

/* an uploaded picture used as a list/tag icon — without these the raw image
   renders at its natural size and swamps the row */
.ico-img { width: 17px; height: 17px; border-radius: 4px; object-fit: cover; display: block; flex: none; }
.nav-item .ico { flex: none; overflow: hidden; }
.ml-icon .ico-img { width: 22px; height: 22px; border-radius: 6px; }
.pop-ico .ico-img { width: 16px; height: 16px; }

/* the tag's own icon rides in its chip */
.tag-chip { display: inline-flex; align-items: center; gap: 4px; }
.tag-chip .ico-img { width: 13px; height: 13px; border-radius: 3px; }

/* tag row in the detail panel — chips plus an add button */
.d-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 0 19.8px 8px; }
.d-tags .tag-chip { font-size: 12px; padding: 2px 4px 2px 7px; }
.tag-x { background: none; border: 0; color: inherit; opacity: .5; cursor: pointer; font-size: 10px; padding: 0 2px; }
.tag-x:hover { opacity: 1; }
.d-addtag { display: inline-flex; align-items: center; gap: 5px; background: none; border: 1px dashed #3a3a3a;
  color: var(--muted); border-radius: 7px; padding: 3px 9px; font-size: 12px; cursor: pointer; }
.d-addtag:hover { border-color: var(--accent); color: var(--accent); }

/* ── Today as parts of the day (Duy, 2026-08-06) ─────────────── */
.seg { display: inline-flex; background: #232323; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-left: 12px; }
.seg button { background: none; border: 0; color: var(--muted); font-size: 12px; padding: 4px 11px; cursor: pointer; }
.seg button.on { background: var(--sel); color: var(--text); }

/* overdue is a decision, not a time of day — it gets a strip, not a bucket */
.overdue-strip { display: flex; align-items: center; gap: 10px; margin: 4px 17.6px 12px; padding: 9px 13px;
  border: 1px solid #4a2b2b; background: #241b1b; border-radius: 10px; font-size: 13px; }
.overdue-strip b { color: var(--red); }
.overdue-strip .od-sub { color: var(--muted); }
.od-push { margin-left: auto; background: none; border: 1px solid #4a2b2b; color: var(--red);
  border-radius: 7px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.od-push:hover { background: #2e1f1f; }

.bucket { border-top: 1px solid var(--line); display: grid; grid-template-columns: 40px 1fr; align-items: stretch; }
.bucket:first-of-type { border-top: 0; }
.b-head { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0 10px; cursor: pointer; border-right: 1px solid var(--line);
  position: sticky; top: 0; background: var(--panel2); z-index: 2; user-select: none; }
.b-ico { display: inline-flex; color: #7c7c7c; }
.bucket.now .b-ico { color: var(--accent); }
.b-name { font-weight: 600; font-size: 12px; color: #c8c8c8; letter-spacing: .6px;
  writing-mode: vertical-rl; transform: rotate(180deg); }   /* reads bottom-up */
.b-when { color: #5f5f5f; font-size: 11.5px; }
.b-n { margin-top: auto; color: var(--muted); font-size: 11px; }
.b-add { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 2px; opacity: 0; display: flex; }
.b-head:hover .b-add { opacity: 1; }
.b-add:hover { color: var(--accent); }
.b-head.armed { background: rgba(71,114,250,.16); }
/* the part of the day you are actually in */
.bucket.now .b-head { background: rgba(71,114,250,.10); }
.bucket.now .b-name { color: #fff; }
.bucket.past .b-name, .bucket.past .b-ico { opacity: .55; }
/* the gap that opens where the row will land */
.slot { height: 38px; margin: 4px 22px; border: 1px dashed var(--accent); border-radius: 8px;
  background: rgba(71,114,250,.08); display: flex; align-items: center; padding: 0 12px;
  color: #7d92d8; font-size: 12px; }
/* an empty bucket is just a quiet landing area, no words */
.drop-hint { height: 46px; }

/* dragging a row must not start a text selection, and the cursor should say
   "this moves" (Duy, 2026-08-06) */
.row { user-select: none; }
.bucket .row { cursor: grab; border-bottom: 0; }
.bucket { border-top-width: 1px; }
.bucket .row:active { cursor: grabbing; }

/* ── pointer-based row dragging (Duy, 2026-08-06) ───────────────
   The row you grabbed follows the cursor, and a line shows where it lands and
   at what level. Push right past ~26px to indent it under the row above. */
body.dragging-rows { cursor: grabbing; }
body.dragging-rows * { cursor: grabbing !important; }
.row.drag-src { opacity: .32; }
.drag-ghost { position: fixed; z-index: 60; pointer-events: none; border-radius: 9px;
  background: #2b2b2b; border: 1px solid #3d3d3d; box-shadow: 0 12px 30px rgba(0,0,0,.55);
  padding: 9px 16px; opacity: .96; transform: rotate(-.4deg); }
.ghost-n { background: var(--accent); color: #fff; border-radius: 999px; padding: 1px 8px;
  font-size: 11.5px; font-weight: 600; margin-left: 8px; }
#dragLine { position: fixed; z-index: 59; height: 2px; background: var(--accent); border-radius: 2px;
  pointer-events: none; box-shadow: 0 0 0 3px rgba(71,114,250,.16); }
#dragLine::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent); }
#dragLine.nested::after { content: 'subtask'; position: absolute; right: 0; top: -18px;
  color: var(--accent); font-size: 10.5px; font-weight: 600; letter-spacing: .3px; }
.row.nest-target { background: var(--sel); box-shadow: inset 0 0 0 1px var(--accent); }

/* ── Objectives: the command center ──────────────────────────────────────
   Everything is scoped under #rows.obj-mount / body.in-objectives so the
   generic names here (.chip, .cell, .goal) can never leak into the task
   list, which has its own .chip and .empty. */
body.in-objectives #quickAddWrap { display: none; }
body.in-objectives #detail { display: none; }
body.in-objectives #main { flex: 2.4; }
#rows.obj-mount { padding: 0 20px 34px; position: relative; }

#rows.obj-mount .cc-card { border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px;
  background: var(--panel); margin-bottom: 14px; }
#rows.obj-mount .cc-card.one { border-color: #3a3050; background: linear-gradient(90deg, rgba(163,113,247,.16), rgba(71,114,250,.04) 70%); }
#rows.obj-mount .ok { font-size: 10px; letter-spacing: 1.2px; color: #c9a6f5; }
#rows.obj-mount .ot { font-size: 17px; font-weight: 700; margin-top: 4px; }
#rows.obj-mount .os { color: var(--muted); font-size: 11.5px; margin-top: 3px; }
#rows.obj-mount .os .none { color: #6a6a6a; }
#rows.obj-mount .onum { color: #7a7a7a; font-size: 11px; }

#rows.obj-mount .osplit { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; align-items: start; }
#rows.obj-mount .ogap { height: 14px; }

#rows.obj-mount .osec { display: flex; align-items: center; gap: 9px; margin: 4px 0 9px; }
#rows.obj-mount .osec h3 { font-size: 11px; letter-spacing: 1.2px; color: #8d8d8d; }
#rows.obj-mount .ohint { color: #5f5f5f; font-size: 11px; margin-left: auto; }
#rows.obj-mount .onav { display: inline-flex; gap: 3px; }
#rows.obj-mount .onav button { width: 19px; height: 19px; line-height: 1; padding: 0; cursor: pointer;
  background: #242424; border: 1px solid #343434; border-radius: 5px; color: #b9b9b9; font-size: 11px; }
#rows.obj-mount .onav button:hover { background: #2e2e2e; color: #fff; }
#rows.obj-mount .kbd { font-size: 10px; color: #4f4f4f; border: 1px solid #333; border-radius: 4px; padding: 1px 4px; }

#rows.obj-mount .matrix { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
#rows.obj-mount .pane.focus .matrix { box-shadow: 0 0 0 1px rgba(71,114,250,.4); }
#rows.obj-mount .mrow { display: grid; align-items: center; border-top: 1px solid #232323; }
#rows.obj-mount .mrow:first-child { border-top: 0; }
#rows.obj-mount .mhead { background: #1d1d1d; font-size: 10.5px; letter-spacing: 1px; color: #8d8d8d; }
#rows.obj-mount .mhead > div { padding: 9px 6px; text-align: center; }
#rows.obj-mount .mhead > div:first-child { text-align: left; padding-left: 14px; }
#rows.obj-mount .mhead .now { color: #b9b9b9; }
#rows.obj-mount .mhead .hit { cursor: pointer; }
#rows.obj-mount .mhead .hit:hover { color: #fff; text-decoration: underline; }
#rows.obj-mount .mhead .viewing { color: var(--accent); }
#rows.obj-mount .goal { padding: 10px 14px; display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
#rows.obj-mount .goal .struck { color: var(--muted); text-decoration: line-through; }
#rows.obj-mount .olink { color: #6f7fbf; font-size: 11px; }
#rows.obj-mount .goal .clr { margin-left: auto; color: #4a4a4a; cursor: pointer; font-size: 13px; opacity: 0; }
#rows.obj-mount .mrow:hover .goal .clr { opacity: 1; }
#rows.obj-mount .goal .clr:hover { color: #e08585; }
#rows.obj-mount .cell { text-align: center; padding: 7px 4px; }
#rows.obj-mount .badge { display: inline-block; min-width: 52px; font-size: 11px; padding: 3px 6px; border-radius: 6px; }
#rows.obj-mount .b-done { background: #1e3323; color: #6fcf87; }
#rows.obj-mount .b-prog { background: #1e2a3d; color: #7fa8f0; }
#rows.obj-mount .b-fail { background: #3a2222; color: #e08585; }
#rows.obj-mount .b-none { background: #212121; color: #5a5a5a; }
#rows.obj-mount .cell.current { background: rgba(71,114,250,.07); }
#rows.obj-mount .verdict { text-align: center; padding: 7px 6px; border-left: 1px solid #232323; background: #1b1b1b; }
#rows.obj-mount .oempty { padding: 14px; color: #555; font-size: 12.5px; text-align: center; }

/* Duy's own seven from the spreadsheet — no N/A */
#rows.obj-mount .chip { display: inline-block; font-size: 11px; padding: 3px 6px; border-radius: 6px; }
#rows.obj-mount .c-habits { background: #3a3a1c; color: #d6d67e; }
#rows.obj-mount .c-finance { background: #3d2a16; color: #e5a65c; }
#rows.obj-mount .c-health { background: #262c44; color: #9fb0f2; }
#rows.obj-mount .c-others { background: #2b2b2b; color: #a6a6a6; }
#rows.obj-mount .c-relationship { background: #3d2020; color: #e0876a; }
#rows.obj-mount .c-startup { background: #1e3323; color: #6fcf87; }
#rows.obj-mount .c-product { background: #2d2442; color: #bfa0f5; }
#rows.obj-mount .catcell { padding: 7px 6px; }

/* a status/category select that still reads as a chip. font-family only —
   `font: inherit` outranks .chip/.badge and blows the text up to body size */
#rows.obj-mount select.osel { appearance: none; -webkit-appearance: none; border: 0; outline: 0;
  cursor: pointer; font-family: inherit; text-align: center; text-align-last: center; }
#rows.obj-mount select.osel:hover { box-shadow: inset 0 0 0 1px #4a4a4a; }
#rows.obj-mount select.chip.osel { width: 100%; }
#rows.obj-mount select.badge.osel { width: 100%; min-width: 0; padding: 3px 2px; }

/* which days carry this step / which weeks carry this month objective */
#rows.obj-mount .days { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; padding: 7px 8px; }
#rows.obj-mount .dchip { font-size: 10.5px; background: #252a3d; color: #9fb0f2; border-radius: 5px;
  padding: 2px 5px; cursor: pointer; }
#rows.obj-mount .dchip:hover { background: #3a2222; color: #e08585; }
#rows.obj-mount .dchip:hover::after { content: ' ×'; }
#rows.obj-mount select.give { appearance: none; -webkit-appearance: none; cursor: pointer;
  font-family: inherit; font-size: 11px; background: #242424; border: 1px solid #343434;
  border-radius: 6px; color: #8d8d8d; padding: 3px 5px; }
#rows.obj-mount select.give:hover { color: #fff; border-color: #4a4a4a; }
#rows.obj-mount select.give.mini { padding: 2px 5px; font-size: 10.5px; max-width: 56px; }
#rows.obj-mount select.give.mini.wk { max-width: 62px; }
#rows.obj-mount select.pick { width: 100%; background: transparent; border: 0; outline: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; color: #5a5a5a; appearance: none; -webkit-appearance: none; }
#rows.obj-mount select.pick:hover { color: #9a9a9a; }

/* the week tree: task, its steps, and the always-there add-a-step box */
#rows.obj-mount .tw { color: #6a6a6a; font-size: 10px; cursor: pointer; width: 10px; display: inline-block; }
#rows.obj-mount .tw:hover { color: #fff; }
#rows.obj-mount .tw.hollow { color: #3c3c3c; }
#rows.obj-mount .cnt { color: #6a6a6a; font-size: 11px; }
#rows.obj-mount .subrow { background: #191919; }
#rows.obj-mount .goal.sub { padding-left: 38px; font-size: 12.5px; color: #b9b9b9; }
#rows.obj-mount .subin, #rows.obj-mount .freein { width: 100%; background: transparent; border: 0;
  outline: 0; color: var(--text); font: inherit; font-size: 12.5px; }
#rows.obj-mount .subin::placeholder, #rows.obj-mount .freein::placeholder { color: #4e4e4e; }
#rows.obj-mount .addsub { background: #161616; }

#rows.obj-mount .daycell { padding: 11px 14px; font-size: 13px; color: #b9b9b9; }
#rows.obj-mount .daycell.current { background: rgba(71,114,250,.10); color: #fff; }
#rows.obj-mount .mrow.is-today { background: rgba(71,114,250,.04); }

#rows.obj-mount .addbar { display: flex; align-items: center; gap: 9px; padding: 8px 14px;
  border-top: 1px solid #232323; background: #1a1a1a; }
#rows.obj-mount .oplus { color: #6a6a6a; font-size: 15px; }
#rows.obj-mount .addin { flex: 1; background: transparent; border: 0; outline: 0; color: var(--text);
  font: inherit; font-size: 13px; padding: 3px 0; }
#rows.obj-mount .addin::placeholder { color: #5a5a5a; }

/* category groups, and the card that sets their order */
#rows.obj-mount .grow { display: flex; align-items: center; gap: 8px; padding: 6px 14px;
  background: #191919; border-top: 1px solid #232323; }
#rows.obj-mount .gcount { color: #6a6a6a; font-size: 11px; }
#rows.obj-mount .grip { color: #4a4a4a; font-size: 10px; letter-spacing: -1px; cursor: grab; }
#rows.obj-mount [data-catdrag] { cursor: grab; }
#rows.obj-mount [data-catdrag]:active { cursor: grabbing; }
#rows.obj-mount .dropbefore { box-shadow: inset 0 2px 0 var(--accent); }
#rows.obj-mount .dropafter { box-shadow: inset 0 -2px 0 var(--accent); }
#rows.obj-mount .catpop { position: absolute; right: 0; top: -4px; z-index: 5; width: 250px;
  padding: 10px 12px 8px; background: #1d1d1d; border: 1px solid #3a3a3a; border-radius: 11px;
  box-shadow: 0 12px 30px rgba(0,0,0,.5); }
#rows.obj-mount .cphead { font-size: 10px; letter-spacing: 1.1px; color: #8d8d8d; margin-bottom: 8px; }
#rows.obj-mount .cphint { display: block; letter-spacing: 0; color: #5f5f5f; font-size: 11px; margin-top: 3px; }
#rows.obj-mount .cprow { display: flex; align-items: center; gap: 8px; padding: 4px 2px; border-radius: 6px; }
#rows.obj-mount .cprow:hover { background: #242424; }
#rows.obj-mount .cpn { color: #5a5a5a; font-size: 10.5px; width: 11px; }

/* header buttons that sit beside the page tabs */
#viewTitle .obtn { margin-left: 8px; padding: 4px 11px; border-radius: 7px; cursor: pointer;
  background: #242424; border: 1px solid #343434; color: #8d8d8d; font: inherit; font-size: 12px; }
#viewTitle .obtn:hover { color: #fff; border-color: #4a4a4a; }
#viewTitle .obtn.live { color: var(--accent); border-color: #2f3f6d; background: rgba(71,114,250,.10); }

/* what the objective is worth — 1Thing is the one that makes the rest easier */
#rows.obj-mount select.val { appearance: none; -webkit-appearance: none; border: 0; outline: 0;
  cursor: pointer; font-family: inherit; font-size: 10px; padding: 2px 5px; border-radius: 5px;
  text-align: center; text-align-last: center; }
#rows.obj-mount .v-1thing { background: #2d2442; color: #bfa0f5; }
#rows.obj-mount .v-high { background: #3d2020; color: #e0876a; }
#rows.obj-mount .v-mid { background: #3a2f16; color: #d6a75e; }
#rows.obj-mount .v-none { background: transparent; color: #3f3f3f; }
#rows.obj-mount .mrow:hover .v-none { color: #6a6a6a; }

/* Three kinds of chip in one row read as one kind unless they differ in
   WEIGHT, not just hue (Duy, 2026-08-06). So: a status is a solid filled
   pill (it is a state), a category is an outlined tag left-aligned in its
   column (it is a label), and a priority is bare coloured text (it is a
   rank). Same colours, three unmistakable shapes. */
#rows.obj-mount .catcell { text-align: left; }
#rows.obj-mount .chip, #rows.obj-mount select.chip {
  background: transparent; border: 1px solid; border-radius: 4px;
  padding: 2px 7px; font-size: 10.5px; letter-spacing: .3px;
  text-align: left; text-align-last: left;
}
#rows.obj-mount select.chip.osel { width: auto; max-width: 100%; }
#rows.obj-mount .c-habits { color: #c9c96b; border-color: #55552a; }
#rows.obj-mount .c-finance { color: #dc9a4c; border-color: #5c421f; }
#rows.obj-mount .c-health { color: #8fa3ee; border-color: #39406a; }
#rows.obj-mount .c-others { color: #9a9a9a; border-color: #444; }
#rows.obj-mount .c-relationship { color: #dd7a5c; border-color: #5e3128; }
#rows.obj-mount .c-startup { color: #5fc57a; border-color: #2c5237; }
#rows.obj-mount .c-product { color: #b394f2; border-color: #47376a; }
/* the group header keeps a filled chip — there it IS the heading */
#rows.obj-mount .grow .chip { background: rgba(255,255,255,.05); }

#rows.obj-mount select.val {
  background: transparent; padding: 1px 3px; font-size: 9.5px;
  letter-spacing: .7px; text-transform: uppercase; font-weight: 600;
}
#rows.obj-mount .v-1thing { color: #a371f7; }
#rows.obj-mount .v-high { color: #dd8a6c; }
#rows.obj-mount .v-mid { color: #c9a05a; }
#rows.obj-mount .v-none { color: #3a3a3a; }
#rows.obj-mount .valcell { text-align: center; padding: 7px 4px; }
#rows.obj-mount select.val { width: 100%; }

/* the divider between the two panes — drag it, each page remembers its own */
#rows.obj-mount .osplit { grid-template-columns: 1.15fr 11px 1fr; gap: 0; }
#rows.obj-mount .ogutter { cursor: col-resize; align-self: stretch; position: relative; min-height: 60px; }
#rows.obj-mount .ogutter::after { content: ''; position: absolute; left: 50%; top: 22px; bottom: 4px;
  width: 2px; transform: translateX(-50%); background: #262626; border-radius: 2px; transition: background .12s; }
#rows.obj-mount .ogutter:hover::after, #rows.obj-mount .ogutter.dragging::after { background: var(--accent); }
/* Dropped: finished with, but not achieved — warm grey so it never reads as
   the empty "—" (cool grey) sitting next to it in the same menu */
#rows.obj-mount .b-drop { background: #2c2724; color: #9c9089; }
/* a step's category is its task's — shown, not editable */
#rows.obj-mount .catcell.inherit { font-size: 10.5px; color: #5a5a5a; padding-left: 8px; }

/* 1Thing mode — Today shows only the 1Thing until it is done */
#oneMode { display: flex; align-items: center; gap: 8px; padding: 2px 12px 10px; }
#oneMode .lbl { font-size: 12px; color: var(--muted); }
.sw { margin-left: auto; width: 32px; height: 18px; border-radius: 9px; background: #303030;
  position: relative; cursor: pointer; flex: none; transition: background .15s; }
.sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #8b8b8b; transition: transform .15s, background .15s; }
.sw:hover::after { background: #b9b9b9; }
.sw.on { background: rgba(163,113,247,.30); }
.sw.on::after { transform: translateX(14px); background: #a371f7; }
#oneMode:has(.sw.on) .lbl { color: #bfa0f5; }
.one-bar { display: flex; align-items: center; gap: 10px; margin: 0 22px 4px; padding: 9px 14px;
  border: 1px solid #4a3a6d; border-radius: 10px; background: rgba(163,113,247,.10); font-size: 12.5px; }
.one-bar b { color: #bfa0f5; }
.one-bar span { color: var(--muted); }
.one-bar button { margin-left: auto; background: none; border: 0; color: #8b8b8b;
  font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; }
.one-bar button:hover { color: #fff; }
.one-bar.done { border-color: #2c5237; background: rgba(63,185,80,.08); }
.one-bar.done b { color: #6fcf87; }
.one-bar.none { border-color: #3a3a3a; background: #1c1c1c; }
.one-bar.none b { color: #b9b9b9; }

/* No scrollbars anywhere — the content already tells you there is more, and a
   permanent grey rail down the middle of the window reads as a border (Duy,
   2026-08-06). Scrolling itself is untouched: wheel, trackpad and keys work. */
* { scrollbar-width: none; }
*::-webkit-scrollbar { width: 0; height: 0; }

/* ── Phone (2026-08-06) ───────────────────────────────────────────────────
   Same server, same database — the phone is another window onto the one
   SQLite file, not a copy. TickTick's mobile shape: the sidebar becomes a
   drawer behind a hamburger, the task list is the whole screen, and the
   detail panel is a sheet that slides up over it. Touch targets grow; the
   hover-only affordances (row ×, drag handles) are not reachable on a phone
   so they stay visible instead. */
@media (max-width: 700px) {
  body { font-size: 16px; }

  /* the sidebar slides in over the list */
  #sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 40; width: 82vw; max-width: 320px;
    transform: translateX(-100%); transition: transform .22s ease;
    padding-top: max(14px, env(safe-area-inset-top));
    box-shadow: 12px 0 34px rgba(0,0,0,.5);
  }
  body.nav-open #sidebar { transform: none; }
  body.nav-open::after {
    content: ''; position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.5);
  }
  #sidebar .nav-item, #sidebar .list-item { padding-top: 11px; padding-bottom: 11px; }

  /* the list is the screen */
  #main { flex: 1; min-width: 0; padding-top: env(safe-area-inset-top); }
  #viewTitle { padding: 12px 14px 8px; font-size: 20px; gap: 8px; }
  #menuBtn { display: flex; align-items: center; justify-content: center;
    background: none; border: 0; color: var(--text); padding: 4px 6px; margin-right: 2px; }
  #quickAddWrap { margin: 0 12px 10px; padding: 11px 14px; }
  .row { padding: 13px 14px; gap: 12px; }
  .check { width: 23px; height: 23px; min-width: 23px; }
  .row .meta, .row .list-name { font-size: 12px; }
  #rows { padding-bottom: max(20px, env(safe-area-inset-bottom)); }

  /* the detail panel becomes a sheet */
  #detail {
    position: fixed; inset: 0; z-index: 50; width: auto; border-left: 0;
    transform: translateY(100%); transition: transform .22s ease;
    padding-top: max(10px, env(safe-area-inset-top));
  }
  body.detail-open #detail { transform: none; }
  #detailBack { display: flex; align-items: center; gap: 6px; background: none; border: 0;
    color: var(--accent); font: inherit; font-size: 15px; padding: 6px 4px; margin-bottom: 4px; }
  .detail-empty { display: none; }

  /* what hover would have revealed has to be permanent on a touch screen */
  .goal .clr, .b-add, .gmove { opacity: 1 !important; }

  /* the day rail stays, just narrower */
  .bucket { grid-template-columns: 34px 1fr; }
  .b-head { padding: 10px 0 8px; }
}
@media (max-width: 700px) and (display-mode: standalone) {
  /* installed to the Home Screen: no browser chrome to lean on */
  #viewTitle { padding-top: 6px; }
}