/* Technicians: the standings table, a technician's window (one card per job),
   techs under the rating floor, and the Repeat review page. */
@layer pages{

/* A figure's sub-line ("16 installs · 6 repairs") stays on one line. */
td.num .tsub,td .chip + .tsub{white-space:nowrap}

/* ---- the standings table (owner, 9 Oct rebuild) ----
   Fits its card at 1280 and 1470: nothing in a row wraps, so no column is
   squeezed off the edge. The name is one line, market and rank the second;
   figures are right-aligned in tabular digits with their count in the quiet
   sub-line; a small count ("4 of 7 match") reads in the text face. */
table.standings th{white-space:nowrap}
table.standings td{padding-top:var(--s2);padding-bottom:var(--s2)}
table.standings .st-who,table.standings .st-who .tsub,table.standings .st-nw{white-space:nowrap}
table.standings td.num .tsub{font-size:var(--t7)}
table.standings td.num .thinden{font-family:var(--f-ui);font-size:var(--t6);color:var(--ink-2)}
table.standings td.num .spark-chip{margin-left:var(--s1)}
table.standings .st-who .chip{margin-left:var(--s2)}
.modal-body td,.dwin-b td{vertical-align:top}

/* ---- the technician window: four headline tiles, one quiet line ---- */
.tech-tiles .tile .val .spark-chip{vertical-align:.3em}
.tech-more{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s5);margin:var(--s3) 0 0;font-size:var(--t6);color:var(--ink-2)}
.tech-more .tm-i{font-family:var(--f-ui);font-variant-numeric:tabular-nums slashed-zero}
.tech-more b{margin-right:var(--s1);font-weight:700;color:var(--ink)}
.tech-more .tm-s{color:var(--ink-3)}
.dwin-b .spark-line{max-width:90ch;margin:var(--s1) 0 0;font-size:var(--t7);color:var(--ink-3)}
.dwin-b .tech-more + .spark-line + .note-line,.dwin-b .tech-more + .note-line{margin-top:var(--s4)}

/* ---- the technician window: one card per job ---- */
.jobs-h .tsub{margin-left:var(--s2);font-size:var(--t7);font-weight:500}
.jobs{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s3)}
.job{min-width:0;padding:var(--s3) var(--s4);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r2)}
.job.removed{opacity:.55}
.job-h{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s3);min-height:calc(var(--s5) + var(--s2))}
.job-sa{font-family:var(--f-num);font-size:var(--t6);font-weight:700}
.job-when{font-size:var(--t6);color:var(--ink-2)}
.job-act{margin-left:auto}
.jtags{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s2) 0 0;padding:0;list-style:none}
.jtag{margin:0}
.jtag::before{content:"";width:var(--s2);height:var(--s2);border-radius:50%;flex:none;background:var(--line-strong)}
.jtag.k-repeat::before,.jtag.k-callback::before{background:var(--bad)}
.jtag.k-miscode::before,.jtag.k-thin::before{background:var(--watch)}
.jtag.k-qc::before{background:var(--accent)}
.jtag.soft{color:var(--ink-2)}
.jtag.gone{text-decoration:line-through}
.jt-x{font-weight:500;color:var(--ink-3)}
.job-where{margin-top:var(--s2);font-size:var(--t6);color:var(--ink-2);overflow-wrap:anywhere}
.job-notewrap{margin-top:var(--s2)}
.job .job-note{margin:var(--s2) 0 0;max-width:90ch;line-height:1.5}
.job .job-notewrap .job-note{margin:0}
.job-note.clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.note-more{min-height:var(--s5);margin-top:var(--s1);padding:var(--s1) 0;background:none;border:0;cursor:pointer;
  font-size:var(--t7);font-weight:600;color:var(--accent)}
