/* ---- The Assessor view, second of four sheets (`pages_assessor.css`):
   the document's headings and a section's card, its head, the cover and
   its region, row and line blocks. ---- */

/* The document's headings (h2 a section, h3 a region, h4 a row block) are
   for screen readers; they take the look of their class, not Quasar's
   heading sizes. Specificity of one element, so every class rule wins. */
:where(.aucra-assessor-doc) :is(h2, h3, h4, h5, h6, [role="heading"]) {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* A section's card: its head, then its blocks. */
.aucra-assessor-section {
  overflow: hidden;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.aucra-assessor-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
  padding: 14px 18px;
  background: var(--wash-head);
  border-bottom: 1px solid var(--soft-line);
}
/* The gold mark every section card's head carries (pages_soft.css). */
.aucra-assessor-head::before {
  content: "";
  flex: 0 0 4px;
  align-self: center;
  height: 14px;
  border-radius: 2px;
  background: var(--gold);
}
.aucra-assessor-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
  /* A long title wraps beside its gold mark, not below it, at 390 px; the
     status chip wraps below first. */
  flex: 1 1 15rem;
  min-width: 0;
}
/* A section's title as the board's card heads draw it. */
.aucra-assessor-head .aucra-panel-title {
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--weight-bold);
}
/* A contents link lands focus here (focus_view.js), drawn as the skip
   link's ring, inside the card, which clips what passes its edge. */
.aucra-assessor-head:focus {
  outline: none;
}
.aucra-assessor-head:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}
.aucra-assessor-number {
  font-size: 13px;
  color: var(--gold-deep);
}
.aucra-assessor-head > .aucra-chip {
  align-self: center;
}
/* The summary's head: "20 clauses", then one pill and its count per status. */
.aucra-assessor-tally,
.aucra-assessor-pill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}
.aucra-assessor-tally {
  column-gap: 8px;
}
.aucra-assessor-pill {
  gap: 6px;
  font-size: 12.5px;
}
.aucra-assessor-count {
  font-size: 12.5px;
  color: var(--muted);
}
.aucra-assessor-cover {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 22px 18px 18px;
}
.aucra-assessor-eyebrow {
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--gold-deep);
}
.aucra-assessor-product {
  font-family: var(--font-head);
  font-weight: var(--weight-light);
  font-size: 28px;
  line-height: 1.2;
}
.aucra-assessor-draft-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 13px;
}
.aucra-assessor-draft {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--warn);
  background: var(--warn-wash);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
}
/* x.2 to x.5 outrank a row block: caps at 12.5 px over a row's 13 px. */
.aucra-assessor-region {
  padding: 14px 18px 6px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--muted);
}
.aucra-assessor-row {
  padding: 14px 18px 6px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  font-weight: var(--weight-bold);
}
/* "6.4.3.2 INPUT" is one run, its number in the region's own type. */
.aucra-assessor-region .aucra-assessor-number {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
.aucra-assessor-line,
.aucra-assessor-note,
.aucra-assessor-para {
  margin: 0;
  padding: 6px 18px;
}
.aucra-assessor-note {
  font-size: 12.5px;
}
/* A section's head sits clear of the page's header when a contents link
   or a ?region= lands on it. */
.aucra-assessor-head {
  scroll-margin-top: 72px;
}