/* Handwriting OCR editor. Uses the tokens in app.css, so light and dark both work. */
.ocr-ed { display: grid; grid-template-rows: auto 1fr; flex: 1; min-height: 0; }
.o-head { gap: 10px; }
.o-head .grow, .o-tools .grow, .o-pfoot .grow, .o-banner .grow, .o-blk-h .grow { flex: 1; }
.o-ind { font-family: var(--indic); }
.o-err { color: var(--danger); }
.o-body { --o-pages: 210px; --o-panel: clamp(400px, 40vw, 760px); display: grid; grid-template-columns: var(--o-pages) minmax(0, 1fr) 8px var(--o-panel); min-height: 0; }
.o-body.slim { --o-pages: 68px; }

/* pages list */
.o-pages { border-right: 1px solid var(--line); overflow-y: auto; padding: 8px; display: grid; align-content: start; gap: 4px; }
.o-fold { justify-self: start; color: var(--muted); margin-bottom: 2px; }
.slim .o-fold { justify-self: center; }
.slim .o-pg { grid-template-columns: 40px; justify-content: center; padding: 5px 0; }
.slim .o-pgt { display: none; }
.o-pn { display: none; position: absolute; right: -4px; bottom: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; place-items: center; font-size: 11px; font-weight: 600; background: var(--bg); color: var(--ink-2); border: 1px solid var(--line-strong); }
.o-pn.done { background: var(--ok); border-color: var(--ok); color: #fff; }
.o-pn.half { background: var(--warn-soft); border-color: var(--warn); }
.slim .o-pn { display: grid; }

/* bar between the page and the text panel */
.o-split { cursor: col-resize; touch-action: none; background: var(--bg); border-left: 1px solid var(--line); border-right: 1px solid var(--line); position: relative; }
.o-split::after { content: ''; position: absolute; left: 2px; right: 2px; top: 50%; height: 36px; margin-top: -18px; border-radius: 2px; background: var(--line-strong); }
.o-split:hover::after, .o-split.on::after, .o-split:focus-visible::after { background: var(--accent); }
.o-split:focus-visible { outline: none; }
.o-pg { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: center; padding: 6px; border-radius: 7px; border: 1px solid transparent; background: none; text-align: left; cursor: pointer; width: 100%; color: inherit; }
.o-pg:hover { background: var(--panel); }
.o-pg[aria-current="true"] { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.o-thumb { position: relative; width: 40px; height: 52px; border-radius: 4px; border: 1px solid var(--line); background: var(--panel-2) center / cover no-repeat; }
.o-pgt { display: grid; gap: 2px; min-width: 0; }
.o-pgt .nm { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-pgt .ss { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }

/* page image */
.o-stage { display: grid; grid-template-rows: auto auto 1fr; min-height: 0; min-width: 0; background: var(--panel); }
.o-tools { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg); flex-wrap: wrap; }
.o-zoom { min-width: 44px; text-align: center; font-size: 13px; }
.o-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-sel { height: 28px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 6px; background: var(--bg); font-size: 13px; }
.o-nextbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--accent-soft); font-size: 13px; flex-wrap: wrap; }
.o-scroller { overflow: auto; padding: 16px; min-height: 0; }
.o-pagewrap { position: relative; margin: 0 auto; box-shadow: 0 2px 10px rgba(21,23,28,.15); background: #fff; }
.o-pagewrap img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.o-pagewrap svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.o-pagewrap svg.draw { cursor: crosshair; }
#o-ov rect { vector-effect: non-scaling-stroke; }
#o-ov .blk { fill: rgba(29, 91, 214, .06); stroke: #1D5BD6; stroke-width: 1.5; cursor: pointer; }
#o-ov .blk.on { fill: rgba(29, 91, 214, .14); stroke-width: 2.5; }
#o-ov .blab { font: 600 var(--fs, 18px) var(--sans); fill: #1D5BD6; paint-order: stroke; stroke: #fff; stroke-width: 4px; pointer-events: none; }
#o-ov .ghost { fill: none; stroke: rgba(29, 91, 214, .35); stroke-width: 1; stroke-dasharray: 6 4; pointer-events: none; }
#o-ov .wd { fill: rgba(12, 166, 120, .08); stroke: #0CA678; stroke-width: 1.5; }
#o-ov .wd.cur { fill: rgba(232, 89, 12, .12); stroke: #E8590C; stroke-width: 2.5; }
#o-ov .wd.bad { fill: rgba(201, 42, 42, .14); stroke: #C92A2A; stroke-width: 2; }
#o-ov .wtxt, #o-ov .wlab { font: 600 var(--fs, 18px) var(--indic); fill: #087F5B; paint-order: stroke; stroke: #fff; stroke-width: 4px; pointer-events: none; }
#o-ov .wtxt.cur { fill: #C2410C; }
#o-ov .tmp { fill: rgba(232, 89, 12, .1); stroke: #E8590C; stroke-width: 2; stroke-dasharray: 5 3; }

/* side panel */
.o-panel { display: grid; grid-template-rows: auto 1fr auto; min-height: 0; background: var(--bg); }
.o-tabs { display: flex; border-bottom: 1px solid var(--line); }
.o-tabs button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; font-weight: 500; color: var(--muted); }
.o-tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.o-tabs .n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--panel-2); }
.o-tabs button[aria-selected="true"] .n { background: var(--accent); color: var(--accent-ink); }
.o-pbody { overflow-y: auto; padding: 12px; display: grid; align-content: start; gap: 10px; }
.o-pfoot { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.o-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 7px; font-size: 13px; border: 1px solid var(--line); background: var(--panel); }
.o-banner.info { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.o-banner.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.o-banner.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.o-empty { padding: 24px; text-align: center; color: var(--muted); }

.o-typing { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.o-typing label { font-weight: 500; }
.o-blk { border: 1px solid var(--line); border-radius: 9px; padding: 10px; display: grid; gap: 8px; }
.o-blk.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.o-blk-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.o-blk-h .o-sel { min-width: 110px; }
.o-bn { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600; }
.o-blk-f { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; margin: -4px -6px -4px 0; }
.o-blk-f .btn { color: var(--ink-2); }
.o-blk-f .o-del { color: var(--danger); }
.o-blk textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 7px; font: 17px/1.7 var(--indic); resize: none; overflow-y: hidden; min-height: 2.8em; background: var(--bg); color: var(--ink); }
.o-blk textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.o-blk textarea[readonly] { background: var(--panel); }
.o-chip { display: inline-block; padding: 1px 8px; border-radius: 5px; font-size: 12px; background: var(--panel-2); color: var(--ink-2); }
.o-chip.ed { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.o-warnl { font-size: 12.5px; color: var(--warn); }
.o-diff { font: 14px/1.8 var(--indic); padding: 6px 8px; border-radius: 6px; background: var(--panel); }
.o-diff .lab { font: 600 11px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-right: 8px; }
.o-diff del { background: #FDECEC; color: #9B1C1C; border-radius: 3px; }
.o-diff ins { background: #E6F4EA; color: #1E6B30; text-decoration: none; border-radius: 3px; }
[data-theme="dark"] .o-diff del { background: #3A1717; color: #FFB3B3; }
[data-theme="dark"] .o-diff ins { background: #173222; color: #A6E3B5; }

.o-cur { border: 1px solid var(--line); border-radius: 9px; padding: 12px; display: grid; gap: 10px; background: var(--surface); }
.o-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.o-cur .bar.ok > i { background: var(--ok); }
.o-curw { font: 600 26px/1.4 var(--indic); text-align: center; }
.o-curw small { display: block; font: 12px var(--sans); color: var(--muted); }
.o-crop { margin: 0 auto; border: 1px solid var(--line-strong); border-radius: 4px; background-repeat: no-repeat; }
.o-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.o-btns .btn { justify-content: space-between; font-size: 13px; }
.o-lines { display: grid; gap: 8px; }
.o-line { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.o-lh { padding: 4px 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--panel); }
.o-wr { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-top: 1px solid var(--line); cursor: pointer; flex-wrap: wrap; }
.o-wr:first-of-type { border-top: 0; }
.o-wr:hover { background: var(--panel); }
.o-wr.cur { background: color-mix(in srgb, #E8590C 10%, var(--bg)); box-shadow: inset 3px 0 0 #E8590C; }
.o-wr .wt { flex: 1 1 120px; font: 16px/1.5 var(--indic); min-width: 0; }
.o-wr .wt small { margin-left: 6px; font: 11.5px var(--sans); color: var(--muted); }
.o-wr .ws { font-size: 12px; color: var(--faint); }
.o-wr .ws.ok { color: var(--ok); }
.o-wr .ws.bad { color: var(--danger); font-weight: 500; }

/* admin: bulk assign bar */
.bulk-bar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.bulk-bar .field { flex: 1 1 220px; }
.bulk-bar > strong { align-self: center; }
.bulk-bar > .small { align-self: center; }
.t input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }

@media (max-width: 1180px) {
  .o-body { --o-pages: 170px; --o-panel: clamp(360px, 42vw, 520px); }
  .o-body.slim { --o-pages: 68px; }
}
@media (max-width: 960px) {
  .o-body, .o-body.slim { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(50vh, auto) auto; overflow-y: auto; }
  .o-split, .o-fold { display: none; }
  .slim .o-pgt { display: grid; }
  .slim .o-pn { display: none; }
  .o-pages { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .o-pg { width: auto; flex: none; grid-template-columns: 32px auto; }
  .o-pg .nm { display: none; }
  .o-pg .ss { white-space: nowrap; }
  .o-thumb { width: 32px; height: 42px; }
  .o-panel { border-top: 1px solid var(--line); }
  .o-pbody { max-height: none; overflow: visible; }
}