/* App chrome and review controls. viewer.css is the original "Celebrimbor Books Review" artifact's styles, unchanged. */
html,body{margin:0;padding:0}
[hidden]{display:none!important}
*{box-sizing:border-box}
:root{--good:#2f6b4f;--good-soft:#e1ede6;--pend:#8a948e}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--good:#7cc39f;--good-soft:#213a2e}}
a{color:var(--accent)}
button{font:inherit}
.appbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line);background:var(--surface);font-size:.88rem}
.appbar .brand{font-family:var(--serif);font-weight:600;font-size:1.05rem;color:var(--fg);text-decoration:none}
.appbar nav{display:flex;gap:14px}
.appbar nav a{color:var(--muted);text-decoration:none}
.appbar nav a[aria-current="page"]{color:var(--fg);font-weight:600}
.appbar .who{margin-left:auto;display:flex;gap:10px;align-items:center;color:var(--muted)}
.appbar form{margin:0}
.linkbtn{all:unset;cursor:pointer;color:var(--accent);text-decoration:underline}
.linkbtn:focus-visible{outline:2px solid var(--accent)}
.role{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;background:var(--sunk);padding:1px 7px;border-radius:99px;color:var(--muted)}

.btn{font-size:.88rem;padding:7px 14px;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer}
.btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.btn.primary:hover:not(:disabled){filter:brightness(1.08);color:var(--surface)}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.err{color:var(--bad);background:var(--bad-soft);padding:8px 12px;border-radius:6px;font-size:.85rem}
.ok{color:var(--accent);background:var(--accent-soft);padding:8px 12px;border-radius:6px;font-size:.85rem}
.muted{color:var(--muted)}
.small{font-size:.8rem}
input[type=text],input[type=email],input[type=file],textarea{font:inherit;font-size:.9rem;padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--fg)}
textarea{width:100%;resize:vertical;min-height:60px}

/* status pills and dots */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding:2px 9px;border-radius:99px;white-space:nowrap}
.pill.approved{background:var(--good-soft);color:var(--good)}
.pill.denied{background:var(--bad-soft);color:var(--bad)}
.pill.pending{background:var(--sunk);color:var(--muted)}
.pill.open{background:var(--sunk);color:var(--fg)}
.pill.exported{background:var(--accent-soft);color:var(--accent)}
.pill.archived{background:var(--sunk);color:var(--faint)}
.dots{display:inline-flex;gap:3px;align-items:center}
.dot{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--faint);display:inline-grid;place-items:center;font-size:9px;line-height:1;font-weight:700;color:var(--surface);box-sizing:border-box}
.dot.approve{background:var(--good);border-color:var(--good)}
.dot.deny{background:var(--bad);border-color:var(--bad)}

/* home */
.page{max-width:1280px;margin:0 auto;padding:24px max(16px,env(safe-area-inset-left,0px)) 48px}
.page h1{font-family:var(--serif);font-weight:600;font-size:1.6rem;margin:0}
.pagehead{display:flex;flex-wrap:wrap;gap:12px;align-items:end;justify-content:space-between;margin-bottom:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.card + .card{margin-top:16px}
.tablewrap{overflow-x:auto}
table.grid{width:100%;border-collapse:collapse;font-size:.88rem}
table.grid th{text-align:left;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line)}
table.grid td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
table.grid tr:last-child td{border-bottom:0}
table.grid td.num{font-variant-numeric:tabular-nums}
.progress{display:flex;gap:10px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.progress .a{color:var(--good)}.progress .d{color:var(--bad)}.progress .p{color:var(--muted)}
.revdone{display:flex;flex-direction:column;gap:2px;font-size:.8rem}
.revdone span::before{content:"○ ";color:var(--faint)}
.revdone span.done::before{content:"● ";color:var(--good)}
.empty{padding:28px;text-align:center;color:var(--muted)}
.upload{display:grid;gap:12px}
.upload .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.upload ul{margin:0;padding-left:1.2em}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:.88rem}
.kv dt{color:var(--muted)}.kv dd{margin:0}

/* batch screen */
.batchhead{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;margin-bottom:14px}
.batchhead h1{font-family:var(--serif);font-weight:600;font-size:1.5rem;margin:0;word-break:break-word}
.batchhead .crumb{font-size:.82rem;margin-bottom:4px}
.batchhead .meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;color:var(--muted);font-size:.85rem;margin-top:4px}
.toggles{display:flex;flex-wrap:wrap;gap:14px}
.adminpanel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:16px;display:grid;gap:10px}
.adminpanel h2,.coverage summary{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0;font-weight:600}
.adminpanel .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.confirm{border:1px solid var(--warn);background:var(--warn-soft);border-radius:8px;padding:10px 12px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:.88rem}
.exports{font-size:.85rem;display:grid;gap:4px}
.audit{font-size:.8rem;max-height:320px;overflow:auto}
.audit table td{padding:4px 8px;vertical-align:top}
details.coverage{padding:12px 16px}
details.coverage summary{cursor:pointer}
details.coverage[open] summary{margin-bottom:10px}

.filters{display:flex;flex-wrap:wrap;gap:4px;padding:8px 10px;border-bottom:1px solid var(--line)}
.filters button{all:unset;cursor:pointer;font-size:.74rem;padding:3px 8px;border-radius:99px;border:1px solid var(--line);color:var(--muted)}
.filters button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.filters button:focus-visible{outline:2px solid var(--accent)}
.filters .n{font-variant-numeric:tabular-nums;opacity:.8}
.list .nm{display:flex;justify-content:space-between;gap:8px;align-items:start}
.list .nm .t{min-width:0}
.legend{font-size:.72rem;color:var(--faint);padding:6px 12px;border-bottom:1px solid var(--line)}

.reviewbar{position:sticky;top:0;z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:grid;gap:10px;box-shadow:0 6px 16px -12px rgba(0,0,0,.35)}
.reviewbar .top{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.verdicts{display:flex;gap:10px}
.vbtn{font-size:1rem;font-weight:600;padding:10px 22px;border-radius:8px;border:2px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer;min-width:132px}
.vbtn.approve[aria-pressed="true"]{background:var(--good);border-color:var(--good);color:var(--surface)}
.vbtn.deny[aria-pressed="true"]{background:var(--bad);border-color:var(--bad);color:var(--surface)}
.vbtn.approve:hover:not(:disabled){border-color:var(--good)}
.vbtn.deny:hover:not(:disabled){border-color:var(--bad)}
.vbtn:disabled{opacity:.5;cursor:not-allowed}
.vbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vbtn kbd{font-family:var(--mono);font-size:.7rem;opacity:.7;margin-left:6px}
.savestate{font-size:.78rem;color:var(--muted);min-height:1em}
.savestate.error{color:var(--bad)}
.others{display:grid;gap:6px;font-size:.85rem}
.other{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.other .who{font-weight:600}
.other .when{color:var(--faint);font-size:.75rem}
.other .onote{flex-basis:100%;color:var(--fg);background:var(--sunk);padding:6px 10px;border-radius:6px;white-space:pre-wrap}
.lockmsg{font-size:.85rem;color:var(--muted)}
.keys{font-size:.72rem;color:var(--faint)}
.keys kbd{font-family:var(--mono);background:var(--sunk);padding:0 4px;border-radius:3px}
@media (max-width:820px){.vbtn{min-width:0;flex:1}.verdicts{flex:1}}

/* auth pages */
.center{min-height:80vh;display:grid;place-items:center;padding:16px}
.center .card{max-width:420px;text-align:center;display:grid;gap:14px}
.center h1{font-family:var(--serif);font-weight:600;font-size:1.5rem;margin:0}