*{box-sizing:border-box}
:root{color-scheme:light;--ink:#34413c;--muted:#7b857b;--line:#e2e9e5;--paper:#fbfaf4;--green:#326050;--sidebar:#f2f7f4}
.note-history-panel{position:fixed;z-index:6;left:56px;top:14px;bottom:14px;width:min(360px,calc(100vw - 70px));background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:10px 8px 40px #34413912;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateX(-18px);transition:transform .3s ease,opacity .2s ease,visibility .3s;overflow:hidden}
.note-history-panel.is-open{opacity:1;visibility:visible;transform:translateX(0)}
.note-history-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:23px 20px 18px;border-bottom:1px solid var(--line)}
.note-history-heading h2{margin:0;font-size:16px;font-weight:600;letter-spacing:-.3px}.note-history-heading p{margin:7px 0 0;font-size:10px;color:var(--muted);line-height:1.6}
.note-history-list{overflow:auto;overscroll-behavior:contain;padding:0 20px 20px;scrollbar-width:thin}.note-history-item{padding:19px 0;border-bottom:1px solid var(--line)}
.note-history-sort{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);font-size:11px;color:var(--muted)}.note-history-sort select{min-width:0;max-width:180px;padding:6px 9px;background:var(--paper);border:1px solid var(--line);border-radius:6px;color:var(--ink);font:inherit}.note-history-sort select:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.note-history-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:10px;color:var(--green)}.note-history-meta>span:first-child{overflow-wrap:anywhere}.note-history-status{color:var(--muted);flex:none;font-size:9px}
.note-history-text{font-size:12px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;margin:9px 0;color:var(--ink)}.note-history-time{display:block;font-size:10px;color:var(--muted);line-height:1.6}.note-history-empty{padding:24px 0;font-size:12px;color:var(--muted);line-height:1.8}.note-history-list>.text-button{margin-top:18px}
#note-history-button{display:flex;align-items:center;justify-content:center}#note-history-button[aria-expanded=true]{color:var(--green);background:#e4eee8}
@media(prefers-reduced-motion:reduce){.note-history-panel{transition:none}}
body{margin:0;color:var(--ink);font:14px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--paper)}
button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;border:0;background:none}button:disabled{cursor:default;opacity:.45}a{color:inherit;text-decoration:none}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid #719486;outline-offset:3px}[hidden]{display:none!important}
.app-shell{height:100dvh;overflow:hidden}.workspace{height:100%;margin-left:56px}.sidebar{position:fixed;inset:0 auto 0 0;width:56px;z-index:5;background:var(--sidebar);border-right:1px solid var(--line);transition:width .2s ease,box-shadow .2s ease;overflow:hidden}.sidebar.is-open{width:344px;box-shadow:12px 0 32px #34413908}.sidebar-rail{position:absolute;inset:0 auto 0 0;width:56px;display:flex;align-items:center;flex-direction:column;padding:22px 0 18px;gap:20px}.brand-mark{width:32px;height:34px;flex:none;font:italic 28px/1 Georgia,serif;letter-spacing:-2px;color:var(--green);border-radius:8px;padding:0 3px 5px 0}.brand-mark:hover,.rail-button:hover{background:#e4eee8}.rail-button{height:34px;width:34px;color:#8a9685;font-size:22px;border-radius:7px}.rail-settings{margin-top:auto;font-size:18px}.sidebar-panel{margin-left:56px;width:288px;height:100%;padding:27px 22px 18px 12px;overflow:auto;scrollbar-width:thin;opacity:0;visibility:hidden;transition:opacity .15s;display:flex;flex-direction:column}.sidebar.is-open .sidebar-panel{opacity:1;visibility:visible}.sidebar-header{margin-bottom:28px}.sidebar-header strong{font-size:16px;letter-spacing:-.4px;font-weight:600}.sidebar-header>span{display:block;font-size:10px;color:var(--muted);margin-top:3px}.search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:7px;padding:7px 9px;margin-bottom:17px}.search>span{font-size:21px;line-height:1;color:#768b7f}.search input{width:100%;min-width:0;font-size:11px;background:none;border:0;outline:none}.search kbd{font:9px/1 sans-serif;white-space:nowrap;color:#85917f}.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 11px;border-radius:7px;font-size:12px;text-align:left;color:#5c7466}.nav-item:hover{background:#e5eee8}.nav-item.active{background:#e3eee7;color:#3e6052}.count{margin-left:auto;font-size:10px;color:#7a9184}.nav-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-dot{width:6px;height:6px;flex:none;border-radius:50%;background:var(--project-color,#719486)}.sidebar-section{display:flex;align-items:center;justify-content:space-between;margin:21px 0 4px;padding-left:11px;font-size:9px;letter-spacing:1.5px;color:#7a9184}.icon-button{width:29px;height:29px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;font-size:20px;color:#708d7c;flex:none}.icon-button:hover{background:#e3eee7}.sidebar-empty{font-size:11px;color:#7a9184;padding:0 11px;margin:5px 0 14px}.sidebar-bottom{display:flex;align-items:center;gap:8px;padding:28px 10px 0;margin-top:auto}.local-dot,.status-dot{height:5px;width:5px;display:inline-block;border-radius:50%;background:#7da78f;flex:none}.save-state{font-size:10px;color:#6b8777;padding:0}.sidebar-settings{border-top:1px solid var(--line);margin-top:20px;padding-top:10px}.sidebar-settings summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:10px 11px;font-size:12px;color:#607b6b;border-radius:7px}.sidebar-settings summary::-webkit-details-marker{display:none}.sidebar-settings summary:hover{background:#e5eee8}.sidebar-settings[open] summary>span{transform:rotate(180deg)}#settings-dialog{padding:7px 10px 10px}.field-label{display:block;font-size:10px;color:#6a8977;margin:15px 0 7px}.field,#document-title,#model-select{width:100%;padding:8px 9px;border:1px solid #d5e3da;border-radius:6px;font-size:12px;background:var(--paper);min-width:0}.auto-control{display:flex;align-items:center;gap:8px;font-size:11px;margin:21px 0 17px;cursor:pointer}.auto-control input{position:absolute;opacity:0;width:1px;height:1px}.switch{margin-left:auto;position:relative;width:29px;height:17px;border-radius:12px;background:#cad9cf}.switch:after{content:'';position:absolute;top:3px;left:3px;width:11px;height:11px;background:white;border-radius:50%;transition:transform .15s}.auto-control input:checked+.switch{background:#628873}.auto-control input:checked+.switch:after{transform:translateX(12px)}.auto-control input:focus-visible+.switch{outline:2px solid #628873;outline-offset:3px}.account-card{padding:12px 0;border-block:1px solid var(--line)}.account-title{display:flex;align-items:center;gap:7px;font-size:11px}.badge{font-size:9px;margin-left:auto;background:#e3ede7;padding:3px 6px;border-radius:10px;white-space:nowrap}.badge.connected{color:#437c5d;background:#ddefe4}.account-card p{font-size:10px;color:#718a7b;margin:9px 0 12px;overflow-wrap:anywhere}.account-error{color:#9b663c!important}.account-card .text-button{margin:7px 10px 0 0}.button{display:inline-flex;justify-content:center;align-items:center;gap:8px;font-size:11px;padding:9px 12px;border:1px solid #d3e1d8;border-radius:7px;background:var(--paper)}.button:hover{background:#e6f1ea}.button.primary{background:var(--green);color:white;border-color:var(--green)}.text-button{padding:3px 0;font-size:11px;color:#527264}.text-button:hover,a:hover{text-decoration:underline}.connection-strip{font-size:10px;color:#7a9184;margin:13px 0;display:flex;flex-direction:column;align-items:flex-start;gap:5px}.connection-strip.connected{display:none}.agent-controls{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:15px;font-size:10px;color:#718a7b}#agent-state{display:flex;align-items:center;gap:5px}.status-dot.error{background:#b48355}.status-dot.busy{animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.3}}.plan-details{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:9px;margin-top:12px;color:#718a7b}.settings-note{font-size:10px;color:#7a9184;line-height:1.8;margin:15px 0}.edit-history{display:flex;align-items:center;gap:16px;margin-top:13px;font-size:10px;color:#85917f}.edit-history>span{margin-left:auto}
#main-scroll{height:100%;overflow:auto;scrollbar-width:thin;scrollbar-color:#d8e2dc transparent}.notebook{width:100%;max-width:1020px;margin:auto;min-height:100%;padding:clamp(55px,10vh,115px) clamp(32px,7vw,106px) 120px;cursor:text}.document-content{min-height:calc(100dvh - 230px);outline:none}.project-heading{display:flex;align-items:center;gap:9px;margin:35px 0 10px;padding-bottom:9px;scroll-margin-top:50px;border-bottom:1px solid #e9f1ec}.project-heading:first-child{margin-top:0}.project-heading h2{font-size:15px;font-weight:500;color:#4e6557;margin:0}.heading-count{font-size:10px;color:#99afa2}.heading-add{margin-left:auto;font-size:19px;color:#8ea999}.heading-rename{opacity:0;font-size:13px;color:#83a08e}.project-heading:hover .heading-rename,.heading-rename:focus-visible{opacity:1}.unsorted-heading h2{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#889f91}.note-row{display:flex;align-items:flex-start;gap:12px;position:relative;margin:3px -12px;padding:4px 12px;border-radius:6px}.note-row:hover{background:#f8f9f3}.bullet{font-size:16px;line-height:32px;color:#84a08f}.note-text{font-size:15px;line-height:2.1;width:100%;resize:none;border:0;padding:0;outline:none!important;background:transparent;overflow:hidden;min-height:34px;color:#4b6355;letter-spacing:.05px}.note-tools{display:flex;gap:3px;padding-top:6px;opacity:0}.note-row:hover .note-tools,.note-row:focus-within .note-tools{opacity:1}.pin-button{font-size:13px;color:#8faa9a;padding:0 3px}.pinned .pin-button{color:#48785d}.move-select{background:transparent;border:0;width:24px;max-width:100px;font-size:10px;color:#739280}.move-select:focus{width:100px}.is-empty .note-row{background:none}.is-empty .bullet,.is-empty .note-tools{visibility:hidden}.is-empty .note-text{caret-color:#60836f}.no-results{text-align:center;padding:40px;color:#7d9587;font-size:12px}.error-banner{display:flex;align-items:center;gap:15px;background:#fff3e4;border-bottom:1px solid #ead9bf;padding:14px 25px;color:#846440;font-size:12px}.toast{position:fixed;left:calc(50% + 28px);transform:translateX(-50%);bottom:26px;display:flex;align-items:center;gap:17px;z-index:8;width:max-content;max-width:calc(100vw - 100px);padding:10px 14px 10px 18px;border:1px solid #d1e2d7;border-radius:9px;background:var(--paper);box-shadow:0 7px 30px #28382212;font-size:12px}.toast>span{max-width:500px}.toast .icon-button{font-size:16px}
dialog{color:var(--ink);background:var(--paper);padding:30px;border:1px solid #d2e3d8;border-radius:14px;max-height:85dvh;overflow:auto;width:460px;max-width:calc(100vw - 30px);box-shadow:0 25px 100px #24302320}dialog::backdrop{background:#28312230;backdrop-filter:blur(3px)}.dialog-top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}dialog h2{font:26px/1.4 Georgia,serif;letter-spacing:-.6px;font-weight:400;color:#476654;margin:0}.dialog-intro,.hint{font-size:11px;color:#759582}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}.history-item{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--line);font-size:12px}.history-item p,.history-item small,.history-empty{font-size:11px;color:#779583}.history-item p{margin:5px 0}.welcome-dialog{text-align:center}.welcome-dialog img{margin-bottom:18px}.welcome-dialog p{font-size:12px;color:#759582;margin:20px 0}.welcome-dialog a{display:block;font-size:12px;margin-bottom:20px}.welcome-dialog .button{width:100%}.skip-link{position:fixed;top:-100px;left:70px;z-index:10;background:var(--paper);border:1px solid var(--green);padding:8px 15px}.skip-link:focus{top:10px}
@media(max-width:600px){.sidebar.is-open{width:min(344px,calc(100vw - 30px))}.sidebar-panel{width:calc(min(344px,100vw - 30px) - 56px);padding-right:16px}.notebook{padding:45px 26px 90px}.note-text{font-size:16px}.note-tools{gap:0}.note-row{gap:9px}.toast{font-size:11px;max-width:calc(100vw - 80px);gap:8px;padding:9px 12px}.project-heading h2{font-size:14px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Quiet canvas actions, revealed beside the thought being edited. */
.canvas-add-project{position:fixed;top:24px;right:30px;z-index:2;display:flex;align-items:center;gap:5px;padding:7px 11px;border:1px solid transparent;border-radius:7px;color:#7d9487;font-size:12px;background:var(--paper);opacity:.65;transition:opacity .15s,background .15s}
.canvas-add-project:hover,.canvas-add-project:focus-visible{opacity:1;background:#ebf4ee;border-color:#dbe9e0}.canvas-add-project:disabled{opacity:.3}
.remove-note{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:5px;font-size:19px;line-height:1;color:#8ea296;flex:none}.remove-note:hover,.remove-note:focus-visible{color:#985b4c;background:#f7eae4}
@media(hover:none){.note-tools{opacity:.8}.remove-note{width:30px;height:30px}.canvas-add-project{opacity:1}}
@media(max-width:600px){.canvas-add-project{top:12px;right:16px;font-size:11px;padding:6px 9px}}
/* The project composer opens horizontally without interrupting the canvas. */
.canvas-project-form{position:fixed;top:22px;left:calc(50% + 28px);transform:translateX(-50%);z-index:3;display:flex;align-items:center;max-width:calc(100vw - 88px);border:1px solid transparent;border-radius:9px;background:var(--paper);transition:border-color .2s,box-shadow .2s}
.canvas-project-form.is-open{border-color:#d9e8df;box-shadow:0 5px 18px #34413908}
.canvas-project-form .canvas-add-project{position:static;flex:none;opacity:.85;font-size:12px;padding:9px 12px;background:transparent;white-space:nowrap}
.canvas-project-fields{display:flex;align-items:center;gap:8px;width:0;opacity:0;overflow:hidden;transition:width .23s ease,opacity .18s ease;min-width:0}
.canvas-project-form.is-open .canvas-project-fields{width:294px;opacity:1;padding-right:6px}
#canvas-project-name{min-width:0;width:100%;border:0;background:none;outline:none;font-size:12px;padding:8px 2px}#canvas-project-name::placeholder{color:#88a092}.canvas-project-fields>.text-button{flex:none;white-space:nowrap}.canvas-project-fields>.icon-button{font-size:17px}
.project-heading{flex-wrap:wrap}.heading-delete{opacity:0}.project-heading:hover .heading-delete,.project-heading:focus-within .heading-delete{opacity:1}
.project-delete-options{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;flex-basis:100%;padding:12px 14px;background:#f8f4ed;border:1px solid #ede3d7;border-radius:7px;font-size:11px;margin-top:4px}.project-delete-options>span{color:#806d58}.project-delete-options .danger{color:#985b4c}
@media(hover:none){.heading-delete{opacity:.8}}
@media(max-width:600px){.canvas-project-form{top:12px}.canvas-project-form .canvas-add-project{padding:8px;font-size:11px}.canvas-project-form.is-open .canvas-project-fields{width:220px}.canvas-project-fields{gap:5px}.notebook{padding-top:76px}}
.canvas-project-fields{visibility:hidden}.canvas-project-form.is-open .canvas-project-fields{visibility:visible}
/* Inline project entry stays light: one underline, no enclosing box. */
.canvas-project-form,.canvas-project-form.is-open{border:0;border-bottom:1px solid transparent;border-radius:0;box-shadow:none}
.canvas-project-form.is-open{border-bottom-color:#d4e4da}
.canvas-project-form .canvas-add-project,.canvas-project-form .canvas-add-project:hover,.canvas-project-form .canvas-add-project:focus-visible{border:0;border-radius:0;background:transparent}
/* Keep the underline tucked between the plus and close controls. */
.canvas-project-form,.canvas-project-form.is-open{border-bottom:0}
.canvas-project-form::after{content:'';position:absolute;left:12px;right:20px;bottom:0;height:1px;background:#d4e4da;opacity:0;pointer-events:none;transition:opacity .18s}
.canvas-project-form.is-open::after{opacity:1}
.canvas-project-form.is-open .canvas-project-fields{width:240px;padding-right:6px}
@media(max-width:600px){.canvas-project-form::after{left:8px}.canvas-project-form.is-open .canvas-project-fields{width:200px}}
/* One source of notes, with a separate live project view. */
.split-canvas{display:grid;grid-template-columns:minmax(0,var(--notes-width,1fr)) 12px minmax(0,var(--projects-width,1fr));max-width:1550px;margin:0 auto;min-height:100%;padding:100px 36px 70px;gap:0}
.notes-column,.projects-column{min-width:0;padding:0 clamp(22px,3vw,52px)}.notes-column{cursor:text}.projects-column{border-left:0}
.column-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 18px;margin-bottom:30px}.column-heading h1{font-size:12px;font-weight:500;letter-spacing:.9px;margin:0;color:#607c6c}.column-heading>span{font-size:10px;color:#8fa397}
#document{min-height:calc(100dvh - 260px)}.note-row{gap:8px;align-items:flex-start;margin:5px -9px;padding:7px 9px}.note-body{flex:1;min-width:0}.note-text{font-size:14px}.drag-note{flex:none;width:20px;height:29px;padding:0;color:#96ad9f;font-size:19px;line-height:1;cursor:grab;opacity:.45;touch-action:auto}.drag-note:active{cursor:grabbing}.note-row:hover .drag-note,.drag-note:focus-visible,.project-note:hover .drag-note{opacity:1}.note-tools{padding-top:4px}.is-empty .note-tools{visibility:visible;opacity:0}.is-empty .note-row:focus-within .note-tools{opacity:.6}
.project-question{margin:9px 0 5px;padding:10px 12px;border-left:2px solid #b9d3c3;background:#edf6f0;border-radius:0 5px 5px 0;font-size:11px;color:#597765}.project-question label{display:flex;flex-wrap:wrap;align-items:center;gap:7px 12px}.project-choice{max-width:100%;font-size:11px;border:0;border-bottom:1px solid #c9ddd1;background:transparent;padding:5px 1px;color:#436b55}
.project-card{border:1px solid transparent;border-radius:8px;padding:10px 14px 14px;margin:0 -14px 25px;transition:border-color .15s,background .15s}.project-card .project-heading{margin:0 0 10px;scroll-margin-top:100px}.project-heading h2{font-size:14px}.project-card.drop-active{border-color:#79a18a;background:#e9f5ed}.dragging-note .project-card{border-color:#d3e5da;border-style:dashed}.dragging-note .project-card.drop-active{border-color:#79a18a;border-style:solid}
.project-note{display:flex;align-items:flex-start;gap:8px;padding:8px 0;border-bottom:0}.project-note-text{flex:1;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere;text-align:left;padding:3px 0;font-size:13px;line-height:1.8;color:#567061;cursor:text}.project-note-actions{display:flex;align-items:center;gap:3px;opacity:0;padding-top:4px}.project-note:hover .project-note-actions,.project-note:focus-within .project-note-actions{opacity:1}.project-note-select{width:25px;max-width:110px;border:0;background:transparent;font-size:10px;color:#769483;padding:3px 0}.project-note-select:focus{width:110px}.project-drop-hint{font-size:11px;color:#94ab9d;margin:15px 0 3px;padding-left:3px}.projects-empty{padding:25px 0;font-size:13px;color:#7d9c89}.projects-empty p{margin:0 0 8px}
@media(max-width:1100px){.split-canvas{padding:90px 14px 50px}.notes-column,.projects-column{padding-inline:20px}.note-tools{gap:0}.note-text{font-size:13px}.project-note-actions{flex-wrap:wrap;max-width:48px}}
@media(max-width:720px){.split-canvas{grid-template-columns:minmax(0,1fr);padding:80px 20px 40px}.notes-column,.projects-column{padding:0 8px}.projects-column{border-left:0;border-top:1px solid #e3ece6;padding-top:28px;margin-top:35px}#document{min-height:30vh}.note-text{font-size:16px}.column-heading{margin-bottom:18px}.project-note-actions{max-width:none}.note-tools{opacity:.7}.project-note-actions{opacity:.7}}
@media(hover:none){.drag-note{opacity:.8}.project-note-actions{opacity:.8}}

/* Writing markers and a directly adjustable split. */
.writing-line{position:relative;min-width:0;padding-left:var(--writing-start,0%)}
.writing-pen{position:absolute;left:calc(var(--writing-start,0%) - 24px);top:0;width:22px;height:32px;padding:0;font-size:21px;line-height:32px;color:#7f9e8c;cursor:ew-resize;touch-action:none;user-select:none;opacity:.7}
.writing-pen:hover,.writing-pen:focus-visible,.writing-pen.is-dragging,.is-writing .writing-pen{opacity:1;color:#4a725b}
.writing-pen:focus-visible{outline:1px solid #93b3a0;outline-offset:2px;border-radius:3px}
.column-divider{position:relative;cursor:col-resize;touch-action:none;outline:none;align-self:stretch}
.column-divider:before{content:"";position:absolute;top:0;bottom:0;left:5px;width:1px;background:#e3ece6;transition:background .15s,width .15s}
.column-divider:hover:before,.column-divider:focus-visible:before,.resizing-columns .column-divider:before{width:2px;background:#98b5a4}
.resizing-columns,.resizing-columns *{cursor:col-resize!important;user-select:none!important}
@media(max-width:720px){.column-divider{display:none}}

/* Use the canvas right up to the sidebar; keep one writing marker active. */
@media(min-width:721px){
  .split-canvas{max-width:none;padding-inline:12px}
  .notes-column,.projects-column{padding-inline:16px}
  .notes-column{container-type:inline-size}
}
.writing-pen{visibility:hidden;pointer-events:none}
.has-active-pen .writing-pen{visibility:visible;pointer-events:auto}
@container(max-width:260px){
  .note-tools{position:absolute;right:8px;top:-18px;padding:2px 4px;background:var(--paper);border-radius:4px;z-index:1}
}

/* Keep the text start aligned with the heading, even when a note has content. */
.note-row>.drag-note{order:2}

#notes-position{padding:0;font:inherit;color:inherit;letter-spacing:inherit;text-align:left;cursor:grab;touch-action:none;user-select:none}
#notes-position:hover{color:#426a54}
#notes-position:focus-visible{outline:1px solid #93b3a0;outline-offset:5px;border-radius:2px}
#notes-position.is-moving{cursor:grabbing}
.notes-origin{min-width:0}

/* A quiet writing surface and light transfer motion. */
.note-row,.note-row:hover,.note-row:focus-within,.note-text,.note-text:focus,.project-question,.note-tools{background:transparent!important;box-shadow:none}
.writing-pen{display:flex;align-items:center;justify-content:center;height:var(--caret-line-height,32px)}
.writing-pen svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.project-note.is-arriving{opacity:0}

.project-name{font:inherit;color:inherit;padding:0;text-align:left;cursor:text}
.project-name-input{min-width:50px;max-width:100%;width:180px;padding:0 0 2px;border:0;border-radius:0;background:transparent;color:#4e6557;font:inherit;font-size:14px;outline:none}
.project-name-error{font-size:11px;color:#9b6250;flex-basis:100%}
.project-heading:has(.project-name-error:not([hidden])){flex-wrap:wrap}
.project-note-composer{margin:12px 0 0 15px;min-width:0}
.project-note-input{font-size:13px;line-height:1.8}
.subcategory-heading{margin:20px 0 3px 15px;font-size:var(--subcategory-size,11px);font-weight:var(--subcategory-weight,600);line-height:1.6;letter-spacing:.025em;color:var(--subcategory-color,#80998a)}
.subcategory-heading:first-child{margin-top:7px}
.subcategory-name,.subcategory-name-input{font:inherit;letter-spacing:inherit;color:inherit;background:transparent;border:0;border-radius:0;padding:0;text-align:left}
.subcategory-name{cursor:text}
.subcategory-name-input{width:240px;max-width:100%;outline:none;box-shadow:none}
.subcategory-name-input:focus{border:0;outline:none;box-shadow:none}
.project-write-area{display:block;width:100%;height:46px;margin:0;padding:0;border:0;background:transparent;cursor:text}
.project-write-area:focus-visible{outline:1px dashed #aac5b5;outline-offset:-5px}
.project-write-area[hidden]{display:none}
.project-name:focus-visible{outline:1px solid #93b3a0;outline-offset:3px}

.project-name-input:focus,.project-name-input:focus-visible{border:0;outline:none;box-shadow:none}
.project-heading>.heading-delete{margin-left:auto}
.project-heading>.heading-delete{margin-right:-12px}

.heading-rename svg{display:block;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}

.project-heading>.heading-delete{opacity:1}

/* Compact project selectors, with a styled native menu where supported. */
.project-note-select,.project-choice{
  width:auto;max-width:150px;min-height:29px;padding:4px 9px;
  border:1px solid #dae6df;border-radius:8px;background:var(--paper);
  color:#5b7666;font-family:inherit;cursor:pointer;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.project-note-select{font-size:11px;line-height:1.5}
.project-choice{font-size:12px;line-height:1.5;max-width:100%}
.project-note-select:hover,.project-choice:hover{border-color:#aac5b5;background:#f7f9f3}
.project-note-select:focus,.project-choice:focus{width:auto}
.project-note-select:focus-visible,.project-choice:focus-visible{outline:2px solid #aac5b5;outline-offset:2px}
.project-note-actions{max-width:none;flex-wrap:nowrap;gap:6px}
@supports(appearance:base-select){
  .project-note-select,.project-choice,
  .project-note-select::picker(select),.project-choice::picker(select){appearance:base-select}
  .project-note-select,.project-choice{display:inline-flex;align-items:center;gap:9px}
  .project-note-select::picker-icon,.project-choice::picker-icon{color:#829e8e;font-size:10px;transition:rotate .18s}
  .project-note-select:open::picker-icon,.project-choice:open::picker-icon{rotate:180deg}
  .project-note-select::picker(select),.project-choice::picker(select){
    min-width:185px;max-width:min(280px,calc(100vw - 24px));max-height:260px;
    margin-block:6px;padding:5px;border:1px solid #dae6df;border-radius:11px;
    background:var(--paper);color:#4f6b5b;box-shadow:0 8px 28px #35492c18,0 2px 5px #35492c08;
    font:12px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;overflow:auto;
  }
  .project-note-select option,.project-choice option{
    min-height:34px;padding:8px 10px;border-radius:6px;gap:12px;cursor:pointer;
    white-space:normal;overflow-wrap:anywhere;
  }
  .project-note-select option:hover,.project-choice option:hover,
  .project-note-select option:focus,.project-choice option:focus{background:#ebf4ee;outline:none}
  .project-note-select option:checked,.project-choice option:checked{background:#eef6f1;color:#355b46;font-weight:600}
  .project-note-select option::checkmark,.project-choice option::checkmark{color:#59896d;font-size:12px}
}

.project-note{gap:9px}
.project-note>.drag-note{width:6px;flex:0 0 6px;position:relative}
.project-note>.drag-note:before{content:"";position:absolute;inset:0 -7px}

/* Keep closed project selectors visually light. */
.project-note-select,.project-choice,.project-note-select:hover,.project-choice:hover{border-color:transparent;background:transparent;box-shadow:none}

@supports(appearance:base-select){
  .project-note-select::picker-icon,.project-choice::picker-icon{
    content:"";width:6px;height:6px;margin-left:3px;margin-top:-3px;
    border-right:1.25px solid currentColor;border-bottom:1.25px solid currentColor;
    rotate:45deg;
  }
  .project-note-select:open::picker-icon,.project-choice:open::picker-icon{rotate:225deg;margin-top:3px}
}

.project-note-actions{align-items:center;padding-top:0}
.project-note-actions .remove-note{position:relative;height:29px;padding:0;font-size:0}
.project-note-actions .remove-note:before,.project-note-actions .remove-note:after{
  content:"";position:absolute;left:50%;top:50%;width:9px;height:1px;background:currentColor;
  transform:translate(-50%,-50%) rotate(45deg);
}
.project-note-actions .remove-note:after{transform:translate(-50%,-50%) rotate(-45deg)}

/* Align note actions with the project actions above. */
.project-note-actions{margin-right:-12px}
.project-note-actions .project-note-select{padding-right:7px}
.complete-note{display:inline-flex;align-items:center;justify-content:center;width:24px;height:29px;padding:0;flex:none;color:#8ea296}
.complete-note svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.complete-note:hover,.complete-note:focus-visible{color:#527d6a}
.sidebar-archive{padding:0 10px;font-size:12px}
.sidebar-archive>summary{display:flex;align-items:center;gap:8px;cursor:pointer;padding:10px 0;color:#678373;list-style:none}
.sidebar-archive>summary::-webkit-details-marker{display:none}
.sidebar-archive>summary:before{content:'›';display:inline-block;transition:rotate .15s}
.sidebar-archive[open]>summary:before{rotate:90deg}
.sidebar-archive>summary .count{margin-left:auto}
.archive-note{padding:12px 0;border-top:1px solid #e2ebe5}
.archive-note-meta{font-size:10px;color:#8ea196}
.archive-note-text{font-size:12px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;color:#5b7566;margin:6px 0}
.archive-restore{font-size:10px;color:#779584;padding:0}
.archive-empty{font-size:11px;color:#8ea196;margin:4px 0 14px}
.canvas-project-form .canvas-add-project{height:36px;padding-block:0}
.canvas-project-fields{height:36px}
#canvas-project-name{height:36px;font-size:12px;line-height:18px;padding:0 2px}
.canvas-project-fields>.text-button{height:36px;font-size:12px;line-height:18px;padding-block:0}
.canvas-project-fields>.icon-button{display:flex;align-items:center;justify-content:center;height:36px;padding-block:0}
#main-scroll{overflow:hidden}
.split-canvas{height:100%;min-height:0;grid-template-rows:minmax(0,1fr);padding-bottom:24px}
.notes-column,.projects-column{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#d8e2dc transparent;padding-bottom:32px}
@media(max-width:720px){.split-canvas{grid-template-rows:minmax(0,1fr) minmax(0,1fr);row-gap:16px}.projects-column{margin-top:0;padding-top:18px}}

.project-context-input{display:block;box-sizing:border-box;width:100%;min-height:72px;max-height:240px;resize:vertical;margin:9px 0 0;padding:8px 0;border:0;border-bottom:1px solid #deeae2;border-radius:0;background:transparent;color:#567061;font-family:inherit;font-size:12px;line-height:1.7;outline:none}
.project-context-input::placeholder{color:#97ab9f}
.project-context-input:focus{border-bottom-color:#9abaa7}
.project-context-hint{font-size:10px;line-height:1.6;margin:6px 0 10px;color:#8fa698}
.project-alias-label{display:block;margin-top:18px;font-size:12px;font-weight:500;color:#567061}
.project-alias-label span{font-weight:400;color:#8fa698}
.project-alias-input{display:block;width:100%;box-sizing:border-box;margin-top:7px;padding:7px 0;border:0;outline:none!important;border-radius:0;box-shadow:none;background:transparent;color:#567061;font:inherit;font-size:12px}
.project-alias-input::placeholder{color:#97ab9f}

.heading-context{display:inline-flex;align-items:center;justify-content:center;width:16px;height:20px;padding:0;color:#96ad9f}
.heading-context svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.heading-context:hover,.heading-context.has-context{color:#608771}
.heading-context:focus-visible{outline:1px solid #93b3a0;outline-offset:2px;border-radius:3px}
.canvas-project-form .canvas-add-project{font-size:18px;line-height:1;padding:9px 10px}
#project-context-dialog .project-context-input{min-height:130px;margin-top:16px}
#project-context-dialog .dialog-actions{align-items:center;justify-content:space-between}
#project-context-dialog .dialog-actions .primary{margin-left:auto}

#project-context-text,#project-context-text:focus,#project-context-text:focus-visible{border:0;outline:none;box-shadow:none}
.website-context{margin:15px 0 10px}.website-context-row{display:flex;align-items:center;gap:14px;justify-content:space-between}.website-context-row input{flex:1;min-width:0}.website-context-row>button{flex:none}.website-context-row a{font-size:10px;color:#567061}.website-context-row>div{display:flex;gap:14px}#context-website-draft{min-height:100px!important;border:0;outline:0;background:transparent}#context-website-url:focus{outline:0;box-shadow:none}#project-context-dialog{max-height:90dvh;overflow-y:auto}.website-context [hidden]{display:none}
.canvas-project-form .canvas-add-project span{font-size:12px;line-height:1.5}
.heading-collapse{display:inline-flex;align-items:center;justify-content:center;width:18px;height:22px;padding:0;color:#809d8c}
.heading-collapse:hover{color:#4a735c}
.heading-collapse:focus-visible{outline:1px solid #93b3a0;outline-offset:2px;border-radius:3px}

.project-heading>.heading-collapse{margin-left:auto}
.project-heading>.heading-delete{margin-left:0}


.project-content{
  display:grid;grid-template-rows:1fr;opacity:1;visibility:visible;
  transition:grid-template-rows .65s cubic-bezier(.22,.61,.36,1),opacity .55s ease .06s,visibility 0s;
}
.project-content-inner{min-height:0;overflow:hidden;padding-inline:14px;margin-inline:-14px}
.project-card.is-collapsed>.project-content{
  grid-template-rows:0fr;opacity:0;visibility:hidden;pointer-events:none;
  transition:grid-template-rows .65s cubic-bezier(.22,.61,.36,1),opacity .4s ease,visibility 0s .65s;
}

.column-heading{justify-content:center;text-align:center}

.project-hover-menu{
  position:fixed;inset:auto;margin:0;width:190px;max-width:calc(100vw - 16px);max-height:260px;
  padding:5px;border:1px solid #dae6df;border-radius:11px;background:var(--paper);color:#4f6b5b;
  box-shadow:0 8px 28px #35492c18,0 2px 5px #35492c08;overflow:auto;
  font:12px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.project-hover-menu:popover-open{animation:project-menu-appear .15s ease-out}
.project-menu-option{display:block;position:relative;width:100%;min-height:34px;padding:8px 10px 8px 30px;border:0;border-radius:6px;background:transparent;color:inherit;text-align:left;font:inherit;overflow-wrap:anywhere}
.project-menu-option:hover,.project-menu-option:focus-visible{background:#ebf4ee;outline:none}
.project-menu-option[aria-selected="true"]{background:#eef6f1;color:#355b46;font-weight:600}
.project-menu-option[aria-selected="true"]:before{content:"✓";position:absolute;left:10px;color:#59896d}
.project-note-actions:has(select[data-hover-open="true"]){opacity:1}
select[data-hover-open="true"]::picker-icon{rotate:225deg;margin-top:3px}
@keyframes project-menu-appear{from{opacity:0;translate:0 -3px}to{opacity:1;translate:0 0}}

/* A continuous canvas, with settings revealed beside their icon. */
.line-icon{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;flex:none}
.heading-tool{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:24px;padding:2px;color:#809d8c;border:0;background:transparent}
.heading-tool:hover,.heading-tool[aria-expanded="true"]{color:#406b53}
.heading-tool:focus-visible,.reference-tab:focus-visible{outline:1px solid #93b3a0;outline-offset:2px;border-radius:3px}
.project-heading>.heading-references{margin-left:auto}
.project-heading>.heading-collapse{margin-left:0;flex:none}
.project-heading>.heading-sort{margin-left:-4px;margin-right:-4px}
.project-reference-tabs{display:flex;align-items:center;gap:11px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;flex:1 1 150px;margin-left:auto;padding:4px 1px}
.project-reference-tabs[hidden],.project-reference-panel[hidden],.project-notes-panel[hidden]{display:none}
.reference-tab{font:10px/1.6 inherit;font-size:10px;white-space:nowrap;color:#839a8c;padding:3px 0;border:0;background:none;flex:none}
.reference-tab[aria-selected="true"]{color:#3f6851;font-weight:600}
.reference-tab-item{position:relative;display:flex;align-items:center;gap:3px;flex:none;min-width:0}
.reference-tab-rename{display:flex;align-items:center;justify-content:center;width:15px;height:21px;padding:0;color:#839a8c;opacity:0;transition:opacity .15s}
.reference-tab-rename .line-icon{width:11px;height:11px}
.reference-tab-item:hover .reference-tab-rename,.reference-tab-item:focus-within .reference-tab-rename{opacity:1}
.reference-tab-input{font-size:10px;line-height:1.6;padding:3px 0;min-width:7ch;max-width:32ch;border:0!important;outline:none!important;box-shadow:none!important;background:none;color:#3f6851;caret-color:#537a63}
.reference-tab-adder{display:flex;align-items:center;flex:none;margin:0}
.reference-tab-add{font-size:13px;color:#839a8c;padding:3px;line-height:1.6}
.reference-tab-add:hover{color:#3f6851}
@media(hover:none){.reference-tab-rename{opacity:1}}
.references-open .project-heading{flex-wrap:nowrap;gap:7px}
.references-open .project-heading h2{min-width:35px;max-width:100px;flex:0 1 auto}
.references-open .project-name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.references-open .heading-count,.references-open .heading-rename{display:none}
.references-open .heading-references{margin-left:0}
.references-open .project-heading:has(.project-delete-options:not([hidden])),.references-open .project-heading:has(.project-name-input:not([hidden])){flex-wrap:wrap}
.subcategory-heading{display:flex;align-items:center;gap:7px}
.subcategory-heading>.line-icon{width:13px;height:13px;opacity:.8}
.subcategory-adder{display:flex;align-items:center;gap:8px;margin:0;min-height:24px;flex:none}
.subcategory-create{font-size:13px;font-weight:300;color:#80998a;padding:0}
.subcategory-adder:not(.is-open){gap:0}
.project-heading:has(.subcategory-adder.is-open){flex-wrap:wrap}
.subcategory-adder.is-open{margin-left:auto}
.project-inline-input{display:block;flex:1;min-width:0;width:100%;border:0!important;outline:none!important;box-shadow:none!important;background:transparent;resize:none;overflow:hidden;font:inherit;font-size:13px;line-height:1.8;color:#567061;padding:3px 0;caret-color:#537a63;white-space:pre-wrap;overflow-wrap:anywhere}
.subcategory-create:hover{color:#3f6851}
.note-added-date{font-size:11px;line-height:29px;white-space:nowrap;color:#617b6c;font-weight:400;margin-right:8px}
.project-note:hover .project-note-actions,.project-note:focus-within .project-note-actions,.note-row:hover .note-tools,.note-row:focus-within .note-tools{opacity:1;visibility:visible}
.note-link{text-decoration:underline;text-decoration-color:#b9cdc1;text-underline-offset:3px;cursor:pointer;overflow-wrap:anywhere}
.note-link:hover{color:#36634b;text-decoration-color:currentColor}
.note-links{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:10px;margin-top:4px;color:#80998a}
.project-note,.note-tools{position:relative}
@media(max-width:900px){.note-added-date{position:absolute;right:0;top:-13px;line-height:1.2;margin:0}}
.subcategory-create-input{width:180px;max-width:65%;border:0!important;outline:none!important;box-shadow:none!important;background:none;padding:3px 0;font-size:11px;color:#4f6b5b}
.subcategory-create-input::placeholder{color:#98aa9f}
.subcategory-create-cancel{font-size:16px;color:#80998a}
.subcategory-add-note,.subcategory-remove{font-size:13px;line-height:1;padding:2px;color:#80998a;opacity:0;transition:opacity .15s}
.subcategory-heading:hover .subcategory-add-note,.subcategory-heading:hover .subcategory-remove,.subcategory-heading:focus-within .subcategory-add-note,.subcategory-heading:focus-within .subcategory-remove{opacity:1}
@media(hover:none){.subcategory-add-note,.subcategory-remove{opacity:1}}
.project-reference-panel{padding:8px 0 14px;animation:reference-appear .3s ease;cursor:default}
.reference-entry{padding:9px 0 18px}
.reference-entry-heading,.login-row,.vault-toolbar{display:flex;align-items:center;gap:12px;min-width:0}
.reference-entry-heading>.reference-title{flex:1;min-width:0}
.reference-entry-heading>.text-button,.reference-delete{flex:none;color:#80998a;font-size:10px}
.reference-delete{font-size:17px;padding:0 3px}
.reference-field{display:block;width:100%;min-width:0;background:transparent;border:0!important;border-radius:0;outline:none!important;box-shadow:none!important;font:12px/1.9 inherit;font-size:12px;line-height:1.9;color:#4f6b5b;padding:7px 0;caret-color:#537a63}
.reference-field::placeholder{color:#98aa9f}
textarea.reference-field{resize:vertical;min-height:60px;white-space:pre-wrap}
.reference-title{font-weight:600}
.reference-note{display:flex;align-items:flex-start;gap:9px;padding:8px 0}
.reference-bullet{width:6px;flex:0 0 6px;height:29px;display:flex;align-items:center;justify-content:center;color:#96ad9f;font-size:19px;line-height:1}
.reference-note-content{flex:1;min-width:0}
.reference-note .reference-field{padding:3px 0;line-height:1.8}
.reference-note .reference-title[hidden]{display:none}
.reference-note textarea.reference-field{min-height:29px;resize:none;overflow:hidden}
.reference-note-actions{display:flex;align-items:center;gap:3px;min-height:29px;opacity:0;transition:opacity .15s}
.reference-note:hover .reference-note-actions,.reference-note:focus-within .reference-note-actions{opacity:1}
.reference-note-actions .line-icon{width:12px;height:12px}
.project-reorder{display:inline-flex;gap:0;flex:none}
.project-reorder .heading-tool{width:17px}
.project-reorder .heading-tool:disabled{opacity:.25;cursor:default}
.project-heading-actions{display:flex;align-items:center;gap:5px;margin-left:auto;flex:none}
.project-heading-actions>button,.project-heading-actions .heading-tool{display:inline-flex;align-items:center;justify-content:center;width:22px;height:24px;padding:0;margin:0;line-height:1}
.project-heading-actions .line-icon{display:block;width:14px;height:14px}
.project-heading-actions .subcategory-create .line-icon{width:12px;height:12px}
.project-heading-actions .heading-delete{opacity:1;margin-right:-12px}
.reference-composer{margin:5px 0 0 15px;min-height:38px}
.reference-composer textarea.reference-field{min-height:29px;resize:none;overflow:hidden;padding:3px 0;line-height:1.8}
.reference-composer .writing-pen{cursor:text;left:-24px;top:3px}
.reference-composer:hover .writing-pen,.reference-composer:focus-within .writing-pen{visibility:visible;pointer-events:auto}
body:has(.reference-composer:focus-within) .has-active-pen .writing-pen{visibility:hidden}
@media(hover:none){.reference-note-actions{opacity:1}}
.reference-caption{font-size:10px;line-height:1.8;color:#80998a;max-width:460px;margin:8px 0}
.vault-unlock{max-width:400px}.vault-unlock>.text-button{margin:8px 0}
.vault-toolbar{justify-content:space-between}.login-row>.text-button{flex:none;font-size:10px}
@keyframes reference-appear{from{opacity:0;translate:0 3px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.project-reference-panel{animation:none}}
.sidebar,.sidebar.is-open{background:var(--paper);border:0;box-shadow:none}
.search{border:0;border-radius:0;background:transparent;box-shadow:none;cursor:text}
.search>svg{width:14px;height:14px;flex:none;fill:none;stroke:#768b7f;stroke-width:1.2;stroke-linecap:round;align-self:center}
.search input{height:20px;line-height:20px;padding:0;caret-color:#567061}
.search input,.search input:focus,.search input:focus-visible{border:0;outline:none;box-shadow:none}
.settings-popover{position:fixed;inset:0 auto 0 0;z-index:7;width:360px;max-width:100vw;height:100dvh;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;background:var(--paper);padding:20px 20px 28px;border:0;border-radius:0 14px 14px 0;box-shadow:8px 0 36px #34413912}
.settings-popover-heading{display:flex;align-items:center;justify-content:space-between;position:sticky;top:-20px;z-index:2;padding:8px 0 14px;background:var(--paper)}
.settings-popover-title{margin:0 10px 4px;font-size:13px;font-weight:500;color:#567061}
.subheading-settings{border:0;margin:12px 0 20px;padding:0;min-width:0}
.subheading-settings legend{font-size:11px;font-weight:600;color:#567061;margin-bottom:10px;padding:0}
.subheading-setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:9px 0;font-size:11px;color:#678373}
.subheading-setting-row input,.subheading-setting-row select{border:0;border-bottom:1px solid #d9e6de;border-radius:0;background:transparent;padding:4px 0;font-size:11px;min-width:0}
.subheading-setting-row input[type=number]{width:65px;text-align:right}
.subheading-setting-row select{width:156px;appearance:none;padding:7px 25px 7px 9px;border:0;border-radius:7px;background-color:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%238a9980' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;cursor:pointer;transition:background-color .15s}
.subheading-setting-row select:open{background-color:#eaf2ed}
@supports (appearance:base-select){
  .subheading-setting-row select,.subheading-setting-row select::picker(select){appearance:base-select}
  .subheading-setting-row select{display:flex;align-items:center;justify-content:space-between;gap:8px;background-image:none;padding-right:10px}
  .subheading-setting-row select::picker-icon{content:'';width:5px;height:5px;flex:none;border-right:1px solid currentColor;border-bottom:1px solid currentColor;rotate:45deg;translate:0 -2px;transition:rotate .15s}
  .subheading-setting-row select:open::picker-icon{rotate:225deg;translate:0 1px}
  .subheading-setting-row select::picker(select){min-width:190px;max-height:min(360px,65dvh);padding:5px;border:1px solid #d9e7df;border-radius:11px;background:var(--paper);color:#4e6959;box-shadow:0 10px 32px #3441391c;overflow:auto;font-size:12px}
  .subheading-setting-row select option{display:flex;align-items:center;gap:9px;min-height:32px;padding:7px 10px;border-radius:6px;cursor:pointer}
  .subheading-setting-row select option:hover,.subheading-setting-row select option:focus{background:#e8f3ec;outline:0}
  .subheading-setting-row select option:checked{background:#deede4;color:#355b46}
  .subheading-setting-row select option::checkmark{color:#678976}
}
.subheading-color-fields{display:flex;align-items:center;gap:8px}
.subheading-color-fields input[type=color]{width:24px;height:24px;padding:0;border:0;cursor:pointer}
.subheading-hex{width:73px}
.canvas-label-setting{width:112px;text-align:right}
.auto-settings-row{display:flex;align-items:center;gap:9px;position:relative;margin:20px 0 12px}
.auto-settings-row .auto-control{flex:1;margin:0}
.account-card:has(#cloud-signout){display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.account-card #cloud-signout{margin:0}
.ai-info{display:flex;align-items:center}
.ai-info-button{display:flex;align-items:center;justify-content:center;width:15px;height:15px;padding:0;border:1px solid currentColor;border-radius:50%;font:italic 11px/1 Georgia,serif;color:#80998a}
.ai-info-tooltip{position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:1;padding:12px;background:var(--paper);box-shadow:0 3px 20px #34413918;border-radius:6px;font-size:10px;line-height:1.8;color:#678373;visibility:hidden;opacity:0;transition:opacity .15s}
.ai-info-tooltip:after{content:'';position:absolute;left:0;right:0;top:100%;height:10px}
.ai-info:hover .ai-info-tooltip,.ai-info:focus-within .ai-info-tooltip{visibility:visible;opacity:1}
#agent-state[hidden]{display:none}
.agent-controls:not(:has(>:not([hidden]))){display:none}
.app-tooltip{position:fixed;inset:auto;margin:0;max-width:min(260px,calc(100vw - 16px));width:max-content;padding:8px 11px;border:1px solid #d8e5dd;border-radius:9px;background:var(--paper);color:#4b6356;box-shadow:0 6px 22px #35492c14;font:400 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.01em;overflow:visible;z-index:30;overflow-wrap:anywhere}
.app-tooltip:popover-open{animation:tooltip-appear .14s ease-out}
.app-tooltip:after{content:'';position:absolute;left:var(--tip-arrow);width:6px;height:6px;background:var(--paper);transform:translateX(-50%) rotate(45deg)}
.app-tooltip[data-side=top]:after{bottom:-3px}.app-tooltip[data-side=bottom]:after{top:-3px}
@keyframes tooltip-appear{from{opacity:0;translate:0 3px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.app-tooltip:popover-open{animation:none}}
.subheading-hex[aria-invalid=true]{border-color:#ac6e55}
.subheading-settings>.text-button{margin-top:5px;font-size:10px}
.typography-settings{margin:8px 0 18px}
.typography-section>summary{cursor:pointer;font-size:11px;font-weight:600;color:#567061;padding:9px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
.typography-section>summary::-webkit-details-marker{display:none}
.typography-section>summary:after{content:'+';width:16px;flex:none;text-align:center;font:300 19px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;margin-right:0}
.typography-section[open]>summary:after{content:'−'}
.typography-section .subheading-settings{margin:0 0 12px}
.column-heading h1,.project-heading h2,.project-name-input{font-family:var(--main-heading-font);font-size:var(--main-heading-size);font-weight:var(--main-heading-weight);font-style:var(--main-heading-style);color:var(--main-heading-color)}
.subcategory-heading{font-family:var(--subcategory-font);font-style:var(--subcategory-style)}
.note-text,.project-note-text,.project-inline-input,textarea.reference-field,.archive-note-text{font-family:var(--note-body-font);font-size:var(--note-body-size);font-weight:var(--note-body-weight);font-style:var(--note-body-style);color:var(--note-body-color)}
.project-note-text .note-link{font:inherit;color:inherit}
@supports selector(::-webkit-scrollbar){
  *,.notes-column,.projects-column,.sidebar-panel,#main-scroll,.settings-popover,.project-hover-menu{scrollbar-width:auto;scrollbar-color:auto}
  *::-webkit-scrollbar{width:6px;height:6px}
  *::-webkit-scrollbar-track{background:transparent}
  *::-webkit-scrollbar-thumb{background:#d8e2dc;border-radius:6px}
  *::-webkit-scrollbar-button{display:none;width:0;height:0}
  *::-webkit-scrollbar-corner{background:transparent}
}

/* Keep content updates from moving the reader between independently scrolled panels. */
.notes-column,.projects-column{overflow-anchor:none}

/* A gentle drawer motion, with immediate interaction cancellation on close. */
.settings-popover{transform:translateX(-100%);opacity:0;transition:transform .46s cubic-bezier(.22,.61,.36,1),opacity .32s ease;pointer-events:none}
.settings-popover.is-open{transform:translateX(0);opacity:1;pointer-events:auto}
.sidebar{transition:width .42s cubic-bezier(.22,.61,.36,1),box-shadow .42s ease}
.sidebar-panel{transition:opacity .28s ease,visibility .28s}
@supports(appearance:base-select){
  .subheading-setting-row select::picker(select){overflow:hidden;max-height:none}
  .settings-select-options{display:block;max-height:min(340px,60dvh);overflow-y:auto;overscroll-behavior:contain;font-weight:400;font-style:normal;scrollbar-width:thin;scrollbar-color:#d8e2dc transparent}
  .settings-select-options::before{display:none}
  @supports selector(::-webkit-scrollbar){
    .settings-select-options{scrollbar-width:auto;scrollbar-color:auto}
    .settings-select-options::-webkit-scrollbar{width:5px;height:5px}
    .settings-select-options::-webkit-scrollbar-track{background:transparent}
    .settings-select-options::-webkit-scrollbar-thumb{background:#d8e2dc;border-radius:6px}
    .settings-select-options::-webkit-scrollbar-button{display:none;width:0;height:0}
  }
}
@media(prefers-reduced-motion:reduce){.settings-popover,.sidebar,.sidebar-panel{transition:none}}

.progress-note{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:22px;height:29px;padding:0 3px;border:0;background:transparent;color:#8ea597;font-size:10px;white-space:nowrap}
.progress-note .line-icon{width:13px;height:13px}
.progress-note:hover,.progress-note:focus-visible{color:#9b793f}
.progress-note[aria-pressed=true]{color:#9b793f}
.is-in-progress .note-tools,.is-in-progress .project-note-actions{opacity:1}
.is-in-progress:not(:hover):not(:focus-within) .note-tools>:not(.progress-note),.is-in-progress:not(:hover):not(:focus-within) .project-note-actions>:not(.progress-note){opacity:0}

.subcategory-group{margin-top:20px}
.subcategory-group:first-child{margin-top:0}
.subcategory-group>.subcategory-heading{margin-top:0}
.subcategory-collapse{color:inherit;opacity:0;transition:opacity .15s}
.subcategory-collapse:hover,.subcategory-collapse:focus-visible{opacity:1}
.subcategory-collapse .line-icon{width:12px;height:12px}
.subcategory-content{display:grid;grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows .5s cubic-bezier(.22,.61,.36,1),opacity .4s ease,visibility 0s}
.subcategory-content-inner{min-height:0;overflow:hidden;padding-inline:14px;margin-inline:-14px}
.subcategory-group.is-collapsed>.subcategory-content{grid-template-rows:0fr;opacity:0;visibility:hidden;pointer-events:none;transition:grid-template-rows .5s cubic-bezier(.22,.61,.36,1),opacity .3s ease,visibility 0s .5s}
@media(prefers-reduced-motion:reduce){.subcategory-content,.subcategory-group.is-collapsed>.subcategory-content{transition:none}}

/* Generous targets around the small subcategory icons. */
.subcategory-collapse,.subcategory-add-note{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:32px;padding:8px 4px;touch-action:manipulation}
.subcategory-collapse .line-icon{pointer-events:none}
.subcategory-add-note{margin-left:-5px}
.subcategory-count{font-size:10px;font-weight:400;letter-spacing:0;color:#80998a;white-space:nowrap}
.subcategory-heading:hover .subcategory-collapse,.subcategory-heading:focus-within .subcategory-collapse{opacity:1}
@media(hover:none){.subcategory-collapse,.subcategory-add-note{width:44px;height:44px;margin-block:0;opacity:1}}

.codex-task-link{color:inherit;font-size:11px;font-weight:400;text-decoration:none;white-space:nowrap;opacity:.72}.codex-task-link:hover{text-decoration:underline;opacity:1}.codex-task-link:focus-visible{outline:1px solid currentColor;outline-offset:3px}

/* Copy-to-clipboard button on each note; revealed with the other note tools. */
.copy-note{display:inline-flex;align-items:center;justify-content:center;width:24px;height:29px;padding:0;flex:none;border:0;background:transparent;color:#8ea296}
.copy-note .line-icon{width:13px;height:13px}
.copy-note:hover,.copy-note:focus-visible{color:#527d6a}
.copy-note.is-copied{color:#527d6a}
.copy-note[hidden]{display:none}

/* Thin, tight header band: the + Project control shares one row with the Notes / Projects headings. */
.canvas-project-form{top:8px}
.split-canvas{padding-top:15px}
.column-heading{margin-bottom:14px}
@media(max-width:720px){.canvas-project-form{top:8px}.split-canvas{padding-top:52px}}
/* While the new-project field is open it spans the whole band, so the column titles step aside. */
.column-heading h1{transition:opacity .15s ease}
.app-shell:has(.canvas-project-form.is-open) .column-heading h1{opacity:0;pointer-events:none}
/* Phones: the note tools (date, project, status, copy, done, remove) drop under the text instead of squeezing it. */
@media(max-width:720px){.project-note{flex-wrap:wrap}.project-note-text,.project-note .project-inline-input{flex:1 1 calc(100% - 36px)}.project-note-actions{flex:0 0 100%;justify-content:flex-end}}
/* Settings > Connect an AI agent (hosted site). */
#agent-dialog{width:540px}
.agent-form{margin-top:18px}
.agent-heading{margin:0;font:500 11px/1.4 inherit;letter-spacing:.8px;text-transform:uppercase;color:#607c6c}
.agent-list-heading{margin-top:26px}
.agent-copy-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:18px 0 6px}
.agent-code{display:block;padding:10px 12px;border:1px solid #d2e3d8;border-radius:8px;background:#f8faf5;font:12px/1.6 ui-monospace,Consolas,monospace;color:#3b5546;white-space:pre-wrap;overflow-wrap:anywhere;max-height:150px;overflow:auto}
.agent-warning{margin:20px 0 0;padding:10px 12px;border-radius:8px;background:#fbf4e4;color:#7a5f1f;font-size:12px}
.agent-note,.agent-status{margin:8px 0 0;font-size:11px;color:#759582}
.agent-status.agent-bad{color:#985b4c}
.agent-list{list-style:none;margin:6px 0 0;padding:0}
.agent-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12px}
.agent-list small{display:block;margin-top:2px;color:#779583;font-size:11px}
@media(max-width:600px){#agent-dialog{padding:20px}}
/* Connect an AI agent: connect cards, connected apps, advanced keys. */
.agent-address{display:block}
.agent-steps{margin:10px 0 0;border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:12px}
.agent-steps summary{cursor:pointer;color:#476654}
.agent-steps ol{margin:8px 0 2px;padding-left:18px;color:#607c6c;line-height:1.7}
.agent-steps .agent-copy-row{margin-top:10px}
.agent-keys{margin-top:24px;padding-top:14px;border-top:1px solid var(--line)}
.agent-keys summary{cursor:pointer;font-size:12px;color:#607c6c}
.agent-badge{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:9px;background:#e8f3ec;color:#476654;font-size:10px}
.agent-badge.can-read{background:#fbf4e4;color:#7a5f1f}
/* Icons for Claude / Claude Code / Codex. */
.agent-icon{width:18px;height:18px;flex:none;vertical-align:-4px;margin-right:8px}
.agent-icon-codex,.agent-icon-generic{color:#3f4f48}
.agent-steps summary{display:list-item}
.agent-link{color:#2f5749}
.agent-marks{display:inline-flex;gap:3px;margin-left:8px;vertical-align:middle}
.agent-marks .agent-icon{width:14px;height:14px;margin:0;vertical-align:baseline}
.agent-list strong .agent-icon{width:16px;height:16px;vertical-align:-3px;margin-right:7px}
/* Note history: sort is an icon beside the close button, with a hover menu. */
.note-history-heading{align-items:center;padding:16px 16px 14px 20px}
.note-history-actions{display:flex;align-items:center;gap:2px;flex:none}
.history-sort{position:relative;display:flex}
.history-sort-button,#note-history-close{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:0;border-radius:8px;background:transparent;color:#809d8c;cursor:pointer;font-size:19px;line-height:1;transition:background .15s,color .15s}
.history-sort-button .line-icon{width:16px;height:16px}
.history-sort-button:hover,.history-sort:focus-within .history-sort-button,#note-history-close:hover,#note-history-close:focus-visible{background:#e9f2ec;color:#3f6851}
.history-sort-menu{position:absolute;top:100%;right:0;z-index:2;min-width:172px;margin-top:6px;padding:5px;border:1px solid #dae6df;border-radius:11px;background:var(--paper);box-shadow:0 8px 28px #35492c18,0 2px 5px #35492c08;opacity:0;visibility:hidden;transform:translateY(-4px) scale(.98);transform-origin:top right;transition:opacity .15s ease,transform .15s ease,visibility .15s}
.history-sort-menu:before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.history-sort:not(.is-picked):hover .history-sort-menu,.history-sort:not(.is-picked):focus-within .history-sort-menu{opacity:1;visibility:visible;transform:none}
.history-sort-option{display:block;position:relative;width:100%;min-height:34px;padding:8px 10px 8px 30px;border:0;border-radius:6px;background:transparent;color:#4f6b5b;text-align:left;font:12px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;cursor:pointer;white-space:nowrap}
.history-sort-option:hover,.history-sort-option:focus-visible{background:#ebf4ee;outline:none}
.history-sort-option[aria-checked="true"]{background:#eef6f1;color:#355b46;font-weight:600}
.history-sort-option[aria-checked="true"]:before{content:"✓";position:absolute;left:10px;color:#59896d}
@media(prefers-reduced-motion:reduce){.history-sort-menu{transition:none}}
/* Copy button: right after the last character of the note, shown on hover. */
.copy-mirror{position:fixed;left:-9999px;top:0;height:auto;overflow:hidden;visibility:hidden;pointer-events:none;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal}
.note-row .note-text{padding-right:30px}
.writing-line>.note-end-copy{position:absolute;z-index:1;left:0;top:0}
.note-end-copy{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;margin:0;border:0;border-radius:6px;background:transparent;color:#8ea296;opacity:0;pointer-events:none;transition:opacity .15s,background .15s,color .15s;flex:none}
.project-note-text>.note-end-copy{margin-left:6px;vertical-align:text-bottom}
.note-end-copy .line-icon{width:13px;height:13px}
.note-row:hover .note-end-copy,.note-row:focus-within .note-end-copy,.project-note:hover .note-end-copy,.project-note:focus-within .note-end-copy,.note-end-copy:focus-visible{opacity:1;pointer-events:auto}
.note-end-copy:hover,.note-end-copy:focus-visible,.note-end-copy.is-copied{color:#527d6a;background:#e9f2ec}
.note-end-copy[hidden]{display:none}
@media(hover:none){.note-end-copy{opacity:.7;pointer-events:auto}}
/* Note history entries jump to the note. */
.note-history-item{cursor:pointer;margin:0 -10px;padding-inline:10px;border-radius:8px;transition:background .15s}
.note-history-item:hover{background:#eff7f2}
.note-history-item:focus-visible{background:#eff7f2;outline:none;box-shadow:inset 0 0 0 1px #9dbbaa}
.is-located{border-radius:8px;animation:note-located 2.4s ease-out}
@keyframes note-located{0%,40%{box-shadow:0 0 0 6px #d3eadc}100%{box-shadow:0 0 0 6px #dfead300}}
@media(prefers-reduced-motion:reduce){.is-located{animation:none;box-shadow:0 0 0 6px #d3eadc}}
/* Reference tabs follow the Settings > Reference tabs appearance. */
.reference-tab{font-family:var(--reference-tab-font,inherit);font-size:var(--reference-tab-size,10px);font-weight:var(--reference-tab-weight,400);font-style:var(--reference-tab-style,normal);color:var(--reference-tab-color,#839a8c)}
.reference-tab[aria-selected="true"]{color:var(--reference-tab-active-color,#3f6851);font-weight:var(--reference-tab-active-weight,600)}
.reference-tab-input{font-family:var(--reference-tab-font,inherit);font-size:var(--reference-tab-size,10px);font-weight:var(--reference-tab-active-weight,600);font-style:var(--reference-tab-style,normal);color:var(--reference-tab-active-color,#3f6851)}
/* Drag and drop: notes reorder and move between categories; categories reorder by their grip. */
.is-dragging-source{opacity:.4}
.note-row.drop-before,.project-note.drop-before,.subcategory-group.drop-before{box-shadow:0 -2px 0 #59896d}
.note-row.drop-after,.project-note.drop-after,.subcategory-group.drop-after{box-shadow:0 2px 0 #59896d}
.subcategory-group.drop-target{background:#eef7f1;border-radius:10px;box-shadow:0 0 0 4px #eef7f1}
.subcategory-heading{position:relative}
.subcategory-grip{position:absolute;left:-17px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:16px;height:22px;padding:0;border:0;background:none;color:#96ad9f;cursor:grab;opacity:0;transition:opacity .15s}
.subcategory-grip .line-icon{width:12px;height:12px;stroke-width:2.6}
.subcategory-heading:hover .subcategory-grip,.subcategory-grip:focus-visible,body.dragging-category .subcategory-grip{opacity:.85}
.subcategory-grip:hover{color:#3f6851}
.subcategory-grip:active{cursor:grabbing}
@media(hover:none){.subcategory-grip{opacity:.6}}
/* Pictures pasted into notes. */
.note-images{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px;white-space:normal;line-height:0}
.note-images[hidden]{display:none}
.note-image{position:relative;margin:0;line-height:0}
.note-image-open{display:block;padding:0;border:1px solid var(--line);border-radius:9px;background:#f2f7f4;overflow:hidden;cursor:zoom-in}
.note-image img{display:block;width:auto;height:auto;max-width:min(100%,260px);max-height:150px;object-fit:contain}
.note-image-remove{position:absolute;top:4px;right:4px;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:#2f3a31cc;color:#fff;font-size:14px;line-height:20px;opacity:0;cursor:pointer;transition:opacity .15s}
.note-image:hover .note-image-remove,.note-image-remove:focus-visible{opacity:1}
@media(hover:none){.note-image-remove{opacity:.9}}
.archive-note .note-images{margin-top:8px}
.image-dialog{padding:0;border:0;background:transparent;max-width:min(92vw,1200px);max-height:92vh;overflow:visible}
.image-dialog::backdrop{background:#1d261fcc}
.image-dialog img{display:block;max-width:100%;max-height:88vh;margin:auto;border-radius:10px;background:#fff}
.image-dialog .close-dialog{position:absolute;top:-36px;right:0;color:#fff;font-size:24px}
/* Projects can be dragged by their grip; the picture lightbox close button has no hover background. */
.project-heading{position:relative}
.project-grip{position:absolute;left:-18px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:16px;height:24px;color:#96ad9f;cursor:grab;opacity:0;transition:opacity .15s}
.project-grip .line-icon{width:12px;height:12px;stroke-width:2.6}
.project-heading:hover .project-grip,body.dragging-project .project-grip{opacity:.85}
.project-grip:hover{color:#3f6851}
.project-grip:active{cursor:grabbing}
@media(hover:none){.project-grip{opacity:.6}}
.project-card.drop-before{box-shadow:0 -2px 0 #59896d}
.project-card.drop-after{box-shadow:0 2px 0 #59896d}
.note-image-open{cursor:zoom-in}
.note-image-open:focus-visible{outline:2px solid #93b3a0;outline-offset:2px}
.image-dialog .close-dialog:hover,.image-dialog .close-dialog:focus-visible{background:transparent;color:#fff}
/* Import dialog */
.import-summary{margin:16px 0 8px;padding:0;list-style:none;display:grid;gap:8px;font-size:13px;color:var(--ink)}
.import-summary li{position:relative;padding-left:16px;line-height:1.5}
.import-summary li:before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:#7aa58c}
.import-progress{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.import-progress[hidden]{display:none}
/* Smaller plus on the add-project button. */
.canvas-project-form .canvas-add-project{font-size:14px;padding:9px 9px}
/* Canvas layout: notes beside projects, projects only, or projects in two columns. */
.layout-switch{position:fixed;top:11px;right:22px;z-index:3;display:flex;gap:2px;padding:2px;border:1px solid #dfeae3;border-radius:9px;background:var(--paper);opacity:.7;transition:opacity .15s}
.layout-switch:hover,.layout-switch:focus-within{opacity:1}
.layout-switch button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:26px;height:24px;padding:0;border:0;border-radius:7px;background:transparent;color:#809d8c;cursor:pointer}
.layout-switch button:hover{background:#e9f2ec;color:#3f6851}
.layout-switch button[aria-pressed="true"]{background:#dcece2;color:#345c46}
.layout-switch .line-icon{width:15px;height:15px}
.layout-switch:not([data-unsorted="0"]) button[data-layout="split"][aria-pressed="false"]:after{content:"";position:absolute;top:3px;right:4px;width:5px;height:5px;border-radius:50%;background:#bf9865}
.split-canvas[data-layout="projects"],.split-canvas[data-layout="columns"]{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.split-canvas[data-layout="projects"] .notes-column,.split-canvas[data-layout="columns"] .notes-column,.split-canvas[data-layout="projects"] .column-divider,.split-canvas[data-layout="columns"] .column-divider{display:none}
.split-canvas[data-layout="projects"] .projects-column,.split-canvas[data-layout="columns"] .projects-column{border-left:0;border-top:0;margin-top:0;padding-top:0}
.split-canvas[data-layout="columns"] #projects-board{column-count:2;column-gap:56px}
.split-canvas[data-layout="columns"] .project-card{break-inside:avoid}
@media(max-width:900px){.split-canvas[data-layout="columns"] #projects-board{column-count:1}}
@media(max-width:600px){.layout-switch{top:8px;right:10px}}
/* The add-project plus is drawn, and sits on the same baseline as the word, so the two are level. */
.canvas-add-project .add-line{display:flex;align-items:baseline;gap:6px;line-height:1}
.canvas-add-project .add-plus{flex:none;width:9px;height:9px;background:linear-gradient(currentColor,currentColor) center/100% 1.4px no-repeat,linear-gradient(currentColor,currentColor) center/1.4px 100% no-repeat}
.canvas-project-form .canvas-add-project .add-label{font-size:12px;line-height:1}
/* Sidebar icons sit level with the top row: the logo with "＋ Project", the history icon with the first project heading. */
.sidebar-rail{padding-top:9px}
/* Layout icons at the top right: a little darker. */
.layout-switch{border-color:#cdddd3;opacity:.95}
.layout-switch button{color:#5a7a68}
.layout-switch button:hover{color:#2e503d}
.layout-switch button[aria-pressed="true"]{background:#d0e6d9;color:#264a36}
/* Settings > Icons: one setting darkens (or softens) the icons themselves, never a button's background.
   1. SVG icons: the filter sits on the svg, so only its strokes change.
   2. Icons drawn by CSS (the x on project notes, the plus on the add button): on the drawn parts.
   3. Icons that are text characters (x, dot, gear): on the glyph, except while hovered: their hover colour is already
      darker and the hover background must stay as it is. */
:is(.rail-button,.icon-button,.remove-note,.heading-tool,.heading-collapse,.heading-context,.heading-rename,.note-end-copy,.copy-note,.progress-note,.complete-note,.writing-pen,.subcategory-grip,.project-grip,.subcategory-create,.subcategory-collapse,.layout-switch button,.reference-tab-rename,.reference-tab-add,.history-sort-button,.drag-note) svg,.subcategory-heading>.line-icon,.search svg{filter:var(--icon-filter,none)}
.project-note-actions .remove-note:before,.project-note-actions .remove-note:after,.canvas-add-project .add-plus{filter:var(--icon-filter,none)}
:is(.rail-settings,.icon-button,.remove-note,.drag-note,.subcategory-add-note,.subcategory-remove,.subcategory-create-cancel,.reference-tab-add):not(:has(svg)):not(:hover):not(:focus-visible):not(.project-note-actions .remove-note):not(.image-dialog *):not(.toast *){filter:var(--icon-filter,none)}
/* Resting icons that are drawn faint on purpose come up with the darkness setting. */
@media(hover:hover){.drag-note{opacity:max(.45,var(--icon-floor,0))}}
.writing-pen{opacity:max(.7,var(--icon-floor,0))}
.icon-tone{display:flex;align-items:center;gap:10px}
/* A thin slider: a 2px track filled up to a small round handle. */
.subheading-setting-row .icon-tone input[type=range]{-webkit-appearance:none;appearance:none;width:118px;height:14px;margin:0;padding:0;border:0;background:transparent;cursor:pointer;--tone:100%}
.icon-tone input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(to right,#4e7a61 var(--tone),#cdddd3 var(--tone))}
.icon-tone input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:10px;height:10px;margin-top:-4px;border:0;border-radius:50%;background:#4e7a61;transition:transform .12s}
.icon-tone input[type=range]:hover::-webkit-slider-thumb,.icon-tone input[type=range]:focus-visible::-webkit-slider-thumb{transform:scale(1.25)}
.icon-tone input[type=range]::-moz-range-track{height:2px;border-radius:2px;background:#cdddd3}
.icon-tone input[type=range]::-moz-range-progress{height:2px;border-radius:2px;background:#4e7a61}
.icon-tone input[type=range]::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:#4e7a61}
.icon-tone input[type=range]:focus-visible{outline:1px solid #93b3a0;outline-offset:3px;border-radius:4px}
.icon-tone output{min-width:50px;font-size:11px;color:#456955;text-align:right}
/* The blank line at the top of every project: a note written there has no category yet, so the AI picks one.
   It lines up with the notes below it: same dot column, same text start. The hint shows only on hover or focus. */
.project-quick-add{display:flex;align-items:flex-start;gap:9px;padding:8px 0}
.project-quick-add[hidden]{display:none}
.quick-add-dot{flex:0 0 6px;width:6px;height:29px;display:flex;align-items:center;justify-content:center;color:#96ad9f;font-size:19px;line-height:1;user-select:none;opacity:.3;filter:var(--icon-filter,none);transition:opacity .15s}
.project-quick-add:hover .quick-add-dot,.project-quick-add:focus-within .quick-add-dot{opacity:max(.75,var(--icon-floor,0))}
.project-quick-input{cursor:text}
.project-quick-input::placeholder{color:transparent;transition:color .15s}
.project-quick-add:hover .project-quick-input::placeholder,.project-quick-input:focus::placeholder{color:#9fb4a7}
/* Clicking a project note swaps its text for an edit box; the copy button stays on show beside the last character. */
.project-note>.note-end-copy{position:absolute;z-index:1;left:0;top:0}
.project-note.is-editing>.note-end-copy{opacity:1;pointer-events:auto}
.project-note .project-inline-input{padding-right:26px}
/* Reference tabs can be dragged into your own order; reference notes get the same hover copy icon after the last character as project notes. */
.reference-tab-item.is-dragging{opacity:.4}
.reference-tab-item.drop-before{box-shadow:-2px 0 0 #59896d}
.reference-tab-item.drop-after{box-shadow:2px 0 0 #59896d}
.reference-tab-adder.drop-before{box-shadow:-2px 0 0 #59896d}
.reference-note-content{position:relative}
.reference-note-content>.note-end-copy{position:absolute;z-index:1;left:0;top:0}
.reference-note textarea.reference-field{padding-right:26px}
.reference-note:hover .note-end-copy,.reference-note:focus-within .note-end-copy{opacity:1;pointer-events:auto}
/* A soft glow where an organised note landed, and behind a word the spelling help just fixed. */
.is-landed{border-radius:8px;animation:note-landed 2.8s ease-out}
@keyframes note-landed{0%{background:#b9e5cb;box-shadow:0 0 0 6px #b9e5cb}30%{background:#ceecda;box-shadow:0 0 0 6px #ceecda}100%{background:#dcecce00;box-shadow:0 0 0 6px #dcecce00}}
@media(prefers-reduced-motion:reduce){.is-landed{animation:none;background:#d5efdf;box-shadow:0 0 0 6px #d5efdf}}
.spell-flash{position:fixed;z-index:60;pointer-events:none;border-radius:4px;background:#8dd2aa;mix-blend-mode:multiply;opacity:0;animation:spell-flash 1.7s ease-out forwards}
@keyframes spell-flash{0%{opacity:0;transform:scale(.85)}12%{opacity:.8;transform:scale(1.08)}35%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.spell-flash{animation:spell-flash-still 1.4s linear forwards}@keyframes spell-flash-still{0%,70%{opacity:.5}100%{opacity:0}}}
/* Reference notes: the dot is the drag handle (reorder in the tab, or drop on another tab), and the blank row at the top starts a note. */
.reference-note>.drag-note{width:6px;flex:0 0 6px;position:relative}
.reference-note>.drag-note:before{content:"";position:absolute;inset:0 -7px}
.reference-note.is-dragging{opacity:.4}
.reference-note.drop-before{box-shadow:0 -2px 0 #59896d}
.reference-note.drop-after{box-shadow:0 2px 0 #59896d}
.reference-tab-item.drop-into{border-radius:6px;background:#d6efe0;box-shadow:0 0 0 3px #d6efe0}
.reference-composer.project-quick-add{margin:0;min-height:0}
/* Sidebar tools: new project, layout, voice note. Hover or focus a button for its options; the old top-right controls are gone. */
.rail-tool .line-icon{width:20px;height:20px}
.canvas-project-form .canvas-add-project{display:none}
.rail-flyout{position:fixed;z-index:20;min-width:178px;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--paper);box-shadow:0 8px 28px #34413914}
.rail-flyout[hidden]{display:none}
.flyout-title{margin:3px 9px 6px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#8ea296}
.flyout-option,.rail-flyout .layout-switch button{display:flex;align-items:center;gap:9px;width:100%;height:auto;padding:7px 9px;border:0;border-radius:7px;background:transparent;color:#557463;font-size:12px;line-height:1.3;text-align:left;cursor:pointer}
.flyout-option:hover,.rail-flyout .layout-switch button:hover{background:#e9f2ec;color:#2e503d}
.rail-flyout .layout-switch{position:static;display:flex;flex-direction:column;gap:2px;padding:0;border:0;border-radius:0;background:none;opacity:1}
.rail-flyout .layout-switch button[aria-pressed="true"]{background:#dcece2;color:#264a36;font-weight:600}
.rail-flyout .line-icon{width:16px;height:16px;flex:none}
.rail-flyout .layout-switch:not([data-unsorted="0"]) button[data-layout="split"][aria-pressed="false"]:after{top:50%;right:10px;translate:0 -50%}
#rail-layout{position:relative}
body:has(#layout-switch:not([data-unsorted="0"])) #rail-layout:after{content:"";position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:#bf9865}
.rail-button.is-recording{color:#c0392b;background:#fbe9e6}
.rail-button.is-recording .line-icon{animation:mic-pulse 1.2s ease-in-out infinite}
@keyframes mic-pulse{50%{opacity:.4}}
.voice-live{position:fixed;z-index:30;display:flex;align-items:flex-start;gap:9px;max-width:min(340px,calc(100vw - 90px));padding:9px 13px;border:1px solid #ebc9c2;border-radius:12px;background:var(--paper);box-shadow:0 8px 28px #34413914;font-size:12px;line-height:1.5;color:#4d3d39;overflow-wrap:anywhere}
.voice-live[hidden]{display:none}
.voice-dot{flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:#d6483a;animation:mic-pulse 1.2s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.rail-button.is-recording .line-icon,.voice-dot{animation:none}}
.subheading-settings>.auto-control{margin:2px 0 10px}
/* Dark theme: the page is inverted as a whole (so every colour, including ones you chose, stays readable), with pictures turned back. */
html[data-theme="dark"]{background:#fff;filter:invert(.88) hue-rotate(180deg)}
html[data-theme="dark"] :is(img,video,canvas){filter:invert(1) hue-rotate(180deg)}
html[data-theme="dark"] .spell-flash{mix-blend-mode:normal;background:#3a6d50}
/* The drag grip beside a project heading sits on the line of the project name and its dot (it used to sit in the middle of the taller heading box, a few pixels low). */
.project-grip{top:12px}
/* The Notes / Projects titles are hidden (kept for screen readers) so the notes start at the top of the page. */
.column-heading{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.split-canvas{padding-top:12px}
@media(max-width:720px){.split-canvas{padding-top:12px}}
/* The new-project name field slides out beside the sidebar's plus button (left and top are set when it opens), with one line under it. */
#canvas-project-form{position:fixed;top:150px;left:64px;transform:none;z-index:21;height:36px;max-width:calc(100vw - 80px);background:var(--paper)}
#canvas-project-form::after{left:0;right:0}
#canvas-project-form.is-open .canvas-project-fields{width:268px}
/* Icons beside the settings sections and rows. */
.summary-label,.row-label{display:inline-flex;align-items:center;gap:9px;min-width:0}
.summary-label .line-icon,.row-label .line-icon{width:15px;height:15px;flex:none;color:#7f9a8a}
.auto-control .row-label{flex:1}
/* Formatting toolbar (Settings > General): a bar in the header. Notes shown in a project read Markdown markers back as formatting. */
.format-toolbar{position:fixed;top:0;left:56px;right:0;z-index:4;display:flex;align-items:center;justify-content:center;gap:2px;height:44px;padding:0 14px;background:var(--paper);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.format-toolbar[hidden]{display:none}
.app-shell.has-toolbar .split-canvas{padding-top:58px}
.format-group{display:flex;align-items:center;gap:1px;padding:0 7px;border-right:1px solid #dce8e0;flex:none}
.format-group:last-of-type{border-right:0}
.format-button{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:0;border-radius:6px;background:transparent;color:#5a7a68;cursor:pointer}
.format-button:hover:not(:disabled){background:#e9f2ec;color:#2e503d}
.format-button:disabled{opacity:.35;cursor:default}
.format-button .line-icon{width:17px;height:17px}
.format-glyph{font:600 14px/1 Georgia,serif}.format-italic{font-style:italic}.format-strike{text-decoration:line-through}
.format-style{width:112px;height:30px;padding:0 8px;border:0;border-radius:6px;background:transparent;color:#5a7a68;font-size:12px}
.format-style:hover{background:#e9f2ec}
.format-hint{display:none;margin-left:10px;color:#98aca0;font-size:11px;white-space:nowrap}
.format-toolbar.is-idle .format-hint{display:inline}
.format-toolbar.is-idle .format-group:not(:first-child){opacity:.45}
.md-line{display:block;min-height:1lh;padding-left:calc(var(--md-indent,0) * 1.3em)}
.md-bullet,.md-number,.md-check{position:relative;padding-left:calc(1.5em + var(--md-indent,0) * 1.3em)}
.md-marker{position:absolute;left:calc(var(--md-indent,0) * 1.3em);width:1.3em;text-align:right;color:#829e8e}
.md-box{padding:0;border:0;background:none;cursor:pointer;font:inherit;line-height:inherit;color:#59896d}
.md-box:hover{color:#2e503d}
.md-check.is-done{color:#839a8c;text-decoration:line-through}
.md-quote{margin:.1em 0;padding-left:.9em;border-left:3px solid #c0d8ca;color:#607e6d}
.md-h{font-weight:600;line-height:1.4;margin:.2em 0}.md-h1{font-size:1.28em}.md-h2{font-size:1.14em}.md-h3{font-size:1.04em}
.project-note-text strong{font-weight:700}.project-note-text em{font-style:italic}.project-note-text s{text-decoration:line-through;opacity:.7}
.project-note-text code{padding:.05em .35em;border-radius:4px;background:#e9f2ec;font:.92em ui-monospace,SFMono-Regular,Consolas,monospace}
.md-line>.note-end-copy{margin-left:6px;vertical-align:text-bottom}
/* Lighter, thinner highlights: where an organised note landed, and behind a word the spelling help just fixed. */
.is-landed{border-radius:6px;animation:note-landed 2.4s ease-out}
@keyframes note-landed{0%{background:#e4f5eb;box-shadow:0 0 0 2px #e4f5eb}35%{background:#eef8f2;box-shadow:0 0 0 2px #eef8f2}100%{background:#f3f8ee00;box-shadow:0 0 0 2px #f3f8ee00}}
@media(prefers-reduced-motion:reduce){.is-landed{animation:none;background:#ebf7f0;box-shadow:0 0 0 2px #ebf7f0}}
.spell-flash{background:#c6e9d4;border-radius:3px;animation-duration:1.5s}
@keyframes spell-flash{0%{opacity:0;transform:scaleX(.92)}14%{opacity:.65;transform:scaleX(1)}40%{opacity:.4}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.spell-flash{animation:spell-flash-still 1.4s linear forwards}@keyframes spell-flash-still{0%,70%{opacity:.4}100%{opacity:0}}}
html[data-theme="dark"] .spell-flash{background:#3c6a50}
/* The layout choices in the sidebar flyout line up on the left (the old icon-only switch centred its buttons). */
.rail-flyout .layout-switch button{justify-content:flex-start;text-align:left}
/* iPad, phones and other touch screens. An iPad reports a coarse pointer even with a trackpad attached, so these
   apply there too. Finger-sized hit areas come from transparent ::after boxes, so nothing moves on screen. The drag
   handles take the finger at once (touch-drag.mjs turns it into the same drag a mouse makes) instead of scrolling. */
@media(pointer:coarse){
.drag-note,.project-grip,.subcategory-grip{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.reference-tab-item[draggable="true"]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.touch-drag-armed{-webkit-user-drag:none}
.note-row>.drag-note,.heading-tool,.heading-collapse,.heading-context,.progress-note,.complete-note{position:relative}
.note-row>.drag-note:after,.project-grip:after,.subcategory-grip:after,.heading-tool:after,.heading-collapse:after,.heading-context:after,.progress-note:after,.complete-note:after{content:"";position:absolute}
.note-row>.drag-note:after{inset:-8px -10px}
.project-note>.drag-note:before,.reference-note>.drag-note:before{inset:-8px -14px}
.project-grip:after,.subcategory-grip:after{inset:-10px -8px}
.heading-tool:after,.heading-collapse:after,.heading-context:after{inset:-10px -3px}
.progress-note:after,.complete-note:after{inset:-8px -3px}
}
/* The card that follows a finger while it drags a note, category, project or reference tab. */
.touch-drag-ghost{position:fixed;left:0;top:0;z-index:1000;max-width:300px;padding:8px 13px;border:1px solid #d8e5dd;border-radius:10px;background:var(--paper);box-shadow:0 12px 32px #34413924,0 2px 6px #34413914;color:var(--ink);font-size:13px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;will-change:transform}
html.touch-dragging,html.touch-dragging *{-webkit-user-select:none;user-select:none}
/* Sidebar icon bubbles sit under the icon and let the pointer through, so gliding down the rail is never blocked. */
.app-tooltip[data-rail="true"]{pointer-events:none}
/* A small mark on notes an AI app added. */
.note-agent-badge{flex:none;display:inline-flex;align-items:center;justify-content:center;width:16px;height:29px;color:#829e8e}
.note-agent-badge .agent-icon{width:14px;height:14px;margin:0;vertical-align:baseline}
.note-row>.note-agent-badge{margin-right:-2px}
/* Settings > Main headings > Underline (2026-10-16). */
.column-heading h1,.project-heading h2,.project-heading .project-name,.project-name-input{text-decoration-line:var(--main-heading-decoration,none);text-decoration-thickness:1px;text-underline-offset:.22em}
/* Heading row > Switch places menu, and drag to reorder projects in the sidebar (2026-10-16). */
.project-swap-menu{min-width:190px;max-height:min(360px,70dvh);overflow-y:auto}
.project-swap-menu .swap-menu-title{margin:2px 10px 6px;font-size:11px;color:#80998a}
#project-nav .nav-item[draggable=true]{cursor:grab}
#project-nav .nav-item.is-dragging-source{opacity:.45}
#project-nav .nav-item.drop-before{box-shadow:0 -2px 0 #59896d}
#project-nav .nav-item.drop-after{box-shadow:0 2px 0 #59896d}
/* Brand B, 'beads on a thread' (2026-10-16): the sidebar's logo is the app icon's mark, no longer an italic n.
   Colours: forest #1F3A2E, young bamboo #5FA37E, washi paper #fbfaf4; interface greens sit in that family (hue about 146). */
.brand-mark{display:flex;align-items:center;justify-content:center;padding:0;letter-spacing:0}.brand-mark svg{display:block;width:28px;height:28px}
/* Projects in columns, row by row like the sidebar (2026-10-16): a grid of 4px rows; app.mjs sizeColumnCards() gives each
   card a row span from its height, so the next project goes under whichever column ends first and nothing leaves a gap. */
.split-canvas[data-layout="columns"] #projects-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:4px;column-gap:56px;row-gap:0;align-items:start}
@media(max-width:900px){.split-canvas[data-layout="columns"] #projects-board{display:block}}
/* Calendar page (sidebar calendar icon, calendar.mjs): a month of days with the notes that name them, the chosen day and what is coming up. */
.rail-button.is-active{color:#1F3A2E;background:#e7f1eb}
.calendar-page{position:fixed;z-index:6;left:56px;top:0;right:0;bottom:0;display:flex;flex-direction:column;background:var(--paper);border-left:1px solid var(--line);overflow:hidden}
.calendar-page[hidden]{display:none}
.calendar-head{display:flex;align-items:center;gap:16px;padding:18px 26px 14px;border-bottom:1px solid var(--line)}
.calendar-title{margin:0;font-size:18px;font-weight:600;letter-spacing:-.3px;color:#1F3A2E;min-width:170px}
.calendar-nav{display:flex;align-items:center;gap:4px}
.calendar-step,.calendar-today{height:30px;min-width:30px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:#4f6b5b;font:inherit;font-size:13px;cursor:pointer}
.calendar-step{font-size:17px;line-height:1;padding:0}
.calendar-step:hover,.calendar-today:hover{background:#eef5f0;color:#1F3A2E}
.calendar-close{margin-left:auto;font-size:20px}
.calendar-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 320px}
.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);grid-template-rows:auto;gap:6px;padding:14px 18px 20px 26px;overflow:auto;min-height:0}
.calendar-weekday{padding:0 4px 2px;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.calendar-day{display:flex;flex-direction:column;align-items:stretch;gap:3px;min-height:84px;padding:6px 6px 7px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font:inherit;text-align:left;cursor:pointer;overflow:hidden}
.calendar-day:hover{border-color:#c9dccf}
.calendar-day.is-other-month{background:transparent;color:#a3ada6}
.calendar-day.is-today .calendar-day-number{background:#5FA37E;color:#fff}
.calendar-day.is-selected{border-color:#5FA37E;box-shadow:0 0 0 1px #5FA37E}
.calendar-day:focus-visible{outline:2px solid #5FA37E;outline-offset:1px}
.calendar-day-number{align-self:flex-start;min-width:22px;height:22px;padding:0 5px;border-radius:11px;font-size:12px;line-height:22px;text-align:center;font-weight:600}
.calendar-chip{display:block;padding:2px 6px;border-radius:5px;background:#eef5f0;color:#2f4b3d;font-size:11px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calendar-more{font-size:10px;color:var(--muted);padding-left:2px}
.calendar-agenda{border-left:1px solid var(--line);padding:16px 22px 24px;overflow:auto;min-height:0;scrollbar-width:thin}
.calendar-agenda-title{margin:4px 0 10px;font-size:13px;font-weight:600;color:#1F3A2E}
.calendar-upcoming-title{margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
.calendar-entry{display:block;width:100%;margin:0 0 8px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.calendar-entry:hover{border-color:#c9dccf;background:#f7fbf8}
.calendar-entry-meta{display:block;font-size:10px;color:var(--muted);margin-bottom:3px}
.calendar-entry-text{display:block;font-size:12.5px;line-height:1.55;overflow-wrap:anywhere}
.calendar-empty{font-size:12px;color:var(--muted);line-height:1.6;margin:0 0 6px}
@media(max-width:900px){.calendar-body{grid-template-columns:1fr;overflow:auto}.calendar-grid{overflow:visible;padding:12px 14px}.calendar-agenda{border-left:0;border-top:1px solid var(--line)}.calendar-day{min-height:58px}.calendar-chip{display:none}.calendar-day.has-notes .calendar-day-number::after{content:'';display:block;width:5px;height:5px;margin:2px auto 0;border-radius:50%;background:#5FA37E}}
@media(max-width:560px){.calendar-head{flex-wrap:wrap;padding:14px 16px 10px;gap:10px}.calendar-title{min-width:0;font-size:16px}.calendar-grid{gap:3px;padding:10px 16px}.calendar-day{min-height:44px;padding:3px}.calendar-weekday{font-size:9px;padding:0}.calendar-more{display:none}}
/* Calendar (2026-10-16 follow-up): no lines under the header or beside the side list, a slide in and out, and colours from
   Settings > Calendar (--cal-* on :root, set by applyCalendarColours). */
.calendar-page{border-left:0;opacity:0;transform:translateX(-14px);transition:opacity .18s ease,transform .22s ease}
.calendar-page.is-open{opacity:1;transform:none}
.calendar-head{border-bottom:0}
.calendar-agenda{border-left:0}
.calendar-upcoming-title{border-top:0;padding-top:0}
.calendar-day,.calendar-entry{background:var(--cal-day,#fff)}
.calendar-day.is-today .calendar-day-number{background:var(--cal-accent,#5fa37e)}
.calendar-day.is-selected{border-color:var(--cal-accent,#5fa37e);box-shadow:0 0 0 1px var(--cal-accent,#5fa37e)}
.calendar-day:focus-visible{outline-color:var(--cal-accent,#5fa37e)}
.calendar-chip{background:var(--cal-chip,#eef5f0);color:var(--cal-chip-text,#2f4b3d)}
@media(max-width:900px){.calendar-agenda{border-top:0}.calendar-day.has-notes .calendar-day-number::after{background:var(--cal-accent,#5fa37e)}}
@media(prefers-reduced-motion:reduce){.calendar-page{transition:none}}
/* Project pop-up: "Place on the board" (At the top / At the end / After a project) moves the project at once. */
.project-place-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px}
.project-place-row .project-alias-label{margin:0}
.project-place-select{max-width:240px;height:32px;padding:0 26px 0 10px;border:1px solid var(--line);border-radius:8px;background-color:#fff;color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
/* Earlier versions of a note (versions.mjs): a clock button in each note's tool row and the "Earlier versions" dialog. */
.versions-note{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:29px;padding:0 3px;border:0;background:transparent;color:#8ea597;cursor:pointer}
.versions-note .line-icon{width:13px;height:13px}
.versions-note:hover,.versions-note:focus-visible{color:#2f6b4d}
.versions-note svg{filter:var(--icon-filter,none)}
@media(pointer:coarse){.versions-note{position:relative}.versions-note:after{content:"";position:absolute;inset:-8px -3px}}
.versions-dialog{width:min(620px,calc(100vw - 30px));padding:24px;text-align:left}
.versions-dialog .dialog-intro{font-size:12px;line-height:1.6;color:#678373;margin:6px 0 14px}
.versions-status{font-size:13px;color:#567061;margin:0 0 10px}
.versions-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.versions-item{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff}
.versions-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:6px;font-size:11px;color:#678373}
.versions-head strong,.versions-when{font-size:12px;font-weight:600;color:#2f4b3d}
.versions-text{max-height:9.6em;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.6;color:#34413c}
.versions-text.is-empty{color:#9aaea3;font-style:italic}
.versions-actions{display:flex;gap:14px;margin-top:8px}
/* Offline pill (app.mjs showOffline): the save line is hidden in this design, so being offline is said here, calmly, only meanwhile. */
.offline-pill{position:fixed;right:16px;bottom:16px;z-index:40;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#567061;font-size:12px;line-height:1.4;box-shadow:0 6px 24px #24302314;pointer-events:none}
.offline-pill[hidden]{display:none}
/* Search shows where the words are (find.mjs, app.mjs refreshSearchHits): marks in project notes, boxes drawn over canvas notes, a count. */
.search-count{flex:none;font-size:11px;line-height:20px;color:#678373;white-space:nowrap}
.search-count:empty{display:none}
mark.search-hit{background:#d6eedf;color:inherit;border-radius:3px;padding:0 1px;margin:0 -1px}
mark.search-hit.is-current{background:#9fd6b5;box-shadow:0 0 0 2px #9fd6b5}
.search-hit-box{position:absolute;z-index:1;pointer-events:none;border-radius:3px;background:#c4e6d1;mix-blend-mode:multiply}
.search-hit-box.is-current{background:#8dd2aa;box-shadow:0 0 0 2px #8dd2aa}
/* The sync icon in the rail (sync-status.mjs): colour only when something needs attention, a gentle pulse while saving. */
.rail-sync[data-state=offline]{color:#a77a2c}
.rail-sync[data-state=error]{color:#b4453a}
.rail-sync[data-state=behind]{color:#2f6b4d}
.rail-sync[data-state=saving] svg,.rail-sync.is-syncing svg{animation:sync-pulse 1.2s ease-in-out infinite}
@keyframes sync-pulse{50%{transform:scale(.86);opacity:.7}}
@media(prefers-reduced-motion:reduce){.rail-sync[data-state=saving] svg,.rail-sync.is-syncing svg{animation:none}}
/* The match count inside the search box (".search>span" is sized for an older clear button, so be specific), and the
   search pill shown while a search is on and the sidebar is closed (app.mjs syncSearchPill). */
.search>.search-count{font-size:11px;line-height:20px;color:#678373}
.search-pill{position:fixed;right:16px;bottom:16px;z-index:41;display:flex;align-items:center;gap:2px;padding:3px 4px 3px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#567061;font-size:12px;line-height:1.4;box-shadow:0 6px 24px #24302314}
.search-pill[hidden]{display:none}
.offline-pill:not([hidden])+.search-pill{bottom:56px}
.search-pill-text{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:4px}
.search-pill-button{width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:#567061;font-size:16px;line-height:1;cursor:pointer}
.search-pill-button:hover,.search-pill-button:focus-visible{background:#eef5f0;color:#2f4b3d}
/* Reminders (reminders.mjs): a bell in each note's tool row, kept in view while a reminder is ahead; the "Remind me" pop-up. */
.remind-note{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:29px;padding:0 3px;border:0;background:transparent;color:#8ea597;cursor:pointer}
.remind-note .line-icon{width:13px;height:13px}
.remind-note:hover,.remind-note:focus-visible,.remind-note.is-set{color:#2f6b4d}
.remind-note svg{filter:var(--icon-filter,none)}
.note-row.has-reminder .note-tools,.project-note.has-reminder .project-note-actions{opacity:1;visibility:visible}
.note-row.has-reminder:not(:hover):not(:focus-within) .note-tools>:not(.remind-note):not(.progress-note[aria-pressed=true]),.project-note.has-reminder:not(:hover):not(:focus-within) .project-note-actions>:not(.remind-note):not(.progress-note[aria-pressed=true]){opacity:0}
.note-row.has-reminder:not(:hover):not(:focus-within) .note-tools>.remind-note,.project-note.has-reminder:not(:hover):not(:focus-within) .project-note-actions>.remind-note{opacity:1}
@media(pointer:coarse){.remind-note{position:relative}.remind-note:after{content:"";position:absolute;inset:-8px -3px}}
.remind-menu{min-width:240px;max-width:min(320px,calc(100vw - 16px))}
.remind-custom{display:flex;align-items:center;gap:8px;margin:6px 10px 4px}
.remind-custom-input{flex:1;min-width:0;height:30px;padding:0 8px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font:inherit;font-size:12px}
.remind-remove{color:#9a4a3c}
.calendar-chip.is-reminder,.calendar-entry.is-reminder .calendar-entry-meta{font-weight:600}
.calendar-chip.is-reminder:before,.calendar-entry.is-reminder .calendar-entry-meta:before{content:"⏰ ";font-weight:400}
.push-test{margin:4px 0 0 30px;font-size:12px}
/* Locked notes (note-lock.mjs, lock-ui.mjs): the padlock button, how a locked note looks, and the lock dialog. */
.lock-note{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:29px;padding:0 3px;border:0;background:transparent;color:#8ea597;cursor:pointer}
.lock-note .line-icon{width:13px;height:13px}
.lock-note:hover,.lock-note:focus-visible{color:#2f6b4d}
.lock-note svg{filter:var(--icon-filter,none)}
@media(pointer:coarse){.lock-note{position:relative}.lock-note:after{content:"";position:absolute;inset:-8px -3px}}
.note-row.is-locked .note-text{cursor:pointer}
.note-row.is-locked .note-text::placeholder{color:#567061;opacity:1}
.project-note.is-locked .project-note-text{cursor:pointer}
.locked-label{color:#2f4b3d}
.locked-hint{margin-left:8px;font-size:11px;color:#8ea597}
.lock-dialog{width:min(480px,calc(100vw - 30px));padding:24px;text-align:left}
.lock-dialog .dialog-intro{font-size:12px;line-height:1.6;color:#567061;margin:6px 0 14px}
.lock-form{display:grid;gap:12px}
.lock-field{display:grid;gap:5px;font-size:12px;color:#567061}
.lock-input{height:36px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:inherit;font-size:14px}
.lock-status{min-height:1.4em;margin:0;font-size:12px;color:#9a4a3c}
.lock-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px}
.lock-primary{height:34px;padding:0 16px;border:0;border-radius:8px;background:#1f3a2e;color:#fbfaf4;font:inherit;font-size:13px;cursor:pointer}
.lock-primary:disabled{opacity:.45;cursor:default}
.lock-code{margin:6px 0 12px;padding:14px;border:1px dashed #5fa37e;border-radius:10px;background:#fff;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:18px;letter-spacing:.06em;text-align:center;color:#1f3a2e;user-select:all}
.lock-confirm{display:flex;align-items:center;gap:8px;font-size:12px;color:#34413c}
.lock-note-text{width:100%;min-height:120px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:inherit;font-size:14px;line-height:1.6;resize:vertical}
/* The ⋯ More menu on each note (app.mjs openNoteMenu): the row keeps ⋯, done and remove; the date moves into the menu. */
.note-tools .note-added-date,.project-note-actions .note-added-date{display:none}
.more-note{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:29px;padding:0 3px;border:0;background:transparent;color:#8ea597;cursor:pointer}
.more-note .line-icon{width:15px;height:15px;stroke-width:2.6}
.more-note:hover,.more-note:focus-visible,.more-note[aria-expanded=true]{color:#2f6b4d}
.more-note svg{filter:var(--icon-filter,none)}
@media(pointer:coarse){.more-note{position:relative}.more-note:after{content:"";position:absolute;inset:-8px -3px}}
.note-menu{min-width:220px}
.note-menu-item{display:flex;align-items:center;gap:10px;padding-left:10px}
.note-menu-item .line-icon{width:14px;height:14px;flex:none;color:#567061}
/* Project pop-up (2026-10-16): "Place on the board" reads as plain text with a small chevron until it is opened (no box, no
   background); browsers that can style the open list (appearance: base-select) get a rounded, shadowed one with a soft highlight.
   The website line under the address says nothing until a site is being read. */
.project-place-select{-webkit-appearance:none;appearance:none;height:32px;max-width:240px;padding:0 28px 0 10px;border:0;border-radius:8px;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237f9a8a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center/12px;color:#1F3A2E;font:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:background-color .15s ease}
.project-place-select:hover{background-color:#eef5f0}
.project-place-select:focus-visible{outline:2px solid #5FA37E;outline-offset:1px}
@supports (appearance:base-select){
  .project-place-select,.project-place-select::picker(select){appearance:base-select}
  .project-place-select{background-image:none;padding-right:8px;gap:6px}
  .project-place-select::picker-icon{color:#7f9a8a;transition:rotate .2s ease}
  .project-place-select:open::picker-icon{rotate:180deg}
  .project-place-select::picker(select){margin-top:6px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--paper);box-shadow:0 14px 36px #1f3a2e22,0 2px 6px #1f3a2e10}
  .project-place-select option{padding:7px 12px;border-radius:8px;color:var(--ink);font-size:13px;font-weight:400}
  .project-place-select option:hover,.project-place-select option:focus-visible{background:#eef5f0;outline:0}
  .project-place-select option:checked{color:#1F3A2E;font-weight:600}
  .project-place-select option::checkmark{color:#5FA37E}
}
#context-website-status:empty{display:none}
/* Sync icon (sync-status.mjs): green when everything is saved and up to date (owner, 2026-10-16), amber offline, red when
   not saved. Its own colour is the signal, so Settings › Icons darkness does not dim it. */
.rail-sync[data-state=saved]{color:#3f9a68}
.rail-sync[data-state] svg{filter:none}
/* Sharing a project (share-ui.mjs, 2026-10-16). The heading's people icon turns green once anyone else has access; that
   colour is the signal, so Settings › Icons darkness does not dim it. */
.heading-share.is-shared{color:#3f9a68}
.heading-share.is-shared:hover{color:#2f6b4d}
.heading-share.is-shared svg{filter:none}
.share-dialog{width:min(560px,calc(100vw - 30px));padding:24px;text-align:left}
.share-dialog .dialog-intro{font-size:12px;line-height:1.6;color:#567061;margin:6px 0 14px}
.share-form{display:flex;flex-wrap:wrap;gap:8px}
.share-email{flex:1 1 220px;min-width:0;height:36px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:inherit;font-size:14px}
.share-role{height:36px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:inherit;font-size:13px}
.share-add{height:36px;padding:0 16px;border:0;border-radius:8px;background:#1f3a2e;color:#fbfaf4;font:inherit;font-size:13px;cursor:pointer}
.share-add:disabled{opacity:.45;cursor:default}
.share-status{min-height:1.4em;margin:8px 0 4px;font-size:12px;color:#2f6b4d}
.share-people{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.share-person{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.share-person-email{flex:1 1 180px;min-width:0;overflow-wrap:anywhere;color:var(--ink)}
.share-person .share-role{height:30px;font-size:12px}
.share-empty{padding:12px 0;font-size:12px;color:#759582}
.share-foot{margin:14px 0 0;font-size:11px;line-height:1.6;color:#759582}
/* "Shared with you" (the other person's view), below their own board. */
.shared-section{margin-top:36px;padding-top:18px;border-top:1px solid var(--line)}
.shared-section[hidden]{display:none}
.shared-heading{display:flex;align-items:center;gap:8px;margin:0 0 16px;color:#3f9a68}
.shared-heading .line-icon{width:16px;height:16px}
.shared-heading h2{margin:0;font-size:13px;font-weight:600;letter-spacing:.4px;color:#476654}
.shared-card{border-style:solid;border-color:#cfe3d6}
.shared-project-name{margin:0;font-size:inherit}
.shared-badge{display:inline-flex;margin-left:auto;color:#3f9a68}
.shared-badge .line-icon{width:14px;height:14px}
.shared-by{margin:-4px 0 10px;font-size:11px;color:#759582;overflow-wrap:anywhere}
.shared-category{margin:14px 0 4px;font-size:12px;font-weight:600;color:#476654}
.shared-dot{flex:0 0 6px;width:6px;height:6px;margin-top:13px;border-radius:50%;background:#b7cdbf}
.shared-note .project-note-text.is-editable{cursor:text;border-radius:6px}
.shared-note .project-note-text.is-editable:hover{background:#f2f7f4}
.shared-note.is-locked .project-note-text{cursor:default}
.shared-note-actions{display:flex;gap:2px;flex:none;opacity:.5;transition:opacity .15s}
.shared-note:hover .shared-note-actions,.shared-note-actions:focus-within{opacity:1}
@media(hover:none){.shared-note-actions{opacity:1}}
.shared-add,.shared-edit{display:block;width:100%;min-height:32px;padding:5px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-family:var(--note-body-font);font-size:13px;line-height:1.6;resize:none;overflow:hidden}
.shared-add{margin:0 0 6px;border-style:dashed}
.shared-add:focus,.shared-edit:focus{outline:2px solid #5fa37e33;border-color:#5fa37e}
.shared-edit{flex:1;min-width:0}
.shared-empty{margin:6px 0;font-size:12px;color:#8ea597}
.split-canvas[data-layout="columns"] .shared-list{column-count:2;column-gap:56px}
.split-canvas[data-layout="columns"] .shared-card{break-inside:avoid}
@media(max-width:900px){.split-canvas[data-layout="columns"] .shared-list{column-count:1}}
.shared-category{display:flex;align-items:center;gap:6px}
.shared-category .line-icon{width:13px;height:13px;color:#7f9a8a}
/* The Place dropdown's text sits on the same line as its label (base-select puts it at the top of its box otherwise). */
.project-place-select{display:inline-flex;align-items:center}
/* Share dialog, second pass (2026-10-17, share-ui.mjs): any email with a personal invite link, "Anyone with the link",
   hidden notes, and rounded pill dropdowns (owner: "more modern"). Browsers that can style the open list
   (appearance: base-select) get a rounded, shadowed one like the project pop-up's; others keep a pill with a chevron. */
.share-dialog{width:min(580px,calc(100vw - 30px))}
.share-form{align-items:center}
.share-email{height:38px;border-radius:10px;padding:0 12px}
.share-email:focus{outline:2px solid #5fa37e33;border-color:#5fa37e}
.share-add{height:38px;border-radius:10px;padding:0 18px;font-weight:500}
.share-select{-webkit-appearance:none;appearance:none;height:34px;padding:0 30px 0 13px;border:1px solid var(--line);border-radius:999px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237f9a8a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center/12px;color:#1f3a2e;font:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.share-select:hover{background-color:#eef5f0;border-color:#cfe3d6}
.share-select:focus-visible{outline:2px solid #5fa37e;outline-offset:1px}
@supports (appearance:base-select){
  .share-select,.share-select::picker(select){appearance:base-select}
  .share-select{display:inline-flex;align-items:center;gap:6px;background-image:none;padding-right:11px}
  .share-select::picker-icon{color:#7f9a8a;transition:rotate .2s ease}
  .share-select:open::picker-icon{rotate:180deg}
  .share-select::picker(select){margin-top:6px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--paper);box-shadow:0 14px 36px #1f3a2e22,0 2px 6px #1f3a2e10}
  .share-select option{padding:7px 12px;border-radius:8px;color:var(--ink);font-size:13px;font-weight:400}
  .share-select option:hover,.share-select option:focus-visible{background:#eef5f0;outline:0}
  .share-select option:checked{color:#1f3a2e;font-weight:600}
  .share-select option::checkmark{color:#5fa37e}
}
.share-form .share-select{height:38px}
.share-block{margin-top:18px}
.share-label{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:#7f9a8a}
.share-people{border-top:0}
.share-person{gap:10px;padding:7px 0;border-bottom:0;flex-wrap:nowrap}
.share-avatar{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e4efe8;color:#1f3a2e;font-size:13px;font-weight:600}
.share-person-email{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.share-person .share-select{height:30px;border-color:transparent;background-color:transparent}
.share-person .share-select:hover,.share-person .share-select:focus-visible{background-color:#eef5f0}
.share-copy{flex:none;height:30px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#1f3a2e;font-size:12px;white-space:nowrap;transition:background-color .15s ease}
.share-copy:hover,.share-copy:focus-visible{background:#eef5f0}
.share-remove{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;color:#8ea597}
.share-remove:hover,.share-remove:focus-visible{background:#f6ece9;color:#9a4a3c}
.share-remove .line-icon{width:13px;height:13px}
.share-empty{padding:6px 0}
.share-link-block{padding:14px 14px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.share-link-head{display:flex;align-items:center;gap:8px}
.share-link-head .share-label{flex:1;margin:0}
.share-link-icon{display:inline-flex;color:#3f9a68}
.share-link-icon .line-icon{width:15px;height:15px}
.share-link-row{display:flex;align-items:center;gap:8px;margin-top:12px}
.share-link-url{flex:1;min-width:0;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#f6f9f7;color:#34413c;font:12px ui-monospace,SFMono-Regular,Consolas,monospace}
.share-new-link{flex:none;font-size:12px}
.share-note{margin:8px 0 0;font-size:12px;line-height:1.5;color:#567061}
.share-hidden{margin:14px 0 0;font-size:12px;line-height:1.5;color:#567061}
@media(max-width:520px){.share-person{flex-wrap:wrap}.share-person-email{flex-basis:calc(100% - 40px)}.share-link-row{flex-wrap:wrap}.share-link-url{flex-basis:100%}}
/* Hidden from shared view (⋯ › Hide from shared view): the row keeps an amber eye-off mark that shows the note again. */
.hidden-note{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:29px;padding:0 3px;border:0;background:transparent;color:#b07a3c;cursor:pointer}
.hidden-note .line-icon{width:14px;height:14px}
.hidden-note:hover,.hidden-note:focus-visible{color:#8a5a22}
.note-row.is-hidden-from-share .note-tools,.project-note.is-hidden-from-share .project-note-actions{opacity:1;visibility:visible}
.note-row.is-hidden-from-share:not(:hover):not(:focus-within) .note-tools>:not(.hidden-note):not(.remind-note.is-set):not(.progress-note[aria-pressed=true]),.project-note.is-hidden-from-share:not(:hover):not(:focus-within) .project-note-actions>:not(.hidden-note):not(.remind-note.is-set):not(.progress-note[aria-pressed=true]){opacity:0}
.note-row.is-hidden-from-share .note-tools>.hidden-note,.project-note.is-hidden-from-share .project-note-actions>.hidden-note{opacity:1!important} /* beats the reminder rule that fades everything but the bell */
@media(pointer:coarse){.hidden-note{position:relative}.hidden-note:after{content:"";position:absolute;inset:-8px -3px}}
/* The page behind a share link (/s/<token>, guest.mjs): one project, no sign-in. */
.guest-main{max-width:760px;margin:0 auto;padding:28px 20px 80px}
.guest-top{display:flex;align-items:center;margin-bottom:26px}
.guest-brand{display:inline-flex;align-items:center;gap:10px;color:#1f3a2e;font:400 20px/1 Georgia,serif;letter-spacing:-.3px}
.guest-brand svg{width:32px;height:32px}
.guest-board .shared-section{margin-top:0;padding-top:0;border-top:0}
.guest-board .shared-card{margin:0 0 25px}
.guest-status{margin:24px 0;color:#567061;font-size:14px}
.shared-note{flex-wrap:nowrap}.shared-note .project-note-text{flex:1 1 auto} /* phones: keep the done/remove buttons beside the note, not under it */
/* Shared view = the app's project rows (2026-10-17, owner: "same as app"): shared-view.mjs now builds the app's own
   .project-note / .project-quick-add / .project-inline-input / ⋯ markup, so the app's rules style it. These only undo the
   first pass (framed white boxes, hover tint) and keep the buttons beside the note on a phone. */
.shared-note>.drag-note{cursor:default;touch-action:auto}
.shared-note .project-note-text:hover{background:none}
.shared-note .project-note-actions{flex:none}
.shared-note .project-inline-input{flex:1 1 auto}
.shared-card .project-quick-add{padding-top:2px}
/* Shared notes can be dragged by their dot (shared-view.mjs, 2026-10-17), as in the app. */
.shared-note>.drag-note[draggable=true]{cursor:grab;touch-action:none}
/* The share-link page's rail (guest.mjs, 2026-10-17): the app's sidebar rail with History (Can edit only) and Look and
   feel, whose panels reuse the app's Note history panel. The page sits beside the 56px rail. */
.guest-page{padding-left:56px}
.guest-sidebar .sidebar-rail{gap:20px}
.guest-sidebar .brand-mark{display:flex}
.guest-panel{z-index:7}
.guest-panel .note-history-heading{align-items:center}
.guest-panel .note-history-heading h2{margin:0;font-size:16px;font-weight:600;color:#476654}
.guest-settings-body{display:grid;gap:14px;padding:16px 20px 20px;overflow:auto}
.guest-settings-note{margin:0;font-size:12px;line-height:1.5;color:#567061}
.guest-setting{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink)}
.guest-range{display:flex;align-items:center;gap:8px}
.guest-range input{width:130px;accent-color:#5fa37e}
.guest-range output{min-width:40px;font-size:12px;color:#567061;text-align:right}
.guest-setting input[type=color]{width:42px;height:30px;padding:2px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}
#guest-reset{justify-self:start}
.guest-history-item{cursor:default}
.guest-history-when{margin:0 0 6px;font-size:11px;color:#759582}
.guest-history-was{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.6;color:var(--ink);display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.guest-history-now{margin:6px 0 0;font-size:11px;color:#759582;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guest-history-actions{display:flex;gap:14px;margin-top:8px}
.guest-history-empty{margin:0;padding:18px 0;font-size:12px;line-height:1.5;color:#759582}
.guest-settings .guest-settings-note{margin:0 10px 6px;font-size:11px;line-height:1.5;color:#759582} /* the link page uses the app settings popover (appearance.mjs) */
/* The link page's sidebar (guest.mjs, 2026-10-17): the Notaito mark slides out the app's sidebar with Search; the mic and
   the sync cloud are the app's rail tools. */
.guest-sidebar .sidebar-panel{gap:0}
.guest-sidebar .guest-about{display:flex;justify-content:space-between;margin-top:auto;font-size:12px;color:#678373}
/* The link page's slide-out lists the shared project like the app's PROJECTS list, with its categories under it. */
.guest-project-nav .nav-category{padding:7px 11px 7px 27px;font-size:11.5px}
.guest-project-nav .nav-category .line-icon{width:13px;height:13px;flex:none;color:#7f9a8a}
/* Drag and drop in the link page's sidebar list (guest.mjs): a category being dragged, and a note held over a category. */
.guest-project-nav .nav-item.drop-target{background:#e3eee7;box-shadow:inset 0 0 0 1px #9dbbaa}
/* Repeat in the Remind me menu (recurrence.mjs, 2026-10-17). */
.remind-repeat{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px 2px;font-size:12px;color:#567061}
.remind-repeat-select{height:28px;padding:0 6px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:inherit;font-size:12px}
/* Settings › Quick capture (capture-ui.mjs, 2026-10-17): reuses the agent dialog's blocks and lists. */
.capture-dialog{width:min(620px,calc(100vw - 30px));padding:24px;text-align:left}
.capture-dialog .dialog-intro{font-size:12px;line-height:1.6;color:#567061;margin:6px 0 14px}
.capture-steps{margin:8px 0 12px;padding-left:20px;font-size:12px;line-height:1.6;color:#34413c}
.capture-steps li{margin:6px 0}
.capture-reveal{margin-top:14px}
/* Comments and who changed what (comments.mjs, 2026-10-17). */
.comment-note{display:inline-flex;align-items:center;gap:3px;min-width:22px;height:29px;padding:0 3px;border:0;background:transparent;color:#8ea597;cursor:pointer;font-size:11px}
.comment-note .line-icon{width:14px;height:14px}
.comment-note:hover,.comment-note:focus-visible,.comment-note.has-comments{color:#2f6b4d}
.comment-note svg{filter:var(--icon-filter,none)}
.project-note.has-comments .project-note-actions{opacity:1;visibility:visible}
.project-note.has-comments:not(:hover):not(:focus-within) .project-note-actions>:not(.comment-note):not(.remind-note.is-set):not(.hidden-note):not(.progress-note[aria-pressed=true]){opacity:0}
.project-note.has-comments .project-note-actions>.comment-note{opacity:1!important}
@media(pointer:coarse){.comment-note{position:relative}.comment-note:after{content:"";position:absolute;inset:-8px -3px}}
.comment-thread{width:min(340px,calc(100vw - 16px));max-height:min(480px,80vh);display:flex;flex-direction:column;padding:6px}
.comment-list{overflow:auto;flex:1;min-height:0;padding:0 8px}
.comment-item{padding:8px 0;border-bottom:1px solid var(--line)}
.comment-item:last-child{border-bottom:0}
.comment-head{display:flex;align-items:center;gap:8px;font-size:12px;color:#34413c}
.comment-head strong{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comment-when{color:#8ea597;font-size:11px;white-space:nowrap}
.comment-remove{margin-left:auto;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;color:#8ea597}
.comment-remove .line-icon{width:12px;height:12px}
.comment-text{margin-top:3px;font-size:13px;line-height:1.5;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.comment-empty{margin:6px 8px;font-size:12px;color:#759582}
.comment-form{display:flex;align-items:flex-end;gap:8px;padding:8px;border-top:1px solid var(--line)}
.comment-input{flex:1;min-width:0;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:inherit;font-size:13px;line-height:1.4;resize:none}
.project-note.is-changed-by-other>.drag-note{color:#c58a2f;opacity:1}
.share-activity-list{list-style:none;margin:0;padding:0;max-height:180px;overflow:auto}
.share-activity-item{padding:5px 0;font-size:12px;line-height:1.5;color:#34413c;overflow-wrap:anywhere}
.share-activity-item strong{font-weight:600}
.share-activity-text{color:#567061}
.share-activity-when{color:#8ea597}
/* Print, or save as PDF, one project or one note (print.mjs, 2026-10-17). Only #print-area prints: no buttons, folded
   categories open, dark mode off. */
#print-area{display:none}
.project-export-row{display:flex;flex-wrap:wrap;gap:6px 16px;margin:14px 0 0}
.project-export-row .text-button{display:inline-flex;align-items:center;gap:6px}
.project-export-row .line-icon{width:14px;height:14px}
@media print{
  html[data-theme="dark"]{filter:none!important;background:#fff!important}
  html[data-theme="dark"] :is(img,video,canvas){filter:none!important}
  body.printing{background:#fff!important;padding:0!important}
  body.printing>*:not(#print-area){display:none!important}
  body.printing #print-area{display:block;color:#111;font-size:12pt;line-height:1.55}
  #print-area .print-header{margin:0 0 14pt;padding-bottom:8pt;border-bottom:1px solid #ccc}
  #print-area .print-header h1{margin:0;font:600 18pt Georgia,serif;color:#111}
  #print-area .print-header p{margin:4pt 0 0;font-size:9pt;color:#666}
  #print-area :is(button,.project-note-actions,.project-quick-add,.project-write-area,.project-drop-hint,.note-end-copy,.drag-note,.project-heading,.subcategory-grip,.subcategory-collapse,.subcategory-count,.subcategory-remove,.reference-tabs,.project-references,.note-agent-badge,.codex-task-link){display:none!important}
  #print-area .project-card{border:0!important;margin:0!important;padding:0!important}
  #print-area :is(.subcategory-content,.subcategory-content-inner){display:block!important;grid-template-rows:none!important;opacity:1!important;visibility:visible!important;overflow:visible!important}
  #print-area .subcategory-heading{margin:12pt 0 4pt;font-weight:600;color:#333}
  #print-area .project-note{display:block;padding:3pt 0 3pt 12pt;position:relative;break-inside:avoid}
  #print-area .project-note::before{content:"•";position:absolute;left:0;color:#666}
  #print-area .project-note-text,#print-area .print-textarea{color:#111!important;font-size:12pt;white-space:pre-wrap}
  #print-area .note-images img{max-width:100%;max-height:none;break-inside:avoid}
  #print-area a{color:#111;text-decoration:underline}
  @page{margin:16mm}
}
/* Tables and dividers in notes (markdown.mjs, 2026-10-17). */
.md-table{border-collapse:collapse;margin:6px 0;max-width:100%;font-size:inherit;line-height:1.5;white-space:normal}
.md-table :is(td,th){border:1px solid #d9e6de;padding:3px 9px;text-align:left;vertical-align:top;overflow-wrap:anywhere}
.md-table th{background:#eef5f0;font-weight:600}
.md-rule{border:0;border-top:1px solid #d3e2d9;margin:10px 0}
/* The "/" template picker (templates.mjs, 2026-10-17). */
.template-menu{width:min(320px,calc(100vw - 16px));max-height:min(360px,60vh);overflow:auto;padding:6px}
.template-option{display:flex;align-items:center;gap:4px;border-radius:8px}
.template-option.is-active{background:#eef5f0}
.template-use{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left}
.template-use strong{font-weight:600;font-size:13px;color:var(--ink)}
.template-preview{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:#8ea597}
.template-remove{flex:none;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;color:#8ea597;opacity:0}
.template-option:hover .template-remove,.template-remove:focus-visible{opacity:1}
.template-remove .line-icon{width:12px;height:12px}
@media(hover:none){.template-remove{opacity:1}}
/* Links between notes (links.mjs, 2026-10-17). */
.note-wikilink{display:inline;padding:0;margin:0;border:0;background:none;font:inherit;color:#2f6b4d;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:.2em;cursor:pointer}
.note-wikilink:hover{text-decoration-style:solid}
.note-wikilink.is-missing{color:#a0866a;text-decoration-style:dashed}
.note-wikilink.is-plain{color:inherit;text-decoration:none;cursor:text}
.shared-note.is-flash{background:#eef7f1;border-radius:8px;transition:background .3s}
.template-use.project-menu-option{padding-left:10px}
/* Sketches (sketch.mjs, 2026-10-17): a full-screen sheet, drawn with Apple Pencil, a finger or the mouse. */
.sketch-dialog{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#f3f6f4;color:var(--ink);overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.sketch-dialog[open]{display:flex;flex-direction:column}
.sketch-dialog::backdrop{background:#1d261f66}
.sketch-bar{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;padding:8px 14px;padding-top:max(8px,env(safe-area-inset-top));border-bottom:1px solid #e2e9e5;background:#fbfaf4}
.sketch-title{margin:0;font-size:15px;font-weight:600;white-space:nowrap}
.sketch-tools{display:flex;align-items:center;gap:4px;flex-wrap:wrap;flex:1;min-width:0}
.sketch-gap{width:1px;height:22px;margin:0 6px;background:#e2e9e5}
.sketch-colour{width:30px;height:30px;padding:0;border:0;border-radius:50%;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.sketch-colour:before{content:"";width:20px;height:20px;border-radius:50%;background:var(--swatch)}
.sketch-colour[aria-pressed=true]{box-shadow:inset 0 0 0 2px #5fa37e}
.sketch-size{width:30px;height:30px;padding:0;border:0;border-radius:8px;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.sketch-size-dot{display:block;border-radius:50%;background:#1f3a2e}
.sketch-size[aria-pressed=true]{background:#e6f1ea}
.sketch-tool{width:34px;height:34px}
.sketch-tool[aria-pressed=true]{background:#e6f1ea;color:#1f3a2e}
.sketch-tool:disabled{opacity:.35;cursor:default}
.sketch-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.sketch-done:disabled{opacity:.5;cursor:default}
.sketch-area{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;cursor:crosshair}
.sketch-area.is-erasing{cursor:cell}
.sketch-area canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.sketch-live{pointer-events:none}
.sketch-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;color:#9fb3a7;font-size:15px;pointer-events:none;text-align:center}
.sketch-confirm{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:#fff;box-shadow:0 8px 28px #1d261f2e}
.sketch-confirm[hidden]{display:none}
.sketch-discard{color:#a1442f}
.sketch-error{position:absolute;left:50%;top:70px;transform:translateX(-50%);margin:0;padding:8px 12px;border-radius:10px;background:#fff4f1;color:#a1442f;box-shadow:0 6px 20px #1d261f1f}
.sketch-error[hidden]{display:none}
.image-draw{position:absolute;top:-38px;left:0;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:0;border-radius:8px;background:#ffffff1f;color:#fff;font:inherit;font-size:13px;cursor:pointer}
.image-draw:hover,.image-draw:focus-visible{background:#ffffff33}
.image-draw[hidden]{display:none}
.image-draw .line-icon{width:15px;height:15px;stroke:#fff}
@media(max-width:700px){.sketch-title{display:none}.sketch-gap{display:none}}
@media(pointer:coarse){.sketch-colour,.sketch-size{width:36px;height:36px}.sketch-tool{width:40px;height:40px}}
.sketch-dialog{border-radius:0}
/* Text in pictures (hosted/picture-text.mjs, 2026-10-17): the matching picture in a search, the text in the viewer. */
figure.note-image.search-hit-picture{outline:2px solid #9fd6b5;outline-offset:2px;border-radius:8px}
figure.note-image.search-hit-picture.is-current{outline-color:#3f8f63}
.image-text{margin:10px auto 0;max-width:min(92vw,720px);max-height:32vh;overflow:auto;padding:12px 14px;border-radius:10px;background:#fff;color:var(--ink);-webkit-user-select:text;user-select:text}
.image-text[hidden]{display:none}
.image-text-title{margin:0 0 6px;font-size:12px;font-weight:600;color:#6f8a7b}
.image-text-body{margin:0 0 8px;white-space:pre-wrap;font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.image-text-copy{display:inline-flex;align-items:center;gap:6px}
.image-text-copy .line-icon{width:14px;height:14px}
/* PDF attachments (files.mjs, 2026-10-17): chips under a note, after its pictures. */
.note-files{display:flex;flex-wrap:wrap;gap:6px;flex-basis:100%;line-height:1.3}
.note-file{display:inline-flex;align-items:center;max-width:min(100%,360px);border:1px solid #e2e9e5;border-radius:9px;background:#fff}
.note-file-open{display:inline-flex;align-items:center;gap:7px;min-width:0;padding:6px 6px 6px 9px;color:var(--ink);text-decoration:none;font-size:13px}
.note-file-open:hover .note-file-name{text-decoration:underline}
.note-file-open .line-icon{flex:none;width:16px;height:16px;color:#a1442f}
.note-file-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.note-file-size{flex:none;color:#8ea597;font-size:11px}
.note-file-remove{flex:none;width:24px;height:24px;margin-right:3px;border:0;border-radius:6px;background:transparent;color:#8ea597;font-size:15px;line-height:1;cursor:pointer;opacity:0}
.note-file:hover .note-file-remove,.note-file-remove:focus-visible{opacity:1}
.note-file-remove:hover{background:#f3f6f4;color:#a1442f}
@media(hover:none){.note-file-remove{opacity:1}}
@media(pointer:coarse){.note-file-open{padding-top:9px;padding-bottom:9px}.note-file-remove{width:32px;height:32px}}
@media print{.note-file-remove{display:none}.note-file{border-color:#ccc}}
/* Today's note (2026-10-17): the Calendar's daily note button. */
.calendar-daily{height:30px;padding:0 12px;border:1px solid #cfe3d6;border-radius:8px;background:#eef5f0;color:#1F3A2E;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.calendar-daily:hover{background:#e2efe7}
/* Words inside PDFs (hosted/files.mjs, 2026-10-17): a PDF whose text matches the search. */
.note-file.search-hit-file{border-color:#9fd6b5;box-shadow:0 0 0 2px #d6eedf}
.note-file.search-hit-file.is-current{border-color:#3f8f63;box-shadow:0 0 0 2px #9fd6b5}
/* A closed comments pop-up stays hidden: .comment-thread sets display:flex, which beat the browser's [popover] rule. */
.comment-thread:not(:popover-open){display:none}
/* The comment box shows no green focus ring when clicked (owner, 2026-10-17); its own light border stays. */
.comment-input:focus,.comment-input:focus-visible{outline:none}
/* The project heading keeps reference tabs, +, share, collapse and ⋯ (owner, 2026-10-17/18); rename, sort, move,
   switch places, print, Markdown and delete are in the ⋯ menu (openProjectMenu). Those buttons stay in the page, hidden. */
.project-heading .heading-rename,.project-heading-actions>.heading-sort,.project-heading-actions>.project-reorder,.project-heading-actions>.heading-delete{display:none}
.project-heading-actions .heading-more{margin-right:-6px}
.note-menu-item.is-danger{color:#a1442f}
@media(pointer:coarse){.project-heading-actions .heading-more{position:relative}.project-heading-actions .heading-more:after{content:"";position:absolute;inset:-8px -4px}}
/* The ⋯ dots read as clearly as the other icons (owner, 2026-10-18: "too light"): one size for the note rows and the
   project headings. Their path is three dots, so the stroke width is the dot size. */
.more-note .line-icon,.project-heading-actions .heading-more .line-icon{width:16px;height:16px;stroke-width:3.2}
/* Profile pictures (2026-10-18, web/avatars.mjs + web/profile-ui.mjs): a round avatar beside a person's name. */
.avatar{--avatar-size:24px;flex:none;display:inline-grid;place-items:center;width:var(--avatar-size);height:var(--avatar-size);border-radius:50%;overflow:hidden;background:#e4efe8;vertical-align:middle;box-shadow:0 0 0 1px #1f3a2e14;user-select:none;-webkit-user-select:none}
.avatar>svg,.avatar>img{display:block;width:100%;height:100%;object-fit:cover}
.avatar-initial{background:var(--avatar-tone,#5FA37E);color:#fff;font:600 calc(var(--avatar-size) * .46)/1 system-ui,-apple-system,sans-serif}
.avatar-link{color:#3e7c5f}.avatar-link>svg{width:62%;height:62%}
/* Dark mode inverts the page and turns pictures back; a drawn avatar must be turned back too (a photo's img already is). */
html[data-theme="dark"] .avatar:not(.avatar-photo){filter:invert(1) hue-rotate(180deg)}
/* Settings: the picture at the top of the account card. */
.account-card:has(#account-avatar){flex-wrap:nowrap}
.account-card:has(#account-avatar:not([hidden])) #account-detail{flex:1;min-width:0}
.account-avatar{flex:none;padding:0;border-radius:50%;line-height:0;cursor:pointer;position:relative}
.account-avatar:hover .avatar,.account-avatar:focus-visible .avatar{box-shadow:0 0 0 2px #5FA37E}
.account-avatar:focus-visible{outline:none}
/* "Your picture" */
.avatar-dialog{width:min(470px,calc(100vw - 30px));padding:24px;text-align:left}
.avatar-current{display:flex;align-items:center;gap:14px;margin:16px 0 18px}
.avatar-current-pic{line-height:0}
.avatar-current-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.avatar-current-text strong{font-size:13px;font-weight:600;overflow-wrap:anywhere}
.avatar-current-text span{font-size:12px;color:#6a8977}
.avatar-photo-block{margin-bottom:18px}
.avatar-crop{display:flex;flex-direction:column;align-items:center;gap:12px}
.avatar-crop-frame{width:220px;height:220px;max-width:100%;border-radius:50%;cursor:grab;touch-action:none;box-shadow:0 0 0 1px #d2e3d8,0 6px 24px #24302318;background:#fff}
.avatar-crop-frame.is-dragging{cursor:grabbing}
.avatar-crop-frame:focus-visible{outline:2px solid #5FA37E;outline-offset:3px}
.avatar-zoom-label{display:flex;align-items:center;gap:10px;font-size:12px;color:#6a8977;width:220px;max-width:100%}
.avatar-zoom{flex:1;accent-color:#3e7c5f}
.avatar-crop-actions{display:flex;align-items:center;gap:14px}
.avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px;margin-top:8px}
.avatar-choice{display:grid;place-items:center;padding:4px;border-radius:50%;aspect-ratio:1;line-height:0}
.avatar-choice:hover .avatar{box-shadow:0 0 0 2px #cfe6d7}
.avatar-choice[aria-checked="true"] .avatar{box-shadow:0 0 0 2px #fbfaf4,0 0 0 4px #3e7c5f}
.avatar-choice:focus-visible{outline:2px solid #5FA37E;outline-offset:1px}
.avatar-status{min-height:18px;margin:14px 0 0;font-size:12px;color:#4f6d5d}
/* Where people show: comment heads, the Share dialog, Recent activity, a shared project's byline, "changed by". */
.share-activity-item>.avatar{margin:-2px 6px 0 0}
.shared-by{display:flex;align-items:center;gap:7px}
.project-note>.changed-by{flex:none;display:inline-flex;margin-top:5px;line-height:0;cursor:default}
.project-note>.changed-by[hidden]{display:none}
/* Settings › Delete my account… (2026-10-18, web/delete-account-ui.mjs) */
.nav-item.delete-account-item{color:#9b4a3c}
.nav-item.delete-account-item:hover{background:#f6ebe7}
.nav-item.delete-account-item[hidden]{display:none}
.delete-account-dialog{width:min(470px,calc(100vw - 30px));padding:24px;text-align:left}
.delete-account-note{font-size:12px;color:#6a8977;margin:0 0 8px}
.delete-account-more{display:block;width:max-content;font-size:12px;color:#527264;margin:0 0 16px}
.delete-account-form{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.delete-account-form .field-label{margin:0;overflow-wrap:anywhere}
.button.delete-account-go{background:#9b4a3c;border-color:#9b4a3c;color:#fff;align-self:flex-start}
.button.delete-account-go:hover{background:#86402f}
.button.delete-account-go:disabled{opacity:.45;cursor:not-allowed}
.delete-account-status{min-height:18px;margin:12px 0 0;font-size:12px;color:#9b4a3c}
/* The try-first demo (/try, web/demo-boot.mjs) and its guided tour (web/tour.mjs), 19 Oct 2026. */
.demo-bar{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:900;display:flex;align-items:center;gap:4px;max-width:calc(100vw - 20px);padding:5px 5px 5px 16px;border-radius:999px;background:#1f3a2e;color:#e8f3ec;font:13px/1.3 system-ui,-apple-system,'Segoe UI',sans-serif;box-shadow:0 8px 28px rgba(20,40,30,.28)}
.demo-bar-note{margin-right:6px;white-space:nowrap}
.demo-bar-note strong{color:#fff;font-weight:600}
.demo-bar-link,.demo-bar-primary{border:0;border-radius:999px;padding:8px 12px;font:inherit;cursor:pointer;white-space:nowrap;text-decoration:none}
.demo-bar-link{background:transparent;color:#e8f3ec}
.demo-bar-link:hover,.demo-bar-link:focus-visible{background:rgba(255,255,255,.14);color:#fff}
.demo-bar-primary{background:#5fa37e;color:#fff;font-weight:600}
.demo-bar-primary:hover,.demo-bar-primary:focus-visible{background:#4d9170}
.demo-bar-primary:disabled{opacity:.75;cursor:default}
@media (max-width:760px){.demo-bar-note span{display:none}}
@media (max-width:560px){.demo-bar{left:10px;right:10px;transform:none;justify-content:space-between;padding-left:12px}.demo-bar-note,.demo-bar-link[data-act=video]{display:none}}
html[data-theme="dark"] .demo-bar{filter:invert(1) hue-rotate(180deg)}
body[data-demo="true"] :is(#cloud-signout,#agents-button,#capture-button,#delete-account-button,#import-button,#account-avatar){display:none!important}
body[data-demo="true"] #main-scroll{padding-bottom:72px}
.demo-signup{display:block;margin-top:6px;color:#2f7a52;font-weight:600}
.demo-video{width:min(960px,94vw);padding:0;border:0;border-radius:14px;background:#10221a;color:#fff;overflow:hidden}
.demo-video::backdrop{background:rgba(16,30,22,.6)}
.demo-video-top{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 10px 18px}
.demo-video-top h2{margin:0;font:600 15px/1.3 system-ui,-apple-system,'Segoe UI',sans-serif}
.demo-video-close{width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.demo-video video{display:block;width:100%;height:auto;max-height:80vh;background:#000}
.tour{position:fixed;inset:0;z-index:2000;pointer-events:none}
.tour-spot{position:fixed;border-radius:12px;box-shadow:0 0 0 9999px rgba(18,32,25,.38),0 0 0 3px #5fa37e;transition:left .25s,top .25s,width .25s,height .25s;pointer-events:none}
.tour-card{position:fixed;width:min(340px,calc(100vw - 24px));padding:14px 16px 12px;border-radius:14px;background:#fff;color:#1f3a2e;box-shadow:0 14px 40px rgba(18,32,25,.3);pointer-events:auto;font:14px/1.5 system-ui,-apple-system,'Segoe UI',sans-serif;outline:none}
.tour.is-dimmed{background:rgba(18,32,25,.3)}
.tour-card.is-centred{left:50%;top:50%;transform:translate(-50%,-50%);width:min(480px,calc(100vw - 24px))}
.tour-card.is-docked{left:12px;right:12px;top:auto;bottom:76px;width:auto;transform:none}
.tour-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.tour-head h2{margin:0 0 4px;font-size:16px;font-weight:650;color:#1f3a2e}
.tour-card p{margin:0 0 12px;color:#3c5547}
.tour-close{flex:none;width:30px;height:30px;margin:-4px -6px 0 0;border:0;border-radius:50%;background:transparent;color:#6b7f73;font-size:20px;line-height:1;cursor:pointer}
.tour-close:hover,.tour-close:focus-visible{background:#eef5f0;color:#1f3a2e}
.tour-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.tour-count{margin-right:auto;color:#6b7f73;font-size:12px}
.tour-button{min-height:36px;padding:7px 14px;border:1px solid #d5e2da;border-radius:999px;background:#fff;color:#1f3a2e;font:inherit;cursor:pointer}
.tour-button:hover,.tour-button:focus-visible{border-color:#5fa37e}
.tour-button.is-primary{border-color:#1f3a2e;background:#1f3a2e;color:#fff;font-weight:600}
.tour-button.is-primary:hover,.tour-button.is-primary:focus-visible{background:#2c5040}
@media (prefers-reduced-motion:reduce){.tour-spot{transition:none}}

.cloud-settings-details{margin:18px 0;font-size:11px;color:#678373}.cloud-settings-details summary{cursor:pointer}.account-card>strong{font-size:11px;overflow-wrap:anywhere}