/* Expedited Slide Review prototype — all selectors namespaced .xr- so the
   existing app styles are untouched. Reuses the site palette variables. */

.xr-page h1{margin-bottom:2px}
.xr-sub{color:var(--grey);font-size:14px;margin:0 0 14px}
.xr-demo-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:#FFF4E0;color:#8A5A00;border-radius:6px;padding:2px 8px;vertical-align:middle;margin-left:10px}

.xr-toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:14px 0 12px}
.xr-how{position:relative;font-size:13px}
.xr-how summary{cursor:pointer;color:var(--steel);font-weight:600;list-style:none;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:#fff}
.xr-how summary::-webkit-details-marker{display:none}
.xr-how[open] summary{background:var(--ice);color:var(--navy)}
.xr-how ul{position:absolute;z-index:20;top:calc(100% + 6px);left:0;width:min(560px,84vw);margin:0;padding:12px 14px 12px 30px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(20,48,79,.18);color:var(--grey)}
.xr-how ul li{margin:4px 0}
@media (max-width:1000px){.xr-how ul{position:fixed;left:16px;right:16px;top:auto;width:auto}}

/* finding badges — never colour alone: label + glyph always present */
.xr-find{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;letter-spacing:.04em;padding:3px 10px;border-radius:999px;white-space:nowrap;border:1px solid transparent}
.xr-find.neg{background:#E6F7F2;color:#0B4F3C;border-color:#B9E8D8}
.xr-find.pos{background:#FDECEC;color:#8A1C1C;border-color:#F1C9C9}
.xr-find.unk{background:var(--ice);color:var(--navy);border-color:var(--line)}
.xr-find .g{font-size:13px;line-height:1}

/* real cell images: montage sheets cropped to a single tile */
.xr-crop{position:relative;display:block;overflow:hidden;border-radius:8px;background:#F2E9E4;margin:0 auto}
.xr-crop img{position:absolute;top:0;left:0;max-width:none}

.xr-status{display:inline-block;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--ice);color:var(--navy);white-space:nowrap}
.xr-status.resolved{background:#DDF5E8;color:#0B5A2C}
.xr-status.escalated{background:#F3E8FD;color:#5B2B8A}
.xr-status.blocked{background:#FFF4E0;color:#8A5A00}
.xr-status.ready{background:#E3F0FF;color:#1D4D8F}

/* worklist */
.xr-filters{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 10px}
.xr-filters button{background:#fff;border:1px solid var(--line);color:var(--grey);font-weight:600;font-size:13px;padding:6px 12px;border-radius:999px}
.xr-filters button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.xr-filters button .n{opacity:.75;font-weight:700;margin-left:4px}
/* Resolved Cases tab: black bg + white text when selected, plain white chip otherwise (James 2026-09-01) */
.xr-filters button.blacktab[aria-pressed="true"]{background:#111;border-color:#111;color:#fff}
.xr-filters button.blacktab[aria-pressed="true"]:hover{background:#000}

/* the worklist needs more room than the site's 1180px container */
main.wrap:has(.xr-page){max-width:1560px}
.xr-worklist{padding:0;overflow:auto}
.xr-worklist table{min-width:1200px}
.xr-worklist td:last-child{min-width:240px}
.xr-actions{flex-wrap:nowrap}
.xr-actions button{white-space:nowrap}
.xr-worklist td{vertical-align:middle}
.xr-worklist tr.sel td{background:#F1F7FD;box-shadow:inset 3px 0 0 var(--steel)}
.xr-worklist tr[tabindex]:focus{outline:2px solid var(--mint);outline-offset:-2px}
.xr-worklist .sum{max-width:360px}
.xr-cellcount{white-space:nowrap;font-variant-numeric:tabular-nums}
.xr-unbtn{background:#FFF4E0;border:1px solid #F0D9A8;color:#8A5A00;font-weight:700;font-size:13px;border-radius:999px;padding:4px 11px;white-space:nowrap}
.xr-unbtn:hover{background:#FBE9C6}
.xr-unbtn.done{background:#E6F7F2;border-color:#B9E8D8;color:#0B4F3C}
.xr-actions{display:flex;gap:6px;white-space:nowrap}
.xr-actions button{padding:6px 12px;font-size:13px}
.xr-kbdhint{color:var(--grey);font-size:12px;margin:8px 2px 0}
.xr-kbdhint kbd{background:var(--ice);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 5px;font:12px/1.5 inherit;color:var(--navy)}

/* review line (compact context bar inside detail views) */
.xr-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13.5px}
.xr-line code{font-size:13px}

/* modal overlays (tray / resolution) */
.xr-overlay{position:fixed;inset:0;background:rgba(12,24,36,.55);z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:12px;overflow:auto}
.xr-dialog{background:#fff;border-radius:14px;max-width:980px;width:100%;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:auto;box-shadow:0 18px 60px rgba(10,20,30,.35);display:block}
/* display:block, not flex-column (James 2026-09-05): as a flex column the body shrank to the cap and its content spilled out below the white box */
.xr-dialog-head{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}
.xr-dialog-head h2{margin:0;font-size:16px}
.xr-x{margin-left:auto;background:none;border:0;color:var(--grey);font-size:22px;line-height:1;cursor:pointer;padding:4px 8px}
.xr-x:hover{color:var(--navy)}
.xr-dialog-body{padding:16px 18px}

/* unclassified-cell tray */
.xr-tray{display:flex;gap:18px;flex-wrap:wrap}
.xr-tray .stage{flex:1 1 420px;min-width:400px;text-align:center}
.xr-stagewrap{position:relative;display:inline-block;margin:0 50px}
.xr-stagebtn{border:0;background:none;padding:0;cursor:pointer;display:inline-block;line-height:0;border-radius:10px}
.xr-stagebtn:hover,.xr-stagebtn:focus-visible{box-shadow:0 0 0 3px var(--mint)}
.xr-confirmprop{width:100%;margin-bottom:10px;text-align:left;font-size:14px}
.xr-arrow{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.94);color:var(--navy);font-size:24px;line-height:1;font-weight:700;cursor:pointer;box-shadow:0 2px 8px rgba(20,48,79,.2);display:flex;align-items:center;justify-content:center;padding:0 0 3px;z-index:2}
/* fully clear of the image: 38px button + 12px (~1/8") gap to the image edge */
.xr-arrow.left{left:-50px}
.xr-arrow.right{right:-50px}
.xr-arrow:hover{background:#fff;border-color:var(--steel)}
.xr-arrow:disabled{opacity:.35;cursor:default;box-shadow:none}
.xr-tray .stage svg{width:min(300px,100%);height:auto;border:1px solid var(--line);border-radius:10px;background:#FDF7F2}
.xr-tray .stage .cap{font-size:12.5px;color:var(--grey);margin-top:6px}
.xr-tray .assign{flex:1 1 320px;min-width:280px}
.xr-classgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin-top:8px;max-height:340px;overflow:auto}
.xr-classgrid button{background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:13px;padding:8px 10px;border-radius:8px;text-align:left}
.xr-classgrid button:hover{border-color:var(--steel);background:#F5F9FD}
.xr-classgrid button.chosen{background:var(--navy);border-color:var(--navy);color:#fff}
.xr-classgrid button.suggested{border-color:#9fd9c8;box-shadow:inset 0 0 0 1px #9fd9c8}
.xr-exclude{margin-top:8px;width:100%;background:#fff;border:1px dashed #C9A8A8;color:#7A1F1F;font-weight:600;font-size:13px;padding:8px 10px;border-radius:8px;text-align:left}
.xr-exclude:hover{background:#FBF3F3}
.xr-exclude.chosen{background:#7A1F1F;color:#fff;border-style:solid}
.xr-thumbs{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.xr-thumbs button{padding:2px;border:2px solid var(--line);border-radius:8px;background:#FDF7F2;line-height:0;cursor:pointer}
.xr-thumbs button svg{width:44px;height:44px}
.xr-thumbs button.cur{border-color:var(--steel)}
.xr-thumbs button.ok{border-color:var(--mint)}
.xr-thumbs button.ex{border-color:#B23B3B}
.xr-progress{font-size:13px;font-weight:700;color:var(--navy)}
.xr-progressbar{height:6px;background:#E2E9F2;border-radius:3px;overflow:hidden;margin:6px 0 0}
.xr-progressbar i{display:block;height:100%;background:var(--mint);transition:width .2s}

/* detailed slide review workspace */
.xr-detail-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.xr-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.xr-gal button{padding:3px;border:2px solid var(--line);border-radius:10px;background:#FDF7F2;line-height:0;cursor:pointer;position:relative}
.xr-gal button svg{width:100%;height:auto}
.xr-gal button.sel{border-color:var(--steel)}
.xr-gal button.un{border-color:#E8A33D}
.xr-gal button.corr{border-color:#5B2B8A}
.xr-gal .lbl{display:block;font-size:10.5px;line-height:1.25;color:var(--grey);padding:3px 2px 1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xr-gal .mark{position:absolute;top:4px;right:4px;font-size:10px;font-weight:800;background:#FFF4E0;color:#8A5A00;border-radius:5px;padding:1px 4px}
.xr-gal .mark.corr{background:#F3E8FD;color:#5B2B8A}
.xr-classchips{display:flex;gap:5px;flex-wrap:wrap;margin:8px 0 12px}
.xr-classchips button{background:#fff;border:1px solid var(--line);color:var(--grey);font-weight:600;font-size:12px;padding:4px 10px;border-radius:999px}
.xr-classchips button[aria-pressed="true"]{background:var(--steel);border-color:var(--steel);color:#fff}
.xr-inspector svg{width:100%;max-width:260px;height:auto;border:1px solid var(--line);border-radius:10px;background:#FDF7F2}
.xr-inspector table{font-size:13px}
.xr-inspector td,.xr-inspector th{padding:5px 8px}
.xr-audit{font-size:12.5px;max-height:280px;overflow:auto}
.xr-audit .ln{display:flex;gap:8px;padding:4px 0;border-top:1px solid var(--line)}
.xr-audit .ln:first-child{border-top:0}
.xr-audit time{color:var(--grey);white-space:nowrap;font-variant-numeric:tabular-nums}
.xr-audit b{font-weight:700;color:var(--navy)}

/* resolution panel */
.xr-res .disp{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.xr-res .disp label{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14px;color:var(--ink);margin:0;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer}
.xr-res .disp label:has(input:checked){border-color:var(--steel);background:#F5F9FD}
.xr-res .disp input{margin-top:3px}
.xr-res .disp b{display:block;font-size:14px}
.xr-res .disp span{font-size:12.5px;color:var(--grey)}
.xr-difftable td:nth-child(2),.xr-difftable th:nth-child(2){text-align:right;font-variant-numeric:tabular-nums}

/* success toast */
.xr-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--navy);color:#fff;font-weight:600;font-size:14px;border-radius:10px;padding:12px 20px;z-index:70;box-shadow:0 10px 30px rgba(10,20,30,.3)}
.xr-toast b{color:var(--mint)}

/* focus visibility everywhere in the prototype */
.xr-page button:focus-visible,.xr-dialog button:focus-visible,.xr-page [tabindex]:focus-visible{outline:2px solid var(--mint);outline-offset:1px}

@media (max-width:900px){.xr-worklist table{min-width:760px}}

/* Resolution dialog: draft-report link and the one-line reflex summary (James, 2026-09-01) */
.xr-res .xr-readpdf { font-weight: 600; text-decoration: underline; }

/* Grouped classification palette: lineage headings, most common lineage first (James, 2026-09-01).
   The picker scrolls as one list so the groups stay in frequency order; headings stick so the
   lineage stays visible while scrolling a long subtype list. */
.xr-classpicker{margin-top:8px;max-height:360px;overflow:auto}
.xr-classpicker .xr-classgrid{max-height:none;overflow:visible;margin-top:6px}
.xr-classgroup + .xr-classgroup{margin-top:12px}
.xr-classgroup h4{
  position:sticky;top:0;z-index:1;margin:0;padding:4px 0 3px;
  background:var(--paper,#fff);
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--steel,#5B7085);border-bottom:1px solid var(--line,#E3E8EF);
}

/* The lineage the reader proposed: the palette opens here, and the heading says why. */
.xr-classgroup.focus > h4{color:var(--navy,#12324F);border-bottom-color:var(--navy,#12324F)}
.xr-classgroup.focus > h4::after{content:" · proposed";color:var(--steel,#5B7085);font-weight:600;letter-spacing:.04em}

/* Accept Proposed: bulk-accept the reader's class for the remaining unclassified cells.
   Red because it commits many cells at once; disabled until >10% have been confirmed by hand. */
.xr-acceptprop{
  background:#B3261E;border:1px solid #8C1D18;color:#fff;font-weight:700;font-size:13px;
  padding:7px 14px;border-radius:8px;cursor:pointer;
}
.xr-acceptprop:hover:not(:disabled){background:#8C1D18}
.xr-acceptprop:disabled{background:#EEE7E6;border-color:#DCD2D1;color:#9A8C8B;cursor:not-allowed}
.xr-acceptprop:focus-visible{outline:2px solid #B3261E;outline-offset:2px}

/* Tray actions live in the sticky header so they stay reachable when the thumbnail grid is
   taller than the viewport (55+ unclassified cells). (James, 2026-09-01) */
.xr-headactions{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
.xr-headactions .xr-acceptprop{padding:6px 12px;font-size:12.5px;white-space:nowrap}
.xr-headactions .mint.sm{white-space:nowrap}
@media (max-width:640px){
  .xr-dialog-head{flex-wrap:wrap}
  .xr-headactions{margin-left:0;width:100%;order:3;justify-content:flex-end}
}

/* Reflex sits in the left column under its own heading; corrections appear only on the
   "resolve with corrections" path and drive a regenerated report. (James, 2026-09-01) */
.xr-res .xr-reflex{margin:0 0 14px;font-size:14px;line-height:1.5;white-space:normal}
.xr-corrbox{margin:4px 0 14px;padding:12px;border:1px solid var(--line);border-left:3px solid var(--navy);border-radius:8px;background:#F7FAFD}
.xr-corrbox label{display:block;margin-bottom:6px;font-size:13px}
.xr-corrbox textarea{width:100%;font-size:13px;line-height:1.45}
.xr-corrbox p{margin:6px 0 0}

/* The resolution dialog is a genuine two-column layout: a fixed grid rather than wrapping flex,
   so a long line of report text can never collapse it into one column. minmax(0,1fr) lets the
   columns shrink below their content width instead of forcing horizontal overflow.
   (James, 2026-09-01) */
.xr-res .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.xr-res .col{min-width:0}
.xr-res .col > *{max-width:100%}
.xr-res .xr-difftable{width:100%}
@media (max-width:720px){ .xr-res .row{grid-template-columns:minmax(0,1fr)} }

/* Affirm toggles to Rewind once a class has been affirmed — the state is the button, so there is
   no second confirmation step. (James, 2026-09-01) */
.xr-rewind{border-color:var(--steel)!important;color:var(--steel)!important;font-weight:600}

/* Review All: thumbnail strip sectioned by class (James 2026-09-01) */
.xr-thumbsec{margin-top:10px}
.xr-thumbsec h5{margin:0 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--steel)}
.xr-thumbsec .xr-thumbs{margin-top:0}

/* ---- tray header cleanup (James 2026-09-02): one calm row, evenly spaced buttons ---- */
.xr-dialog-head{gap:14px}
.xr-dialog-head h2{font-size:15px;white-space:nowrap;display:flex;align-items:center;gap:8px}
.xr-dialog-head h2 code{font-size:12.5px}
.xr-progress{white-space:nowrap}
.xr-headactions{gap:10px}
.xr-headactions button{white-space:nowrap;padding:7px 14px;font-size:13px;font-weight:700;border-radius:9px;line-height:1.2}
.xr-headactions .xr-acceptprop{background:var(--navy);border:0;color:#fff}
.xr-headactions .xr-acceptprop:hover:not(:disabled){background:#1D4D7A}
.xr-headactions .xr-acceptprop:disabled{background:#E3E9F0;border:0;color:#8A97A6;cursor:not-allowed;box-shadow:none}
.xr-headactions .xr-acceptprop .n{display:inline-block;margin-left:8px;min-width:20px;padding:0 6px;border-radius:999px;background:#fff;color:#5A6B7C;font-size:11.5px;font-weight:800;text-align:center;line-height:18px}
.xr-headactions .xr-status{padding:5px 10px}

/* RBC Grid block (Scott Dunbar 2026-09-04) */
.xr-rbc{margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-left:3px solid #B00020;border-radius:10px;background:#FFFBFB}
.xr-rbc h3{margin:0;font-size:15px}
.xr-rbc-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.xr-rbc-body{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.xr-rbc-field{padding:0;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:zoom-in;line-height:0;flex:0 0 auto}
.xr-rbc-field img{width:300px;max-width:100%;height:auto;border-radius:8px;display:block}
.xr-rbc.compact .xr-rbc-field img{width:170px}
.xr-rbc-side{flex:1 1 260px;min-width:220px}
.xr-rbc-verdict{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.xr-rbc-tiles{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.xr-rbc-tile{padding:0;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:zoom-in;line-height:0;position:relative}
.xr-rbc-tile img{width:88px;height:88px;object-fit:cover;border-radius:6px;display:block}
.xr-rbc-tile span{position:absolute;left:4px;bottom:4px;font-size:10px;font-weight:700;color:#fff;background:rgba(10,20,30,.65);padding:1px 5px;border-radius:4px;line-height:1.4}
.xr-status.ok{background:#E6F7F2;color:#0B4F3C}

/* resolution dialog: actions pinned to the visible bottom of the dialog (James 2026-09-05: dialog fell off a short screen) */
.xr-res .xr-actions{position:sticky;bottom:0;display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#fff;padding:10px 0 12px;margin:12px -18px -16px;padding-left:18px;padding-right:18px;border-top:1px solid var(--line);z-index:2}
.xr-res .xr-actions .small{flex:1 1 260px;min-width:200px}
.xr-res .disp span{font-size:12px}
.xr-res .disp label{padding:8px 10px}