/* /scan-document/ page styles. Built from /assets/polyatic.css tokens only (no new colours or fonts). */
.nojs{margin:1.25rem 0 0;padding:0.875rem 1rem;border:1px solid var(--line);border-left:0.25rem solid var(--accent);border-radius:0.625rem;background:var(--surface);color:var(--ink);font-size:0.9375rem;line-height:1.6}

/* the photo gets the width on desktop; clean-up and save sit beside it */
@media(min-width:920px){.sd-duo{grid-template-columns:minmax(0,1.6fr) minmax(19rem,.8fr)}}
.sd-side{display:grid;gap:1rem;align-content:start}

/* open controls: real file inputs behind labels (labels open the picker on every phone browser) */
.sd-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip-path:inset(50%);pointer-events:none}
.sd-open,.sd-add{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}
.sd-openbtn,.sd-addbtn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;width:100%;text-align:center}
.sd-openbtn{height:3.25rem;font-size:1rem;white-space:nowrap;padding:0 0.75rem}
.sd-openbtn,.sd-addbtn{position:relative}
.sd-openbtn:focus-within,.sd-addbtn:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.sd-cam{width:1.25rem;height:0.9375rem;border:2px solid currentColor;border-radius:0.25rem;position:relative;flex:none}
.sd-cam::after{content:"";position:absolute;left:50%;top:50%;width:0.4375rem;height:0.4375rem;margin:-0.21875rem 0 0 -0.21875rem;border:2px solid currentColor;border-radius:50%;box-sizing:border-box}
.has-pages .sd-open,.has-pages .sd-tips{display:none}
.sd-tips{list-style:none;counter-reset:tip;margin:1rem 0 0;padding:0;display:grid;gap:0.5rem}
@media(min-width:600px){.sd-tips{grid-template-columns:repeat(3,1fr)}}
.sd-tips li{counter-increment:tip;display:block;padding:0.625rem 0.875rem;border:1px solid var(--line);border-radius:0.625rem;background:var(--surface-2);font-size:0.8125rem;color:var(--muted);line-height:1.45}
.sd-tips li::before{content:counter(tip);margin-right:0.5rem;font-family:var(--mono);font-size:0.75rem;font-weight:600;color:var(--accent)}
.sd-tips b{color:var(--ink);font-size:0.875rem}
.sd-tips span{display:block;margin-top:0.125rem}
#app.drag{outline:2px dashed var(--accent);outline-offset:-0.375rem}
.hint{font-size:0.8125rem;color:var(--muted);margin:0.625rem 0.125rem 0;min-height:1.125rem}
.hint.bad{color:var(--bad);font-weight:600}
.has-pages .hint{margin-top:0}

.sd-work[hidden]{display:none}
.sd-work{margin-top:0.75rem}
.sd-pagebar{display:flex;flex-wrap:wrap;gap:0.25rem 0.625rem;align-items:baseline;margin:0 0 0.5rem;font-size:0.875rem}
.sd-pagebar span{color:var(--muted);font-size:0.8125rem}
.sd-stage{position:relative;display:flex;justify-content:center;padding:0.5rem 0;border:1px solid var(--line);border-radius:0.5rem;background:var(--surface-2)}
.sd-stage canvas#photo{display:block;max-width:100%;touch-action:none;cursor:crosshair;border-radius:0.125rem}
.sd-stage canvas#photo:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sd-loupe{position:absolute;width:8.25rem;height:8.25rem;border-radius:50%;border:3px solid var(--accent);box-shadow:var(--shadow);pointer-events:none;background:var(--surface)}
.sd-loupe[hidden]{display:none}

.sd-tools{display:flex;flex-wrap:wrap;gap:0.375rem;margin-top:0.625rem}
.sd-tools .chip{padding:0.5rem 0.6875rem}
.sd-tools .chip:disabled{opacity:.4;cursor:default}
.sd-del{margin-left:auto}

.sec{font-size:0.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 0.625rem}
.sd-sec{margin-top:1.25rem;display:flex;gap:0.5rem;align-items:baseline}
.sd-dims{font-family:var(--mono);font-weight:500;text-transform:none;letter-spacing:0;font-size:0.75rem}
.sd-previewbox{display:flex;justify-content:center;padding:0.75rem;border:1px solid var(--line);border-radius:0.5rem;background:var(--surface-2)}
.sd-previewbox canvas{display:block;max-width:100%;box-shadow:var(--shadow);background:var(--surface)}
.sd-small{margin:-0.25rem 0.125rem 0.5rem;font-size:0.8125rem;color:var(--muted)}

.sd-thumbs{list-style:none;margin:0 0 0.75rem;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(4.75rem,1fr));gap:0.5rem}
.sd-thumb{position:relative;touch-action:none;user-select:none;-webkit-user-select:none}
.sd-thumbbtn{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:3/4;padding:0.25rem;border:2px solid var(--line);border-radius:0.5rem;background:var(--surface-2);cursor:grab;font:inherit;color:var(--ink)}
.sd-thumbbtn canvas{display:block;max-width:100%;max-height:100%;pointer-events:none;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.sd-thumb.on .sd-thumbbtn{border-color:var(--accent)}
.sd-thumb.dragging{z-index:2;opacity:.85}
.sd-thumb.dragging .sd-thumbbtn{cursor:grabbing;box-shadow:var(--shadow)}
.sd-thumb.drop-here .sd-thumbbtn{border-style:dashed;border-color:var(--ink)}
.sd-num{position:absolute;left:0.375rem;top:0.375rem;min-width:1.25rem;padding:0 0.25rem;border-radius:0.25rem;background:var(--ink);color:var(--bg);font-family:var(--mono);font-size:0.6875rem;font-weight:600;line-height:1.25rem;text-align:center;pointer-events:none}

.sd-panel .field+.field{margin-top:0.875rem}
.sd-panel .modes{margin-bottom:0.875rem}
.sd-panel .modes button{font-size:0.8125rem;padding:0.5rem 0.25rem}
.sd-reset{margin-top:0.75rem;font-size:0.8125rem;padding:0.375rem 0.625rem}
.sd-est{margin:0.75rem 0.125rem;font-size:0.875rem;color:var(--muted)}
.sd-est b{font-family:var(--mono);font-weight:600;color:var(--ink)}
.sd-dlrow{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}
.sd-dlrow .btn{width:100%;padding:0 0.5rem}
.btn:disabled{opacity:.45;cursor:default}
.sd-info{margin:0.625rem 0.125rem 0;font-size:0.8125rem;color:var(--muted);min-height:1.125rem}
.sd-info.bad{color:var(--bad);font-weight:600}

.sd-steps li,.sd-cannot li{margin-bottom:0.5rem}
@media(prefers-reduced-motion:reduce){.sd-thumb{transition:none}}