/* ============================================================================
   quality.css — layout utilities for the QUALITY section: the Quality Training
   Log page (who attended) and the Quality Signature Log page (who signed).
   Both read window.QUALITY. Uses ONLY existing design tokens (styles.css).

   NO new colour system. A colour is a claim about the data, so these pages
   borrow the claims the dashboard already makes:
     complete / attended / signed   var(--under)
     waiting, not yet a failure     var(--st-progress)
     a real gap in the record       var(--over)
     not recorded                   a muted hatch — never a real category colour
   ========================================================================== */

/* Distribution rows (label · bar · count) ----------------------------------*/
.ql-dist { display: flex; align-items: center; gap: 10px; margin: 9px 0; }
.ql-dist-lab { flex: 0 0 42%; max-width: 260px; font-size: 12.5px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.ql-dist-n { flex: 0 0 34px; text-align: right; font-weight: 700;
  font-variant-numeric: tabular-nums; font-size: 12.5px; }
/* A bucket the workbook left EMPTY is drawn hatched, so "not recorded" can
   never be mistaken for a real category with a real colour. */
.ql-dist .progress > i.is-blank {
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--muted) 34%, transparent) 0 4px,
    transparent 4px 8px);
}

/* Sessions column chart ----------------------------------------------------*/
.ql-sessions { display: block; width: 100%; }

/* Single-line cells. Names and company names run long; clamp to one line —
   the row modal carries the full untruncated value. Must be a BLOCK inside the
   <td>: a table cell ignores max-width unless the table is table-layout:fixed. */
.ql-cell { display: block; max-width: 170px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* Attention markers on a roster row ----------------------------------------*/
.ql-flags { display: flex; flex-wrap: wrap; gap: 4px; }
.ql-flags .badge { font-size: 10.5px; }

/* The "one category only" caption under a degenerate chart ------------------
   Present while the workbook holds a single company or a single session; it
   disappears on its own the moment a second one exists. */
.ql-single { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); }

/* Instruction card (how to log another training) ---------------------------*/
.ql-steps { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--muted); }
.ql-steps li { margin: 5px 0; }
.ql-steps b, .ql-steps code { color: var(--ink); }

/* Long free-text inside a record modal -------------------------------------*/
.ql-longtext { white-space: pre-wrap; }

/* Cross-link strip (training page -> signature page) ------------------------
   One line, one number, one way through. The left border is the only colour it
   carries, and it states the same claim the KPI tile does. */
.ql-crosslink { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding: 12px 14px; border: 1px solid var(--border);
  border-left-width: 4px; border-radius: 10px; background: var(--card);
  font-size: 13px; }
.ql-crosslink > div { flex: 1 1 260px; }
.ql-crosslink.is-ok { border-left-color: var(--under); }
.ql-crosslink.is-gap { border-left-color: var(--over); }

/* Signed-vs-trained reconciliation ------------------------------------------
   Three tiles, three different claims. `is-wait` is deliberately NOT red: a
   person who signed and has not attended yet is a pipeline state, not a
   compliance failure, and colouring it red would overstate the source. */
.ql-recon { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ql-recon-tile { padding: 12px 14px; border: 1px solid var(--border);
  border-top-width: 3px; border-radius: 10px; background: var(--bg-2, transparent); }
.ql-recon-tile.is-ok { border-top-color: var(--under); }
.ql-recon-tile.is-gap { border-top-color: var(--over); }
.ql-recon-tile.is-wait { border-top-color: var(--st-progress); }
.ql-recon-n { font-size: 26px; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.ql-recon-lab { margin-top: 2px; font-size: 12.5px; font-weight: 600; }
.ql-recon-sub { margin-top: 2px; font-size: 11.5px; color: var(--muted); }

.ql-gap-h { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; }
/* "None" is an ANSWER, not an empty state: it is the result the boss came for,
   so it is stated in words rather than left as a blank table. */
.ql-gap-none { margin: 0; padding: 10px 12px; border-radius: 8px; font-size: 12.5px;
  color: var(--under);
  background: color-mix(in srgb, var(--under) 10%, transparent); }

@media (max-width: 720px) {
  .ql-dist-lab { flex: 0 0 40%; }
  .ql-cell { max-width: 120px; }
  .ql-recon { grid-template-columns: 1fr; }
}