/* =========================================================================
   public/css/evidence.css — v4.0.0 (owner A7). The upload widget (.upload, progress.upprogress,
   .uperror — CONTRACTS.md §13), Stage 1's documentation group and Stage 2's two tables and
   picture viewer. Tokens only; every responsive block is `@media screen and (…)`.
   Phone first: at 360 px every upload control is a full-width
   44 px button, the progress bar is full width, nothing depends on hover, and the viewer's
   image fits the viewport.
   ========================================================================= */

/* ---- the upload widget ------------------------------------------------------------------- */
.upload{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);min-width:0;max-width:100%}
.upload .upbtn{white-space:normal;text-align:center}
.upload .upbtn[aria-disabled="true"]{opacity:.7;cursor:progress}
.upload .upactions{display:flex;gap:var(--space-2);flex-wrap:wrap}
.upbusy{display:flex;align-items:center;gap:var(--space-3);width:100%;min-width:12rem;max-width:22rem}
.upthumb{display:block;flex:none;max-height:48px;max-width:64px;width:auto;height:auto;
  border-radius:var(--radius-sm);box-shadow:0 0 0 1px var(--border-strong);background:var(--surface-2)}
.upmeter{display:flex;flex-direction:column;gap:var(--space-1);flex:1 1 auto;min-width:0}
.uptext{font-size:var(--fs-sm);font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
/* a native <progress>: the browser announces its value; styled to the token pair .seg uses */
progress.upprogress{-webkit-appearance:none;appearance:none;display:block;width:100%;height:12px;border:0;
  border-radius:var(--radius-pill);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border-strong);color:var(--primary)}
progress.upprogress::-webkit-progress-bar{background:var(--surface-2);border-radius:var(--radius-pill);box-shadow:inset 0 0 0 1px var(--border-strong)}
progress.upprogress::-webkit-progress-value{background:var(--primary);border-radius:var(--radius-pill)}
progress.upprogress::-moz-progress-bar{background:var(--primary);border-radius:var(--radius-pill)}
.uperror{display:block;max-width:28rem;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
  border-left:4px solid var(--danger);background:var(--danger-bg);color:var(--danger);
  font-size:var(--fs-sm);font-weight:600;line-height:1.5;overflow-wrap:anywhere}

/* ---- Stage 1: the documentation group --------------------------------------------------------- */
.certstatus{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin:var(--space-2) 0 0;font-size:var(--fs-base)}
.certstatus .certlabel{font-weight:600}
#s1CertUpload{margin-top:var(--space-3)}

/* ---- Stage 2: the Xi exercise list ------------------------------------------------------------ */
.chip.provisional{background:var(--warning-bg);color:var(--warning)}
table.xilist td.xiname{font-weight:500}
table.xilist td.xiup{width:14rem}
table.xilist td.xistatus{width:12rem}
.rejnote{display:block;margin-top:var(--space-1);font-size:var(--fs-sm);color:var(--text);line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap}
.rejnote .rl{font-weight:600}
details#xiRetired{margin-top:var(--space-4)}
details#xiRetired > summary{cursor:pointer;font-weight:600;font-size:var(--fs-sm);color:var(--text-muted);padding:var(--space-1) 0}
table.techlist td.techstatus{white-space:nowrap}
/* the pill and its buttons stay on one line; the staff's undo history under them wraps, so the table keeps
   "Confirmed By (Faculty)" and "Confirmation Date" in view */
table.techlist td.techstatus .stamp{white-space:normal}
table.techlist td.techname{font-weight:500}

/* ---- the picture viewer and the Admin review (inside Tracker.openDialog) ------------------------ */
.evidenceview{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.evidenceview img.evidence{display:block;max-width:100%;max-height:70vh;width:auto;height:auto;margin:0 auto;
  border-radius:var(--radius-md);box-shadow:0 0 0 1px var(--border-strong);background:var(--surface-2)}
.evidenceview .evmeta{font-size:var(--fs-sm);color:var(--text-muted);overflow-wrap:anywhere}
.evidenceview .evlinks{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center}
.reviewform{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);border:1px solid var(--border);
  border-radius:var(--radius-lg);background:var(--surface-2)}
.reviewform .field input[type=number]{max-width:8rem}
.reviewform .field textarea{min-height:4.5rem}
.reviewform .row{margin-top:0}
.reviewresult{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--surface-2);
  border-left:4px solid var(--border-strong);font-size:var(--fs-base)}
.reviewresult.ok{border-left-color:var(--success)}
.reviewresult.warn{border-left-color:var(--warning)}

/* ---- phones: one-column cards, status beside the name, full-width 44 px buttons ------------------
   `table.rtable.xilist` outranks record.css's table rules, which load after this file. */
@media screen and (max-width:699.98px){
  table.rtable.xilist{display:block}
  table.rtable.xilist thead{display:none}
  table.rtable.xilist tbody{display:block;padding:var(--space-2)}
  table.rtable.xilist tr{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"num name" "num status" "up up";
    gap:var(--space-1) var(--space-2);align-items:start;border:1px solid var(--border);border-radius:var(--radius-md);
    background:var(--surface-2);padding:var(--space-3);margin-bottom:var(--space-2)}
  table.rtable.xilist tr:last-child{margin-bottom:0}
  table.rtable.xilist td{display:block;border:0;padding:0;width:auto;min-width:0}
  table.rtable.xilist td.rownum{grid-area:num;font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);text-align:left;width:auto;padding-top:1px}
  table.rtable.xilist td.xiname{grid-area:name;font-weight:600}
  table.rtable.xilist td.xistatus{grid-area:status}
  table.rtable.xilist td.xiup{grid-area:up;width:auto;margin-top:var(--space-2)}
  table.rtable.xilist td.xiup .upload,table.rtable.xilist td.xiup .cellactions{width:100%}
  table.rtable.xilist td.xiup button{width:100%;min-height:44px}
}
@media screen and (max-width:599.98px){
  .upload{width:100%;align-items:stretch}
  .upload .upbtn,.upload .upcancel,.upload .upretry,.upload .upactions button{width:100%;min-height:44px}
  .upload .upactions{flex-direction:column}
  .upbusy{max-width:none}
  #s1CertUpload .upbtn{width:100%}
  .evidenceview img.evidence{max-height:60vh}
}
@media (pointer:coarse){
  .upload .upbtn,.upload .upcancel,.upload .upretry{min-height:44px}
}
@media (forced-colors:active){
  progress.upprogress{forced-color-adjust:none;background:Canvas;box-shadow:inset 0 0 0 1px CanvasText}
  progress.upprogress::-webkit-progress-value{background:Highlight}
  .uperror{border:1px solid CanvasText}
}
@media print{
  /* upload controls, progress and previews are chrome for the person at the keyboard */
  .upload,.upthumb,progress.upprogress,.uperror,.reviewform,.evidenceview .evlinks{display:none!important}
  .rejnote{white-space:normal}
}