/* =========================================================================
   public/css/cases.css — v4.0.0 (owner A7). Stage 3 (bedside case log, competencies, completion
   box) and Stage 5 (procedure table, procedure detail, console case cards, the case form and the
   reviewer's panel). Tokens only; every responsive block is `@media screen and (…)`.
   The shared primitives (.stacktable, .sectionbar, .sumtiles, .stagestatus, .inlineform, .stword)
   live in record.css.
   ========================================================================= */

/* ---- Stage 3 ---------------------------------------------------------------------------------- */
table.bedsidelog{font-size:var(--fs-sm)}
table.bedsidelog td.casestatus{min-width:10rem}
table.bedsidelog th{white-space:normal}
table.bedsidelog td.casedate{white-space:nowrap}
details.casenotes{margin-top:var(--space-1)}
details.casenotes > summary{cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:var(--primary);
  display:inline-flex;align-items:center;gap:var(--space-1)}
details.casenotes > p{margin:var(--space-1) 0 0;font-size:var(--fs-sm);white-space:pre-wrap;overflow-wrap:anywhere;max-width:40rem}
table.complist td.compname{font-weight:600}
table.complist td.compdesc{color:var(--text-muted);font-size:var(--fs-sm)}
#s3Status .critlist{margin:0}
#s3Status .currentstatus{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-2)}
#s3Status .currentstatus b{font-size:var(--fs-base)}
#bedsideForm .field textarea{min-height:4.5rem}
/* the full-width notes row under a case is for paper only (print rules below) */
@media screen{ table.bedsidelog tr.casenotesrow{display:none!important} }
@media screen and (max-width:1199.98px){
  table.bedsidelog tr.placeholder{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-1) var(--space-3)}
  table.bedsidelog tr.placeholder td:not(.rownum):not(.casestatus){display:none}
  table.bedsidelog tr.placeholder td.casestatus[data-label]::before{content:none}
}

/* ---- Stage 5: the 17-procedure table ----------------------------------------------------------- */
table.proclist td.procname a{font-weight:600;overflow-wrap:anywhere}
table.proclist td.pr-num{white-space:nowrap}
#s5Overview .tablewrap{border-radius:0 0 var(--radius-lg) var(--radius-lg)}

/* ---- Stage 5: one procedure ---------------------------------------------------------------------- */
#procDetail .backlink{display:inline-flex;margin:var(--space-4) 0 0}
#procDetail .procsummary{margin:var(--space-3) var(--space-4);font-size:var(--fs-base)}
#procDetail .procsummary b{font-weight:600}
#procDetail .emptycases{padding:var(--space-4);color:var(--text-muted)}
ol.casehistory{list-style:none;margin:0;padding:var(--space-3) var(--space-4) var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}
li.casecard{border:1px solid var(--border);border-left:4px solid var(--border-strong);border-radius:var(--radius-lg);
  background:var(--surface);padding:var(--space-3) var(--space-4);min-width:0}
li.casecard[data-status="approved"]{border-left-color:var(--success)}
li.casecard[data-status="awaiting"]{border-left-color:var(--primary)}
li.casecard[data-status="returned"]{border-left-color:var(--warning)}
li.casecard[data-status="draft"]{border-left-style:dashed}
li.casecard:focus{outline:2px solid var(--focus-ring);outline-offset:2px}
li.casecard .cchead{display:flex;align-items:center;gap:var(--space-2) var(--space-3);flex-wrap:wrap}
li.casecard .cchead h4{margin:0;font-size:var(--fs-md);font-weight:600;flex:1 1 12rem;min-width:0;overflow-wrap:anywhere}
li.casecard dl.ccfields{display:grid;grid-template-columns:minmax(8rem,max-content) minmax(0,1fr);gap:var(--space-1) var(--space-4);margin:var(--space-3) 0 0}
li.casecard dl.ccfields dt{color:var(--text-muted);font-size:var(--fs-sm);font-weight:600}
li.casecard dl.ccfields dd{margin:0;overflow-wrap:anywhere;white-space:pre-wrap}
li.casecard .levels{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin-top:var(--space-3);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--surface-2)}
li.casecard .levels .lv{display:flex;flex-direction:column;min-width:0}
li.casecard .levels .lvk{font-size:var(--fs-xs);font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
li.casecard .levels .lvv{font-weight:600}
li.casecard .levels .lvchanged{font-size:var(--fs-xs);color:var(--text-muted)}
li.casecard .comment{margin-top:var(--space-2);padding:var(--space-2) var(--space-3);border-left:3px solid var(--border-strong);
  background:var(--surface-2);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:var(--fs-sm);white-space:pre-wrap;overflow-wrap:anywhere}
li.casecard .comment .rl{font-weight:600}
li.casecard .notice .keptcomment{margin:var(--space-2) 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
li.casecard .notice .keptcomment .rl{font-weight:600}
li.casecard .ccactions{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-3)}
li.casecard details.cchistory{margin-top:var(--space-3)}
li.casecard details.cchistory > summary{cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:var(--text-muted)}
li.casecard ul.eventlist{list-style:none;margin:var(--space-2) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-1)}
li.casecard ul.eventlist li{font-size:var(--fs-sm);line-height:1.5;padding-left:var(--space-3);border-left:2px solid var(--border);overflow-wrap:anywhere}
details#ccWithdrawn{margin:0 var(--space-4) var(--space-4)}
details#ccWithdrawn > summary{cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:var(--text-muted)}

