:root{
  --navy:#1b2a4a; --navy-deep:#0e1730; --navy-mid:#233457; --navy-line:#33436a;
  --ink:#161d2b; --muted:#56606e; --faint:#757d8b; --line:#e2e4ea; --line-soft:#eef0f3;
  --paper:#f4f3f0; --white:#fff; --page:#fdfcfa;
  --brass:#a9824f; --brass-deep:#8a6a3d; --brass-soft:#f6eede; --brass-line:#e3d2b4;
  --ok:#20674a; --ok-soft:#e6f1ec; --ok-line:#bcd9cb;
  --wait:#8a6a3d; --wait-soft:#f6eede;
  --off:#5f6875; --off-soft:#ecedf1;
  --danger:#96301f; --danger-soft:#f9eae7; --danger-line:#e6cfca;
  --rail:74px;
  --shadow-s:0 1px 2px rgba(14,23,48,.05),0 4px 12px rgba(14,23,48,.05);
  --shadow-m:0 12px 34px rgba(14,23,48,.11);
  --shadow-l:0 26px 70px rgba(14,23,48,.20);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,.serif{font-family:'Source Serif 4',Georgia,serif}
button,input,select,textarea{font:inherit;color:inherit}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-ligatures:none}
::selection{background:var(--brass-soft)}

/* ============ app frame ============ */
.app{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100%}

