/* ============================================================================
   bzo.css — layout utilities for the REPORTS ▸ SOR page (window.BZO).
   Uses ONLY existing design tokens (styles.css). No new colour system:
   safe = var(--under), unsafe = var(--over), watch = var(--st-progress),
   "not recorded" = a muted hatch, never a real category colour.
   ========================================================================== */

/* Safe-vs-unsafe split bar --------------------------------------------------*/
.sor-split { display: flex; height: 30px; border-radius: 9px; overflow: hidden; border: 1px solid var(--border); }
.sor-split > span { display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800; color: #fff; letter-spacing: .3px; min-width: 0; overflow: hidden; }
.sor-split > span.is-none { color: var(--muted); }

/* Legend row ---------------------------------------------------------------*/
.sor-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin-top: 10px; font-size: 12px; color: var(--muted); }
.sor-legend .sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px;
  margin-right: 6px; vertical-align: -1px; }

/* Distribution rows (label · bar · count) ----------------------------------*/
.sor-dist { display: flex; align-items: center; gap: 10px; margin: 9px 0; }
/* Cap the label column so a full-width card doesn't hand 44% of 1200px to a
   person's name; narrow cards (the cols-3 row) stay under the cap untouched. */
.sor-dist-lab { flex: 0 0 44%; max-width: 260px; font-size: 12.5px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.sor-dist-n { flex: 0 0 30px; 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. */
.sor-dist .progress > i.is-blank {
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--muted) 34%, transparent) 0 4px,
    transparent 4px 8px);
}

/* Ageing pill on the open-items queue --------------------------------------*/
.sor-age { display: inline-flex; align-items: center; gap: 6px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.sor-age .d { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* Single-line cells. Observer and contractor names run long ("Cornerstone
   Industrial Group Corp.", "Neftalí Figueroa Safety captain") and wrapping them
   triples every row's height; 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. ------------------------*/
.sor-cell { display: block; max-width: 132px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* Narrative cell: two stacked lines, clamped, full text in the row modal ----*/
.sor-narrative { max-width: 300px; }
.sor-narrative b { display: block; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.sor-narrative small { display: block; color: var(--muted); font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

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

/* Month columns chart ------------------------------------------------------*/
.sor-months { display: block; width: 100%; }

@media (max-width: 720px) {
  .sor-dist-lab { flex: 0 0 40%; }
  .sor-narrative { max-width: 200px; }
}