/* ==========================================================================
   WORKLOAD - who is on what, and the order their work is in (mod/workload.js,
   wave 2 of port 2, D108). Tokens only, so both themes work; loaded before
   skin.css, which stays last and carries the corners and the type.
   ========================================================================== */

.workload .wl-sum{margin:0 0 10px;}

.wl-person{border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:8px; overflow:hidden;
  background:var(--chrome);}
/* an open line is framed in the accent, and its caret says so too */
.wl-person.open{border-color:var(--accent-line);}

/* the row you tap to open somebody's line */
button.wl-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; width:100%; text-align:left;
  padding:10px 12px; background:transparent; border:0; border-radius:0; min-height:56px; color:var(--text);}
button.wl-head:hover:not(:disabled){background:var(--panel);}
.wl-caret{flex:none; width:18px; text-align:center; font-family:var(--mono); font-size:18px; line-height:1; color:var(--muted);}
.wl-name{display:flex; flex-direction:column; min-width:0; flex:1 1 140px;}
.wl-name b{font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.wl-sub{font-size:12px; color:var(--muted); font-family:var(--sans); letter-spacing:0;}
.wl-now{display:flex; flex-wrap:wrap; gap:5px; justify-content:flex-end;}

/* their line, in order */
.wl-line{border-top:1px solid var(--line);}
.wl-job{display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--line);}
.wl-job:last-child{border-bottom:0;}
/* a safety job leads the line and has no number: said in words on the row,
   marked here by a heavier edge, not by colour alone */
.wl-job.safety{border-left:4px solid var(--bad);}
.wl-pos{flex:none; min-width:56px; display:flex; align-items:center;}
.wl-no{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}
button.wl-open{flex:1 1 auto; min-width:0; text-align:left; background:transparent; border:0; border-radius:0;
  padding:2px 0; min-height:0; display:flex; flex-direction:column; gap:1px; color:var(--text);}
button.wl-open:hover:not(:disabled){background:transparent;}
.wl-open b{font-family:var(--mono); font-size:13.5px;}
.wl-open:hover b,.wl-open:focus-visible b{color:var(--accent);}
.wl-what{font-size:12.5px; color:var(--muted); font-weight:400; font-family:var(--sans); letter-spacing:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wl-tags{display:flex; flex-wrap:wrap; gap:5px; align-items:center;}
.wl-job button.small{flex:none; width:auto;}
/* time On Job: as quiet as the job count; a clock still running says
   "counting" in words and is bolder */
.wl-time{font-family:var(--mono); font-size:12px; color:var(--muted); white-space:nowrap;}
.wl-time.running{color:var(--warn); font-weight:700;}
.wl-empty,.wl-note{margin:8px 12px 10px;}

/* A phone: the job's number and name take the first line of the row, the
   tags and Machine the second. */
@media (max-width:600px){
  .wl-job{flex-wrap:wrap; gap:6px 8px;}
  button.wl-open{flex:1 1 calc(100% - 72px);}
  .wl-tags{flex:1 1 auto;}
  .wl-now{justify-content:flex-start; flex-basis:100%; padding-left:28px;}
}