/* Notebook tabs and a compact blue tool strip, based on the supplied reference. */
.reference-ui{--reference-blue:#285bd0;--reference-top:#254db3;--reference-line:#ffffff2c}
.reference-header{display:flex;align-items:stretch;gap:8px;min-height:64px;padding:9px 14px 0;background:var(--reference-top);color:#fff;flex-shrink:0}
.documents-open>.reference-header{display:none}
.reference-ui #app-shell:not(.documents-open)>.topbar,.reference-ui #app-shell:not(.documents-open)>.notebook-file-actions{display:none}
.reference-home{display:grid;place-items:center;width:48px;min-width:48px;min-height:48px;margin:0 7px 7px 0;border:0;border-radius:11px;background:transparent;color:#fff;touch-action:manipulation}
.reference-home:hover{background:#ffffff1a}.reference-home svg{width:27px;height:27px;pointer-events:none}
.reference-tabs{display:flex;gap:4px;flex:1;min-width:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#ffffff40 transparent;align-items:stretch}
.reference-tab{display:flex;align-items:center;gap:9px;min-width:170px;max-width:340px;flex:1 0 170px;padding:0 9px 6px 16px;border-radius:14px 14px 0 0;color:#ffffffbd}
.reference-tab.is-active{background:var(--reference-blue);color:#fff}
.reference-tab>[role=tab]{flex:1;min-width:0;padding:12px 0;border:0;background:transparent;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;font-size:16px;font-weight:500;touch-action:manipulation}
.reference-tab-close{width:36px;height:36px;min-width:36px;border:0;border-radius:50%;background:transparent;color:inherit;font-size:23px;touch-action:manipulation}
.reference-tab-close:hover{background:#ffffff18}
.reference-ui #app-shell:not(.documents-open) .toolbar{margin:0;padding:0;gap:0;border:0;border-radius:0;background:var(--reference-blue);box-shadow:none;z-index:25;position:relative;flex-shrink:0}
.reference-tool-strip{display:flex;align-items:center;gap:10px;min-height:75px;padding:8px 16px;background:var(--reference-blue);color:#fff}
.reference-leading,.reference-trailing{display:flex;align-items:center;gap:9px;flex-shrink:0}
.reference-leading{padding-right:10px;border-right:1px solid var(--reference-line)}
.reference-trailing{padding-left:10px;border-left:1px solid var(--reference-line);margin-left:auto}
.reference-leading>button,.reference-trailing>button,.reference-more>summary{display:grid;place-items:center;width:48px;min-width:48px;height:48px;padding:8px;border:0!important;border-radius:12px;background:transparent;color:#fff;cursor:pointer;touch-action:manipulation;list-style:none}
.reference-more>summary::-webkit-details-marker{display:none}
.reference-leading svg,.reference-trailing svg{width:30px;height:30px;pointer-events:none}
.reference-leading>button:hover,.reference-trailing>button:hover,.reference-more[open]>summary{background:#ffffff1c}
#reference-options-toggle{background:#ffffff1d;border-radius:50%;width:42px;min-width:42px;height:42px}#reference-options-toggle svg{width:25px;height:25px}
.reference-ui .reference-tool-strip>.toolbar-main.ie-real-toolbar{flex:1;flex-wrap:nowrap;width:auto;min-width:0;gap:11px!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:0 1px}
.reference-tool-strip>.toolbar-main::-webkit-scrollbar{display:none}
.reference-ui .reference-tool-strip .ie-toolbar-item{position:static}
.reference-ui .reference-tool-strip .ie-toolbar-item:not(details),.reference-ui .reference-tool-strip .ie-toolbar-item>summary{width:50px!important;min-width:50px!important;height:50px;min-height:50px;padding:7px!important;border:0!important;border-radius:15px;background:transparent;color:#fff;box-shadow:none;position:static}
.reference-ui .reference-tool-strip .ie-toolbar-item.active,.reference-ui .reference-tool-strip .ie-toolbar-item>summary.active{background:#fff;color:#234ca8;box-shadow:0 2px 6px #153c7726}
.reference-ui .reference-tool-strip .ie-toolbar-item[open]>summary{background:#ffffff22}
.reference-ui .reference-tool-strip .ie-toolbar-item[open]>summary.active{background:#fff}
.reference-ui .reference-tool-strip .ie-toolbar-item>summary:after{display:none}
.reference-tool-icon{display:grid;place-items:center;width:34px;height:34px;pointer-events:none;font-size:initial}
.reference-tool-icon svg{display:block;width:32px!important;height:32px!important;pointer-events:none}
[data-reference-icon=true]{font-size:0!important}
[data-reference-icon=true]>:not(.reference-tool-icon){display:none!important}
.reference-ui .toolbar .ie-real-toolbar [data-reference-icon=true]>.reference-tool-icon{display:grid!important}
.reference-ui .reference-tool-strip .ie-toolbar-item:disabled{opacity:.4}
.reference-ui .toolbar #pens-menu>.brush-picker,.reference-ui .toolbar .text-preset-options,.reference-ui .toolbar .shape-options{position:absolute;top:calc(100% + 8px);left:120px;right:auto;max-width:calc(100vw - 28px);z-index:60;color:#294c69;background:#fff}
.reference-ui .toolbar .text-preset-options{left:210px}.reference-ui .toolbar .shape-options{left:360px}
.reference-ui .toolbar #pens-menu .brush-button{color:#294c69}.reference-ui .toolbar #pens-menu .brush-button.active{background:#e7f7f3;border-color:#55b5a5;box-shadow:inset 0 -3px #169e8d}
.reference-ui .toolbar .brush-picker .pen-color-controls{color:#294c69}
.reference-options{padding:12px 16px;background:#f7faff;border-bottom:1px solid #ceddeb;color:#294c69}
.reference-options>.reference-utilities{display:flex;flex-wrap:wrap;gap:8px!important;align-items:center}
.reference-utilities>.ie-toolbar-item>summary,.reference-utilities>.ie-toolbar-item:not(details){background:#fff;color:#315a7d;border:1px solid #c9ddea}
.reference-utilities .reference-tool-icon svg{width:26px!important;height:26px!important}
.reference-utilities .ie-toolbar-item{position:relative}
.reference-options .toolbar-secondary{margin-top:10px;padding-top:10px;color:#315a7d}
.reference-more{position:relative}
.reference-more-panel{position:absolute;top:calc(100% + 13px);right:0;z-index:70;width:310px;max-width:calc(100vw - 24px);max-height:75dvh;overflow:auto;padding:17px;border:1px solid #d2e0ed;border-radius:15px;box-shadow:0 10px 40px #183c7040;background:#fff;color:#294c69}
.reference-more-panel>strong{display:block;font-size:14px;margin-bottom:13px}
.reference-more-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center}
.reference-more-actions>button,.reference-more-actions>select,.reference-more-actions>details>summary{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:44px;height:auto;margin:0;padding:9px 10px;border:1px solid #c8dce9;border-radius:9px;background:#f6fbff;color:#315a7d;font-size:11px;white-space:normal;cursor:pointer}
.reference-more-actions>button>svg{width:21px;height:21px;flex-shrink:0}
.reference-more-actions>#save-state{grid-column:1/-1;font-size:11px;color:#168471;padding:5px}
.reference-more-actions>#notebook-file-select,.reference-more-actions>#reading-download-file,.reference-more-actions>#open-icon-editor{grid-column:1/-1}
.reference-more-actions>#delete-menu .page-delete-options{position:static;width:auto;margin-top:6px;box-shadow:none}
.reference-more-actions>#delete-menu{grid-column:1/-1}
.reference-search-dialog{width:min(580px,calc(100vw - 24px));max-height:85dvh;padding:22px;border:1px solid #d0dfed;border-radius:18px;box-shadow:0 18px 70px #173c7040;color:#294c69;background:white}
.reference-search-dialog::backdrop{background:#142d535c;backdrop-filter:blur(3px)}
.reference-search-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.reference-search-dialog h2{font-size:22px;margin:0}
.reference-search-dialog>header button{width:44px;height:44px;border:1px solid #c8dce9;border-radius:9px;background:#f6fbff;color:#315a7d;font-size:24px}
#reference-search-input{width:100%;min-height:46px;padding:10px 13px;border:1px solid #b7d1e7;border-radius:9px;font-size:14px;color:#294c69;background:#fff}
#reference-search-count{font-size:12px;color:#7191a7}#reference-search-results{display:grid;gap:8px;max-height:50dvh;overflow:auto}
#reference-search-results>button{display:flex;flex-direction:column;gap:6px;min-height:65px;padding:12px;text-align:left;border:1px solid #d7e4ee;border-radius:10px;background:#f7fbff;color:#294c69}#reference-search-results strong{font-size:13px}#reference-search-results span{font-size:11px;color:#7690a2}
.reference-ui .reference-header :focus-visible,.reference-ui .reference-tool-strip :focus-visible{outline:3px solid #8ce5de;outline-offset:2px}
.notebook-gesture-active .reference-header{pointer-events:none!important}
.reference-ui .notebook-reading.reference-pages-open .page-drawer{display:block}
.reference-ui .notebook-reading.reference-pages-open .workspace{position:relative}
.reference-ui .notebook-reading .paper-scroll{background:#edf1f5;padding-top:18px}
@media(max-width:1050px){.reference-header{min-height:59px;padding:7px 10px 0}.reference-tab{min-width:150px;flex-basis:150px}.reference-tab>[role=tab]{font-size:14px}.reference-tool-strip{gap:7px;padding:8px 10px;min-height:69px}.reference-leading,.reference-trailing{gap:5px}.reference-leading{padding-right:6px}.reference-trailing{padding-left:6px}.reference-ui .reference-tool-strip>.toolbar-main.ie-real-toolbar{gap:7px!important}.reference-leading>button,.reference-trailing>button,.reference-more>summary{width:44px;min-width:44px;height:44px}.reference-ui .reference-tool-strip .ie-toolbar-item:not(details),.reference-ui .reference-tool-strip .ie-toolbar-item>summary{width:46px!important;min-width:46px!important;height:48px;min-height:48px}.reference-ui .toolbar .shape-options{left:auto;right:85px}}
@media(max-width:720px){.reference-header{gap:2px;padding:5px 6px 0;min-height:55px}.reference-home{width:40px;min-width:40px;margin-right:2px}.reference-tab{min-width:140px;flex-basis:140px;padding-left:11px}.reference-tab>[role=tab]{font-size:13px}.reference-tab-close{width:30px;min-width:30px}.reference-tool-strip{padding:6px;gap:4px}.reference-leading{gap:2px;padding-right:4px}.reference-trailing{gap:2px;padding-left:4px}.reference-leading>button,.reference-trailing>button,.reference-more>summary{width:40px;min-width:40px;height:44px;padding:6px}.reference-leading svg,.reference-trailing svg{width:26px;height:26px}#reference-options-toggle{width:36px;min-width:36px;height:36px}.reference-ui .reference-tool-strip>.toolbar-main.ie-real-toolbar{gap:5px!important}.reference-ui .toolbar #pens-menu>.brush-picker,.reference-ui .toolbar .text-preset-options,.reference-ui .toolbar .shape-options{position:absolute;top:calc(100% + 8px);left:8px;right:8px;width:auto;max-width:none;margin-top:0;max-height:65dvh;overflow-y:auto}.reference-ui .notebook-reading.reference-pages-open .page-drawer{position:absolute;left:0;top:0;bottom:0;width:245px;height:auto;z-index:45;box-shadow:8px 0 24px #193e7326;background:#fff}.reference-ui .notebook-reading.reference-pages-open #page-panel{width:245px;height:100%}.reference-ui .notebook-reading.reference-pages-open #notes{display:block;overflow:auto}.reference-ui .notebook-reading.reference-pages-open .note-card{width:100%;min-width:0}.reference-ui .notebook-reading.reference-pages-open #toggle-pages{display:none}.reference-more-panel{right:0;width:290px}}
@media print{.reference-header,.reference-tool-strip,.reference-options,.reference-search-dialog{display:none!important}}

/* Compact vector icons; all tools remain together in the same row. */
.reference-ui .reference-tool-strip{min-height:60px;padding:6px 10px;gap:6px}
.reference-ui .reference-tool-strip>.toolbar-main.ie-real-toolbar{gap:4px!important;overscroll-behavior-x:contain}
.reference-ui .reference-tool-strip .ie-toolbar-item:not(details),.reference-ui .reference-tool-strip .ie-toolbar-item>summary{width:44px!important;min-width:44px!important;height:44px;min-height:44px;padding:7px!important;border-radius:11px}
.reference-tool-icon{width:28px;height:28px}
.reference-tool-icon svg{width:24px!important;height:24px!important;shape-rendering:geometricPrecision}
.reference-tool-icon svg:not(:has([fill="#37c7ce"])){stroke-width:2}
.reference-leading,.reference-trailing{gap:3px}
.reference-leading>button,.reference-trailing>button,.reference-more>summary{width:44px;min-width:44px;height:44px;padding:8px}
.reference-leading svg,.reference-trailing svg{width:24px;height:24px;stroke-width:2;shape-rendering:geometricPrecision}
.reference-ui .toolbar .font-options,.reference-ui .toolbar .page-bounds-options,.reference-ui .toolbar .tool-feel,.reference-ui .toolbar .color-panel{color:#294c69;background:#fff;z-index:60}
@media(max-width:720px){.reference-ui .reference-tool-strip{padding:5px;gap:3px}.reference-leading,.reference-trailing{gap:1px}.reference-leading>button,.reference-trailing>button,.reference-more>summary{width:40px;min-width:40px}.reference-ui .toolbar .font-options,.reference-ui .toolbar .page-bounds-options,.reference-ui .toolbar .tool-feel,.reference-ui .toolbar .color-panel{position:absolute;top:calc(100% + 8px);left:8px;right:8px;width:auto;max-width:none;margin:0}}

/* Shared features live inside their main tool instead of duplicate buttons. */
#pens-menu .pen-color-controls{order:1}
#pens-menu .pen-embedded-settings{flex:0 0 100%;order:2;position:static;width:100%}
#pens-menu .pen-embedded-settings>summary{width:100%;display:flex;align-items:center;justify-content:flex-start;gap:8px;min-height:44px;border:1px solid #c9ddea!important;border-radius:8px;padding:8px;color:#315a7d;background:#f6fbff}
#pens-menu .pen-embedded-settings>summary:after{display:none}
#pens-menu .pen-embedded-settings>summary svg{width:23px;height:23px}
.reference-ui .toolbar #pens-menu .pen-embedded-settings>.tool-feel{position:static;width:100%;max-width:none;margin-top:7px;box-shadow:none}
#text-menu .text-embedded-font{grid-column:1/-1;position:static;border-top:1px solid #d6e4ed;padding-top:9px}
#text-menu .text-embedded-font>summary{display:flex;align-items:center;gap:10px;min-height:44px;width:100%;padding:8px;border:1px solid #c9ddea;border-radius:8px;background:#f6fbff;color:#315a7d;font-size:14px}
.reference-ui .toolbar #text-menu .text-embedded-font>.font-options{position:static;width:100%;max-width:none;display:grid;grid-template-columns:1fr 1fr;box-shadow:none;margin-top:7px}
.reference-ui .toolbar #delete-menu>.page-delete-options{position:absolute;top:calc(100% + 8px);right:8px;max-width:calc(100vw - 16px);color:#315a7d;background:white}

/* Keep the drawer's collapse handle centered on its vertical outer edge. */
.reference-ui .notebook-reading.reference-pages-open #toggle-pages{display:grid;position:absolute;top:50%;bottom:auto;right:-31px;transform:translateY(-50%);width:32px;height:58px;min-height:58px;padding:4px;border:1px solid #b4d0e1;border-left:0;border-radius:0 10px 10px 0;z-index:46;box-shadow:3px 2px 8px #3e69842a}
.reference-ui .notebook-reading.reference-pages-open #toggle-pages svg{width:20px;height:24px;transform:none}

/* Keep the drawer mounted so both opening and closing animate. */
.reference-ui .notebook-reading .page-drawer{display:block;width:0;visibility:hidden;pointer-events:none;transition:width .8s cubic-bezier(.4,0,.2,1),visibility 0s linear .8s}
.reference-ui .notebook-reading.reference-pages-open .page-drawer{width:var(--page-panel-width);visibility:visible;pointer-events:auto;transition:width .8s cubic-bezier(.4,0,.2,1),visibility 0s}
.reference-ui .notebook-reading #page-panel{transition:transform .8s cubic-bezier(.4,0,.2,1)}
.reference-ui .notebook-reading #toggle-pages{display:grid;position:absolute;top:50%;bottom:auto;right:-31px;transform:translateY(-50%);width:32px;height:58px;min-height:58px;padding:4px;border:1px solid #b4d0e1;border-left:0;border-radius:0 10px 10px 0;z-index:46}
.reference-ui .notebook-reading #toggle-pages svg{width:20px;height:24px;transform:none}
.reference-ui .notebook-reading .page-drawer,.reference-ui .notebook-reading .page-panel-clip{min-height:0}
.reference-ui .notebook-reading #page-panel{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.reference-ui .notebook-reading #page-panel>.list-heading,.reference-ui .notebook-reading #page-panel>.list-subtitle,.reference-ui .notebook-reading #page-panel>.list-footer{flex-shrink:0}
.reference-ui .notebook-reading #notes{display:block;flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;touch-action:pan-y pinch-zoom;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-gutter:stable;padding:4px 4px 12px}
.reference-ui .notebook-reading #notes .note-card{touch-action:pan-y pinch-zoom}
.reference-ui .notebook-reading .note-list-item{width:100%;min-width:0;margin:0 0 8px}
.reference-ui .notebook-reading .note-list-item>.note-card{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;min-width:0;height:auto;padding:7px 28px 7px 10px;min-height:0;background:transparent;border:1px solid transparent;box-shadow:none}
.reference-ui .notebook-reading .note-card.active{border-color:#5daecc;background:#e9f5fc}
.reference-ui .notebook-reading .note-card>.category,.reference-ui .notebook-reading .note-card>p,.reference-ui .notebook-reading .note-card>.card-bottom,.reference-ui .notebook-reading .note-card>.card-star{display:none!important}
.sidebar-page-sheet{display:block;order:0;width:100%;max-width:108px;aspect-ratio:3/4;overflow:hidden;border:1px solid #ccd9e4;border-radius:3px;background:#fffdf8;box-shadow:2px 4px 9px #284e6d20}
.sidebar-page-sheet>img{display:block;width:100%;height:100%;object-fit:contain;object-position:top;background:#fffdf8}
.sidebar-page-number{order:1;font-size:11px;font-weight:700;color:#315a7d}
.reference-ui .notebook-reading .note-card>strong{order:2;max-width:100%;font-size:11px;text-align:center;color:#607b91;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
@media(max-width:720px){
 .reference-ui .notebook-reading .page-drawer{position:absolute;left:0;top:0;bottom:0;width:245px;height:auto;z-index:45;background:#fff;transform:translateX(-100%);transition:transform .8s cubic-bezier(.4,0,.2,1),visibility 0s linear .8s}
 .reference-ui .notebook-reading.reference-pages-open .page-drawer{width:245px;transform:translateX(0);transition:transform .8s cubic-bezier(.4,0,.2,1),visibility 0s}
 .reference-ui .notebook-reading #page-panel{width:245px;height:100%;transform:none}
 .reference-ui .notebook-reading .note-list-delete{top:10px;right:4px}
}

.sidebar-page-attachment{order:3;max-width:100%;font-size:10px;color:#557b91;overflow-wrap:anywhere;text-align:center}