/* QC: the tile row, inspection rows with their photos, and the photo viewer. */
@layer pages{

.qc-tiles{margin-bottom:var(--s4)}
.qc-search{min-width:16rem}

/* The coaching note is the widest thing in a row: two lines here, all of it on hover. */
.qc-coach-h{min-width:18rem}
.qc-coach{max-width:28rem;font-size:var(--t6);line-height:1.45}
.qc-coach > .tsub{margin-top:var(--s1)}
.qc-coach > :not(.qc-shots){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qc-body tbody tr:hover .qc-coach > :not(.qc-shots){-webkit-line-clamp:unset}

/* Photos: small enough that twenty inspections are still a table. */
.qc-shots{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s2)}
.qc-shot{flex:none;width:3.5rem;height:3.5rem;padding:0;overflow:hidden;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--r2);transition:border-color .15s}
.qc-shot img{display:block;width:100%;height:100%;object-fit:cover}
.qc-shot:hover{border-color:var(--accent)}

/* The photo viewer; a photo removed at the far end says so. */
.photo-view img{display:block;max-width:100%;max-height:66vh;margin:0 auto;background:var(--bg);border-radius:var(--r2)}
.photo-view .photo-fail{display:none;padding:var(--s4);color:var(--ink-2);background:var(--surface-2);border-radius:var(--r2)}
.photo-view.broken img{display:none}
.photo-view.broken .photo-fail{display:block}
}