/* ---- the case form and the reviewer's panel ------------------------------------------------------- */
#ccForm{margin:var(--space-3) var(--space-4)}
#ccForm .field textarea{min-height:5rem}
fieldset.levelpick{border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3) var(--space-3);
  margin:0 0 var(--space-3);min-width:0;background:var(--surface)}
fieldset.levelpick legend{font-size:var(--fs-xs);font-weight:600;color:var(--text-muted);padding:0 var(--space-1)}
fieldset.levelpick[aria-invalid="true"]{border-color:var(--danger)}
label.levelopt{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-2);border-radius:var(--radius-md);cursor:pointer}
label.levelopt:hover{background:var(--surface-2)}
label.levelopt input[type=radio]{width:18px;height:18px;min-height:0;margin:3px 0 0;flex:none;accent-color:var(--primary);cursor:pointer}
label.levelopt .lvtext{display:flex;flex-direction:column;min-width:0}
label.levelopt .lvname{font-weight:600}
label.levelopt .lvdef{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.5}
.ccreviewer select{max-width:none;width:100%}
#ccReview{margin-top:var(--space-3);max-width:none}
#ccReview .rvlevel{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:flex-end}
#ccReview .rvlevel .field{flex:1 1 14rem;margin-bottom:0}
#ccReview .rvlevel select{max-width:none;width:100%}

@media (pointer:coarse){
  label.levelopt{min-height:44px}
  label.levelopt input[type=radio]{width:22px;height:22px}
}
@media screen and (max-width:599.98px){
  li.casecard{padding:var(--space-3)}
  li.casecard dl.ccfields{grid-template-columns:minmax(0,1fr);gap:0}
  li.casecard dl.ccfields dd{margin-bottom:var(--space-2)}
  li.casecard .ccactions button{flex:1 1 100%}
  ol.casehistory{padding:var(--space-2)}
  #ccForm{margin:var(--space-2)}
  #ccForm .row button,#bedsideForm .row button,#ccReview .row button{flex:1 1 100%}
}
@media (forced-colors:active){
  li.casecard,fieldset.levelpick{border:1px solid CanvasText}
}
@media print{
  li.casecard{break-inside:avoid}
  .ccactions,#ccForm,#ccReview,#bedsideForm{display:none!important}
  /* the nine-column bedside log on a Letter page (about 710 px between the margins): smaller type and
     tighter cells, the header split after its slash (Attending/<wbr>Surgeon), the status as plain ink */
  table.bedsidelog{font-size:8.5pt}
  table.bedsidelog :is(th,td){padding:3pt 4pt!important}
  table.bedsidelog th{font-size:7.5pt;letter-spacing:0!important}
  table.bedsidelog td.casestatus .pill{padding:0;gap:2pt;background:transparent!important;box-shadow:none!important;font-size:inherit}
  table.bedsidelog tr{break-inside:avoid}
  /* the notes print in full across the table under their case, in place of the folded <details> */
  details.casenotes{display:none!important}
  table.bedsidelog tr.hasnotes{break-after:avoid}
  table.bedsidelog tr.hasnotes td{border-bottom:0!important}
  table.bedsidelog tr.casenotesrow td{padding-top:0!important;overflow-wrap:anywhere}
  table.bedsidelog tr.casenotesrow .rl{font-weight:600}
  table.bedsidelog tr.casenotesrow .notestext{white-space:pre-wrap}
}