/* photo-manager.css  Picture manager (photo-manager.js): main picture + additional pictures. Light, Dark navy and Glass; WCAG AA (text 4.5:1, controls 3:1). */
.xpm{--xpm-bg:#fff;--xpm-fg:#0b1c2d;--xpm-mut:#334155;--xpm-line:#475569;--xpm-soft:#f1f5f9;--xpm-acc:#304adc;--xpm-on:#fff;--xpm-dang:#9a1c1c;--xpm-ok:#14532d;--xpm-bad:#9a1c1c;--xpm-focus:#ff8a00;
  color:var(--xpm-fg);font-size:.92rem;line-height:1.45;overflow-wrap:anywhere}
html[data-theme="dark"] .xpm,html[data-theme="glass"] .xpm{--xpm-bg:#1b4288;--xpm-fg:#eaf1ff;--xpm-mut:#d4e2fb;--xpm-line:#9fbdf0;--xpm-soft:#143270;--xpm-acc:#7fd0ff;--xpm-on:#0b1c2d;--xpm-dang:#ffb4b4;--xpm-ok:#a7f3c0;--xpm-bad:#ffc4c4;--xpm-focus:#ffb000}
html[data-theme="glass"] .xpm{--xpm-bg:rgba(20,50,112,.62);--xpm-soft:rgba(20,50,112,.55)}
.xpm *{box-sizing:border-box;min-width:0}
.xpm-sec{background:var(--xpm-bg);border:1.5px solid var(--xpm-line);border-radius:14px;padding:.8rem .9rem;margin:.6rem 0}
html[data-theme="glass"] .xpm-sec{backdrop-filter:blur(10px)}
.xpm-h{margin:0 0 .25rem;font-size:1.02rem;color:var(--xpm-fg)}
.xpm-count{font-weight:600;color:var(--xpm-mut);font-size:.88rem}
.xpm-help{margin:.2rem 0 .5rem;color:var(--xpm-mut);font-size:.84rem}
.xpm-empty{margin:.4rem 0;padding:.8rem;border:1.5px dashed var(--xpm-line);border-radius:10px;color:var(--xpm-fg)}
.xpm-mainrow{display:grid;grid-template-columns:1fr;gap:1rem;align-items:start}
@media(min-width:760px){.xpm-mainrow{grid-template-columns:minmax(240px,340px) 1fr}}
.xpm-stage{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--xpm-soft);cursor:crosshair;touch-action:none;border:1.5px solid var(--xpm-line)}
.xpm-stage.xpm-sq{aspect-ratio:1/1;max-width:300px}
.xpm-stage img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.xpm-mark{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 2px #0b1c2d;pointer-events:none}
.xpm-stage:focus-visible,.xpm-btn:focus-visible,.xpm-in:focus-visible,.xpm input[type=range]:focus-visible{outline:3px solid var(--xpm-focus);outline-offset:2px}
.xpm-prevs{display:flex;align-items:center;gap:.7rem;margin-top:.5rem}
.xpm-cap{font-size:.78rem;color:var(--xpm-mut)}
.xpm-pc,.xpm-pr{position:relative;display:block;overflow:hidden;flex:none;background:var(--xpm-soft);border:2px solid var(--xpm-line)}
.xpm-pc{width:84px;height:84px;border-radius:50%}
.xpm-pr{width:128px;height:72px;border-radius:10px}
.xpm-pc img,.xpm-pr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xpm-lbl{display:block;font-weight:700;font-size:.84rem;margin:.5rem 0 .15rem;color:var(--xpm-fg)}
.xpm input[type=range]{width:100%;min-height:32px;accent-color:var(--xpm-acc)}
.xpm-in{width:100%;min-height:44px;padding:.35rem .6rem;border:1.5px solid var(--xpm-line);border-radius:8px;background:var(--xpm-bg);color:var(--xpm-fg);font:inherit}
.xpm-opt{display:flex;align-items:center;gap:.5rem;min-height:44px;margin:.3rem 0;font-weight:600}
.xpm-opt input{width:20px;height:20px;accent-color:var(--xpm-acc)}
.xpm-row{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 0}
.xpm-btn{min-height:44px;padding:.4rem .9rem;border:1.5px solid var(--xpm-acc);border-radius:10px;background:var(--xpm-bg);color:var(--xpm-fg);font-weight:700;font-size:.84rem;line-height:1.2;font-family:inherit;cursor:pointer}
html:not([data-theme="dark"]):not([data-theme="glass"]) .xpm-btn{color:#1e3a8a}
.xpm-btn:hover:not(:disabled){background:var(--xpm-soft)}
.xpm-btn:disabled{opacity:.55;cursor:default}
.xpm-primary{background:var(--xpm-acc);color:var(--xpm-on)!important}
.xpm-primary:hover:not(:disabled){background:var(--xpm-acc);filter:brightness(1.08)}
.xpm-danger{border-color:var(--xpm-dang);color:var(--xpm-dang)!important}
.xpm-drop{border:2px dashed var(--xpm-line);border-radius:12px;padding:.7rem .8rem;margin:.3rem 0 .6rem;background:var(--xpm-soft)}
.xpm-drop.xpm-over{border-color:var(--xpm-acc);background:var(--xpm-bg)}
.xpm-list{list-style:none;margin:.4rem 0;padding:0;display:grid;gap:.6rem}
.xpm-card{display:grid;grid-template-columns:auto 96px 1fr;gap:.6rem;align-items:start;padding:.6rem;border:1.5px solid var(--xpm-line);border-radius:12px;background:var(--xpm-soft)}
@media(max-width:560px){.xpm-card{grid-template-columns:auto 1fr}.xpm-card .xpm-fields{grid-column:1/-1}}
.xpm-card.xpm-dragging{opacity:.5}
.xpm-card.xpm-over{outline:3px dashed var(--xpm-acc);outline-offset:2px}
.xpm-grip{cursor:grab;color:var(--xpm-mut);font-size:1.1rem;letter-spacing:-.15em;padding:.2rem .1rem;user-select:none}
.xpm-thumb{width:96px;height:72px;object-fit:cover;border-radius:8px;background:var(--xpm-bg);border:1px solid var(--xpm-line)}
.xpm-msg{min-height:1.4em;margin:.4rem 0 0;font-weight:700}
.xpm-ok{color:var(--xpm-ok)}.xpm-bad{color:var(--xpm-bad)}
@media(prefers-reduced-motion:reduce){.xpm *{transition:none!important;animation:none!important}}
/* teacher admin: the new manager replaces the old upload row and the old position box */
.xtph-newmgr details[data-sec="photo"] [data-photo-file],.xtph-newmgr details[data-sec="photo"] label[for="ttPhotoFile"],.xtph-newmgr details[data-sec="photo"] [data-act="photo-upload"],.xtph-newmgr details[data-sec="photo"] .xtph-pos{display:none!important}
/* teacher-media.js: status line + layout list under the gallery */
.xtm-foot{margin:.3rem 0}
.xtm-status{margin:.4rem 0;padding:.5rem .7rem;border:1.5px solid var(--xpm-line);border-radius:10px;background:var(--xpm-soft);color:var(--xpm-fg);font-size:.86rem;font-weight:600}
.xtph-tm{margin-top:.8rem}
.xtm-layout{margin:.4rem 0}