/* Matrix (matrix-ui.js): the Reps screen. Status bar, toolbar, then one row per rep with a strip of course squares
   (squares.css draws the squares). Colours are theme tokens from theme-tokens.css; corners are square. */
.mx { display: flex; flex-direction: column; gap: 12px; }
.mx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mx-num, .mx-count { font-family: 'DM Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* Status bar: one stacked bar, a segment per standing; shape plus colour, as the squares. */
.mx-bar { display: flex; gap: 2px; height: 28px; }
.mx-bar-empty { height: 0; }
.mx-seg {
  display: flex; align-items: center; justify-content: center; min-width: 24px; flex-basis: 0; padding: 0 6px;
  border: 1.5px solid var(--th-border); border-radius: 0; font: inherit; font-size: 12px; cursor: pointer; color: var(--th-text);
}
.mx-seg[aria-pressed="true"] { outline: 2px solid var(--th-text); outline-offset: 1px; }
.mx-seg:focus-visible { outline: 2px solid var(--th-focus); outline-offset: 2px; }
.mx .mx-seg-certified { background: var(--th-ok); border-color: var(--th-ok); color: var(--th-surface); }
.mx .mx-seg-progress { background: linear-gradient(to top, var(--th-info) 50%, var(--th-info-tint) 50%); border-color: var(--th-info); }
.mx .mx-seg-stalled { background: repeating-linear-gradient(135deg, var(--th-bad) 0 3px, var(--th-bad-tint) 3px 6px); border-color: var(--th-bad); }
.mx .mx-seg-not-started { background: var(--th-warn-tint); border-color: var(--th-warn); border-style: dotted; }
.mx .mx-seg-unassigned { background: transparent; border-style: dashed; border-color: var(--th-text-3); }
.mx-seg .mx-num { padding: 0 4px; background: var(--th-surface); color: var(--th-text); }
.mx-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--th-text-2); }
.mx-key li { display: inline-flex; align-items: center; gap: 6px; }
.mx-swatch { display: inline-block; width: 10px; height: 10px; border: 1.5px solid var(--th-text-3); box-sizing: border-box; }

/* Toolbar */
.mx-tools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; }
.mx-field { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.mx-search { flex: 2; min-width: 180px; }
.mx-label { font-size: 12px; font-weight: 700; color: var(--th-text-2); }
.mx-field input, .mx-field select { padding: 6px 8px; border: 1px solid var(--th-border); border-radius: 0; background: var(--th-surface); color: var(--th-text); font: inherit; }
.mx-modes { display: inline-flex; }
.mx-mode, .mx-admin, .mx-bulk, .mx-open, .mx-sort {
  padding: 6px 10px; border: 1px solid var(--th-border); border-radius: 0; background: var(--th-surface); color: var(--th-text);
  font: inherit; font-size: 13px; text-decoration: none; cursor: pointer;
}
.mx-mode + .mx-mode { border-left: 0; }
.mx-mode[aria-pressed="true"] { background: var(--th-selected); color: var(--th-on-selected); border-color: var(--th-border-strong); }
.mx-sort { border: 0; padding: 0; background: transparent; font-weight: 700; }
.mx-count { color: var(--th-text-2); font-size: 13px; padding-bottom: 6px; }
.mx-mode:focus-visible, .mx-admin:focus-visible, .mx-bulk:focus-visible, .mx-open:focus-visible, .mx-sort:focus-visible { outline: 2px solid var(--th-focus); outline-offset: 2px; }

/* Matrix */
.mx-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mx-table th, .mx-table td { padding: 6px 8px; border-bottom: 1px solid var(--th-border); text-align: left; vertical-align: middle; }
.mx-table thead th { font-size: 12px; color: var(--th-text-2); }
.mx-name { font-weight: 600; white-space: nowrap; }
.mx-day { text-align: right; width: 4ch; }
.mx-actions { white-space: nowrap; }
.mx-acts { display: flex; gap: 6px; }
.mx-cell[aria-disabled="true"] { cursor: default; }
/* Not assigned: the dashed edge in --th-text-3, since --th-border is 1.4-1.9:1 on the panel. */
.mx-cell.sq-none { --sq-ink: var(--th-text-3); }
.mx-cell[aria-pressed="false"].sq-none:hover { border-color: var(--th-text-2); }
@media (pointer: coarse) {
  .mx-cell { width: 44px; height: 44px; }
  .mx-bulk, .mx-open, .mx-admin, .mx-mode, .mx-sort { min-height: 44px; display: inline-flex; align-items: center; }
}
.mx-you { font-weight: 400; color: var(--th-text-3); font-size: 12px; }
.mx-empty { margin: 0; padding: 12px 0; border-top: 1px solid var(--th-border); color: var(--th-text-2); }

/* Phone: one card per rep. Name and day on top, each stage's squares wrap across the full width under its label,
   the buttons last. The table's column layout squeezed each stage into a column one square wide. */
@media (max-width: 700px) {
  .mx-table:not(.mx-managers) thead { display: none; }
  .mx-table:not(.mx-managers), .mx-table:not(.mx-managers) tbody { display: block; width: 100%; }
  .mx-table:not(.mx-managers) tr { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--th-border); }
  .mx-table:not(.mx-managers) th, .mx-table:not(.mx-managers) td { display: block; padding: 0; border: 0; }
  .mx-table:not(.mx-managers) .mx-name { grid-column: 1; white-space: normal; font-size: 15px; }
  .mx-table:not(.mx-managers) .mx-day { grid-column: 2; grid-row: 1; width: auto; color: var(--th-text-2); }
  .mx-table:not(.mx-managers) .mx-day::before { content: 'Day '; font-family: inherit; }
  .mx-table:not(.mx-managers) .mx-stage { grid-column: 1 / -1; }
  .mx-table:not(.mx-managers) .mx-stage::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--th-text-2); }
  .mx-table:not(.mx-managers) .mx-stage .sq-strip { flex-wrap: wrap; }
  .mx-table:not(.mx-managers) .mx-actions { grid-column: 1 / -1; }
  .mx-table:not(.mx-managers) .mx-acts { flex-wrap: wrap; }
}