* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font: 14px/1.4 system-ui, sans-serif; color: #111; background: #fff; }
body { display: flex; }
#panel { width: 320px; flex: none; overflow-y: auto; padding: 8px 12px; border-right: 1px solid #ccc; }
#panel h1 { font-size: 18px; margin: 4px 0 8px; }
#panel h2 { font-size: 14px; margin: 14px 0 6px; }
#panel select, #panel input[type=file] { max-width: 100%; }
section { border-top: 1px solid #eee; }
.banner { background: #fff3cd; border: 1px solid #e0c060; padding: 6px; font-size: 13px; }
.muted { color: #666; }
.status { min-height: 1.4em; margin: 4px 0; }
.status.error, .error { color: #b00020; }
.status.ok { color: #1b6e20; }
.pages { display: flex; flex-wrap: wrap; gap: 4px; }
.pages button[aria-pressed=true] { font-weight: bold; outline: 2px solid #333; }
#failures .failure { border: 1px solid #b00020; padding: 4px; margin: 4px 0; font-size: 13px; }
#pin-actions button { margin: 2px 2px 2px 0; }
#pin-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
#pin-table td, #pin-table th { text-align: left; padding: 2px 4px; border-bottom: 1px solid #eee; }
#pin-table tr.selected { background: #e6f0ff; }
#pin-table tr { cursor: pointer; }
a.disabled { color: #999; pointer-events: none; }
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 6px 8px; border-bottom: 1px solid #ccc; }
#toolbar .group { display: inline-flex; gap: 6px; align-items: center; }
#zoom-label { min-width: 4em; text-align: center; display: inline-block; }
#viewport { position: relative; flex: 1; overflow: hidden; background: #d8d8d8; outline: none; touch-action: none; }
#viewport:focus-visible { box-shadow: inset 0 0 0 2px #2a6df4; }
#viewport.mode-pan { cursor: grab; }
#viewport.mode-pan.dragging { cursor: grabbing; }
#viewport.mode-template, #viewport.mode-add { cursor: crosshair; }
#canvas { position: absolute; left: 0; top: 0; }
.view-message { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); background: #fff; padding: 8px 12px; border: 1px solid #aaa; max-width: 80%; }
.view-message:empty { display: none; }
.view-message.error { color: #b00020; border-color: #b00020; }
/* Fixed width, so the toolbar never re-wraps (and moves the canvas) when the
   cursor readout appears mid-drag. */
#cursor-pos { display: inline-block; width: 17em; min-height: 1.4em; white-space: nowrap; overflow: hidden; }
#mode-info { margin: 4px 0; }
#batch-start { margin-top: 6px; }
#batch-start input { width: 100%; margin: 2px 0 4px; }
#batch-progress { width: 100%; }
#batch-actions button { margin: 2px 2px 2px 0; }
#batch-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
#batch-table td, #batch-table th { text-align: left; padding: 2px 4px; border-bottom: 1px solid #eee; }
#batch-table tr[data-page] { cursor: pointer; }
#batch-table tr.current { background: #e6f0ff; }
#batch-table .failed { color: #b00020; }
/* Batch state on the page buttons. */
.pages button[data-badge]::after { content: ""; display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; margin-left: 4px; vertical-align: middle; background: #bbb; }
.pages button[data-badge=scanning]::after { background: #2a6df4; }
.pages button[data-badge=review]::after { background: #ff8c00; }
.pages button[data-badge=reviewed]::after { background: #0a8f2a; }
.pages button[data-badge=failed]::after { background: #b00020; }
#user-bar { margin: 0 0 6px; font-size: 13px; }
#delete-doc-btn { margin-top: 4px; color: #b00020; }
#members-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0; }
#members-table td, #members-table th { text-align: left; padding: 2px 4px; border-bottom: 1px solid #eee; word-break: break-all; }
#member-add input { width: 100%; margin-bottom: 4px; }
#setup-link-box input, #password-form input { width: 100%; margin-bottom: 4px; }
button.link { background: none; border: none; padding: 0; color: #2a6df4; text-decoration: underline; cursor: pointer; font: inherit; }
/* Sign-in and set-password pages. */
body.auth { display: block; background: #f4f4f4; }
.auth-box { max-width: 360px; margin: 12vh auto 0; background: #fff; border: 1px solid #ccc; padding: 16px 20px; }
.auth-box h1 { font-size: 20px; margin: 0 0 12px; }
.auth-box label { display: block; margin: 8px 0 2px; }
.auth-box input { width: 100%; padding: 6px; font: inherit; }
.auth-box button { margin-top: 12px; padding: 6px 14px; font: inherit; }
/* Links between the viewer and the training pages (web/training.html). */
.site-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; font-size: 13px; }
.site-nav a { color: #2a6df4; }
.site-nav a[aria-current=page] { color: #111; font-weight: bold; text-decoration: none; }