/* The tool on every /exam-photo/ page. The page around it is styled in scripts/build-exam-photo.js. */
.ep{ background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:18px; box-shadow:0 8px 24px -18px rgba(34,26,18,.5); }
.ep [hidden]{ display:none !important; }
.ep-pick{ display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.ep label.top,.ep .ep-field>span{ font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--inksoft); }
.ep select,.ep input[type=number],.ep input[type=text],.ep input[type=date]{ font:inherit; font-size:15px; padding:10px 11px; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); width:100%; min-height:44px; }
.ep select:focus-visible,.ep input:focus-visible,.ep button:focus-visible,.ep a:focus-visible,.ep-drop:focus-visible{ outline:2.5px solid var(--gold); outline-offset:2px; }

.ep-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.ep-tabs button{ font:inherit; font-size:14px; font-weight:800; padding:9px 13px; min-height:42px; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--maroon); cursor:pointer; }
.ep-tabs button[aria-selected="true"]{ background:var(--maroon); border-color:var(--maroon); color:#fff; }
.ep-tabs button.made::after{ content:" ✓"; color:var(--gold); }
.ep-tabs button[aria-selected="true"].made::after{ color:#bff0e8; }

.ep-spec{ background:#f3eede; border-radius:10px; padding:10px 12px; font-size:14px; color:var(--inksoft); margin-bottom:8px; }
.ep-spec b{ display:block; font-size:16px; color:var(--ink); }
.ep-spec span{ display:block; margin-top:2px; }
.ep-more{ list-style:none; font-size:13px; color:var(--inksoft); margin:0 2px 14px; display:flex; flex-direction:column; gap:3px; }
.ep-more a{ color:var(--maroon); font-weight:700; }

.ep-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:10px; margin-bottom:14px; }
.ep-field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
#epTarget{ grid-template-columns:minmax(0,220px); }

.ep-drop{ display:block; width:100%; font:inherit; color:inherit; border:2px dashed var(--line); border-radius:14px; padding:36px 18px; text-align:center; cursor:pointer; background:none; }
.ep-drop:hover,.ep-drop.over{ border-color:var(--gold); background:#fffaf0; }
.ep-drop .big{ font-size:34px; display:block; }
.ep-drop .main{ display:block; font-size:16px; font-weight:800; color:var(--maroon); }
.ep-drop .hint{ display:block; font-size:13px; color:var(--inksoft); margin-top:5px; }
.ep-dropmsg{ font-size:13.5px; color:#a3341f; font-weight:700; margin-top:8px; }
.ep-dropmsg:empty{ display:none; }

.ep-work{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
.ep-stage{ grid-column:1; align-self:start; background:#eef1f4; border:1.5px solid var(--line); border-radius:12px; padding:12px; display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; }
#epCanvas{ background:#fff; box-shadow:0 8px 24px -14px rgba(0,0,0,.4); touch-action:none; cursor:grab; max-width:100%; }
#epCanvas.held{ cursor:grabbing; }
.ep-stagehint{ font-size:12px; color:var(--inksoft); text-align:center; }
.ep-stagehint:empty{ display:none; }
.ep-result{ grid-column:2; grid-row:1; min-width:0; }
.ep-controls{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:4px 22px; }
.ep-group{ min-width:0; }
.ep-slider{ display:flex; flex-direction:column; gap:2px; margin-bottom:10px; font-size:13.5px; font-weight:700; color:var(--ink); }
.ep-slider input{ width:100%; accent-color:var(--maroon); min-height:28px; }
.ep-tick{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:700; min-height:40px; cursor:pointer; }
.ep-tick input{ width:20px; height:20px; accent-color:var(--maroon); flex:none; }
.ep-names{ display:flex; flex-direction:column; gap:8px; margin:4px 0 12px; }

.ep-btn{ display:inline-flex; align-items:center; justify-content:center; font:inherit; font-size:14.5px; font-weight:800; padding:11px 15px; min-height:44px; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--maroon); cursor:pointer; text-decoration:none; text-align:center; overflow-wrap:anywhere; }
.ep-btn.solid{ background:var(--maroon); border-color:var(--maroon); color:#fff; }
.ep-btn.quiet{ font-size:13px; padding:8px 12px; min-height:40px; }
.ep-actions{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.ep-tools{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }

.ep-file{ background:#eef1f4; border:1.5px solid var(--line); border-radius:12px; padding:12px; text-align:center; margin-bottom:10px; }
.ep-file img{ display:inline-block; width:100%; height:auto; background:#fff; box-shadow:0 8px 24px -14px rgba(0,0,0,.4); }
.ep-checks{ list-style:none; display:flex; flex-direction:column; gap:3px; font-size:14.5px; font-weight:700; }
.ep-checks li{ position:relative; padding-left:24px; }
.ep-checks li::before{ position:absolute; left:0; top:0; font-weight:900; }
.ep-checks li.ok::before{ content:"✓"; color:var(--gold); }
.ep-checks li.no{ color:#a3341f; }
.ep-checks li.no::before{ content:"✕"; }
.ep-was{ font-size:13px; color:var(--inksoft); margin-top:4px; }
.ep-note{ font-size:13.5px; color:var(--inksoft); background:#f3eede; border-radius:9px; padding:8px 11px; margin-top:8px; }
.ep-note.bad{ color:#a3341f; font-weight:700; }
.ep-result[aria-busy="true"]{ opacity:.6; pointer-events:none; }

.ep-privacy{ font-size:12.5px; color:var(--inksoft); text-align:center; margin-top:12px; }

@media(max-width:640px){
  .ep{ padding:14px; }
  .ep-work{ grid-template-columns:minmax(0,1fr); }
  .ep-stage,.ep-result,.ep-controls{ grid-column:1; grid-row:auto; }
}