/* V2.1 Notepad workspace. Loaded last so legacy V1/V2 rules cannot win. */
#notepad{width:100%;max-width:1600px;margin-inline:auto;padding:0 32px;gap:0;background:var(--bg)}
#notepad .notepad-heading{flex:0 1 auto;padding:0;min-width:0;max-width:min(32%,360px)}
#notepad .notepad-heading h1{margin:0;font:500 28px/1.25 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:-1px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#notepad .workspace-controls{background:transparent;border:0;flex:none}
#notepad .workspace-controls>.toolbar{display:flex;align-items:center;justify-content:flex-start;align-self:stretch;gap:20px;min-height:48px;padding:24px 0 16px;border:0;background:transparent;width:100%;font-size:13px}
#notepad .toolbar>.tool-group{display:flex;flex:0 1 auto;flex-wrap:nowrap;gap:4px;border:0;margin:0;padding:0;min-width:0}
#notepad .toolbar>.tool-group:last-child{margin-left:auto;flex-shrink:0}
#notepad .toolbar button{width:auto;padding:8px 10px;min-height:36px;font-size:13px;color:var(--muted);border:0;border-radius:2px}
#notepad .toolbar button:hover{background:var(--hover);color:var(--text)}
#notepad .toolbar button[aria-pressed=true]{background:var(--tint);color:var(--selected-ink)}
#notepad .toolbar #menu-toggle{background:transparent;min-width:36px;min-height:36px;padding:8px;border:0;border-radius:2px}
#notepad .toolbar .ui-icon{width:16px;height:16px}
#notepad .font-family-control,#notepad .font-control{padding:0;margin:0;border:0;gap:7px;color:var(--muted)}
#notepad .font-family-control select,#notepad .font-control select{background:transparent;border:1px solid var(--border);border-radius:2px;min-height:36px;padding:6px 8px;font-size:13px;color:var(--text)}
#notepad .font-family-control select{width:130px}
#notepad .toolbar-fonts{margin-left:8px}
#notepad .font-panel{gap:8px}
#notepad .editor-panel{position:relative;flex:1;min-height:0;min-width:0;background:var(--raised);border:1px solid var(--border);border-radius:2px;box-shadow:none;margin-bottom:18px;overflow:hidden}
#notepad .editor-panel::before{content:none;display:none}
#notepad .editor-panel textarea#editor{display:block;background:transparent;color:var(--text);-webkit-text-fill-color:var(--text);padding:24px 26px 30px;border:0;border-radius:2px;line-height:2;caret-color:var(--accent);box-shadow:none}
#notepad .editor-panel:focus-within{border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
#notepad .editor-panel textarea#editor::placeholder{color:var(--muted);-webkit-text-fill-color:var(--muted);opacity:1}
#notepad .bottom-section{flex:none;background:transparent;min-width:0}
#notepad .bottom-tab-row{background:transparent;border:0;padding:0 0 14px;gap:8px;min-height:44px}
#notepad .bottom-tab-row .tab{border:0;border-left:2px solid transparent;border-radius:2px;background:transparent;margin:0 8px 0 0;padding:0 4px 0 0;gap:2px;color:var(--muted)}
#notepad .bottom-tab-row .tab.active{border:0;border-left:2px solid var(--accent);background:var(--tint);color:var(--selected-ink)}
#notepad .bottom-tab-row .tab-name{border-radius:2px;padding:7px 10px;min-height:36px;font-size:13px;font-weight:400;max-width:190px}
#notepad .bottom-tab-row .tab.active .tab-name{font-weight:500}
#notepad .bottom-tab-row .tab-close{border-radius:2px;min-width:28px;min-height:30px;color:inherit}
#notepad .bottom-tab-row .new-tab{background:transparent;color:var(--accent);margin:0;min-width:36px;min-height:36px;padding:0 8px;border-radius:2px}
#notepad .note-list-controls{border:0;padding:0;gap:2px}
#notepad .note-list-controls button{font-size:13px;color:var(--muted);min-height:36px;padding:6px 9px;border-radius:2px}
#notepad .statusbar{background:transparent;border-top:1px solid var(--border);padding:12px 0;font-size:12px;color:var(--muted)}
#notepad .statusbar div span+span{border:0;padding-left:0}
#notepad .find-bar,#notepad .symbols{border:1px solid var(--border);border-radius:2px;background:var(--raised);padding:8px 12px;margin-bottom:12px}
#notepad .find-bar input{background:var(--bg);border-radius:2px;font-size:13px}
#notepad .dropdown,#notepad .dropdown button,#notepad .dropdown a,#notepad .font-panel{border-radius:2px}
body:has(#notepad) dialog .note-entry-status,body:has(#notepad) kbd,body:has(#notepad) #toast{border-radius:2px}
@media(max-width:1100px){#notepad{padding-inline:24px}#notepad .toolbar button{padding:8px}#notepad .toolbar-fonts{margin-left:4px}}
@media(max-width:800px), (orientation:landscape) and (min-width:500px) and (max-width:1100px) and (max-height:500px) and (pointer:coarse){
 #notepad{padding-inline:14px}
 #notepad .notepad-heading{grid-column:1/-1;padding:18px 0 10px;max-width:100%;width:100%}#notepad .notepad-heading h1{font-size:22px;letter-spacing:-.6px}
 #notepad .workspace-controls>.toolbar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;min-height:54px;padding:0 0 10px}
 #notepad .toolbar>.tool-group{display:contents}
 #notepad .toolbar button,#notepad .toolbar #copy-note,#notepad .toolbar #download-note,#notepad .toolbar #menu-toggle{width:100%;min-width:0;min-height:44px;padding:9px 4px;gap:0}
 #notepad .toolbar .ui-icon{width:20px;height:20px}#notepad .toolbar button>span{display:none}
 #notepad .toolbar-fonts{margin:0}#notepad .font-panel{padding:12px;background:var(--raised)}
 #notepad .font-panel select{font-size:16px;min-height:44px;width:116px}
 #notepad .editor-panel{margin-bottom:12px}#notepad .editor-panel::before{content:none;display:none}
 #notepad .editor-panel textarea#editor{padding:16px 14px 20px;line-height:1.8}
 #notepad .bottom-tab-row{padding-bottom:8px;gap:4px}#notepad .bottom-tab-row .tab-name{max-width:135px}
 #notepad .note-list-controls button{padding:5px 7px}
 #notepad .statusbar{padding:9px 0;font-size:11px}
}
@media(pointer:coarse){#notepad .bottom-tab-row .tab-name,#notepad .bottom-tab-row .new-tab,#notepad .note-list-controls button{min-height:44px}#notepad .bottom-tab-row .tab-close{min-width:44px;min-height:44px}}
/* Preserve the existing single top/bottom bar in shallow phone landscape. */
.landscape-notepad #notepad{display:contents}
.landscape-notepad #notepad .notepad-heading{display:none}
.landscape-notepad #notepad .workspace-controls>.toolbar{padding:2px 0;height:100%;min-height:0;background:var(--bg);border-bottom:1px solid var(--border)}
.landscape-notepad #notepad .editor-panel{margin:6px 10px;border-radius:2px}
.landscape-notepad #notepad .editor-panel::before{content:none;display:none}
.landscape-notepad #notepad .editor-panel textarea#editor{padding:10px 12px 12px;line-height:1.6}
.landscape-notepad #notepad .bottom-section{background:var(--bg);border-top:1px solid var(--border);height:44px}
.landscape-notepad #notepad .bottom-tab-row{padding:0 6px;gap:3px;min-height:0;height:100%}
.landscape-notepad #notepad .bottom-tab-row .tab-name{min-height:40px;max-width:120px;padding:5px 8px}
.landscape-notepad #notepad .bottom-tab-row .new-tab{min-height:40px}
.landscape-notepad #notepad .statusbar{border:0;padding:0 10px;height:100%;font-size:11px}
.landscape-notepad #notepad .statusbar div span+span{border-left:1px solid var(--border);padding-left:8px}

/* Optional formatted Notepad surface, using the same workspace dimensions. */
#notepad .editor-panel #editor[hidden],#notepad .editor-panel #notepad-rich[hidden]{display:none!important}
#notepad .editor-panel .np-rich{width:100%;height:100%;min-height:0;overflow:auto;border:0;outline:none;background:transparent;color:var(--text);padding:24px 26px 30px;font:18px/2 Consolas,"Liberation Mono",monospace;white-space:pre-wrap;overflow-wrap:anywhere;caret-color:var(--accent);tab-size:4}
#notepad .np-rich[data-wrap=off]{white-space:pre;overflow-wrap:normal}
#notepad .np-rich p,#notepad .np-rich div{margin:0}
#notepad .np-rich h1,#notepad .np-rich h2,#notepad .np-rich h3{line-height:1.4;margin:.6em 0 .3em;font-family:inherit}
#notepad .np-rich h1{font-size:1.8em}#notepad .np-rich h2{font-size:1.5em}#notepad .np-rich h3{font-size:1.2em}
#notepad .np-rich ul,#notepad .np-rich ol{margin:0;padding-left:2em}
#notepad .np-rich:empty::before{content:attr(data-placeholder);color:var(--muted);pointer-events:none}
#notepad .np-rich .kp-check-line{display:flex;align-items:baseline;gap:9px}
#notepad .np-rich .kp-inline-check{flex:none;width:16px;height:16px;margin:0;accent-color:var(--accent);cursor:pointer}
#notepad .np-rich .kp-check-text{flex:1;min-width:0;outline:none}
#notepad .np-rich .kp-check-line[data-checked=true]>.kp-check-text{text-decoration:line-through;opacity:.75}
#notepad .toolbar-fonts{display:flex;align-items:center;min-width:0;flex:0 1 auto;gap:8px}
#notepad .font-family-control,#notepad .font-control{flex:none}
#notepad .np-format-tools{display:flex;align-items:center;flex:0 1 320px;min-width:68px;max-width:320px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;gap:2px;padding:0 2px}
#notepad .np-format-tools button{flex:none;min-width:30px;padding:6px 4px}
#notepad .np-format-tools button>.np-format-symbol{display:inline!important;font-family:system-ui,sans-serif;font-size:14px;line-height:1}
#notepad .np-format-tools [data-format=bold]{font-weight:700}#notepad .np-format-tools [data-format=italic]{font-style:italic}#notepad .np-format-tools [data-format=underline]{text-decoration:underline}#notepad .np-format-tools [data-format=strikeThrough]{text-decoration:line-through}
#notepad .toolbar>.tool-group:first-of-type{flex:1;min-width:0}
#notepad .toolbar>.tool-group:nth-child(2){flex:1;min-width:0}
@media(min-width:801px){#notepad .notepad-heading{max-width:180px}#notepad .workspace-controls>.toolbar{gap:12px}}
@media(max-width:800px), (orientation:landscape) and (min-width:500px) and (max-width:1100px) and (max-height:500px) and (pointer:coarse){
 #notepad .font-panel{width:min(300px,calc(100vw - 24px));max-height:calc(100dvh - 110px);overflow-y:auto}
 #notepad .np-format-tools{flex:none;max-width:100%;width:100%;padding:6px 0 0;border-top:1px solid var(--border)}
 #notepad .np-format-tools button{width:44px;min-width:44px;min-height:44px}
 #notepad .editor-panel .np-rich{padding:16px 14px 20px;line-height:1.8}
 .landscape-notepad #notepad .editor-panel .np-rich{padding:10px 12px 12px;line-height:1.6}
}
/* Keep font/formatting tools from overlapping actions in narrow desktop windows. */
@media(min-width:801px) and (max-width:1000px){
 body:not(.landscape-notepad) #notepad .notepad-heading{max-width:140px}
 body:not(.landscape-notepad) #notepad .toolbar #find-toggle>span,
 body:not(.landscape-notepad) #notepad .toolbar #symbols-toggle>span,
 body:not(.landscape-notepad) #notepad .toolbar #wrap-toggle>span,
 body:not(.landscape-notepad) #notepad .toolbar #copy-note>span,
 body:not(.landscape-notepad) #notepad .toolbar #download-note>span{display:none}
 body:not(.landscape-notepad) #notepad .font-family-control select{width:110px}
 body:not(.landscape-notepad) #notepad .toolbar-fonts{flex:1}
 body:not(.landscape-notepad) #notepad .np-format-tools{flex:1 1 120px}
}

/* V2.2: note names are shown in the bottom tabs. */
#notepad .notepad-heading{display:none}

/* Remove the blank band above the desktop writing toolbar. */
@media(min-width:801px){#notepad .workspace-controls>.toolbar{padding-top:8px;padding-bottom:10px}}

/* List tools stay at the start while the remaining text controls scroll. */
#notepad .np-format-tools{overflow:visible;gap:4px;min-width:158px;padding:0 2px}
#notepad .np-format-primary{display:flex;align-items:center;gap:2px;flex:none}
#notepad .np-format-overflow{display:flex;align-items:center;gap:2px;flex:1;min-width:30px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
@media(max-width:800px), (orientation:landscape) and (min-width:500px) and (max-width:1100px) and (max-height:500px) and (pointer:coarse){
 #notepad .np-format-tools{padding:6px 0 0;min-width:0}
 #notepad .np-format-overflow{min-width:44px}
}