/* ---- left rail ---- */
.rail{background:var(--navy-deep);display:flex;flex-direction:column;align-items:center;padding:16px 0 18px;gap:8px;position:sticky;top:0;height:100vh}
.rail .mark{width:38px;height:38px;border-radius:10px;overflow:hidden;margin-bottom:14px;display:block}
.rail .mark img{width:100%;height:100%;display:block}
.rnav{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;border:0;background:none;color:#8fa0c4;cursor:pointer;position:relative;transition:background .15s,color .15s}
.rnav:hover{background:#1a2745;color:#dbe3f2}
.rnav.on{background:var(--navy-mid);color:#fff}
.rnav.on:after{content:"";position:absolute;left:-14px;top:11px;bottom:11px;width:3px;border-radius:0 3px 3px 0;background:var(--brass)}
.rnav svg{width:21px;height:21px;stroke-width:1.7}
.rnav .dot{position:absolute;top:9px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--brass);border:2px solid var(--navy-deep)}
.rail .sp{flex:1}
.rail .me{width:38px;height:38px;border-radius:50%;background:var(--navy-mid);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:600;letter-spacing:.02em;border:1px solid var(--navy-line)}
.tip{position:absolute;left:58px;top:50%;transform:translateY(-50%) translateX(-4px);background:var(--navy-deep);color:#fff;font-size:12px;font-weight:500;padding:6px 10px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;transition:.14s;z-index:60;box-shadow:var(--shadow-m)}
.rnav:hover .tip{opacity:1;transform:translateY(-50%) translateX(0)}

/* ---- top bar ---- */
.top{position:sticky;top:0;z-index:30;background:rgba(244,243,240,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top .inner{height:64px;display:flex;align-items:center;gap:14px;padding:0 28px}
.top .wm{height:17px;display:block;opacity:.95}
.top .sep{width:1px;height:20px;background:var(--line)}
.top .where{font-size:14px;font-weight:600;letter-spacing:-.005em}
.demo{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--brass-deep);background:var(--brass-soft);border:1px solid var(--brass-line);border-radius:999px;padding:4px 10px}
.top .right{margin-left:auto;display:flex;align-items:center;gap:12px}
.search{position:relative;display:flex;align-items:center}
.search input{border:1px solid var(--line);background:var(--white);border-radius:9px;padding:8px 12px 8px 33px;font-size:13px;width:240px;transition:border-color .15s,box-shadow .15s}
.search input::placeholder{color:var(--faint)}
.search input:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(27,42,74,.09)}
.search svg{position:absolute;left:11px;width:14px;height:14px;opacity:.45;pointer-events:none}
.who{display:flex;align-items:center;gap:9px}
.who .nm{text-align:right;line-height:1.25}
.who .nm b{display:block;font-weight:600;font-size:13px}
.who .nm span{color:var(--muted);font-size:11px}
.av{width:33px;height:33px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:600;font-size:11.5px;flex:0 0 33px}

/* ---- views ---- */
.view{display:none}
.view.on{display:block}

/* ============ DESK ============ */
.desk{display:grid;grid-template-columns:var(--qw,376px) 1fr;align-items:start;gap:0;transition:grid-template-columns .22s ease}
.desk.narrow{--qw:0px}
.desk.narrow .qrail{opacity:0;border-right:0;pointer-events:none;overflow:hidden}
.qrail{border-right:1px solid var(--line);background:#fbfaf8;height:calc(100vh - 64px);overflow-y:auto;padding:0 0 40px;transition:opacity .18s}

/* queue rail head */
.qhead{padding:26px 24px 16px}
.qhead .kicker{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--brass-deep);display:flex;align-items:center;gap:8px}
.qhead h1,.qhead h2{font-size:25px;font-weight:700;letter-spacing:-.015em;margin-top:11px;line-height:1.2}
.qhead h1 .n,.qhead h2 .n{font-size:34px;color:var(--brass-deep);margin-right:2px}
.qhead p{font-size:13px;color:var(--muted);margin-top:7px}

/* queue items */
.qlist{display:flex;flex-direction:column;padding:0 14px}
.qitem{width:100%;text-align:left;font:inherit;color:inherit;background:none;border:0;border-radius:12px;padding:14px 15px 14px 16px;cursor:pointer;position:relative;display:block;transition:background .15s}
.qitem:before{content:"";position:absolute;left:6px;top:16px;bottom:16px;width:3px;border-radius:3px;background:transparent;transition:background .15s}
.qitem:hover{background:#f4f2ee}
.qitem.on{background:var(--white);box-shadow:var(--shadow-s)}
.qitem.on:before{background:var(--brass)}
.qitem:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
.qitem .qt{font-size:14.5px;font-weight:600;letter-spacing:-.005em;line-height:1.35}
.qitem .qs{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.4}
.qitem .qm{display:flex;align-items:center;gap:9px;margin-top:9px;font-size:11.5px;color:var(--muted);flex-wrap:wrap}
.age{display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:11.5px}
.age i{width:6px;height:6px;border-radius:50%;background:var(--brass);display:block}
.age.hot{color:var(--danger)}
.age.hot i{background:var(--danger)}
.qsep{height:1px;background:var(--line);margin:14px 24px}
/* --- rail: collapse control lives on the rail edge, and the rail keeps the
       list you opened the document from (queue OR Daftar Pustaka) --- */
.desk{position:relative}
.qlib{display:none;padding-bottom:24px}
body.lib .qmain{display:none}
body.lib .qlib{display:block}
.backlib{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;margin-bottom:13px;font:inherit;font-size:12.5px;font-weight:600;color:var(--navy);cursor:pointer}
.backlib:hover{text-decoration:underline;text-underline-offset:3px}
.backlib svg{width:14px;height:14px}
.liblist{padding:0 24px}
.libgrp+.libgrp{margin-top:15px}
.libgrp .gs{display:block;font-size:11px;font-weight:700;letter-spacing:.085em;text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.librow{display:flex;align-items:center;gap:9px;padding:7px 9px;margin:0 -9px;border-radius:7px;font-size:12.5px;cursor:pointer;background:none;border:0;width:calc(100% + 18px);text-align:left;font-family:inherit;color:inherit}
.librow:hover{background:var(--white)}
.librow.on{background:var(--white);box-shadow:var(--shadow-s);font-weight:600}
.librow .spine{width:3px;height:15px;border-radius:2px;background:var(--line);flex:0 0 3px}
.librow.st-on .spine{background:var(--ok)}
.librow.st-wait .spine{background:var(--brass)}
.librow.st-future .spine{background:var(--brass);opacity:.45}
.librow .ln{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.librow .lv{color:var(--faint);font-size:11.5px;flex:0 0 auto}
.railtog{position:absolute;top:50%;left:var(--qw,376px);transform:translate(-50%,-50%);z-index:6;
  width:22px;height:46px;border-radius:7px;border:1px solid var(--line);background:var(--white);
  box-shadow:var(--shadow-s);cursor:pointer;display:grid;place-items:center;color:var(--muted);
  transition:left .22s ease,color .14s,border-color .14s}
.railtog:hover{color:var(--ink);border-color:#c9cdd7}
.railtog svg{width:14px;height:14px;transition:transform .22s ease}
.desk.narrow .railtog{left:0;transform:translate(2px,-50%)}
.desk.narrow .railtog svg{transform:rotate(180deg)}
body.focus .railtog{display:none}
.zbtn.on{background:var(--navy);border-color:var(--navy);color:#fff}
/* finding text inside THIS document is a different job from finding a document */
.docfind{display:flex;align-items:center;gap:6px;margin-left:auto;position:relative}
.docfind>svg{width:14px;height:14px;color:var(--faint);position:absolute;left:9px;pointer-events:none}
.docfind input{width:178px;height:27px;border:1px solid var(--line);border-radius:7px;background:var(--white);
  padding:0 8px 0 28px;font:inherit;font-size:12px;color:var(--ink)}
.docfind input:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(27,42,74,.08)}
.docfind .hits{font-size:11.5px;color:var(--muted);min-width:42px;text-align:right;font-variant-numeric:tabular-nums}
mark.hit{background:rgba(200,168,106,.42);border-radius:2px;padding:0 1px}
mark.hit.cur{background:var(--brass);color:#fff}
/* one search box per screen: the big one owns Daftar Pustaka */
/* no global top-bar search: Daftar Pustaka has its own, and the review desk
   searches inside ONE document — two different jobs, two different places */

/* live block */
.live{padding:4px 24px 0}
.live .lh{display:flex;align-items:baseline;gap:9px;margin-bottom:3px}
.live .lh h3{font-size:14.5px;font-weight:700;letter-spacing:-.005em}
.live .lh .c{font-family:'Source Serif 4',Georgia,serif;font-size:19px;font-weight:700;color:var(--ok);margin-left:auto}
.live p{font-size:12.5px;color:var(--muted);margin-bottom:12px}
.lrow{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1px solid var(--line-soft);font-size:12.5px;cursor:pointer;background:none;border-left:0;border-right:0;border-bottom:0;width:100%;text-align:left;font-family:inherit;color:inherit}
.lrow:hover .ln{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.lrow .spine{width:3px;height:15px;border-radius:2px;background:var(--ok);flex:0 0 3px}
.lrow .ln{flex:1;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .lv{color:var(--faint);font-size:11.5px}
.lrow.pending .spine{background:var(--brass);opacity:.5}
.lrow.on .ln{color:var(--navy);font-weight:700}
.lrow.on .spine{box-shadow:0 0 0 2px var(--white),0 0 0 3px currentColor}
.live .all{margin-top:12px;font-size:12.5px;font-weight:600;color:var(--navy);background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.live .all:hover{text-decoration:underline;text-underline-offset:3px}

/* ============ WORK PANE ============ */
.work{height:calc(100vh - 64px);display:flex;flex-direction:column;overflow:hidden;min-width:0;container-type:inline-size}
.wh{padding:13px 32px 0;flex:0 0 auto}
.wh .crumbs{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px;margin-bottom:7px}
.wh .crumbs b{color:var(--ink);font-weight:600}
.wh h1{font-size:23px;font-weight:700;letter-spacing:-.016em;line-height:1.25;max-width:none}
.wh .sub{font-size:13.5px;color:var(--muted);margin-top:4px}
.whrow{display:flex;align-items:flex-start;gap:20px}
.whrow .meta{margin-left:auto;text-align:right;flex:0 0 auto;padding-top:3px;line-height:1.5}
.whrow .meta .mono{margin-top:6px}
/* rail toggle + focus toggle */
.vtog{border:1px solid var(--line);background:var(--white);border-radius:8px;padding:4px 10px;font:inherit;font-size:11.5px;font-weight:600;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.vtog:hover{border-color:#c9cdd7;color:var(--ink)}
.vtog svg{width:13px;height:13px}
.crumbs .sp{flex:1}
.whrow .meta .mono{font-size:11.5px;color:var(--muted);display:block}
.whrow .meta .up{font-size:12px;color:var(--muted);margin-top:5px}

.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 11px;font-size:11.5px;font-weight:600;letter-spacing:.01em;border:1px solid transparent;white-space:nowrap}
.pill:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 6px}
.pill.ok{color:var(--ok);background:var(--ok-soft);border-color:var(--ok-line)}
.pill.wait{color:var(--wait);background:var(--wait-soft);border-color:var(--brass-line)}
.pill.off{color:var(--off);background:var(--off-soft);border-color:#dcdfe6}
.pill.future{color:var(--navy);background:#e9edf5;border-color:#cfd7e6}

/* consequence callout — the spine of E1.2 */
.conseq .ic{width:24px;height:24px;border-radius:7px;background:var(--brass);color:#fff;display:grid;place-items:center;flex:0 0 24px}
.conseq .ic svg{width:14px;height:14px}
.conseq .tx{min-width:0;flex:1}
.conseq p{font-size:12.8px;color:#5a4a30;line-height:1.4}
.conseq h4{display:inline;font-size:12.8px;font-weight:700;letter-spacing:.005em;color:#55432a;margin-right:3px}
.conseq p b{color:#3f3524;font-weight:600}
.conseq .swap{display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 0 auto;font-size:12px}
.swap .box{background:var(--white);border:1px solid var(--brass-line);border-radius:7px;padding:3px 9px;line-height:1.25}
.swap .box .k{display:block;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.swap .box b{font-size:12.5px;font-weight:600}
.swap .ar{color:var(--brass-deep);font-weight:700}

/* tabs */
.tabs{display:flex;gap:2px;padding:0 32px;margin-top:9px;border-bottom:1px solid var(--line);position:relative;flex:0 0 auto}
.tab{background:none;border:0;padding:9px 15px 10px;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;align-items:center;gap:8px;transition:color .15s}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--navy);border-bottom-color:var(--navy)}
.tab .cnt{background:var(--danger-soft);color:var(--danger);border-radius:999px;font-size:11px;font-weight:700;padding:1px 7px}
.tab .cnt.zero{background:var(--off-soft);color:var(--muted)}

/* ---- compare: PDF | extracted text ---- */
.pane{display:none;padding:0 32px 0;min-height:0}
.pane.on{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.pane#p-err.on,.pane#p-det.on{display:block;overflow-y:auto;padding-bottom:24px}
.cmp{display:grid;grid-template-columns:var(--split,1fr 1fr);gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--white);margin-top:9px;margin-bottom:10px;box-shadow:var(--shadow-s);flex:1 1 auto;min-height:0;grid-template-rows:minmax(0,1fr)}
.col{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.col+.col{border-left:1px solid var(--line)}
.colh{display:flex;align-items:center;gap:9px;padding:7px 13px;background:#f7f7f5;border-bottom:1px solid var(--line);min-height:38px;flex:0 0 auto}
.colh .lb{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.colh .tools{margin-left:auto;display:flex;align-items:center;gap:5px}
.zbtn{border:1px solid var(--line);background:var(--white);border-radius:7px;width:26px;height:26px;display:grid;place-items:center;cursor:pointer;color:var(--muted);font-size:13px;line-height:1}
.zbtn:hover{border-color:#c9cdd7;color:var(--ink)}
.pg{font-size:11.5px;color:var(--muted);font-weight:600;min-width:66px;text-align:center}
.scroll{flex:1 1 auto;min-height:0;height:auto;overflow-y:auto;scrollbar-width:thin}
.scroll::-webkit-scrollbar{width:9px}
.scroll::-webkit-scrollbar-thumb{background:#d6d8de;border-radius:9px;border:3px solid var(--white)}

/* the PDF facsimile */
.pdfscroll{background:#e8e7e3;padding:14px 0}
.zlv{font-size:11px;font-weight:700;color:var(--muted);min-width:38px;text-align:center;font-variant-numeric:tabular-nums}
.sheetpg{width:min(calc(390px * var(--pz,1)),calc(100% - 28px));zoom:var(--pz,1);margin:0 auto 16px;background:var(--page);box-shadow:0 2px 10px rgba(14,23,48,.14);padding:34px 34px 26px;position:relative;font-family:'Source Serif 4',Georgia,serif;font-size:9.4px;line-height:1.72;color:#20242c}
.sheetpg .lambang{width:26px;height:26px;margin:0 auto 8px;display:block;opacity:.72}
.sheetpg .ttl{text-align:center;font-weight:700;font-size:9.6px;letter-spacing:.05em;line-height:1.5;text-transform:uppercase}
.sheetpg .no{text-align:center;font-weight:700;font-size:9.6px;letter-spacing:.05em;margin-top:3px;text-transform:uppercase}
.sheetpg .rule{height:1px;background:#c9c6bd;margin:11px 0}
.sheetpg .ps{font-weight:700;margin:9px 0 3px;font-size:9.4px}
.sheetpg p{margin-bottom:7px;text-align:justify;hyphens:auto}
.sheetpg .ind{padding-left:16px}
.sheetpg .pn{position:absolute;bottom:11px;left:0;right:0;text-align:center;font-size:8px;color:#8b8579}
.sheetpg mark{background:rgba(169,130,79,.28);box-shadow:0 0 0 1px rgba(169,130,79,.4);border-radius:2px;padding:0 1px}

/* extracted text blocks */
.txtscroll{padding:14px 16px;background:var(--white)}
.blk{border:1px solid transparent;border-radius:9px;padding:9px 11px 10px;position:relative;transition:background .14s,border-color .14s}
.blk:hover{background:#faf9f7;border-color:var(--line)}
.blk .bh{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.ref{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:500;color:var(--navy);background:#eaeef6;border:1px solid #d7dfec;border-radius:5px;padding:1px 6px;letter-spacing:-.01em;white-space:nowrap}
.blk .bt{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.flag{margin-left:auto;opacity:0;border:1px solid var(--line);background:var(--white);border-radius:7px;font-size:11.5px;font-weight:600;color:var(--muted);padding:3px 9px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:opacity .14s,color .14s,border-color .14s;white-space:nowrap}
.blk:hover .flag,.blk.flagged .flag{opacity:1}
.flag:hover{color:var(--danger);border-color:var(--danger-line)}
.flag svg{width:12px;height:12px}
.blk .bx{font-size:13px;line-height:1.62;color:#2b3240;white-space:pre-wrap}
.blk.flagged{background:var(--danger-soft);border-color:var(--danger-line)}
.blk.flagged .flag{color:var(--danger);border-color:var(--danger-line);background:#fff}
.blk.flagged .bx{color:#3a2622}
.blk .bad{background:rgba(150,48,31,.13);border-bottom:1.5px solid rgba(150,48,31,.45);border-radius:2px;padding:0 1px}
.blk .note{display:none;margin-top:8px;font-size:12px;color:var(--danger);background:#fff;border:1px solid var(--danger-line);border-radius:7px;padding:7px 10px;line-height:1.45}
.blk.flagged .note{display:block}
.blk .note b{font-weight:600}
/* a correction is a completed action, not an open error — so it reads green */
.blk.editing{background:#fff;border-color:var(--navy);box-shadow:0 0 0 3px rgba(27,42,74,.08)}
.blk.editing .bx{outline:0;background:#fff;border-radius:5px}
.blk.fixed{background:rgba(30,110,70,.055);border-color:rgba(30,110,70,.28)}
.blk.fixed .flag{opacity:1;color:var(--ok);border-color:rgba(30,110,70,.35);background:#fff}
.blk.fixed .note{display:block;color:#1c5c3c;border-color:rgba(30,110,70,.3)}
.blk .note .was{display:block;margin-top:5px;color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(150,48,31,.45)}
.bacts{margin-left:auto;display:flex;gap:6px;align-items:center}
.blk .bacts .flag{margin-left:0;position:static}
.blk:hover .bacts .flag,.blk.editing .bacts .flag,.blk.fixed .bacts .flag{opacity:1}
.flag.save{color:#fff;background:var(--ok);border-color:var(--ok)}
.flag.revert{color:var(--danger);border-color:var(--danger-line)}
.blk.editing .bx{outline:0;background:#fff;border-radius:5px;box-shadow:0 0 0 2px rgba(27,42,74,.10);padding:4px 6px;margin:-4px -6px}
.blk.editing del,.blk.fixed del{user-select:none}
.flagbar.ok{border-color:rgba(30,110,70,.3);background:rgba(30,110,70,.06);color:#1c5c3c}
.linkish{background:none;border:0;padding:0;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.linkish:hover{color:var(--ink)}
.gsteps{margin:12px 0 0;padding:0;list-style:none;counter-reset:g}
.gsteps li{counter-increment:g;position:relative;padding:8px 0 8px 34px;font-size:13.2px;line-height:1.5;border-top:1px solid var(--line-soft)}
.gsteps li::before{content:counter(g);position:absolute;left:0;top:8px;width:22px;height:22px;border-radius:50%;
  background:var(--navy);color:#fff;font-size:11.5px;font-weight:700;display:grid;place-items:center}
.gsteps li b{font-weight:650;color:var(--ink)}
.gnote{margin-top:14px;display:grid;gap:9px;background:#faf9f7;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:12.5px;color:var(--muted);line-height:1.5}
.gnote b{color:var(--ink);font-weight:650}
/* the decision row is chrome above the document: it must cost one line, not three */
.decide{margin:8px 32px 0;border:1px solid var(--brass-line);border-radius:11px;flex:0 0 auto;
  background:linear-gradient(180deg,#fdf9f1,#faf4e8);box-shadow:var(--shadow-s)}
.drow{display:flex;align-items:center;gap:11px;padding:7px 11px;min-width:0;flex-wrap:wrap}
.dic{width:22px;height:22px;border-radius:6px;background:var(--brass);color:#fff;display:grid;place-items:center;flex:0 0 22px}
.dic svg{width:13px;height:13px}
.dlab{font-size:12.5px;font-weight:700;color:#55432a;flex:0 0 auto}
.dmore{background:none;border:0;padding:0;font:inherit;font-size:11.8px;font-weight:600;color:#8a6d33;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;flex:0 0 auto}
.dmore:hover{color:#55432a}
.dsep{flex:1 1 auto;min-width:8px}
.drow .swap{display:flex;align-items:center;gap:7px;flex:0 0 auto;font-size:12px}
.drow .swap .box{border:1px solid var(--brass-line);background:#fff;border-radius:7px;padding:3px 9px;
  white-space:nowrap;flex:0 0 auto}
.drow .swap .box b{font-weight:650;font-size:11.8px;color:#3f3524}
.drow .swap .box.out b{color:#8a6d33;text-decoration:line-through;text-decoration-color:rgba(150,48,31,.4)}
.drow .swap .ar{color:#8a6d33;flex:0 0 auto}
.drow .idc{flex:0 0 auto}
.drow .idc .av{width:26px;height:26px;flex:0 0 26px;font-size:10px}
.drow .idc .t{display:none}
.drow .efld{flex:0 0 auto;gap:7px}
.drow .efld label{font-size:11.8px}
.drow .efld input{padding:4px 9px;width:108px;font-size:12.5px}
.btn.sm{padding:6px 12px;font-size:12.5px;border-radius:8px}
.btn.sm svg{width:14px;height:14px}
body.ro .dlab,body.ro .drow .swap,body.ro .dmore{display:none}
body.ro .dic{background:var(--muted)}
@container (max-width:1150px){.drow .dlab{display:none}}

@container (max-width:1000px){.drow .efld label{display:none;}.drow .efld::before{content:"Berlaku";font-size:11.5px;color:var(--muted)}}
@container (max-width:860px){.drow .dmore{display:none}}
@container (max-width:760px){.drow .swap{display:none}}

.pick{display:grid;gap:8px;margin:12px 0 14px}
.pk{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;transition:.14s}
.pk:hover{border-color:#c9cdd7}
.pk.on{border-color:var(--navy);background:#fbfbfd;box-shadow:0 0 0 2px rgba(27,42,74,.07)}
.pk input{margin-top:2px;accent-color:var(--navy)}
.pkb{display:block;font-size:13px;line-height:1.45}
.pkb b{display:block;font-weight:650}
.pkb span{display:block;font-size:12px;color:var(--muted)}
.pkb .pkw{color:var(--brass-ink,#8a6d33);font-size:11.6px;margin-top:3px}
.pknone{font-size:12.2px;color:var(--muted);background:#faf9f7;border:1px solid var(--line);border-radius:9px;padding:9px 11px;line-height:1.5}
/* Daftar Pustaka — recognise the document before you read its name */
.vmode{display:inline-flex;border:1px solid var(--line);background:var(--white);border-radius:9px;overflow:hidden;margin-left:8px}
.vmode button{display:inline-flex;align-items:center;gap:6px;border:0;background:none;font:inherit;font-size:12px;font-weight:600;
  color:var(--muted);padding:6px 11px;cursor:pointer}
.vmode button+button{border-left:1px solid var(--line)}
.vmode button svg{width:14px;height:14px}
.vmode button.on{background:var(--navy);color:#fff}
.libgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:16px}
body.liblist-on .libgrid{display:none}
body:not(.liblist-on) .reg{display:none}
.libcard{display:flex;flex-direction:column;text-align:left;font:inherit;color:inherit;cursor:pointer;
  border:1px solid var(--line);border-radius:13px;background:var(--white);overflow:hidden;padding:0;
  box-shadow:var(--shadow-s);transition:box-shadow .15s,border-color .15s,transform .15s}
.libcard:hover{border-color:#c2c7d2;box-shadow:0 6px 20px rgba(20,24,34,.11);transform:translateY(-2px)}
.libcard .cover{height:158px;background:linear-gradient(180deg,#f6f5f2,#eeece7);display:grid;place-items:center;
  border-bottom:1px solid var(--line)}
.libcard .cover .thumb{transform:scale(1.62);transform-origin:center}
.libcard .meta{display:block;padding:12px 13px 13px}
.libcard .nm{display:block;font-size:13.4px;font-weight:650;letter-spacing:-.008em;line-height:1.3}
.libcard .sub{display:block;font-size:11.8px;color:var(--muted);margin-top:3px;line-height:1.35;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.libcard .vers{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.vchip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;border:1px solid var(--line);
  border-radius:999px;padding:2px 9px 2px 7px;color:var(--muted);background:var(--white)}
.vchip:hover{border-color:var(--navy);color:var(--ink)}
.vchip i{width:6px;height:6px;border-radius:50%;background:var(--line);flex:0 0 6px}
.vchip.st-on i{background:var(--ok)} .vchip.st-wait i{background:var(--brass)}
.vchip.st-future i{background:var(--brass);opacity:.5} .vchip.st-off i{background:#b9bcc4}
.libcard .cnt{display:block;font-size:11.5px;color:var(--faint);margin-top:9px}
/* the thumbnail is a real page render, scaled — not an icon that stands for one */
.pthumb{display:block;width:116px;height:150px;overflow:hidden;position:relative;
  box-shadow:0 2px 9px rgba(14,23,48,.17);background:var(--page);border-radius:2px}
.sheetpg.mini{width:390px;zoom:1;transform:scale(.2974);transform-origin:top left;position:absolute;top:0;left:0;
  padding:26px 26px 20px;box-shadow:none;margin:0;min-height:504px;pointer-events:none}
.sheetpg.mini p{font-size:9.2px}
.libcard .cover{height:172px}
.libcard .cover .thumb{transform:none}
.pthumb.sm{width:34px;height:44px;box-shadow:0 1px 4px rgba(14,23,48,.2)}
.pthumb.sm .sheetpg.mini{transform:scale(.0872)}
/* book cover + index page, rendered at the same base width as a statute page */
.sheetpg .cover{display:flex;flex-direction:column;height:100%;text-align:center;padding-top:18px}
.sheetpg .cvtop{font-size:8.2px;letter-spacing:.13em;text-transform:uppercase;color:#8b8579}
.sheetpg .cvt{font-size:17px;font-weight:700;line-height:1.25;margin-top:52px;color:#1b2233}
.sheetpg .cvs{font-size:9.6px;line-height:1.45;color:#5b6070;margin-top:9px;padding:0 14px}
.sheetpg .cvrule{height:2px;background:#a9824f;width:54px;margin:20px auto}
.sheetpg .cva{font-size:10.4px;font-weight:600;color:#2b3240}
.sheetpg .cve{font-size:9px;color:#8b8579;margin-top:6px}
.sheetpg .idxtab{margin-top:8px;font-size:8.6px}
.sheetpg .idxtab .ih{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;font-size:7.4px;color:#8b8579;border-bottom:1px solid #c9c6bd;padding-bottom:4px}
.sheetpg .idxtab .ir{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:5px 0;border-bottom:1px solid #e4e1d8}
/* status you can read across the whole grid without stopping on any one card */
.libcard .band{display:flex;align-items:center;gap:7px;padding:7px 13px;font-size:11.5px;font-weight:700;
  letter-spacing:.02em;border-bottom:1px solid var(--line)}
.libcard .band i{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.libcard.st-on .band{background:rgba(30,110,70,.1);color:#14603c} .libcard.st-on .band i{background:var(--ok)}
.libcard.st-wait .band{background:rgba(200,168,106,.19);color:#7a5c1d} .libcard.st-wait .band i{background:var(--brass)}
.libcard.st-future .band{background:rgba(200,168,106,.1);color:#8a7340} .libcard.st-future .band i{background:var(--brass);opacity:.5}
.libcard.st-off .band{background:#f1f1ef;color:var(--muted)} .libcard.st-off .band i{background:#b9bcc4}
.libcard.st-on .cover{background:linear-gradient(180deg,#f4f8f5,#e9f0eb)}
.libcard.st-wait .cover{background:linear-gradient(180deg,#fbf7ee,#f4ecda)}
.vchip.vdim{opacity:.3}
.libnone{padding:34px 4px;font-size:13.5px;color:var(--muted)}
.libnone b{color:var(--ink)}
/* list view: a scannable table, not a sparse one */
.srchead .thumb{flex:0 0 34px;width:34px;height:44px}
.srchead .thumb .cap{top:11px;font-size:7.5px;left:2px;right:2px}
.srchead .thumb .cap small{font-size:5.5px;letter-spacing:0}
.srchead .thumb i{left:5px;right:5px;height:1.5px}
.srchead .thumb.law::before{top:4px;width:6px;height:6px}
.srchead .st{font-size:14px}
.srchead .sa{font-size:12px}
.vrow{padding:9px 22px 9px 19px}
.vrow[data-st="on"]{border-left-color:var(--ok)}
.vrow[data-st="wait"]{border-left-color:var(--brass)}
.vrow[data-st="future"]{border-left-color:rgba(200,168,106,.45)}
.vrow[data-st="off"]{border-left-color:#d5d7dc}
.vrow:hover{background:#fbfaf8}
.srcgroup+.srcgroup{border-top:0}
.vrow .vlabel{font-size:13px}
.vrow .retr{font-size:11.8px;margin-top:2px}
.vrow .cell{font-size:12.6px}
.vrow .cell .cs{font-size:11.4px}
.colhead{padding:8px 22px}

.fixrow{display:grid;grid-template-columns:auto 1fr;gap:11px;padding:11px 0;border-top:1px solid var(--line-soft);align-items:start}
.fixrow b{font-size:13px;color:var(--ink)}
.fixrow .was{font-size:12.8px;margin-top:3px;color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(150,48,31,.45)}
.fixrow .now{font-size:12.8px;margin-top:2px;color:#1c5c3c;font-weight:500}
.fixrow .diffline{font-size:12.8px;margin-top:3px;line-height:1.55}
del{text-decoration:line-through;text-decoration-color:rgba(150,48,31,.6);color:#9a5a4e;background:rgba(150,48,31,.09);border-radius:3px;padding:0 2px}
ins{text-decoration:none;color:#14603c;background:rgba(30,110,70,.15);border-radius:3px;padding:0 2px;font-weight:600}
.fixrow .who{font-size:11.5px;color:var(--faint);margin-top:4px}

/* what to do on this page — above the fold, not below it */
.howto{display:flex;align-items:center;gap:0;margin-top:7px;border:1px solid var(--line);background:var(--white);border-radius:10px;padding:0;font-size:12.5px;color:var(--muted);flex:0 0 auto;overflow:hidden}
.howto .st{display:flex;align-items:center;gap:7px;padding:5px 12px;flex:1;min-width:0;line-height:1.25}
.howto .st+.st{border-left:1px solid var(--line)}
.howto .n{width:18px;height:18px;border-radius:50%;background:var(--navy);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;flex:0 0 18px}
.howto b{color:var(--ink);font-weight:600}
.howto.ro .n{background:var(--muted)}
.howto .s-read{display:none}
body.ro .howto .s-review{display:none}
body.ro .howto .s-read{display:flex}
body.ro .howto .n{background:var(--muted)}
/* flag summary bar */
.flagbar{display:flex;align-items:center;gap:11px;margin-top:0;margin-bottom:10px;flex:0 0 auto;border:1px solid var(--danger-line);background:var(--danger-soft);border-radius:11px;padding:11px 15px;font-size:13px;color:#5c2a20}
.flagbar.none{display:none}
.flagbar b{font-weight:700}
.flagbar .rt{margin-left:auto}

/* ---- details pane (E1.1 evidence) ---- */
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.card{background:var(--white);border:1px solid var(--line);border-radius:13px;padding:17px 19px;box-shadow:var(--shadow-s)}
.card h4{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.kv{display:grid;grid-template-columns:132px 1fr;gap:7px 14px;font-size:13px;align-items:baseline}
.kv dt{color:var(--muted)}
.kv dd{font-weight:500}
.sum{margin-top:13px;padding-top:13px;border-top:1px solid var(--line-soft)}
.sum .lb{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.sumval{font-family:'IBM Plex Mono',monospace;font-size:11.5px;line-height:1.75;color:#39404e;word-break:break-all;background:#f7f7f5;border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.sumnote{font-size:12px;color:var(--muted);margin-top:7px;display:flex;align-items:center;gap:6px}
.sumnote svg{width:13px;height:13px;color:var(--ok);flex:0 0 13px}
.trail{list-style:none;display:flex;flex-direction:column;gap:0}
.trail li{display:grid;grid-template-columns:auto 1fr;gap:12px;padding-bottom:15px;position:relative}
.trail li:not(:last-child):after{content:"";position:absolute;left:5px;top:15px;bottom:0;width:1px;background:var(--line)}
.tdot{width:11px;height:11px;border-radius:50%;background:var(--white);border:2px solid var(--line);margin-top:4px;z-index:1}
.tdot.on{border-color:var(--ok);background:var(--ok)}
.tdot.w{border-color:var(--brass);background:var(--brass)}
.trail b{display:block;font-size:13px;font-weight:600}
.trail span{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.chain{display:flex;flex-direction:column;gap:9px;font-size:13px}
.chain .cl{color:var(--muted)}
.chain .cl b{color:var(--ink);font-weight:600}

/* focus mode */
body.focus .conseq,body.focus .howto,body.focus .flagbar{display:none}
body.focus .desk{--qw:0px}
body.focus .qrail{opacity:0;border-right:0;pointer-events:none;overflow:hidden}
body.focus .wh{padding-top:9px}
body.focus .wh h1,body.focus .wh .sub,body.focus .whrow .meta .up,body.focus .whrow .meta .mono{display:none}
body.focus .tabs{margin-top:6px}
/* read-only mode (library browsing) */
body.ro .conseq,body.ro .flagbar,body.ro .flag,body.ro #tab-err{display:none}
body.ro .efld,body.ro #a-approve-main{display:none}
/* ---- action bar ---- */
.actbar .idc .t span{display:none}
.actbar .idc .av{width:27px;height:27px;flex:0 0 27px;font-size:10.5px}
.efld input{padding:5px 10px;width:122px}
.idc{display:flex;align-items:center;gap:10px}
.idc .av{width:31px;height:31px;font-size:11px;flex:0 0 31px}
.idc .t{line-height:1.3}
.idc .t b{display:block;font-size:12.8px;font-weight:600}
.idc .t span{display:block;font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:5px}
.idc .t span svg{width:11px;height:11px;color:var(--ok)}
.efld{display:flex;align-items:center;gap:9px}
.efld label{font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.efld input{border:1px solid var(--line);background:var(--white);border-radius:8px;padding:6px 11px;font-size:13px;width:142px}
.efld input:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(27,42,74,.09)}
.efld .hint{font-size:11.5px;color:var(--muted);font-weight:500;white-space:nowrap}
.actbar .sp{flex:1}
.btn{border:1px solid transparent;border-radius:9px;padding:9px 17px;font-weight:600;font-size:13.5px;cursor:pointer;background:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:background .16s,border-color .16s,color .16s;white-space:nowrap}
.btn svg{width:15px;height:15px}
.btn.primary{background:var(--navy);color:#fff}
.btn.primary:hover{background:var(--navy-deep)}
.btn.brass{background:var(--brass);color:#fff;box-shadow:0 1px 2px rgba(138,106,61,.3)}
.btn.brass:hover{background:var(--brass-deep)}
.btn.light{background:var(--white);color:var(--navy);border-color:var(--line)}
.btn.light:hover{border-color:#c9cdd7;background:#fbfbfa}
.btn.ghost{background:none;color:var(--muted);padding:9px 11px}
.btn.ghost:hover{color:var(--ink)}
.btn.danger{background:var(--white);color:var(--danger);border-color:var(--danger-line)}
.btn.danger:hover{background:var(--danger-soft)}
.btn.sm{padding:7px 13px;font-size:12.5px;border-radius:8px}
.btn[disabled]{opacity:.42;cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* ============ REGISTRY ============ */
.regwrap{padding:26px 34px 60px;max-width:1560px}
.rhead{display:flex;align-items:flex-end;gap:34px;margin-bottom:17px}
.rhead .rh-l{flex:1;min-width:0}
.rhead h1{font-size:27px;font-weight:700;letter-spacing:-.016em}
.rhead p{font-size:13.5px;color:var(--muted);margin-top:6px;max-width:none}
/* search is the main way into a corpus this size, so it gets real weight */
.regsearch{flex:0 1 400px;min-width:220px;position:relative}
.regsearch input{width:100%;height:46px;border:1px solid var(--line);border-radius:11px;background:var(--white);
  padding:0 15px 0 44px;font:inherit;font-size:14px;color:var(--ink);box-shadow:var(--shadow-s);transition:.14s}
.regsearch input::placeholder{color:var(--faint)}
.regsearch input:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(20,30,60,.08)}
.regsearch svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--faint);pointer-events:none}
/* thumbnails: a reviewer should recognise the document before reading its name */
.srchead .thumb{flex:0 0 58px}
.thumb{width:58px;height:74px;border-radius:4px;overflow:hidden;position:relative;background:#fff;
  border:1px solid var(--line);box-shadow:0 1px 3px rgba(20,24,34,.13)}
.thumb i{position:absolute;left:9px;right:9px;height:2px;border-radius:1px;background:#d9d9d4}
.thumb.law::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:9px;height:9px;
  background:#b9a06a;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.thumb .cap{position:absolute;left:4px;right:4px;top:20px;text-align:center;font-family:'Source Serif 4',Georgia,serif;
  font-size:11.5px;font-weight:700;line-height:1.15;color:#232833;letter-spacing:-.012em}
.thumb .cap small{display:block;font-size:8.5px;font-weight:600;letter-spacing:.04em;color:#767b86;font-family:inherit}
.thumb.book .cap{color:#f0e4cc;top:24px}
.thumb.book .cap small{color:#c8a86a}
.thumb.book{background:linear-gradient(160deg,#1d2740,#111a2e);border-color:#0d1424}
.thumb.book::after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:rgba(255,255,255,.14)}
.thumb.book i{background:rgba(255,255,255,.34);left:14px;right:10px}
.thumb.book em{position:absolute;left:14px;right:10px;top:15px;height:4px;background:#c8a86a;border-radius:1px}
.thumb.index i{left:7px;width:18px;right:auto}
.thumb.index i.r{left:31px;width:20px;background:#c8c8c2}
.filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.fnote{margin-left:auto;font-size:12px;color:var(--faint);padding-left:18px}
.fnote b{color:var(--muted);font-weight:600}
.chip{border:1px solid var(--line);background:var(--white);border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:.14s}
.chip:hover{border-color:#c9cdd7;color:var(--ink)}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.chip .c{opacity:.6;font-weight:500;margin-left:5px}
.reg{background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-s)}
.colhead,.vrow{display:grid;grid-template-columns:2.4fr 1.15fr 1.5fr 1.25fr 24px;gap:16px;align-items:center}
.colhead{padding:11px 22px;background:#f7f7f5;border-bottom:1px solid var(--line);font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.srcgroup+.srcgroup{border-top:1px solid var(--line)}
/* the source band is NOT a data row: it spans the width and owns its own
   rhythm, so the status / validity / approver columns stop looking empty */
.srchead{display:grid;grid-template-columns:34px auto minmax(0,1fr) auto auto;align-items:center;gap:11px;
  padding:8px 18px;background:#f7f6f3;border-bottom:1px solid var(--line)}
.srchead .sa{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.srchead .st{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srchead .vsum{font-size:11.8px;color:var(--muted);white-space:nowrap}
.srchead .slug{margin-left:18px}
.srchead .st{font-family:'Source Serif 4',Georgia,serif;font-size:16.5px;font-weight:700;letter-spacing:-.006em}
.srchead .sa{font-size:12.5px;color:var(--muted)}
.srchead .slug{margin-left:auto;font-size:11px;color:var(--faint);font-family:'IBM Plex Mono',monospace}
.vrow{padding:12px 22px 12px 19px;border:0;border-top:1px solid var(--line-soft);border-left:3px solid transparent;cursor:pointer;background:none;width:100%;text-align:left;font:inherit;color:inherit}
.vrow:hover{background:#fbfaf8}
.vrow:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
.vrow.live{border-left-color:var(--ok)}
.vrow.pend{border-left-color:var(--brass)}
.vlabel{font-size:13.8px;font-weight:600;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.retr{font-size:12.5px;margin-top:4px;display:flex;align-items:center;gap:6px;color:var(--muted)}
.retr.on{color:var(--ok);font-weight:500}
.retr i{width:5px;height:5px;border-radius:50%;background:currentColor;display:block;flex:0 0 5px}
.cell{font-size:12.8px;color:var(--muted)}
.cell b{color:var(--ink);font-weight:500}
.cs{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--muted)}
.chev{color:var(--faint);display:grid;place-items:center}
.chev svg{width:15px;height:15px}

/* ============ drawer ============ */
.scrim{position:fixed;inset:0;background:rgba(14,23,48,.34);opacity:0;pointer-events:none;transition:opacity .22s;z-index:50}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--paper);z-index:51;transform:translateX(102%);transition:transform .3s cubic-bezier(.32,.72,0,1);display:flex;flex-direction:column;box-shadow:var(--shadow-l)}
.drawer.open{transform:none}
.dhead{padding:20px 24px 16px;border-bottom:1px solid var(--line);background:var(--white)}
.dhead .r1{display:flex;align-items:flex-start;gap:12px}
.dhead .src{font-size:12.5px;color:var(--muted);font-weight:500}
.dhead h3{font-size:20px;font-weight:700;letter-spacing:-.012em;margin-top:3px}
.dhead .x{margin-left:auto;border:0;background:none;color:var(--muted);cursor:pointer;font-size:20px;line-height:1;padding:2px 5px;border-radius:7px}
.dhead .x:hover{background:var(--off-soft);color:var(--ink)}
.dstate{margin-top:13px;border-radius:11px;padding:12px 14px;border:1px solid var(--ok-line);background:var(--ok-soft)}
.dstate .s1{font-size:13.5px;font-weight:700;color:var(--ok);display:flex;align-items:center;gap:7px}
.dstate .s1 svg{width:15px;height:15px}
.dstate .s2{font-size:12.8px;color:#3d5348;margin-top:5px;line-height:1.5}
.dstate.q{border-color:var(--brass-line);background:var(--brass-soft)}
.dstate.q .s1{color:var(--wait)} .dstate.q .s2{color:#5a4a30}
.dstate.o{border-color:#dcdfe6;background:var(--off-soft)}
.dstate.o .s1{color:var(--off)} .dstate.o .s2{color:#4d5460}
.dbody{flex:1;overflow-y:auto;padding:20px 24px 24px;display:flex;flex-direction:column;gap:14px}
.dfoot{border-top:1px solid var(--line);background:var(--white);padding:13px 24px;display:flex;gap:9px;align-items:center}
.dfoot .sp{flex:1}

/* ============ confirm sheets ============ */
.dim{position:fixed;inset:0;background:rgba(14,23,48,.42);opacity:0;pointer-events:none;transition:.2s;z-index:60}
.dim.on{opacity:1;pointer-events:auto}
.sh{position:fixed;z-index:61;top:50%;left:50%;transform:translate(-50%,-46%) scale(.985);opacity:0;pointer-events:none;transition:.22s cubic-bezier(.32,.72,0,1);width:min(560px,calc(100% - 40px));background:var(--white);border-radius:16px;box-shadow:var(--shadow-l);overflow:hidden}
.sh.open{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
.sh{max-height:min(88vh,860px)}
.shh{padding:20px 24px 0}
.shh .kick{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--brass-deep)}
.shh h3{font-size:20px;font-weight:700;letter-spacing:-.013em;margin-top:8px}
.shb{padding:14px 24px 20px;display:flex;flex-direction:column;gap:13px;overflow-y:auto}
.shb p{font-size:13.5px;color:var(--muted);line-height:1.55}
.shb p b{color:var(--ink);font-weight:600}
.effect{border:1px solid var(--line);border-radius:11px;overflow:hidden}
.effect .er{display:grid;grid-template-columns:auto 1fr;gap:11px;padding:11px 14px;font-size:13px;align-items:start}
.effect .er+.er{border-top:1px solid var(--line-soft)}
.effect .er .m{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;flex:0 0 18px;margin-top:1px}
.effect .er .m svg{width:11px;height:11px;color:#fff}
.effect .er.plus .m{background:var(--ok)}
.effect .er.minus .m{background:var(--off)}
.effect .er b{font-weight:600}
.effect .er span{display:block;color:var(--muted);font-size:12.3px;margin-top:2px}
.idlock{display:flex;align-items:center;gap:11px;background:#f7f7f5;border:1px solid var(--line);border-radius:11px;padding:11px 14px}
.idlock .av{width:32px;height:32px;font-size:11px;flex:0 0 32px}
.idlock .t b{display:block;font-size:13px;font-weight:600}
.idlock .t span{display:block;font-size:11.8px;color:var(--muted);margin-top:1px}
.idlock .lk{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--muted)}
.idlock .lk svg{width:12px;height:12px}
.shf{border-top:1px solid var(--line);background:#fbfbfa;padding:13px 24px;display:flex;gap:9px;align-items:center}
.shf .sp{flex:1}
.shf .note{font-size:11.8px;color:var(--muted);max-width:24ch;line-height:1.4}
.err{display:none;border:1px solid var(--danger-line);background:var(--danger-soft);border-radius:11px;padding:13px 15px}
.err.on{display:block}
.err b{display:flex;align-items:center;gap:7px;font-size:13.3px;font-weight:700;color:var(--danger)}
.err b svg{width:15px;height:15px}
.err p{font-size:12.8px;color:#5c2a20;margin-top:6px;line-height:1.5}
.err .acts{display:flex;gap:8px;margin-top:11px}
.err .st{display:none;margin-top:11px;border-top:1px solid var(--danger-line);padding-top:10px;font-size:12.8px;color:#5c2a20;align-items:center;gap:7px}
.err .st.on{display:flex}
.err .st svg{width:14px;height:14px;flex:0 0 14px}

/* ============ toast ============ */
.toast{position:fixed;left:50%;top:78px;transform:translateX(-50%) translateY(-14px);background:var(--navy-deep);color:#fff;border-radius:12px;padding:13px 18px;display:flex;align-items:center;gap:11px;box-shadow:var(--shadow-l);opacity:0;pointer-events:none;transition:.25s;z-index:70;font-size:13.5px;max-width:calc(100% - 40px)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.toast .ic{width:21px;height:21px;border-radius:50%;background:var(--ok);display:grid;place-items:center;flex:0 0 21px}
.toast .ic svg{width:12px;height:12px;color:#fff}
.toast button{background:none;border:0;color:#a9c2f0;font-weight:600;font-size:13px;cursor:pointer;margin-left:6px}

/* ============ non-ideal states ============ */
.center{min-height:calc(100vh - 64px);display:grid;place-items:center;padding:40px}
.nis{max-width:430px;text-align:center}
.nis .ic{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;margin:0 auto 18px;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-s)}
.nis .ic svg{width:25px;height:25px;color:var(--muted)}
.nis h2{font-size:22px;font-weight:700;letter-spacing:-.012em}
.nis p{font-size:14px;color:var(--muted);margin-top:9px;line-height:1.55}
.nis .btns{margin-top:20px;display:flex;gap:9px;justify-content:center}
.nis .diag{margin-top:18px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--muted);background:var(--white);border:1px solid var(--line);border-radius:9px;padding:9px 12px;text-align:left}
.sk{background:linear-gradient(90deg,#e9e8e4 25%,#f2f1ee 37%,#e9e8e4 63%);background-size:400% 100%;animation:sh 1.35s ease infinite;border-radius:7px}
@keyframes sh{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ============ mock switcher ============ */
.mk{display:flex;gap:3px;align-items:center;background:#f1efea;border:1px solid var(--line);border-radius:9px;padding:3px;margin-left:4px}
.mk button{border:0;background:none;font:inherit;font-size:11px;font-weight:600;color:var(--muted);padding:4px 8px;border-radius:6px;cursor:pointer;white-space:nowrap}
.mk button:hover{background:#fff;color:var(--ink)}
.mk button.on{background:var(--navy);color:#fff}
@media (max-width:1180px){.mk{display:none}}

/* ============ responsive ============ */
@media (max-width:1180px){
  .desk{grid-template-columns:320px 1fr}
  .railtog{left:320px}
  .dgrid{grid-template-columns:1fr}
}
/* Side-by-side is the task. Keep it while two columns are still readable,
   then stack and let the pane scroll — never squeeze both to nothing. */
@media (max-width:1100px){
  .cmp{grid-template-columns:1fr}
  .col+.col{border-left:0;border-top:1px solid var(--line)}
  .work{height:auto;min-height:calc(100vh - 64px);overflow:visible}
  .scroll{height:360px}
  /* the decision bar stops fitting on one line here, not at 860 */
    .actbar .sp{display:none}
  #acts-review,#acts-read{flex-wrap:wrap}
  .crumbs .vtog{font-size:0;padding:4px 7px;gap:0}
  .crumbs .vtog svg{width:14px;height:14px}
}
/* the version table has a min-content floor; below it, one row per line */
@media (max-width:1000px){
  .colhead{display:none}
  .vrow{grid-template-columns:1fr;gap:6px}
  .srchead{flex-wrap:wrap}
  .srchead .slug{display:none}
}
@media (max-width:860px){
  :root{--rail:0px}
  .rail{display:none}
  .app{grid-template-columns:1fr}
  .desk{grid-template-columns:1fr}
  .railtog{display:none}
  .qrail{min-height:0;border-right:0;border-bottom:1px solid var(--line)}
  .top .inner{padding:0 16px;gap:10px}
  .search{display:none}
  .who .nm{display:none}
  .wh,.tabs,.pane,.conseq,.actbar,.regwrap{padding-left:16px;padding-right:16px}
      .actbar .sp{display:none}
  .colhead{display:none}
  .vrow{grid-template-columns:1fr;gap:6px}
  /* side-by-side is the whole task, so it only stacks once the screen
     genuinely cannot hold two columns — and then the pane scrolls */
  .scroll{height:340px}
  .vtog span,.vtog{font-size:11px}
  .rhead{flex-direction:column;align-items:stretch;gap:13px}
  .regsearch{flex:1 1 auto}
  .fnote{margin-left:0;padding-left:0;margin-top:4px}
  .srchead{flex-wrap:wrap}
  .srchead .slug,.srchead .vsum{display:none}
}

/* E1 production interaction port: v3 tokens, responsive phone workflow. */
[hidden]{display:none!important}
.app>main{min-width:0}
a.btn,.vchip,.libcard a{text-decoration:none}
button:disabled{opacity:.45;cursor:not-allowed}
:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
.skiplink{position:fixed;top:8px;left:8px;z-index:100;background:var(--white);padding:10px;transform:translateY(-150%)}
.skiplink:focus{transform:none}
.mobilenav,.mobile-compare{display:none}
.reader-on .desk{position:relative}
.reader-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:8px;font-size:12px;color:var(--muted)}
.reader-tools select{border:1px solid var(--line);background:var(--white);border-radius:7px;padding:4px}
.reader-tools label{display:inline-flex;align-items:center;gap:5px}
.reader-tools output{min-width:34px;text-align:center;font-variant-numeric:tabular-nums}
.correction-input{display:block;width:100%;resize:vertical;border:1px solid var(--navy);border-radius:6px;padding:9px;font-size:13px;line-height:1.62;background:var(--white)}
.blk .bh{flex-wrap:wrap}
.blk .note{white-space:pre-wrap}
.pthumb img{display:block;width:100%;height:auto}
.libcard{cursor:default}
.libcard .nm{font-family:Inter,system-ui,sans-serif}
.kv dd{min-width:0;overflow-wrap:anywhere}
.reader-on .pdfscroll{position:relative;overflow:auto}
.reader-on .txtscroll{position:relative}
.reader-on .sheetpg{zoom:1;width:calc((100% - 28px)*var(--reader-zoom,1));max-width:none;flex-shrink:0}
.reader-on .desk.narrow{grid-template-columns:0 minmax(0,1fr)}
.reader-on .drow .efld input{width:144px}
.top .who .nm{max-width:260px}.top .who .nm b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh:not(.open){visibility:hidden}.sh.open{visibility:visible}
.sh [data-sheet-status]{margin-top:14px;font-size:13px;color:var(--muted)}
@media (min-width:861px){body.focus .reader-on .desk,body.reader-on.focus .desk{grid-template-columns:0 minmax(0,1fr)}}
@media (max-width:1100px) and (min-width:861px){
 .reader-on .desk{grid-template-columns:260px minmax(0,1fr)}
 .reader-on .railtog{left:260px}
 .reader-on .work{height:calc(100dvh - 64px);min-height:0;overflow:hidden}
 .reader-on .cmp{grid-template-columns:1fr 1fr}
 .reader-on .scroll{height:auto}
 .reader-on .col+.col{border-top:0;border-left:1px solid var(--line)}
 .reader-on .wh,.reader-on .tabs,.reader-on .pane{padding-left:18px;padding-right:18px}
 .reader-on .decide{margin-left:18px;margin-right:18px}
}
@media (max-width:860px){
 .mobilenav{display:flex;gap:8px;padding:8px 16px;border-bottom:1px solid var(--line);background:var(--paper)}
 .mobilenav a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;flex:1;color:var(--muted);font-size:12px;font-weight:600;text-decoration:none;border-radius:8px}
 .mobilenav a[aria-current="page"]{background:var(--navy);color:var(--white)}
 .qrail{height:auto;max-height:none;padding-bottom:20px}
 .desk:not(#reader-desk)>.work{display:none}
 .reader-on .qrail{display:none}
 .reader-on .work{height:calc(100dvh - 125px);min-height:500px;overflow:hidden}
 .reader-on .wh{padding-top:12px;padding-bottom:8px}
 .reader-on .wh h1{font-size:21px;line-height:1.25}
 .reader-on .whrow .meta,.reader-on .howto,.reader-on .crumbs>b{display:none}
 .reader-on .decide{margin:4px 16px 0}
 .reader-on .drow{gap:8px}
 .reader-on .drow .dic,.reader-on .drow .idc,.reader-on .drow .dsep{display:none}
 .reader-on .drow .efld label{display:block}
 .reader-on .drow .efld:before{display:none}
 .reader-on .tabs{margin-top:6px}
 .reader-on .tab{min-height:44px;padding:8px;font-size:12px}
 .reader-tools{gap:6px;font-size:11px}
 .reader-tools .zbtn{width:34px;height:36px}
 .reader-tools select{height:36px}
 .reader-tools .btn{min-height:36px}
 .mobile-compare{display:flex;gap:8px;margin-top:8px}
 .mobile-compare button{flex:1;min-height:40px}
 .mobile-compare [aria-pressed="true"]{background:var(--navy);color:var(--white);border-color:var(--navy)}
 .reader-on .cmp{grid-template-columns:1fr;margin-top:6px;min-height:150px}
 .reader-on .cmp[data-panel="original"]>.col+ .col,.reader-on .cmp[data-panel="text"]>.col:first-child{display:none}
 .reader-on .scroll{height:auto}
 .reader-on .col+.col{border:0}
 .reader-on .bacts button{min-height:40px}
 .sh{width:calc(100% - 24px);max-height:calc(100dvh - 24px)}
 .shh,.shb,.shf{padding-left:18px;padding-right:18px}
 .shh h3{font-size:23px}
 .shf .btn{min-height:44px}
 .regwrap{padding-top:22px}
 .libgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .libcard .cover{height:140px}
 .libcard .pthumb{width:96px;height:124px}
 .libcard .meta{padding:10px}
 .libcard .nm{font-size:12px}
 .vchip{min-height:34px}
 .filters .chip,.vmode button{min-height:40px}
 .center{padding:24px}.nis{max-width:100%;min-width:0}
 .nis a{overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.qitem,.lrow,.all,.backlib,.crumbs a{text-decoration:none}
.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--navy);text-decoration:underline}
.reader-on .qrail .all{display:flex}
@media(max-width:860px){body.reader-on.focus .wh,body.reader-on.focus .decide,body.reader-on.focus .tabs{display:none}body.reader-on.focus .work{height:calc(100dvh - 125px)}}

.queue-cta{display:none}
.pane#p-fix.on{display:block;overflow:auto;padding-top:16px;padding-bottom:24px}
.correction-row{display:block;width:100%;border:1px solid var(--ok-line);background:var(--white);border-radius:9px;text-align:left;margin-bottom:10px;padding:14px;font-size:13px;line-height:1.6;white-space:pre-wrap;cursor:pointer}
.search-match{background:var(--brass-soft);border-color:var(--brass-line)}
.reader-on .docfind input{min-width:0;width:140px}
.reader-on .docfind{min-width:0}.reader-on .docfind .hits{white-space:nowrap}
@media(max-width:860px){
 .mobilenav{position:fixed;bottom:0;left:0;right:0;z-index:45;padding:6px 12px max(6px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(253,252,250,.97);backdrop-filter:blur(14px)}
 .mobilenav a{font-size:11px}.mobilenav a[aria-current="page"]{color:var(--navy);background:var(--off-soft)}
 .account-menu{flex:1;text-align:center;font-size:11px;color:var(--muted)}
 .account-menu summary{list-style:none;cursor:pointer;min-height:44px;display:grid;place-items:center;font-weight:600}
 .account-menu>div{position:absolute;bottom:70px;right:12px;width:min(300px,calc(100vw - 24px));background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-m);border-radius:12px;padding:18px;text-align:left;overflow-wrap:anywhere}
 .account-menu p{margin:6px 0 12px}
 .top .where,.top .sep,.top .right>form{display:none}
 .reader-on .work{height:calc(100dvh - 125px)}
 .app>main{padding-bottom:64px}
 .desk:not(#reader-desk) .qhead{padding:20px 18px}
 .desk:not(#reader-desk) .qlist{gap:12px}
 .desk:not(#reader-desk) .qitem{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--brass);box-shadow:var(--shadow-s);padding:14px}
 .queue-cta{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line-soft);padding-top:11px;margin-top:12px;font-size:12px;font-weight:600}
 .reader-on .tab{font-size:11px;padding:7px 5px;gap:4px}
 .reader-on .colh{flex-wrap:wrap}.reader-on .docfind input{width:140px}
}

.reader-on .docfind input{padding:5px 8px}
@media(max-width:860px){.top .right>form{display:none!important}}
.blk.editing .note[role="status"]{color:var(--muted);border-color:var(--line)}

/* Keep page tools with the original, as in the reviewer mock. */
.colh .reader-tools{padding:0;gap:5px;justify-content:flex-end}
.reader-tools .fit-width{width:auto;padding:0 7px;font-size:10px;font-weight:700}
.sync-control{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font-size:11px;white-space:nowrap;color:var(--muted);cursor:pointer}
.colh .sync-control{margin-left:0;margin-right:4px}
/* Approval stamps the effective date; the picker is for a later start only. */
.sh .shh h3{text-wrap:balance}
.efld .eff-auto{display:none;font-size:11.5px;color:var(--muted);line-height:1.5;margin:0}
.efld .eff-rule{display:block}
.efld .eff-value{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:2px}
.efld .eff-auto b{color:var(--ink);font-weight:600;font-size:12.5px}
.efld .eff-edit{background:none;border:0;padding:0 0 0 7px;color:var(--navy);font-weight:600;font-size:11.5px;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.efld .eff-edit:hover{color:var(--navy-deep)}
.efld .eff-edit:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:4px}
#efld.auto .eff-auto{display:block}
#efld.auto .eff-label,#efld.auto #eff{display:none}
.page-error{padding:30px 22px;text-align:center;min-height:240px;font:14px/1.6 Inter,sans-serif;color:var(--muted)}
.page-error .btn{margin:4px}
.trail a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media(min-width:1100px){.colh:has(.reader-tools){flex-wrap:wrap}.colh .reader-tools{margin-left:0}}

@media(max-width:860px){
 .reader-on .howto{display:flex;justify-content:space-between;padding:4px 0;gap:5px;background:none;border:0}
 .reader-on .howto .st{display:none}
 .sync-control{margin-left:0}
 #mobile-reader-tools .reader-tools{justify-content:flex-start;padding:6px 0}
}

/* Visibility must be immediate so dialog focus enters before motion ends. */
.sh{transition-property:transform,opacity}

.correction-history{padding:0 24px 24px}.correction-history .card{margin-top:12px}.correction-history summary{cursor:pointer;font-size:13px}.correction-history-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.65}

.phone-summary-tab{display:none!important}.phone-summary-content{padding:18px 16px}.phone-summary-content>p{font-size:13px;line-height:1.6;color:var(--muted)}.phone-summary-content .card{margin-top:14px}.phone-summary-content .card .btn{margin-top:14px;width:100%}.phone-summary-content .card p{font-size:13px;line-height:1.6}
@media(max-width:860px){.phone-summary-tab{display:block!important}.reader-on .tabs{overflow-x:auto;flex-shrink:0}.reader-on .tabs .tab{flex-shrink:0}}

.pane#p-sum.on{display:block;overflow-y:auto;padding-bottom:24px}
.phone-tab-label{display:none}
@media(max-width:860px){
 .mobile-compare .btn[aria-pressed="true"],.mobile-compare .btn[aria-pressed="true"]:hover{background:var(--navy);color:var(--white);border-color:var(--navy)}
 .reader-on .tabs{gap:0}.reader-on .tabs .tab{flex:1;padding:8px 5px;font-size:11px}
 .reader-on .tabs .tab svg,.desktop-tab-label{display:none}.phone-tab-label{display:inline}
}

.phone-docbar{display:none}
@media(max-width:860px){
 .reader-on .work{min-height:0}
 .reader-on .decide{order:10;flex-shrink:0;margin:0;border-radius:0;border-width:1px 0 0;background:var(--white);box-shadow:0 -4px 16px rgba(27,42,74,.06)}
 .reader-on .drow{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:10px 14px;gap:9px}
 .reader-on .drow .dlab,.reader-on .drow .swap{display:none}
 .reader-on .drow .idc{display:flex;min-width:0;margin:0}
 .reader-on .drow .idc .t{display:block;min-width:0}.reader-on .drow .idc .t b{font-size:11px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reader-on .drow .idc .t span{font-size:10px}
 .reader-on .drow .efld{margin:0;display:block}.reader-on .drow .efld label{font-size:9px;margin-bottom:3px}.reader-on .drow .efld input{width:132px;height:38px}
 .reader-on .decision-actions{grid-column:1/-1}.reader-on .decision-actions .btn{flex:1;min-height:44px}
 .reader-on.phone-document .work{position:fixed;inset:0;z-index:46;height:100dvh;min-height:0;background:var(--paper)}
 .reader-on.phone-document .work>.wh,.reader-on.phone-document .work>.decide,.reader-on.phone-document .work>.tabs{display:none}
 .reader-on.phone-document .phone-docbar{display:flex;flex-shrink:0;align-items:center;gap:8px;background:var(--navy-deep);color:var(--white);min-height:56px;padding:6px 12px}
 .phone-docbar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}.phone-docbar .btn{color:var(--white);min-height:44px}
 .reader-on.phone-document .howto{display:none}.reader-on.phone-document #p-cmp{padding-top:8px}
 .reader-on.phone-document .pdfscroll{background:#20242c}
}

@media(max-width:860px){.reader-on.phone-document .reader-tools .btn{display:none}}

.sheetpg{position:relative}.source-highlight{position:absolute;border:2px solid var(--brass);background:rgba(169,130,79,.18);pointer-events:none;z-index:2}.source-status{font-size:11px;color:var(--muted);line-height:1.5}.reader-on .bacts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px}

.sheetpg img{aspect-ratio:auto 1 / 1.414}

.block-source-preview{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:8px;height:140px}.block-source-paper{position:relative;width:100%}.block-source-paper img{display:block;width:100%;height:100%}

/* Reader: reserve vertical space for the original and transcript. */
.reader-context{display:none}
.reader-on .bacts{gap:6px}
.reader-on .bacts .btn{border:1px solid #cbd1dc;background:#fff;box-shadow:0 1px 2px rgba(27,42,74,.05);padding:5px 10px;min-height:32px;color:var(--navy)}
.reader-on .bacts .btn:hover{background:#eef1f7;border-color:var(--navy)}
.reader-on .bacts .source-button{color:#a32c32;border-color:#d8a0a3;background:#fff5f5}
.reader-on .bacts .source-button:hover{background:#fbe7e8;border-color:#a32c32}
.reader-on .source-highlight{border-color:#bf3038;background:rgba(191,48,56,.12)}
@media(min-width:861px){
 .reader-on .desk{grid-template-columns:280px minmax(0,1fr)}
 .reader-on .railtog{left:280px}
 .reader-on .desk.narrow .railtog{left:0}
 .reader-on .reader-context{display:flex;flex-direction:column;gap:16px;padding:20px 18px;border-bottom:1px solid var(--line)}
 .reader-context .whrow{display:flex;flex-direction:column;gap:10px;overflow-wrap:anywhere}
 .reader-context h1{font-size:20px;line-height:1.3}
 .reader-context .sub{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.6}
 .reader-context .whrow .meta{margin:0;text-align:left;padding:0}
 .reader-context .whrow .meta .mono{font-size:10px}
 .reader-context .decide{margin:0;width:100%}
 .reader-context .drow{display:flex;gap:10px;padding:12px;align-items:center}
 .reader-context .drow .dic,.reader-context .dsep{display:none}
 .reader-context .drow .dlab{display:block;font-size:12px}
 .reader-context .drow .idc{display:flex;width:100%;gap:8px;min-width:0}
 .reader-context .drow .idc .t{display:block;min-width:0;font-size:11px;overflow-wrap:anywhere}
 .reader-context .idc .t b,.reader-context .idc .t span{display:block}
 .reader-context .idc .t span{color:var(--muted);font-size:10px}
 .reader-context .drow .efld{display:flex;flex-direction:column;align-items:stretch;width:100%;gap:5px}
 .reader-context .drow .efld label{display:block}
 .reader-context .drow .efld:before{display:none}
 .reader-context .drow .efld input{width:100%;height:36px}
 .reader-context .decision-actions{width:100%}
 .reader-context .decision-actions .btn{width:100%;min-height:38px;white-space:normal}
 .reader-context .howto{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:0;margin:0;border:0;background:transparent;font-size:12px}
 .reader-context .howto .st{padding:0;flex:none;border:0;align-items:flex-start;line-height:1.5}
 .reader-context .howto .n{margin-top:1px}
 .reader-context .howto .btn{border:1px solid var(--line);background:white;justify-content:center}
 .reader-on .qhead{padding:18px}
 .reader-on .qhead h1,.reader-on .qhead h2{font-size:16px;margin-top:8px}
 .reader-on .qhead h1 .n,.reader-on .qhead h2 .n{font-size:19px}
 .reader-on .qhead p{font-size:11px}
 .reader-on .wh{padding:14px 20px 0}
 .reader-on .crumbs{margin:0;min-width:0}
 .reader-on .crumbs>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .reader-on .tabs{padding:0 20px;margin-top:7px}
 .reader-on .pane{padding-left:20px;padding-right:20px}
 .reader-on .colh{flex-wrap:wrap}
 .reader-on .colh .reader-tools{justify-content:flex-start}
}
@media(max-width:860px){.reader-on .bacts .btn{min-height:44px}}
@media(min-width:861px) and (max-width:1100px){
 .reader-on .desk{grid-template-columns:240px minmax(0,1fr)}
 .reader-on .railtog{left:240px}
 .reader-on .pane,.reader-on .tabs,.reader-on .wh{padding-left:12px;padding-right:12px}
 .reader-on .reader-context{padding:16px 14px}
}

/* Direct link from corpus text search. */
.blk.search-target{outline:3px solid var(--brass);outline-offset:3px}

/* Review rows: clear separators, quiet metadata, readable source text. */
.txtscroll .blk{border:0;border-bottom:1px solid #dce2e8;border-radius:0;padding:18px 10px 20px}.txtscroll .blk .bh{margin-bottom:10px;gap:8px}.txtscroll .blk .ref{font:400 11px Inter,system-ui,sans-serif;color:#626e7c;background:transparent;border:0;padding:0}.txtscroll .blk .bt{font-size:11px;font-weight:500;letter-spacing:0;color:#596575}.txtscroll .blk .bx{font-size:14px;line-height:1.8;color:#293444}.txtscroll .blk .bacts .btn{font-size:12px;font-weight:500;background:transparent;border-color:transparent;box-shadow:none;padding:6px 9px;color:#50627a}.txtscroll .blk .bacts .btn:hover{background:#eaf0f7;color:#1b2a4a}.txtscroll .blk.fixed{background:#fbfdfc;border-bottom-color:#dce2e8}.txtscroll .blk.fixed .note{background:transparent;border:0;border-left:2px solid #86aa96;border-radius:0;padding:3px 9px;color:#446453;font-size:11px}.txtscroll .blk.editing{background:#f6f9fd;box-shadow:inset 3px 0 #5d7da5}.txtscroll .blk.editing .note[role=status]{border:1px solid var(--line);padding:8px;color:var(--muted)}.txtscroll .blk.search-target{outline:2px solid #b88a35;outline-offset:-2px;background:#fffdf5}.txtscroll .blk .bacts button:focus-visible{outline:2px solid #5275a4;outline-offset:2px}
@media(max-width:760px){.txtscroll .blk{padding:16px 8px}.txtscroll .blk .bacts .btn{min-height:44px;min-width:44px}.txtscroll .blk .bx{font-size:14px;line-height:1.8}}
@media(prefers-reduced-motion:reduce){.txtscroll .blk{transition:none}}

/* Sign-in: a quiet, self-contained entry to the reviewer workspace. */
.signin-shell{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px 64px}
.signin-brand{width:min(100%,440px);display:flex;align-items:center;gap:18px;margin-bottom:28px;padding:0 4px}
.signin-brand img{width:78px;height:auto;display:block}
.signin-brand>span{border-left:1px solid var(--brass-line);padding-left:18px;color:var(--muted);font-size:12px}
.signin-card{width:min(100%,440px);padding:36px;background:var(--white);border:1px solid var(--line);border-top:3px solid var(--brass);border-radius:16px;box-shadow:0 8px 32px rgba(14,23,48,.04)}
.signin-card h1{font-size:32px;line-height:1.2;font-weight:600;letter-spacing:-.025em;color:var(--navy)}
.signin-intro{font-size:14px;line-height:1.7;color:var(--muted);margin-top:12px}
.signin-form{margin-top:28px}
.signin-form label{display:block;font-size:13px;font-weight:600;margin-bottom:8px}
.signin-form input{display:block;width:100%;min-height:50px;padding:12px 14px;border:1px solid #b7bec9;border-radius:8px;background:var(--page);font-size:16px;transition:border-color .16s,box-shadow .16s}
.signin-form input::placeholder{color:var(--muted);opacity:1}
.signin-form input:focus{outline:2px solid var(--navy);outline-offset:2px;border-color:var(--navy)}
.signin-form #email-help,.signin-hint{color:var(--muted);font-size:12px;line-height:1.7;margin-top:10px}
.signin-action{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:12px 16px;margin-top:24px;background:var(--navy);border:1px solid var(--navy);border-radius:8px;color:var(--white);font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;transition:background .16s,transform .16s}
.signin-action svg{width:18px;height:18px;flex:none;transition:transform .16s}
.signin-action:hover{background:var(--navy-deep)}
.signin-action:hover svg{transform:translateX(3px)}
.signin-action:active{transform:translateY(1px)}
.signin-action:focus-visible,.signin-staging a:focus-visible{outline:2px solid var(--brass-deep);outline-offset:4px}
.signin-secondary{background:var(--white);color:var(--navy);border-color:var(--line)}
.signin-secondary:hover{background:var(--paper)}
.signin-footer{max-width:440px;text-align:center;font-size:12px;color:var(--muted);line-height:1.7;margin-top:22px}
.signin-symbol{width:48px;height:48px;display:grid;place-items:center;border-radius:12px;color:var(--brass-deep);background:var(--brass-soft);margin-bottom:22px}
.signin-symbol svg{width:26px;height:26px}
.signin-next{margin-top:24px;padding:18px;background:var(--page);border:1px solid var(--line-soft);border-radius:8px;font-size:13px}
.signin-next strong{font-weight:600}.signin-next p{margin-top:5px;color:var(--muted);line-height:1.7}
.signin-error{margin-top:22px;padding:14px 16px;border-left:3px solid var(--danger);background:var(--danger-soft);border-radius:0 8px 8px 0;font-size:13px;color:var(--danger)}
.signin-error p{margin-top:5px;line-height:1.6}
.signin-staging{border-top:1px solid var(--line);margin-top:24px;padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;flex-wrap:wrap}
.signin-staging>span{color:var(--muted)}.signin-staging a{color:var(--navy);text-underline-offset:4px}
/* Sumber excerpt page (/k/<token>): the cited passage leads, the title stays small,
   so the highlighted quote is on screen on a phone (tara, tree 8fc8908b). */
.excerpt-card h1,.signin-card.excerpt-card h1{font-size:19px;line-height:1.4;letter-spacing:-.01em}
.excerpt-card .signin-intro{margin-top:6px;font-size:13px}
.excerpt-text{margin-top:18px;font-size:16px;line-height:1.7;color:var(--ink);overflow-wrap:anywhere}
.excerpt-card .signin-hint{margin-top:16px}
@media(max-width:480px){.signin-shell{padding:48px 20px 32px;justify-content:flex-start}.signin-card{padding:28px 24px}.signin-card h1{font-size:30px}.signin-card.excerpt-card h1{font-size:18px}.signin-brand{margin-bottom:24px}.signin-brand>span{font-size:11px}.signin-footer{font-size:11px}}
@media(prefers-reduced-motion:reduce){.signin-action,.signin-action svg,.signin-form input{transition:none}.signin-action:hover svg,.signin-action:active{transform:none}}

/* Selected Regi mark: one header lockup, compact mark-only navigation. */
.brand-lockup{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none;border-radius:8px}
.brand-lockup .brand-icon{display:block;width:36px;height:36px;border-radius:9px;flex-shrink:0}
.top .brand-lockup .wm{width:auto;height:24px}
a.brand-lockup{min-height:44px}
a.brand-lockup:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
.rail{padding-top:76px}
.signin-brand .brand-icon{width:40px;height:40px;border-radius:10px}
.signin-brand .wm{width:78px;height:auto}
.signin-brand{gap:16px}
.signin-brand>span{padding-left:16px}
.welcome-mark{display:block;width:56px;height:56px;border-radius:14px;margin:0 auto 20px}
@media(max-width:860px){.top .brand-lockup .wm{display:none}}
@media(max-width:480px){.signin-brand{flex-wrap:wrap;gap:12px}.signin-brand>span{flex-basis:100%;border:0;padding-left:0}}

/* Original-to-transcript lookup: selection without moving the source page. */
.reader-on .sheetpg img{cursor:crosshair}
.txtscroll .blk.source-selected{background:#fff7f7;box-shadow:inset 3px 0 #bf3038}
.cmp>.col:first-child{position:relative}
.original-position-status{position:absolute;bottom:12px;left:12px;right:12px;z-index:2;pointer-events:none;font-size:11px;color:var(--muted);max-width:320px;line-height:1.4;padding:8px 10px;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow-s)}
.original-position-status:empty{display:none}

/* ============ queue summary pane (Tara, 2026-09-17) ============
   The right-hand pane of Review Dokumen held a single centred sentence: at
   1440x900 it was 69% of the viewport and 92.2% of that pane was empty. It now
   carries the two facts a reviewer opens this screen for -- whether Regi can
   cite anything yet, and which version to open next -- built only from the
   `items` and `live` lists the route already loads. */
.qsum{height:100%;overflow-y:auto;padding:30px 34px 40px;display:flex;flex-direction:column;gap:20px;max-width:960px}
.qsum-kicker{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--brass-deep)}

.qsum-state{display:grid;grid-template-columns:10px 1fr;column-gap:12px;align-items:baseline;
  background:var(--white);border:1px solid var(--line);border-left:3px solid var(--brass);
  border-radius:12px;padding:15px 18px;box-shadow:var(--shadow-s)}
.qsum-state .qsum-dot{width:9px;height:9px;border-radius:50%;background:var(--brass);align-self:center;grid-row:1/3}
.qsum-state b{font-size:14.5px;font-weight:650;letter-spacing:-.005em}
.qsum-state span{font-size:12.5px;color:var(--muted);line-height:1.5}
.qsum-state.on{border-left-color:var(--ok)}
.qsum-state.on .qsum-dot{background:var(--ok)}

.qsum-next{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:22px 24px 24px;box-shadow:var(--shadow-s)}
.qsum-next h2{font-size:23px;font-weight:700;letter-spacing:-.015em;line-height:1.28;margin-top:10px;text-wrap:balance}
.qsum-slug{font-size:12.5px;color:var(--muted);margin-top:7px;overflow-wrap:anywhere}
.qsum-age{font-size:12.5px;font-weight:600;color:var(--brass-deep);margin-top:5px}
.qsum-age.hot{color:var(--danger)}
.qsum-cta{margin-top:18px;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.qsum-cta svg{width:15px;height:15px}

.qsum-ages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.qsum-age-tile{background:var(--white);border:1px solid var(--line);border-radius:11px;padding:12px 14px}
.qsum-age-tile b{display:block;font-family:'Source Serif 4',Georgia,serif;font-size:24px;font-weight:700;line-height:1.1;color:var(--ink)}
.qsum-age-tile span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
.qsum-age-tile.hot b{color:var(--danger)}

.qsum-queue,.qsum-live{min-width:0;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:18px 20px 14px}
.qsum-live{flex:1;border-left:3px solid var(--brass)}
.qsum-live.on{border-left-color:var(--ok)}
.qsum-live .qsum-kicker{display:flex;align-items:center;gap:8px}
.qsum-live .qsum-dot{width:8px;height:8px;border-radius:50%;background:var(--brass)}
.qsum-live.on .qsum-dot{background:var(--ok)}
.qsum-live p{font-size:12.5px;color:var(--muted);margin-top:7px;line-height:1.55;max-width:min(620px,92%)}
.qsum-live .spine{width:3px;height:15px;border-radius:2px;background:var(--ok);flex:0 0 3px;align-self:center}
.qsum-live.on .qsum-kicker{color:var(--ok)}
.qsum-all{display:inline-block;margin:10px 0 8px;font-size:12.5px;font-weight:600;color:var(--navy);text-decoration:none}
.qsum-all:hover{text-decoration:underline;text-underline-offset:3px}
.qsum-row{display:flex;align-items:baseline;gap:14px;padding:10px 2px;border-top:1px solid var(--line-soft);
  font-size:13px;color:inherit;text-decoration:none}
.qsum-queue .qsum-kicker+.qsum-row,.qsum-live p+.qsum-row{border-top:0}
.qsum-live .qsum-row{gap:10px}
.qsum-row-t{flex:1;min-width:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qsum-row:hover .qsum-row-t{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.qsum-row-a{font-size:11.5px;color:var(--faint);white-space:nowrap}
.qsum-row-a.hot{color:var(--danger);font-weight:600}
.qsum-queue .qsum-kicker{margin-bottom:6px}
@media(max-width:860px){.qsum{padding:22px 18px 32px;height:auto;overflow:visible}.qsum-next h2{font-size:20px}}

/* Empty queue: the pane keeps its card rhythm instead of a centred block, because
   "Dipakai Regi hari ini" still has to render underneath it. */
.qsum-none{text-align:center}
.qsum-none .welcome-mark{display:block;margin:0 auto 6px}
.qsum-none h2{margin-top:6px}
.qsum-none .qsum-slug{max-width:min(460px,92%);margin-left:auto;margin-right:auto}
/* `.qsum-live{flex:1}` fills the pane under a populated queue. With an empty queue
   there is nothing to fill against, so the card hugs its two lines instead of
   stretching ~500px of white. */
.qsum-none ~ .qsum-live{flex:0 0 auto}

/* <=860px the queue desk hides its work pane (line ~748), which would take
   "Dipakai Regi hari ini" with it -- the one fact this screen exists to show.
   Show the pane, and inside it only the live block: the next-up card and the age
   tiles are already the first rows of the visible queue list above. */
@media (max-width:860px){
 .desk#queue-desk>.work{display:block;height:auto;min-height:0;overflow:visible;border-top:1px solid var(--line)}
 #queue-desk .qsum{padding:18px 18px 28px;gap:16px}
 #queue-desk .qsum-next,#queue-desk .qsum-ages{display:none}
 #queue-desk .qsum-none{display:block}
}
/* wrapcheck, 2026-09-17: "89 versi menunggu keputusan" broke onto 3 lines in a
   327px rail where 2 lines fit (341px natural). The 34px count sets the first
   break; balance lets the browser pick both breaks together. */
.qhead h1,.qhead h2{text-wrap:balance}

/* Eyebrows removed (Dito, 2026-09-25): the headline is the first line, so it
   no longer needs the gap the brass kicker left above it. */
.qhead>h1:first-child,.qhead>h2:first-child{margin-top:0}

/* One page gutter for the three module pages (Dito, 2026-09-25): the headline
   starts on the logo's left edge and sits the same distance under the top bar
   on Antrean, Pustaka and Evaluasi. Before this the three pages used 24, 34 and
   22px against the top bar's 28px. The top bar reads the same token, so the
   logo and the headlines cannot drift apart again. */
:root{--page-x:28px;--page-top:26px}
@media(max-width:860px){:root{--page-x:16px;--page-top:20px}}
.top .inner{padding-left:var(--page-x);padding-right:var(--page-x)}
.desk#queue-desk .qhead,.regwrap,main .eval-page{padding-top:var(--page-top);padding-left:var(--page-x);padding-right:var(--page-x)}

/* QA Jawaban (/qa-jawaban, 2026-09-25): a single-column page on the shared
   .regwrap gutter. Each conversation is a static card holding a review form,
   so it does NOT borrow .qitem (a clickable queue row with hover + pointer). */
.tqa{max-width:920px}
.tqa-head h1{font-size:25px;font-weight:700;letter-spacing:-.015em;line-height:1.2;text-wrap:balance}
.tqa-head p{font-size:13px;color:var(--muted);margin-top:7px;max-width:720px}
.tqa-filter{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 16px}
.tqa-filter a{font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;padding:6px 13px;border-radius:999px;border:1px solid var(--line);background:var(--white)}
.tqa-filter a:hover{color:var(--ink);border-color:#cfd3db}
.tqa-filter a[aria-current="page"]{background:var(--navy);border-color:var(--navy);color:var(--white)}
.tqa-filter a:focus-visible,.tqa-card a:focus-visible,.tqa-pages a:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.tqa-list{list-style:none;display:grid;gap:14px}
.tqa-card{background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-s);padding:18px 20px;scroll-margin-top:16px}
.tqa-card h2{font-size:17px;font-weight:700;letter-spacing:-.005em;line-height:1.3}
.tqa-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.tqa-block{margin-top:14px}
.tqa-block h3{font:700 11.5px/1.3 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.tqa-block p,.tqa-block li,.tqa-reasons{font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.tqa-block p+p{margin-top:6px}
.tqa-block ul{padding-left:20px;margin-top:4px}
.tqa-cites q{display:block;color:var(--muted);font-style:italic;margin-top:2px}
.tqa-reasons{margin-top:12px}
.tqa-more{margin-top:12px;border-top:1px solid var(--line-soft);padding-top:10px;font-size:13px}
.tqa-more summary{cursor:pointer;font-weight:600;color:var(--navy)}
.tqa-more pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.5 'IBM Plex Mono',ui-monospace,monospace;background:var(--paper);border-radius:8px;padding:10px 12px;margin-top:8px;max-height:420px;overflow:auto}
.tqa-hist{list-style:none;margin-top:8px;display:grid;gap:8px}
.tqa-hist li{border-left:3px solid var(--brass-line);padding-left:10px;line-height:1.5;overflow-wrap:anywhere}
.tqa-when{display:block;font-size:12px;color:var(--faint)}
.tqa-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:14px;border-top:1px solid var(--line-soft);padding-top:14px}
.tqa-form .err,.tqa-form .tqa-wide{grid-column:1/-1}
.tqa-form label{display:grid;gap:5px;font-size:12.5px;font-weight:600;color:var(--ink)}
.tqa-form input,.tqa-form select,.tqa-form textarea{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--white);font-weight:400;font-size:14px}
.tqa-form textarea{min-height:88px;resize:vertical}
.tqa-form input:focus-visible,.tqa-form select:focus-visible,.tqa-form textarea:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
.tqa-hint{font-weight:400;color:var(--muted);font-size:12px}
.tqa-form .btn{justify-self:start;grid-column:1/-1}
.tqa-empty{background:var(--white);border:1px dashed var(--line);border-radius:12px;padding:22px 20px;font-size:14px;color:var(--muted)}
.tqa-pages{margin-top:18px;font-size:13px;color:var(--muted)}
@media(max-width:860px){.tqa-card{padding:14px}.tqa-head h1{font-size:22px}}

.kind-badge{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.02em;padding:1px 7px;border-radius:9px;background:#1f2a44;color:#fff;vertical-align:middle}
.qitem .qerr{margin-top:7px;font-size:12px;color:#9b2c2c;line-height:1.4}
.videoscroll{padding:14px}
.video-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-meta{display:flex;gap:12px;align-items:flex-start;margin-top:12px;font-size:13.5px;line-height:1.45}

.video-meta a{display:inline-block;margin-top:4px}
.blk[data-start]{cursor:pointer}

/* ============ review progress: filter, sort, resume (Tara, 2026-10-07) ============
   Approved in #regi msg 1557328313897324595; source designs/regi-review-progress/
   APPROVED-20261007-index.html. Every rule is scoped under .qctl / .prog / .resume /
   .qsum because the bare names collide: `.search` is the top-bar search (hidden at
   <=860px), `.chip` is the Daftar Pustaka filter, `.card` is the reader side card,
   and `.err` is a hidden-by-default error box -- which is why the failed-AI state
   is `.fail`, not the design's `.err`. */
.qctl{position:sticky;top:0;z-index:5;background:#fbfaf8;padding:14px 22px 12px;border-bottom:1px solid var(--line-soft)}
.qctl .search{display:flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--line);border-radius:10px;padding:0 11px;height:38px}
.qctl .search svg{position:static;width:16px;height:16px;opacity:1;color:var(--faint);flex:0 0 16px}
.qctl .search input{border:0;outline:0;background:none;flex:1;min-width:0;width:auto;padding:0;font-size:13px;box-shadow:none}
.qctl .search input:focus{box-shadow:none}
.qctl .search:focus-within{border-color:var(--navy)}
.qctl .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.qctl .chip{border:1px solid var(--line);background:var(--white);border-radius:999px;padding:4px 10px 4px 9px;font-size:12px;font-weight:500;color:var(--ink);display:inline-flex;align-items:center;gap:6px;line-height:1.4;text-decoration:none}
.qctl .chip .sw{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.qctl .chip .c{opacity:1;margin-left:0;font-variant-numeric:tabular-nums;color:var(--muted);font-weight:600}
.qctl .chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.qctl .chip[aria-pressed="true"] .c{color:#c9d3e8}
.qctl .chip[aria-disabled="true"]{color:var(--faint);cursor:not-allowed}
.qctl .chip[aria-disabled="true"] .sw{opacity:.45}
.qctl .chip:focus-visible,.qctl .sortsel:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.qctl .ai-chips{align-items:center}
.qctl .chip-key{font-size:12px;font-weight:600;color:var(--muted);margin-right:2px}
.qctl .sortrow{display:flex;align-items:center;justify-content:space-between;margin-top:11px;font-size:12px;color:var(--muted);gap:8px}
.qctl .sortrow label{display:flex;align-items:center;gap:6px}
.qctl .sortsel{border:1px solid var(--line);background:var(--white);border-radius:8px;padding:4px 8px;font:inherit;font-size:12px;font-weight:600;color:var(--ink)}
.qctl .sortsel:disabled{color:var(--faint)}
.qctl .shown{white-space:nowrap}
.qctl .qwarn{margin-top:10px;font-size:12px;color:var(--danger);line-height:1.45}
.qctl noscript .btn{margin-top:10px}

.resume{display:block;margin:12px 14px 4px;background:var(--white);border:1px solid var(--brass-line);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow-s);text-decoration:none;color:inherit}
.resume:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.resume .rt{margin-left:0;font-size:13.5px;font-weight:600;line-height:1.35}
.resume .rm{font-size:11.5px;color:var(--muted);margin-top:3px}
.resume .rrow{display:flex;align-items:center;gap:10px;margin-top:9px}
.resume .go{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--brass-deep);white-space:nowrap}
/* Desktop queue home: the work pane carries the resume card, so the rail copy
   would say the same thing twice. It returns where that pane is hidden. */
@media (min-width:861px){#queue-desk .resume{display:none}}

.qrail .qitem{padding:12px 14px 12px 16px}
.qrail .qitem .qt{font-size:14px}
.qrail .qitem .qm{gap:7px;margin-top:6px}
.prog{display:flex;align-items:center;gap:9px;margin-top:8px;min-width:0}
.prog.flush{margin-top:0}
.prog .bar{flex:0 0 112px;height:6px;border-radius:6px;background:var(--line-soft);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;position:relative}
.prog .bar>i{position:absolute;inset:0 auto 0 0;border-radius:6px;background:var(--brass)}
.prog .bar.done>i{background:var(--ok)}
.prog .bar.ai{background:repeating-linear-gradient(-45deg,#eef0f3 0 5px,#e2e4ea 5px 10px);box-shadow:none}
.prog .bar.ai>i{background:#9aa6bd}
.prog .bar.off{background:var(--line-soft);box-shadow:inset 0 0 0 1px var(--line);border:0;color:inherit}
.prog .bar.fail{background:var(--danger-soft);box-shadow:inset 0 0 0 1px var(--danger-line)}
.prog .ptxt{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.prog .ptxt span{font-weight:400;color:var(--muted)}
.prog .ptxt.done{color:var(--ok)}
.prog .ptxt.fail{color:var(--danger)}
.prog .ptxt.ai{color:var(--muted);font-weight:500}
.prog.bigprog{margin-top:18px}
.prog.bigprog .bar{flex:1 1 auto;height:10px}
.prog.bigprog .ptxt{font-size:14px}
.who-tag{display:inline-flex;align-items:center;gap:5px}
.who-tag .mini{width:16px;height:16px;border-radius:50%;background:var(--navy-mid);color:#fff;font-size:8.5px;font-weight:700;display:grid;place-items:center}
.who-tag .mini.other{background:#6d5a8c}

.qempty{margin:26px 22px;text-align:center;font-size:13px;color:var(--muted);line-height:1.5}
.qempty b{display:block;color:var(--ink);font-size:14.5px;margin-bottom:4px}
.qempty .btn{margin-top:12px}
.qempty .qempty-q{font-weight:inherit}

.qsum .card{border-radius:14px;padding:22px 24px 24px}
.qsum .card h2{font-size:23px;font-weight:700;letter-spacing:-.015em;line-height:1.28;text-wrap:balance}
.qsum .card .sub{font-size:13px;color:var(--muted);margin-top:6px}
.qsum .breakdown{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;font-size:12.5px;color:var(--muted)}
.qsum .breakdown b{color:var(--ink);font-variant-numeric:tabular-nums}
.qsum .cardacts{display:flex;gap:10px;margin-top:20px;align-items:center;flex-wrap:wrap}
.qsum .cardacts .btn{text-decoration:none}
.qsum .cardacts svg{width:15px;height:15px}
.qsum .cardacts .note{font-size:12px;color:var(--muted)}
.qsum .mine h3{font-size:16px;font-weight:700}
.qsum .mine .mrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line-soft);font-size:13px;text-decoration:none;color:inherit}
.qsum .mine .mrow:first-of-type{border-top:0;margin-top:8px}
.qsum .mine .mrow .t{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qsum .mine .mrow .when{font-size:12px;color:var(--muted);white-space:nowrap}
.qsum-next .prog{margin-top:12px}

@media (max-width:860px){
 .qctl{padding:12px 16px 10px}
 .qctl .search{display:flex;height:44px}
 /* 2026-10-14 (Ratri #regi msg 1559831721321570314): 44px taps and 16px text, so iOS does not zoom on the search box. */
 .qctl .search input{font-size:16px;align-self:stretch}
 .qctl .chip{min-height:44px;font-size:16px;padding:6px 14px}
 .qctl .chip .sw{width:10px;height:10px;flex-basis:10px}
 .qctl .chip-key{flex:1 0 100%;font-size:14px;margin:2px 0 -2px}
 .qctl .sortsel{min-height:44px;font-size:16px}
 .qctl .chips{margin-top:8px}
 .qctl .sortrow{flex-wrap:wrap}   /* "6755 dari 6907 tampil" next to the select was cut off at 360px */
 /* The filter block is now ~360px tall on a phone (46% of a 780px screen): sticky would leave
    half the screen to the controls while scrolling 6,907 rows. It scrolls away; the top of the page is one swipe. */
 .qctl{position:static}
 /* "Setujui beberapa sekaligus" pushed the page 41px wider than a 360px phone. */
 .batchcard{flex-wrap:wrap;gap:12px 16px;padding:18px}
 .batchcard .btn{margin-left:0;min-height:44px}
 .resume{margin:4px 16px 12px}
 .desk:not(#reader-desk) .qitem .prog .bar{flex-basis:96px}
 .qempty{margin:22px 16px}
}
/* `.qitem` sets display:block, which beats the UA [hidden] rule. */
.qlist .qitem[hidden],.qempty[hidden],.qctl .shown[hidden]{display:none}

/* --- Approval flow (Tara mockup APPROVED-20261008-index.html, Dito #regi msg
   1557638813080227883, 2026-10-08): queue group headers, the "tinggal" tag, the
   approval card, the batch card and the Setujui sekaligus page. --- */
.need{font-size:11.5px;font-weight:600;color:var(--brass-deep);background:var(--brass-soft);border:1px solid var(--brass-line);border-radius:6px;padding:1px 7px;white-space:nowrap}
.grp{padding:12px 24px 6px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);display:flex;gap:6px}
.grp span{font-weight:500;color:var(--muted)}
.left3{display:grid;grid-template-columns:22px 1fr;gap:4px 10px;margin:16px 0 18px;font-size:13.5px;align-items:center}
.left3 .ic{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700}
.left3 .ic.d{background:var(--ok);color:#fff}.left3 .ic.d svg{width:11px;height:11px}
.left3 .ic.o{border:1.5px solid var(--brass);color:var(--brass-deep);background:#fff}
.left3 .o+span{font-weight:600}
.left3 small{color:var(--faint);font-size:12px}
.batchcard{display:flex;align-items:center;gap:22px;background:var(--navy);color:#fff;border-radius:14px;padding:20px 24px}
.batchcard .big{font-family:'Source Serif 4',Georgia,serif;font-size:36px;font-weight:600;line-height:1;color:#e9cfa3}
.batchcard p{font-size:13.5px;color:#c9d2e6;margin-top:3px}
.batchcard b{font-size:15px}
.batchcard .btn{margin-left:auto}
.bpage{padding:26px 34px 24px;display:flex;flex-direction:column;min-height:0;flex:1}
.bpage .back{font-size:13px;font-weight:600;display:block;margin-bottom:14px;color:var(--navy);text-decoration:none}
.bpage .bh{display:flex;align-items:flex-end;gap:20px}
.bpage h2{font-size:28px;letter-spacing:-.015em;line-height:1.15}
.bpage .bh p{font-size:13.5px;color:var(--muted);margin-top:6px;max-width:720px}
.bpage .bh .chips{padding:0;margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.bpage .chip i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.tbl{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;min-height:0}
.tr{display:grid;grid-template-columns:44px minmax(0,1.6fr) 210px minmax(0,1.25fr) 150px 140px;align-items:center;gap:0 14px;padding:8px 16px;min-height:56px;border-bottom:1px solid var(--line-soft);font-size:13px}
.tr[hidden],.tgrp[hidden]{display:none}
.tr.th{min-height:40px;font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--muted);background:#faf9f7}
.tr .t{font-weight:600}
.tr .t a{color:inherit;text-decoration:none}
.tr .t a:hover{text-decoration:underline;text-underline-offset:2px}
.tr .t small{display:block;font-weight:400;font-size:11.5px;color:var(--faint)}
.tr .why{font-size:12px;color:var(--muted);line-height:1.4}
.tr.cek{background:#fffaf0}
.tr.cek .why{color:var(--brass-deep)}
.tr.done{background:var(--ok-soft)}
.tr.done .why{color:var(--ok)}
.tr.gagal .why{color:var(--danger)}
.cb{appearance:none;-webkit-appearance:none;margin:0;width:18px;height:18px;border-radius:5px;border:1.5px solid #b9bec8;background:#fff;display:grid;place-items:center;cursor:pointer}
.cb:checked{background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--navy)}
.cb:disabled{background:#f0efec;border-color:#dcdad5;cursor:not-allowed}
.cb:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.cat{position:relative;display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:13px;font-weight:600}
.cat select{appearance:none;-webkit-appearance:none;border:0;background:none;font:inherit;color:inherit;width:100%;padding:6px 28px 6px 10px;cursor:pointer;text-overflow:ellipsis}
.cat select:disabled{cursor:default}
.cat svg{position:absolute;right:9px;width:14px;height:14px;color:var(--faint);pointer-events:none}
.cat.ask{border-color:var(--brass);color:var(--brass-deep)}
.cat .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.rv{font-size:12px;color:var(--ok);font-weight:600}
.dt{font-size:13px}
.dt input{font:inherit;border:1px solid var(--line);border-radius:7px;padding:4px 6px;width:100%;background:#fff}
.dt input:invalid,.tr.cek .dt input[value=""]{border-color:var(--brass)}
.dt small{display:block;font-size:11.5px;color:var(--faint);margin-top:2px}
.tgrp{padding:9px 16px;font-size:12px;font-weight:700;background:#f6f4f0;border-bottom:1px solid var(--line-soft);display:flex;gap:8px}
.tgrp span{font-weight:500;color:var(--muted)}
.tfoot{position:sticky;bottom:0;display:flex;align-items:center;gap:16px;padding:14px 16px;border-top:1px solid var(--line);background:#fff}
.tfoot .sel{font-size:13.5px}
.tfoot .sel b{font-size:15px}
.tfoot .hint{font-size:12.5px;color:var(--muted)}
.tfoot .btn{margin-left:auto}
/* At 1100px or less the header drops to the 4 body columns, and the reason moves to
   its own line under the title: a refused row must keep its reason (tara HOLD 2, F34). */
@media (max-width:1100px){.tr{grid-template-columns:36px minmax(0,1fr) 180px 130px}.tr .rv,.tr.th .h-why,.tr.th .h-rv{display:none}.tr .why{grid-column:2/-1;order:1;padding:2px 0 4px}}