/* Document OCR — page-specific pieces on top of module.css + shell.css.
   Same tokens as every module page (--ac, --panel, --line, Poppins/Inter). */

/* once a document is open the viewer needs the full width, with the upload
   panel as a slim bar above it rather than a sticky column beside it */
.rgs-work.ocr-work.has-output{ grid-template-columns:1fr; max-width:1400px; }
.rgs-work.ocr-work.has-output .panel{ position:static; }
.ocr-work.is-open #pickBox, .ocr-work.is-open #pre, .ocr-work.is-open #ocrPanel > .hint{ display:none; }
.ocr-work.is-open #ocrPanel{ padding:1rem 1.3rem; }
.ocr-work.is-open #ocrPanel h2{ display:none; }
/* with a document open the panel holds only "Recent documents" — or nothing */
.ocr-work.is-open .ocr-recent{ margin-top:0; padding-top:0; border-top:0; }
.ocr-work.is-open #ocrPanel:not(:has(#recent:not([hidden]))){ display:none; }

.ocr-drop{ display:flex; flex-direction:column; gap:.35rem; align-items:center; justify-content:center;
  min-height:150px; font-size:.95rem; }
.ocr-drop small{ color:var(--muted); font-size:.8rem; }
.ocr-drop:focus-visible{ outline:none; border-color:var(--ac); box-shadow:0 0 0 3px var(--ac-soft); }

/* preflight */
.ocr-file{ display:flex; align-items:center; gap:.9rem; padding:.85rem 1rem; border:1px solid var(--line);
  border-radius:12px; background:var(--panel-2); }
