/* A page graded against the pages engines cite (WRT P2; page-grade.js). Drawn inside the canvas's
   Grade list, Check a page and the audit drawer. Tokens only; state is a glyph with a word. */
.pg { display: grid; gap: 2px; margin-top: 8px; }
.pg-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 4px 8px; }
.pg-ht { font: 600 var(--text-sm)/1.3 var(--sans); color: var(--ink); }
.pg-q { font: 400 var(--text-xs)/1.3 var(--sans); color: var(--muted); }
.pg-m { font: 400 var(--text-xs)/1.3 var(--mono); color: var(--faint); }
.pg-lim, .pg-absent { padding: 0 8px 6px; font: 400 var(--text-xs)/1.4 var(--sans); color: var(--muted); }
.pg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 6px 8px;
  border-top: 1px solid var(--line); font: 400 var(--text-sm)/1.35 var(--sans); color: var(--ink); }
.pg-row.dim { color: var(--muted); }
.pg-t { min-width: 0; }
.pg-st { justify-self: end; display: inline-flex; align-items: center; gap: 4px; font: 500 var(--text-xs)/1.3 var(--sans); white-space: nowrap; }
.pg-g { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }
.pg-st.st-pass { color: var(--ok); }
.pg-st.st-pass .pg-g { background: currentColor; }
.pg-st.st-fail { color: var(--danger); }
.pg-st.st-not_assessed { color: var(--faint); }
.pg-st.st-not_assessed .pg-g { border-style: dashed; }
.pg-rate, .pg-band, .pg-v, .pg-why { grid-column: 1 / -1; font: 400 var(--text-xs)/1.35 var(--sans); color: var(--muted); }
.pg-rate, .pg-band { font-family: var(--mono); }
.pg-pick { margin: 0; padding: 4px 0 6px; border: 0; }
.pg-pick legend { padding: 0 8px 4px; }
.pg-qrow { display: flex; align-items: flex-start; gap: 6px; padding: 4px 8px; border-radius: var(--r-sm);
  font: 400 var(--text-sm)/1.35 var(--sans); color: var(--ink); cursor: pointer; }
.pg-qrow:hover { background: var(--wash-hover); }
.pg-qrow input { flex: none; width: auto; height: auto; margin: 2px 0 0; accent-color: var(--accent); }
.pg-qrow span { flex: 1; min-width: 0; text-align: left; }
.cv-gpop { width: min(420px, 92vw); }
.cv-gpop > .cv-btn-s { margin: 2px 8px 4px; }
.v2-ck-grade { display: block; }
.v2-ck-grade > .v2-btn { display: inline-flex; width: auto; margin: 2px 8px 6px; }
/* The grade's before and after (WRT P7, 7-iv): what the version before read, where a check changed. */
.pg-vs { margin: 4px 0 8px; font: 400 var(--text-xs)/1.4 var(--sans); color: var(--muted); }
.pg-was { font: 400 var(--text-xs)/1.4 var(--sans); color: var(--muted); }