/* FCF-97: planned Todo blocks after the now line (session column, hatched like Session) + plan summary in Todo.
   Every block and chip sets its own background and text colour so it reads in light and dark. */
.plan-layer{position:absolute;inset:0;pointer-events:none}
.plan-block{--ev-l:52%;--ev-r:6.5%;position:absolute;left:var(--ev-l);right:var(--ev-r);min-height:13px;box-sizing:border-box;border-radius:3px;padding:3px 6px;overflow:hidden;font-size:11px;font-weight:600;line-height:1.2;color:#303030;
  background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--plan-color) 30%,transparent) 0 5px,transparent 5px 10px),color-mix(in srgb,var(--plan-color) 10%,var(--surface));
  border:1px dashed color-mix(in srgb,var(--plan-color) 70%,#808080);border-left:3px solid var(--plan-color);pointer-events:auto;cursor:grab;user-select:none;-webkit-user-select:none}
/* Mouse and trackpad drag the block; on touch screens a swipe still scrolls the calendar (use Set time… instead). */
@media(pointer:fine){.plan-block{touch-action:none}}
body.dark .plan-block{color:#ececec}
.plan-block small{font-weight:500;opacity:.85;margin-right:5px;font-variant-numeric:tabular-nums}
.plan-block .plan-notes{display:block;margin-top:2px;font-weight:400;opacity:.85;white-space:pre-line;overflow-wrap:anywhere}/* FCF-609 */
.plan-block.pinned{border-style:solid}
/* FCF-534: a Todo carried over from an earlier day (no room there) keeps the dashed border and gets a ↪ before its time */
.plan-block.carried small::before{content:'↪ ';opacity:.9}
.plan-block.plan-over{border-color:#c2410c;border-left-color:#c2410c}
body.dark .plan-block.plan-over{border-color:#fb923c;border-left-color:#fb923c}
.plan-block.dragging{cursor:grabbing;opacity:.85;z-index:5;box-shadow:0 4px 12px #0003}
.plan-block .plan-resize{position:absolute;left:0;right:0;bottom:0;height:7px;cursor:ns-resize}
/* FCF-231: as in Google Calendar the top edge changes the start and the bottom edge the end. Their grips show on hover (mouse) and on the
   edge being held or dragged (touch). Drawn in the block's own text colour, so they read in light and dark. */
.plan-block[data-plan-todo]::before,.plan-block .plan-resize::after{content:'';position:absolute;left:0;right:0;height:6px;opacity:0;pointer-events:none;background:linear-gradient(currentColor,currentColor) center/18px 2px no-repeat}
.plan-block[data-plan-todo]::before{top:0}
.plan-block .plan-resize::after{bottom:0}
.plan-block[data-zone=start],.plan-block[data-zone=end]{cursor:ns-resize}
@media(hover:hover){.plan-block[data-top]:hover::before,.plan-block[data-plan-todo]:hover .plan-resize::after{opacity:.5}}
.plan-block.held[data-zone=start]::before,.plan-block.dragging[data-zone=start]::before,.plan-block.held[data-zone=end] .plan-resize::after,.plan-block.dragging[data-zone=end] .plan-resize::after{opacity:.9}
.plan-times{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:800px){.plan-block{--ev-l:40%;--ev-r:5%}}
.timeline.no-cal-events .plan-block{--ev-l:56px}
/* FCF-227: the break kept free after the running Focus Session (the first Todo starts after it). Not a Todo: no drag, taps go through. */
.plan-block.plan-rest{pointer-events:auto;cursor:pointer;font-weight:500;color:#4a4a4a;background:#f3f3f3;border:1px dashed #b0b0b0;border-left:3px solid #9a9a9a}
/* FCF-526: the planned break opens its own menu */
.break-picks{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.break-picks button{padding:6px 14px;border-radius:999px;border:1px solid #c8c8c8;background:#fff;color:#1d1d1f;font:inherit;cursor:pointer}
.break-picks button.active{background:#1f5c45;border-color:#1f5c45;color:#fff}
body.dark .break-picks button{background:#2a2a2c;border-color:#5c5c5c;color:#f2f2f2}
body.dark .break-picks button.active{background:#2f7a5d;border-color:#2f7a5d;color:#fff}
body.dark .plan-block.plan-rest{color:#d4d4d4;background:#2b2b2b;border-color:#5c5c5c;border-left-color:#808080}

.plan-summary{margin:12px 0 4px;padding:9px 11px;border-radius:6px;font-size:12px;line-height:1.5;background:#f2f5ef;color:#2f3a2a;border:1px solid #dfe6d8}
body.dark .plan-summary{background:#24291f;color:#dfe8d6;border-color:#38422f}
.plan-summary.over{background:#fff4ec;color:#7a2e0b;border-color:#f3d2bd}
body.dark .plan-summary.over{background:#33231a;color:#ffd7c0;border-color:#5a3a28}
.plan-summary strong{font-weight:650}
.todo-progress{display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums}
.todo-ring{width:14px;height:14px;flex:none;transform:rotate(-90deg)}
.todo-ring circle{fill:none;stroke-width:3}
.todo-ring .bg{stroke:#d9d9d9}
body.dark .todo-ring .bg{stroke:#4a4a4a}
.todo-ring .fg{stroke:var(--ring,#3f8a2a)}
.plan-menu{display:grid;gap:6px}
/* FCF-457: which Todo the menu acts on — name, planned time, category; own colours so it reads on light and dark. */
.plan-menu-head{display:flex;gap:10px;align-items:flex-start;padding:4px 16px 12px;border-bottom:1px solid #e3e3e3;color:#1a1a1a}
.plan-menu-head .dot{width:10px;height:10px;margin-top:6px}
.plan-menu-head strong{display:block;font-size:17px;line-height:1.3;overflow-wrap:anywhere}
.plan-menu-head small{display:block;margin-top:3px;font-size:13px;color:#5c5c5c}
body.dark .plan-menu-head{border-color:#3b3b3b;color:#f0f0f0}
body.dark .plan-menu-head small{color:#b8b8b8}

/* FCF-148: Apple/Google events are reference only; an event moved to the right half is "official" (Todos flow around it).
   Each block and button sets its own background and text colour so it reads in light and dark. */
@media(pointer:fine){.cal-event[data-cal-key],.plan-block[data-official]{touch-action:none}.cal-event[data-cal-key]{cursor:grab}}
.cal-event.dragging{cursor:grabbing;opacity:.85;z-index:5;box-shadow:0 4px 12px #0003}
.cal-event[data-cal-key] .cal-title,.plan-block.official>span{padding-right:18px}
.cal-adopt,.plan-official-back{position:absolute;top:1px;right:1px;width:16px;height:16px;padding:0;border-radius:3px;font-size:11px;line-height:14px;text-align:center;color:#303030;background:#ffffffd9;border:1px solid #00000040}
body.dark .cal-adopt,body.dark .plan-official-back{color:#ececec;background:#000000b3;border-color:#ffffff4d}
.plan-block.official{color:#303030;background:color-mix(in srgb,var(--plan-color) 34%,var(--surface));border:1px solid color-mix(in srgb,var(--plan-color) 55%,#777);border-left:3px solid var(--plan-color)}
body.dark .plan-block.official{color:#ececec;background:color-mix(in srgb,var(--plan-color) 22%,var(--surface));border-color:color-mix(in srgb,var(--plan-color) 55%,#777);border-left-color:var(--plan-color)}

/* FCF-275 / FCF-276 / FCF-277: the Todo list as a keyboard list. The selected row (click, Tab or ↑ ↓) is outlined in the accent colour; the quick-add
   box and its preview set their own background and text colour so they read in light and dark; the key hint only shows where there is a keyboard. */
.todo-row{position:relative;outline:none}
.todo-row.selected{border-color:var(--chrome,#004736);box-shadow:0 0 0 1px var(--chrome,#004736) inset;background:color-mix(in srgb,var(--chrome,#004736) 6%,var(--surface,#fff))}
.todo-row:focus-visible{box-shadow:0 0 0 2px var(--chrome,#004736)}
body.dark .todo-row.selected{border-color:#3fb68b;box-shadow:0 0 0 1px #3fb68b inset;background:color-mix(in srgb,#3fb68b 12%,var(--surface,#1c1c1e))}
body.dark .todo-row:focus-visible{box-shadow:0 0 0 2px #3fb68b}
.todo-row .todo-move{color:#6b6b6b}.todo-row .todo-move:hover{color:#111}
body.dark .todo-row .todo-move{color:#a8a8a8}body.dark .todo-row .todo-move:hover{color:#fff}
.todo-quick{margin:12px 0 4px}
.todo-quick input{width:100%;box-sizing:border-box;min-height:40px;padding:8px 12px;border:1px solid #cfcfcf;border-radius:8px;background:#fff;color:#111;font:inherit;font-size:14px}
.todo-quick input::placeholder{color:#8a8a8a}
.todo-quick input:focus{outline:none;border-color:var(--chrome,#004736);box-shadow:0 0 0 2px color-mix(in srgb,var(--chrome,#004736) 25%,transparent)}
body.dark .todo-quick input{background:#2a2a2c;color:#f2f2f2;border-color:#4a4a4a}
body.dark .todo-quick input::placeholder{color:#9a9a9a}
body.dark .todo-quick input:focus{border-color:#3fb68b;box-shadow:0 0 0 2px #3fb68b40}
.todo-quick-preview{margin:4px 2px 0;font-size:11px;color:#555;font-variant-numeric:tabular-nums}
body.dark .todo-quick-preview{color:#bdbdbd}
.todo-keys-hint{display:flex;flex-wrap:wrap;gap:4px 12px;margin:14px 2px 6px;font-size:11px;color:#6b6b6b}
.todo-keys-hint .keycaps{margin-right:2px}
body.dark .todo-keys-hint{color:#a8a8a8}
@media(pointer:coarse){.todo-keys-hint{display:none}}
/* FCF-317: sort bar on Completed / Deleted; its own background and text colour so it reads in light, dark and Flow Glass */
.todo-sort{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 2px 6px;font-size:12px;color:#4a4a4a}
.todo-sort label{display:flex;align-items:center;gap:6px}
.todo-sort select,.todo-sort button{min-height:30px;padding:4px 10px;border:1px solid #c4c4c4;border-radius:8px;background:#fff;color:#1d1d1f;font:inherit;font-size:12px;cursor:pointer}
body.dark .todo-sort{color:#c8c8c8}
body.dark .todo-sort select,body.dark .todo-sort button{background:#2a2a2c;color:#f2f2f2;border-color:#555}
.todo-when{display:inline-block;text-decoration:none;font-variant-numeric:tabular-nums}
/* The + for the full Add Todo dialog sits on top, beside the quick-add box, not under a long list. */
.todo-quick-row{display:flex;align-items:center;gap:8px}
.todo-quick-row input{flex:1;min-width:0}
.todo-add{flex:none;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #cfcfcf;border-radius:8px;background:#fff;color:inherit}
.todo-add svg{width:20px;height:20px}
body.dark .todo-add{background:#2a2a2c;border-color:#4a4a4a}
.todo-add-top{margin:12px 0 6px}
@media(max-width:600px){.todo-add{width:44px;height:44px}}
/* FCF-437: a Todo dragged by its handle onto today's calendar: the row fades in the list, a block shows where it will land. */
.todo-row.dragging.todo-cal{opacity:.45}
.plan-block.plan-ghost{pointer-events:none;z-index:6;box-shadow:0 4px 14px #0003}
/* FCF-438: 📌 on a Todo given a time by hand (list row and calendar block); a tap puts it back in the automatic plan.
   Own background and text colour, so it reads in light, dark and glass. */
.todo-row .todo-pin{flex:none;display:inline-flex;align-items:center;gap:3px;min-width:0;padding:4px 9px;border-radius:999px;border:1px solid #d9c690;background:#fff6dc;color:#5b4410;font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;cursor:pointer}
.todo-row .todo-pin:hover{background:#ffecb8}
body.dark .todo-row .todo-pin{background:#3a3220;color:#f5e3b5;border-color:#6a5a33}
body.dark .todo-row .todo-pin:hover{background:#4a3f27}
.plan-block .plan-pin{float:right;margin:-2px -4px 0 4px;padding:0 3px;min-height:0;min-width:0;border:0;border-radius:3px;background:none;font-size:11px;line-height:1.35;cursor:pointer;color:inherit}
.plan-block .plan-pin:hover{background:color-mix(in srgb,var(--plan-color) 25%,transparent)}
/* FCF-463: planned blocks that overlap sit side by side in the plan column, like .event.laned. */
.plan-block.laned{left:calc(var(--ev-l) + (100% - var(--ev-l) - var(--ev-r)) * var(--lane) / var(--lanes));right:auto;width:calc((100% - var(--ev-l) - var(--ev-r)) / var(--lanes) - 2px);padding-left:4px;padding-right:4px}
/* FCF-465: default-calendar blocks (lịch chuẩn) beside the planned Todos — soft teal, not hatched; dashed when they move with the day, solid when
   pinned (📌). A block that had to wait for a fixed one keeps the orange warning edge (.plan-over). Each block and tag sets its own background and
   text colour, so it reads in light, dark and glass. */
.plan-block.routine{--plan-color:#2a8f83;color:#1f3a36;background:color-mix(in srgb,var(--plan-color) 16%,var(--surface,#fff));border:1px dashed color-mix(in srgb,var(--plan-color) 65%,#808080);border-left:3px solid var(--plan-color);font-weight:550}
body.dark .plan-block.routine{--plan-color:#4fc3b4;color:#e3f4f1;background:color-mix(in srgb,var(--plan-color) 20%,var(--surface,#202020));border-color:color-mix(in srgb,var(--plan-color) 60%,#777);border-left-color:var(--plan-color)}
.plan-block.routine.pinned{border-style:solid}
/* A pinned block the running Session runs into: drawn on top, in the right part of the column, so both stay visible. */
.plan-block.routine.beside{left:calc(var(--ev-l) + (100% - var(--ev-l) - var(--ev-r)) * .5);z-index:2;box-shadow:0 2px 8px #0002}
.plan-block.routine.plan-over{border-color:#c2410c;border-left-color:#c2410c}
body.dark .plan-block.routine.plan-over{border-color:#fb923c;border-left-color:#fb923c}
.plan-block.routine .routine-tag{float:right;margin:-1px 0 0 4px;padding:0 4px;border-radius:3px;font-style:normal;font-size:10px;font-weight:650;line-height:1.4;color:#5b2a0b;background:#ffe9d6}
body.dark .plan-block.routine .routine-tag{color:#ffd7c0;background:#4a2c1b}
.plan-routine{display:inline}
.plan-routine .link-button{font:inherit;font-weight:650}
/* Settings › Todo › Default calendar: one row per block. Two lines (time · minutes · 📌 · shortest · ✕ / name · lane) unless the card is wide
   enough for one line, so the name never shrinks to nothing in a narrow Settings column or on a phone. */
.routine-template p{margin:10px 0 0;font-size:12px}
.routine-check{display:inline-flex;align-items:center;gap:6px;font-size:12px}
.routine-blocks{display:grid;gap:6px;margin-top:10px;container-type:inline-size}
.routine-head,.routine-row{display:grid;grid-template-columns:98px 58px minmax(0,1fr) 58px 36px;grid-template-areas:"time mins anchor min del" "end name name lane lane" "cat cat cat cat cat";gap:6px;align-items:center}
.routine-head{grid-template-areas:"time mins anchor min del";font-size:11px;color:#6b6b6b}
body.dark .routine-head{color:#a8a8a8}
.routine-head .h-time{grid-area:time}.routine-head .h-mins{grid-area:mins}.routine-head .h-anchor{grid-area:anchor}.routine-head .h-min{grid-area:min}.routine-head .h-name,.routine-head .h-lane,.routine-head .h-del,.routine-head .h-end{display:none}
.routine-row{padding:0 0 8px;border-bottom:1px solid var(--border,#e2e2e2)}
.routine-row>*{min-width:0}
.routine-row input,.routine-row select{width:100%;padding:5px 6px}
.routine-row [data-routine-field=start]{grid-area:time}
.routine-row [data-routine-field=end]{grid-area:end}
.routine-row [data-routine-field=minutes]{grid-area:mins}
.routine-row [data-routine-field=title]{grid-area:name}
.routine-row [data-routine-field=lane]{grid-area:lane}
.routine-row .routine-anchor{grid-area:anchor;display:flex;align-items:center;gap:2px;font-size:12px;cursor:pointer}
.routine-row .routine-anchor input{width:auto}
.routine-row [data-routine-field=min]{grid-area:min}
.routine-row .icon-button{grid-area:del;min-width:36px;min-height:36px;border-radius:8px;background:none;border:1px solid transparent;color:#6b6b6b}
body.dark .routine-row .icon-button{color:#a8a8a8}
.routine-row .icon-button:hover{border-color:var(--border,#ddd);color:inherit}
@container (min-width:640px){.routine-head,.routine-row{grid-template-columns:92px 92px 64px minmax(0,1fr) 104px 34px 64px 36px 36px;grid-template-areas:"time end mins name lane anchor min cat del"}.routine-row .routine-edit{justify-content:center}.routine-row .routine-cat-name{display:none}.routine-head .h-end{display:block;grid-area:end}.routine-row{padding:0;border-bottom:0}.routine-head .h-name{display:block;grid-area:name}.routine-head .h-lane{display:block;grid-area:lane}}
.routine-paste{margin-top:10px;font-size:12px}
.routine-paste summary{cursor:pointer;font-weight:600}
.routine-paste textarea{display:block;width:100%;max-width:520px;min-height:110px;margin:6px 0 8px;padding:8px;border:1px solid #cfcfcf;border-radius:8px;background:#fff;color:#1d1d1f;font:inherit;font-size:13px;font-variant-numeric:tabular-nums}
.routine-paste textarea::placeholder{color:#8a8a8a}
body.dark .routine-paste textarea{background:#2a2a2c;color:#f2f2f2;border-color:#4a4a4a}
body.dark .routine-paste textarea::placeholder{color:#9a9a9a}
/* FCF-458 v2: a Todo assigned to an agent is planned in the agent's lane, not in yours (planCols in focus.js): the whole column while it meets
   nothing of yours, the right half where it overlaps your plan (All); always the right half (Side by side); the Agent column (Mac, Side by side
   with agent Sessions). Dashed like an agent Session, with 🤖; it keeps the hatched planned look and its own text colour (light + dark). */
.plan-block.agent-plan{border-style:dashed;border-left-style:dashed;z-index:1}
.plan-agent-icon{margin-right:3px}
.todo-agent-icon{display:inline-block;margin-right:5px;padding:0 4px;border-radius:5px;font-size:12px;line-height:17px;background:#e6efe9;border:1px dashed #6f9a86}
body.dark .todo-agent-icon{background:#24332c;border-color:#5f8c78}
/* FCF-449: a Todo the agent handed in (what it did, its link, Approve / Redo) and a Todo sent back (the note). Own backgrounds: readable on a selected or done row, light and dark */
.agent-review{margin:6px 0 2px;padding:8px 10px;border:1px dashed #6f9a86;border-radius:8px;background:#f1f7f3;color:#1d2b24}
.agent-review p{margin:0 0 6px;font-size:13px;line-height:1.4;white-space:pre-wrap;color:#1d2b24}
.agent-review-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.agent-review-actions button,.agent-redo-form button{min-height:28px;padding:3px 10px;border-radius:7px;border:1px solid #9bb8aa;background:#fff;color:#1d2b24;font-size:12px;font-weight:600;cursor:pointer}
.agent-review-actions .agent-approve{background:#0f5b45;border-color:#0f5b45;color:#fff}
.agent-link{margin-right:auto;font-size:12px;font-weight:600;color:#0f5b45;text-decoration:underline}
.agent-redo-form{display:flex;gap:6px;margin-top:6px}
.agent-redo-form input{flex:1;min-width:0;min-height:28px;padding:3px 8px;border-radius:7px;border:1px solid #9bb8aa;background:#fff;color:#1d2b24;font-size:13px}
.agent-redo-form input::placeholder{color:#5f7068}
.agent-note{display:inline-block;margin-top:4px;padding:3px 8px;border-radius:6px;font-size:12px;background:#fff4e0;color:#6e4300}
body.dark .agent-review{background:#1f2a25;border-color:#5f8c78;color:#e3eee8}
body.dark .agent-review p{color:#e3eee8}
body.dark .agent-review-actions button,body.dark .agent-redo-form button{background:#2b3a33;border-color:#5f8c78;color:#e3eee8}
body.dark .agent-review-actions .agent-approve{background:#1f7a5a;border-color:#1f7a5a;color:#fff}
body.dark .agent-link{color:#8fd9bd}
body.dark .agent-redo-form input{background:#141a17;border-color:#5f8c78;color:#e3eee8}
body.dark .agent-redo-form input::placeholder{color:#9db3a8}
body.dark .agent-note{background:#3a2c14;color:#ffd59a}
/* FCF-477: who does a parked thought. The suggested button is lit, the reason sits under the text; a parked Task the agent could do offers itself once. Selectors outrank the glass theme and body.dark .parked-text small */
.parked-row .parked-actions button.suggested,.parked-bulk button.suggested{border:1.5px solid #0f5b45;background:#e6efe9;color:#0f4a38;font-weight:600}
.parked-row .parked-text .owner-hint{display:block;margin-top:2px;font-size:11px;color:#3f5e52}
.todo-row .owner-chip{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px;padding:5px 8px;border:1px dashed #6f9a86;border-radius:8px;background:#f1f7f3;color:#1d2b24;font-size:12px}
.todo-row .owner-chip button{min-height:26px;padding:2px 9px;border-radius:7px;border:1px solid #0f5b45;background:#0f5b45;color:#fff;font-size:12px;font-weight:600;cursor:pointer}
.todo-row .owner-chip .owner-chip-no{padding:2px 7px;border-color:#9bb8aa;background:#fff;color:#1d2b24}
body.dark .parked-row .parked-actions button.suggested,body.dark .parked-bulk button.suggested{border-color:#8fd9bd;background:#1f3a31;color:#bfeedd}
body.dark .parked-row .parked-text .owner-hint{color:#9fc9b8}
body.dark .todo-row .owner-chip{background:#1f2a25;border-color:#5f8c78;color:#e3eee8}
body.dark .todo-row .owner-chip button{background:#1f7a5a;border-color:#1f7a5a;color:#fff}
body.dark .todo-row .owner-chip .owner-chip-no{background:#2b3a33;border-color:#5f8c78;color:#e3eee8}
/* FCF-478: the agent asks you something (amber, so it reads as "your turn"), the answer you gave, and the chip on the Session screen */
.agent-review.agent-ask{border-color:#c98a1a;background:#fff8ec;color:#3b2a0a}
.agent-review.agent-ask p{color:#3b2a0a;font-weight:600}
.agent-review.agent-ask .agent-option{border-color:#c98a1a;background:#fff;color:#3b2a0a}
.todo-row .agent-note.agent-answered{background:#eaf3ee;color:#1d4a37}
.parked-chip.agent-ask-chip{border-color:#c98a1a;background:#fff4e0;color:#5a3a00}
body.dark .agent-review.agent-ask{border-color:#c98a1a;background:#33270f;color:#ffe2b0}
body.dark .agent-review.agent-ask p{color:#ffe2b0}
body.dark .agent-review.agent-ask .agent-option{border-color:#c98a1a;background:#2a2010;color:#ffe2b0}
body.dark .todo-row .agent-note.agent-answered{background:#1f3a31;color:#bfeedd}
body.dark .parked-chip.agent-ask-chip{border-color:#c98a1a;background:#33270f;color:#ffd59a}
/* FCF-561 / FCF-563 (replaces FCF-500's column inside yours): the default calendar shares the LEFT half with the Calendar app's events
   (events · default calendar, a quarter each; the whole left half when 📅 is off or on the web), so yours keeps the right half and nothing
   sits on top of anything. --rq is one quarter, as the agent column of FCF-335 used to be. Labels at the top of each column. */
.timeline.routine-col,.cal-caps.routine-col{--rq:calc((var(--cal-half) - 2 * var(--cal-gap)) / 2)}
.timeline.routine-col.cal-col .cal-events{right:calc(100% - var(--cal-l) - var(--rq))}
.timeline.routine-col .plan-block.routine,.timeline.routine-col .plan-block.routine.beside{--ev-l:var(--cal-l);--ev-r:calc(100% - var(--cal-l) - var(--cal-half) + var(--cal-gap));left:var(--ev-l);right:var(--ev-r);width:auto;box-shadow:none;z-index:1}
.timeline.routine-col.cal-col .plan-block.routine,.timeline.routine-col.cal-col .plan-block.routine.beside{--ev-l:calc(var(--cal-l) + var(--rq) + var(--cal-gap))}
.cal-caps.routine-col .cap-mine{left:calc(var(--cal-l) + var(--cal-half) + 4px)}
.cal-caps.routine-col .cap-routine{left:calc(var(--cal-l) + 4px);color:#1f5f57;border-color:#9fd3cb}
.cal-caps.routine-col.cal-col .cap-routine{left:calc(var(--cal-l) + var(--rq) + var(--cal-gap) + 4px);max-width:calc(var(--rq) - 62px);overflow:hidden;text-overflow:ellipsis}
body.dark .cal-caps.routine-col .cap-routine{color:#9fe0d6;border-color:#2f6b63}
/* FCF-490/491: one bar to find, filter and sort on every To-do tab — own background and text in light and dark */
.todo-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:12px 0 4px;font-size:12px;color:#4a4a4a}
.todo-tools .todo-sort{margin:0}
.todo-search{flex:1 1 200px;display:flex;align-items:center;gap:6px;min-height:34px;padding:0 10px;border:1px solid #c4c4c4;border-radius:8px;background:#fff;color:#1d1d1f}
.todo-search svg{width:15px;height:15px;flex:none;color:#666}
.todo-search input{flex:1;min-width:0;border:0;outline:none;background:transparent;color:inherit;font:inherit;font-size:13px;padding:6px 0}
.todo-search input::placeholder{color:#767676}
.todo-search:focus-within{border-color:var(--chrome,#004736);box-shadow:0 0 0 2px color-mix(in srgb,var(--chrome,#004736) 25%,transparent)}
.todo-tools>select,.todo-clear{min-height:30px;max-width:170px;padding:4px 8px;border:1px solid #c4c4c4;border-radius:8px;background:#fff;color:#1d1d1f;font:inherit;font-size:12px;cursor:pointer}
.todo-pane mark{background:#ffe27a;color:#1d1d1f;border-radius:2px;padding:0 1px}
body.dark .todo-tools{color:#c8c8c8}
body.dark .todo-search,body.dark .todo-tools>select,body.dark .todo-clear{background:#2a2a2c;color:#f2f2f2;border-color:#555}
body.dark .todo-search svg{color:#bdbdbd}
body.dark .todo-search input::placeholder{color:#9a9a9a}
body.dark .todo-pane mark{background:#7a5b00;color:#fff}
/* FCF-554: Select beside the default-calendar label, the ticks on its blocks, the chosen bar under the calendar, a block dragged left over your column. */
.routine-tools{position:absolute;inset:0;pointer-events:none}
.routine-tools .routine-pick{pointer-events:auto;position:absolute;top:1px;right:calc(100% - var(--cal-l) - var(--cal-half) + var(--cal-gap) + 2px);margin:0;padding:0 6px;min-height:0;min-width:0;font:inherit;font-size:9px;font-weight:700;line-height:16px;border-radius:7px;border:1px solid #9fd3cb;background:var(--surface,#fff);color:#1f5f57;cursor:pointer;white-space:nowrap}
.routine-tools .routine-pick[aria-pressed=true]{background:#1f5f57;color:#fff;border-color:#1f5f57}
body.dark .routine-tools .routine-pick{background:var(--surface,#202020);color:#9fe0d6;border-color:#2f6b63}
body.dark .routine-tools .routine-pick[aria-pressed=true]{background:#4fc3b4;color:#10302c;border-color:#4fc3b4}
.plan-block.routine .routine-tick{float:left;margin:-1px 4px 0 -2px;font-style:normal;font-size:12px;line-height:1.2}
.plan-block.routine.picked{outline:2px solid var(--plan-color);outline-offset:-1px;background:color-mix(in srgb,var(--plan-color) 30%,var(--surface,#fff))}
body.dark .plan-block.routine.picked{background:color-mix(in srgb,var(--plan-color) 34%,var(--surface,#202020))}
.timeline.routine-col .plan-block.routine.dragging{z-index:5}
.plan-block.routine.dragging.to-mine{border-style:solid;box-shadow:0 4px 14px #0004;background:color-mix(in srgb,var(--plan-color) 36%,var(--surface,#fff))}
body.dark .plan-block.routine.dragging.to-mine{background:color-mix(in srgb,var(--plan-color) 40%,var(--surface,#202020))}
/* FCF-573: a Todo from a default-calendar block, dragged left out of your column: it goes back there on release */
.plan-block.dragging.to-routine{z-index:5;outline:2px dashed #1f5f57;outline-offset:1px;box-shadow:0 4px 14px #0004}
body.dark .plan-block.dragging.to-routine{outline-color:#9fe0d6}
.routine-pickbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 8px 0;padding:6px 8px;border-radius:8px;font-size:12px;background:#e6f4f1;color:#1f3a36;border:1px solid #9fd3cb}
.routine-pickbar .pick-count{flex:1 1 auto;font-weight:650}
.routine-pickbar button{margin:0;padding:4px 10px;min-height:0;border-radius:7px;border:1px solid #9fd3cb;background:#fff;color:#1f5f57;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.routine-pickbar button.pick-adopt{background:#1f5f57;color:#fff;border-color:#1f5f57}
.routine-pickbar button:disabled{opacity:.5;cursor:default}
body.dark .routine-pickbar{background:#1b2f2c;color:#dff3ef;border-color:#2f6b63}
body.dark .routine-pickbar button{background:#243b38;color:#9fe0d6;border-color:#2f6b63}
body.dark .routine-pickbar button.pick-adopt{background:#4fc3b4;color:#10302c;border-color:#4fc3b4}
/* FCF-560: the range being dragged on an empty part of the day — its own background and text in light and dark */
.new-range{position:absolute;left:var(--cal-l,46px);right:var(--cal-r,8px);z-index:6;pointer-events:none;box-sizing:border-box;border:1.5px dashed #2f6fd6;border-radius:4px;background:rgba(47,111,214,.16);color:#123a7a;padding:2px 6px;font-size:11px;font-weight:650;line-height:1.3}
.new-range small{font:inherit}
body.ranging,body.ranging *{-webkit-user-select:none;user-select:none;cursor:ns-resize}
body.dark .new-range{border-color:#7fb0ff;background:rgba(127,176,255,.22);color:#dbe8ff}
/* FCF-585: default-calendar blocks already behind you: faded at their due time. FCF-624: they take taps and drags (make it up, add to my calendar) */
.plan-block.routine.past{opacity:.5;border-style:dotted;box-shadow:none;z-index:0;cursor:pointer;transition:opacity .12s}
.plan-block.routine.past:hover,.plan-block.routine.past:focus-visible,.plan-block.routine.past.dragging{opacity:.85}
/* FCF-586: ⚡ Switch sheet — rows with their own background so text reads on light and dark dialogs alike */
.switch-sheet{display:grid;gap:10px}
.switch-note{padding:0;margin:0}
.switch-sheet #switch-q{font-size:14px;padding:10px 12px;border-radius:10px;border:1px solid #d4d4d4;background:#fff;color:#222}
.switch-sheet #switch-q::placeholder{color:#8a8a8a}
.switch-list{display:grid;gap:12px;max-height:min(60vh,520px);overflow:auto}
.switch-group h3{margin:0 0 6px;font-size:11px;font-weight:600;color:#6b6b6b}
.switch-row{display:grid;grid-template-columns:20px 8px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:48px;padding:8px 10px;margin:0 0 4px;border-radius:10px;text-align:left;background:#fff;color:#222;border:1px solid #e4e4e4}
.switch-row:hover,.switch-row.sel{border-color:var(--accent);background:#f3f8e6}
.switch-row kbd{font:600 11px -apple-system,BlinkMacSystemFont,sans-serif;color:#6b6b6b;text-align:center}
.switch-dot{width:8px;height:8px;border-radius:50%;background:var(--c,#999)}
.switch-main{display:grid;gap:2px;min-width:0}
.switch-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.switch-main small{font-size:11px;color:#6b6b6b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.switch-min{font-size:12px;font-weight:600;color:#444;font-variant-numeric:tabular-nums}
.switch-empty{padding:4px 0}
body.dark .switch-sheet #switch-q{background:#2b2b2b;color:#eee;border-color:#4a4a4a}
body.dark .switch-sheet #switch-q::placeholder{color:#9a9a9a}
body.dark .switch-group h3,body.dark .switch-main small,body.dark .switch-row kbd{color:#a8a8a8}
body.dark .switch-row{background:#2b2b2b;color:#eee;border-color:#3d3d3d}
body.dark .switch-row:hover,body.dark .switch-row.sel{background:#33401c;border-color:var(--accent)}
body.dark .switch-min{color:#ddd}
@media (hover:none){.switch-row kbd{display:none}.switch-row{grid-template-columns:8px minmax(0,1fr) auto;min-height:54px}}
/* FCF-588: the list scrolls to the bottom of the sheet; the key hint is for keyboards only */
.switch-list{max-height:min(66dvh,640px);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@media (hover:none){.switch-keys{display:none}}
/* FCF-589: with ⚡ and Daily beside it the idle row (Break · Start Session · ⚡ · Daily · More) must still fit a 375 pt phone */
@media (max-width:440px){
 .timer-controls:has(.start-button){gap:8px;max-width:calc(100% - 12px)}
 .timer-controls:has(.start-button)>.circle,html.glass .timer-controls:has(.start-button)>.circle{flex:none;width:46px!important;height:46px!important}
 .timer-controls:has(.start-button)>.circle svg{width:22px;height:22px}
 html.glass .timer-controls:has(.start-button)>.start-button,.timer-controls:has(.start-button)>.start-button{padding:13px 15px!important;font-size:15px;min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
}
/* Block details: the category's dot on a default-calendar block and on ✎ in Settings; the sheet's hint and two save buttons. */
.routine-cat{display:inline-block;width:8px;height:8px;margin:0 5px 1px 0;border-radius:50%;background:var(--cat,#999);vertical-align:middle;box-shadow:0 0 0 1px #0002}
body.dark .routine-cat{box-shadow:0 0 0 1px #fff4}
/* ✎ on its own line on a phone, with the category's name; one 36px column on a wide screen */
.routine-row .icon-button.routine-edit{grid-area:cat;display:flex;align-items:center;justify-content:flex-start;gap:6px;min-height:32px;padding:0 8px;font-size:12px;border-color:var(--border,#e2e2e2)}
.routine-row .routine-edit .routine-cat{margin:0;flex:none}
.routine-row .routine-cat-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.block-cat-hint{margin:-4px 0 8px}
.block-anchor{align-self:end;padding-bottom:8px}
.dialog .pair.block-times{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* Add from a list: a wider sheet, one card per Todo (tick, title, category · minutes · 📌 time, why, its description), a bulk category picker. */
.dialog:has(.import-sheet){width:min(760px,100%)}
.import-modes{margin:0 0 6px}
.import-modes button{padding:4px 12px}
.import-sum{padding:4px 2px}
.import-replace{margin:2px 0 0!important;font-weight:600}
.import-replace-note{padding:0 2px 6px 28px}
.import-bulk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 8px}
.import-bulk .check-row{margin:0}
.import-bulk select{flex:1 1 220px;min-width:0}
.import-rows{display:grid;gap:8px;max-height:min(58vh,560px);overflow:auto;padding:2px;overscroll-behavior:contain}
.import-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:10px;border:1px solid var(--border,#e2e2e2);border-radius:12px;background:var(--surface,#fff)}
.import-row.off{opacity:.45}
.import-row>input[type=checkbox]{margin-top:9px;width:18px;height:18px}
.import-main{display:grid;gap:6px;min-width:0}
.import-title{width:100%;font-weight:600;padding:6px 8px}
.import-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.import-meta select{flex:1 1 180px;min-width:0;max-width:100%;padding:5px 6px}
.import-min input{width:64px;padding:5px 6px;text-align:right}
.import-pin{display:inline-flex;align-items:center;gap:4px}
.import-pin input{padding:4px 6px}
.import-why{font-size:11px;color:#6b6b6b}
body.dark .import-why{color:#a8a8a8}
.import-desc{margin:0;font-size:12px;line-height:1.45;white-space:pre-line;overflow-wrap:anywhere;color:#555;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden}
body.dark .import-desc{color:#c8c8cc}
.bulk-rows .import-row{grid-template-columns:auto minmax(0,1fr);align-items:center;cursor:pointer}
.bulk-rows .import-row>input[type=checkbox]{margin-top:0}
.todo-bulk{white-space:nowrap;min-height:30px;padding:4px 10px;border:1px solid #c4c4c4;border-radius:8px;background:#fff;color:#1d1d1f;font:inherit;font-size:12px;cursor:pointer}
body.dark .todo-bulk{background:#2a2a2c;color:#f2f2f2;border-color:#555}
html.glass .todo-bulk{background:var(--g-card);color:var(--g-ink);border-color:color-mix(in srgb,var(--g-ink) 22%,transparent)}
html.glass body.dark .todo-bulk{background:#2a2a2c;color:#f2f2f2}
@media(max-width:600px){.import-rows{max-height:52vh}.import-meta select{flex-basis:100%}}
/* FCF-605: Select mode on the To-do list — a tick box in place of ⋮⋮, the row's own buttons step aside, a head with the count, an action bar pinned to the bottom. Every part carries its own background so it reads in light, dark and Flow Glass. */
.todo-pane.picking .todo-handle,.todo-pane.picking .todo-row>input[data-todo-done],.todo-pane.picking .todo-row>button,.todo-pane.picking .todo-row>.todo-actions{display:none}
.todo-pane.picking .todo-row{cursor:pointer}
.todo-row .todo-pick{flex:none;width:20px;height:20px;margin:0;accent-color:#1f5f57;cursor:pointer}
.todo-row.picked{border-color:#3d9488;background:#e3f3ef;color:#12302c}
.todo-row.picked .todo-meta,.todo-row.picked .todo-rest{color:#2f4d49}
body.dark .todo-row.picked{border-color:#4fc3b4;background:#183632;color:#eaf7f4}
body.dark .todo-row.picked .todo-meta,body.dark .todo-row.picked .todo-rest{color:#b9dcd6}
html.glass .todo-row.picked{border-color:#3d9488!important;background:#e3f3ef!important;color:#12302c!important}
html.glass .todo-row.picked .todo-meta,html.glass .todo-row.picked .todo-rest,html.glass .todo-row.picked .todo-progress{color:#2f4d49!important}
html.glass body.dark .todo-row.picked{border-color:#4fc3b4!important;background:#183632!important;color:#eaf7f4!important}
html.glass body.dark .todo-row.picked .todo-meta,html.glass body.dark .todo-row.picked .todo-rest,html.glass body.dark .todo-row.picked .todo-progress{color:#b9dcd6!important}
.todo-pick-toggle{white-space:nowrap;min-height:30px;padding:4px 10px;border:1px solid #9fd3cb;border-radius:8px;background:#fff;color:#1f5f57;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.todo-pick-toggle[aria-pressed=true]{background:#1f5f57;color:#fff;border-color:#1f5f57}
body.dark .todo-pick-toggle{background:#243b38;color:#9fe0d6;border-color:#2f6b63}
body.dark .todo-pick-toggle[aria-pressed=true]{background:#4fc3b4;color:#10302c;border-color:#4fc3b4}
.todo-pickhead{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0;padding:6px 8px;border-radius:8px;font-size:13px;background:#e6f4f1;color:#1f3a36;border:1px solid #9fd3cb}
.todo-pickhead .pick-count,.todo-pickbar .pick-count{flex:1 1 auto;font-weight:650}
.todo-pickhead button,.todo-pickbar button{margin:0;padding:5px 10px;min-height:0;min-width:0;border-radius:7px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.todo-pickhead button{border:1px solid #9fd3cb;background:#fff;color:#1f5f57}
.todo-pickhead .pick-done{background:#1f5f57;color:#fff;border-color:#1f5f57}
.todo-pickhead button:disabled,.todo-pickbar button:disabled{opacity:.5;cursor:default}
body.dark .todo-pickhead{background:#1b2f2c;color:#dff3ef;border-color:#2f6b63}
body.dark .todo-pickhead button{background:#243b38;color:#9fe0d6;border-color:#2f6b63}
body.dark .todo-pickhead .pick-done{background:#4fc3b4;color:#10302c;border-color:#4fc3b4}
.todo-pickbar{position:sticky;bottom:8px;z-index:6;display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:12px 0 4px;padding:6px 8px;border-radius:10px;background:#12332f;color:#f2fbf9;border:1px solid #2f6b63;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.todo-pickbar button{border:1px solid #3f7f76;background:#1f4a45;color:#f2fbf9;padding:4px 8px;font-size:12px}
.todo-pickbar .pick-count{flex:0 0 100%;font-size:12px}
.todo-pickbar button[data-todo-pick-act=delete]{background:#9b2c22;border-color:#c4554a;color:#fff}
body.dark .todo-pickbar{background:#0c2321;border-color:#4fc3b4}
@media(max-width:600px){.todo-pickbar{gap:4px;padding:6px}.todo-pickbar .pick-count{flex-basis:100%}.todo-pickbar button{flex:1 1 auto;padding:6px 6px;font-size:12px}}
@media(pointer:coarse){.todo-pane .todo-row{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}}
/* FCF-616: Daily Sessions — a bar (view · 📌 Pin · grouping chips), groups of colour tiles like a phone's home screen, a list, or
   folders. Every piece sets its own text and background so it reads on the light and the dark dialog. */
.daily-bar{position:sticky;top:0;z-index:2;min-width:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:0 0 8px;background:#fafafa}
.daily-views{flex:none;display:inline-flex;border:1px solid #d4d4d4;border-radius:9px;overflow:hidden;background:#fff}
.daily-views button{padding:6px 10px;font-size:12px;white-space:nowrap;color:#333;background:#fff;border:0}
.daily-views button+button{border-left:1px solid #e2e2e2}
.daily-views button[aria-pressed=true]{background:var(--accent);color:var(--on-accent,#fff)}
.daily-edit{justify-self:end;padding:6px 10px;font-size:12px;border-radius:9px;border:1px solid #d4d4d4;background:#fff;color:#333}
.daily-edit[aria-pressed=true]{background:#333;color:#fff;border-color:#333}
.daily-by{flex:1 1 100%;min-width:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.daily-by::-webkit-scrollbar{display:none}
/* FCF-623: a mouse can't scroll the chip row sideways, so on a Mac every chip wraps into view; on a phone the row still
   scrolls and its right edge fades to say there are more. */
@media (hover:hover) and (pointer:fine){.daily-by{flex-wrap:wrap;overflow:visible}}
/* FCF-644: on a phone too the Group-by chips wrap onto a second line instead of sliding sideways */
@media (hover:none),(pointer:coarse){.daily-by{flex-wrap:wrap;overflow:visible}}
.daily-by button{flex:none;padding:6px 11px;border-radius:999px;font-size:12px;white-space:nowrap;border:1px solid #d4d4d4;background:#fff;color:#333}
.daily-by button[aria-pressed=true]{background:var(--accent);color:var(--on-accent,#fff);border-color:var(--accent)}
.daily-hint,.daily-note{flex:1 1 100%;margin:0;padding:0;font-size:11px;color:#6b6b6b}
.daily-group{scroll-margin-top:96px;margin:0 0 6px}
.daily-head{display:flex;align-items:center;gap:6px;margin:6px 0 6px;font-size:12px;font-weight:650;color:#3a3a3a}
.daily-head small{font-weight:400;color:#6b6b6b;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.daily-n{margin-left:auto;flex:none;font-size:11px;font-weight:600;color:#6b6b6b;font-variant-numeric:tabular-nums}
.daily-now{font-style:normal;font-size:10px;font-weight:700;padding:1px 6px;border-radius:999px;background:var(--accent);color:var(--on-accent,#fff)}
.daily-mini-btn{flex:none;padding:3px 8px;font-size:11px;border-radius:7px;border:1px solid #d4d4d4;background:#fff;color:#333}
.daily-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:10px 6px}
.daily-tile{display:grid;justify-items:center;align-content:start;gap:4px;padding:4px 2px;border:0;border-radius:12px;background:transparent;color:#222;min-width:0;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.daily-tile:hover,.daily-tile.sel{background:#ececec}
.tile-icon{position:relative;display:grid;place-items:center;width:54px;height:54px;border-radius:14px;font-size:26px;line-height:1;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%),var(--c,#888);color:var(--ink,#fff);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.tile-icon b{font:700 18px -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.5px;color:var(--ink,#fff)}
.tile-icon kbd{position:absolute;left:-4px;top:-4px;min-width:16px;height:16px;padding:0 3px;border-radius:8px;font:700 10px/16px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#333;box-shadow:0 0 0 1px #0002}
.tile-pin{position:absolute;right:-6px;top:-6px;font-size:14px;font-style:normal;line-height:1;filter:drop-shadow(0 1px 1px #0004)}
.daily-tile.editing .tile-pin:not(.on){opacity:.35;filter:grayscale(1)}
.daily-tile.editing .tile-icon{animation:daily-wiggle .3s ease-in-out infinite alternate}
@keyframes daily-wiggle{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
@media (prefers-reduced-motion:reduce){.daily-tile.editing .tile-icon{animation:none}}
.tile-name{width:100%;font-size:11px;line-height:1.25;font-weight:550;text-align:center;color:#222;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.daily-tile small{font-size:10px;color:#6b6b6b;font-variant-numeric:tabular-nums}
.daily-folders{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));align-items:start;gap:12px}
.daily-folder{display:grid;align-content:start;gap:6px;min-width:0}
.folder-card{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:6px;padding:8px;border-radius:18px;background:#fff;border:1px solid #e4e4e4}
.daily-folder.now .folder-card{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.daily-tile.mini{padding:2px 0;gap:2px}
.daily-tile.mini .tile-icon{width:42px;height:42px;border-radius:11px;font-size:20px}
.daily-tile.mini .tile-icon b{font-size:14px}
.daily-tile.mini .tile-name{font-size:10px;-webkit-line-clamp:1}
.folder-more{display:grid;place-items:center;align-self:start;justify-self:center;width:42px;height:42px;margin-top:2px;border-radius:11px;font:700 13px -apple-system,BlinkMacSystemFont,sans-serif;background:#ececec;color:#333;border:0}
.folder-name{font-size:12px;font-weight:600;text-align:center;background:transparent;border:0;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.daily-add-group{width:100%;margin-top:6px;padding:10px;border-radius:10px;border:1px dashed #b9b9b9;background:#fff;color:#333;font-size:13px}
.daily-pick-list{display:grid;gap:2px;max-height:min(46dvh,420px);overflow:auto;margin-top:6px}
.daily-pick{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;background:#fff;color:#222;font-size:13px;border:1px solid #ececec}
.daily-pick input{width:auto!important;flex:none}
.daily-group-name{grid-template-columns:minmax(0,1fr) 84px!important}
body.dark .daily-bar{background:#222}
body.dark .daily-views,body.dark .daily-views button,body.dark .daily-edit,body.dark .daily-by button,body.dark .daily-mini-btn,body.dark .daily-add-group{background:#2b2b2b;color:#eee;border-color:#4a4a4a}
body.dark .daily-views button[aria-pressed=true],body.dark .daily-by button[aria-pressed=true]{background:var(--accent);color:var(--on-accent,#fff);border-color:var(--accent)}
body.dark .daily-edit[aria-pressed=true]{background:#eee;color:#1d1d1f;border-color:#eee}
body.dark .daily-head{color:#ddd}
body.dark .daily-head small,body.dark .daily-n,body.dark .daily-hint,body.dark .daily-note,body.dark .daily-tile small{color:#a8a8a8}
body.dark .daily-tile{color:#eee}
body.dark .daily-tile:hover,body.dark .daily-tile.sel{background:#333}
body.dark .tile-name,body.dark .folder-name{color:#eee}
body.dark .tile-icon kbd{background:#1d1d1f;color:#eee;box-shadow:0 0 0 1px #fff3}
body.dark .folder-card{background:#2b2b2b;border-color:#3d3d3d}
body.dark .folder-more{background:#3a3a3a;color:#eee}
body.dark .daily-pick{background:#2b2b2b;color:#eee;border-color:#3d3d3d}
@media (hover:none){.tile-icon kbd{display:none}.daily-view-name{display:none}}
@media (max-width:440px){.daily-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 4px}.daily-folders{grid-template-columns:1fr 1fr;gap:10px}.tile-icon{width:52px;height:52px}}
/* FCF-625: the Daily Sessions library inside Add Todo · Add Session · Add Event — 📚 toggle, quick chips, the panel of tiles.
   Each piece sets its own text and background so it reads on the light and the dark dialog. */
.lib-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-4px 0 10px}
.lib-open{flex:none;display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid #d4d4d4;background:#f4f4f4;color:#222}
.lib-open[aria-expanded=true]{background:var(--accent);color:var(--on-accent,#fff);border-color:var(--accent)}
.lib-chips{display:contents}
.lib-chip{display:inline-flex;align-items:center;gap:6px;max-width:200px;min-width:0;padding:3px 9px 3px 3px;border-radius:999px;font-size:12px;border:1px solid #dcdcdc;background:#fff;color:#222}
.lib-chip:hover{background:#f0f0f0}
.lib-glyph{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:7px;font-size:13px;line-height:1;background:var(--c,#888);color:var(--ink,#fff)}
.lib-glyph b{font:700 9px -apple-system,BlinkMacSystemFont,sans-serif;color:var(--ink,#fff)}
.lib-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lib-chip small{flex:none;font-size:10px;color:#6b6b6b;font-variant-numeric:tabular-nums}
.lib-panel{max-height:min(44dvh,380px);overflow:auto;margin:-4px 0 12px;padding:4px 10px 8px;border-radius:14px;border:1px solid #e2e2e2;background:#fafafa;color:#222;overscroll-behavior:contain}
.lib-panel .daily-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px 4px}
.lib-panel .settings-note{margin:8px 0;color:#6b6b6b}
body.dark .lib-open,body.dark .lib-chip{background:#2b2b2b;color:#eee;border-color:#4a4a4a}
body.dark .lib-chip:hover{background:#353535}
body.dark .lib-open[aria-expanded=true]{background:var(--accent);color:var(--on-accent,#fff);border-color:var(--accent)}
body.dark .lib-chip small,body.dark .lib-panel .settings-note{color:#a8a8a8}
body.dark .lib-panel{background:#1a1a1a;color:#eee;border-color:#3d3d3d}
/* FCF-626: Select mode v2 — Thoughts rows tick like Todo rows, the bar always has Select all / Select none, a finger can paint ticks down the tick column, touch screens are told how to pick a range. */
.parked-row.pick-row{cursor:pointer;align-items:center;gap:9px}
.parked-row.pick-row .parked-actions{display:none}
.parked-row.pick-row.picked{border-color:#3d9488;background:#e3f3ef;color:#12302c}
.parked-row.pick-row.picked small{color:#2f4d49}
body.dark .parked-row.pick-row.picked{border-color:#4fc3b4;background:#183632;color:#eaf7f4}
body.dark .parked-row.pick-row.picked small{color:#b9dcd6}
html.glass .parked-row.pick-row.picked{border-color:#3d9488!important;background:#e3f3ef!important;color:#12302c!important}
html.glass body.dark .parked-row.pick-row.picked{border-color:#4fc3b4!important;background:#183632!important;color:#eaf7f4!important}
.parked-row .todo-pick{flex:none;width:20px;height:20px;margin:0;accent-color:#1f5f57;cursor:pointer}
.todo-pane.picking .todo-pick{touch-action:none}
.todo-pickbar .pick-all{background:#f2fbf9;color:#12332f;border-color:#f2fbf9}
.todo-pickbar .pick-hint{flex:0 0 100%;font-size:11px;color:#bfe3dc}
@media(pointer:fine){.todo-pickbar .pick-hint{display:none}}
/* FCF-630: a Todo cut into parts — the part number on its calendar block, the split switch + smallest part in Edit Todo. */
.plan-block .plan-part{position:absolute;bottom:5px;right:6px;padding:0 5px;border-radius:6px;font:800 10px/15px -apple-system,BlinkMacSystemFont,sans-serif;background:rgba(0,0,0,.55);color:#fff}
.todo-split{align-items:end}
.todo-split .check-row{margin:0 0 8px}
.todo-parts-note{margin:-4px 0 10px}