.ocr-file-ic{ width:42px; height:42px; border-radius:10px; display:grid; place-items:center; flex:none;
  color:#fff; background:var(--ac); font-size:1.2rem; }
.ocr-file-meta{ flex:1; min-width:0; display:flex; flex-direction:column; }
.ocr-file-meta b{ font-family:var(--disp); font-weight:600; color:var(--ink); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.ocr-file-meta span{ font-size:.82rem; color:var(--muted); }
.ocr-file .btn-mini{ margin:0; flex:none; }
.ocr-thumbs{ display:flex; gap:.55rem; overflow-x:auto; padding:.3rem .1rem .7rem; margin:.4rem 0 .6rem;
  scroll-snap-type:x proximity; }
.ocr-thumb{ flex:none; width:78px; scroll-snap-align:start; text-align:center; font-family:var(--mono);
  font-size:.66rem; color:var(--muted); }
.ocr-thumb .im{ width:78px; height:100px; border-radius:6px; border:1px solid var(--line);
  background:var(--panel-2) center/cover no-repeat; position:relative; overflow:hidden; }
.ocr-thumb .im i{ position:absolute; left:4px; bottom:4px; font-style:normal; font-size:.58rem;
  padding:.05rem .3rem; border-radius:4px; background:rgba(20,24,50,.72); color:#fff; }
.ocr-thumb.off .im{ opacity:.35; }
.ocr-opts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 1rem; margin-top:.4rem; }
@media(max-width:640px){ .ocr-opts{ grid-template-columns:1fr; } }
.ocr-note{ font-family:var(--mono); font-size:.7rem; color:var(--muted); margin-left:.2rem; }
.ocr-quote{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem 1.1rem; margin:.6rem 0 .2rem;
  padding:.8rem 1rem; border-radius:12px; background:var(--ac-soft); color:var(--ink-soft); font-size:.9rem; }
.ocr-quote b{ font-family:var(--disp); color:var(--ink); font-size:1.05rem; }
.ocr-quote .warn-t{ flex-basis:100%; font-size:.84rem; }

/* recent documents */
.ocr-recent{ margin-top:1.2rem; padding-top:1rem; border-top:1px dashed var(--line); }
.ocr-recent h3{ font-family:var(--disp); font-weight:600; font-size:.9rem; color:var(--ink-soft); margin-bottom:.5rem; }
.ocr-recent ul{ list-style:none; display:flex; flex-direction:column; gap:.35rem; }
.ocr-recent li a{ display:flex; gap:.7rem; align-items:baseline; padding:.45rem .6rem; border-radius:9px;
  font-size:.86rem; color:var(--ink-soft); }
.ocr-recent li a:hover{ background:var(--panel-2); color:var(--ink); }
.ocr-recent li b{ flex:1; min-width:0; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ocr-recent li small{ font-family:var(--mono); font-size:.7rem; color:var(--muted); }

/* the open document */
.ocr-viewer{ display:flex; flex-direction:column; gap:1rem; }
.ocr-head{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.2rem; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-1); padding:1rem 1.2rem; }
.ocr-head h2{ font-family:var(--disp); font-weight:600; font-size:1.05rem; color:var(--ink); margin:0;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 220px; }
.ocr-head .btn-mini{ margin:0; }
.ocr-prog{ flex-basis:100%; display:flex; flex-direction:column; gap:.4rem; }
.ocr-prog .top{ display:flex; justify-content:space-between; font-size:.84rem; color:var(--ink-soft); }
.ocr-prog .top b{ font-family:var(--disp); color:var(--ink); }
.ocr-prog .bar > i{ transition:width .5s ease; }
.ocr-stats{ flex-basis:100%; display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:.6rem; }
.ocr-flags{ flex-basis:100%; display:flex; flex-wrap:wrap; gap:.45rem; }
.ocr-dl{ flex-basis:100%; display:flex; flex-wrap:wrap; gap:.5rem; }
.ocr-dl a{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--disp); font-weight:600;
  font-size:.82rem; color:var(--ink-soft); background:var(--panel-2); border:1px solid var(--line);
  border-radius:10px; padding:.5rem .85rem; transition:.15s; }
.ocr-dl a:hover{ border-color:var(--ac); color:var(--ac); }
.ocr-dl a.main{ background:var(--ac); color:#fff; border-color:var(--ac); }
.ocr-dl a.main:hover{ filter:brightness(1.06); color:#fff; }
.ocr-dl a small{ font-family:var(--mono); font-weight:400; font-size:.66rem; opacity:.75; }

.ocr-split{ display:grid; grid-template-columns:96px minmax(0,1.05fr) minmax(0,1fr); gap:1rem; align-items:start; }
@media(max-width:1180px){ .ocr-split{ grid-template-columns:80px minmax(0,1fr); }
  .ocr-side{ grid-column:1 / -1; } }
@media(max-width:700px){ .ocr-split{ grid-template-columns:1fr; } .ocr-pages{ flex-direction:row; max-height:none;
  overflow-x:auto; position:static; } .ocr-pages .pg{ width:64px; flex:none; } }

.ocr-pages{ display:flex; flex-direction:column; gap:.5rem; max-height:calc(100vh - 120px); overflow-y:auto;
  position:sticky; top:78px; padding:.1rem; }
.ocr-pages .pg{ background:none; border:1px solid var(--line); border-radius:8px; padding:.25rem; cursor:pointer;
  text-align:center; font-family:var(--mono); font-size:.66rem; color:var(--muted); transition:.15s; }
.ocr-pages .pg .im{ aspect-ratio:1/1.3; border-radius:5px; background:var(--panel-2) center/cover no-repeat;
  margin-bottom:.2rem; display:grid; place-items:center; }
.ocr-pages .pg.wait .im::after{ content:""; width:16px; height:16px; border-radius:50%;
  border:2px solid var(--line); border-top-color:var(--ac); animation:spin .8s linear infinite; }
.ocr-pages .pg.on{ border-color:var(--ac); color:var(--ink); box-shadow:0 0 0 2px var(--ac-soft); }
.ocr-pages .pg .d{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:.25rem;
  background:var(--muted); vertical-align:middle; }
.ocr-pages .pg .d.good{ background:var(--good); } .ocr-pages .pg .d.warn{ background:var(--warn); }
.ocr-pages .pg .d.bad{ background:var(--bad); } .ocr-pages .pg .d.text{ background:var(--ac); }

.ocr-stage-wrap{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-1); padding:.8rem; position:sticky; top:78px; }
.ocr-stage-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .8rem; margin-bottom:.6rem;
  font-size:.8rem; color:var(--muted); }
.ocr-stage-bar .sp{ flex:1; }
.ocr-stage-bar label{ display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; }
.ocr-stage-bar input{ accent-color:var(--ac); }
.ocr-stage{ position:relative; overflow:auto; max-height:calc(100vh - 190px); border-radius:8px;
  background:var(--panel-2); }
.ocr-stage img{ display:block; width:100%; height:auto; user-select:none; }
.ocr-stage svg{ position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; }
.ocr-stage svg rect{ fill:transparent; stroke-width:2; vector-effect:non-scaling-stroke; pointer-events:all; cursor:pointer; }
.ocr-stage svg rect.l{ stroke:color-mix(in srgb,var(--ac) 55%,transparent); }
.ocr-stage svg rect.l.lo{ stroke:var(--warn); fill:rgba(217,138,18,.10); }
.ocr-stage svg rect.l.hot{ stroke:var(--ac); fill:color-mix(in srgb,var(--ac) 18%,transparent); stroke-width:3; }
.ocr-stage svg rect.t{ stroke:var(--good); stroke-dasharray:6 4; pointer-events:none; }
.ocr-stage.nobox svg rect.l:not(.lo):not(.hot){ stroke:transparent; }
.ocr-stage .ocr-wait{ min-height:420px; display:grid; place-items:center; color:var(--muted); font-size:.9rem; }

.ocr-side{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-1); padding:.9rem 1rem 1.1rem; min-width:0; }
.ocr-tabs{ display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.8rem; border-bottom:1px solid var(--line-2);
  padding-bottom:.6rem; }