.note-more:hover{text-decoration:underline}
.job-insp{margin-top:var(--s3)}
.job-insp .quote{margin:var(--s1) 0 0;max-width:90ch}
.job-lab{font-size:var(--t7);font-weight:700;color:var(--ink-3)}
.job .qc-shots{margin-top:var(--s3)}
.job-why{margin-top:var(--s3)}
.job-why ul{max-width:90ch;margin:var(--s2) 0 0;padding-left:var(--s5);font-size:var(--t6);color:var(--ink-2)}
.job-why li{margin:var(--s1) 0}
.job-why .ai-sugg{font-size:var(--t7)}
.qc-co{font-size:var(--t7)}
.note.ota-why{margin:0 0 var(--s3)}
/* Dispute, when a job has more than one issue: a short menu picks which. */
.dpick{position:relative}
.dpick > summary{display:inline-flex;align-items:center;gap:var(--s2);list-style:none}
.dpick > summary::-webkit-details-marker{display:none}
.dpick > summary::after{content:"";width:var(--s2);height:var(--s2);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.dpick-menu{position:absolute;right:0;top:calc(100% + var(--s1));z-index:6;display:flex;flex-direction:column;min-width:13rem;padding:var(--s1);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r2);box-shadow:var(--sh2)}
.dpick-i{padding:var(--s2) var(--s3);text-align:left;background:none;border:0;border-radius:var(--r1);font-size:var(--t6);cursor:pointer}
.dpick-i:hover,.dpick-i:focus-visible{background:var(--accent-soft);outline:none}

/* ---- techs under the rating floor, after the rated ones ---- */
.few-h{margin:var(--s5) 0 var(--s2);font-size:var(--t5)}
.few-h .tsub,tr.fewhead > td .tsub{margin-left:var(--s2);font-weight:500}
table.few td{color:var(--ink-2)}
tr.fewhead > td{padding-top:var(--s2);padding-bottom:var(--s2);font-weight:700;color:var(--ink);background:var(--surface-2)}
tbody tr.fewhead:hover{background:none}

/* ---- Repeat review ---- */
.rr-back{margin:calc(-1 * var(--s2)) 0 var(--s3)}
.rr-sum .rr-delta{font-weight:700;color:var(--good)}
.rr-item{padding:var(--s4) 2px;border-top:1px solid var(--line)}
.rr-item:first-child{padding-top:var(--s1);border-top:0}
.rr-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s3)}
.rr-meta,.rr-cause{font-size:var(--t6);color:var(--ink-2)}
.rr-cause{margin-top:var(--s1)}
.rr-cause strong,.rr-record q,.ai-sugg strong{color:var(--ink)}
.rr-two{font-size:var(--t6)}
.ai-sugg{margin-top:var(--s1);font-size:var(--t7);color:var(--ink-2)}
.rr-notes{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s3)}
.rr-note{min-width:0;padding:var(--s3);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r2)}
.rr-note h4{margin:0 0 var(--s1);font-size:var(--t6);color:var(--ink-2)}
.rr-note h4 span{font-weight:400;color:var(--ink-3)}
.rr-note p{max-height:15.5em;margin:0;overflow:auto;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.rr-note p.rr-blank{font-style:italic;color:var(--ink-3)}
.rr-note mark{padding:0 2px;color:inherit;background:var(--watch-soft);border-radius:var(--r1);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.rr-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);margin-top:var(--s3)}
.rr-record{flex:1;min-width:15rem;font-size:var(--t6);color:var(--ink-2)}
.rr-form{display:grid;gap:var(--s3);max-width:42rem;margin-top:var(--s3);padding:var(--s3) var(--s4);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r2)}
.rr-form .rr-row{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--s2)}
.rr-more{display:flex;justify-content:center;margin-top:var(--s3)}
@media (max-width:760px){ .rr-notes{grid-template-columns:1fr} }

/* the narrow window: the tiles go two across */
@media (max-width:600px){
  .dwin-b .grid.tilerow > .tile{flex-basis:8rem;padding:var(--s3)}
}
}