.note-task { display:grid; grid-template-columns:24px minmax(0,1fr) 36px; gap:6px; align-items:start; margin:0; padding:2px 0; border-bottom:1px solid var(--line); }
.note-task > b { padding-top:9px; font-size:15px; color:var(--muted); }
.note-task > textarea { width:100%; min-height:0; margin:0; padding:4px 6px; border-color:transparent; border-radius:7px; background:transparent; box-sizing:border-box; resize:none; line-height:1.4; overflow-y:auto; }
.note-task > textarea:focus { background:var(--bg); border-color:var(--line); }
.note-task-options { grid-column:3; grid-row:1; min-width:0; }
.note-task-options > summary { list-style:none; text-align:center; cursor:pointer; min-height:44px; padding:8px 4px; color:var(--primary); font-size:20px; }
.note-task-options > summary::-webkit-details-marker { display:none; }
.note-task-options[open] { grid-column:2 / -1; grid-row:auto; padding:8px; background:var(--bg); border-radius:8px; }
.note-task-options[open] > summary { text-align:right; padding:0 4px; min-height:32px; }
.note-task-options select { width:100%; min-width:0; }
.note-group { min-width:0; border:1px solid var(--line); border-left:4px solid var(--primary); border-radius:9px; margin:8px 0; background:var(--card); }
.note-task > .note-group, .note-task > .note-group-jump, .note-task > .note-group-add { grid-column:2 / -1; margin:0; }
.note-task > .note-group-add { justify-self:start; font-size:12px; min-height:28px; padding:3px 0; }
.note-group > summary { cursor:pointer; padding:3px 8px; min-height:25px; font-size:12px; line-height:1.4; font-weight:600; overflow-wrap:anywhere; }
.note-group-body { padding:0 10px 10px; }
.note-group-body textarea { width:100%; box-sizing:border-box; }
.note-settings { margin:4px 0 8px; }
.note-settings > summary { cursor:pointer; padding:9px 0; min-height:40px; font-size:13px; color:var(--muted); }
.note-settings input { margin:4px 0; }
.note-settings input[type=color] { width:56px; height:44px; padding:4px; }
.note-conflict button { margin:6px; }
.note-task-actions { grid-column:3; grid-row:1; position:relative; display:flex; flex-direction:column; align-items:stretch; min-height:44px; }
.note-task-actions .note-task-options > summary { min-height:44px; height:44px; line-height:44px; padding:0; }
.note-task-actions .note-task-options[open] { position:absolute; top:0; right:0; width:min(260px, 68vw); z-index:3; padding:8px; border:1px solid var(--line); background:var(--card); box-shadow:0 4px 14px #0003; }
.note-task > .note-group-inline:not([open]) { display:none; }
.note-group-inline > summary { display:none; }
.note-group-inline .note-group-body { padding:8px; }

.note-task-options > button { display:block; width:100%; text-align:left; min-height:44px; }

.note-task-actions > .note-group-play { width:36px; height:36px; min-height:36px; padding:0; line-height:36px; font-size:34px; text-align:center; }
.note-task-actions:has(> .note-group-play) .note-task-options > summary { min-height:24px; height:24px; line-height:24px; }

.note-task.note-has-subgroup > textarea { color:#ff7900; -webkit-text-stroke:0.35px #ffe600; paint-order:stroke fill; text-shadow:0 0 0.4px #ffe600; }

.note-task-actions { min-height:0; }
.note-task-actions > .note-group-play { height:32px; min-height:32px; line-height:32px; }
.note-task-actions:has(> .note-group-play) .note-task-options > summary { min-height:20px; height:20px; line-height:20px; }

.note-task-options > button { border:1px solid var(--line); border-radius:8px; background:var(--bg); padding:10px 12px; margin:6px 0; font-weight:600; }
.note-task-options > button:last-child { color:#ff7373; border-color:#ff737366; }

/* Completed notes stay green even when they have a subgroup. */
.note-task.note-done > textarea, .note-task.note-done > b { color:var(--ok); -webkit-text-stroke:0; text-shadow:none; }
.note-task-options > .note-done-toggle { color:var(--ok); }
/* Keep the whole menu in the document flow, including on the last note. */
.note-task-actions:has(> .note-task-options[open]) { grid-column:2 / -1; grid-row:auto; width:100%; }
.note-task-actions .note-task-options[open] { position:static; width:100%; }
.note-delete-group { display:block; min-height:44px; color:var(--bad); margin:8px 0; }
.note-delete-confirm { padding:10px; margin:8px 0; border:1px solid var(--bad); border-radius:8px; }
.note-delete-confirm button { display:block; width:100%; min-height:44px; margin:6px 0; }
.note-delete-confirm button:first-of-type { color:var(--bad); }

/* Info | Print info: two small buttons with a slight 3D look (the chosen one looks pressed) */
.note-tabs { display:flex; gap:8px; margin:8px 0; }
.note-tab { flex:none; min-height:40px; padding:6px 16px; border:1px solid var(--line); border-radius:9px; font-weight:700; color:var(--text); background:var(--card); box-shadow:0 2px 0 #0003, inset 0 1px 0 #ffffff55; }
.note-tab.on { color:var(--primary-text); background:var(--primary); border-color:var(--primary); box-shadow:inset 0 2px 4px #0006; padding-top:7px; padding-bottom:5px; }
.note-plot-row > .note-plot-mark { min-height:36px; width:24px; padding:0; font-size:20px; text-align:center; color:inherit; }
.note-plot-row > .note-plot-del { min-height:36px; width:36px; padding:0; font-size:22px; color:var(--bad); }
.note-plot-row > .note-delete-confirm { grid-column:1 / -1; }
.note-plot-clear { display:block; min-height:44px; color:var(--bad); margin:8px 0; }