/* The paper fills its available stage; controls stay anchored outside it. */
.tool-tray .clear-ink-button,.rail-rotate{width:44px;min-width:44px;height:44px;padding:0;display:grid;place-items:center}
.clear-ink-button svg{width:20px;height:20px;stroke-width:1.6}
.rail-rotate svg{width:22px;height:22px;stroke-width:1.6}
.phone-mode-hint{display:none}
#page-number{min-width:44px;min-height:44px;padding:0;display:grid;place-items:center;line-height:1;touch-action:manipulation;-webkit-user-select:none;-webkit-touch-callout:none}
#page-number:focus-visible,#page-number:active{opacity:1;transition:none}
#page-footer{position:relative;top:auto;left:50%;transform:translateX(-50%);width:min(100%,520px);margin-top:10px;display:block;opacity:1}
.page-controls{display:grid;grid-template-columns:44px minmax(0,1fr) auto 44px 44px 44px 44px;align-items:center;gap:4px}
#notebook-title{max-width:100%;min-width:0;height:44px;padding:5px 4px;display:flex;align-items:center;justify-content:flex-start;text-align:left;color:var(--rail-ink,#111);opacity:.72;overflow:hidden;white-space:nowrap}
#notebook-title-text{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.15}
#cloud-status,#cloud-status[data-state=saving]{position:relative;opacity:1}
#cloud-status::after{content:'';position:absolute;right:7px;top:7px;width:8px;height:8px;border-radius:50%;background:#7f887f;pointer-events:none}
#cloud-status[data-state=saved]::after{background:#4d8b62;box-shadow:0 0 0 3px #4d8b6214,0 0 5px #4d8b6233}
#cloud-status[data-state=offline]::after{background:#b28131}
#cloud-status:is([data-state=error],[data-state=conflict],[data-state=signed-out])::after{background:#b95149}
#save-warning{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
#save-warning button{margin-left:0;min-height:32px}
#page-count{white-space:nowrap;min-width:36px;opacity:.65;text-align:center;font-size:11px}
#page-footer #cloud-status,#page-footer #show-overview,#page-footer #rotate-view,#page-footer .page-nav-button{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border-radius:12px}
#rotate-view svg{width:22px;height:22px;stroke-width:1.6}
#page-footer .page-nav-label{display:none}
.dark #page-footer .quiet-button:focus-visible,.dark .rail-rotate:focus-visible{outline-color:#fff!important}
:root{--paper-stage-width:calc(100vw - 192px);--paper-stage-height:max(120px,calc(100dvh - 80px));--paper-fit-ratio:calc(210 / 297);--paper-view-angle:0deg}
:root[data-size=letter]{--paper-fit-ratio:calc(8.5 / 11)}
:root,:root[data-size=letter]{--sheet-width:min(var(--paper-stage-width),calc(var(--paper-stage-height) * var(--paper-fit-ratio)))}
:root:is([data-view-rotation="90"],[data-view-rotation="270"]){--sheet-width:min(var(--paper-stage-height),calc(var(--paper-stage-width) * var(--paper-fit-ratio)))}
:root[data-view-rotation="90"]{--paper-view-angle:90deg}
:root[data-view-rotation="180"]{--paper-view-angle:180deg}
:root[data-view-rotation="270"]{--paper-view-angle:270deg}
:root{--paper-frame-width:var(--sheet-width);--paper-frame-height:calc(var(--sheet-width) / var(--paper-fit-ratio))}
:root:is([data-view-rotation="90"],[data-view-rotation="270"]){--paper-frame-width:calc(var(--sheet-width) / var(--paper-fit-ratio));--paper-frame-height:var(--sheet-width)}
#workspace{width:var(--paper-frame-width)}
#paper-view{width:100%;height:var(--paper-frame-height);aspect-ratio:auto}
#paper{position:absolute;left:50%;top:50%;width:var(--sheet-width);height:auto;transform-origin:50% 50%;transform:translate(-50%,-50%) rotate(var(--paper-view-angle))}
#mode-hint,body.draw #mode-hint{position:relative;top:auto;left:50%;transform:translateX(-50%);width:min(100%,520px);max-width:none;margin:10px 0 0;text-align:center;font-size:10px;line-height:1.5;opacity:.6}
@media(min-width:641px){
 #mode-hint,body.draw #mode-hint{position:absolute;left:calc(100% + 16px);top:340px;transform:none;width:72px;max-width:72px;margin:0;text-align:left}
}
@media(min-width:641px) and (max-height:540px){#desk{padding:0 84px}}
@media(max-width:640px),(pointer:coarse) and (max-width:1024px){
 #desk{padding:34px 8px calc(68px + env(safe-area-inset-bottom,0px));align-items:center}
 #rail{position:fixed;top:auto;left:50%;transform:translateX(-50%);flex-direction:row;z-index:20;gap:6px;bottom:calc(12px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 4px)}
 #rail>.icon-button{width:44px;height:44px}
 #rail .tool-tray{display:grid;grid-template-columns:repeat(6,44px);gap:0;padding:3px;max-width:none}
 #rail .tool-tray .tool-divider{display:none}
 #rail .tool-tray [data-action=color],#rail .tool-tray [data-action=highlighter],#rail .tool-tray [data-action=redo]{display:none}
 #rail .tool-tray[data-brush-tool=highlighter] [data-action=pen]{display:none}
 #rail .tool-tray[data-brush-tool=highlighter] [data-action=highlighter]{display:grid}
 #save-warning button{min-height:44px}
 .phone-extra{display:flex!important}
 #page-footer{width:min(calc(100vw - 16px),520px);z-index:19}
 .page-controls{grid-template-columns:44px minmax(0,1fr) 44px 44px 44px 44px}
 #page-count{display:none}
 #page-number{top:-38px;font-size:20px;justify-items:start;padding-left:2px}
 #mode-hint,body.draw #mode-hint{display:none}
 .phone-mode-hint{display:block;margin:0}
 .panel{max-height:calc(100dvh - 132px);width:min(320px,calc(100vw - 24px))}
 :root{--paper-stage-width:calc(100vw - 16px);--paper-stage-height:max(40px,calc(100dvh - 156px - env(safe-area-inset-bottom,0px)))}
}