/* Photo crop (js/photo-crop.js) and student photos. The crop window sits above the student card (#modal is z 90) and
   under the toasts (z 100). */
.pc-layer{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:16px;background:rgba(8,12,18,.6)}
.pc-box{background:var(--surface);color:var(--ink);border-radius:18px;width:min(420px,100%);max-height:92vh;overflow:auto;padding:18px 20px;box-shadow:var(--shadow-lg)}
.pc-box h2{margin:0 0 10px;font-size:1.2rem}
.pc-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pc-head h2{margin:0}
.pc-tick{display:flex;gap:10px;align-items:flex-start;padding:12px;border:2px solid var(--line);border-radius:12px;margin:10px 0;cursor:pointer;line-height:1.4}
.pc-tick:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.pc-tick input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--brand)}
.pc-pick{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.pc-file{position:relative;justify-content:center;min-height:48px;cursor:pointer}
.pc-file input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.pc-file:focus-within{outline:3px solid var(--brand);outline-offset:2px}
.pc-crop{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.pc-crop[hidden],.pc-pick[hidden]{display:none}
/* the square that is saved; the circle shows how the avatar will look */
.pc-frame{position:relative;width:min(300px,100%);aspect-ratio:1;margin:0 auto;border-radius:12px;overflow:hidden;background:var(--surface-2);touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.pc-frame:active{cursor:grabbing}
.pc-frame:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.pc-view{display:block;width:100%;height:100%}
.pc-ring{position:absolute;inset:0;pointer-events:none;border-radius:50%;box-shadow:0 0 0 999px rgba(8,12,18,.42);outline:2px solid rgba(255,255,255,.9);outline-offset:-2px}
.pc-hint{text-align:center;margin:0}
.pc-zoom{display:flex;align-items:center;gap:10px;font-weight:700}
.pc-zoom input{flex:1;min-height:32px;accent-color:var(--brand)}
.pc-msg{margin:8px 0 0;min-height:1.2em;color:var(--muted)}
.pc-msg:empty{display:none}

/* the photo section of a student's Avatar tab, and Classroom settings */
.ph-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 10px}
.ph-ask{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--accent-soft);margin:4px 0 10px}
.ph-ask p{margin:0;flex:1 1 200px;font-weight:700}
.cav svg.av-photo{overflow:hidden}