/* Text accessibility rules. Keep in sync with DESIGN_GUIDELINES.md. */
:root{--text-primary:#263e35;--text-secondary:#526457;--text-on-brand:#ffffff;--text-body:1rem;--text-control:.9375rem;--text-small:.875rem;--muted:var(--text-secondary)}
html{font-size:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-size:var(--text-body);line-height:1.5;color:var(--text-primary);display:flex;flex-direction:column;height:100vh;height:100dvh;min-width:0}
button,input,textarea,select{font:inherit;line-height:1.5}
button,button:has(.icon),nav button,nav button:has(.icon),.documentbar>button.secondary,.documentbar>button:has(.icon),.headright button,.headright button.secondary,#readtext,#ocr,#ocrlang{font-size:var(--text-control);line-height:1.5}
button{overflow-wrap:anywhere;white-space:normal}
button:has(.icon){min-height:2.75rem}
button:disabled,.secondary:disabled{opacity:1;color:var(--text-secondary);background:#f3f5f0;cursor:default}
.primary:disabled{color:var(--text-secondary);background:#e5ebe1;border-color:#718174}
button.primary:not(:disabled){color:var(--text-on-brand)}
header{height:auto;min-height:5.1875rem;padding-block:1rem;gap:1rem;flex-shrink:0;flex-wrap:wrap}
.brand{font-size:1.625rem;line-height:1.3;letter-spacing:-.04em}
.headright{flex-wrap:wrap;gap:.75rem}.privacy{font-size:var(--text-small);color:var(--text-secondary)}
.app{height:auto;min-height:0;flex:1}
aside{width:15.5rem;min-height:0;padding:1.5rem 1rem 1rem}
.asidehead{font-size:var(--text-small);line-height:1.5;letter-spacing:.05em;gap:.5rem;flex-wrap:wrap;color:var(--text-primary)}
.asidehead span{font-size:var(--text-small);color:var(--text-secondary)}
.thumb span{font-size:var(--text-small);line-height:1.5;color:var(--text-primary)}
#blank:has(.icon),.add{font-size:var(--text-control);line-height:1.5;padding:.625rem}
.asidefoot{font-size:var(--text-small);line-height:1.6;letter-spacing:.02em;color:var(--text-secondary);overflow-wrap:anywhere}
.asidefoot small{font-size:var(--text-small);color:var(--text-secondary)}
main{overflow:auto;min-width:0}.documentbar,nav,footer{flex-shrink:0}
.documentbar{padding:1rem;gap:.75rem;min-height:5rem;align-items:center}
.documentbar>div:first-child{min-width:0;flex:1 1 16rem;gap:.75rem}
.documentbar strong{font-size:var(--text-body);line-height:1.5;overflow-wrap:anywhere;white-space:normal;max-width:none}
.tag{font-size:var(--text-small);line-height:1.5;color:var(--text-secondary)}
.zoom span{font-size:var(--text-control);line-height:1.5;min-width:3.5rem;text-align:center}
.zoom button:has(.icon){min-width:2.75rem;min-height:2.75rem}
nav{padding:.75rem 1rem;gap:.75rem;min-height:0}
.tools{gap:.25rem;flex:1 1 auto;min-width:0}.tools button:has(.icon){min-height:2.75rem}
nav>div:last-child{flex-wrap:wrap;gap:.25rem}
.size{font-size:var(--text-small);color:var(--text-secondary);line-height:1.5;gap:.5rem}
.size input{font-size:var(--text-control);color:var(--text-primary);width:4rem;min-height:2.5rem;background:white}
#ocrlang{max-width:14rem;min-height:2.75rem;color:var(--text-primary)}
.workspace{min-height:16rem;flex:1 0 16rem;padding:2rem}
#empty{max-width:42rem;width:100%;min-width:0;padding:1rem;overflow-wrap:anywhere}
.eyebrow{font-size:var(--text-small);line-height:1.5;letter-spacing:.08em;color:var(--text-secondary)}
h1{font-size:clamp(2rem,3.5vw,2.75rem);line-height:1.25;letter-spacing:-.035em}
#empty p{font-size:var(--text-body);line-height:1.6;color:var(--text-secondary)}
#empty .dropcopy{font-size:var(--text-small)!important;color:var(--text-secondary)}
.sample,.sample:has(.icon){font-size:var(--text-control);color:var(--green);line-height:1.5;max-width:100%}
.features{font-size:var(--text-small);line-height:1.5;flex-wrap:wrap;justify-content:center;gap:1rem}
.features>span{color:var(--text-secondary);flex-wrap:wrap}
footer{height:auto;min-height:3rem;padding:.75rem 1rem;gap:.75rem;flex-wrap:wrap;color:var(--text-secondary);font-size:var(--text-small);line-height:1.5}
footer span:last-child{font-size:var(--text-small);line-height:1.5;letter-spacing:.04em}
footer #hint{overflow-wrap:anywhere;flex:1 1 20rem}
dialog,#editdialog{width:min(36rem,calc(100% - 2rem));max-height:calc(100dvh - 2rem);overflow:auto;padding:1.5rem;font-size:var(--text-body);line-height:1.5}
dialog h2{font-size:1.5rem;line-height:1.3;overflow-wrap:anywhere;margin:0 0 1rem}
dialog p,#editdialog p,#readstatus{font-size:var(--text-body);line-height:1.6;color:var(--text-secondary)}
textarea,#readvalue{font-size:var(--text-body);line-height:1.6;color:var(--text-primary);background:#fff;max-width:100%}
input::placeholder,textarea::placeholder{color:var(--text-secondary);opacity:1}
.readactions,dialog form>div,.editoptions{flex-wrap:wrap;gap:.75rem}
#editruns{max-height:14rem}#editruns button{font-size:var(--text-control);line-height:1.5;color:var(--text-primary);background:white;overflow-wrap:anywhere}
#toast{font-size:var(--text-body);line-height:1.5;color:#fff;background:var(--text-primary);max-height:50dvh;overflow:auto}
#ocrprogress{font-size:var(--text-body);line-height:1.5;min-width:0;width:min(36rem,calc(100% - 2rem));flex-wrap:wrap}
#ocrmessage{overflow-wrap:anywhere;flex:1 1 12rem}
.processing aside,.processing nav{opacity:1}
/* Editor content is authored by the user and preserves document typography. */
#paper{line-height:0}
@media(max-width:950px){aside{width:12rem;padding:1rem .75rem}.privacy{display:none}}
@media(max-width:620px){
 header{padding:1rem;gap:.75rem}.brand{font-size:1.5rem}.headright{width:100%;gap:.5rem}.headright button{flex:1 1 auto}
 aside{width:6.5rem;padding:1rem .5rem}.asidehead{font-size:var(--text-small);letter-spacing:0;overflow-wrap:anywhere}
 .thumb{width:100%;max-width:8.75rem;padding:.375rem}
 #blank:has(.icon){font-size:var(--text-small);padding:.5rem .25rem;overflow-wrap:normal}
 .asidehead span,.asidefoot{display:none}
 .documentbar{padding:.75rem;gap:.5rem}.documentbar>div:first-child{flex-basis:100%;min-width:0}.documentbar strong{max-width:none;white-space:normal}
 .tools button span{display:none}.tools button:has(.icon){min-width:2.75rem;min-height:2.75rem}
 nav{padding:.5rem;gap:.5rem}.workspace{padding:1rem;min-height:18rem;flex-basis:18rem}#empty{padding:.5rem}
 .features{gap:.75rem}.size{margin-left:0}
 .emptyicon{margin-bottom:1.5rem}footer{padding:.75rem;font-size:var(--text-small)}
}
select:disabled,input:disabled{opacity:1;color:var(--text-secondary);-webkit-text-fill-color:var(--text-secondary);background:#f3f5f0}
@media(max-width:1200px){.documentbar>div:first-child{flex-basis:100%}}
/* Let enlarged sidebar text take space instead of colliding with the empty-state action. */
aside{overflow:auto}
.asidehead,.asidefoot,#blank{flex-shrink:0}
aside:has(#pages:empty) #blank{position:static;transform:none;align-self:center;width:100%;margin-block:auto}
aside:has(#pages:empty) .asidefoot{margin-top:0}
#ocrlang{max-width:100%;min-width:0}
.documentbar .zoom{gap:.25rem;flex-wrap:wrap}
/* Override the legacy phone action-row size rather than shrinking action labels. */
nav>div:last-child button,nav>div:last-child button:has(.icon){font-size:var(--text-control);line-height:1.5}
.export-field{display:flex;flex-direction:column;gap:.375rem;margin-top:1rem;font-size:var(--text-body);color:var(--text-primary)}
.export-field input,.export-field select{width:100%;min-width:0;padding:.625rem .75rem;font-size:var(--text-body);border:2px solid var(--control-border);border-radius:7px;color:var(--text-primary);background:#fff;min-height:2.75rem}
.export-check{display:flex;align-items:flex-start;gap:.625rem;margin-top:1rem;font-size:var(--text-body)}
.export-check input{width:1.25rem;height:1.25rem;flex-shrink:0;margin:.15rem 0;accent-color:var(--green)}
#exportdialog .export-help{font-size:var(--text-small);line-height:1.6;margin:.5rem 0 1rem;color:var(--text-secondary)}
#exporterror{color:#8a2525;background:#fff1ed;border:2px solid #8a2525;border-radius:7px;padding:.75rem;font-size:var(--text-body)}
#exportprogress{font-size:var(--text-body);color:var(--text-primary)}
[hidden]{display:none!important}
#exportform>div:not(.readactions):not(.export-grid){display:block}
#exportdialog{width:min(42rem,calc(100% - 2rem))}
#exportform>.export-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem}
#exportadvanced{margin-top:1rem;border-top:1px solid var(--control-border);padding-top:.5rem}
#exportadvanced summary{cursor:pointer;font-size:var(--text-control);font-weight:600;color:var(--text-primary);padding:.5rem 0;min-height:2.75rem}
#exportadvanced summary:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
@media(max-width:620px){#exportform>.export-grid{grid-template-columns:minmax(0,1fr);gap:0}}

#emptyundo{margin:.5rem 0 1.5rem}

/* Inset file-drop target: follows the empty workspace bounds with even padding. */
.workspace.is-empty{padding:1rem;align-items:stretch}
#empty{margin:0;max-width:none;width:100%;flex:1;align-self:stretch;min-width:0;min-height:0;display:flex;align-items:stretch;padding:1.5rem;border:2px dashed var(--control-border);border-radius:12px;overflow:auto}
.empty-content{margin:auto;width:100%;max-width:40rem;text-align:center}
.empty-content h1{margin:0 0 1rem}
#empty .empty-content>p{margin:0 0 1.25rem}
#empty .empty-content>.large{margin-top:0}
#empty .empty-content>.dropcopy{margin:1rem 0 0}
#emptyundo{margin:1rem 0 0}
.workspace.is-file-over #empty{border-color:var(--green);background:#e8f0e1;box-shadow:inset 0 0 0 2px var(--green)}
@media(max-width:620px){.workspace.is-empty{padding:.75rem}#empty{padding:1rem}.empty-content h1{font-size:2rem}}

/* Document sidebar: leave the expand control available in its collapsed rail. */
.asidehead .sidebar-title{font-weight:700;color:var(--text-primary);letter-spacing:.05em}
#togglesidebar{padding:.5rem;min-width:2.75rem;min-height:2.75rem;display:inline-flex;align-items:center;justify-content:center;margin-left:auto;flex-shrink:0}
#documentsidebar.sidebar-collapsed{width:4.25rem;padding:1rem .75rem}
#documentsidebar.sidebar-collapsed .sidebar-title,#documentsidebar.sidebar-collapsed #count,#documentsidebar.sidebar-collapsed #pages,#documentsidebar.sidebar-collapsed #blank{display:none}
#documentsidebar.sidebar-collapsed .asidehead{margin:0;justify-content:center}
#documentsidebar.sidebar-collapsed #togglesidebar{margin:0}
#documentsidebar.sidebar-collapsed #togglesidebar svg{transform:rotate(180deg)}
@media(max-width:620px){.asidehead .sidebar-title{display:block}#documentsidebar.sidebar-collapsed{width:3.75rem;padding:1rem .5rem}}

/* Compact sidebar control aligned with the title baseline row. */
#documentsidebar .asidehead{align-items:center;gap:.5rem}
#togglesidebar{width:2rem;min-width:2rem;height:2rem;min-height:2rem;padding:.25rem;align-self:center}
#togglesidebar .icon{width:20px;height:20px}
#documentsidebar.sidebar-collapsed #togglesidebar svg{transform:none}
#documentsidebar.sidebar-collapsed .sidebar-toggle-arrow{transform:translateX(29px) scaleX(-1)}

/* Shared left edge for the wordmark and Document heading. */
header{padding-left:1rem}
@media(max-width:950px){header{padding-left:.75rem}}
@media(max-width:620px){header{padding-left:.5rem}}

/* Header actions form one group, aligned with the inset file-drop frame. */
header{padding-right:1rem}
.headright{margin-left:auto;gap:.75rem;align-items:center;flex-wrap:nowrap}
.headright .privacy{margin-right:0}
@media(max-width:620px){header{padding-right:.75rem}.headright{justify-content:flex-end}.headright button{flex:0 0 auto}}

.header-identity{display:flex;align-items:center;gap:1rem;min-width:0;flex:1}
.header-identity .brand{flex-shrink:0}
#headerdocument{display:flex;align-items:center;gap:1rem;min-width:0}
.header-name-divider{height:1.5rem;width:1px;flex-shrink:0;background:var(--control-border)}
#headerdocument #filename{font-size:1rem;line-height:1.5;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:30vw}
@media(max-width:620px){.header-identity,#headerdocument{gap:.75rem}#headerdocument #filename{max-width:calc(100vw - 11rem)}}

.documentbar{justify-content:flex-end}

#togglesidebar{border:0;background:transparent;box-shadow:none}
#togglesidebar:hover:not(:disabled){background:var(--control-hover)}
#togglesidebar:active:not(:disabled){background:var(--control-pressed)}

.thumb-card{position:relative;width:140px;max-width:100%;margin:0 auto 19px}
.thumb-card .thumb{margin:0;width:100%}
.thumb-more{position:absolute;top:4px;right:4px;display:flex;align-items:center;justify-content:center;width:28px;height:28px;min-height:28px;padding:3px;border:0;border-radius:5px;background:#fff;color:var(--ink);box-shadow:0 1px 4px #0002}
.thumb-more:hover{background:var(--control-hover)}
.thumb-menu{position:absolute;right:4px;top:36px;z-index:10;background:white;border:2px solid var(--control-border);border-radius:7px;padding:4px;box-shadow:0 4px 12px #0002}
.thumb-menu button{border:0;min-height:40px;padding:6px 14px;color:#8a2525;white-space:nowrap;background:white}
.thumb-menu button:hover{background:#fff1ed}
@media(max-width:620px){.thumb-card{width:100%}.thumb-more{right:2px;top:2px}}

/* Shared modal dismissal control; reserve room so headings never overlap it. */
dialog{position:fixed}
dialog h2{padding-right:2.75rem}
dialog .modal-close{position:absolute;top:.75rem;right:.75rem;width:2rem;height:2rem;min-width:2rem;min-height:2rem;padding:.25rem;display:flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--text-primary);border-radius:5px;cursor:pointer}
dialog .modal-close svg{width:22px;height:22px}
dialog .modal-close:hover{background:var(--control-hover)}
dialog .modal-close:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}

.thumb-menu button{display:flex;align-items:center;gap:.5rem}
.thumb-menu button svg{flex-shrink:0}

footer{align-items:center;justify-content:flex-start}
#footerzoom{display:flex;align-items:center;gap:.25rem;flex-shrink:0}
#footerzoom button{border:0;background:transparent;padding:.375rem;min-width:2rem;min-height:2rem}
#footerzoom button:hover:not(:disabled){background:var(--control-hover)}
#footerzoom span{font-size:var(--text-control);min-width:3.5rem;text-align:center;letter-spacing:0;line-height:1.5}
.footer-divider{height:1.5rem;width:1px;background:var(--control-border);flex-shrink:0}
footer #hint{flex:1 1 12rem}

#headerdocument{gap:.5rem}
#headerdocument .header-name-divider{margin-right:.5rem}
#renamedocument{border:0;background:transparent;box-shadow:none;padding:.375rem;min-width:2rem;min-height:2rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
#renamedocument:hover{background:var(--control-hover)}
#documentnameinput{min-width:5rem;width:min(24rem,30vw);max-width:100%;padding:.375rem .5rem;border:2px solid var(--control-border);border-radius:5px;font-size:1rem;color:var(--ink);background:white}
@media(max-width:620px){#documentnameinput{width:calc(100vw - 12rem)}}

footer .privacy{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 0 auto;color:var(--text-secondary);font-size:var(--text-small);letter-spacing:0;flex-shrink:0}
footer .privacy span{font-size:inherit;letter-spacing:0}
footer .privacy .icon{width:18px;height:18px;flex-shrink:0}

/* Header owns the shared divider; avoid a doubled line above editing tools. */
#edittoolbar{border-top:0;margin-top:0}

.inline-text-frame.selected{outline:2px dotted var(--green);background:#e8f0e122}

.inline-text-frame .text-resize-handle{width:12px;height:12px;min-width:12px;min-height:12px;padding:0;border:2px solid var(--green);border-radius:2px;background:white}
.text-resize-handle.corner-nw{left:-6px;top:-6px;right:auto;bottom:auto;cursor:nwse-resize}
.text-resize-handle.corner-ne{right:-6px;top:-6px;left:auto;bottom:auto;cursor:nesw-resize}
.text-resize-handle.corner-sw{left:-6px;bottom:-6px;right:auto;top:auto;cursor:nesw-resize}
.text-resize-handle.corner-se{right:-6px;bottom:-6px;left:auto;top:auto;cursor:nwse-resize}
.inline-text-frame .text-move-handle{left:-32px;top:calc(50% - 12px)}

#textalignmenttoolbar{position:fixed;z-index:16;display:flex;gap:4px;padding:5px;background:white;border:2px solid var(--control-border);border-radius:8px;box-shadow:0 3px 12px #263e3526}
#textalignmenttoolbar button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;min-height:36px;padding:6px;border:0;background:transparent;border-radius:5px;color:var(--ink)}
#textalignmenttoolbar button:hover,#textalignmenttoolbar button[aria-pressed=true]{background:var(--control-pressed)}

#textalignmenttoolbar{align-items:center;max-width:calc(100vw - 16px);flex-wrap:wrap}
#textalignmenttoolbar .text-format-divider{width:1px;height:24px;background:var(--control-border);margin:0 5px}
#textalignmenttoolbar label{display:flex;align-items:center;gap:6px;margin:0 4px;font-size:14px;color:var(--text-primary)}
#textalignmenttoolbar input[type=color]{width:28px;height:28px}
#textalignmenttoolbar .size input{width:4rem;min-height:36px;padding:4px;border:2px solid var(--control-border);border-radius:5px;font-size:15px;color:var(--text-primary);background:white}

/* Export controls use the shared rounded 2.5-unit icon strokes. */
#exportdialog{--export-chevron:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23263e35%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E")}
#exportdialog select{appearance:none;-webkit-appearance:none;background-image:var(--export-chevron);background-repeat:no-repeat;background-position:right .75rem center;background-size:20px;padding-right:2.75rem;cursor:pointer}
#exportadvanced summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:.75rem}
#exportadvanced summary::-webkit-details-marker{display:none}
#exportadvanced summary::after{content:"";width:20px;height:20px;flex-shrink:0;background-image:var(--export-chevron);background-repeat:no-repeat;background-size:20px}
#exportadvanced[open] summary::after{transform:rotate(180deg)}
#exportflatten{appearance:none;-webkit-appearance:none;border:2px solid var(--control-border);border-radius:4px;background:white;cursor:pointer}
#exportflatten:checked{background-color:var(--green);border-color:var(--green);background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m5%2012%204%204%2010-10%22%2F%3E%3C%2Fsvg%3E");background-size:100%;background-position:center}
#exportflatten:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}