/* /passport-photo/ 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; adjust, download and sheet panels sit beside it */
@media(min-width:920px){.pp-duo{grid-template-columns:minmax(0,1.5fr) minmax(19rem,.9fr)}}
.pp-side{display:grid;gap:1rem;align-content:start}

.pp-pick .field{margin:0}
.pp-docfield select{width:100%}
.pp-facts{margin:0.5rem 0.125rem 0;font-size:0.8125rem;line-height:1.5;color:var(--muted);min-height:2.4em}
.pp-facts b{color:var(--ink);font-family:var(--mono);font-weight:600;font-size:0.75rem}
.pp-facts a{white-space:nowrap}

.pp-open{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;margin-top:0.75rem}
.pp-openbtn{width:100%;justify-content:center}
.pp-drag .pp-open{outline:2px dashed var(--accent);outline-offset:0.25rem;border-radius:0.625rem}
.hint{font-size:0.8125rem;color:var(--muted);margin:0.5rem 0.125rem 0;min-height:1.125rem}
.hint.bad{color:var(--bad);font-weight:600}

.pp-work[hidden]{display:none}
.pp-work{margin-top:0.875rem}
.pp-mark{margin:0 0 0.5rem;padding:0.5rem 0.75rem;border-radius:0.5rem;background:var(--accent-soft);color:var(--ink);font-size:0.875rem;font-weight:600}
.pp-mark:empty{display:none}
.pp-stage{display:flex;justify-content:center;padding:0.5rem;border:1px solid var(--line);border-radius:0.5rem;background:var(--surface-2)}
.pp-stage canvas{display:block;max-width:100%;touch-action:none;cursor:grab;border-radius:0.25rem}
.pp-stage canvas.marking{cursor:crosshair}
.pp-stage canvas:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.pp-checks{list-style:none;margin:0.625rem 0 0;padding:0;display:grid;gap:0.25rem;font-size:0.875rem}
.pp-checks li{padding-left:0.75rem;border-left:0.1875rem solid var(--line-2);color:var(--ink-2)}
.pp-checks li.ok{border-left-color:var(--ok)}
.pp-checks li.bad{border-left-color:var(--bad);color:var(--ink)}
.pp-checks .mk{font-weight:700}
.pp-checks li.ok .mk{color:var(--ok)}
.pp-checks li.bad .mk{color:var(--bad)}

.pp-tools{display:flex;flex-wrap:wrap;gap:0.375rem;margin-top:0.625rem}
.pp-tools .chip{min-width:2.75rem}

.sec{font-size:0.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 0.625rem}
.pp-panel .field+.field{margin-top:0.875rem}
.pp-panel .modes{margin-bottom:0.75rem}
.pp-panel .modes button{font-size:0.8125rem;padding:0.5rem 0.25rem}
.pp-out{margin:0 0.125rem 0.625rem;font-size:0.875rem;color:var(--muted)}
.pp-out b{font-family:var(--mono);color:var(--ink)}
.pp-dl{width:100%}
.pp-info{margin:0.5rem 0.125rem 0;font-size:0.8125rem;color:var(--muted);min-height:1.125rem}
.pp-info b{color:var(--ink);font-family:var(--mono);font-weight:600}
.pp-info.bad{color:var(--bad)}
.pp-dlrow{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;margin-top:0.5rem}
.pp-dlrow .btn{width:100%}
.btn:disabled{opacity:.45;cursor:default}

.pp-steps li,.pp-cannot li{margin-bottom:0.5rem}
.pp-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pp-table{min-width:40rem;font-size:0.84375rem}
.pp-table td:first-child{font-weight:600}