Add a dedicated Take Photo button alongside the library picker

static/app.js

@@ -277,13 +277,9 @@ function resetGradeState() {
   renderGradeReview();
 }
 
-$('#btn-grade').addEventListener('click', () => {
+async function addPickedFrom(input) {
-  resetGradeState();
-  $('#grade-file').click();
-});
-$('#grade-file').addEventListener('change', async (e) => {
   try {
-    const picked = await readPickedImages(e.target, 6 - gradeState.files.length);
+    const picked = await readPickedImages(input, 6 - gradeState.files.length);
     if (!picked.length) return;
     gradeState.files.push(...picked);
     renderGradeReview();
@@ -291,7 +287,19 @@ $('#grade-file').addEventListener('change', async (e) => {
     $('#grade-status').hidden = false;
     $('#grade-status').textContent = err.message;
   }
+}
+
+$('#btn-grade').addEventListener('click', () => {
+  resetGradeState();
+  $('#grade-file').click();
 });
+$('#grade-file').addEventListener('change', (e) => addPickedFrom(e.target));
+
+// Camera shots add onto whatever's already picked (front, then flip to the
+// back for a second shot) rather than resetting — resetGradeState() is only
+// for starting a fresh card, which the library button already does.
+$('#btn-camera').addEventListener('click', () => $('#grade-camera').click());
+$('#grade-camera').addEventListener('change', (e) => addPickedFrom(e.target));
 $('#grade-review').addEventListener('click', (e) => {
   if (e.target.closest('#grade-add-more')) { $('#grade-file').click(); return; }
   if (e.target.closest('#grade-cancel') || e.target.closest('#grade-discard')) {

static/index.html

@@ -44,10 +44,19 @@
       back centering, and it can only tell a print line from a crease — about five PSA
       grades apart — if it can check both sides.</div>
     <div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:12px">
-      <button id="btn-grade" class="btn">Choose photo(s)…</button>
+      <button id="btn-camera" class="btn">Take photo…</button>
+      <button id="btn-grade" class="btn btn-quiet">Choose from library…</button>
       <input id="grade-label" class="input" placeholder="Card name (optional, for your history)" style="flex:1 1 220px">
     </div>
     <input id="grade-file" type="file" accept="image/*" multiple hidden>
+    <!-- capture="environment" is what skips straight to the rear camera
+         instead of showing the OS's photo-library picker — the library
+         input above already offers a camera option buried in that picker
+         on most phones, but a dedicated button is one tap instead of two,
+         and makes "take a fresh photo" the obvious default rather than
+         something you have to notice. Desktop browsers just ignore
+         `capture` and fall back to a normal file picker. -->
+    <input id="grade-camera" type="file" accept="image/*" capture="environment" hidden>
     <div id="grade-status" class="search-status" hidden></div>
     <div id="grade-review"></div>
   </section>