@font-face{font-family:"JetBrains Mono";src:url("vendor/fonts/JetBrainsMono-Variable.ttf") format("truetype");font-style:normal;font-weight:100 800;font-display:swap}

:root{font-family:"hanken-grotesk",sans-serif;color:#30382f;background:#f6f5f0;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:1px solid #d4d4d4;outline-offset:2px}header{height:100px;max-width:1200px;margin:auto;padding:0 42px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:650;letter-spacing:-1px}.logo{background:#63754a;color:#fff;width:29px;height:29px;display:grid;place-items:center;border-radius:9px;font-size:19px}.local{font-size:12px;color:#72796c;display:flex;align-items:center;gap:8px}.dot{height:6px;width:6px;background:#879b68;border-radius:50%}main{max-width:748px;padding:56px 24px 30px;margin:auto}.eyebrow{text-transform:uppercase;letter-spacing:2px;font-size:10px;font-weight:650;color:#838977;margin-bottom:22px}h1{font-size:50px;letter-spacing:-2.4px;line-height:1.1;font-weight:500;margin:0 0 15px}.subtitle{font-size:15px;color:#85897c;line-height:1.6;margin:0}.summary{margin:38px 0 30px;display:flex;align-items:center;gap:14px;font-size:12px;color:#7e8475}.track{width:90px;height:4px;background:#e3e6db;border-radius:10px;overflow:hidden}.progress{height:100%;background:#849664;transition:width .25s}form.add{background:white;border:1px solid #dfE3d6;border-radius:12px;display:flex;padding:9px 10px 9px 20px;gap:14px;box-shadow:0 3px 6px #333b2d03}.plus{font-size:25px;color:#99a28b;align-self:center;font-weight:300}input{min-width:0}#new,#new-bottom{flex:1;border:0;background:transparent;outline:0;font-size:14px;color:#30382f}#new::placeholder{color:#a0a395}.add button,.save{border:0;background:#65774d;color:white;border-radius:7px;padding:12px 18px;font-size:12px;font-weight:550}.list-head{display:flex;justify-content:space-between;align-items:center;margin:35px 0 13px;font-size:11px;color:#929887}.list-head strong{font-size:11px;letter-spacing:1.3px;color:#68705e;font-weight:600}ul{list-style:none;margin:0;padding:0}.task{display:flex;align-items:center;gap:15px;padding:21px 4px;border-bottom:1px solid #e5e6de;min-height:70px}.check{appearance:none;flex:none;margin:0;width:21px;height:21px;border:1.5px solid #cdd2c3;border-radius:7px;background:transparent;cursor:pointer;display:grid;place-content:center}.check:checked{background:#8a9a73;border-color:#8a9a73}.check:checked:after{content:'✓';color:white;font-size:14px}.label{flex:1;font-size:14px;line-height:1.5;overflow-wrap:anywhere}.done .label{color:#a0a593;text-decoration:line-through}.actions{display:flex;gap:4px}.icon{background:none;border:0;color:#a0a593;display:grid;place-items:center;width:32px;height:32px;border-radius:6px}.icon:hover{background:#eaece3;color:#52633e}.icon.delete:hover{color:#ac6250;background:#f2e7e2}svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.edit{flex:1;border:1px solid #d4d4d4;border-radius:6px;padding:9px;width:100%;background:#fff;color:#30382f}.task.editing{flex-wrap:wrap}.save{padding:9px 12px}.cancel{font-size:12px;border:0;background:transparent;color:#77816b;padding:8px}.below{margin-top:22px;display:flex;justify-content:space-between;font-size:11px;color:#969b8c}.below button{border:0;background:none;padding:0;color:#838c76;font-size:11px}.below button:hover{text-decoration:underline}.empty{text-align:center;padding:48px 20px;color:#8c947e;font-size:14px;line-height:1.8}.note{margin-top:70px;border-top:1px solid #e4e6dc;padding-top:23px;display:flex;gap:12px;align-items:center}.note-mark{font-family:"hanken-grotesk",sans-serif;font-size:32px;color:#a3ad90}.note p{font-size:12px;color:#8c927f;line-height:1.8;margin:0}footer{text-align:center;font-size:10px;letter-spacing:1.4px;color:#a0a693;margin:65px 24px 26px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:13px 18px;background:#34402c;color:#fff;border-radius:9px;box-shadow:0 5px 25px #0002;font-size:12px;display:flex;gap:18px;align-items:center;max-width:92vw}.toast[hidden]{display:none}.toast button{background:none;border:0;color:#d9e5bd;font-size:12px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(min-width:800px){.actions{opacity:0}.task:hover .actions,.task:focus-within .actions{opacity:1}}@media(max-width:600px){header{height:80px;padding:0 24px}.brand{font-size:21px}.local{font-size:10px}main{padding-top:35px}h1{font-size:40px}.subtitle{font-size:14px}.add button{padding:12px}.task{gap:12px}.label{font-size:12px}.note{margin-top:50px}.eyebrow{font-size:9px}.summary{margin-top:30px}.icon{width:29px}.below{gap:15px}footer{margin-top:45px}}

/* Minimal list */
:root{background:#fff;color:#34372f}
main{max-width:660px;padding:0 24px;margin:clamp(40px,12vh,120px) auto 60px}
form.add{padding:8px 0 16px;border:0;border-bottom:1px solid #dfe2d8;border-radius:0;box-shadow:none;background:transparent;gap:12px}
#new,#new-bottom{font-size:16px;padding:8px 0}
.add button{font-size:24px;line-height:1;width:36px;height:36px;padding:0;background:#edf0e7;color:#61734b;border-radius:8px;font-weight:400}
ul{margin-top:0}
.task{padding:17px 0;min-height:65px;gap:14px}
.label{font-size:15px}
.check{width:19px;height:19px;border-radius:50%}
.empty{padding:35px 0;font-size:12px;text-align:left;color:#a1a696}
@media(max-width:600px){main{margin-top:40px;padding:0 22px}.label{font-size:14px}.task{gap:12px}.actions{gap:0}}
.add.bottom{margin-top:0;height:var(--list-row-height);min-height:var(--list-row-height);padding:0;border-bottom:1px solid #ededed} 
.bullet{font:20px "hanken-grotesk",sans-serif;appearance:none;border:0;background:transparent;color:#626d57;flex:none;width:24px;height:30px;text-align:center;padding:0;cursor:pointer;border-radius:4px}.bullet:hover{background:#edf0e7}.bullet:focus-visible{outline:1px solid #d4d4d4;outline-offset:2px}.bullet option{font:14px "hanken-grotesk",sans-serif;color:#34372f;background:#fafaf8}form.add{align-items:center;gap:14px}.task{gap:14px}.done .label{text-decoration:line-through;color:#a0a593}
.bullet{display:grid;place-items:center;line-height:30px}.task-marker:not(:empty){color:#929c86}.task-marker:empty:hover::after,.task-marker:empty:focus-visible::after{content:"×";color:#a0a995} .label{border:0;background:none;text-align:left;padding:0;color:inherit;font-family:inherit;cursor:text} 
:root{color:#222}
#new,#new-bottom,.edit,.label,.bullet,.task-marker:not(:empty),.icon,.cancel,.empty{color:#222}
.task .icon:hover{color:#222}
.done,.done .label,.done .bullet,.done .task-marker:not(:empty),.done .icon,.done .icon:hover{color:#ccc}
.task-marker:empty:hover::after,.task-marker:empty:focus-visible::after{color:#222}
.save{background:transparent;color:#222}
.label[contenteditable]{outline:none;white-space:pre-wrap;min-width:0;overflow-wrap:anywhere} 
.task:not(.done) .task-marker[data-priority="orange"]{color:#f28c18}
.task:not(.done) .task-marker[data-priority="red"]{color:#dc3434}
.task:not(.done) .task-marker[data-priority="gray"]{color:#ccc}
.task:not(.done):has(.task-marker[data-priority="gray"]) .label{color:#ccc} html.dragging,html.dragging *{cursor:grabbing!important} .task:not(.done) .task-marker[data-priority="orange"],.task:not(.done) .task-marker[data-priority="red"]{font-size:30px} 
.task:not(.done) .task-marker[data-priority="gray"],
.task:not(.done):has(.task-marker[data-priority="gray"]) .label,
.task:not(.done):has(.bullet[data-kind="note"]) .label,
.task:not(.done):has(.bullet[data-kind="note"]) .bullet,
.task:not(.done):has(.bullet[data-kind="note"]) .icon,
.task:not(.done):has(.task-marker[data-priority="gray"]) .icon{color:#a3a3a3}
.task,form.add{border-color:#ededed}

.task:not(.done) .task-marker[data-priority]{font-size:0}
.task:not(.done) .task-marker::before{content:"";display:block;box-sizing:border-box;width:12px;height:12px;border:1px solid currentColor;border-radius:50%;background:transparent}
.task:not(.done) .task-marker[data-priority="orange"]::before{width:12px;height:12px;background:rgb(242 140 24 / 20%)}
.task:not(.done) .task-marker[data-priority="red"]::before{width:12px;height:12px;background:rgb(220 52 52 / 20%)}

.task-marker{position:relative}
.task:not(.done) .task-marker::before{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-width:1.5px}

.bullet[data-kind="event"]{position:relative;font-size:0}
.bullet[data-kind="event"]::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-sizing:border-box;width:12px;height:12px;border:1.5px solid currentColor;border-radius:50%;background:transparent}

.task:not(.done) .task-marker[data-priority="normal"]{color:#a3a3a3}
.task:not(.done) .task-marker[data-priority="blue"]{color:#3984dd}
.task:not(.done) .task-marker[data-priority="blue"]::before{background:rgb(57 132 221 / 20%)}

.task:not(.done) .task-marker::before,.bullet[data-kind="event"]::before{border-width:1.5px}
.task:not(.done) .task-marker[data-priority="blue"]::before,
.task:not(.done) .task-marker[data-priority="orange"]::before,
.task:not(.done) .task-marker[data-priority="red"]::before{border-width:1.5px}

.task{position:relative}
.task .actions{position:absolute;left:100%;top:0;bottom:0;width:40px;padding-left:8px;display:flex;align-items:center;justify-content:center}
@media(max-width:740px){main{padding-left:22px;padding-right:56px}}

.task-marker,.task .icon{border-radius:0}.task .icon{width:32px;height:32px;flex-shrink:0}
.task-marker{height:24px}
.task-marker:hover,.task .icon:hover,.task .icon.delete:hover{background:#f5f5f5}
.task:not(.done):has(.task-marker[data-priority="normal"]) .label,
.task:not(.done):has(.bullet[data-kind="note"]) .label{color:#666}

.task-marker,.task .icon{width:32px;height:32px;border-radius:6px}
.task-marker{margin-left:-4px;margin-right:-4px}
.task:not(.done) .task-marker[data-priority="gray"]{color:#ccc} 
.task-marker,.task .icon{display:flex;align-items:center;justify-content:center;padding:0;line-height:1}
.task .icon svg{display:block;flex-shrink:0}
.done .task-marker{font-size:0}
.done .task-marker::before,.done .task-marker::after{content:none}
.done .task-marker svg{display:block;width:18px;height:18px;flex-shrink:0}
.task .label{position:relative;top:-1px} .task,.task .label{cursor:grab}.task .label:focus{cursor:text} .task:has(.label:focus){cursor:default}.task .label:focus{cursor:text;user-select:text} 
main{padding-bottom:80px}
footer.bottom-bar{position:fixed;bottom:0;left:0;right:0;z-index:10;background:#fff;margin:0;padding:14px 0 calc(14px + env(safe-area-inset-bottom,0px));letter-spacing:normal;text-align:initial}
.bottom-inner{max-width:660px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between}
.footer-button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;color:#222;border:0;border-radius:6px;padding:0;line-height:1;cursor:pointer}
.footer-button:hover{background:#f5f5f5}
.footer-button svg{display:block;width:15px;height:15px;flex-shrink:0}
@media(max-width:740px){.bottom-inner{padding-left:22px;padding-right:56px}}
.top-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px} .bottom-inner{justify-content:center;gap:16px;padding-left:24px;padding-right:24px} .top-actions{display:flex;align-items:center;gap:8px} 
.footer-button{color:#a3a3a3}
.top-bar{display:grid;grid-template-columns:minmax(32px,1fr) auto minmax(72px,1fr);column-gap:8px}
.top-bar>.footer-button{justify-self:start}
.top-actions{justify-self:end}
.center-actions{display:flex;align-items:center;justify-content:center;gap:4px}
.today-button{flex-direction:column;gap:1px;font-variant-numeric:tabular-nums}
.today-day{font-size:12px;font-weight:400;line-height:13px}
.today-month{font-size:8px;line-height:9px}
@media(max-width:360px){.top-bar{grid-template-columns:1fr 1fr;row-gap:8px}.center-actions{grid-column:1/-1;grid-row:2}.top-actions{grid-column:2;grid-row:1}}
.footer-button svg,.task .icon svg{stroke-width:2} .today-button{gap:0}.today-day{line-height:1;font-size:12px} .footer-button[aria-label="Now"]{color:#f28c18}.footer-button.today-button{color:#dc3434} .footer-button[aria-label="Now"] svg{fill:rgb(242 140 24 / 20%)} 
.footer-button.notebook-button{width:auto;max-width:180px;padding:0 8px;gap:8px;font-size:12px;font-weight:400;white-space:nowrap}
.notebook-button .list-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
.top-bar{grid-template-columns:minmax(max-content,1fr) auto minmax(72px,1fr)}
@media(max-width:520px){.top-bar{grid-template-columns:1fr 1fr;row-gap:8px}.center-actions{grid-column:1/-1;grid-row:2}.top-actions{grid-column:2;grid-row:1}}

:root{--list-row-height:67px}
header.sticky-tools{position:sticky;top:0;z-index:20;height:var(--list-row-height);max-width:none;width:100%;margin:0;padding:0;display:block;background:#fff}
.sticky-tools .top-bar{height:100%;max-width:960px;margin:0 auto;padding:0 24px;grid-template-columns:minmax(max-content,1fr) auto minmax(72px,1fr);grid-template-rows:1fr;row-gap:0;overflow-x:auto;scrollbar-width:none}
.sticky-tools .top-bar::-webkit-scrollbar{display:none}
.sticky-tools .center-actions{grid-column:2;grid-row:1}
.sticky-tools .top-actions{grid-column:3;grid-row:1}
main{margin-top:0}
.task{min-height:var(--list-row-height)}
@media(max-width:740px){.sticky-tools .top-bar{padding-left:22px;padding-right:56px}}
@media(max-width:520px){.sticky-tools .top-bar{padding:0 16px;column-gap:4px;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr)}.sticky-tools .footer-button{width:28px;height:28px}.sticky-tools .notebook-button{width:auto;max-width:105px;padding:0 4px;gap:5px;font-size:11px}.sticky-tools .center-actions{gap:2px}.sticky-tools .top-actions{gap:2px}}

.notebook-button .list-name{font-family:var(--title-font);font-size:11px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase}
.notebook-button .list-name{display:block;line-height:15px;transform:translateY(.5px)} .footer-button.notebook-button{gap:11px} 
.notebook-menu{position:fixed;z-index:50;width:220px;max-width:calc(100vw - 16px);background:#fff;border:1px solid #ededed;border-radius:8px;padding:6px;box-shadow:0 8px 24px #0000000d;color:#666}
.notebook-menu[hidden]{display:none}
.notebook-option{width:100%;height:38px;display:flex;align-items:center;gap:11px;border:0;background:transparent;border-radius:5px;padding:0 10px;color:#a3a3a3;text-align:left;font-size:12px}
.notebook-option svg{width:15px;height:15px;flex-shrink:0;stroke-width:2}
.notebook-option:hover,.notebook-option:focus-visible{background:#f5f5f5;outline:none}
.notebook-option[aria-checked="true"]{color:#444;background:#f5f5f5}
.menu-divider{height:1px;background:#ededed;margin:5px 4px}

.notebook-option{gap:11px}
.notebook-option>span{font-family:var(--title-font);font-size:11px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;display:block;line-height:15px;transform:translateY(.5px)}
.bottom-inner{justify-content:space-between}.bottom-actions{display:flex;align-items:center;gap:8px}.footer-button.footer-trash{color:#a3a3a3}  
.notebook-menu{max-height:calc(100dvh - 80px);overflow-y:auto}
.notebook-option>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.edit-notebook-action{width:100%;border:0;background:none;color:#a3a3a3;font-size:11px;text-align:left;padding:10px;border-radius:5px}
.edit-notebook-action:hover,.edit-notebook-action:focus-visible{background:#f5f5f5;outline:none}
.notebook-editor{padding:8px 4px}
.notebook-editor[hidden],#notebook-menu-view[hidden]{display:none}
.notebook-editor label{display:block;font-size:11px;color:#a3a3a3;margin:0 0 8px}
.notebook-editor input[name="name"]{width:100%;border:1px solid #ededed;border-radius:5px;background:#fff;padding:9px 8px;margin:0 0 18px;color:#666;font-family:var(--title-font);font-size:11px}
.notebook-colors{display:flex;gap:10px;align-items:center;margin-bottom:18px}
#notebook-color{width:30px;height:30px;padding:0;flex-shrink:0;border:1px solid #ededed;border-radius:5px;background:#fff;cursor:pointer}
.color-presets{display:flex;gap:6px;flex-wrap:wrap}
.color-preset{width:16px;height:16px;border:0;border-radius:50%;padding:0;background:var(--swatch);box-shadow:0 0 0 2px #fff}
.color-preset[aria-pressed="true"]{outline:1px solid var(--swatch);outline-offset:2px}
.notebook-editor-actions{display:flex;justify-content:flex-end;gap:6px}
.notebook-editor-actions button{padding:7px 10px;border:0;border-radius:5px;background:transparent;color:#a3a3a3;font-size:11px}
.notebook-editor-actions button:hover{background:#f5f5f5}
.notebook-editor-actions button[type="submit"]{background:#f5f5f5;color:#444}

.notebook-menu{width:260px}
.notebook-menu-row{display:flex;align-items:center;border-radius:5px;min-height:38px}
.notebook-menu-row>.notebook-option{flex:1;min-width:0;width:auto}

.notebook-direct-controls{display:flex;align-items:center;padding-right:3px;opacity:0;pointer-events:none}
.notebook-menu-row:hover .notebook-direct-controls,.notebook-menu-row:focus-within .notebook-direct-controls{opacity:1;pointer-events:auto}
.notebook-pencil,.notebook-color-control{width:28px;height:28px;position:relative;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:5px;background:transparent;color:#a3a3a3;cursor:pointer;flex-shrink:0}
.notebook-pencil:hover,.notebook-color-control:hover{background:#ededed}
.notebook-pencil svg{width:14px;height:14px;stroke-width:2}
.notebook-color-dot{width:12px;height:12px;border-radius:50%;background:#a3a3a3}
.notebook-color-control{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;cursor:pointer}
.notebook-color-control:focus-within{outline:none}
.notebook-rename-form{width:100%;height:38px;padding:0 10px;display:flex;align-items:center;gap:11px}
.notebook-rename-form[hidden]{display:none}
.notebook-rename-form svg{width:15px;height:15px;flex-shrink:0;stroke-width:2}
#direct-notebook-name{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#666;padding:0;font-family:var(--title-font);font-size:11px;line-height:15px;letter-spacing:1.5px;transform:translateY(.5px)}
.notebook-menu-row.renaming>.notebook-option,.notebook-menu-row.renaming>.notebook-direct-controls{display:none}
@media(hover:none){.notebook-direct-controls{opacity:1;pointer-events:auto}}
#direct-notebook-name{text-transform:uppercase} .footer-button.notebook-button{background:var(--notebook-fill,transparent)}.footer-button.notebook-button:hover{background:var(--notebook-fill,#f5f5f5)} 
.notebook-color-control{position:relative;inset:auto;width:28px;height:28px;opacity:1;display:flex;align-items:center;justify-content:center;border:0;padding:0;background:transparent}
.notebook-color-control:hover{background:#ededed}
.notebook-palette{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;border-top:1px solid #ededed;margin-top:6px;padding-top:6px}
.notebook-palette[hidden]{display:none}
.notebook-palette-choice{height:32px;border:0;border-radius:5px;background:none;display:flex;align-items:center;justify-content:center;padding:0}
.notebook-palette-choice:hover,.notebook-palette-choice:focus-visible{background:#f5f5f5;outline:none}
.notebook-palette-choice span{width:15px;height:15px;border-radius:50%;background:var(--palette-color)}
.notebook-palette-choice[aria-pressed="true"] span{outline:1px solid var(--palette-color);outline-offset:3px}

header.sticky-tools{height:auto}
.sticky-tools .top-bar{height:var(--list-row-height)}
.section-nav{height:44px;background:#fff}
.section-nav[hidden]{display:none}
.section-inner{height:100%;max-width:660px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:8px}
.section-tabs{display:flex;align-items:center;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none}
.section-tabs::-webkit-scrollbar{display:none}
.section-tab{height:32px;max-width:200px;flex-shrink:0;border:0;border-radius:6px;background:none;color:#a3a3a3;padding:0 12px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.section-tab:hover{background:#f5f5f5}
.section-tab[aria-selected="true"]{color:var(--section-color,#666);background:color-mix(in srgb,var(--section-color,#a3a3a3) 10%,transparent)}
#add-section{flex-shrink:0}
#add-section[hidden],.section-create[hidden]{display:none}
.section-create{flex:0 1 180px;min-width:90px;margin:0}
#section-name{width:100%;height:30px;border:1px solid #ededed;border-radius:5px;background:#fff;padding:0 8px;color:#666;font-size:12px}
@media(max-width:740px){.section-inner{padding-left:22px;padding-right:56px}}
@media(max-width:520px){.section-inner{padding-left:16px;padding-right:16px}}
.section-divider{flex:0 0 1px;width:1px;height:14px;background:#ededed;margin:0 3px} 
.section-tab,#section-name,#notebook-trash-title{font-family:var(--title-font);font-size:11px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;line-height:15px}
.section-tab{display:flex;align-items:center;justify-content:center}
.section-tab>span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;transform:translateY(.5px)}

#add-section{opacity:0;pointer-events:none}
.section-nav:hover #add-section,#add-section:focus-visible{opacity:1;pointer-events:auto}
@media(hover:none){#add-section{opacity:1;pointer-events:auto}}
 
.section-tab{cursor:grab;outline:none;touch-action:pan-y;max-width:none}
.section-tab:focus,.section-tab:focus-visible{outline:none;box-shadow:none}
.section-tab.editing-name{flex-shrink:0;max-width:none;cursor:text;justify-content:flex-start;text-align:left}
.section-tab.editing-name>span{flex:0 0 auto;width:max-content;overflow:visible}
.section-tab>span[contenteditable="plaintext-only"]{outline:none;cursor:text;white-space:pre;text-overflow:clip;text-align:left;min-width:1px;user-select:text}

.notebook-menu-row>.notebook-option{padding-left:0}
.notebook-menu:has(.notebook-option.editing-name){width:max-content;min-width:260px;max-width:calc(100vw - 16px)}
.notebook-menu-row>.notebook-color-control{width:32px;height:32px;margin:0 2px;flex:0 0 32px;border-radius:6px}
.notebook-color-control:hover{background:#ededed}
.notebook-button:focus,.notebook-button:focus-visible,.notebook-option:focus,.notebook-option:focus-visible{outline:none}
.notebook-button.editing-name{max-width:none;justify-content:flex-start;text-align:left;cursor:text}
.notebook-menu-row>.notebook-option.editing-name{flex:0 0 auto;width:max-content;justify-content:flex-start;cursor:text}
.notebook-button .list-name[contenteditable="plaintext-only"],.notebook-option>span[contenteditable="plaintext-only"]{flex:0 0 auto;min-width:1px;max-width:none;outline:none;cursor:text;user-select:text;white-space:pre;text-overflow:clip;overflow:visible;text-align:left}
.section-tab{gap:8px}
.section-tab>svg{width:15px;height:15px;flex-shrink:0;stroke-width:2}




/* Separate notebook and section controls inside one shared container. */
.notebook-controls{display:flex;align-items:center;justify-self:start;min-width:0;gap:4px}
.section-nav{position:fixed;z-index:50;width:240px;max-width:calc(100vw - 16px);height:auto;overflow-y:auto;background:#fff;border:1px solid #ededed;border-radius:8px;padding:6px;box-shadow:0 8px 24px #0000000d}
.section-inner{height:auto;max-width:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:stretch;gap:4px}
.section-tabs{flex-direction:column;align-items:stretch;overflow:visible;gap:2px}
.section-divider{display:none}
.section-tab{width:100%;min-height:38px;justify-content:flex-start;padding:0 10px;touch-action:none}
.section-tab:focus-visible{outline:none}
.section-create{flex:none;width:100%;min-width:0}
.section-nav #add-section{opacity:1;pointer-events:auto;align-self:flex-start}

.sticky-tools .notebook-button{max-width:360px}
@media(max-width:520px){.sticky-tools .notebook-button{max-width:180px}}

@media(max-width:520px){.notebook-controls{gap:2px}.sticky-tools .notebook-chevron{width:28px;height:28px;flex-basis:28px}}

.notebook-controls{height:40px;padding:4px;gap:2px;border-radius:9px;background:var(--notebook-fill,#f5f5f5)}
.sticky-tools .notebook-controls .footer-button{height:32px;width:auto;padding:0 8px;gap:10px;min-width:32px;max-width:240px;flex-shrink:1;background:transparent;color:#a3a3a3}
.notebook-controls .list-name,.notebook-controls .section-current{font-family:var(--title-font);font-size:11px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:15px}
.notebook-controls .footer-button:hover,.notebook-controls .footer-button:focus-visible,.notebook-controls .footer-button[aria-expanded="true"]{background:#fff;box-shadow:0 1px 3px #0000000a}
.notebook-controls .footer-button:focus-visible{outline:none}
.notebook-slash{color:#bbb;font-size:12px;flex-shrink:0;padding:0 1px}
.notebook-controls [hidden]{display:none!important}
.notebook-select.editing-name{max-width:none!important;flex-shrink:0!important}
.notebook-select .list-name[contenteditable="plaintext-only"]{overflow:visible;outline:none;cursor:text;user-select:text;white-space:pre}
@media(max-width:520px){.notebook-controls{height:36px;gap:0}.sticky-tools .notebook-controls .footer-button{height:28px;min-width:28px;max-width:125px;padding:0 5px;gap:5px}}

/* Optical alignment of uppercase labels with the Lucide notebook icon. */
.notebook-select{align-items:center}
.notebook-controls .list-name,.notebook-controls .section-current{display:block;transform:translateY(.5px)}
.notebook-select>svg{align-self:center}

/* Keep the view controls beside search and filter on the right. */
.sticky-tools .top-bar{display:flex;justify-content:space-between;gap:16px}
.notebook-controls{flex:0 1 auto}
.nav-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 0 auto}
.nav-separator{display:block;width:1px;height:20px;background:#ededed;flex:0 0 1px;margin:0 4px}
@media(max-width:520px){.sticky-tools .top-bar{gap:8px}.nav-actions{gap:4px}.nav-separator{margin:0 2px}}


.notebook-slash{line-height:15px;transform:translateY(-1px)}

.notebook-menu-row>.notebook-option{padding-left:10px}

/* Shared dimensions for toolbar controls and their dropdowns. */
:root{--control-size:32px}
.footer-button,.notebook-option,.section-tab,.notebook-palette-choice,.notebook-color-control{height:var(--control-size);min-height:var(--control-size);min-width:var(--control-size);box-sizing:border-box}
.sticky-tools .footer-button{height:var(--control-size);min-width:var(--control-size)}
.sticky-tools .notebook-controls .footer-button{height:var(--control-size);min-height:var(--control-size);min-width:var(--control-size)}
.notebook-controls{height:calc(var(--control-size) + 8px)}
.notebook-menu-row{min-height:var(--control-size)}
.notebook-menu-row>.notebook-option{min-width:var(--control-size)}
.notebook-menu-row>.notebook-color-control{width:var(--control-size);height:var(--control-size);min-width:var(--control-size);flex-basis:var(--control-size)}
.section-tab{height:var(--control-size);min-height:var(--control-size)}
#section-name{height:var(--control-size)}
@media(max-width:520px){:root{--control-size:28px}}

/* Compact circular hover around the notebook color dot. */
.notebook-menu-row>.notebook-color-control{position:relative;background:transparent;border-radius:50%;isolation:isolate}
.notebook-color-control::before{content:"";position:absolute;width:20px;height:20px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:transparent;z-index:-1}
.notebook-menu-row>.notebook-color-control:hover{background:transparent}
.notebook-color-control:hover::before,.notebook-color-control:focus-visible::before{background:#ededed}

.task .icon.delete:hover{background:rgb(220 52 52 / 10%);color:#dc3434}



#notebook-name{width:100%;height:var(--control-size);border:1px solid #ededed;border-radius:5px;background:#fff;padding:0 8px;color:#666;font-family:var(--title-font);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}
#notebook-create{margin-top:4px}
#add-notebook{margin-top:4px}
#add-notebook[hidden]{display:none}

/* Inline creation fields match the borderless menu rows. */
#notebook-name,#section-name{border:0;outline:0;box-shadow:none;background:transparent}
#notebook-name:focus,#notebook-name:focus-visible,#section-name:focus,#section-name:focus-visible{border:0;outline:0;box-shadow:none}
.notebook-menu-row>.notebook-option{cursor:grab;touch-action:none}
.notebook-menu-row.reordering{background:transparent}
.notebook-menu-row.reordering>.notebook-option{background:#ededed}
.notebook-menu-row.reordering .notebook-option{cursor:grabbing}
.notebook-menu-row>.notebook-option.editing-name{cursor:text;touch-action:auto}

.notebook-controls .footer-button:focus-visible,.section-tab:focus,.section-tab:focus-visible,.notebook-option:focus,.notebook-option:focus-visible{outline:none}

.notebook-controls .footer-button:focus,.notebook-controls .footer-button:focus-visible{border:0;outline:none}

/* Notebook removal is available on hover and keyboard focus. */
.notebook-menu-row>.notebook-delete{width:calc(var(--control-size) - 8px);height:calc(var(--control-size) - 8px);min-width:calc(var(--control-size) - 8px);min-height:calc(var(--control-size) - 8px);flex:0 0 calc(var(--control-size) - 8px);margin:4px 4px 4px 0;opacity:0;pointer-events:none;color:#a3a3a3}
.notebook-menu-row:hover>.notebook-delete{opacity:1;pointer-events:auto}
.notebook-menu-row>.notebook-delete:hover,.notebook-menu-row>.notebook-delete:focus-visible{color:#dc3434;background:rgb(220 52 52 / 10%);outline:none}
@media(hover:none){.notebook-menu-row>.notebook-delete{opacity:1;pointer-events:auto}}
.notebook-dialog{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;padding:24px;border:0;border-radius:12px;background:#fff;color:#666;box-shadow:0 12px 48px #0002}
.notebook-dialog::backdrop{background:#0003}
.notebook-dialog h2{margin:0;font-size:16px;line-height:1.5;font-weight:500;color:#444}
.notebook-dialog p{margin:12px 0 20px;font-size:12px;line-height:1.6}
.dialog-actions,.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dialog-actions{justify-content:flex-end}
.dialog-button{border:0;border-radius:6px;min-height:var(--control-size);min-width:var(--control-size);padding:0 12px;background:#f5f5f5;color:#666;font:inherit;font-size:12px;cursor:pointer}
.dialog-button:hover{background:#ededed}
.dialog-button.danger{background:rgb(220 52 52 / 10%);color:#dc3434}
.dialog-button.danger:hover{background:rgb(220 52 52 / 15%)}
.trashed-notebook{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #ededed}
.trashed-notebook>div{min-width:0}
.trashed-notebook-name{display:block;overflow-wrap:anywhere;font-size:12px;color:#555}
.trashed-notebook-contents{display:block;margin-top:4px;font-size:11px;color:#a3a3a3}

/* Concentric corners: inner radius = outer radius minus the inset. */
:root{--button-radius:6px;--nested-inset:4px;--compact-button-radius:4px;--menu-inset:7px;--menu-row-radius:var(--button-radius);--menu-radius:calc(var(--button-radius) + var(--menu-inset))}
.footer-button,.dialog-button,.task-marker,.task .icon{border-radius:var(--button-radius)}
.notebook-controls{border-radius:calc(var(--button-radius) + var(--nested-inset))}
.notebook-controls .footer-button{border-radius:var(--button-radius)}
.notebook-menu,.section-nav{border-radius:var(--menu-radius)}
.notebook-option,.notebook-menu-row,.section-tab,.notebook-palette-choice{border-radius:var(--menu-row-radius)}
.notebook-menu-row>.notebook-delete{border-radius:var(--compact-button-radius)}

.notebook-color-control:focus,.notebook-color-control:focus-visible{outline:none}

.notebook-menu-row>.notebook-color-control[aria-expanded="true"]{background:transparent;outline:none}
.notebook-color-control[aria-expanded="true"]::before{background:#ededed}

/* Color selection uses the same inset button shape as the row's trash button. */
.notebook-menu-row>.notebook-color-control{width:calc(var(--control-size) - 8px);height:calc(var(--control-size) - 8px);min-width:calc(var(--control-size) - 8px);min-height:calc(var(--control-size) - 8px);flex:0 0 calc(var(--control-size) - 8px);margin:4px 4px 4px 0;border-radius:calc(var(--menu-row-radius) - var(--nested-inset));background:transparent}
.notebook-color-control::before{display:none}
.notebook-menu-row>.notebook-color-control:hover,.notebook-menu-row>.notebook-color-control:focus-visible,.notebook-menu-row>.notebook-color-control[aria-expanded="true"]{background:#ededed;outline:none}

/* Palette swatches share the compact inset shape used by the color control. */
.notebook-palette-choice{width:calc(var(--control-size) - 8px);height:calc(var(--control-size) - 8px);min-width:calc(var(--control-size) - 8px);min-height:calc(var(--control-size) - 8px);border-radius:calc(var(--menu-row-radius) - var(--nested-inset));justify-self:center}
.notebook-palette-choice:hover,.notebook-palette-choice:focus-visible,.notebook-palette-choice[aria-pressed="true"]{background:#ededed;outline:none}
.notebook-palette-choice[aria-pressed="true"] span{outline:none}

/* Compact palette layout, with circular color controls. */
.notebook-palette{grid-template-columns:repeat(7,calc(var(--control-size) - 8px));justify-content:space-between;padding:6px var(--nested-inset) var(--nested-inset)}

.notebook-menu-row>.notebook-color-control,.notebook-palette-choice{border-radius:50%}

.notebook-slash{color:var(--notebook-color,#a3a3a3);opacity:.5}

.notebook-menu-row>.notebook-option{cursor:pointer}
.notebook-menu-row.reordering,.notebook-menu-row.reordering>.notebook-option{cursor:grabbing}
.notebook-menu-row>.notebook-option.editing-name{cursor:text}

.notebook-menu-row.pressing,.notebook-menu-row.pressing>.notebook-option{cursor:grabbing}

#notebook-list>.notebook-menu-row+.notebook-menu-row{margin-top:3px}

.notebook-menu-row>.notebook-delete{margin-left:3px}

/* One spacing scale for controls throughout the app. */
:root{--control-gap:4px;--icon-label-gap:8px}
.sticky-tools .center-actions,.sticky-tools .top-actions,.nav-actions,.bottom-actions,.bottom-inner,.notebook-controls,.section-tabs,.section-inner,.actions,.dialog-actions,.dialog-heading{gap:var(--control-gap)}
.nav-separator{margin:0}
.notebook-slash{padding:0}
#notebook-list>.notebook-menu-row+.notebook-menu-row{margin-top:var(--control-gap)}
.notebook-menu-row>.notebook-delete{margin:var(--nested-inset) var(--control-gap) var(--nested-inset) var(--control-gap)}
.notebook-menu-row>.notebook-color-control{margin:var(--nested-inset) var(--nested-inset) var(--nested-inset) 0}
.sticky-tools .notebook-controls .footer-button,.notebook-option,.section-tab{gap:var(--icon-label-gap)}
.notebook-palette{gap:var(--control-gap);justify-content:center}
.menu-divider{margin:var(--control-gap)}

.nav-separator{margin:0 4px}

.section-tab{cursor:pointer}
.section-tab.pressing{cursor:grabbing}
.section-tab.editing-name{cursor:text}

/* Matching press and drag feedback for notebooks and sections. */
.notebook-option,.section-tab{transition:background-color 150ms ease}
.notebook-menu-row.pressing>.notebook-option,.notebook-menu-row.reordering>.notebook-option,.section-tab.pressing{background:color-mix(in srgb,var(--row-color,var(--section-color,#a3a3a3)) 10%,transparent);opacity:1;cursor:grabbing}
@media(prefers-reduced-motion:reduce){.notebook-option,.section-tab{transition:none}}

.section-tab.pressing{color:var(--section-color,#a3a3a3)}

/* Creation buttons occupy a full menu row, matching notebooks and sections. */
#add-notebook,#add-section{width:100%;height:var(--control-size);min-height:var(--control-size);min-width:var(--control-size);padding:0 10px;justify-content:flex-start;align-self:stretch;border-radius:var(--menu-row-radius);flex-shrink:0}

.footer-button[aria-label="Now"][aria-pressed="true"]{background:rgb(242 140 24 / 10%)}

.footer-button[aria-label="All"][aria-pressed="true"]{background:#f5f5f5}

.footer-button[aria-label="Someday"][aria-pressed="true"]{background:#f5f5f5}

/* Waiting tasks keep the same visual weight as ordinary tasks. */
.task:not(.done) .task-marker[data-priority="gray"]{color:#a3a3a3}
.task:not(.done):has(.task-marker[data-priority="gray"]) .label{color:#666}

.footer-button[aria-label="Next"][aria-pressed="true"]{background:#f5f5f5}

.notebook-option[data-notebook="all"],.notebook-option[data-notebook="all"][aria-checked="true"]{color:#a3a3a3}


.today-button[aria-pressed="true"]{background:rgb(220 52 52 / 10%)}
.footer-button[aria-label="Scheduled"][aria-pressed="true"]{background:rgb(57 132 221 / 10%)}

.footer-button[aria-label="Scheduled"]{color:#3984dd}

.footer-button[aria-label="Scheduled"] svg{fill:rgb(57 132 221 / 20%)}

.footer-button[aria-label="Next"]{color:#65a33a}
.footer-button[aria-label="Next"] svg{fill:rgb(101 163 58 / 20%)}
.footer-button[aria-label="Next"][aria-pressed="true"]{background:rgb(101 163 58 / 10%)}
.footer-button[aria-label="Someday"]{color:#b49a7a}
.footer-button[aria-label="Someday"] svg{fill:rgb(180 154 122 / 20%)}
.footer-button[aria-label="Someday"][aria-pressed="true"]{background:rgb(180 154 122 / 10%)}

.task:has(.label[contenteditable]:focus) .actions{opacity:0;pointer-events:none}

.trophy-button[aria-pressed="true"]{background:#f5f5f5}

/* Application modes sit at the top left of the window. */
header.sticky-tools{padding-left:100px}
.app-mode-switch{position:absolute;left:16px;top:0;height:var(--list-row-height);display:flex;align-items:center;gap:var(--control-gap)}
.app-mode-switch .footer-button[aria-pressed="true"]{background:#f5f5f5}
.center-actions[hidden],.nav-separator[hidden]{display:none}
@media(max-width:520px){header.sticky-tools{padding-left:80px}.app-mode-switch{left:8px}}

header.sticky-tools{padding-left:136px}
@media(max-width:520px){header.sticky-tools{padding-left:112px}}

.app-mode-switch .notes-mode-button[aria-pressed="true"]{color:#a3a3a3;background:#f5f5f5}
.app-mode-switch .notes-mode-button[aria-pressed="true"] svg{fill:rgb(136 136 136 / 20%)}

.app-mode-switch .tasks-mode-button[aria-pressed="true"]{color:#a3a3a3;background:#f5f5f5}
.app-mode-switch .tasks-mode-button[aria-pressed="true"] svg{fill:rgb(136 136 136 / 20%)}
.app-mode-switch .trophy-button[aria-pressed="true"]{color:#b29104;background:rgb(178 145 4 / 10%)}
.app-mode-switch .trophy-button[aria-pressed="true"] svg{fill:rgb(178 145 4 / 20%)}

/* Notebook context at the window edge, content modes in the navigation bar. */
header.sticky-tools{display:flex;align-items:center;gap:16px;padding:0 16px}
.notebook-context{display:flex;align-items:center;min-width:0;max-width:min(360px,40vw);flex:0 1 auto;height:var(--list-row-height)}
.notebook-context .notebook-controls{max-width:100%}
.sticky-tools .top-bar{flex:1;min-width:0;margin:0 auto}
.app-mode-switch{position:static;left:auto;top:auto;height:auto;flex-shrink:0}
@media(max-width:520px){header.sticky-tools{padding:0 8px;gap:8px}.notebook-context{max-width:46vw}.sticky-tools .top-bar{padding:0 8px}}

/* Align modes and filters with the list's centered 660px container. */
header.sticky-tools{display:block;padding:0}
.sticky-tools .top-bar{width:100%;max-width:660px;margin:0 auto;flex:none}
.notebook-context{position:absolute;left:16px;top:0;max-width:calc((100vw - 660px)/2 - 24px)}
@media(max-width:960px){
 .notebook-context{position:static;max-width:100%;height:48px;padding:0 16px}
 .sticky-tools .top-bar{padding-left:24px;padding-right:24px}
}
@media(max-width:520px){.notebook-context{padding:0 16px}.sticky-tools .top-bar{padding-left:16px;padding-right:16px}}

.mode-separator{width:1px;height:20px;flex:0 0 1px;background:#ededed;margin:0 4px}

/* Content modes live in the bottom navigation. */
.bottom-primary{display:flex;align-items:center;gap:var(--control-gap);min-width:0}
.bottom-bar .app-mode-switch{position:static;height:auto}
.bottom-bar .footer-button{width:var(--control-size);height:var(--control-size);flex-shrink:0}

/* Task views start at the list's left edge; search and filter stay right. */
.sticky-tools .top-bar>.nav-actions{width:100%;margin-left:0;min-width:0}
.nav-actions>.nav-separator{margin-left:auto;margin-right:4px}
.nav-actions>.top-actions{flex-shrink:0}
.nav-actions>.center-actions[hidden]~.top-actions{margin-left:auto}

/* Keep the two toolbar groups apart without a visible divider. */
.nav-actions>.nav-separator{width:0;flex-basis:0;background:transparent}

/* Window-edge controls with When views centered independently of both sides. */
.sticky-tools .top-bar{position:relative;max-width:none;width:100%;padding:0 16px;overflow:visible}
.notebook-context{position:absolute;left:16px;top:0;padding:0;height:var(--list-row-height);max-width:min(360px,calc((100vw - 280px)/2 - 32px));z-index:1}
.top-bar .center-actions{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);flex-shrink:0}
.nav-actions>.nav-separator{display:none}
.nav-actions>.top-actions{margin-left:auto}
.bottom-inner{max-width:none;width:100%;padding-left:16px;padding-right:16px;justify-content:space-between}
@media(max-width:960px){
 .notebook-context{position:static;max-width:calc(100% - 96px);height:48px;padding:0 16px}
 .top-bar .top-actions{position:fixed;right:16px;top:8px}
}

/* Goals at the left edge; content types centered in the window. */
.bottom-bar .app-mode-switch{position:absolute;left:50%;top:14px;transform:translateX(-50%)}
.bottom-primary>.trophy-button[aria-pressed="true"]{color:#b29104;background:rgb(178 145 4 / 10%)}
.bottom-primary>.trophy-button[aria-pressed="true"] svg{fill:rgb(178 145 4 / 20%)}

/* Search, Filter and content types share the top-right toolbar. */
.top-bar .top-actions{position:relative}
.filter-control{position:relative;display:flex;align-items:center;gap:var(--control-gap);flex-shrink:0}
.filter-control[hidden]{display:none}
.filter-control .content-type-switch{z-index:1}
.top-actions .content-type-switch{position:static;height:auto;display:flex;flex-direction:row;gap:var(--control-gap);transform:none;visibility:visible;opacity:1;pointer-events:auto}
@media(max-width:960px){.top-bar .top-actions{position:fixed}}

/* A brighter, breathing aura stays anchored to the trophy icon. */
.app-mode-switch .trophy-button{transition:background-color 180ms ease,color 180ms ease}
.app-mode-switch .trophy-button svg{transition:filter 180ms ease}
.app-mode-switch .trophy-button[aria-pressed="true"] svg{
 stroke:#d5a01b;fill:rgb(246 193 56 / 30%);
 filter:drop-shadow(0 0 3px rgb(255 220 113 / 95%)) drop-shadow(0 0 8px rgb(241 176 34 / 80%)) drop-shadow(0 0 14px rgb(176 117 239 / 55%));
 animation:goals-icon-glow 3.2s ease-in-out infinite;
}
@keyframes goals-icon-glow{
 0%,100%{filter:drop-shadow(0 0 3px rgb(255 220 113 / 85%)) drop-shadow(0 0 6px rgb(241 176 34 / 65%)) drop-shadow(0 0 12px rgb(176 117 239 / 40%))}
 50%{filter:drop-shadow(0 0 4px rgb(255 235 170 / 100%)) drop-shadow(0 0 10px rgb(241 176 34 / 95%)) drop-shadow(0 0 18px rgb(176 117 239 / 65%))}
}
@media(prefers-reduced-motion:reduce){.app-mode-switch .trophy-button,.app-mode-switch .trophy-button svg{transition:none;animation:none}}

.top-actions .content-type-switch[hidden]{display:none}



#notebook-trash-title{color:#a3a3a3;transform:translateY(.5px)}

/* Four staggered sparks surround the icon without moving the button. */
.app-mode-switch .trophy-button{overflow:visible}
.goals-icon{position:relative;display:block;width:15px;height:15px;flex-shrink:0;overflow:visible;pointer-events:none}
.goals-icon::before,.goals-icon::after,.goals-sparks::before,.goals-sparks::after{content:"";position:absolute;width:5px;height:5px;background:#ffdf78;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:0;filter:drop-shadow(0 0 3px #efae26)}
.goals-icon::before{right:-13px;top:-12px}
.goals-icon::after{left:-14px;bottom:-5px;width:4px;height:4px}
.goals-sparks::before{left:-10px;top:-13px;width:3px;height:3px;background:#d5b7ff}
.goals-sparks::after{right:-11px;bottom:-12px;width:4px;height:4px}
.trophy-button[aria-pressed="true"] .goals-icon::before{animation:goals-spark 3.6s ease-in-out infinite}
.trophy-button[aria-pressed="true"] .goals-icon::after{animation:goals-spark 3.6s ease-in-out -.9s infinite}
.trophy-button[aria-pressed="true"] .goals-sparks::before{animation:goals-spark 3.6s ease-in-out -1.8s infinite}
.trophy-button[aria-pressed="true"] .goals-sparks::after{animation:goals-spark 3.6s ease-in-out -2.7s infinite}
@keyframes goals-spark{
 0%,45%,100%{opacity:0;transform:translateY(1px) scale(.3) rotate(0deg)}
 15%{opacity:1;transform:translateY(-1px) scale(1.2) rotate(35deg)}
 28%{opacity:.4;transform:translateY(-2px) scale(.65) rotate(55deg)}
 35%{opacity:.85;transform:translateY(-3px) scale(.9) rotate(70deg)}
}
@media(prefers-reduced-motion:reduce){
 .trophy-button[aria-pressed="true"] .goals-icon::before,.trophy-button[aria-pressed="true"] .goals-icon::after,.trophy-button[aria-pressed="true"] .goals-sparks::before,.trophy-button[aria-pressed="true"] .goals-sparks::after{animation:none}
}

/* Keep undo notifications clear of the fixed footer and its safe area. */
.toast{bottom:calc(var(--control-size) + 40px + env(safe-area-inset-bottom,0px));z-index:30}

@media(max-width:520px){.notebook-context{max-width:calc(100% - 96px)}}



.footer-button:disabled{opacity:.35;cursor:default;pointer-events:none}

/* Horizontal control groups on separate rows, aligned with the task list. */
.sticky-tools .top-bar{max-width:660px;padding:0 24px}
.top-bar .top-actions{position:relative;top:auto;right:auto}
.notebook-context,.bottom-bar{display:none}
.filter-panel{position:absolute;right:0;top:calc(100% + 8px);display:flex;flex-direction:column;align-items:stretch;gap:8px;width:calc(7 * var(--control-size) + 6 * var(--control-gap) + 18px);max-width:calc(100vw - 44px);max-height:calc(100dvh - 72px);overflow:auto;padding:8px;background:#fff;border:1px solid #ededed;border-radius:10px;box-shadow:0 10px 32px #00000012;z-index:30}
.filter-panel[hidden]{display:none}
.top-bar .filter-panel .center-actions,.filter-panel .app-mode-switch,.filter-panel .filter-tools,.filter-panel .notebook-controls{position:static;transform:none;display:flex;align-items:center;flex-wrap:wrap;flex-shrink:0;width:auto;max-width:100%;height:auto;gap:var(--control-gap);margin:0;padding:0;border:0}
.top-bar .filter-panel .center-actions[hidden],.filter-panel .notebook-slash,.filter-panel .list-name,.filter-panel .section-current{display:none}
.top-bar .filter-panel>div+div{border-top:1px solid #ededed;padding-top:8px}
.filter-panel .notebook-controls{background:transparent;border-radius:0}
.sticky-tools .filter-panel .footer-button,.sticky-tools .filter-panel .notebook-controls .footer-button{display:flex;flex-direction:row;align-items:center;justify-content:center;flex:0 0 var(--control-size);width:var(--control-size);min-width:var(--control-size);max-width:var(--control-size);height:var(--control-size);min-height:var(--control-size);gap:0;padding:0;border-radius:6px}
.filter-panel .footer-button svg,.filter-panel .today-day,.filter-panel .goals-icon{width:15px;max-width:15px;height:15px;flex:0 0 15px}
.filter-panel .today-day{display:flex;align-items:center;justify-content:center;position:static;transform:none;line-height:1;font-size:12px;font-variant-numeric:tabular-nums}
.filter-control > .footer-button[aria-expanded="true"]{background:#ededed;color:#444}
@media(max-width:740px){.sticky-tools .top-bar{padding-left:22px;padding-right:22px}}

/* Keep the selected notebook name readable inside the filter. */
.filter-panel .notebook-controls .list-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sticky-tools .filter-panel .notebook-controls .notebook-select{flex:1 1 auto;width:auto;max-width:none;min-width:0;justify-content:flex-start;gap:8px;padding:0 8px}
.filter-panel .notebook-select>svg{flex:0 0 15px}

/* Restore the notebook / section breadcrumb in the first filter row. */
.filter-panel .notebook-controls{flex-wrap:nowrap;justify-content:flex-start}
.filter-panel .notebook-controls .notebook-slash,.filter-panel .notebook-controls .section-current{display:block}
.sticky-tools .filter-panel .notebook-controls .notebook-select,.sticky-tools .filter-panel .notebook-controls .notebook-button{flex:0 1 auto;width:auto;max-width:none;min-width:0;justify-content:flex-start;padding:0 5px}
.filter-panel .notebook-controls .section-current{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Bridge the gap so the pointer can enter the dropdown without closing it. */
.filter-control::after{content:"";position:absolute;top:100%;right:0;width:100%;height:8px}

/* Notebook and section choices expand inside the existing filter window. */
.filter-picker:has(>#notebook-menu[hidden]):has(>#section-nav[hidden]){display:none}
.filter-panel .filter-picker{min-width:0}
.filter-panel .filter-picker .notebook-menu,.filter-panel .filter-picker .section-nav{position:static;left:auto;top:auto;width:100%;max-width:none;max-height:none;height:auto;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;overflow:visible;background:transparent}
.filter-panel .filter-picker [hidden]{display:none}
.filter-panel .filter-picker .section-inner{padding:0;max-width:none}
.filter-panel .filter-picker .notebook-menu-row{max-width:100%}
.filter-panel .filter-picker .notebook-option{min-width:0;flex:1}

/* The controls stay open in a floating panel at the window's upper left. */
.filter-panel{position:fixed;top:16px;left:16px;right:auto;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px)}
.filter-control::after{display:none}

/* Give the notebook breadcrumb buttons a clear hover response. */
.sticky-tools .filter-panel .notebook-controls .footer-button:hover,
.sticky-tools .filter-panel .notebook-controls .footer-button:focus-visible,
.sticky-tools .filter-panel .notebook-controls .footer-button[aria-expanded="true"]{background:#f5f5f5;color:#555;box-shadow:none}

/* Active choices use the notebook tint; hover remains neutral. */
.sticky-tools .filter-panel .notebook-controls .footer-button[aria-expanded="true"]{background:var(--notebook-fill);color:var(--notebook-color,#a3a3a3)}
.filter-picker .notebook-option[aria-checked="true"]{background:color-mix(in srgb,var(--row-color,#a3a3a3) 10%,transparent);color:var(--row-color,#a3a3a3)}
.filter-picker .section-tab[aria-selected="true"]{background:color-mix(in srgb,var(--section-color,#a3a3a3) 10%,transparent);color:var(--section-color,#a3a3a3)}
/* Keep every picker row on the same height and spacing scale. */
.filter-picker #notebook-list{display:flex;flex-direction:column;gap:var(--control-gap)}
.filter-picker #notebook-list>.notebook-menu-row{margin:0;min-height:var(--control-size);gap:var(--control-gap);align-items:center}
.filter-picker #notebook-list>.menu-divider{margin:var(--control-gap) 0}
.filter-picker .notebook-menu-row>.notebook-delete,.filter-picker .notebook-menu-row>.notebook-color-control{width:calc(var(--control-size) - 8px);height:calc(var(--control-size) - 8px);min-width:calc(var(--control-size) - 8px);min-height:calc(var(--control-size) - 8px);max-width:calc(var(--control-size) - 8px);flex:0 0 calc(var(--control-size) - 8px);margin:0}
.filter-picker .section-tabs{gap:var(--control-gap)}

/* Retain the controls' coordinates without a surrounding floating surface. */
.filter-panel{background:transparent;border-color:transparent;box-shadow:none;border-radius:0}
footer.bottom-bar{display:block;background:transparent;pointer-events:none}
.bottom-bar .bottom-inner{justify-content:flex-end}
.bottom-bar .bottom-primary{display:none}
.bottom-bar .bottom-actions{pointer-events:auto}

/* Give each control type its own clearly separated horizontal row. */
.filter-panel{gap:12px}
.top-bar .filter-panel>.app-mode-switch,
.top-bar .filter-panel>.center-actions,
.top-bar .filter-panel>.filter-tools{width:100%;border-top:1px solid #ededed;padding-top:12px;gap:var(--control-gap)}
.top-bar .filter-panel>.filter-picker{width:100%;padding-top:12px}

/* Keep task text clear of the upper-left controls. */
@media(min-width:681px){main{width:calc(100% - 300px);margin-left:max(300px,calc((100vw - 660px)/2));margin-right:0}}
@media(max-width:680px){main{margin-top:208px}}

/* Search stays at the upper-right window edge. */
.top-bar .top-actions>[aria-label="Cerca"]{position:fixed;top:24px;right:16px;width:var(--control-size);height:var(--control-size)}

/* Match the upper controls' window insets to the bottom-right actions. */
.filter-panel{top:14px;left:16px;padding:0;border:0;width:calc(7 * var(--control-size) + 6 * var(--control-gap));max-height:calc(100dvh - 28px)}
.top-bar .top-actions>[aria-label="Cerca"]{top:14px;right:16px}

/* All upper-left button rows share the same left edge. */
.top-bar .filter-panel>.app-mode-switch,
.top-bar .filter-panel>.center-actions,
.top-bar .filter-panel>.filter-tools{justify-content:flex-start}

/* Each row has an independent All control at its right edge. */
.sticky-tools .filter-panel .content-all-button,
.sticky-tools .filter-panel .views-all-button,
.sticky-tools .filter-panel .notebook-controls .scope-all-button{margin-left:auto;flex:0 0 var(--control-size);width:var(--control-size);min-width:var(--control-size);max-width:var(--control-size);justify-content:center;padding:0}
.filter-panel .content-all-button[aria-pressed="true"],.filter-panel .scope-all-button[aria-pressed="true"]{background:#f5f5f5}

/* All starts each control row on the left. */
.sticky-tools .filter-panel .content-all-button,
.sticky-tools .filter-panel .views-all-button,
.sticky-tools .filter-panel .notebook-controls .scope-all-button{order:-1;margin-left:0}

/* Floating notebook and section menus keep the same selection and row spacing. */
.notebook-menu .notebook-option[aria-checked="true"]{background:color-mix(in srgb,var(--row-color,#a3a3a3) 10%,transparent);color:var(--row-color,#a3a3a3)}
#notebook-list{display:flex;flex-direction:column;gap:var(--control-gap)}
#notebook-list>.notebook-menu-row{margin:0;min-height:var(--control-size);gap:var(--control-gap);align-items:center}
#notebook-list>.menu-divider{margin:var(--control-gap) 0}
.notebook-menu-row>.notebook-delete,.notebook-menu-row>.notebook-color-control{width:calc(var(--control-size) - 8px);height:calc(var(--control-size) - 8px);min-width:calc(var(--control-size) - 8px);min-height:calc(var(--control-size) - 8px);max-width:calc(var(--control-size) - 8px);flex:0 0 calc(var(--control-size) - 8px);margin:0}

#notebook-list>.notebook-menu-row+.notebook-menu-row{margin-top:0}

/* The active notebook and section remain visibly selected when menus close. */
.sticky-tools .filter-panel .notebook-controls .notebook-select,
.sticky-tools .filter-panel .notebook-controls .notebook-button{background:var(--notebook-fill,color-mix(in srgb,var(--notebook-color,#a3a3a3) 10%,transparent));color:var(--notebook-color,#a3a3a3);box-shadow:none}

.filter-panel .notebook-controls .notebook-slash{margin:0 6px}

/* Breadcrumb buttons use the same inner inset as the icon buttons. */
.sticky-tools .filter-panel .notebook-controls .notebook-select,
.sticky-tools .filter-panel .notebook-controls .notebook-button{padding:0 calc((var(--control-size) - 15px) / 2);gap:var(--icon-label-gap)}

.filter-panel .notebook-controls .notebook-select .list-name{display:none}

.filter-panel .notebook-controls .notebook-button>svg{color:var(--notebook-color,#a3a3a3)}

/* The section trigger is neutral at rest; hover remains available. */
.sticky-tools .filter-panel .notebook-controls .notebook-button{background:transparent}
.sticky-tools .filter-panel .notebook-controls .notebook-button:hover,
.sticky-tools .filter-panel .notebook-controls .notebook-button:focus-visible{background:#f5f5f5}

.filter-panel .notebook-controls .notebook-slash{display:none}

.filter-panel .notebook-controls .notebook-button>svg,
#section-tabs .section-tab>svg{display:none}

/* Balance the section label after removing its icon. */
.sticky-tools .filter-panel .notebook-controls .notebook-button{padding-left:11px;padding-right:11px}

/* Dividers end at the right edge of the six When controls. */
.filter-panel{width:calc(6 * var(--control-size) + 5 * var(--control-gap))}

/* Goals is the only section with an icon, in the menu and selected label. */
.filter-panel .notebook-controls .notebook-button[data-section="__goals__"]>svg,
#section-tabs .section-tab[data-section="__goals__"]>svg{display:block;color:#b29104}

/* Goals follows the notebook color and retains its animated sparks. */
.filter-panel .notebook-button .goals-icon svg{color:var(--notebook-color,#a3a3a3)}
#section-tabs .section-tab .goals-icon svg{color:var(--section-color,#a3a3a3)}
.notebook-button[data-section="__goals__"] .goals-icon::before,.section-tab[data-section="__goals__"][aria-selected="true"] .goals-icon::before{animation:goals-spark 3.6s ease-in-out infinite}
.notebook-button[data-section="__goals__"] .goals-icon::after,.section-tab[data-section="__goals__"][aria-selected="true"] .goals-icon::after{animation:goals-spark 3.6s ease-in-out -.9s infinite}
.notebook-button[data-section="__goals__"] .goals-sparks::before,.section-tab[data-section="__goals__"][aria-selected="true"] .goals-sparks::before{animation:goals-spark 3.6s ease-in-out -1.8s infinite}
.notebook-button[data-section="__goals__"] .goals-sparks::after,.section-tab[data-section="__goals__"][aria-selected="true"] .goals-sparks::after{animation:goals-spark 3.6s ease-in-out -2.7s infinite}
#section-tabs .section-tab .goals-icon{overflow:visible}
@media(prefers-reduced-motion:reduce){.notebook-button .goals-icon::before,.notebook-button .goals-icon::after,.notebook-button .goals-sparks::before,.notebook-button .goals-sparks::after,.section-tab .goals-icon::before,.section-tab .goals-icon::after,.section-tab .goals-sparks::before,.section-tab .goals-sparks::after{animation:none}}

/* Keep Goals sparkles close to the trophy, independent of button bounds. */
.notebook-button .goals-icon::before,.section-tab .goals-icon::before{right:-3px;top:-3px;width:3px;height:3px}
.notebook-button .goals-icon::after,.section-tab .goals-icon::after{left:-3px;bottom:0;width:3px;height:3px}
.notebook-button .goals-sparks::before,.section-tab .goals-sparks::before{left:0;top:-4px;width:2px;height:2px}
.notebook-button .goals-sparks::after,.section-tab .goals-sparks::after{right:-2px;bottom:-3px;width:3px;height:3px}

/* Apply glow to the trophy artwork, keeping the button surface neutral. */
.notebook-button[data-section="__goals__"] .goals-icon svg{--goals-glow-color:var(--notebook-color,#a3a3a3)}
.section-tab[data-section="__goals__"] .goals-icon svg{--goals-glow-color:var(--section-color,#a3a3a3)}
.notebook-button[data-section="__goals__"] .goals-icon svg,
.section-tab[data-section="__goals__"] .goals-icon svg{filter:drop-shadow(0 0 2px color-mix(in srgb,var(--goals-glow-color) 25%,transparent));animation:goals-trophy-glow 3s ease-in-out infinite}
@keyframes goals-trophy-glow{50%{filter:drop-shadow(0 0 3px color-mix(in srgb,var(--goals-glow-color) 35%,transparent))}}
@media(prefers-reduced-motion:reduce){.notebook-button .goals-icon svg,.section-tab .goals-icon svg{animation:none}}

.top-bar .filter-panel>.app-mode-switch[hidden]{display:none}

.notebook-button[data-section="__goals__"] .goals-icon svg,
.section-tab[data-section="__goals__"] .goals-icon svg{fill:color-mix(in srgb,currentColor 10%,transparent)}

/* The Goals icon in the section menu stays outline-only. */
#section-tabs .section-tab[data-section="__goals__"] .goals-icon svg{fill:none}
#section-tabs .section-tab[data-section="__goals__"] .goals-icon svg path[style]{fill:none!important}

/* Keep the menu trophy neutral and free of decorative effects. */
#section-tabs .section-tab[data-section="__goals__"] .goals-icon svg{color:#a3a3a3;filter:none;animation:none}
#section-tabs .section-tab[data-section="__goals__"] .goals-icon::before,
#section-tabs .section-tab[data-section="__goals__"] .goals-icon::after,
#section-tabs .section-tab[data-section="__goals__"] .goals-sparks::before,
#section-tabs .section-tab[data-section="__goals__"] .goals-sparks::after{display:none;animation:none}

/* Section icons appear in both the selected label and its menu. */
.filter-panel .notebook-controls .notebook-button>svg,#section-tabs .section-tab>svg{display:block}
#section-tabs .section-tab>svg[title]{cursor:pointer}
.section-icon-picker{display:flex;flex-wrap:wrap;gap:var(--control-gap);padding-top:8px;border-top:1px solid #ededed}
.section-icon-picker[hidden]{display:none}
.section-icon-picker .footer-button[aria-pressed="true"]{background:#f5f5f5}
/* In the menu, only the selected Goals entry has its color and effects. */
#section-tabs .section-tab[data-section="__goals__"][aria-selected="true"] .goals-icon svg{color:var(--section-color,#a3a3a3);--goals-glow-color:var(--section-color,#a3a3a3);filter:drop-shadow(0 0 2px color-mix(in srgb,var(--section-color,#a3a3a3) 25%,transparent));animation:goals-trophy-glow 3s ease-in-out infinite}
#section-tabs .section-tab[data-section="__goals__"][aria-selected="true"] .goals-icon::before{display:block;animation:goals-spark 3.6s ease-in-out infinite}
#section-tabs .section-tab[data-section="__goals__"][aria-selected="true"] .goals-icon::after{display:block;animation:goals-spark 3.6s ease-in-out -.9s infinite}
#section-tabs .section-tab[data-section="__goals__"][aria-selected="true"] .goals-sparks::before{display:block;animation:goals-spark 3.6s ease-in-out -1.8s infinite}
#section-tabs .section-tab[data-section="__goals__"][aria-selected="true"] .goals-sparks::after{display:block;animation:goals-spark 3.6s ease-in-out -2.7s infinite}
@media(prefers-reduced-motion:reduce){#section-tabs .section-tab[data-section="__goals__"][aria-selected="true"] .goals-icon svg,#section-tabs .section-tab[data-section="__goals__"][aria-selected="true"] .goals-icon::before,#section-tabs .section-tab[data-section="__goals__"][aria-selected="true"] .goals-icon::after,#section-tabs .section-tab[data-section="__goals__"][aria-selected="true"] .goals-sparks::before,#section-tabs .section-tab[data-section="__goals__"][aria-selected="true"] .goals-sparks::after{animation:none}}

/* Icon editing uses a dedicated row control and a palette like notebook colors. */
.section-menu-row{display:flex;align-items:center;gap:var(--control-gap);min-width:0}
.section-menu-row>.section-tab{flex:1;min-width:0;width:auto}
.section-menu-row>.section-icon-control{display:flex;align-items:center;justify-content:center;width:calc(var(--control-size) - 8px);height:calc(var(--control-size) - 8px);min-width:calc(var(--control-size) - 8px);min-height:calc(var(--control-size) - 8px);flex:0 0 calc(var(--control-size) - 8px);padding:0;color:#a3a3a3;border-radius:50%}
.section-icon-control:hover,.section-icon-control[aria-expanded="true"]{background:#f5f5f5}
.section-icon-picker{display:grid;grid-template-columns:repeat(6,calc(var(--control-size) - 8px));justify-content:space-between;gap:var(--control-gap);padding:8px 4px 4px}
.section-icon-picker>.footer-button{width:calc(var(--control-size) - 8px);height:calc(var(--control-size) - 8px);min-width:calc(var(--control-size) - 8px);min-height:calc(var(--control-size) - 8px);padding:0;border-radius:50%}

/* Edit from the row's left icon; palette choices match the standard button shape. */
.section-icon-picker>.footer-button{border-radius:6px}
#section-tabs .section-tab>svg[title]:hover{background:#f5f5f5;border-radius:3px;box-shadow:0 0 0 4px #f5f5f5}

/* Show the full clickable icon area on hover. */
#section-tabs .section-tab>.section-edit-icon{display:flex;align-items:center;justify-content:center;flex:0 0 var(--control-size);width:var(--control-size);height:var(--control-size);margin-left:calc((15px - var(--control-size))/2);margin-right:calc((15px - var(--control-size))/2);transform:none;overflow:visible;border-radius:6px;cursor:pointer}
#section-tabs .section-edit-icon>svg{display:block;width:15px;height:15px;flex-shrink:0}
#section-tabs .section-edit-icon:hover,.section-icon-picker>.footer-button:hover,.section-icon-picker>.footer-button:focus-visible{background:#f5f5f5}
#section-tabs .section-edit-icon>svg:hover{box-shadow:none;background:none}

#section-tabs .section-tab:not([aria-selected="true"]):has(.section-edit-icon:hover){background:transparent}

/* Match the row icon's hit area to the compact palette buttons. */
#section-tabs .section-tab>.section-edit-icon{flex-basis:calc(var(--control-size) - 8px);width:calc(var(--control-size) - 8px);height:calc(var(--control-size) - 8px);margin-left:calc((23px - var(--control-size))/2);margin-right:calc((23px - var(--control-size))/2)}

/* Explicit rename and delete actions share the compact menu control size. */
.section-menu-row>.menu-row-action,.notebook-menu-row>.menu-row-action,.notebook-menu-row>.notebook-delete{display:flex;align-items:center;justify-content:center;flex:0 0 calc(var(--control-size) - 8px);width:calc(var(--control-size) - 8px);min-width:calc(var(--control-size) - 8px);height:calc(var(--control-size) - 8px);min-height:calc(var(--control-size) - 8px);margin:0;padding:0;border-radius:6px;color:#a3a3a3;opacity:1;pointer-events:auto}
.menu-row-action:hover,.menu-row-action:focus-visible{background:#f5f5f5}
.section-delete:hover,.section-delete:focus-visible{color:#dc3434;background:rgb(220 52 52 / 10%)}
.section-menu-row>.section-tab{min-width:0;flex:1}
.section-menu-row .section-tab.editing-name{max-width:100%}
.notebook-menu-row .notebook-option{min-width:0}

/* Floating feedback and confirmation windows use a black surface. */
.toast,.notebook-dialog{background:#000;color:#f5f5f5}
.toast button{color:#fff}
.notebook-dialog h2,.notebook-dialog #notebook-trash-title,.notebook-dialog .trashed-notebook-name{color:#f5f5f5}
.notebook-dialog .footer-button{color:#ddd}
.notebook-dialog .footer-button:hover,.notebook-dialog .dialog-button{background:#242424;color:#f5f5f5}
.notebook-dialog .dialog-button:hover{background:#333}
.notebook-dialog .dialog-button.danger{background:rgb(248 113 113 / 18%);color:#f87171}
.notebook-dialog .dialog-button.danger:hover{background:rgb(248 113 113 / 25%)}
.notebook-dialog .trashed-notebook{border-bottom-color:#292929}
.notebook-dialog :focus-visible{outline-color:#ccc}

/* Search the full local Lucide catalog from the existing icon block. */
.section-icon-picker{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:10px 4px 4px}
.section-icon-picker[hidden]{display:none}
.section-icon-search{width:100%;min-width:0;height:32px;padding:0 8px;border:1px solid #ededed;border-radius:6px;background:#fff;color:#666;font-size:12px;outline-offset:1px}
.section-icon-count{font-size:10px;color:#a3a3a3}
.section-icon-results{display:grid;grid-template-columns:repeat(6,24px);justify-content:space-between;gap:6px;max-height:180px;overflow-y:auto;padding:2px}
.section-icon-results>.footer-button{display:flex;align-items:center;justify-content:center;width:24px;height:24px;min-width:24px;min-height:24px;padding:0;border-radius:6px}
.section-icon-results>.footer-button:hover,.section-icon-results>.footer-button:focus-visible,.section-icon-results>.footer-button[aria-pressed="true"]{background:#f5f5f5}
.section-icon-empty{grid-column:1/-1;font-size:12px;color:#a3a3a3;padding:8px 0}
.section-icon-more{border:0;border-radius:6px;padding:6px;background:transparent;color:#a3a3a3;font-size:11px}
.section-icon-more:hover{background:#f5f5f5}

.section-icon-search:focus,.section-icon-search:focus-visible{outline:none;border-color:#ccc;box-shadow:none}

.section-icon-search,.section-icon-search:focus,.section-icon-search:focus-visible{border-color:#ededed}

/* Use the same Lucide X as the other controls instead of the browser's clear icon. */
.section-icon-search-wrap{position:relative;display:flex;align-items:center}
.section-icon-search{padding-right:32px}
.section-icon-search::-webkit-search-cancel-button,.section-icon-search::-webkit-search-decoration{display:none;-webkit-appearance:none}
.section-icon-search-clear{position:absolute;right:4px;top:4px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:transparent;color:#a3a3a3;cursor:pointer}
.section-icon-search-clear[hidden]{display:none}
.section-icon-search-clear:hover{background:#f5f5f5}
.section-icon-search-clear svg{width:15px;height:15px;stroke-width:2}

/* Reserve fixed action columns so renaming cannot shift adjacent controls. */
.notebook-menu,.notebook-menu:has(.notebook-option.editing-name){width:260px;min-width:0;max-width:calc(100vw - 16px)}
.notebook-menu-row{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,calc(var(--control-size) - 8px));align-items:center;gap:var(--control-gap)}
.section-menu-row{display:grid;grid-template-columns:minmax(0,1fr) repeat(2,calc(var(--control-size) - 8px));align-items:center;gap:var(--control-gap)}
.notebook-menu-row>.notebook-option,.notebook-menu-row>.notebook-option.editing-name,
.section-menu-row>.section-tab,.section-menu-row>.section-tab.editing-name{width:100%;min-width:0;max-width:100%;box-sizing:border-box;overflow:hidden}
.notebook-menu-row>.notebook-option>span[contenteditable="plaintext-only"],
.section-menu-row>.section-tab>span[contenteditable="plaintext-only"]{flex:1 1 auto;min-width:0;max-width:100%;width:auto;overflow:hidden;text-overflow:clip;white-space:pre}

/* Shared menu geometry and action feedback for notebooks and sections. */
.section-nav,.notebook-menu,.notebook-menu:has(.notebook-option.editing-name){width:260px;min-width:0;max-width:calc(100vw - 16px);padding:6px}
.section-tabs,#notebook-list{gap:var(--control-gap)}
.notebook-menu-row,.section-menu-row{min-height:var(--control-size)}
.notebook-menu-row>.notebook-option,.section-menu-row>.section-tab{height:var(--control-size);min-height:var(--control-size);padding-left:10px;padding-right:10px;gap:var(--icon-label-gap)}
.notebook-menu .notebook-edit:hover,.section-nav .section-edit:hover,.notebook-menu .notebook-edit:focus-visible,.section-nav .section-edit:focus-visible{background:#f5f5f5;color:#a3a3a3}
.notebook-menu .notebook-delete:hover,.section-nav .section-delete:hover,.notebook-menu .notebook-delete:focus-visible,.section-nav .section-delete:focus-visible{color:#dc3434;background:rgb(220 52 52 / 10%)}
.notebook-menu :focus-visible,.section-nav :focus-visible{outline-color:#ccc}

/* Keep the editable name button highlighted for the entire rename session. */
.notebook-menu-row>.notebook-option.editing-name,
.section-menu-row>.section-tab.editing-name{background:#f5f5f5}
.notebook-menu-row>.notebook-option.editing-name[aria-checked="true"]{background:color-mix(in srgb,var(--row-color,#a3a3a3) 10%,transparent)}
.section-menu-row>.section-tab.editing-name[aria-selected="true"]{background:color-mix(in srgb,var(--section-color,#a3a3a3) 10%,transparent)}

.task-marker[data-priority="next"]{background:transparent}

/* The When row now contains only its five assigned categories. */
.filter-panel{width:calc(5 * var(--control-size) + 4 * var(--control-gap))}

/* Content types and When filters sit above the list, on opposite sides. */
.content-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:48px;margin:0 0 8px}
.content-toolbar .app-mode-switch,.content-toolbar .center-actions{position:static;display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;width:auto;height:auto;margin:0;padding:0;gap:var(--control-gap);transform:none;border:0}
.content-toolbar .center-actions{margin-left:auto;justify-content:flex-end}
.content-toolbar .footer-button{display:flex;align-items:center;justify-content:center;flex:0 0 var(--control-size);width:var(--control-size);height:var(--control-size);padding:0}
.content-toolbar .app-mode-switch[hidden],.content-toolbar .center-actions[hidden]{display:none}
.content-toolbar:has(>.app-mode-switch[hidden]):has(>.center-actions[hidden]){display:none}
@media(max-width:680px){main{margin-top:0}.content-toolbar{gap:8px}}

/* Put the content navbar on the same top baseline as notebook and search. */
.content-toolbar{position:fixed;top:14px;left:max(324px,calc((100vw - 660px)/2 + 24px));width:min(612px,calc(100vw - 388px));min-height:var(--control-size);height:auto;margin:0;z-index:21}
@media(max-width:680px){.content-toolbar{top:60px;left:16px;width:calc(100vw - 32px)}main{margin-top:52px}body:has(.content-toolbar>.app-mode-switch[hidden]):has(.content-toolbar>.center-actions[hidden]) main{margin-top:0}}

/* Give section names the space between the notebook icon and content navbar. */
:root{--content-navbar-left:max(324px,calc((100vw - 660px)/2 + 24px))}
.content-toolbar{left:var(--content-navbar-left)}
.filter-panel{width:calc(var(--content-navbar-left) - 32px);max-width:calc(100vw - 80px);overflow:visible}
.filter-panel .notebook-controls{width:100%;min-width:0}
.sticky-tools .filter-panel .notebook-controls .notebook-select{flex:0 0 var(--control-size);width:var(--control-size);min-width:var(--control-size);max-width:var(--control-size);padding:0;justify-content:center}
.sticky-tools .filter-panel .notebook-controls .notebook-button{flex:1 1 auto;min-width:0;max-width:none;width:auto}
.filter-panel .notebook-controls .notebook-button>.section-current{flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filter-panel .notebook-controls .notebook-button>svg,.filter-panel .notebook-controls .notebook-button>.goals-icon{flex-shrink:0}
.section-nav,.notebook-menu,.notebook-menu:has(.notebook-option.editing-name){width:360px;max-width:calc(100vw - 16px)}
@media(max-width:680px){.filter-panel{width:calc(100vw - 80px)}}

/* Recurring sits at the lower-left window edge. */
.bottom-bar .bottom-primary{display:flex;pointer-events:auto}
.bottom-bar .bottom-inner{justify-content:space-between}

/* Footer destinations display inline in the main content column. */
.bottom-bar .footer-button:focus,.bottom-bar .footer-button:focus-visible{outline:none;box-shadow:none}
.bottom-bar .footer-button:focus-visible,.bottom-bar .footer-button[aria-pressed="true"]{background:#f5f5f5}
.utility-open .content-toolbar{display:none}
#tasks[hidden],form.add[hidden],.utility-panel[hidden]{display:none}
.utility-panel{padding-top:24px;color:#666}
.utility-panel h2{margin:0 0 20px;font-size:14px;font-weight:500;color:#a3a3a3}
.utility-panel .utility-empty{margin:0;padding:20px 0;font-size:13px;color:#a3a3a3}
.utility-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--list-row-height);padding:12px 0;border-bottom:1px solid #ededed}
.utility-label{min-width:0;flex:1;font-size:14px;overflow-wrap:anywhere}
.utility-list .trashed-notebook-name{color:#555}
.utility-list .trashed-notebook{border-color:#ededed}
.utility-panel .dialog-button{flex-shrink:0}

/* Footer views hide the notebook context and reuse its heading typography. */
.utility-open .filter-panel{display:none}
.utility-panel h2{font-family:var(--title-font);font-size:11px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;line-height:15px;color:#a3a3a3;transform:translateY(.5px)}

/* Keep short section buttons compact while allowing long labels to grow. */
.sticky-tools .filter-panel .notebook-controls .notebook-button{flex:0 1 auto;width:max-content;max-width:calc(100% - var(--control-size) - var(--control-gap));min-width:0}

/* Notes share the X marker's geometry and hover area. */
.bullet[data-kind="note"]{position:relative;display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin-left:-4px;margin-right:-4px;padding:0;border-radius:6px;font-size:0;line-height:1}
.bullet[data-kind="note"]::before{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.bullet[data-kind="note"]:hover{background:#f5f5f5}

/* Compact by default; JS grows the section menu to fit its longest label. */
.section-nav{width:220px;min-width:0;max-width:min(420px,calc(100vw - 16px))}

.bullet[data-kind="note"]::before{width:10px}

/* Notebook menus grow and shrink by their labels, like section menus. */
.notebook-menu,.notebook-menu:has(.notebook-option.editing-name){width:220px;min-width:0;max-width:min(420px,calc(100vw - 16px))}

/* Grow menus to their text width; only the viewport limits their size. */
.section-nav,.notebook-menu,.notebook-menu:has(.notebook-option.editing-name){max-width:calc(100vw - 16px)}

/* A little more breathing room between names and their icons. */
.notebook-menu .notebook-option,#section-tabs .section-tab,
.sticky-tools .filter-panel .notebook-controls .notebook-select,
.sticky-tools .filter-panel .notebook-controls .notebook-button{gap:10px}

/* Shared task rows retain the normal list layout in all footer views. */
.utility-list .task{color:#222}
.utility-list .task.done,.utility-list .task.done .label{color:#ccc}
.utility-list .trash-task .label{cursor:default}
.utility-list .trash-task .restore:hover{color:#666;background:#f5f5f5}

.utility-list .notebook-marker{display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin-left:-4px;margin-right:-4px;border-radius:6px;line-height:1}
.utility-list .trash-notebook .label{cursor:default}

/* Adobe project: T.26 Carbon for headings and notebook/section names. */
:root{--title-font:"t26-carbon",Menlo,Monaco,"Courier New",monospace}
h1,h2,h3,h4,h5,h6,.brand,.eyebrow{font-family:var(--title-font)}

/* Shared size for Carbon headings and notebook/section labels. */
h1,h2,h3,h4,h5,h6,.brand,.eyebrow,.notebook-button .list-name,.notebook-option>span,.notebook-editor input[name="name"],#direct-notebook-name,.section-tab,#section-name,#notebook-trash-title,.notebook-controls .list-name,.notebook-controls .section-current,#notebook-name,.utility-panel h2{font-size:13px}

/* Slightly tighter Carbon titles and names. */
h1,h2,h3,h4,h5,h6,.brand,.eyebrow,.notebook-button .list-name,.notebook-option>span,.notebook-editor input[name="name"],#direct-notebook-name,.section-tab,#section-name,#notebook-trash-title,.notebook-controls .list-name,.notebook-controls .section-current,#notebook-name,.utility-panel h2{letter-spacing:1px}

.today-day{font-family:var(--title-font);font-weight:400}

.today-day,.filter-panel .today-day{font-size:13px}

/* Consistent weight for all Carbon text. */
h1,h2,h3,h4,h5,h6,.brand,.eyebrow,.notebook-button .list-name,.notebook-option>span,.notebook-editor input[name="name"],#direct-notebook-name,.section-tab,#section-name,#notebook-trash-title,.notebook-controls .list-name,.notebook-controls .section-current,#notebook-name,.utility-panel h2,.today-day{font-weight:500}

/* Task and note text, including shared utility views. */
:is(#tasks,.utility-list) .task:not(.trash-notebook) .label{color:#265acc}
:is(#tasks,.utility-list) .task.done .label,:is(#tasks,.utility-list) .task.trash-task .label{color:#a8c2f7}

/* Match completed and deleted entry markers to their text. */
:is(#tasks,.utility-list) .task.done .bullet,:is(#tasks,.utility-list) .task.done .task-marker:not(:empty),:is(#tasks,.utility-list) .task.trash-task .bullet,:is(#tasks,.utility-list) .task.trash-task .task-marker:not(:empty){color:#a8c2f7}

/* Neutral task circles. */
.task:not(.done) .task-marker[data-priority="normal"],.task:not(.done) .task-marker[data-priority="next"]{color:#d4d4d4}

/* Hover the task circle without a button background. */
.task .task-marker:hover{background:transparent}
.task:not(.done) .task-marker[data-priority="normal"]:hover,.task:not(.done) .task-marker[data-priority="next"]:hover{color:#265acc}

/* Completed check icons use the normal text blue. */
:is(#tasks,.utility-list) .task.done .task-marker:not(:empty){color:#265acc}
.task.done .task-marker svg{color:inherit;stroke:currentColor}

/* A blue circle marks a task in progress. */
.task:not(.done) .task-marker[data-in-progress="true"][data-priority]{color:#265acc}
.task:not(.done) .task-marker[data-in-progress="true"]::before{background:transparent}

/* Importance sits in the margin and does not change task state markers. */
.task{position:relative}
.task-importance{position:absolute;left:-25px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:16px;height:16px;color:#265acc;pointer-events:none}
.task-importance svg{width:15px;height:15px}
.task-importance[data-level="2"]{color:#f28c18}
.task-importance[data-level="3"]{color:#dc3434}
.task.done .task-importance,.task.trash-task .task-importance{color:#a8c2f7}

/* Compact content rows; longer text can still wrap. */
.task,.utility-row{min-height:46px;padding-top:6.5px;padding-bottom:6.5px}
.add.bottom{height:46px;min-height:46px}

/* Letter spacing for task and note content. */
.task .label,#new,#new-bottom{letter-spacing:.4px}

/* Keep entry editing and composition in the normal text blue. */
:is(#tasks,.utility-list) .task .label:focus,#new,#new-bottom,.task .edit{color:#265acc;caret-color:#265acc}

/* Adobe Mynerve for task and note content. */
.task .label,#new,#new-bottom,.task .edit{font-family:"hanken-grotesk",sans-serif}

.task .label,#new,#new-bottom,.task .edit{font-size:16px}

/* Center content consistently between row dividers. */
.task{align-items:center}
.task .label{top:0;align-self:center;line-height:1.2}

/* Note dashes match idle task circles. */
:is(#tasks,.utility-list) .task:not(.done):not(.trash-task) .bullet[data-kind="note"]{color:#d4d4d4}

/* Text dropdown navigation aligned with the content column. */
.text-content-toolbar{position:relative;top:auto;left:auto;width:100%;min-height:32px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 16px;z-index:22}
.content-toolbar.text-content-toolbar:has(>.app-mode-switch[hidden]):has(>.center-actions[hidden]){display:flex}
.content-toolbar-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;flex:1}
.text-content-toolbar .notebook-controls{position:static;display:flex;align-items:center;gap:8px;width:auto;max-width:100%;height:auto;min-width:0}
.text-content-toolbar .notebook-controls .footer-button{display:flex;flex:0 1 auto;width:auto;min-width:0;max-width:190px;height:32px;padding:0 10px;gap:0;font-family:var(--title-font);font-size:13px;font-weight:500;letter-spacing:1px;line-height:16px;text-transform:uppercase}
.text-content-toolbar .notebook-controls .list-name,.text-content-toolbar .notebook-controls .section-current{display:block;font-family:var(--title-font);font-size:13px;font-weight:500;letter-spacing:1px;line-height:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.text-content-toolbar .notebook-controls svg,.text-content-toolbar .notebook-controls .goals-icon,.text-content-toolbar .notebook-slash{display:none}
.text-filter-trigger{display:flex;align-items:center;height:32px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:#a3a3a3;font-family:var(--title-font);font-size:13px;font-weight:500;letter-spacing:1px;line-height:16px;text-transform:uppercase;white-space:nowrap}
.text-filter-trigger:hover,.text-filter-trigger[aria-expanded="true"]{background:#f5f5f5}
.text-filter-trigger[hidden],.text-content-toolbar .footer-button[hidden]{display:none}
.text-content-toolbar>.text-filter-trigger{margin-left:auto}
.text-filter-menu.app-mode-switch,.text-filter-menu.center-actions,.text-filter-menu.status-filter-options{position:fixed;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:4px;z-index:50;width:max-content;min-width:150px;height:auto;max-height:calc(100vh - 32px);overflow-y:auto;padding:6px;margin:0;border:1px solid #ededed;border-radius:12px;background:#fff;box-shadow:0 10px 30px #0000000a;transform:none}
.text-filter-menu[hidden]{display:none}
.text-filter-menu .footer-button{display:flex;align-items:center;justify-content:flex-start;width:100%;height:32px;min-height:32px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:#a3a3a3;font-family:var(--title-font);font-size:13px;font-weight:500;letter-spacing:1px;text-transform:uppercase;white-space:nowrap}
.text-filter-menu .footer-button:hover,.text-filter-menu .footer-button[aria-pressed="true"]{color:#a3a3a3;background:#f5f5f5}
.utility-open .text-content-toolbar{display:none}
@media(max-width:680px){main{margin-top:0}.text-content-toolbar{top:auto;left:auto;width:100%;gap:8px}}

.text-filter-menu .today-button{flex-direction:row;align-items:center;justify-content:flex-start}

/* Focus indicators remain neutral throughout the interface. */
:focus-visible{outline-color:#d4d4d4;accent-color:#a3a3a3}

/* No focus outlines or focus rings, per user preference. */
*:focus,*:focus-visible{outline:none!important}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[contenteditable]:focus-visible{box-shadow:none!important}

/* Consistent Carbon weight across headings and text navigation. */
h1,h2,h3,h4,h5,h6,.brand,.eyebrow,.notebook-button .list-name,.notebook-option>span,.notebook-editor input[name="name"],#direct-notebook-name,.section-tab,#section-name,#notebook-trash-title,.notebook-controls .list-name,.notebook-controls .section-current,#notebook-name,.utility-panel h2,.today-day,.text-content-toolbar .notebook-controls .footer-button,.text-content-toolbar .notebook-controls .list-name,.text-content-toolbar .notebook-controls .section-current,.text-filter-trigger,.text-filter-menu .footer-button{font-weight:600}

/* Read the left navigation as Notebook / Section – Type. */
.text-content-toolbar .notebook-controls{background:transparent;padding:0;gap:4px}
.text-content-toolbar .notebook-slash,.text-content-toolbar .type-separator{display:block;color:#a3a3a3;font-family:var(--title-font);font-size:13px;font-weight:600;letter-spacing:1px;line-height:16px;flex-shrink:0}
.text-content-toolbar .notebook-slash[hidden],.text-content-toolbar .type-separator[hidden]{display:none}
.text-content-toolbar .notebook-controls .footer-button{background:transparent;box-shadow:none}
button[aria-pressed="true"]:not(.editing-name),button[aria-checked="true"]:not(.editing-name),button[aria-selected="true"]:not(.editing-name),.text-filter-trigger[aria-expanded="true"]{background:transparent!important}
.text-content-toolbar .notebook-controls .footer-button:hover,.text-filter-trigger:hover,button[aria-pressed="true"]:not(.editing-name):hover,button[aria-checked="true"]:not(.editing-name):hover,button[aria-selected="true"]:not(.editing-name):hover{background:#f5f5f5!important}

/* One centered content column with the navigation at the window's top inset. */
header.sticky-tools{height:0;min-height:0;padding:0}
body main{width:100%;max-width:660px;margin:14px auto 60px;padding-top:0}
.text-content-toolbar{margin-bottom:8px;align-items:center}
.content-toolbar-left{gap:4px;align-items:center}
.text-content-toolbar .notebook-controls .list-name,.text-content-toolbar .notebook-controls .section-current,.text-content-toolbar .notebook-slash,.text-content-toolbar .type-separator{transform:none;position:static;line-height:16px}
.text-content-toolbar .notebook-select{margin-left:-10px}
.text-content-toolbar>.text-filter-trigger{margin-right:-10px}
main form.add{height:46px;min-height:46px;padding:0;align-items:center}
#new,#new-bottom{height:100%;padding:0 0 0 38px;line-height:24px}
.utility-panel{padding-top:0}
@media(max-width:680px){body main{margin-top:14px}.text-content-toolbar{top:auto;left:auto;width:100%}}

/* Notebook artwork and a visually centered navigation dash. */
.text-content-toolbar .notebook-controls .notebook-select{gap:8px}
.text-content-toolbar .notebook-controls .notebook-select>svg{display:block;flex:0 0 15px;width:15px;height:15px;transform:none;align-self:center}
.text-content-toolbar .type-separator{position:relative;width:8px;height:16px;font-size:0;letter-spacing:0;line-height:0}
.text-content-toolbar .type-separator::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transform:translateY(-50%)}

/* Both navigation separators use the same typographic treatment. */
.text-content-toolbar .type-separator{position:static;width:auto;height:auto;font-family:var(--title-font);font-size:13px;font-weight:600;letter-spacing:1px;line-height:16px;transform:none}
.text-content-toolbar .type-separator::before{content:none}

/* Optical correction for Carbon’s small, low en dash. */
.text-content-toolbar .type-separator{font-size:16px;line-height:16px;transform:translateY(-2px)}

/* Matching separator strokes, centered on the uppercase navigation text. */
.text-content-toolbar .notebook-slash,.text-content-toolbar .type-separator{display:block;position:relative;flex:0 0 12px;width:12px;height:16px;font-size:0;line-height:0;letter-spacing:0;transform:none;color:#a3a3a3;opacity:.55}
.text-content-toolbar .notebook-slash::before,.text-content-toolbar .type-separator::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:1.5px;border-radius:0;background:currentColor;transform:translate(-50%,-50%)}
.text-content-toolbar .notebook-slash::before{width:13px;transform:translate(-50%,-50%) rotate(-65deg)}
.text-content-toolbar .notebook-slash[hidden],.text-content-toolbar .type-separator[hidden]{display:none}

/* Use matching slashes between every navigation level. */
.text-content-toolbar .type-separator::before{width:13px;transform:translate(-50%,-50%) rotate(-65deg)}

/* Text-only notebook selection, including All. */
.text-content-toolbar .notebook-controls .notebook-select>svg,.notebook-menu .notebook-option>svg{display:none}
.text-content-toolbar .notebook-controls .notebook-select{gap:0}
.notebook-menu .notebook-option{gap:0}

/* Reveal row management controls only while interacting with that row. */
.notebook-menu-row>:is(.notebook-color-control,.menu-row-action,.notebook-delete),.section-menu-row>.menu-row-action{opacity:0;pointer-events:none}
.notebook-menu-row:hover>:is(.notebook-color-control,.menu-row-action,.notebook-delete),.notebook-menu-row:focus-within>:is(.notebook-color-control,.menu-row-action,.notebook-delete),.section-menu-row:hover>.menu-row-action,.section-menu-row:focus-within>.menu-row-action{opacity:1;pointer-events:auto}

/* Text-only section choices, including Fleeting and Goals. */
.text-content-toolbar .notebook-controls .notebook-button>svg,.text-content-toolbar .notebook-controls .notebook-button>.goals-icon,#section-tabs .section-tab>svg,#section-tabs .section-tab>.goals-icon,#section-tabs .section-tab>.section-edit-icon{display:none}
#section-tabs .section-tab{gap:0}

/* Content type and When form a single right-aligned group. */
.content-toolbar-right{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-left:auto;margin-right:-10px;min-width:0}
.content-toolbar-right .text-filter-trigger{margin:0}
.content-toolbar-right .type-separator{flex-shrink:0}

/* Neutral menu labels and controls, independent of notebook and action colors. */
:is(.notebook-menu,.section-nav,.text-filter-menu){color:#a3a3a3;--row-color:#a3a3a3;--section-color:#a3a3a3}
:is(.notebook-menu,.section-nav,.text-filter-menu) :is(button,input,[contenteditable],svg,.list-name){color:#a3a3a3!important}
:is(.notebook-menu,.section-nav,.text-filter-menu) button:hover{color:#a3a3a3!important;background:#f5f5f5!important}
.notebook-menu .notebook-color-control span{background:#a3a3a3!important;border-color:#a3a3a3!important}
:is(.notebook-menu,.section-nav) .goals-icon svg{filter:none!important;animation:none!important}

/* Notebook and section labels stay neutral in the navigation as well. */
.text-content-toolbar .notebook-controls,.text-content-toolbar .notebook-controls :is(button,.list-name,.section-current,svg){color:#a3a3a3!important}

/* Notebook menus expose only rename and trash actions. */
.notebook-menu-row{grid-template-columns:minmax(0,1fr) repeat(2,calc(var(--control-size) - 8px))}
.notebook-menu .notebook-option>span,.section-nav .section-tab>span{color:#a3a3a3!important}

/* Slightly smaller interface icons; entry markers retain their size. */
svg:not(.bullet svg):not(.task-importance svg){width:13px!important;height:13px!important;flex-shrink:0}

/* Hover changes icon color without highlighting button surfaces. */
button:hover,.bullet:hover,.text-filter-trigger:hover,.text-content-toolbar .notebook-controls .footer-button:hover,button[aria-pressed="true"]:not(.editing-name):hover,button[aria-checked="true"]:not(.editing-name):hover,button[aria-selected="true"]:not(.editing-name):hover,:is(.notebook-menu,.section-nav,.text-filter-menu) button:hover{background:transparent!important;box-shadow:none!important}
button:hover svg,.icon:hover svg,.section-edit-icon:hover svg,:is(.notebook-menu,.section-nav,.text-filter-menu) button:hover svg{color:#525252!important}

/* Entry delete icons remain red, including on hover. */
.task .icon.delete svg,.task .icon.delete:hover svg{color:#dc3434!important}

/* Regular text weight inside dropdown menus. */
:is(.notebook-menu,.section-nav,.text-filter-menu) :is(button,input,[contenteditable],span){font-weight:400!important}

/* Regular weight also applies to the visible navigation labels. */
.text-content-toolbar .notebook-controls :is(button,.list-name,.section-current),.text-content-toolbar .text-filter-trigger{font-weight:500}

/* Important active tasks use the priority color for their text. */

/* Task circle hover follows the active entry text color. */
:is(#tasks,.utility-list) .task:not(.done):not(.trash-task) .task-marker:hover{color:#265acc}

/* A single exclamation mark flags a task in red. */
:is(#tasks,.utility-list) .task:not(.done):not(.trash-task):has(.task-marker)[data-importance="1"] .label{color:#dc3434;caret-color:#dc3434}
:is(#tasks,.utility-list) .task:not(.done):not(.trash-task)[data-importance="1"] .task-marker:hover{color:#dc3434}

/* Menu labels turn black on hover without a background. */
.text-content-toolbar .notebook-controls button:hover,.text-content-toolbar .notebook-controls button:hover :is(.list-name,.section-current),.text-content-toolbar .text-filter-trigger:hover,:is(.notebook-menu,.section-nav,.text-filter-menu) button:hover,:is(.notebook-menu,.section-nav,.text-filter-menu) button:hover :is(span,svg){color:#525252!important;background:transparent!important}

/* Flagged tasks keep a red circle while in progress. */
:is(#tasks,.utility-list) .task:not(.done):not(.trash-task)[data-importance="1"] .task-marker[data-in-progress="true"]{color:#dc3434}

/* Slashes follow the navigation typography and color. */
.text-content-toolbar .notebook-slash,.text-content-toolbar .type-separator{position:static;flex:0 0 auto;width:auto;height:16px;font-family:var(--title-font);font-size:13px;font-weight:500;line-height:16px;letter-spacing:1px;color:#a3a3a3;opacity:1;transform:none}
.text-content-toolbar .notebook-slash::before,.text-content-toolbar .type-separator::before{content:none}

/* Match the reference's 300ms ease hover transitions. */
:root{--hover-duration:300ms;--hover-easing:ease}
button,.bullet,.notebook-option,.section-tab,.text-filter-trigger,.text-filter-menu .footer-button{transition:color var(--hover-duration) var(--hover-easing),background-color var(--hover-duration) var(--hover-easing),border-color var(--hover-duration) var(--hover-easing),opacity var(--hover-duration) var(--hover-easing)}
button svg,.section-edit-icon svg,.text-content-toolbar :is(.list-name,.section-current),.notebook-option>span,.section-tab>span{transition:color var(--hover-duration) var(--hover-easing)}
.task .actions{transition:opacity var(--hover-duration) var(--hover-easing)}
@media(prefers-reduced-motion:reduce){button,.bullet,.notebook-option,.section-tab,.text-filter-trigger,.text-filter-menu .footer-button,button svg,.section-edit-icon svg,.text-content-toolbar :is(.list-name,.section-current),.notebook-option>span,.section-tab>span,.task .actions{transition:none}}

/* Menu typography uses weight 600 in triggers and dropdowns. */
.text-content-toolbar .notebook-controls :is(button,.list-name,.section-current),.text-content-toolbar .text-filter-trigger{font-weight:600}
:is(.notebook-menu,.section-nav,.text-filter-menu) :is(button,input,[contenteditable],span){font-weight:400!important}

/* Temporarily hide Search and Recurring entry points. */
button[aria-label="Recurring"]{display:none!important}

/* Today gets a 24px sun beside the task, matching the reference icon size. */
.task-today-icon{display:flex;align-items:center;justify-content:center;flex:0 0 24px;width:24px;height:24px;color:#a3a3a3}
:is(#tasks,.utility-list) .task .task-today-icon svg{width:24px!important;height:24px!important}
.task.done .task-today-icon,.task.trash-task .task-today-icon{color:#a8c2f7}

/* Today sits in the left margin; its text is red, with an idle neutral circle. */
.task-today-icon{position:absolute;left:-36px;top:50%;transform:translateY(-50%);pointer-events:none}
.task:not(.done) .task-marker[data-priority="red"]:not([data-in-progress="true"]){color:#d4d4d4}
.task:not(.done) .task-marker[data-priority="red"]::before{background:transparent}
:is(#tasks,.utility-list) .task:not(.done):not(.trash-task):has(.task-marker[data-priority="red"]) .label{color:#dc3434;caret-color:#dc3434}
:is(#tasks,.utility-list) .task:not(.done):not(.trash-task) .task-marker[data-priority="red"]:hover,:is(#tasks,.utility-list) .task:not(.done):not(.trash-task) .task-marker[data-priority="red"][data-in-progress="true"]{color:#dc3434}

/* Today entries are numbered in visible list order. */
.task-today-number{font-family:var(--title-font);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;line-height:24px;letter-spacing:0;text-align:center}

/* Today numbering stays black. */
.task .task-today-number{color:#000}

/* Today uses a text label in the left margin. */
.task .task-today-number{left:auto;right:calc(100% + 16px);width:max-content;min-width:24px;justify-content:flex-end;font-size:13px;letter-spacing:1px;white-space:nowrap;color:#000}

/* A task cancellation X matches the completed check size and stroke. */
.task .actions .cancel-task svg{width:13px!important;height:13px!important;stroke-width:2;color:#a3a3a3!important}
.task .actions .cancel-task:hover svg{color:#dc3434!important}

/* Cancelled entries use an X and share the trash restoration controls. */
.task.cancelled .label{text-decoration:line-through}
.task .task-cancelled-marker svg{width:18px!important;height:18px!important;color:#a8c2f7}

/* Restore matches the task check and cancellation action. */
.task .actions .restore svg{width:13px!important;height:13px!important;stroke-width:2;color:#a3a3a3!important}
.task .actions .restore:hover svg{color:#525252!important}

.task .task-today-number{color:var(--menu-green,#5d904d)}

.status-menu-divider{height:1px;flex-shrink:0;background:#ededed;margin:4px 4px}

/* Keep the first row action at the same offset, even with two actions. */
.task .actions{width:max-content;min-width:40px;justify-content:flex-start;gap:4px;padding-left:8px}

/* Fixed action columns across active, completed, cancelled, and note rows. */
.task .actions{display:grid;grid-template-columns:32px 32px;grid-template-rows:32px;align-content:center;align-items:center;justify-content:start;width:76px;min-width:76px;gap:4px;padding-left:8px}
.task .actions>.delete,.task .actions>.cancel-task{grid-column:1;grid-row:1}
.task .actions>.restore{grid-column:2;grid-row:1}

/* Shared palette for navigation labels and their menu choices. */
:root{--task-text-blue:#265acc;--menu-neutral:var(--palette-neutral,#a3a3a3);--menu-hover:#525252;--menu-blue:var(--palette-indigo,#5e6ad2);--menu-green:var(--palette-sage,#719b77)}
[data-menu-tone]{--menu-tone:var(--menu-neutral)}
[data-menu-tone="all"],[data-menu-tone="next"]{--menu-tone:var(--menu-blue)}
[data-menu-tone="tasks"]{--menu-tone:var(--menu-blue)}
[data-menu-tone="notes"]{--menu-tone:#525252}
[data-menu-tone="someday"]{--menu-tone:#525252}
[data-menu-tone="in-progress"]{--menu-tone:var(--palette-gold)}
[data-menu-tone="completed"],[data-menu-tone="today"]{--menu-tone:var(--menu-green)}
[data-menu-tone="scheduled"]{--menu-tone:var(--palette-violet)}
[data-menu-tone="now"]{--menu-tone:var(--palette-rose)}
[data-menu-tone="cancelled"]{--menu-tone:var(--palette-mauve)}
.text-filter-menu button.footer-button[data-menu-tone],:is(.text-content-toolbar,.bottom-content-filters) .text-filter-trigger[data-menu-tone]{color:var(--menu-tone)!important}
.text-filter-menu button.footer-button[data-menu-tone]:hover,:is(.text-content-toolbar,.bottom-content-filters) .text-filter-trigger[data-menu-tone]:hover{color:var(--menu-hover)!important}

/* Notebook colors are editable again; row actions remain hover-only. */
.notebook-menu-row{grid-template-columns:minmax(0,1fr) repeat(3,calc(var(--control-size) - 8px))}
.notebook-menu .notebook-menu-row .notebook-color-control span{background:var(--row-color,#a3a3a3)!important;border-color:var(--row-color,#a3a3a3)!important}
.notebook-menu .notebook-menu-row .notebook-option>span{color:var(--row-color,#a3a3a3)!important}
.text-content-toolbar .notebook-controls .notebook-select .list-name{color:var(--notebook-color,#a3a3a3)!important}
.notebook-menu .notebook-menu-row .notebook-option:hover>span,.text-content-toolbar .notebook-controls .notebook-select:hover .list-name{color:#525252!important}

/* Palette swatches retain their actual color during hover. */
.notebook-menu .notebook-palette .notebook-palette-choice span{background:var(--palette-color)!important}

/* Section labels inherit the active notebook color. */
.text-content-toolbar .notebook-controls .notebook-button .section-current{color:var(--notebook-color,#a3a3a3)!important}
.section-nav #section-tabs .section-tab>span{color:var(--section-color,#a3a3a3)!important}
.text-content-toolbar .notebook-controls .notebook-button:hover .section-current,.section-nav #section-tabs .section-tab:hover>span{color:#525252!important}

/* All sections stays neutral, like All notebooks. */
.section-nav #section-tabs .section-tab[data-section="__all__"]>span,.text-content-toolbar .notebook-controls .notebook-button[data-section="__all__"] .section-current{color:#a3a3a3!important}
.section-nav #section-tabs .section-tab[data-section="__all__"]:hover>span,.text-content-toolbar .notebook-controls .notebook-button[data-section="__all__"]:hover .section-current{color:#525252!important}

/* Completed tasks retain their original hue in a lighter tone. */
:is(#tasks,.utility-list) .task.done .task-marker:not(:empty){color:#a8c2f7}
:is(#tasks,.utility-list) .task.done :is(.label,.task-marker){color:#a8c2f7;caret-color:#a8c2f7}
.task.done .task-marker svg{color:inherit!important;stroke:currentColor}

/* Filters follow the edges of the content column. */
.text-content-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap}
.text-content-toolbar>.content-toolbar-left{min-width:0}
.text-content-toolbar>.text-filter-trigger{flex-shrink:0;margin:0 -10px 0 auto}
.bottom-content-filters{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);width:min(612px,calc(100% - 48px));height:32px;display:flex;align-items:center;justify-content:space-between;z-index:22;pointer-events:none}
.bottom-content-filters .text-filter-trigger{pointer-events:auto;margin:0}
.bottom-content-filters [aria-label="Content type"]{margin-left:-10px;margin-right:auto}
.bottom-content-filters [aria-label="Status"]{margin-left:auto;margin-right:-10px}
.utility-open .bottom-content-filters{display:none}

/* Opaque footer keeps scrolling content behind the bottom controls. */
footer.bottom-bar{background:#fff}
.bottom-content-filters{background:#fff}

/* Footer icons share the 32px control height and 14px bottom inset. */
.bottom-bar .footer-button{width:32px;height:32px}
footer.bottom-bar{padding-bottom:14px}

/* Keep notebook, section and When visible while the list scrolls. */
.text-content-toolbar{position:sticky;top:14px;background:#fff}
.text-content-toolbar::before{content:"";position:absolute;inset:-14px 0 -8px;background:#fff;z-index:-1;pointer-events:none}

.when-menu-divider{width:100%;height:1px;min-height:1px;margin:4px 0;border:0;background:#ededed}

[data-menu-tone="recurring"]{--menu-tone:var(--palette-violet)}

/* Confirmation panels inspired by the compact, dark controls on vv.xyz. */
.notebook-dialog{width:min(420px,calc(100vw - 32px));padding:24px;border:1px solid #333;border-radius:4px;background:#171717;color:#a3a3a3;box-shadow:0 16px 64px #0003}
.notebook-dialog::backdrop{background:rgb(0 0 0 / 28%);backdrop-filter:blur(3px)}
.notebook-dialog h2,.notebook-dialog #notebook-trash-title{font-family:var(--title-font);font-size:13px;font-weight:600;letter-spacing:1px;line-height:1.6;text-transform:uppercase;color:#f5f5f5;overflow-wrap:anywhere}
.notebook-dialog p{margin:16px 0 24px;font-family:"hanken-grotesk",sans-serif;font-size:14px;line-height:1.6;color:#a3a3a3;overflow-wrap:anywhere}
.notebook-dialog .dialog-actions{gap:8px;padding-top:16px;border-top:1px solid #333;flex-wrap:wrap}
.notebook-dialog .dialog-actions button{min-height:32px;padding:7px 12px;border:1px solid #383838;border-radius:3px;background:#222;color:#a3a3a3;font-family:var(--title-font);font-size:11px;font-weight:600;letter-spacing:1px;line-height:16px;text-transform:uppercase;transition:color .3s ease,background-color .3s ease,border-color .3s ease}
.notebook-dialog .dialog-actions button:hover{background:#2c2c2c!important;border-color:#555;color:#f5f5f5}
.notebook-dialog .dialog-actions button.danger{background:#222;color:#dc7777}
.notebook-dialog .dialog-actions button.danger:hover{background:#342222!important;border-color:#754242;color:#f3a1a1}

/* Undo notifications share the confirmation panel styling. */
.toast{padding:10px 12px 10px 16px;gap:20px;border:1px solid #333;border-radius:4px;background:#171717;color:#a3a3a3;box-shadow:0 12px 40px #0002;font-family:"hanken-grotesk",sans-serif;font-size:14px;line-height:1.5}
.toast button{flex-shrink:0;min-height:32px;padding:7px 12px;border:1px solid #383838;border-radius:3px;background:#222;color:#a3a3a3;font-family:var(--title-font);font-size:11px;font-weight:600;letter-spacing:1px;line-height:16px;text-transform:uppercase}
.toast button:hover{background:#2c2c2c!important;border-color:#555;color:#f5f5f5}

/* Cancelled and deleted rows retain a lighter version of their original hue. */
:is(#tasks,.utility-list) .task.trash-task:not(.done):is([data-importance="1"],:has(.bullet[data-priority="red"])) :is(.label,.bullet){color:#eab0b0}
.task.trash-task .task-cancelled-marker svg{color:inherit!important;stroke:currentColor}

/* Notes use neutral text, including while editing. */
:is(#tasks,.utility-list) .task:has(.bullet[data-kind="note"]) .label{color:#525252;caret-color:#525252}

.notebook-menu .archived-notebooks-option{width:100%;justify-content:flex-start;padding:0 10px;font-family:var(--title-font);font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#a3a3a3}
[data-menu-tone="deleted"]{--menu-tone:var(--palette-mauve)}

.top-bar .top-actions{position:fixed;top:14px;right:14px;z-index:30}
.top-bar button[aria-label="Cerca"]{display:flex;width:32px;height:32px}
.task-search{position:fixed;top:52px;right:24px;z-index:40;width:min(280px,calc(100vw - 48px));padding:8px;border:1px solid #ededed;border-radius:4px;background:#fff;box-shadow:0 10px 30px #0000000a}
.task-search[hidden]{display:none}
.task-search input{width:100%;height:32px;padding:0 8px;border:1px solid #ededed;border-radius:3px;background:#fff;color:#525252;font-size:14px;outline:none}

/* Per-task scheduling lives outside the row, aligned to its text. */
.task .task-schedule{position:absolute;right:100%;top:50%;transform:translateY(-50%);height:32px;padding:0 16px 0 4px;border:0;background:transparent;color:#a3a3a3;font-family:var(--title-font);font-size:11px;font-weight:600;letter-spacing:1px;line-height:16px;text-transform:uppercase;opacity:0;pointer-events:none}
.task:hover .task-schedule,.task:focus-within .task-schedule{opacity:1;pointer-events:auto}
.task .task-schedule:hover{color:#525252}
.task:has(.task-schedule):hover .task-today-number,.task:has(.task-schedule):focus-within .task-today-number{opacity:0}
.task-schedule-menu.text-filter-menu{position:fixed;display:flex;flex-direction:column;align-items:stretch;gap:4px;width:190px;padding:6px;z-index:50;border:1px solid #ededed;border-radius:4px;background:#fff;box-shadow:0 10px 30px #0000000a}
.schedule-date-label{display:flex;flex-direction:column;gap:8px;padding:8px 10px;color:#a3a3a3;font-family:var(--title-font);font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase}
.schedule-date-label input{width:100%;padding:6px;border:1px solid #ededed;border-radius:3px;color:#525252;background:#fff;font-family:"hanken-grotesk",sans-serif;font-size:12px;letter-spacing:0}
@media(hover:none){.task .task-schedule{opacity:1;pointer-events:auto}}

.task .task-schedule[aria-expanded="true"]{opacity:1;pointer-events:auto;color:#525252}
.task:has(.task-schedule[aria-expanded="true"]) .task-today-number{opacity:0}

/* Archive navigation remains clickable, and notebook names use title typography. */
.utility-panel .utility-back{position:relative;z-index:31;width:max-content;margin-bottom:8px;pointer-events:auto;cursor:pointer}
.utility-panel .trash-notebook .label{font-family:var(--title-font);font-size:13px;font-weight:600;letter-spacing:1px;line-height:1.6;text-transform:uppercase;color:#a3a3a3;cursor:default}

/* Reveal Schedule when hovering beside a task as well as over its row. */
.task:has(>.task-schedule)::after{content:"";position:absolute;right:100%;top:0;width:110px;height:100%;background:transparent;pointer-events:auto}
.task .task-schedule{z-index:1}
.task .task-schedule{font-size:13px;letter-spacing:1px}

/* All floating menus share Schedule's corner radius. */
.notebook-menu,.section-nav,.text-filter-menu.app-mode-switch,.text-filter-menu.center-actions,.text-filter-menu.status-filter-options,.task-schedule-menu.text-filter-menu,.section-icon-picker,.notebook-palette,.task-search{border-radius:4px}

.task .task-today-number[data-scheduled="true"]{color:var(--palette-violet,#8476bd)}

/* Active Someday task text uses the same neutral tone as notes. */
:is(#tasks,.utility-list) .task:not(.done):not(.trash-task):has(.task-marker[data-priority="gray"]):not([data-importance="1"]) .label{color:#525252;caret-color:#525252}

/* Someday's idle marker stays neutral independently of its text. */
:is(#tasks,.utility-list) .task:not(.done):not(.trash-task) .task-marker[data-priority="gray"]:not([data-in-progress="true"]){color:#d4d4d4}
:is(#tasks,.utility-list) .task:not(.done):not(.trash-task):not([data-importance="1"]) .task-marker[data-priority="gray"]:is(:hover,[data-in-progress="true"]){color:#525252}

/* The date field follows the Schedule menu's type, spacing and icon system. */
.schedule-date-label{gap:8px;font-size:13px;line-height:16px;padding:8px 10px}
.schedule-date-control{display:flex;align-items:center;gap:6px;height:32px;padding:0 8px;border:1px solid #ededed;border-radius:3px;background:#fff;transition:border-color .3s ease}
.schedule-date-control:hover,.schedule-date-control:focus-within{border-color:#d4d4d4}
.schedule-date-label .schedule-date-control input{flex:1;min-width:0;width:0;height:30px;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:#525252;font-family:var(--title-font);font-size:13px;font-weight:600;letter-spacing:1px;line-height:16px;text-transform:uppercase;outline:none;box-shadow:none}
.schedule-date-control input::-webkit-calendar-picker-indicator{display:none}
.schedule-date-control .schedule-calendar-button{display:flex;align-items:center;justify-content:center;flex:0 0 20px;width:20px;height:28px;min-height:0;padding:0;border:0;border-radius:0;background:transparent;color:#a3a3a3}
.schedule-date-control .schedule-calendar-button:hover{color:#525252}
.schedule-calendar-button svg{width:13px;height:13px}

/* An assigned schedule remains visible and is itself the edit control. */
.task .task-schedule[data-assigned="true"]{opacity:1;pointer-events:auto;color:var(--menu-tone)}
.task .task-schedule[data-assigned="true"]:hover,.task .task-schedule[data-assigned="true"][aria-expanded="true"]{color:#525252}

/* App-styled calendar replaces the browser's native date popup. */
.task-schedule-menu.calendar-open{width:260px;max-height:calc(100dvh - 16px);overflow:auto}
.task-schedule-menu .schedule-date-trigger{justify-content:space-between;width:100%;text-align:left;color:#a3a3a3;font-family:var(--title-font);font-size:13px;font-weight:600;letter-spacing:1px;cursor:pointer}
.schedule-date-trigger:hover{color:#525252}
.schedule-date-trigger>span:last-child{display:flex;align-items:center}
.schedule-date-trigger svg{width:13px;height:13px}
.schedule-calendar{margin-top:4px;padding-top:8px;border-top:1px solid #ededed;color:#525252;letter-spacing:0}
.schedule-calendar[hidden]{display:none}
.calendar-heading{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-bottom:8px}
.calendar-heading>span{font-size:12px;text-align:center;letter-spacing:1px}
.schedule-calendar button{display:flex;align-items:center;justify-content:center;min-width:0;padding:0;border:0;border-radius:3px;background:transparent;color:#a3a3a3;font-family:var(--title-font);font-size:12px;font-weight:600;line-height:1;letter-spacing:0}
.calendar-month{width:28px;height:28px;flex-shrink:0}
.calendar-month svg{width:13px;height:13px}
.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.calendar-day,.calendar-weekday{height:28px;display:flex;align-items:center;justify-content:center}
.calendar-weekday{font-size:10px;color:#a3a3a3}
.schedule-calendar button:hover,.schedule-calendar button:focus-visible{color:#525252;text-decoration:underline;text-underline-offset:4px}
.schedule-calendar .calendar-day[aria-pressed="true"]{color:var(--palette-violet,#8476bd);text-decoration:underline;text-underline-offset:4px}
.schedule-calendar .calendar-day[aria-current="date"]{color:var(--menu-green)}

/* Scheduled dates stay on one line beside the task. */
.task .task-schedule{width:max-content;max-width:none;white-space:nowrap;flex-shrink:0}

/* Archive heading and back label share the content column's left edge. */
.utility-panel .utility-back{padding-left:0;padding-right:0;margin-left:0;margin-bottom:40px;justify-content:flex-start}
.utility-panel .utility-back+h2{margin-left:0;padding-left:0}
.utility-panel .utility-back:hover,.utility-panel .utility-back:focus-visible{color:#525252;background:transparent}

/* Search uses the same compact field and typography as the floating menus. */
.task-search{padding:6px;right:14px}
.task-search input{height:32px;padding:0 32px 0 10px;border:1px solid #ededed;border-radius:3px;font-family:var(--title-font);font-size:13px;font-weight:600;letter-spacing:1px;line-height:16px;color:#525252;caret-color:#525252;box-shadow:none;transition:border-color .3s ease}
.task-search input::placeholder{color:#a3a3a3;text-transform:uppercase;opacity:1}
.task-search input:hover,.task-search input:focus{border-color:#d4d4d4;outline:none;box-shadow:none}
.task-search input::-webkit-search-cancel-button,.task-search input::-webkit-search-decoration{display:none;-webkit-appearance:none}
.task-search-clear{position:absolute;right:10px;top:10px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:3px;background:transparent;color:#a3a3a3}
.task-search-clear[hidden]{display:none}
.task-search-clear:hover{color:#525252}
.task-search-clear svg{width:13px;height:13px}

/* Search expands inline like the reference's sign-in field. */
.top-actions.search-open button[aria-label="Cerca"]{display:none}
.top-actions .task-search{position:relative;top:auto;right:auto;width:min(240px,calc(100vw - 48px));height:32px;margin:0;padding:0;border:1px solid #383838;border-radius:3px;background:#242424;box-shadow:none}
.top-actions .task-search input{height:30px;padding:0 40px 0 10px;border:0;border-radius:3px;background:transparent;color:#f5f5f5;caret-color:#f5f5f5;outline:none;box-shadow:none}
.top-actions .task-search input::placeholder{color:#888}
.top-actions .task-search-clear{top:0;right:0;width:32px;height:30px;border-left:1px solid #383838;border-radius:0;background:#171717;color:#888}
.top-actions .task-search-clear:hover{color:#f5f5f5}
header.sticky-tools:has(.search-open){z-index:40}
@media(min-width:681px){body:has(.top-actions.search-open) .text-content-toolbar>.text-filter-trigger{margin-right:max(-10px,calc(566px - 50vw))}}

/* Keep the reference's inline structure with the app's light palette. */
.top-actions .task-search{background:#fff;border-color:#ededed}
.top-actions .task-search input{color:#525252;caret-color:#525252}
.top-actions .task-search input::placeholder{color:#a3a3a3}
.top-actions .task-search-clear{background:transparent;border-left-color:#ededed;color:#a3a3a3}
.top-actions .task-search-clear:hover{color:#525252}

/* A stable control animates from icon width to field width without swapping layout. */
header.sticky-tools{z-index:40}
.top-bar .top-actions{width:32px;height:32px;column-gap:0;transition:width .3s ease}
.top-bar .top-actions.search-open{width:min(240px,calc(100vw - 48px))}
.top-actions>.filter-control{display:none}
.top-bar .top-actions button[aria-label="Cerca"]{position:absolute;top:0;right:0;display:flex;opacity:1;visibility:visible;transition:opacity .2s ease,visibility 0s}
.top-bar .top-actions.search-open button[aria-label="Cerca"]{display:flex;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,visibility 0s .15s}
.top-actions .task-search,.top-actions .task-search[hidden]{position:absolute;inset:0;display:block;width:100%;height:32px;overflow:hidden;border-width:1px;transition:opacity .2s ease,visibility 0s}
.top-actions .task-search{opacity:1;visibility:visible}
.top-actions .task-search[hidden]{width:100%;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,visibility 0s .3s}
.text-content-toolbar>.text-filter-trigger{transition:margin-right .3s ease,color .3s ease,opacity .3s ease}
@media(prefers-reduced-motion:reduce){.top-bar .top-actions,.top-actions .task-search,.top-actions .task-search[hidden],.top-bar .top-actions button[aria-label="Cerca"],.text-content-toolbar>.text-filter-trigger{transition:none}}

/* The outside hover area reveals Schedule without suggesting row dragging. */
.task:has(>.task-schedule)::after{cursor:default}
.task .task-schedule{cursor:pointer}

/* External action spacing is not a draggable part of the row. */
.task .actions{cursor:default}
.task .actions button{cursor:pointer}

/* More compact action targets beside task and note rows. */
.task .actions{grid-template-columns:28px 28px;grid-template-rows:28px;width:68px;min-width:68px}
.task .actions>.icon{width:28px;height:28px}

/* The search layer must not intercept clicks on the content navigation. */
header.sticky-tools{pointer-events:none}
header.sticky-tools .top-actions{pointer-events:auto}

/* Calendar and repeat use Todoist's arrangement with Spazio's visual language. */
.task-schedule-menu.calendar-open,.task-schedule-menu.repeat-open{width:280px;max-height:calc(100dvh - 16px);overflow:auto;overscroll-behavior:contain}
.calendar-heading>span{flex:1;text-align:left;font-size:13px}
.calendar-months{max-height:220px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ededed transparent}
.calendar-month-caption{padding:14px 0 8px;margin:6px 0 4px;border-bottom:1px solid #ededed;font-size:13px;letter-spacing:1px}
.calendar-grid{gap:3px}
.calendar-day,.calendar-weekday{height:30px}
.schedule-calendar .calendar-day[aria-pressed="true"]{color:var(--palette-violet,#8476bd)!important}
.schedule-calendar .calendar-day[aria-current="date"]{color:var(--menu-green)!important}
.task-schedule-menu .schedule-repeat-trigger{gap:8px;justify-content:center;border:1px solid #ededed;border-radius:3px;margin:2px 10px;width:calc(100% - 20px);font-size:13px}
.schedule-repeat-trigger svg{width:13px;height:13px;flex-shrink:0}
.schedule-repeat-panel{padding:6px 4px;border-top:1px solid #ededed;margin-top:6px}
.schedule-repeat-panel[hidden],.repeat-end-date[hidden]{display:none}
.schedule-repeat-panel .footer-button{height:auto;min-height:32px;white-space:normal;font-size:12px;line-height:18px;letter-spacing:.5px;text-align:left}
.repeat-heading{display:block;padding:8px 10px;font-family:var(--title-font);font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#525252}
.repeat-form{display:flex;flex-direction:column;gap:12px;padding:8px 10px}
.repeat-form label{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#a3a3a3;font-family:var(--title-font);font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase}
.repeat-form select,.repeat-form input{min-width:0;max-width:150px;height:30px;padding:0 6px;border:1px solid #ededed;border-radius:3px;background:#fff;color:#525252;font-family:var(--title-font);font-size:11px;font-weight:600;letter-spacing:.5px;outline:none}
.repeat-form input[type="number"]{width:60px}
.repeat-actions{display:flex;justify-content:space-between;border-top:1px solid #ededed;padding-top:6px}
.repeat-actions .footer-button{width:auto}
.repeat-error{color:#be7278;font-family:"hanken-grotesk",sans-serif;font-size:12px;line-height:1.4}
.repeat-error:empty{display:none}

/* Search stays at the window edge on phones, level with the top navigation. */
@media(max-width:680px){
 .top-bar .top-actions{position:fixed;top:14px;right:14px;height:32px;min-height:32px;transform:none;align-items:center}
 .top-bar .top-actions button[aria-label="Cerca"]{width:32px;height:32px;top:0;right:0}
}

.task .label{min-width:0;max-width:100%;overflow-wrap:anywhere}

/* Keep row controls out of the way throughout drag and drop. */
html.dragging .task .task-schedule:not([data-assigned="true"]),html.dragging .task .actions{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:none!important}

/* Tags sit independently in the footer's middle column. */
.bottom-content-filters{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:12px}
.bottom-content-filters [aria-label="Content type"]{grid-column:1;justify-self:start;margin-left:-10px;margin-right:0;min-width:0;max-width:calc(100% + 10px);overflow:hidden;text-overflow:ellipsis}
.bottom-content-filters [aria-label="Tags"]{grid-column:2;justify-self:center;margin:0;color:#a3a3a3}
.bottom-content-filters [aria-label="Tags"][data-empty="true"]{color:#a3a3a3}
.bottom-content-filters [aria-label="Tags"]:hover{color:#525252}
.bottom-content-filters [aria-label="Status"]{grid-column:3;justify-self:end;margin-left:0;margin-right:-10px;min-width:0;max-width:calc(100% + 10px);overflow:hidden;text-overflow:ellipsis}
.text-filter-menu.tag-filter-options{position:fixed;display:flex;flex-direction:column;align-items:stretch;gap:4px;z-index:50;width:max-content;min-width:150px;max-height:calc(100dvh - 32px);overflow:auto;padding:6px;margin:0;border:1px solid #ededed;border-radius:4px;background:#fff;box-shadow:0 10px 30px #0000000a}
.text-filter-menu.tag-filter-options[hidden]{display:none}

/* Footer filters form one left-aligned text navigation. */
.bottom-content-filters{display:flex;justify-content:flex-start;gap:4px}
.bottom-content-filters :is([aria-label="Content type"],[aria-label="Status"],[aria-label="Tags"]){flex:0 1 auto;min-width:0;max-width:none;margin:0;justify-self:auto}
.bottom-content-filters [aria-label="Content type"]{margin-left:-10px}
.footer-filter-slash{flex-shrink:0;display:flex;align-items:center;height:32px;color:#d4d4d4;font-family:var(--title-font);font-size:13px;font-weight:600;line-height:16px;letter-spacing:1px;user-select:none}
.footer-filter-slash:has(+[hidden]),.bottom-content-filters>[hidden]+.footer-filter-slash{display:none}

html.dragging .task .task-schedule[data-assigned="true"]{opacity:1!important;visibility:visible!important;pointer-events:none!important}

/* Expanded date/repeat panels must remain within the visible viewport. */
.task-schedule-menu.text-filter-menu{max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.task-schedule-menu.text-filter-menu>*{flex-shrink:0}

/* A recurring task exposes both its date and repeat interval on the row. */
.task .task-schedule[data-repeating="true"]{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:2px;height:44px}
.task-repeat-summary{font-size:10px;font-weight:600;line-height:13px;letter-spacing:.5px;color:#a3a3a3}
@media(max-width:680px){
 .task:has(>.task-schedule[data-assigned="true"]){min-height:62px;padding-top:6.5px;padding-bottom:22.5px}
 .task .task-schedule[data-assigned="true"]{left:38px;right:auto;top:auto;bottom:8px;transform:none;height:16px;padding:0;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;font-size:11px;line-height:14px}
 .task .task-schedule[data-assigned="true"] .task-repeat-summary{font-size:11px;line-height:14px}
}
@media(max-width:680px){.task:has(>.task-schedule[data-assigned="true"])>.bullet{height:32px;line-height:1}}

/* Overdue dates remain visible and share the task urgency colour. */
.task .task-schedule[data-overdue="true"]{color:#dc3434}



/* Typography measured from the Visualize Value manifest reference. */
:root{--ui-font-weight:400;--ui-letter-spacing:.025em;--ui-line-height:1.33}
:is(h1,h2,h3,h4,h5,h6,.brand,.eyebrow,.utility-panel h2,.notebook-dialog h2,.notebook-dialog #notebook-trash-title){font-family:var(--title-font);font-size:13px;font-weight:400!important;letter-spacing:var(--ui-letter-spacing);line-height:var(--ui-line-height)}
button:not(.task-marker):not(.icon):not(.bullet):not(.calendar-day):not(.calendar-month){font-family:var(--title-font);font-size:13px;font-weight:400!important;letter-spacing:var(--ui-letter-spacing);line-height:var(--ui-line-height)}
:is(.notebook-controls .list-name,.notebook-controls .section-current,.notebook-menu .notebook-option>span,.section-nav .section-tab>span,.text-filter-menu .footer-button,.task .task-when-current,.utility-panel .trash-notebook .label){font-family:var(--title-font);font-size:13px;font-weight:400!important;letter-spacing:var(--ui-letter-spacing);line-height:var(--ui-line-height)}
:is(.text-content-toolbar .notebook-slash,.text-content-toolbar .type-separator,.footer-filter-slash,.schedule-date-label,.repeat-heading,.calendar-heading>span,.calendar-month-caption){font-family:var(--title-font);font-size:13px;font-weight:400!important;letter-spacing:var(--ui-letter-spacing);line-height:var(--ui-line-height)}
:is(.task-search input,#notebook-name,#section-name,.notebook-editor input[name="name"],.repeat-form select,.repeat-form input){font-family:var(--title-font);font-weight:400!important;letter-spacing:var(--ui-letter-spacing);line-height:var(--ui-line-height)}
.schedule-calendar button,.repeat-form label,.task-repeat-summary{font-weight:400!important;letter-spacing:var(--ui-letter-spacing);line-height:var(--ui-line-height)}
@media(max-width:680px){.task .task-schedule[data-assigned="true"] .task-when-current{font-size:11px}}
:is(.notebook-menu,.section-nav,.text-filter-menu) span{font-weight:400!important}

/* Navigation separators use the same Carbon glyph and metrics everywhere. */
.text-content-toolbar .notebook-slash,.text-content-toolbar .type-separator,.footer-filter-slash{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:auto;height:32px;margin:0;padding:0;font-family:var(--title-font);font-size:13px;font-weight:400!important;letter-spacing:.025em;line-height:1.33;color:#d4d4d4;opacity:1;transform:none;position:static}
.text-content-toolbar .notebook-slash::before,.text-content-toolbar .type-separator::before{content:none}
.text-content-toolbar .notebook-controls{gap:4px}
.text-content-toolbar .notebook-slash[hidden],.text-content-toolbar .type-separator[hidden]{display:none}

.task-schedule-menu .schedule-date-label>span,.task-schedule-menu .schedule-date-trigger span,.task-schedule-menu .schedule-repeat-trigger span{font-family:inherit;font-size:inherit;font-weight:400!important;letter-spacing:inherit;line-height:inherit}

/* When: compact shortcuts, consistent disclosures and one content panel at a time. */
.task-schedule-menu.text-filter-menu,.task-schedule-menu.calendar-open,.task-schedule-menu.repeat-open{width:280px;padding:8px;gap:2px;box-shadow:0 8px 28px #0000000a}
.task-schedule-menu .when-menu-divider{margin:6px 0;background:#ededed}
.when-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 8px}
.task-schedule-menu .when-quick-choice{height:36px;min-height:36px;padding:0 10px;gap:8px;justify-content:space-between}
.when-choice-check{display:flex;align-items:center;justify-content:center;flex:0 0 13px;margin-left:auto;color:inherit}
.when-choice-check[hidden]{display:none}
.when-choice-check svg{width:13px;height:13px}
.task-schedule-menu.text-filter-menu .when-disclosure{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;min-height:36px;height:auto;margin:0;padding:8px 10px;border:0;border-radius:3px;background:transparent;color:#a3a3a3;text-align:left;cursor:pointer}
.when-disclosure-icon,.when-disclosure-chevron{display:flex;align-items:center;justify-content:center;flex:0 0 13px}
.when-disclosure-icon svg,.when-disclosure-chevron svg{width:13px;height:13px}
.when-disclosure-label{flex:0 0 auto;white-space:nowrap}
.when-disclosure-value{margin-left:auto;min-width:0;text-align:right;font-size:13px;overflow-wrap:anywhere;color:#a3a3a3}
.when-disclosure-value:empty{display:none}
.when-disclosure-chevron{margin-left:auto;transition:transform .2s ease}
.when-disclosure-value:not(:empty)+.when-disclosure-chevron{margin-left:0}
.when-disclosure[aria-expanded="true"]{color:#525252}
.when-disclosure[aria-expanded="true"] .when-disclosure-chevron{transform:rotate(180deg)}
.when-disclosure:hover,.when-disclosure:hover .when-disclosure-value{color:#525252}
.when-date-section>.schedule-calendar{margin:4px 4px 8px;padding:8px 6px 0}
.task-schedule-menu .when-clear{height:36px;min-height:36px;padding:0 10px;color:#a3a3a3}
.task-schedule-menu .when-clear:disabled{opacity:.4;cursor:default}
.task-schedule-menu button:focus-visible{text-decoration:underline;text-underline-offset:4px;outline:none}
.task-schedule-menu .schedule-repeat-panel{margin:4px 0;padding:6px 0 2px;border-top:1px solid #ededed}
.schedule-repeat-panel>.footer-button{display:flex;justify-content:space-between;gap:8px;min-height:36px;padding:8px 10px;font-size:13px;line-height:1.33;letter-spacing:.025em}
.schedule-repeat-panel>.footer-button>span:first-child{min-width:0}
.schedule-repeat-panel>.footer-button:disabled{opacity:.4}
.schedule-repeat-panel .repeat-heading{padding:8px 10px 12px;color:#525252}
.repeat-form{padding:0 10px 6px;gap:12px}
.repeat-form label{font-size:13px;letter-spacing:.025em;line-height:1.33}
.repeat-form :is(select,input){height:32px;font-size:13px;letter-spacing:.025em;line-height:1.33}
.repeat-form label>select{max-width:156px}
.repeat-interval-row{display:flex;align-items:center;gap:8px}
.repeat-interval-row>label{margin-right:auto}
.repeat-interval-row>input[type="number"]{width:48px}
.repeat-interval-row>select{width:100px}
.repeat-actions{padding-top:10px;margin-top:2px;gap:8px}
.repeat-actions .footer-button{padding:0;min-height:32px}
.repeat-actions button[type="submit"]{color:#525252}
@media(prefers-reduced-motion:reduce){.when-disclosure-chevron{transition:none}}
.task-schedule-menu .when-disclosure{text-transform:uppercase}

/* Custom repeat is a focused subview, using the same controls as When. */
.task-schedule-menu.custom-repeat-open>.when-shortcuts,.task-schedule-menu.custom-repeat-open>.when-menu-divider,.task-schedule-menu.custom-repeat-open>.when-date-section,.task-schedule-menu.custom-repeat-open>.schedule-repeat-trigger,.task-schedule-menu.custom-repeat-open>.when-clear{display:none}
.task-schedule-menu.custom-repeat-open>.schedule-repeat-panel{margin:0;padding:0;border:0}
.custom-repeat-header{display:flex;align-items:center;gap:6px;padding:4px 4px 12px;border-bottom:1px solid #ededed}
.custom-repeat-header .repeat-heading{padding:0;font-size:13px;line-height:1.33;letter-spacing:.025em}
.custom-repeat-header .custom-repeat-back{display:flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;padding:0;border:0;border-radius:3px;background:transparent;color:#a3a3a3}
.custom-repeat-back:hover{color:#525252}
.custom-repeat-back svg{width:13px;height:13px}
.repeat-form.custom-repeat-form{padding:14px 10px 4px;gap:14px}
.repeat-field-group{display:flex;flex-direction:column;gap:2px;min-width:0}
.repeat-field-group+.repeat-field-group{padding-top:12px;border-top:1px solid #ededed}
.repeat-field-caption{margin-bottom:6px;font-family:var(--title-font);font-size:13px;font-weight:400;letter-spacing:.025em;line-height:1.33;text-transform:uppercase;color:#a3a3a3}
.custom-repeat-interval{display:flex;gap:8px;align-items:center}
.repeat-stepper{display:flex;align-items:center;justify-content:space-between;flex:0 0 100px;height:34px;padding:0 2px;border:1px solid #ededed;border-radius:3px}
.repeat-stepper .repeat-step{display:flex;align-items:center;justify-content:center;flex:0 0 24px;width:24px;height:30px;padding:0;border:0;background:transparent;color:#a3a3a3}
.repeat-step svg{width:13px;height:13px}
.repeat-form .repeat-stepper input[type="number"]{width:44px;min-width:0;height:30px;padding:0;border:0;background:transparent;text-align:center;color:#525252;appearance:textfield;-moz-appearance:textfield}
.repeat-stepper input::-webkit-outer-spin-button,.repeat-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.repeat-form .repeat-unit-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:1;min-width:0;height:34px;padding:0 10px;border:1px solid #ededed;border-radius:3px;background:transparent;color:#525252;text-transform:uppercase}
.repeat-unit-trigger>span:last-child{display:flex;align-items:center}
.repeat-unit-trigger svg{width:13px;height:13px}
.repeat-unit-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.repeat-unit-options{margin-top:6px;padding:4px 0;border-top:1px solid #ededed;border-bottom:1px solid #ededed}
.repeat-unit-options[hidden]{display:none}
.repeat-form .repeat-choice{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:34px;height:auto;padding:6px 0;border:0;border-radius:3px;background:transparent;color:#a3a3a3;text-align:left;text-transform:uppercase}
.repeat-choice>span:first-child{min-width:0}
.repeat-form .repeat-choice[aria-pressed="true"],.repeat-form .repeat-choice:hover,.repeat-stepper .repeat-step:hover{color:#525252}
.repeat-end-value{margin-left:auto;min-width:0;text-align:right;color:#525252}
.custom-repeat-form .repeat-actions{padding-top:12px;gap:12px}
.custom-repeat-form .repeat-save{padding:0 10px;border:1px solid #ededed;border-radius:3px;color:#525252}
.custom-repeat-form .repeat-save:hover{border-color:#d4d4d4}

/* Keep the four quick choices together in one horizontal row. */
.when-shortcuts{grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}
.task-schedule-menu .when-quick-choice{justify-content:center;gap:3px;padding:0 3px}
.when-shortcuts .when-choice-check{flex-basis:10px;margin-left:0}
.when-shortcuts .when-choice-check svg{width:10px;height:10px}
.when-date-section>.when-disclosure .when-disclosure-value:not(:empty){color:var(--palette-violet,#8476bd)}
.when-disclosure:hover .when-disclosure-value:not(:empty){color:var(--palette-violet,#8476bd)}
.task-schedule-menu.text-filter-menu,.task-schedule-menu.calendar-open,.task-schedule-menu.repeat-open{width:296px}
.repeat-end-value:not(:empty){color:var(--palette-violet,#8476bd)}

/* Today is a date shortcut within the calendar, alongside the actual dates. */
.when-shortcuts{grid-template-columns:repeat(3,minmax(0,1fr))}
.when-calendar-panel{margin:4px 4px 8px;padding:4px 6px 0}
.when-calendar-panel[hidden]{display:none}
.task-schedule-menu .when-calendar-today{display:flex;justify-content:space-between;min-height:36px;padding:0 4px}
.when-calendar-panel>.schedule-calendar{margin-top:6px;padding-top:10px}

.when-date-section>.when-disclosure[data-today="true"] .when-disclosure-value:not(:empty){color:var(--menu-green,#719b77)}

.when-shortcuts{grid-template-columns:repeat(4,minmax(0,1fr))}

[data-menu-tone="tomorrow"]{--menu-tone:#dc3434}
.when-date-section>.when-disclosure[data-tomorrow="true"] .when-disclosure-value:not(:empty){color:#dc3434}

@media(max-width:680px){.task:has(>.task-schedule[data-assigned="true"])>.actions{top:6.5px;bottom:auto;height:32px}}

/* Today and Tomorrow task text matches its assigned When label. */
:is(#tasks,.utility-list) .task:not(.done):not(.trash-task):has(>.task-schedule[data-menu-tone="today"]) .label{color:var(--menu-green,#719b77);caret-color:var(--menu-green,#719b77)}
:is(#tasks,.utility-list) .task:not(.done):not(.trash-task):has(>.task-schedule[data-menu-tone="tomorrow"]) .label{color:#dc3434;caret-color:#dc3434}
:is(#tasks,.utility-list) .task:not(.done):not(.trash-task):not([data-importance="1"]):has(>.task-schedule[data-menu-tone="scheduled"]:not([data-overdue="true"])) .label{color:#265acc;caret-color:#265acc}

/* Relative dates appear on hover; recurring frequency remains visible. */
.task .task-schedule[data-relative-date="true"][data-repeating="true"] .task-when-current{display:inline}
.task:hover .task-schedule[data-relative-date="true"][data-repeating="true"] .task-when-current,.task:focus-within .task-schedule[data-relative-date="true"][data-repeating="true"] .task-when-current{display:inline}

/* Completed tasks share a light neutral text and check. */
:is(#tasks,.utility-list) .task.done :is(.label,.task-marker,.bullet),:is(#tasks,.utility-list) .task.done .task-marker:not(:empty){color:#d4d4d4;caret-color:#d4d4d4}

/* Cancelled tasks use the same light neutral text and status marker. */
:is(#tasks,.utility-list) .task.trash-task :is(.label,.bullet,.task-marker,.task-cancelled-marker){color:#d4d4d4!important;caret-color:#d4d4d4}

/* Footer divider matches the list rows. */
footer.bottom-bar{border-top:0;min-height:60px}

/* Dividers frame the navigation without crossing its controls. */
.bottom-content-filters::before{content:"";position:absolute;top:-14px;left:0;right:0;border-top:1px solid #ededed;pointer-events:none}
.text-content-toolbar::before{bottom:-14px}
.text-content-toolbar::after{content:"";position:absolute;bottom:-14px;left:0;right:0;border-bottom:1px solid #ededed;pointer-events:none}

/* Start the empty entry row at the navigation divider. */
.text-content-toolbar{margin-bottom:14px}

/* Main navigation dividers follow the reference’s heavier neutral stroke. */
.bottom-content-filters::before{border-top:2px solid #d4d4d4}
.text-content-toolbar::after{border-bottom:2px solid #d4d4d4}

/* Anchor navigation to the viewport while keeping its space in the list. */
.text-content-toolbar{position:fixed;top:14px;left:50%;transform:translateX(-50%);width:min(612px,calc(100% - 48px));height:32px;margin:0}
body:not(.utility-open) main{padding-top:46px}

/* Prevent viewport rubber-banding from moving the fixed navigation. */
html,body{overscroll-behavior-y:none}

/* End long lists at the footer without an extra blank scrolling area. */
body main{padding-bottom:0;margin-bottom:58px}

/* Nearby scheduled tasks share Tomorrow’s ochre tone. */
:is(#tasks,.utility-list) .task:not(.done):not(.trash-task)[data-scheduled-soon="true"]:has(>.task-schedule[data-menu-tone="scheduled"]) .label{color:#dc3434!important;caret-color:#dc3434}
:is(#tasks,.utility-list) .task:not(.done):not(.trash-task)[data-scheduled-soon="true"]:has(>.task-schedule[data-menu-tone="scheduled"]) .task-marker:is(:hover,[data-in-progress="true"]){color:#dc3434!important}

/* Status anchors to the right edge of the content footer. */
.bottom-content-filters [aria-label="Status"]{margin-left:auto;margin-right:-10px}

/* Today, Tomorrow and nearby scheduled tasks share the urgent red tone. */
[data-menu-tone="today"],[data-menu-tone="tomorrow"]{--menu-tone:#dc3434}
.when-date-section>.when-disclosure:is([data-today="true"],[data-tomorrow="true"]) .when-disclosure-value:not(:empty){color:#dc3434}
:is(#tasks,.utility-list) .task:not(.done):not(.trash-task):is([data-scheduled-soon="true"],:has(>.task-schedule[data-menu-tone="today"]),:has(>.task-schedule[data-menu-tone="tomorrow"])) .label{color:#dc3434!important;caret-color:#dc3434}
:is(#tasks,.utility-list) .task:not(.done):not(.trash-task):is([data-scheduled-soon="true"],:has(>.task-schedule[data-menu-tone="today"]),:has(>.task-schedule[data-menu-tone="tomorrow"])) .task-marker:is(:hover,[data-in-progress="true"]){color:#dc3434!important}

/* Relative date labels retain their own colors alongside urgent task text. */
[data-menu-tone="today"]{--menu-tone:var(--menu-green,#719b77)}
[data-menu-tone="tomorrow"]{--menu-tone:var(--palette-orange,#cc8b57)}
.when-date-section>.when-disclosure[data-today="true"] .when-disclosure-value:not(:empty){color:var(--menu-green,#719b77)}
.when-date-section>.when-disclosure[data-tomorrow="true"] .when-disclosure-value:not(:empty){color:var(--palette-orange,#cc8b57)}

/* Only the rows have a frame; navigation bars remain borderless. */
.text-content-toolbar::after,.bottom-content-filters::before{content:none}
#tasks,main form.add{border-left:2px solid #d4d4d4;border-right:2px solid #d4d4d4}
main form.add:not(.bottom){border-top:2px solid #d4d4d4}
main form.add.bottom{border-bottom:2px solid #d4d4d4}

/* A stationary frame contains its own scrolling list. */
.content-frame{position:fixed;top:60px;bottom:60px;left:50%;transform:translateX(-50%);width:min(612px,calc(100% - 48px));border:2px solid #d4d4d4;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;scrollbar-width:none;background:#fff}
.content-frame::-webkit-scrollbar{display:none}
.content-frame #tasks,.content-frame form.add{border-left:0;border-right:0}
.content-frame form.add:not(.bottom){border-top:0}
.content-frame form.add.bottom{border-bottom:1px solid #ededed}
.utility-open .content-frame{display:none}

.content-frame{left:max(24px,calc((100% - 612px)/2));transform:none}
.content-frame .task>.actions{position:fixed;bottom:auto;height:32px}
@media(min-width:681px){.content-frame .task>.task-schedule{position:fixed;left:auto;transform:none}}

/* Give task markers and text breathing room inside the frame. */
.content-frame .task{padding-left:12px}
.content-frame :is(#new,#new-bottom){padding-left:50px}
@media(max-width:680px){.content-frame .task .task-schedule[data-assigned="true"]{left:50px}}

/* Keep the entry divider on short lists, but merge it with the frame at scroll end. */
.content-frame[data-at-scroll-end="true"] form.add.bottom{border-bottom-color:transparent}

/* Continue empty ruled rows to the bottom of the available frame. */
.content-frame{display:flex;flex-direction:column}
.content-frame>#tasks,.content-frame>form.add{flex-shrink:0}
.content-frame>.empty-row-fill{flex:1 0 0;min-height:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 45px,#ededed 45px,#ededed 46px);pointer-events:none}

/* Whole rows fit the frame, with a 46px minimum. */
.content-frame{--frame-row-height:46px}
.content-frame .task{min-height:var(--frame-row-height);padding-top:calc((var(--frame-row-height) - 33px)/2);padding-bottom:calc((var(--frame-row-height) - 33px)/2)}
.content-frame form.add{height:var(--frame-row-height);min-height:var(--frame-row-height)}
.content-frame>.empty-row-fill{background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--frame-row-height) - 1px),#ededed calc(var(--frame-row-height) - 1px),#ededed var(--frame-row-height))}
@media(max-width:680px){.content-frame .task:has(>.task-schedule[data-assigned="true"]){min-height:calc(var(--frame-row-height) + 16px);padding-bottom:calc((var(--frame-row-height) - 33px)/2 + 16px)}}

/* The final decorative rule must not double the outer frame’s bottom edge. */
.content-frame>.empty-row-fill{mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 2px),transparent calc(100% - 2px));-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 2px),transparent calc(100% - 2px))}

/* Keep inner rules from forming a second line against either fixed edge. */
.content-frame::after{content:"";position:fixed;top:62px;bottom:62px;left:max(26px,calc((100% - 608px)/2));width:min(608px,calc(100% - 52px));box-shadow:inset 0 3px 0 var(--frame-top-surface,#fff),inset 0 -3px 0 var(--frame-bottom-surface,#fff);pointer-events:none;z-index:24}

/* Start the framed list directly with its first entry. */
.content-frame>form.add:not(.bottom){display:none}

/* Preserve the same breathing room after single-line and wrapped content. */
.content-frame .task .label{padding-top:5px;padding-bottom:5px}
@media(max-width:680px){
 .content-frame .task:has(>.task-schedule[data-assigned="true"]){min-height:calc(var(--frame-row-height) + 24px);padding-bottom:calc((var(--frame-row-height) - 33px)/2 + 24px)}
 .content-frame .task .task-schedule[data-assigned="true"]{bottom:calc((var(--frame-row-height) - 33px)/2 + 5px)}
}

.task .task-schedule[data-menu-tone="scheduled"]{--menu-tone:var(--palette-violet,#8476bd)}

.task .task-schedule[data-assigned="true"][data-menu-tone="scheduled"]:not(:hover):not([aria-expanded="true"]){color:var(--palette-violet,#8476bd)}

[data-menu-tone="archived"]{--menu-tone:var(--menu-neutral,#a3a3a3)}
.task .actions:has(>button:nth-child(3)){grid-template-columns:repeat(3,28px);width:100px}

.task .actions .archive-task,.task .actions .archive-task svg{color:#a3a3a3!important}
.task .actions .archive-task:hover,.task .actions .archive-task:hover svg{color:#525252!important}

/* Archive comes before delete in each row’s actions. */
.task .actions:has(>.archive-task)>.archive-task{grid-column:1;grid-row:1}
.task .actions:has(>.archive-task)>.delete{grid-column:2;grid-row:1}
.task .actions:has(>.archive-task):has(>.restore)>.restore{grid-column:1;grid-row:1}
.task .actions:has(>.archive-task):has(>.restore)>.archive-task{grid-column:2;grid-row:1}
.task .actions:has(>.archive-task):has(>.restore)>.delete{grid-column:3;grid-row:1}

/* Match visual spacing between side icons to the inset from the frame. */
.task .actions{gap:0;width:64px;min-width:64px}
.task .actions:has(>button:nth-child(3)){width:92px;min-width:92px}

.text-content-toolbar>[aria-label="When"]{display:inline-flex;align-items:center;gap:8px}
.when-clock{display:flex;align-items:center;justify-content:center}
.when-clock svg{width:13px;height:13px;flex-shrink:0}

.text-content-toolbar>[aria-label="When"] .when-clock svg{color:inherit!important}

/* Notebook icon precedes its name in the top navigation. */
.text-content-toolbar .notebook-controls .notebook-select>svg{display:block;width:13px;height:13px;flex:0 0 13px;color:var(--notebook-color,#a3a3a3)!important}
.text-content-toolbar .notebook-controls .notebook-select:hover>svg{color:#525252!important}

.text-content-toolbar .notebook-controls .notebook-select{gap:8px}

.text-content-toolbar .notebook-slash,.text-content-toolbar .type-separator,.footer-filter-slash{margin-left:-4px;margin-right:-4px}

.bottom-content-filters>[aria-label="Status"]{display:inline-flex;align-items:center;gap:8px}
.status-icon{display:flex;align-items:center;justify-content:center}
.bottom-content-filters>[aria-label="Status"] .status-icon svg{width:13px;height:13px;flex-shrink:0;color:inherit!important}

/* Notes belong to their task and expand its row as needed. */
.task-body{flex:1;min-width:0;align-self:center}
.task-body>.label{display:block;width:100%}
.task.has-task-note>.bullet,.task.editing-task-note>.bullet{align-self:flex-start}
.task-note-preview,.task-note-input{display:block;width:100%;margin:0 0 5px;padding:0;border:0;border-radius:0;background:transparent;color:#525252;font-family:"hanken-grotesk",sans-serif;font-size:14px;font-weight:400;line-height:1.5;letter-spacing:.2px;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere}
.task-note-preview[hidden]{display:none}
.task-note-preview:hover{background:transparent;color:#525252}
.task-note-input{min-height:42px;resize:none;overflow:hidden;outline:none;cursor:text}
.task-note-input::placeholder{color:#a3a3a3}
.task.done .task-note-preview,.task.trash-task .task-note-preview{color:#a3a3a3}
.task .actions .task-note-action,.task .actions .task-note-action svg{color:#a3a3a3!important}
.task .actions .task-note-action:hover,.task .actions .task-note-action:hover svg{color:#525252!important}
.task .actions:has(>.task-note-action)>.task-note-action{grid-column:1;grid-row:1}
.task .actions:has(>.task-note-action)>:is(.delete,.cancel-task){grid-column:2;grid-row:1}
.task .actions:has(>.task-note-action):has(>.archive-task)>.archive-task{grid-column:2;grid-row:1}
.task .actions:has(>.task-note-action):has(>.archive-task)>.delete{grid-column:3;grid-row:1}

/* Only an icon reveals a saved task note until it is opened. */
.task:has(.task-note-action[data-has-note="true"])>.actions{opacity:1}
.task:not(:hover):not(:focus-within)>.actions:has(:is(.task-note-action[data-has-note="true"],.task-tag-action[data-has-tags="true"]))>button:not(.task-note-action[data-has-note="true"]):not(.task-tag-action[data-has-tags="true"]){visibility:hidden}

.task .actions:has(>button:nth-child(4)){grid-template-columns:repeat(4,28px);width:120px;min-width:120px}
.task .actions:has(>.task-note-action):has(>.restore)>.restore{grid-column:2;grid-row:1}
.task .actions:has(>.task-note-action):has(>.restore)>.archive-task{grid-column:3;grid-row:1}
.task .actions:has(>.task-note-action):has(>.restore)>.delete{grid-column:3;grid-row:1}
.task .actions:has(>.task-note-action):has(>.restore):has(>.archive-task)>.delete{grid-column:4;grid-row:1}

/* A comment thread opens separately from the task’s title. */
.task-comments-menu{position:fixed;z-index:60;display:flex;flex-direction:column;width:340px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:12px;border:1px solid #ededed;border-radius:4px;background:#fff;box-shadow:0 8px 28px #0000000a;color:#525252}
.task-comments-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 8px;border-bottom:1px solid #ededed;font-family:var(--title-font);font-size:13px;font-weight:400;letter-spacing:.025em;text-transform:uppercase}
.task-comments-menu .icon{width:24px;height:24px;min-width:24px;background:transparent;border:0;color:#a3a3a3}
.task-comments-menu .icon svg{width:13px;height:13px}
.task-comments-menu .icon:hover{color:#525252;background:transparent}
.task-comments-menu .delete-comment:hover svg{color:#dc3434!important}
.task-comments-list{min-height:0;max-height:280px;overflow:auto;overscroll-behavior:contain}
.task-comments-empty{margin:16px 0;color:#a3a3a3;font-family:"hanken-grotesk",sans-serif;font-size:14px}
.task-comment{padding:12px 0;border-bottom:1px solid #ededed}
.task-comment:last-child{border-bottom:0}
.task-comment-meta{display:flex;align-items:center;gap:4px;font-family:var(--title-font);font-size:13px;font-weight:400;color:#a3a3a3}
.task-comment-meta>span{margin-right:auto}
.task-comment p{margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;font-family:"hanken-grotesk",sans-serif;font-size:14px;line-height:1.5;letter-spacing:.2px}
.task-comment-form{flex-shrink:0;margin-top:8px;padding-top:12px;border-top:1px solid #ededed}
.task-comment-input{display:block;width:100%;min-height:70px;max-height:160px;resize:vertical;border:1px solid #ededed;border-radius:4px;background:#fff;padding:8px;color:#525252;font-family:"hanken-grotesk",sans-serif;font-size:14px;line-height:1.5;outline:none}
.task-comment-input::placeholder{color:#a3a3a3}
.task-comment-controls{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.task-comment-controls .footer-button{font-family:var(--title-font);font-size:13px;font-weight:400;letter-spacing:.025em;text-transform:uppercase;padding:0 8px}
.task-comment-controls button:disabled{opacity:.4;cursor:default}

.task-comment-controls [hidden]{display:none!important}

.task-comment-controls .footer-button{display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:0;height:32px;white-space:nowrap;line-height:1.33;color:#525252}

.task-comments-menu button[aria-label="Close comments"] svg{width:13px;height:13px;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Trash actions stay neutral until hovered. */
.task .actions>.delete,.task .actions>.delete svg,.task-comments-menu .delete-comment,.task-comments-menu .delete-comment svg{color:#a3a3a3!important}
.task .actions>.delete:hover,.task .actions>.delete:hover svg,.task-comments-menu .delete-comment:hover,.task-comments-menu .delete-comment:hover svg{color:#dc3434!important}

/* The left-side When action has the same hover reach as right-side actions. */
@media(min-width:681px){.content-frame .task>.task-schedule{pointer-events:auto}}

/* Selected When shortcuts use an underline instead of a check. */
.when-shortcuts .when-choice-check{display:none!important}
.when-shortcuts .when-quick-choice[aria-pressed="true"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

.text-content-toolbar .notebook-controls .notebook-select[data-all-notebooks="true"]>svg{display:none}

/* Active tasks offer separate cancel and delete actions. */
.task .actions:has(>.task-note-action):has(>.cancel-task)>.delete{grid-column:3;grid-row:1}

.text-content-toolbar>.text-filter-trigger[hidden],.bottom-content-filters>.text-filter-trigger[hidden]{display:none!important}

/* Assigned When labels retain their semantic color during hover and editing. */
.task .task-schedule[data-menu-tone]:is([data-assigned="true"],[data-menu-tone="today"],[data-menu-tone="tomorrow"],[data-menu-tone="now"],[data-menu-tone="next"],[data-menu-tone="someday"],[data-menu-tone="scheduled"]),.task .task-schedule[data-menu-tone]:is([data-assigned="true"],[data-menu-tone="today"],[data-menu-tone="tomorrow"],[data-menu-tone="now"],[data-menu-tone="next"],[data-menu-tone="someday"],[data-menu-tone="scheduled"]):hover,.task .task-schedule[data-menu-tone][aria-expanded="true"]{color:var(--menu-tone)}

.task .task-schedule[data-menu-tone]:hover{color:#525252!important}

/* Match the reference’s subtle focused editing surface. */
.task:has(.label[contenteditable]:focus),.content-frame form.add:focus-within{background:#fafafa}

/* Multi-select tags share the app’s compact floating menu. */
.task-tags-menu.text-filter-menu{position:fixed;z-index:60;display:flex;flex-direction:column;gap:10px;width:260px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:12px;border:1px solid #ededed;border-radius:4px;background:#fff;box-shadow:0 8px 28px #0000000a}
.task-tags-menu .icon{width:24px;height:24px;background:transparent;color:#a3a3a3}
.task-tags-menu .icon svg,.task-tag-list svg{width:13px;height:13px}
.task-tag-search{width:100%;min-height:32px;padding:6px 8px;border:1px solid #ededed;border-radius:4px;background:#fff;color:#525252;font-family:"hanken-grotesk",sans-serif;font-size:14px;outline:none}
.task-tag-search::placeholder{color:#a3a3a3}
.task-tag-list{overflow:auto;min-height:0;max-height:280px;overscroll-behavior:contain}
.task-tag-list .footer-button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:auto;min-height:32px;padding:6px 8px;border:0;background:transparent;color:#a3a3a3;font-family:var(--title-font);font-size:13px;font-weight:400;letter-spacing:.025em;text-align:left;text-transform:uppercase}
.task-tag-list .footer-button:hover,.task-tag-list .footer-button[aria-checked="true"]{color:#525252}
.task-tag-list .footer-button>span:first-child{overflow-wrap:anywhere;min-width:0}
.task .actions .task-tag-action,.task .actions .task-tag-action svg{color:#a3a3a3!important}
.task .actions .task-tag-action:hover,.task .actions .task-tag-action:hover svg{color:#525252!important}
.task:has(.task-tag-action[data-has-tags="true"])>.actions{opacity:1}
/* Comments, tags, restore/archive, cancel/delete follow a stable order. */
.task .actions:has(>.task-tag-action){grid-template-columns:repeat(3,28px);width:92px;min-width:92px}
.task .actions:has(>.task-tag-action):has(>button:nth-child(4)){grid-template-columns:repeat(4,28px);width:120px;min-width:120px}
.task .actions:has(>.task-tag-action):has(>button:nth-child(5)){grid-template-columns:repeat(5,28px);width:148px;min-width:148px}
.task .actions:has(>.task-tag-action)>.task-note-action{grid-column:1;grid-row:1}
.task .actions:has(>.task-tag-action)>.task-tag-action{grid-column:2;grid-row:1}
.task .actions:has(>.task-tag-action)>:is(.cancel-task,.archive-task,.restore){grid-column:3;grid-row:1}
.task .actions:has(>.task-tag-action)>.delete{grid-column:3;grid-row:1}
.task .actions:has(>.task-tag-action):has(>:is(.cancel-task,.archive-task,.restore))>.delete{grid-column:4;grid-row:1}
.task .actions:has(>.task-tag-action):has(>.restore)>.archive-task{grid-column:4;grid-row:1}
.task .actions:has(>.task-tag-action):has(>.restore):has(>.archive-task)>.delete{grid-column:5;grid-row:1}

.task .actions:has(>.task-tag-action):not(:has(>.task-note-action))>.task-tag-action{grid-column:1}
.task .actions:has(>.task-tag-action):not(:has(>.task-note-action))>.delete{grid-column:2}
.task .actions:has(>.task-tag-action):not(:has(>.task-note-action)):not(:has(>.restore)){grid-template-columns:repeat(2,28px);width:64px;min-width:64px}
.task .actions:has(>.task-tag-action):not(:has(>.task-note-action))>.restore{grid-column:2}
.task .actions:has(>.task-tag-action):not(:has(>.task-note-action)):has(>.restore)>.delete{grid-column:3}

.task-tags-menu>:is(.task-comments-header,.task-tag-search){flex-shrink:0}

/* Assigned tags occupy the nearest action slot, swapping with comments. */
.task .actions:has(>.task-tag-action[data-has-tags="true"])>.task-tag-action{grid-column:1}
.task .actions:has(>.task-tag-action[data-has-tags="true"])>.task-note-action{grid-column:2}

/* Tag colors use the notebook palette and stay consistent across views. */
.task-tag-option-row{display:grid;grid-template-columns:minmax(0,1fr) 24px;align-items:center;gap:4px}
.task-tag-list .footer-button[data-tag-name],.tag-filter-options .footer-button[data-tag-name]{color:var(--tag-color)!important}
.task-tag-list .footer-button[data-tag-name]:hover,.tag-filter-options .footer-button[data-tag-name]:hover{color:#525252!important}
.tag-color-control{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:4px;background:transparent}
.tag-color-control>span{width:12px;height:12px;border-radius:50%;background:var(--tag-color)}
.tag-color-control:hover{background:#f5f5f5}
.tag-color-palette{display:grid;grid-template-columns:repeat(7,24px);justify-content:space-between;gap:6px 2px;padding:8px 0 12px;border-bottom:1px solid #ededed}
.tag-color-palette .notebook-palette-choice{width:24px;height:24px;min-width:24px;min-height:24px;border:0;padding:0;background:transparent}
.tag-color-palette .notebook-palette-choice span{background:var(--palette-color)!important}
.bottom-content-filters>.text-filter-trigger[aria-label="Tags"][data-colored="true"]{color:var(--tag-color)!important}
.bottom-content-filters>.text-filter-trigger[aria-label="Tags"][data-colored="true"]:hover{color:#525252!important}
.task .actions .task-tag-action[data-has-tags="true"]:not(:hover),.task .actions .task-tag-action[data-has-tags="true"]:not(:hover) svg{color:var(--tag-color,#a3a3a3)!important}

/* Tag colors remain visible on hover. */
.task-tag-list .footer-button[data-tag-name]:hover,.tag-filter-options .footer-button[data-tag-name]:hover,.bottom-content-filters>.text-filter-trigger[aria-label="Tags"][data-colored="true"]:hover{color:var(--tag-color)!important}
.task .actions .task-tag-action[data-has-tags="true"]:hover,.task .actions .task-tag-action[data-has-tags="true"]:hover svg{color:var(--tag-color,#a3a3a3)!important}

.task-tags-menu .task-tag-list .footer-button[data-tag-name]:hover :is(span,svg){color:var(--tag-color)!important}

/* Generic menu hover must not erase the fill of tag color swatches. */
.task-tags-menu .tag-color-palette .notebook-palette-choice span,.task-tags-menu .tag-color-palette .notebook-palette-choice:is(:hover,:focus-visible,[aria-pressed="true"]) span{background:var(--palette-color)!important}
.task-tags-menu .tag-color-control>span,.task-tags-menu .tag-color-control:is(:hover,:focus-visible)>span{background:var(--tag-color)!important}

/* Assigned tag icons have a solid color fill. */
.task .actions .task-tag-action[data-has-tags="true"] svg{fill:currentColor}
.task .actions .task-tag-action[data-has-tags="true"] svg line{stroke:#fff}

/* Every assigned tag keeps its own colored indicator. */
.task .actions .task-tag-action[data-has-tags="true"]{display:flex;align-items:center;justify-content:flex-start;width:auto;min-width:28px;padding:0}
.task-tag-indicator{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px}
.task .actions .task-tag-action[data-has-tags="true"] .task-tag-indicator svg,.task .actions .task-tag-action[data-has-tags="true"]:hover .task-tag-indicator svg{color:var(--tag-color,#a3a3a3)!important;fill:var(--tag-color,#a3a3a3)}

.task-tag-indicator{flex-basis:18px;width:18px}
.task-tag-indicator:first-child{margin-left:5px}
.task-tag-indicator:last-child{margin-right:5px}

/* Individual tag names appear on hover without changing the icon color. */
.task-tag-indicator{position:relative}
.task-tag-indicator::after{content:"#" attr(data-tag-name);position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);z-index:80;max-width:220px;padding:5px 8px;border:1px solid #333;border-radius:4px;background:#171717;color:#f5f5f5;font-family:var(--title-font);font-size:13px;font-weight:400;line-height:1.33;letter-spacing:.025em;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden}
.task-tag-indicator:hover::after{opacity:1;visibility:visible}

.task-tag-indicator::after{text-transform:uppercase}

.task-tag-indicator::after{background:#171717!important}

/* Center Hanken’s text box and compensate its optical baseline. */
.task .label{line-height:22px;min-height:32px;top:-.5px;padding:5px 0}
.content-frame .task .label{padding-top:5px;padding-bottom:5px}
#new,#new-bottom{line-height:22px;padding-top:0;padding-bottom:1px}

/* Retire legacy colored and tinted idle task circles. */
.task:not(.done) .task-marker::before,.task .bullet[data-kind="event"]::before{background:transparent!important}
.task:not(.done):not(.trash-task) .task-marker:not([data-in-progress="true"]):not(:hover),.task .bullet[data-kind="event"]{color:#d4d4d4!important}

/* Sorting and grouping change presentation, leaving manual order intact. */
.top-actions .list-view-trigger{display:grid;place-items:center;width:28px;height:28px;padding:0;position:absolute;top:2px;right:calc(100% + 8px)}
.list-view-trigger svg{width:13px;height:13px}
.list-view-trigger[data-active="true"]::after{content:"";position:absolute;width:3px;height:3px;border-radius:50%;right:3px;top:3px;background:#525252}
.list-view-menu{position:fixed;z-index:60;display:block;width:300px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;padding:16px!important;margin:0;border:1px solid #ededed;border-radius:4px;background:#fff;box-shadow:0 8px 28px #0000000a}
.list-view-menu[hidden]{display:none}
.list-view-section+.list-view-section{margin-top:14px;padding-top:14px;border-top:1px solid #ededed}
.list-view-section h3{margin:0 0 10px;color:#a3a3a3;font:400 13px/1.33 var(--title-font);letter-spacing:.025em;text-transform:uppercase}
.list-view-choices{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px}
.list-view-menu .footer-button{display:block;width:100%;min-height:32px;padding:6px 0!important;text-align:left;color:#a3a3a3;background:transparent!important;border:0}
.list-view-menu .footer-button[aria-pressed="true"]{text-decoration:underline;text-underline-offset:5px;color:#525252}
.list-view-menu .footer-button:disabled{opacity:.35;cursor:default;text-decoration:none}
.list-view-menu .footer-button:not(:disabled):hover{color:#525252!important}
.list-view-menu .list-sort-direction{margin-top:6px;color:#525252}
.list-view-menu .list-view-reset{margin-top:14px;padding-top:14px!important;border-top:1px solid #ededed}
.list-group-heading{display:flex;align-items:center;gap:12px;min-height:var(--frame-row-height,46px);padding:10px 16px 10px 50px;border-bottom:1px solid #ededed;list-style:none;color:#737373}
.list-group-heading h3{margin:0;min-width:0;overflow-wrap:anywhere;font:400 13px/1.4 var(--title-font);letter-spacing:.025em;text-transform:uppercase}
.list-group-count{margin-left:auto;color:#a3a3a3;font:400 13px/1.4 var(--title-font)}
.task.view-arranged,.task.view-arranged .label{cursor:text!important}
.task.view-arranged .actions,.task.view-arranged button{cursor:pointer!important}
@media(max-width:820px){
 .text-content-toolbar{padding-right:72px;gap:8px}
 body:has(.top-actions.search-open) .text-content-toolbar{visibility:hidden;pointer-events:none}
}