/* © 2026 Blixild, blixild.com */
/* The OCR PDF to Word converter page's own rules (site-en/ocr-pdf-to-word.html and
   site/pdf-na-word-ocr.html), after styles.css and lens-calculator.css. Site colours only. */
/* the page shows and hides its parts with the hidden attribute; .btn's display must not win over it */
#main [hidden]{display:none!important}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:150px;
  padding:24px;border:1.5px dashed #9AA59D;background:var(--paper);text-align:center;cursor:pointer;
  transition:border-color .15s,background .15s}
.drop:hover,.drop.over,.drop:focus-within{border-color:var(--signal);background:var(--wax)}
.drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.drop b{font-family:var(--sans);font-size:17px;font-weight:600}
.drop span{font-size:14px;color:var(--muted)}
#ocr-model-note{margin-top:14px}
.sample{margin-top:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
#ocr-message:not(:empty){margin-top:14px;color:#8A3B2E}
.ocr-status{min-height:1.5em;margin:4px 0 12px;font-size:16px}
.ocr-status[data-kind="done"]{color:var(--signal)}
.ocr-status[data-kind="error"]{color:#8A3B2E}
.ocr-progress{height:6px;background:var(--line);overflow:hidden;margin-bottom:16px}
.ocr-progress span{display:block;height:100%;width:0;background:var(--signal);transition:width .3s}
.ocr-progress.loading span{background:repeating-linear-gradient(90deg,var(--signal) 0 18px,var(--active) 18px 36px)}
.ocr-run{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
#ocr-bar{margin-top:20px}
#ocr-bar b{display:block;font-family:var(--sans);font-size:22px;font-weight:600;color:var(--ink);margin-top:4px}
/* review: wider than the tool's column; three views in tabs: the document as read, page by page beside the scans,
   the Markdown */
section:has(#ocr-pageview) .wrap.tool{--col:1120px}
.tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--line);margin-top:6px}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:9px 16px;font-family:var(--sans);
  font-size:15px;color:var(--muted);cursor:pointer;margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink);font-weight:600}
.reviewpanel{border:1px solid var(--line);border-top:0;padding:28px}
#ocr-docpanel{background:var(--wax);max-height:84vh;overflow:auto}
#ocr-sourcepanel{background:#fff;max-height:84vh;overflow:auto}
#ocr-sourcepanel pre{margin:0;white-space:pre-wrap;word-break:break-word;font-family:var(--mono);font-size:12.5px;line-height:1.55}
.pagenav{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.pagenav button{padding:6px 12px;font-size:14px}
.pagenav button[disabled]{opacity:.35;cursor:default}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted);margin-bottom:14px}
.legend .key::before{content:"";display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-1px;
  border:2px solid var(--k);background:color-mix(in srgb,var(--k) 16%,transparent)}
.review-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px;align-items:start}
.pageview{position:relative;border:1px solid var(--line);background:#fff;line-height:0}
.pageview img{width:100%;height:auto;display:block}
.blk{position:absolute;border:1.5px solid var(--k);background:color-mix(in srgb,var(--k) 10%,transparent)}
.blk.title,.key.title{--k:#7A4FA0}
.blk.text,.key.text{--k:#3E7B58}
.blk.table,.key.table{--k:#C07A1A}
.blk.picture,.key.picture{--k:#2F6DB5}
.blk.caption,.key.caption{--k:#B0457A}
.blk.furniture,.key.furniture{--k:#8C948E}
/* the document as read: a white sheet in the page's own type, as a reader of the original would expect it */
.doc{background:#fff;border:1px solid var(--line);padding:44px 52px;color:var(--ink);font-family:var(--serif);
  font-size:17px;line-height:1.6;overflow-wrap:break-word}
#ocr-document{max-width:780px;margin:0 auto;padding:60px 72px}
.doc>:first-child{margin-top:0}
.doc h2,.doc h3,.doc h4,.doc h5{font-family:var(--sans);font-weight:600;color:var(--ink);line-height:1.25;letter-spacing:0}
.doc h2{font-size:29px;margin:0 0 18px}
.doc h3{font-size:21px;margin:30px 0 10px}
.doc h4,.doc h5{font-size:17.5px;margin:24px 0 8px}
.doc p{margin:0 0 14px}
.doc p.note{font-size:14.5px;color:var(--muted)}
.doc p.caption{font-size:15px;color:var(--muted);margin:-4px 0 20px}
.doc ul,.doc ol{margin:0 0 14px;padding-left:24px}
.doc li{margin:0 0 5px}
.doc figure{margin:22px 0 12px}
.doc figure img{display:block;max-width:100%;height:auto}
.doc .tablewrap{overflow-x:auto;margin:16px 0 20px}
.doc table{border-collapse:collapse;width:100%;font-size:15.5px;line-height:1.45}
.doc td,.doc th{border:1px solid var(--line);padding:7px 11px;vertical-align:top;text-align:left}
.doc th,.doc thead td{background:var(--wax);font-family:var(--sans);font-size:14.5px;font-weight:600}
.doc .pagemark{display:flex;align-items:center;gap:12px;margin:34px 0 26px;font-family:var(--sans);font-size:12.5px;
  color:var(--muted)}
.doc .pagemark::before,.doc .pagemark::after{content:"";flex:1;border-top:1px solid var(--line)}
body.ocr-busy .drop{opacity:.55;pointer-events:none}
/* touch targets at least 44 px on phones (docs/TOOLBOX-WORKFLOW.md, Layout), the site's small button included */
@media (max-width:620px){
  .tabs button,.pagenav button,#ocr-sample,#ocr-continue,#ocr-stop{min-height:44px}
}
@media (max-width:900px){
  .review-grid{grid-template-columns:1fr}
  #ocr-docpanel,#ocr-sourcepanel{max-height:none}
}
@media (max-width:620px){
  .drop{min-height:120px}
  .reviewpanel{padding:14px}
  .doc,#ocr-document{padding:24px 20px;font-size:16px}
  .doc h2{font-size:24px}
  .doc h3{font-size:19px}
}
/* printing once a document has been read (Print or save as PDF, or the browser's own print): the document alone, in
   the review's type, without the sheet's frame */
@media print{
  @page{margin:18mm 20mm}
  body.ocr-has-doc{background:#fff}
  body.ocr-has-doc>*:not(main),
  body.ocr-has-doc #main>*:not(section:has(#ocr-document)),
  body.ocr-has-doc section:has(#ocr-document) .wrap>*:not(#ocr-docpanel){display:none!important}
  body.ocr-has-doc #main,body.ocr-has-doc section:has(#ocr-document),body.ocr-has-doc section:has(#ocr-document) .wrap{
    margin:0;padding:0;border:0;width:auto;max-width:none}
  body.ocr-has-doc #main #ocr-docpanel{display:block!important;max-height:none;overflow:visible;border:0;padding:0;
    background:none}
  #ocr-document{max-width:none;margin:0;padding:0;border:0;font-size:11pt;line-height:1.5}
  #ocr-document h2{font-size:20pt}
  #ocr-document h3{font-size:14pt}
  #ocr-document h4,#ocr-document h5{font-size:12pt}
  #ocr-document table{font-size:10pt}
  #ocr-document th,#ocr-document thead td{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #ocr-document .pagemark{display:none}
  #ocr-document h2,#ocr-document h3,#ocr-document h4,#ocr-document h5{break-after:avoid}
  #ocr-document figure,#ocr-document tr,#ocr-document p.caption{break-inside:avoid}
}