.ocr-tabs button{ font-family:var(--disp); font-weight:600; font-size:.8rem; color:var(--ink-soft); background:none;
  border:1px solid transparent; border-radius:8px; padding:.38rem .75rem; cursor:pointer; }
.ocr-tabs button.on{ background:var(--ac-soft); color:var(--ac); border-color:color-mix(in srgb,var(--ac) 30%,transparent); }
.ocr-tabs button small{ font-family:var(--mono); font-weight:400; font-size:.66rem; margin-left:.25rem; opacity:.8; }
.ocr-tools{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:.7rem; }
.ocr-tools input[type=search]{ flex:1 1 160px; width:auto; padding:.45rem .7rem; font-size:.85rem; border-radius:9px; }
.ocr-tools .btn-mini{ margin:0; }
.ocr-tools label{ display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; color:var(--muted); cursor:pointer; }

.ocr-doc{ max-height:calc(100vh - 250px); overflow:auto; padding-right:.3rem; font-size:.95rem; line-height:1.7;
  color:var(--ink); }
.ocr-doc h1,.ocr-doc h2,.ocr-doc h3{ font-family:var(--disp); color:var(--ink); line-height:1.25; margin:1rem 0 .45rem; }
.ocr-doc h1{ font-size:1.3rem; } .ocr-doc h2{ font-size:1.1rem; } .ocr-doc h3{ font-size:1rem; }
.ocr-doc p{ margin:.55rem 0; }
.ocr-doc .cap{ font-style:italic; color:var(--ink-soft); font-size:.9rem; }
.ocr-doc .furn{ color:var(--muted); font-size:.8rem; font-family:var(--mono); }
.ocr-doc .ln{ border-radius:3px; transition:background .12s; }
.ocr-doc .ln.hot{ background:var(--ac-soft); box-shadow:0 0 0 2px var(--ac-soft); }
.ocr-doc .lw{ text-decoration:underline dotted var(--warn); text-underline-offset:3px; }
.ocr-doc.nolow .lw{ text-decoration:none; }
.ocr-doc mark{ background:rgba(245,146,30,.32); color:inherit; border-radius:2px; }
.ocr-doc .pgsep{ font-family:var(--mono); font-size:.7rem; color:var(--muted); letter-spacing:.06em;
  border-top:1px dashed var(--line); margin:1.2rem 0 .6rem; padding-top:.5rem; }
.ocr-doc table{ width:100%; border-collapse:collapse; font-size:.84rem; margin:.7rem 0 1rem; }
.ocr-doc th,.ocr-doc td{ border:1px solid var(--line); padding:.35rem .5rem; text-align:left; vertical-align:top; }
.ocr-doc th{ background:var(--panel-2); font-family:var(--disp); font-weight:600; font-size:.78rem; }
.ocr-doc pre{ font-family:var(--mono); font-size:.76rem; white-space:pre-wrap; word-break:break-word;
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:.8rem; }
.ocr-tbl-h{ display:flex; align-items:center; gap:.6rem; margin:.9rem 0 .2rem; font-family:var(--disp);
  font-weight:600; font-size:.86rem; color:var(--ink-soft); }
.ocr-tbl-h .btn-mini{ margin:0 0 0 auto; }

.ocr-kv{ width:100%; border-collapse:collapse; font-size:.86rem; }
.ocr-kv td{ padding:.4rem .5rem; border-bottom:1px solid var(--line-2); vertical-align:top; }
.ocr-kv td:first-child{ color:var(--muted); width:38%; }
.ocr-kv .ok{ color:var(--good); font-size:.74rem; font-family:var(--mono); margin-left:.3rem; }
.ocr-kv .no{ color:var(--warn); font-size:.74rem; font-family:var(--mono); margin-left:.3rem; }
.ocr-ask{ display:flex; gap:.5rem; margin:.4rem 0 .8rem; }
.ocr-ask input{ flex:1; }
.ocr-ask .btn{ padding:.6rem 1rem; font-size:.85rem; flex:none; }
.ocr-sub{ font-family:var(--disp); font-weight:600; font-size:.88rem; color:var(--ink); margin:1rem 0 .4rem; }
.ocr-empty{ color:var(--muted); font-size:.88rem; padding:.6rem 0; }

/* the slate accent is too dark to be text on the dark theme */
[data-theme="dark"] .ocr-tabs button.on,
[data-theme="dark"] .ocr-dl a:hover{ color:#d3d8f3; }
[data-theme="dark"] .ocr-dl a.main:hover{ color:#fff; }
@media (prefers-reduced-motion: reduce){ .ocr-prog .bar > i{ transition:none; } }