/* PG Sindhi Library: reader + proofreading workspace (plain CSS, same palette as Sindhi Sanchaya) */
:root {
  --cream: #F7F5EF; --bone: #FFFFFF; --parchment: #F0EDE4; --peach: #E9E4D4; --beige: #E4DFD0; --sand: #CCC5B0;
  --tan: #B8862B; --ochre: #9A6230; --rust: #7A4A21; --brown: #4A2C13; --ink: #21201B; --ash: #6B675B;
  --green: #2E6B45; --blue: #3b6ea5; --red: #8F3F22;
  --kbd-bg: #EAE5DE; --key-bg: #fff; --key-bdr: #ccc5bb; --pred-bg: #1e1a14; --pred-text: #f5ede3;
}
/* Self-hosted Sindhi fonts: the editor and keyboards must show every Sindhi letter
   (ڄ ڃ ڇ ڍ ڊ ڏ ڌ ٺ ٽ ٿ ڀ ٻ ڙ ڳ ڱ ڪ ڦ, ॻ ॼ ॾ ॿ) even if Google Fonts is blocked. */
@font-face { font-family: 'PGSL Naskh'; src: url('/fonts/NotoNaskhArabic-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'PGSL Naskh'; src: url('/fonts/NotoNaskhArabic-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'PGSL Deva'; src: url('/fonts/NotoSansDevanagari-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
[dir="rtl"], .font-naskh, [lang="sd"], .lang-arab, .rd-arab { font-family: 'Noto Naskh Arabic', 'PGSL Naskh', 'Noto Sans Arabic', serif !important; }
details > summary::-webkit-details-marker { display: none; }
details[data-menu] > summary { list-style: none; }

/* ------------------------------------------------------------ reader --- */
.rd-body { margin: 0; height: 100vh; display: flex; flex-direction: column; background: #2b2926; font-family: Inter, system-ui, sans-serif; color: var(--ink); overflow: hidden; }
.rd-top { background: var(--cream); border-bottom: 1px solid var(--beige); display: flex; align-items: center; gap: 12px; padding: 6px 12px; flex-shrink: 0; flex-wrap: wrap; }
.rd-logo img { height: 36px; width: auto; display: block; }
.rd-title { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.rd-title a { font-family: Fraunces, Georgia, serif; color: var(--rust); font-size: 16px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-sub { font-size: 12px; color: var(--ash); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-arab { font-size: 14px; }
.rd-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rd-tools button, .rd-close { border: 1px solid var(--sand); background: var(--bone); color: var(--rust); border-radius: 6px; min-width: 34px; height: 32px; padding: 0 8px; font-size: 16px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.rd-close { font-size: 13px; }
.rd-tools button:hover, .rd-close:hover { background: var(--parchment); }
.rd-pg { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ash); }
.rd-pg input { width: 58px; height: 30px; border: 1px solid var(--sand); border-radius: 6px; text-align: center; font-size: 14px; }
.rd-sep { width: 1px; height: 22px; background: var(--sand); margin: 0 4px; }
.rd-stage { flex: 1; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 12px; position: relative; }
.rd-stage canvas { box-shadow: 0 4px 24px rgba(0,0,0,.45); background: #fff; max-width: none; }
.rd-msg { position: absolute; top: 40%; left: 0; right: 0; text-align: center; color: #ddd; font-size: 15px; padding: 0 20px; }
.rd-msg a { color: #f0c988; }
.rd-bottom { background: var(--cream); border-top: 1px solid var(--beige); display: flex; align-items: center; gap: 12px; padding: 6px 14px; flex-shrink: 0; }
.rd-bottom input[type=range] { flex: 1; accent-color: var(--rust); }
.rd-hint { font-size: 11px; color: var(--ash); white-space: nowrap; }
.rd-embed .rd-logo img { height: 28px; }
@media (max-width: 640px) { .rd-hint { display: none; } .rd-tools { width: 100%; justify-content: center; } }

/* ------------------------------------------------------------ editor --- */
.ed-body { margin: 0; height: 100vh; display: flex; flex-direction: column; background: var(--cream); font-family: Inter, system-ui, sans-serif; color: var(--ink); overflow: hidden; font-size: 14px; }
.ed-top { background: var(--rust); color: #fff; display: flex; align-items: center; gap: 10px; padding: 6px 12px; flex-shrink: 0; }
.ed-top a { color: rgba(255,255,255,.85); text-decoration: none; font-size: 13px; }
.ed-top a:hover { color: #fff; }
.ed-top .ed-logo { background: #fff; border-radius: 5px; padding: 2px 4px; display: inline-flex; }
.ed-top .ed-logo img { height: 26px; width: auto; }
.ed-top .t { font-family: Fraunces, Georgia, serif; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ed-top .t small { font-family: Inter, sans-serif; font-weight: 400; opacity: .8; font-size: 12px; }
.ed-top .r { margin-left: auto; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.ed-save-state { font-size: 12px; opacity: .9; }
.ed-save-state.dirty { color: #ffd98a; }

.ed-bar { background: #fff; border-bottom: 1px solid var(--beige); padding: 5px 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }
.ed-bar .grp { display: inline-flex; align-items: center; gap: 4px; }
.ed-bar .div { width: 1px; height: 22px; background: var(--beige); margin: 0 3px; }
.ed-btn { border: 1px solid var(--sand); background: #fff; color: var(--ink); border-radius: 6px; padding: 4px 9px; font-size: 13px; cursor: pointer; line-height: 1.4; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-family: inherit; }
.ed-btn:hover:not(:disabled) { background: var(--parchment); border-color: #c8a882; }
.ed-btn:disabled { opacity: .45; cursor: default; }
.ed-btn.on { background: var(--rust); color: #fff; border-color: var(--rust); }
.ed-btn.primary { background: var(--rust); border-color: var(--brown); color: #fff; font-weight: 600; }
.ed-btn.primary:hover:not(:disabled) { background: var(--brown); }
.ed-btn.go { background: var(--green); border-color: #23543a; color: #fff; font-weight: 600; }
.ed-btn.go:hover:not(:disabled) { background: #23543a; }
.ed-btn.blue { background: var(--blue); border-color: #2d5580; color: #fff; font-weight: 600; }
.ed-btn.warn { color: var(--red); border-color: rgba(143,63,34,.45); }
.ed-num { width: 56px; padding: 4px 5px; border: 1px solid var(--sand); border-radius: 6px; font-size: 13px; text-align: center; }
.ed-lbl { font-size: 12px; color: var(--ash); }
.badge { font-size: 12px; padding: 2px 9px; border-radius: 12px; font-weight: 500; border: 1px solid transparent; white-space: nowrap; }
.b-pending { background: var(--parchment); color: var(--ash); border-color: var(--sand); }
.b-draft { background: rgba(184,134,43,.14); color: #7a5a14; border-color: rgba(184,134,43,.5); }
.b-submitted { background: rgba(59,110,165,.12); color: #2d5580; border-color: rgba(59,110,165,.45); }
.b-approved { background: rgba(46,107,69,.13); color: #23543a; border-color: rgba(46,107,69,.45); }
.b-rejected { background: rgba(143,63,34,.12); color: var(--red); border-color: rgba(143,63,34,.45); }

.ed-note { padding: 6px 14px; font-size: 13px; flex-shrink: 0; display: none; }
.ed-note.on { display: block; }
.ed-note.red { background: rgba(143,63,34,.10); color: #6d2f19; border-bottom: 1px solid rgba(143,63,34,.3); }
.ed-note.blue { background: rgba(59,110,165,.10); color: #23456b; border-bottom: 1px solid rgba(59,110,165,.3); }
.ed-note.amber { background: rgba(184,134,43,.14); color: #5c4410; border-bottom: 1px solid rgba(184,134,43,.4); }
.ed-note button { margin-left: 8px; }

.ed-split { flex: 1; display: flex; min-height: 0; }
.ed-scan { width: 50%; display: flex; flex-direction: column; background: #3a3a3a; min-width: 200px; }
.ed-scan-hdr { background: #2a2a2a; color: #ccc; padding: 4px 10px; font-size: 12px; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ed-scan-hdr .sl { background: rgba(255,255,255,.1); border-radius: 4px; padding: 1px 7px; font-size: 11px; }
.ed-scan-hdr button { background: rgba(255,255,255,.08); color: #eee; border: 1px solid rgba(255,255,255,.18); border-radius: 5px; padding: 1px 8px; font-size: 13px; cursor: pointer; }
.ed-scan-hdr button:hover { background: rgba(255,255,255,.18); }
.ed-scan-hdr button.on { background: #b8862b; border-color: #b8862b; color: #fff; }
.ed-scan-scroll { flex: 1; overflow: auto; position: relative; padding: 10px; display: flex; justify-content: center; align-items: flex-start; }
.ed-canvas-wrap { position: relative; display: inline-block; line-height: 0; }
.ed-canvas-wrap canvas { box-shadow: 0 2px 12px rgba(0,0,0,.4); border-radius: 3px; background: #fff; cursor: crosshair; }
.ed-guide { position: absolute; left: 0; right: 0; height: 26px; background: rgba(255, 196, 64, .28); border-top: 2px solid rgba(214, 150, 20, .9); border-bottom: 2px solid rgba(214, 150, 20, .9); pointer-events: none; transition: top .12s ease; display: none; }
.ed-guide.on { display: block; }
.ed-guide.guess { background: rgba(255, 196, 64, .14); border-top-style: dashed; border-bottom-style: dashed; }

/* Grid lines: tell the editor where the printed lines are on the scan. Big
   text and big buttons, so it is easy to use for everyone. */
.grid-strip { background: #fbf6ea; color: var(--ink); border-bottom: 3px solid var(--tan); padding: 8px 10px 10px; flex-shrink: 0; font: 16px/1.45 Inter, system-ui, sans-serif; max-height: 45%; overflow-y: auto; }
.grid-strip[hidden] { display: none; }
.gs-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gs-modes { display: inline-flex; background: #efe7d6; border: 1px solid var(--sand); border-radius: 10px; padding: 3px; gap: 3px; flex-wrap: wrap; }
.gs-modes button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: 600 16px Inter, system-ui, sans-serif; cursor: pointer; }
.gs-modes button:hover { background: #fff; }
.gs-modes button.on { background: var(--rust); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.gs-done { margin-left: auto; min-height: 44px; padding: 0 16px; border-radius: 8px; border: 2px solid var(--green); background: #fff; color: var(--green); font: 700 16px Inter, system-ui, sans-serif; cursor: pointer; }
.gs-done:hover { background: var(--green); color: #fff; }
.gs-say { margin: 8px 2px 6px; font-size: 16px; }
.gs-say:empty { display: none; }
.gs-say i { color: var(--ash); }
.gs-no { display: inline-block; min-width: 30px; text-align: center; background: var(--rust); color: #fff; border-radius: 15px; padding: 0 8px; font-weight: 700; }
.gs-ok { color: var(--green); }
.gs-words { display: inline-block; margin-top: 2px; padding: 2px 10px; background: #fff; border: 1px solid var(--beige); border-radius: 6px; font-family: 'Noto Naskh Arabic', 'PGSL Naskh', 'Noto Sans Devanagari', serif; font-size: 20px; line-height: 1.6; unicode-bidi: isolate; }
.gs-tools:empty { display: none; }
.gs-tools button { min-height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid #c8a882; background: #fff; color: var(--rust); font: 600 15px Inter, system-ui, sans-serif; cursor: pointer; touch-action: manipulation; user-select: none; }
.gs-tools button:hover:not(:disabled) { background: #fff4e2; }
.gs-tools button:active:not(:disabled) { transform: translateY(1px); }
.gs-tools button:disabled { opacity: .4; cursor: default; }
.gs-count { margin-left: auto; font-weight: 600; color: var(--ash); font-size: 15px; }

.ed-grid { position: absolute; inset: 0; pointer-events: none; }
.gl { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid rgba(59,110,165,.35); }
.gl.mk { border-top: 2px solid rgba(46,107,69,.5); }
.gl.gs { border-top: 1px dashed rgba(122,74,33,.55); }
.gl.ev { border-top: 1px solid rgba(59,110,165,.55); }
.gl.ev.hd { border: 2px solid rgba(59,110,165,.95); border-left: 0; border-right: 0; background: rgba(59,110,165,.13); }
.gl.ev.hd .gl-handle { top: calc(50% - 22px); }
.gl.cur { border-top-width: 3px; border-top-color: #d69614; }
.gl-num { position: absolute; top: -10px; font: 700 12px/20px Inter, sans-serif; color: #fff; background: rgba(59,110,165,.85); border-radius: 10px; padding: 0 6px; }
.gl.gs .gl-num { background: rgba(122,74,33,.75); }
.gl.cur .gl-num { background: #d69614; }
.gl-dot { position: absolute; top: -15px; min-width: 30px; height: 30px; padding: 0 5px; box-sizing: border-box; border-radius: 15px; background: var(--green); color: #fff; font: 700 14px/30px Inter, sans-serif; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.35); pointer-events: auto; touch-action: none; cursor: grab; user-select: none; }
.gl.cur .gl-dot { background: #d69614; }
.gl-dot:active { cursor: grabbing; }
.gl-handle { position: absolute; top: -22px; height: 44px; min-width: 64px; padding: 0 10px; box-sizing: border-box; border-radius: 22px; background: var(--blue); color: #fff; font: 700 16px/44px Inter, sans-serif; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.35); pointer-events: auto; touch-action: none; cursor: ns-resize; user-select: none; }
.ed-grid-cursor { position: absolute; pointer-events: none; z-index: 5; background: #d69614; color: #fff; font: 700 15px/28px Inter, sans-serif; min-width: 28px; padding: 0 7px; border-radius: 14px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.ed-grid-cursor[hidden] { display: none; }
.ed-canvas-wrap canvas.marking { cursor: crosshair; outline: 3px solid rgba(214,150,20,.7); outline-offset: 2px; }
.ed-btn.grid-btn { font-weight: 600; }
.ed-guide b { position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: #d69614; color: #fff; font: 600 11px/18px Inter, sans-serif; padding: 0 6px; border-radius: 0 4px 4px 0; }
.ed-scan-msg { color: #bbb; padding: 40px 20px; text-align: center; font-size: 14px; }

.ed-resizer { width: 7px; cursor: col-resize; background: var(--beige); flex-shrink: 0; border-left: 1px solid var(--sand); border-right: 1px solid var(--sand); }
.ed-resizer:hover, .ed-resizer.drag { background: var(--tan); }

.ed-text { flex: 1; display: flex; flex-direction: column; min-width: 280px; background: var(--bone); }
.ed-tabs { display: flex; align-items: stretch; background: #f5ede3; border-bottom: 1px solid var(--beige); flex-shrink: 0; font-size: 12px; }
.ed-tabs button { border: 0; background: transparent; padding: 7px 12px; cursor: pointer; color: var(--ash); border-bottom: 2px solid transparent; font-family: inherit; font-size: 12px; }
.ed-tabs button.on { color: var(--rust); border-bottom-color: var(--rust); font-weight: 600; background: #fff; }
.ed-tabs .sp { margin-left: auto; display: flex; align-items: center; gap: 8px; padding-right: 10px; color: var(--ash); }

.ed-pane { flex: 1; min-height: 0; display: none; position: relative; }
.ed-pane.on { display: flex; }
.ed-editor { flex: 1; display: flex; min-height: 0; position: relative; --fs: 18px; --lh: 36px; }
.ed-editor.arab { --fs: 21px; --lh: 44px; flex-direction: row-reverse; }
.ed-gutter { width: 46px; flex-shrink: 0; background: #faf6ef; border-right: 1px solid var(--beige); color: #a59c86; font: 12px/var(--lh) ui-monospace, Menlo, Consolas, monospace; text-align: right; padding: 14px 8px 14px 0; overflow: hidden; user-select: none; box-sizing: border-box; }
.ed-editor.arab .ed-gutter { border-right: 0; border-left: 1px solid var(--beige); text-align: left; padding: 14px 0 14px 8px; }
.ed-gutter div { height: var(--lh); }
.ed-gutter div.cur { color: var(--rust); font-weight: 700; background: rgba(184,134,43,.16); }
.ed-gutter div.chg::after { content: '•'; color: var(--tan); margin-left: 2px; }
.ed-area-wrap { flex: 1; position: relative; min-width: 0; }
.ed-hl { position: absolute; left: 0; right: 0; height: var(--lh); background: rgba(255, 213, 120, .22); border-top: 1px solid rgba(214,150,20,.25); border-bottom: 1px solid rgba(214,150,20,.25); pointer-events: none; top: 14px; }
.ed-area { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; border: 0; outline: 0; resize: none; background: transparent; padding: 14px 16px; font-size: var(--fs); line-height: var(--lh); color: var(--ink); white-space: pre; overflow: auto; tab-size: 4; font-family: 'Noto Sans Devanagari', 'PGSL Deva', 'Tiro Devanagari Sanskrit', 'Mangal', serif; }
.ed-editor.arab .ed-area { font-family: 'Noto Naskh Arabic', 'PGSL Naskh', 'Noto Sans Arabic', serif; direction: rtl; text-align: right; }
.ed-area[readonly] { background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(0,0,0,.015) 14px 28px); }
.ed-ref { flex: 1; overflow: auto; padding: 14px 18px; white-space: pre-wrap; font-size: var(--fs, 18px); line-height: 1.9; font-family: 'Noto Sans Devanagari', 'PGSL Deva', 'Tiro Devanagari Sanskrit', serif; }
.ed-ref.arab { font-family: 'Noto Naskh Arabic', 'PGSL Naskh', serif; direction: rtl; text-align: right; font-size: 21px; }
.ed-ref .empty { color: var(--ash); font-family: Inter, sans-serif; font-size: 14px; direction: ltr; text-align: left; }
.ed-ref ins { background: rgba(46,107,69,.18); color: #1f4a30; text-decoration: none; border-radius: 2px; }
.ed-ref del { background: rgba(143,63,34,.16); color: var(--red); border-radius: 2px; }

.ed-find { display: none; align-items: center; gap: 6px; padding: 5px 10px; background: #fffaf0; border-bottom: 1px solid var(--beige); flex-shrink: 0; flex-wrap: wrap; }
.ed-find.on { display: flex; }
.ed-find input { border: 1px solid var(--sand); border-radius: 5px; padding: 3px 7px; font-size: 14px; width: 170px; font-family: 'Noto Sans Devanagari', 'PGSL Deva', 'Noto Naskh Arabic', 'PGSL Naskh', Inter, sans-serif; }

.pred-bar { background: var(--pred-bg); border-top: 1px solid #444; display: flex; align-items: stretch; height: 42px; flex-shrink: 0; }
.pred-items { display: flex; align-items: center; flex: 1; overflow-x: auto; scrollbar-width: none; gap: 3px; padding: 3px 8px; }
.pred-items::-webkit-scrollbar { display: none; }
.pc { background: rgba(255,255,255,.08); color: var(--pred-text); border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: 3px 12px; font-size: 16px; cursor: pointer; white-space: nowrap; flex-shrink: 0; user-select: none; font-family: 'Noto Sans Devanagari', 'Noto Naskh Arabic', 'PGSL Naskh', serif; }
.pc:hover { background: rgba(255,180,80,.25); border-color: rgba(255,180,80,.4); }
.pc.sel { background: rgba(255,180,80,.35); }
.pc.nxt { color: #aee8c0; }
.pc kbd { font: 10px Inter, sans-serif; opacity: .55; margin-left: 5px; }
.pred-hint { color: rgba(255,255,255,.3); font-size: 13px; padding: 0 8px; }
.pred-info { display: flex; align-items: center; padding: 0 10px; font-size: 11px; color: rgba(255,255,255,.4); border-left: 1px solid rgba(255,255,255,.1); gap: 5px; flex-shrink: 0; }
.pred-info .dot { width: 6px; height: 6px; border-radius: 50%; background: #b45309; }
.pred-info .dot.ok { background: #3fa06a; }

.ime-bar { display: none; background: #1a3a5c; color: #a8d4f5; font-size: 11px; padding: 3px 12px; text-align: center; flex-shrink: 0; }
.ime-bar.on { display: block; }

.kw { background: var(--kbd-bg); border-top: 2px solid var(--beige); flex-shrink: 0; padding: 5px 4px 7px; }
.kw-fn { margin-top: 4px; }
/* Editor keyboard: its height is a share of the text pane (1/3 by default),
   changed with the grip or the Smaller / Bigger buttons. Key size (--kh) is
   worked out by editor.js so that every key fits without scrolling. */
.ed-text > .kw { display: none; flex-direction: column; padding: 0 4px 5px; overflow: hidden; --kh: 33px; }
.ed-text > .kw.on { display: flex; }
.kw-bar { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 6px; margin: 0 -4px 4px; background: #e2dbd0; border-bottom: 1px solid #d3c9b8; cursor: ns-resize; touch-action: none; user-select: none; flex-shrink: 0; font: 13px Inter, system-ui, sans-serif; color: var(--ink); }
.kw-bar.drag { background: #d8cdbd; }
.kw-grip { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 30px; border-radius: 6px; background: #f3eee6; border: 1px solid #cbbfa9; color: #7b6f5c; font-size: 18px; line-height: 1; }
.kw-title { font-weight: 600; white-space: nowrap; }
.kw-hint { color: var(--ash); font-size: 12px; white-space: nowrap; }
.kw-sp { flex: 1; }
.kw-bar button { cursor: pointer; font: 600 13px Inter, system-ui, sans-serif; border-radius: 7px; border: 1px solid #c8a882; background: #fffaf2; color: var(--rust); min-height: 32px; padding: 0 11px; white-space: nowrap; }
.kw-bar button:hover { background: #fff; }
.kw-bar button:disabled { opacity: .4; cursor: default; }
.kw-tabs { display: none; gap: 3px; background: #f3eee6; border: 1px solid #cbbfa9; border-radius: 8px; padding: 2px; }
.kw-tabs button { border: 0; background: transparent; color: var(--ink); min-height: 28px; }
.kw-tabs button.on { background: var(--rust); color: #fff; }
.kw.compact .kw-tabs { display: inline-flex; }
.kw.compact .kw-hint { display: none; }
.kw-keys { flex: 1; min-height: 0; overflow-y: auto; }
.ed-text > .kw .kr { gap: max(2px, calc(var(--kh) * .09)); margin-bottom: max(2px, calc(var(--kh) * .09)); }
.ed-text > .kw .k { height: var(--kh); min-width: calc(var(--kh) * .94); font-size: calc(var(--kh) * .48); border-radius: max(4px, calc(var(--kh) * .15)); }
.ed-text > .kw .k.arab { min-width: calc(var(--kh) * 1.15); font-size: calc(var(--kh) * .58); }
.ed-text > .kw .k .kh-hint { font-size: max(7px, calc(var(--kh) * .25)); }
.ed-text > .kw .k.w, .ed-text > .kw .k.fn { font-size: max(11px, calc(var(--kh) * .36)); }
.ed-text > .kw .k.w { min-width: calc(var(--kh) * 1.7); padding: 0 8px; }
.ed-text > .kw .k.sp { min-width: calc(var(--kh) * 5); font-size: max(11px, calc(var(--kh) * .36)); }
.ed-text > .kw .sl { font-size: max(9px, calc(var(--kh) * .28)); }
.kw.compact .sl { display: none; }
.kw.compact .kw-sec { display: none; }
.kw.compact.tab-letters .kw-sec[data-sec="0"], .kw.compact.tab-marks .kw-sec[data-sec="1"], .kw.compact.tab-marks .kw-sec[data-sec="2"] { display: block; }
@media (max-width: 640px) { .kw-hint, .kw-title, .kw-lbl, .kw-grip { display: none; } .kw-bar { gap: 4px; } .kw-bar button { padding: 0 9px; min-width: 36px; } .kw-tabs button { padding: 0 7px; min-width: 0; } }
.kw .sl { font-size: 9px; color: var(--ash); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 0 3px 1px; margin-top: 2px; text-align: center; }
.kr { display: flex; justify-content: center; gap: 3px; margin-bottom: 3px; flex-wrap: wrap; }
.k { background: var(--key-bg); border: 1px solid var(--key-bdr); border-radius: 5px; min-width: 31px; height: 33px; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; user-select: none; box-shadow: 0 1px 0 #b8b0a4; flex-shrink: 0; padding: 0 4px; font-family: 'Noto Sans Devanagari', 'Noto Naskh Arabic', 'PGSL Naskh', serif; }
.k.arab { font-family: 'Noto Naskh Arabic', 'PGSL Naskh', serif; font-size: 19px; min-width: 38px; position: relative; padding: 0 3px; box-sizing: border-box; }
.k .kh-hint { position: absolute; top: 1px; left: 3px; font: 600 8.5px/1 Inter, system-ui, sans-serif; color: #8a8171; font-style: normal; letter-spacing: -.2px; pointer-events: none; }
.k.mt .kh-hint { color: #7d68a3; }
.ime-bar .kp { display: inline-block; margin: 0 5px; unicode-bidi: isolate; }
.ime-bar .rd-arab { font-size: 15px; color: #fff; }
.ime-x { background: transparent; border: 1px solid #5f8fb8; color: #d6ecff; border-radius: 4px; font-size: 10.5px; padding: 0 6px; margin-left: 6px; cursor: pointer; }
.ime-x:hover { background: #24507a; }
.kchart { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.kc-row { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.kc { width: 44px; height: 52px; border: 1px solid #d8cfbf; border-radius: 6px; background: #fffdf8; position: relative; box-shadow: 0 1px 0 #cfc6b4; }
.kc-k { position: absolute; left: 4px; top: 3px; font: 700 10px/1 Inter, sans-serif; color: #8a8171; }
.kc-hi { position: absolute; right: 5px; top: 2px; font-size: 16px; color: #7A4A21; line-height: 1.3; }
.kc-lo { position: absolute; right: 5px; bottom: 2px; font-size: 19px; color: #21201B; line-height: 1.3; }
.k:active { background: #e0d9d0; transform: translateY(1px); box-shadow: none; }
.k:hover { background: #f5ede3; border-color: #c8a882; }
.k.w { min-width: 52px; font-size: 12px; font-family: Inter, sans-serif; }
.k.sp { min-width: 180px; font-size: 12px; color: var(--ash); font-family: Inter, sans-serif; }
.k.mt { color: #5a3e8a; background: #f5f0fa; }
.k.si { background: #fdf0e0; border-color: #d4a860; color: #8b5a00; }
.k.fn { background: #f5ede3; border-color: #c8a882; color: var(--rust); font-size: 12px; font-family: Inter, sans-serif; }
.kd { width: 8px; }

.ed-actions { background: #fff; border-top: 1px solid var(--beige); padding: 6px 12px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.ed-actions .info { margin-left: auto; font-size: 12px; color: var(--ash); }
.kh { display: inline-block; background: #f0ece5; border: 1px solid #c8bead; border-radius: 4px; padding: 0 5px; font-size: 11px; font-family: ui-monospace, monospace; color: var(--ash); }

.ed-menu { position: relative; display: inline-block; }
.ed-pop { position: absolute; top: calc(100% + 4px); right: 0; z-index: 60; background: #fff; border: 1px solid var(--sand); border-radius: 8px; box-shadow: 0 12px 32px -12px rgba(0,0,0,.35); min-width: 250px; padding: 6px; display: none; }
.ed-pop.left { left: 0; right: auto; }
.ed-pop.on { display: block; }
.ed-pop h4 { margin: 6px 8px 4px; font: 600 10px Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ash); }
.ed-pop a, .ed-pop button.item { display: block; width: 100%; text-align: left; padding: 6px 10px; border-radius: 5px; color: var(--ink); text-decoration: none; background: none; border: 0; font: 13px Inter, sans-serif; cursor: pointer; }
.ed-pop a:hover, .ed-pop button.item:hover { background: var(--parchment); color: var(--rust); }
.ed-pop label { display: flex; gap: 6px; align-items: center; padding: 6px 10px; font-size: 12px; color: var(--ash); }
.pmap-pop { width: min(560px, 92vw); max-height: 60vh; overflow: auto; }
.pmap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 3px; padding: 4px; }
.pmap-grid button { height: 26px; border-radius: 3px; border: 1px solid var(--beige); background: #fff; font: 10px Inter, sans-serif; color: var(--ash); cursor: pointer; padding: 0; }
.pmap-grid button.noocr { border-style: dashed; background: var(--cream); color: #b5ad98; }
.pmap-grid button.draft { background: rgba(184,134,43,.25); border-color: rgba(184,134,43,.6); color: var(--ink); }
.pmap-grid button.submitted { background: rgba(59,110,165,.25); border-color: rgba(59,110,165,.6); color: var(--ink); }
.pmap-grid button.approved { background: rgba(46,107,69,.3); border-color: rgba(46,107,69,.6); color: var(--ink); }
.pmap-grid button.rejected { background: rgba(143,63,34,.25); border-color: rgba(143,63,34,.6); color: var(--ink); }
.pmap-grid button.cur { outline: 2px solid var(--rust); outline-offset: 1px; font-weight: 700; color: var(--rust); }
.pmap-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--ash); padding: 6px 8px; border-top: 1px solid var(--beige); }
.pmap-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; border: 1px solid var(--sand); }

.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 96vw); background: #fff; box-shadow: -12px 0 40px -12px rgba(0,0,0,.35); z-index: 80; display: none; flex-direction: column; }
.drawer.on { display: flex; }
.drawer-hdr { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--beige); background: var(--cream); }
.drawer-hdr h3 { margin: 0; font: 600 16px Fraunces, Georgia, serif; color: var(--rust); }
.drawer-hdr .x { margin-left: auto; }
.drawer-body { flex: 1; overflow: auto; padding: 10px 14px; }
.rev { border: 1px solid var(--beige); border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; cursor: pointer; font-size: 13px; }
.rev:hover { border-color: #c8a882; background: #fffaf2; }
.rev.sel { border-color: var(--rust); background: #fff6ea; }
.rev .who { font-weight: 600; color: var(--ink); }
.rev .when { color: var(--ash); font-size: 12px; }
.rev .st { font-size: 11px; color: var(--ash); }
.rev .plus { color: var(--green); } .rev .minus { color: var(--red); }
.diffbox { white-space: pre-wrap; border: 1px solid var(--beige); border-radius: 6px; padding: 10px; margin-top: 8px; font-size: 16px; line-height: 1.9; font-family: 'Noto Sans Devanagari', 'Noto Naskh Arabic', 'PGSL Naskh', serif; max-height: 50vh; overflow: auto; }
.diffbox.arab { direction: rtl; text-align: right; font-family: 'Noto Naskh Arabic', 'PGSL Naskh', serif; font-size: 19px; }
.diffbox ins { background: rgba(46,107,69,.2); color: #1f4a30; text-decoration: none; }
.diffbox del { background: rgba(143,63,34,.18); color: var(--red); }

.modal-bg { position: fixed; inset: 0; background: rgba(33,32,27,.45); z-index: 90; display: none; align-items: center; justify-content: center; padding: 16px; }
.modal-bg.on { display: flex; }
.modal { background: #fff; border-radius: 10px; max-width: 520px; width: 100%; padding: 20px 22px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.5); }
.modal h3 { margin: 0 0 8px; font: 600 20px Fraunces, Georgia, serif; color: var(--rust); }
.modal p { margin: 6px 0; line-height: 1.55; }
.modal textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--sand); border-radius: 6px; padding: 8px; font: 14px Inter, sans-serif; min-height: 80px; }
.modal .btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.toast { position: fixed; bottom: 18px; left: 50%; transform: translate(-50%, 8px); background: var(--green); color: #fff; padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,.2); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 999; max-width: 90vw; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: var(--red); }

.ed-mobile-tabs { display: none; }
@media (max-width: 900px) {
  .ed-split { flex-direction: column; }
  .ed-scan { width: 100% !important; height: 42vh; flex-shrink: 0; }
  .ed-resizer { display: none; }
  .ed-text { min-width: 0; }
  .ed-top .t small, .ed-hide-sm { display: none; }
  .k { min-width: 27px; height: 31px; font-size: 14px; }
  .k.arab { min-width: 30px; font-size: 17px; }
  .k .kh-hint { font-size: 7.5px; left: 2px; }
  .k.sp { min-width: 120px; }
  .ed-body.scan-hidden .ed-scan { display: none; }
  .ed-body.text-hidden .ed-text { display: none; }
  .ed-body.text-hidden .ed-scan { height: auto; flex: 1; }
}
@media (max-width: 640px) {
  .ed-body { height: 100dvh; }
  .ed-bar, .ed-actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .ed-bar > *, .ed-actions > * { flex-shrink: 0; }
  .ed-actions .info { display: none; }
  .ed-scan { height: 32vh; }
  .ime-bar.on { display: none; }
}
.ed-body.scan-hidden .ed-scan, .ed-body.scan-hidden .ed-resizer { display: none; }
.ed-body.text-hidden .ed-text, .ed-body.text-hidden .ed-resizer { display: none; }
.ed-body.text-hidden .ed-scan { width: 100% !important; }

/* ------------------------------------------------------------ print --- */
.pr-body { font-family: 'Noto Sans Devanagari', 'PGSL Deva', 'Noto Naskh Arabic', 'PGSL Naskh', Inter, serif; color: #111; max-width: 820px; margin: 0 auto; padding: 24px; background: #fff; }
.pr-page { page-break-after: always; break-after: page; padding: 8px 0 16px; }
.pr-page:last-child { page-break-after: auto; }
.pr-page h2 { font: 600 12px Inter, sans-serif; color: var(--rust); border-bottom: 1px solid #ddd; padding-bottom: 4px; }
.pr-text { white-space: pre-wrap; font-size: 17px; line-height: 1.9; }
.pr-text.arab { direction: rtl; text-align: right; font-family: 'Noto Naskh Arabic', 'PGSL Naskh', serif; font-size: 20px; }
.pr-bar { position: sticky; top: 0; background: #fffaf0; border: 1px solid var(--beige); padding: 8px 12px; border-radius: 8px; display: flex; gap: 10px; align-items: center; margin-bottom: 16px; font: 13px Inter, sans-serif; }
@media print { .pr-bar { display: none; } .pr-body { padding: 0; } }
.modal:has(.kchart) { max-width: 720px; }

/* ------------------------------------------------------- work report --- */
.wk-period { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 18px; }
.wk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wk-chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--sand); background: var(--bone); color: var(--ash); font: 500 13px Inter, system-ui, sans-serif; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.wk-chip:hover { border-color: var(--ochre); color: var(--rust); }
.wk-chip.on { background: var(--rust); border-color: var(--rust); color: #fff; }
.wk-range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.wk-range label { display: flex; flex-direction: column; font: 11px Inter, sans-serif; color: var(--ash); gap: 2px; }
.wk-range input { border: 1px solid var(--sand); border-radius: 6px; padding: 5px 8px; font: 13px Inter, sans-serif; background: #fff; color: var(--ink); }
.wk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.wk-tile { background: var(--bone); border: 1px solid var(--beige); border-radius: 12px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(33,32,27,.05); position: relative; overflow: hidden; }
.wk-tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--tan), var(--rust)); opacity: .7; }
.wk-num { font: 600 26px/1.15 Fraunces, Georgia, serif; color: var(--rust); display: flex; align-items: center; gap: 8px; }
.wk-lbl { margin-top: 4px; font: 500 12px Inter, sans-serif; color: var(--ash); text-transform: uppercase; letter-spacing: .08em; }
.wk-sub { display: block; text-transform: none; letter-spacing: 0; font-weight: 400; margin-top: 2px; }
.wk-live { width: 10px; height: 10px; border-radius: 50%; background: var(--sand); display: inline-block; }
.wk-live.on { background: #2E9E5B; box-shadow: 0 0 0 0 rgba(46,158,91,.5); animation: wkPulse 1.8s infinite; }
@keyframes wkPulse { 0% { box-shadow: 0 0 0 0 rgba(46,158,91,.5); } 70% { box-shadow: 0 0 0 9px rgba(46,158,91,0); } 100% { box-shadow: 0 0 0 0 rgba(46,158,91,0); } }
.wk-table-wrap { overflow-x: auto; margin-top: 14px; border: 1px solid var(--beige); border-radius: 12px; background: var(--bone); }
.wk-table { width: 100%; border-collapse: collapse; font: 14px Inter, system-ui, sans-serif; }
.wk-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ash); font-weight: 600; background: var(--parchment); padding: 9px 12px; border-bottom: 1px solid var(--sand); white-space: nowrap; }
.wk-table td { padding: 10px 12px; border-bottom: 1px solid var(--beige); vertical-align: middle; }
.wk-table tr:last-child td { border-bottom: 0; }
.wk-table tr[data-href] { cursor: pointer; transition: background .12s; }
.wk-table tr[data-href]:hover td { background: #fbf6ea; }
.wk-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wk-table .strong { font-weight: 600; color: var(--ink); }
.wk-table .muted, .muted { color: var(--ash); }
.wk-table .nowrap, .nowrap { white-space: nowrap; }
.wk-person a { color: var(--rust); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.wk-tags { display: inline-flex; gap: 4px; margin-left: 6px; flex-wrap: wrap; }
.wk-tag { font: 500 10.5px Inter, sans-serif; border: 1px solid var(--sand); color: var(--ash); border-radius: 999px; padding: 1px 7px; background: var(--cream); }
.wk-tag.tan { border-color: rgba(184,134,43,.5); color: var(--ochre); background: #fbf3e2; }
.wk-dot { width: 8px; height: 8px; border-radius: 50%; background: #d9d2c3; flex-shrink: 0; }
.wk-dot.on { background: #2E9E5B; box-shadow: 0 0 0 3px rgba(46,158,91,.18); }
.wk-flag { display: inline-flex; align-items: center; gap: 5px; font: 600 11.5px Inter, sans-serif; border-radius: 999px; padding: 3px 9px; white-space: nowrap; background: #f1ede4; color: var(--ash); }
.wk-flag.online { background: #e3f4ea; color: #1f6b3f; }
.wk-flag.online::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #2E9E5B; }
.wk-flag.ok { background: #eef4ef; color: #2E6B45; }
.wk-flag.idle { background: #fcebe7; color: #b3261e; }
.wk-flag.none { background: #fdf3e1; color: #8a5a00; }
.wk-bar { display: inline-block; width: 70px; height: 7px; border-radius: 99px; background: #eadcc4; overflow: hidden; vertical-align: middle; }
.wk-bar i { display: block; height: 100%; background: linear-gradient(90deg, #2E9E5B, #3aa86a); border-radius: 99px; }
.wk-pct { font-size: 12px; color: var(--ash); margin-left: 6px; font-variant-numeric: tabular-nums; }
.wk-empty { margin-top: 18px; text-align: center; padding: 40px 20px; border: 1px dashed var(--sand); border-radius: 12px; background: var(--bone); }
.wk-how { margin-top: 26px; font-size: 14px; color: var(--ink); background: var(--bone); border: 1px solid var(--beige); border-radius: 12px; padding: 12px 16px; }
.wk-how summary { cursor: pointer; font-weight: 600; color: var(--rust); }
.wk-how ul { margin: 10px 0 0 18px; list-style: disc; line-height: 1.6; }
.wk-chart { display: flex; align-items: flex-end; gap: 4px; height: 190px; margin-top: 14px; padding: 12px 10px 0; background: var(--bone); border: 1px solid var(--beige); border-radius: 12px; overflow-x: auto; }
.wk-col { flex: 1 0 18px; min-width: 18px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; padding-bottom: 44px; }
.wk-stack { width: 70%; max-width: 34px; display: flex; flex-direction: column; border-radius: 5px 5px 2px 2px; overflow: hidden; min-height: 2px; background: #eee6d6; transition: height .4s cubic-bezier(.2,.8,.2,1); }
.wk-stack i { display: block; min-height: 0; }
.wk-stack i.act, .wk-legend i.act { background: #2E9E5B; }
.wk-stack i.idle, .wk-legend i.idle { background: #e0c79a; }
.wk-pg { position: absolute; bottom: 28px; font: 600 10px Inter, sans-serif; color: var(--rust); }
.wk-day { position: absolute; bottom: 0; font: 10px/1.1 Inter, sans-serif; color: var(--ash); text-align: center; }
.wk-legend { display: flex; gap: 16px; margin-top: 8px; font: 12px Inter, sans-serif; color: var(--ash); }
.wk-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.wk-books { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.wk-books li { display: flex; gap: 12px; align-items: center; background: var(--bone); border: 1px solid var(--beige); border-radius: 10px; padding: 10px 12px; }
.wk-prog { height: 6px; background: #eee6d6; border-radius: 99px; overflow: hidden; margin: 6px 0 4px; }
.wk-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--tan), var(--rust)); border-radius: 99px; }
.wk-assign { margin-top: 16px; background: #fbf6ea; border: 1px solid var(--beige); border-radius: 10px; padding: 14px; }
.wk-recent { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.wk-recent li { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.wk-act { font: 600 10.5px Inter, sans-serif; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 5px; background: #f1ede4; color: var(--ash); }
.wk-act.submit { background: #e6eef8; color: #2d5580; }
.wk-act.approve { background: #e3f4ea; color: #1f6b3f; }
.wk-act.reject { background: #fcebe7; color: #b3261e; }

/* ------------------------------------------------ language switch (v3.6) --- */
/* English / सिंधी / سنڌي side by side, small, at the end of the header's top row. */
.lang-switch { display: inline-flex; align-items: center; flex-shrink: 0; gap: 1px; padding: 2px; border: 1px solid var(--sand); border-radius: 999px; background: var(--bone); line-height: 1; }
.lang-switch__opt { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 999px; font-family: Inter, system-ui, sans-serif; font-size: 12px; font-weight: 500; color: var(--rust); text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s; }
.lang-switch__opt:hover { background: var(--parchment); }
.lang-switch__opt.is-current { background: var(--rust); color: var(--cream); }
.lang-switch__opt:focus-visible { outline: 2px solid var(--tan); outline-offset: 1px; }
.lang-switch__opt[lang="sd-Deva"] { font-family: 'Noto Sans Devanagari', 'PGSL Deva', sans-serif; font-size: 12.5px; }
.lang-switch__opt[lang="sd-Arab"] { font-family: 'Noto Naskh Arabic', 'PGSL Naskh', serif; font-size: 14px; padding-top: 1px; }
.lang-switch__short { display: none; }
@media (max-width: 1279px) { .lang-switch__long { display: none; } .lang-switch__short { display: inline; } }
/* Room for the switch in the header's top row, so the header keeps its height:
   on small laptops and tablets held sideways (1024-1179 px wide, where the full
   menu shows) the stamp logo stands without the "PG Sindhi Library" words beside
   it; on phones the spacing is a little tighter. */
@media (min-width: 1024px) and (max-width: 1179px) { .hdr-wordmark { display: none; } }
.hdr-actions summary .truncate { max-width: 7rem; }
@media (max-width: 1279px) { .hdr-actions summary .truncate { max-width: 5rem; } }
@media (max-width: 439px) {
  .hdr-row { gap: .625rem; }
  .hdr-actions { gap: .375rem; }
  .hdr-actions .nav-shelf { padding-left: .625rem; padding-right: .625rem; }
  .lang-switch__opt { padding: 0 5px; font-size: 11.5px; }
  .lang-switch__opt[lang="sd-Deva"] { font-size: 12px; }
  .lang-switch__opt[lang="sd-Arab"] { font-size: 13.5px; }
}
@media (max-width: 374px) {
  .hdr-logo { height: 2.25rem; }
  .lang-switch__opt { padding: 0 4px; }
}
/* The smallest phones (under 360 px): "Sign in" shows its icon only (the word stays for screen readers). */
@media (max-width: 359px) {
  .hdr-actions > a.nav-shelf > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}

/* 3.7: admin screens (OCR upload check, downloads, book visibility). */
.pre-wrap { white-space: pre-wrap; word-break: break-word; }
.ocr-sample { max-height: 16rem; overflow: auto; background: #fffdf8; border: 1px solid #e7dcc8; border-radius: .5rem; padding: .6rem .75rem; line-height: 1.7; }
.step-list { counter-reset: step; list-style: none; padding: 0; }
.step-list > li { counter-increment: step; position: relative; padding-left: 2.4rem; margin-top: .9rem; }
.step-list > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 1.7rem; height: 1.7rem; border-radius: 999px; background: #8F3F22; color: #fff; font-weight: 600; display: flex; align-items: center; justify-content: center; font-size: .85rem; }
.step-list > li.is-done::before { content: "\2713"; background: #3d6b3a; }
.tag-hidden { display: inline-block; font-size: .7rem; padding: .05rem .45rem; border-radius: 999px; background: #efe3cf; color: #6b4a2b; border: 1px solid #dcc9a8; vertical-align: middle; }
.row-warn { background: #fff4e5; }
.progress[hidden] { display: none; }