/* ---- The Assessor view, last of four sheets (`pages_assessor.css`):
   the tables, the matrix, Table C.1, a wide table stacked on a phone, and
   the tones, last so they win. ---- */

/* Tables: a head row and rows, or D3's label and value pairs. A headed
   table never splits a word: it takes the width its words need and scrolls
   inside its card when the card is narrower. */
.aucra-assessor-scroll {
  overflow-x: auto;
  border-top: 1px solid var(--line);
}
.aucra-assessor-table {
  width: 100%;
  border-collapse: collapse;
}
.aucra-assessor-wide .aucra-assessor-table {
  min-width: 720px;
}
.aucra-assessor-table th,
.aucra-assessor-table td {
  padding: 7px 18px 7px 0;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--line);
  overflow-wrap: normal;
  word-break: normal;
}
/* In a headed table a status, a muted word ("Not answered", 尚未回答) and a
   hyphenated token stay on one line. A muted note is a sentence and wraps:
   it once held a criteria table at 2577 px (#167). `:where` keeps the rule
   light, so a cell as wide as its card can lift it below. */
.aucra-assessor-table:not(.aucra-assessor-pairs) :where(
  .aucra-assessor-joined, td.aucra-assessor-met, td.aucra-assessor-progress,
  td.aucra-assessor-not_met, td.aucra-assessor-muted.aucra-assessor-word
) {
  white-space: nowrap;
}
/* A cell as wide as its card, in a one column table or a stacked row,
   breaks a token only when it cannot fit; a status still keeps one line
   (#179). */
.aucra-assessor-single td,
.aucra-assessor-single .aucra-assessor-joined {
  white-space: normal;
  overflow-wrap: anywhere;
}
.aucra-assessor-table th:first-child,
.aucra-assessor-table td:first-child {
  padding-left: 18px;
}
.aucra-assessor-table tr:first-child > * {
  border-top: 0;
}
.aucra-assessor-table thead th {
  background: var(--wash-head);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--muted);
}
.aucra-assessor-table thead + tbody tr:first-child > * {
  border-top: 1px solid var(--line);
}
.aucra-assessor-pairs th {
  width: 32%;
  font-weight: var(--weight-text);
  color: var(--muted);
}
/* A value may be one long token, a fingerprint or an address. */
.aucra-assessor-pairs td {
  overflow-wrap: anywhere;
}
/* So may a headed table's cell, Appendix B's SHA-256: it breaks inside its
   cell, so the table fits a desktop card and Cited by stays in view (#180).
   Only the mark breaks; a name or a status keeps its wrapping. */
.aucra-assessor-table td.aucra-assessor-token {
  overflow-wrap: anywhere;
}
/* Narrow: a label stands above its value, so no word splits. */
@media (max-width: 640px) {
  .aucra-assessor-pairs,
  .aucra-assessor-pairs tbody,
  .aucra-assessor-pairs tr,
  .aucra-assessor-pairs th,
  .aucra-assessor-pairs td {
    display: block;
    width: auto;
  }
  .aucra-assessor-pairs th {
    padding-bottom: 0;
  }
  .aucra-assessor-pairs td {
    padding: 2px 18px 7px;
    border-top: 0;
  }
}

/* The matrix in the document's narrower card: the counts take the room
   their figures need, the clause's title and output the rest. */
@media (min-width: 1025px) {
  .aucra-assessor-matrix :is(.aucra-cmatrix-head, .aucra-cmatrix-row) {
    grid-template-columns: 70px minmax(0, 1fr) 160px 84px 56px;
  }
}

/* Table C.1: the requirement on one or two lines, the references the room
   they need for one reference and its pill a line, the remarks the rest. */
.aucra-assessor-c1 :is(th, td):nth-child(1) {
  width: 150px;
}
.aucra-assessor-c1 :is(th, td):nth-child(2) {
  min-width: 300px;
}
.aucra-assessor-c1 :is(th, td):nth-child(3) {
  width: 32%;
}
.aucra-assessor-c1 ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.aucra-assessor-c1 li + li {
  margin-top: 3px;
}
.aucra-assessor-c1 .aucra-chip {
  margin-left: 4px;
  vertical-align: 1px;
}

/* A wide table (Table C.1, Appendix A) stacks on a phone: each row a block,
   each cell under its column's name (#167). The head row stays for screen
   readers, which hear the roles the markup sets, so the name drawn above a
   cell is silent to them. */
@media (max-width: 640px) {
  .aucra-assessor-wide .aucra-assessor-table,
  .aucra-assessor-wide .aucra-assessor-table :is(tbody, tr, td) {
    display: block;
    width: auto;
    min-width: 0;
  }
  .aucra-assessor-wide .aucra-assessor-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .aucra-assessor-wide .aucra-assessor-table tr {
    padding: 8px 18px;
    border-top: 1px solid var(--line);
  }
  /* Specific enough to outweigh the first row's cell borders above. */
  .aucra-assessor-wide .aucra-assessor-table tbody tr > td {
    padding: 0 0 6px;
    border-top: 0;
  }
  .aucra-assessor-wide td,
  .aucra-assessor-wide .aucra-assessor-joined {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .aucra-assessor-wide .aucra-assessor-table td::before {
    content: attr(data-label) / "";
    display: block;
    font-size: 12px;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--muted);
  }
}

/* Tones, after the plain rules so they win. */
.aucra-assessor-muted { color: var(--muted); }
.aucra-assessor-met { color: var(--pass); font-weight: var(--weight-bold); }
.aucra-assessor-progress { color: var(--gold-deep); }
.aucra-assessor-not_met,
.aucra-assessor-warn { color: var(--warn); }
.aucra-assessor-not_met { font-weight: var(--weight-bold); }
/* An id (T-06) never breaks at its hyphen. */
.aucra-assessor-id {
  white-space: nowrap;
}